feat(WEB-250): overview hero final ui

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

@@ -1,13 +1,13 @@
-import Title from "@/components/Title"
+import { _ } from "@/lib/translation"
+
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./howItWorks.module.css"
 
 export default function HowItWorks() {
   return (
     <section className={styles.container}>
-      <Title level="h3" uppercase>
-        How it works Placeholder
-      </Title>
+      <Title level="h3">{_("How it works Placeholder")}</Title>
     </section>
   )
 }

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

@@ -9,13 +9,13 @@ import { _ } from "@/lib/translation"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/Title"
+import Title from "@/components/TempDesignSystem/Title"
 
 import levelsData from "./data"
 
 import styles from "./loyaltyLevels.module.css"
 
-import { Level, LevelCardProps } from "@/types/components/loyalty/blocks"
+import type { Level, LevelCardProps } from "@/types/components/loyalty/blocks"
 
 export default function LoyaltyLevels() {
   const { lang } = useParams()

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -59,16 +59,15 @@
   height: 1.4rem;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .container {
     gap: 3.2rem;
   }
+
   .cardContainer {
     display: grid;
-    grid-template-columns: repeat(
-      12,
-      auto
-    ); /* Three columns in the first row */
+    grid-template-columns: repeat(12, auto);
+    /* Three columns in the first row */
     padding-right: 0;
     margin-right: 0rem;
   }

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx

@@ -1,7 +1,7 @@
 import { ChevronDown, Minus } from "react-feather"
 
 import CheckCircle from "@/components/Icons/CheckCircle"
-import Title from "@/components/Title"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./benefitCard.module.css"
 

components/Loyalty/Blocks/DynamicContent/OverviewTable/Title/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from "react"
 
-import Title from "@/components/Title"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./overviewTableTitle.module.css"
 
@@ -8,7 +8,7 @@ import { OverviewTableTitleProps } from "@/types/components/loyalty/blocks"
 
 export default function OverviewTableTitle({ texts }: OverviewTableTitleProps) {
   return (
-    <Title as="h1" level="h1" weight="semiBold" uppercase>
+    <Title>
       {texts.map(({ text, highlight }, idx) => (
         <Fragment key={idx}>
           <span className={highlight ? styles.highlight : ""}>{text}</span>

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -1,5 +1,6 @@
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/Title"
+import Subtitle from "@/components/TempDesignSystem/Subtitle"
+import Title from "@/components/TempDesignSystem/Title"
 
 import HowItWorks from "./HowItWorks"
 import LoyaltyLevels from "./LoyaltyLevels"
@@ -36,36 +37,21 @@ export default function DynamicContent({
   )
   return (
     <section className={styles.container}>
-      {displayHeader && (
+      {displayHeader ? (
         <header className={styles.titleContainer}>
-          {dynamicContent.title && (
-            <Title
-              as="h3"
-              level="h2"
-              className={styles.title}
-              weight="semiBold"
-              uppercase
-            >
-              {dynamicContent.title}
-            </Title>
-          )}
+          <Title as="h3" className={styles.title} level="h2">
+            {dynamicContent.title}
+          </Title>
           {dynamicContent.link ? (
             <Link className={styles.link} href={dynamicContent.link.href}>
               {dynamicContent.link.text}
             </Link>
           ) : null}
-          {dynamicContent.subtitle && (
-            <Title
-              as="h5"
-              level="h3"
-              weight="regular"
-              className={styles.subtitle}
-            >
-              {dynamicContent.subtitle}
-            </Title>
-          )}
+          <Subtitle className={styles.subtitle}>
+            {dynamicContent.subtitle}
+          </Subtitle>
         </header>
-      )}
+      ) : null}
       <DynamicComponentBlock component={dynamicContent.component} />
     </section>
   )