refactor: zod validation and pr comments

components/Loyalty/Blocks/CardGrid/index.tsx

@@ -5,7 +5,7 @@ import Title from "@/components/Title"
 
 import styles from "./cardGrid.module.css"
 
-import { CardGridProps, CardProps } from "@/types/components/loyalty/blocks"
+import { CardGridProps } from "@/types/components/loyalty/blocks"
 
 export default function CardGrid({ card_grid }: CardGridProps) {
   return (
@@ -27,17 +27,15 @@ export default function CardGrid({ card_grid }: CardGridProps) {
       </header>
       <div className={styles.cardContainer}>
         {card_grid.cards.map((card, i) => (
-          <CardWrapper key={`${card.title}+${i}`} card={card} />
+          <div className={styles.cardWrapper} key={`${card.title}+${i}`}>
+            <Card
+              subtitle={card.subtitle}
+              title={card.title}
+              link={card.link}
+            />
+          </div>
         ))}
       </div>
     </section>
   )
 }
-
-function CardWrapper({ card }: CardProps) {
-  return (
-    <div className={styles.cardWrapper}>
-      <Card subtitle={card.subtitle} title={card.title} link={card.link} />
-    </div>
-  )
-}

components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -4,10 +4,10 @@ import styles from "./howItWorks.module.css"
 
 export default function HowItWorks() {
   return (
-    <div className={styles.container}>
+    <section className={styles.container}>
       <Title level="h3" uppercase>
         How it works Placeholder
       </Title>
-    </div>
+    </section>
   )
 }

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -33,7 +33,7 @@ export default async function LoyaltyLevels() {
 
 function LevelCard({ level }: LevelCardProps) {
   return (
-    <div className={styles.card}>
+    <article className={styles.card}>
       <Title level="h4">{level.tier}</Title>
       <Image src={level.logo} alt={level.name} width={140} height={54} />
       <p className={styles.qualifications}>
@@ -45,6 +45,6 @@ function LevelCard({ level }: LevelCardProps) {
           {benefit}
         </p>
       ))}
-    </div>
+    </article>
   )
 }

components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css

@@ -8,7 +8,7 @@
 
 .titleContainer {
   display: grid;
-  grid-template-areas: "title link";
+  grid-template-areas: "title link" "subtitle subtitle";
   grid-template-columns: 1fr max-content;
   padding-bottom: 0.8rem;
 }
@@ -25,4 +25,5 @@
 
 .subtitle {
   margin: 0;
+  grid-area: subtitle;
 }

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -32,25 +32,23 @@ export default function DynamicContent({
 }: DynamicContentProps) {
   return (
     <section className={styles.container}>
-      <header>
-        <div className={styles.titleContainer}>
-          {dynamicContent.title && (
-            <Title
-              as="h3"
-              level="h2"
-              className={styles.title}
-              weight="semiBold"
-              uppercase
-            >
-              {dynamicContent.title}
-            </Title>
-          )}
-          {dynamicContent.link ? (
-            <Link className={styles.link} href={dynamicContent.link.href}>
-              {dynamicContent.link.text}
-            </Link>
-          ) : null}
-        </div>
+      <header className={styles.titleContainer}>
+        {dynamicContent.title && (
+          <Title
+            as="h3"
+            level="h2"
+            className={styles.title}
+            weight="semiBold"
+            uppercase
+          >
+            {dynamicContent.title}
+          </Title>
+        )}
+        {dynamicContent.link ? (
+          <Link className={styles.link} href={dynamicContent.link.href}>
+            {dynamicContent.link.text}
+          </Link>
+        ) : null}
         {dynamicContent.subtitle && (
           <Title
             as="h5"

components/Loyalty/Blocks/index.tsx

@@ -13,10 +13,12 @@ export function Blocks({ blocks }: BlocksProps) {
         return <CardGrid card_grid={block.card_grid} />
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
         return (
-          <JsonToHtml
-            nodes={block.content.content.json.children}
-            embeds={block.content.content.embedded_itemsConnection.edges}
-          />
+          <section>
+            <JsonToHtml
+              nodes={block.content.content.json.children}
+              embeds={block.content.content.embedded_itemsConnection.edges}
+            />
+          </section>
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
         return <DynamicContentBlock dynamicContent={block.dynamic_content} />