feat: finish my pages overview page according to wireframe

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

@@ -0,0 +1,157 @@
+.challenges {
+  --card-height: 23.6rem;
+  --gap: 0.4rem;
+  --radius: 0.4rem;
+
+  display: grid;
+  gap: 1.6rem;
+  grid-template-areas:
+    "header"
+    "section"
+    "aside";
+  max-width: var(--max-width);
+}
+
+.header {
+  grid-area: header;
+}
+
+.subtitle {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-biro-script-plus); */
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 1.8rem;
+  margin: 0;
+}
+
+.title {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-brandon-text); */
+  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;
+  grid-area: section;
+}
+
+.journeys {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: 1fr 1fr;
+}
+
+.journey {
+  align-content: center;
+  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2));
+  border-radius: var(--radius);
+  display: grid;
+  gap: 1.2rem;
+  height: var(--card-height);
+  justify-items: center;
+}
+
+.journey:first-of-type {
+  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1));
+}
+
+.aside {
+  display: grid;
+  gap: 0.8rem;
+  grid-area: aside;
+  grid-template-rows: auto 1fr;
+}
+
+.victories {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: repeat(2, minmax(11.6rem, 1fr));
+}
+
+.victory {
+  align-content: center;
+  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1));
+  border-radius: var(--radius);
+  display: grid;
+  gap: 0.6rem;
+  height: 100%;
+  justify-items: center;
+}
+
+.victory:first-of-type {
+  background-color: var(--some-grey-color, rgba(3, 3, 3, 0.3));
+}
+
+.victory:last-of-type {
+  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2));
+}
+
+.circle {
+  display: none;
+}
+
+@media screen and (max-width: 950px) {
+  .victory:first-of-type {
+    grid-row: 1 / -1;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .challenges {
+    gap: 2.6rem 1.5rem;
+    grid-template-areas:
+      "header  header"
+      "section aside";
+    grid-template-columns: 1fr 16.6rem;
+  }
+
+  .journeys {
+    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;
+  }
+
+  .circle {
+    align-items: center;
+    background-color: var(--some-white-color, #fff);
+    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

@@ -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>
+  )
+}