feat: finish my pages overview page according to wireframe

components/MyPages/Blocks/Overview/CopyButton.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Image from "@/components/Image"
+
+import type { User } from "@/types/user"
+
+export default function CopyButton({
+  membershipId,
+}: Pick<User, "membershipId">) {
+  function handleCopy() {
+    console.log(`COPIED! (${membershipId})`)
+  }
+
+  return (
+    <Button onClick={handleCopy} type="button" variant="icon">
+      <Image alt="Copy Icon" height={20} src="/copy.svg" width={20} />
+    </Button>
+  )
+}

components/MyPages/Blocks/Overview/MembershipCardButton.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Image from "@/components/Image"
+
+import styles from "./btn.module.css"
+
+export default function MembershipCardButton() {
+  function handleShowMembershipCard() {
+    console.log(`Showing membership card`)
+  }
+  return (
+    <Button
+      className={styles.membershipBtn}
+      onClick={handleShowMembershipCard}
+      type="button"
+    >
+      <span>Membership Card</span>
+      <Image alt="QR icon" height={20} src="/qr.svg" width={20} />
+    </Button>
+  )
+}

components/MyPages/Blocks/Overview/Mobile/index.tsx

@@ -1,7 +1,7 @@
 import Breadcrumbs from "@/components/MyPages/Header/Breadcrumbs"
 import Title from "@/components/MyPages/Title"
 
