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

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;
+  }
+}

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -0,0 +1,37 @@
+import Image from "@/components/Image"
+import Link from "next/link"
+import Title from "@/components/MyPages/Title"
+
+import styles from "./shortcuts.module.css"
+
+import type { ShortcutsProps } from "@/types/components/myPages/shortcuts"
+
+export default function Shortcuts({ shortcuts }: ShortcutsProps) {
+  return (
+    <section className={styles.shortcuts}>
+      <header className={styles.header}>
+        <Title level="h2" uppercase>
+          Handy Shortcuts
+        </Title>
+        <p className={styles.subtitle}>The community at your fingertips</p>
+      </header>
+      <section className={styles.links}>
+        {shortcuts.map((shortcut) => (
+          <Link
+            className={styles.link}
+            href={shortcut.href}
+            key={shortcut.title}
+          >
+            <span>{shortcut.title}</span>
+            <Image
+              alt="Chevron Icon"
+              height={20}
+              src="/chevron.svg"
+              width={20}
+            />
+          </Link>
+        ))}
+      </section>
+    </section>
+  )
+}

components/MyPages/Blocks/Shortcuts/shortcuts.module.css

@@ -0,0 +1,39 @@
+.shortcuts {
+  display: grid;
+  gap: 2rem;
+  max-width: var(--max-width);
+}
+
+.header {
+  display: grid;
+  gap: 2rem;
+}
+
+.subtitle {
+  font-family: var(--ff-fira-sans);
+  font-size: 1.8rem;
+  font-weight: 400;
+  line-height: 2.2rem;
+  margin: 0;
+}
+
+.links {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.link {
+  align-items: center;
+  border: 0.1rem solid var(--some-grey-color, #d9d9d9);
+  border-radius: 0.4rem;
+  color: var(--some-black-color, #000);
+  display: flex;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 700;
+  gap: 0.4rem;
+  justify-content: space-between;
+  line-height: 2.2rem;
+  padding: 1.4rem 2rem;
+  text-decoration: none;
+}

components/MyPages/Blocks/UpcomingStays/Stay/index.tsx

@@ -6,7 +6,7 @@ import Title from "@/components/MyPages/Title"
 import styles from "./stay.module.css"
 
 import type { LangParams } from "@/types/params"
-import type { StayProps } from "@/types/components/myPages/stay"
+import type { StayProps } from "@/types/components/myPages/stays"
 
 export default function Stay({
   dateArrive,
@@ -36,7 +36,7 @@ export default function Stay({
         />
       </div>
       <footer className={styles.footer}>
-        <Title level="h3" uppercase>
+        <Title as="h4" level="h3" uppercase>
           {hotel}
         </Title>
         <section className={styles.container}>

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -4,34 +4,19 @@ import Title from "@/components/MyPages/Title"
 import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
+import type { StaysProps } from "@/types/components/myPages/stays"
 
-const stays = [
-  {
-    dateArrive: new Date("04 27 2024"),
-    dateDepart: new Date("04 28 2024"),
-    guests: 2,
-    hotel: "Scandic Helsinki Hub",
-  },
-  {
-    dateArrive: new Date("05 27 2024"),
-    dateDepart: new Date("05 28 2024"),
-    guests: 2,
-    hotel: "Scandic Örebro Central",
-  },
-  {
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic Oslo City",
-  },
-]
-
-export default function UpcomingStays({ lang }: LangParams) {
+export default function UpcomingStays({
+  lang,
+  stays,
+}: StaysProps & LangParams) {
   return (
     <section className={styles.container}>
-      <Title level="h2" uppercase>
-        Your upcoming stays
-      </Title>
+      <header>
+        <Title level="h2" uppercase>
+          Your upcoming stays
+        </Title>
+      </header>
       <section className={styles.stays}>
         {stays.map((stay) => (
           <Stay key={stay.hotel} {...stay} lang={lang} />

components/MyPages/Header/header.module.css

@@ -1,6 +1,7 @@
 .container {
   position: sticky;
   top: 0;
+  z-index: 999;
 }
 
 .header {
@@ -15,7 +16,9 @@
 }
 
 .breadcrumbs {
-  display: none;
+  background-color: var(--some-grey-color, #f2f2f2);
+  display: block;
+  padding-left: 2rem;
 }
 
 @media screen and (min-width: 950px) {
@@ -30,7 +33,7 @@
   }
 
   .breadcrumbs {
-    display: block;
+    background-color: var(--some-white-color, #fff);
     padding-left: 2.4rem;
   }
 }

components/MyPages/Title/index.tsx

@@ -28,13 +28,15 @@ const headingStyles = cva(styles.heading, config)
 export default function Title({
   as,
   children,
+  className = "",
   level = "h1",
   uppercase = false,
 }: HeadingProps) {
   const Hx = level
-  const className = headingStyles({
+  const classNames = headingStyles({
+    className,
     text: uppercase ? "uppercase" : undefined,
     type: as ?? level,
   })
-  return <Hx className={className}>{children}</Hx>
+  return <Hx className={classNames}>{children}</Hx>
 }

components/MyPages/Title/title.module.css

@@ -19,16 +19,17 @@
 }
 
 .h3 {
+  font-size: 1.8rem;
+  line-height: 2.2rem;
+}
+
+.h4 {
   font-size: 1.6rem;
   line-height: 1.8rem;
 }
 
-.h4 {
-  font-size: 1.4rem;
-}
-
 .h5 {
-  font-size: 1.2rem;
+  font-size: 1.3rem;
 }
 
 .h6 {