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

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>