-import styles from "./overview.module.css"
+import styles from "./mobile.module.css"
 
 export default function OverviewMobile() {
   return (

components/MyPages/Blocks/Overview/Mobile/mobile.module.css

@@ -0,0 +1,16 @@
+.overviewMobile {
+  background-color: var(--some-grey-color, #f2f2f2);
+  left: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  padding: 3.5rem 2rem 2rem;
+  position: relative;
+  right: 50%;
+  width: 100dvw;
+}
+
+@media screen and (min-width: 950px) {
+  .overviewMobile {
+    display: none;
+  }
+}

components/MyPages/Blocks/Overview/btn.module.css

@@ -0,0 +1,5 @@
+@media screen and (max-width: 950px) {
+  .membershipBtn {
+    display: none;
+  }
+}

components/MyPages/Blocks/Overview/index.tsx

@@ -1,5 +1,84 @@
+import CopyButton from "./CopyButton"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Image from "@/components/Image"
+import MembershipCardButton from "./MembershipCardButton"
+import ProgressBar from "@/components/TempDesignSystem/ProgressBar"
+import Title from "@/components/MyPages/Title"
+
 import styles from "./overview.module.css"
 
-export default function Overview() {
-  return <section className={styles.overview}></section>
+import type { OverviewProps } from "@/types/components/myPages/overview"
+import Link from "next/link"
+
+export default function Overview({ user }: OverviewProps) {
+  return (
+    <section className={styles.container}>
+      <header className={styles.header}>
+        <Title uppercase>Good morning {user.name}</Title>
+      </header>
+      <section className={styles.overview}>
+        <section className={styles.friend}>
+          <p className={styles.level}>Current level:</p>
+          <Image
+            alt="Good Friend"
+            height={70}
+            src="/good-friend.svg"
+            width={228}
+          />
+          <h3 className={styles.name}>{user.name}</h3>
+          <div className={styles.membershipContainer}>
+            <p className={styles.membershipId}>{user.membershipId}</p>
+            <CopyButton membershipId={user.membershipId} />
+          </div>
+          <MembershipCardButton />
+        </section>
+        <section className={styles.stats}>
+          <div>
+            <h4 className={styles.pointsTitle}>Total Points</h4>
+            <Divider variant="dotted" />
+            <p className={styles.points}>{user.points}</p>
+          </div>
+          <div className={styles.qualifyingPoints}>
+            <h4 className={styles.pointsTitle}>Progress</h4>
+            <Divider variant="dotted" />
+            <div className={styles.pointsContainer}>
+              <div className={styles.pointsProgress}>
+                <Image
+                  alt="Arrow Up Icon"
+                  height={24}
+                  src="/arrow_upward.svg"
+                  width={24}
+                />
+                <p className={styles.point}>{user.qualifyingPoints}</p>
+                <h5 className={styles.pointsProgressTitle}>
+                  Qualifying points
+                </h5>
+              </div>
+              <div className={styles.pointsProgress}>
+                <Image
+                  alt="Arrow Up Icon"
+                  height={24}
+                  src="/arrow_upward.svg"
+                  width={24}
+                />
+                <p className={styles.point}>{user.nights}</p>
+                <h5 className={styles.pointsProgressTitle}>Nights</h5>
+              </div>
+            </div>
+          </div>
+          <div className={styles.progress}>
+            <ProgressBar className={styles.progressbar} progress={70} />
+            <h4 className={styles.progressTitle}>Progress</h4>
+            <p className={styles.pointsRemaining}>
+              14 680 points until next level
+            </p>
+            <p className={styles.target}>Close friend</p>
+          </div>
+        </section>
+        <Link className={styles.link} href="#">
+          Go to my points
+        </Link>
+      </section>
+    </section>
+  )
 }

components/MyPages/Blocks/Overview/overview.module.css

@@ -1,34 +1,294 @@
+.container {
+  background-color: var(--some-grey-color, #f2f2f2);
+}
+
 .overview {
+  display: grid;
+}
+
+.friend {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.level {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-biro-script-plus); */
+  font-size: 2.1rem;
+  font-weight: 400;
+  letter-spacing: 4%;
+  line-height: 3.6rem;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.name {
+  color: var(--some-black-color, #111);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 2.8rem;
+  font-weight: 900;
+  letter-spacing: -3%;
+  line-height: 2.8rem;
+  margin: 1.6rem 0 1.8rem;
+  text-transform: uppercase;
+}
+
+.membershipContainer {
+  align-items: center;
+  display: flex;
+  gap: 0.8rem;
+  margin-bottom: 2.2rem;
+}
+
+.membershipId {
+  color: var(--some-black-color, #1e1e1e);
+  font-family: var(--ff-fira-mono);
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 6%;
+  line-height: 1.8rem;
+  margin: 0;
+}
+
+.qualifyingPoints {
   display: none;
 }
 
-.overviewMobile {
-  background-color: var(--some-grey-color, #f2f2f2);
-  left: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-  padding: 3.5rem 2rem 2rem;
-  position: relative;
-  right: 50%;
-  width: 100dvw;
+.pointsTitle {
+  color: var(--some-grey-color, #000);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 0.6%;
+  line-height: 1.7rem;
+  margin: 0 0 0.7rem;
+}
+
+.points {
+  color: var(--some-black-color, #111);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 3.7rem;
+  font-weight: 900;
+  letter-spacing: -3%;
+  line-height: 3.7rem;
+  margin: 1.4rem 0;
+}
+
+.progressTitle {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 0.6%;
+  line-height: 1.7rem;
+  margin: 0;
+}
+
+.pointsRemaining {
+  color: var(--some-grey-color, #4f4f4f);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 0.6%;
+  line-height: 1.7rem;
+  margin: 1rem 0 0;
+}
+
+.link {
+  color: var(--some-black-color, #111);
+  font-family: var(--ff-fira-sans);
+  font-size: 1.4rem;
+  font-weight: 600;
+  justify-self: flex-end;
+  letter-spacing: 1.2%;
+  line-height: 2rem;
+  margin-top: 2.8rem;
+  text-decoration: none;
+}
+
+.target {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-biro-script-plus); */
+  font-size: 1.8rem;
+  font-weight: 400;
+  letter-spacing: 4%;
+  line-height: 3rem;
+  margin: 0;
+  text-align: right;
+}
+
+@media screen and (max-width: 950px) {
+  .container {
+    /* Full-width override styling */
+    left: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    padding: 0 2rem 2rem;
+    position: relative;
+    right: 50%;
+    width: 100dvw;
+  }
+
+  .header {
+    margin-bottom: 1rem;
+  }
+
+  .level {
+    margin-bottom: 1rem;
+    transform: translate(-60%, 40%) rotate(-20deg);
+  }
+
+  .progress {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .progressTitle {
+    order: 0;
+  }
+
+  .pointsRemaining {
+    margin-bottom: 0.8rem;
+    margin-top: 0.6rem;
+    order: 1;
+  }
+
+  .progressbar {
+    order: 2;
+  }
+
+  .target {
+    position: absolute;
+    right: 2rem;
+    transform: rotate(-15deg) translateY(-50%);
+  }
 }
 
 @media screen and (min-width: 950px) {
+  .container {
+    background-color: var(--some-white-color, #fff);
+    display: grid;
+    gap: 2.2rem;
+  }
+
   .overview {
     background-color: var(--some-grey-color, #f2f2f2);
     border-radius: 0.8rem;
-    display: block;
-    height: 35rem;
+    gap: 4rem;
+    grid-template-columns: 1fr 1fr;
+    justify-content: center;
     left: unset;
     margin-left: unset;
     margin-right: unset;
     max-width: var(--max-width);
+    padding: 3.5rem 2rem;
     position: static;
     right: unset;
     width: 100%;
   }
 
-  .overviewMobile {
+  .friend {
+    justify-self: flex-end;
+  }
+
+  .level {
+    margin-bottom: 2.4rem;
+  }
+
+  .name {
+    margin: 3rem 0 1.8rem;
+  }
+
+  .membershipContainer {
+    margin-bottom: 4rem;
+  }
+
+  .stats {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    max-width: 32rem;
+  }
+
+  .qualifyingPoints {
+    display: block;
+  }
+
+  .pointsTitle {
+    color: var(--some-grey-color, #4f4f4f);
+    font-size: 1.2rem;
+  }
+
+  .points {
+    margin: 1.4rem 0 0;
+  }
+
+  .pointsContainer {
+    display: grid;
+    gap: 3.8rem;
+    grid-template-columns: auto 1fr;
+    margin-top: 1.5rem;
+  }
+
+  .pointsProgress {
+    align-items: center;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: auto 1fr;
+  }
+
+  .point {
+    /* font-family: var(--ff-brandon-text); */
+    font-size: 2.7rem;
+    font-weight: 900;
+    line-height: 2.7rem;
+    margin: 0;
+  }
+
+  .pointsProgressTitle {
+    font-family: var(--ff-fira-sans);
+    font-size: 1.2rem;
+    font-weight: 400;
+    letter-spacing: 0.6%;
+    line-height: 1.4rem;
+    grid-column: 1/-1;
+    margin: 0;
+  }
+
+  .progressTitle {
+    display: none;
+  }
+
+  .pointsRemaining {
+    font-size: 1.2rem;
+  }
+
+  .target {
+    position: relative;
+  }
+
+  .target::after {
+    --height: 3.2rem;
+    --width: 4.5rem;
+
+    background-image: url("/arrow_biro.svg");
+    background-repeat: no-repeat;
+    content: " ";
+    display: inline-block;
+    height: var(--height);
+    position: relative;
+    top: calc(var(--height) - var(--width));
+    width: var(--width);
+  }
+
+  .link {
     display: none;
   }
 }
+
+@media screen and (min-width: 1100px) {
+  .overview {
+    gap: 10rem;
+  }
+}