feat: loosen up the zod validations and return null instead of throwing

components/MyPages/Blocks/Challenges/challenges.module.css

@@ -17,29 +17,6 @@
   grid-area: header;
 }
 
-.subtitle {
-  color: var(--some-black-color, #000);
-  font-family: var(--typography-Script-1-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 400;
-  line-height: 1.8rem;
-  margin: 0;
-}
-
-.title {
-  color: var(--some-black-color, #000);
-  font-family: var(--typography-Title-1-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 900;
-  inline-size: 18rem;
-  line-height: 1.8rem;
-  margin: 0;
-  overflow-wrap: break-word;
-  padding: 0;
-  text-align: center;
-  text-transform: uppercase;
-}
-
 .section {
   display: grid;
   gap: 0.8rem;
@@ -121,17 +98,6 @@
     grid-template-columns: 1fr;
   }
 
-  .journey .subtitle {
-    font-size: 2.6rem;
-    line-height: 3.2rem;
-  }
-
-  .journey .title {
-    font-size: 2.6rem;
-    inline-size: 25rem;
-    line-height: 3.2rem;
-  }
-
   .victories {
     grid-template-columns: 1fr;
     grid-template-rows: var(--card-height) 1fr 1fr;
@@ -139,20 +105,11 @@
 
   .circle {
     align-items: center;
-    background-color: var(--some-white-color, #fff);
+    background-color: var(--Main-Grey-White);
     border-radius: 50%;
     display: flex;
     height: 2rem;
     justify-content: center;
     width: 2rem;
   }
-
-  .victory .subtitle {
-    font-size: 1.3rem;
-    line-height: 1.6rem;
-  }
-
-  .victory .title {
-    inline-size: 13rem;
-  }
 }

components/MyPages/Blocks/Challenges/index.tsx

@@ -1,4 +1,5 @@
 import Image from "@/components/Image"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
@@ -25,8 +26,10 @@ export default async function Challenges({
         <section className={styles.journeys}>
           {journeys.map((journey) => (
             <article className={styles.journey} key={journey.title}>
-              <p className={styles.subtitle}>{journey.tag}</p>
-              <h4 className={styles.title}>{journey.title}</h4>
+              <BiroScript color="black">{journey.tag}</BiroScript>
+              <Title as="h5" level="h4">
+                {journey.title}
+              </Title>
             </article>
           ))}
         </section>
@@ -48,8 +51,10 @@ export default async function Challenges({
                   width={12}
                 />
               </div>
-              <p className={styles.subtitle}>{victory.tag}</p>
-              <h4 className={styles.title}>{victory.title}</h4>
+              <BiroScript color="black">{victory.tag}</BiroScript>
+              <Title as="h5" level="h4">
+                {victory.title}
+              </Title>
             </article>
           ))}
         </section>