refactor: zod validation and pr comments

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"