feat: finish my pages overview page according to wireframe

components/MyPages/Blocks/Challenges/index.tsx

@@ -0,0 +1,52 @@
+import Image from "@/components/Image"
+import Title from "@/components/MyPages/Title"
+
+import styles from "./challenges.module.css"
+
+import type { ChallengesProps } from "@/types/components/myPages/challenges"
+
+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>
+      </header>
+      <section className={styles.section}>
+        <header>
+          <Title level="h3">On your journey</Title>
+        </header>
+        <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>
+            </article>
+          ))}
+        </section>
+      </section>
+      <aside className={styles.aside}>
+        <header>
+          <Title level="h3">Previous victories</Title>
+        </header>
+        <section className={styles.victories}>
+          {victories.map((victory) => (
+            <article className={styles.victory} key={victory.title}>
+              <div className={styles.circle}>
+                <Image
+                  alt="Checkmark Icon"
+                  height={9}
+                  src="/check.svg"
+                  width={12}
+                />
+              </div>
+              <p className={styles.subtitle}>{victory.tag}</p>
+              <h4 className={styles.title}>{victory.title}</h4>
+            </article>
+          ))}
+        </section>
+      </aside>
+    </section>
+  )
+}