feat(WEB-250): overview hero final ui

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

@@ -100,13 +100,13 @@
   display: none;
 }
 
-@media screen and (max-width: 950px) {
+@media screen and (max-width: 1366px) {
   .victory:first-of-type {
     grid-row: 1 / -1;
   }
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .challenges {
     gap: 2.6rem 1.5rem;
     grid-template-areas:

components/MyPages/Blocks/Challenges/index.tsx

@@ -1,5 +1,7 @@
+import { _ } from "@/lib/translation"
+
 import Image from "@/components/Image"
-import Title from "@/components/Title"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./challenges.module.css"
 
@@ -9,13 +11,11 @@ export default function Challenges({ journeys, victories }: ChallengesProps) {
   return (
     <section className={styles.challenges}>
       <header className={styles.header}>
-        <Title level="h2" uppercase>
-          Your Challenges Conquer & Earn!
-        </Title>
+        <Title level="h2">{_("Your Challenges Conquer & Earn!")}</Title>
       </header>
       <section className={styles.section}>
         <header>
-          <Title level="h3">On your journey</Title>
+          <Title level="h3">{_("On your journey")}</Title>
         </header>
         <section className={styles.journeys}>
           {journeys.map((journey) => (
@@ -28,7 +28,7 @@ export default function Challenges({ journeys, victories }: ChallengesProps) {
       </section>
       <aside className={styles.aside}>
         <header>
-          <Title level="h3">Previous victories</Title>
+          <Title level="h3">{_("Previous victories")}</Title>
         </header>
         <section className={styles.victories}>
           {victories.map((victory) => (