feat(WEB-250): overview hero final ui

components/MyPages/Blocks/Stays/Container/container.module.css

@@ -2,7 +2,8 @@
   display: grid;
   gap: 2rem;
 }
-@media screen and (min-width: 950px) {
+
+@media screen and (min-width: 1367px) {
   .container {
     gap: 3.5rem;
   }

components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx

@@ -1,13 +1,13 @@
 import { _ } from "@/lib/translation"
 
-import Title from "@/components/Title"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./emptyPreviousStays.module.css"
 
 export default function EmptyPreviousStaysBlock() {
   return (
     <section className={styles.container}>
-      <Title level="h3" as="h5" uppercase>
+      <Title as="h5" level="h3">
         {_("You have no previous stays.")}
       </Title>
     </section>

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -12,8 +12,7 @@ import ShowMoreButton from "../ShowMoreButton"
 import StayCard from "../StayCard"
 import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
-import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { Page } from "@/types/components/myPages/stays/page"
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default function PreviousStays({
   lang,
@@ -25,7 +24,7 @@ export default function PreviousStays({
     trpc.user.stays.previous.useInfiniteQuery(
       {},
       {
-        getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
       }
     )
 

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -1,24 +1,23 @@
-import Link from "next/link"
-
 import { _ } from "@/lib/translation"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Title from "@/components/Title"
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./emptyUpcomingStays.module.css"
 
 export default function EmptyUpcomingStaysBlock() {
   return (
     <section className={styles.container}>
-      <Title level="h3" as="h5" uppercase>
-        {_(" You have no upcoming stays.")}
+      <Title as="h5" level="h3">
+        {_("You have no upcoming stays.")}
         <span className={styles.grayTitle}>
           {" "}
           {_("Where should you go next?")}
         </span>
       </Title>
       <Button intent="primary" asChild type="button">
-        <Link className={styles.link} href={"#"} key="getInspired">
+        <Link className={styles.link} href="#" key="getInspired">
           {_("Get inspired")}
         </Link>
       </Button>

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -20,7 +20,7 @@ export default async function SoonestStays({
   const { data: stays } = await serverClient().user.stays.upcoming({ limit: 3 })
 
   return (
-    <MaxWidth className={styles.container} tag="section">
+    <section className={styles.container}>
       <Header title={title} subtitle={subtitle} link={link} />
       {stays.length ? (
         <CardGrid>
@@ -35,6 +35,6 @@ export default async function SoonestStays({
       ) : (
         <EmptyUpcomingStaysBlock />
       )}
-    </MaxWidth>
+    </section>
   )
 }

components/MyPages/Blocks/Stays/StayCard/index.tsx

@@ -3,7 +3,7 @@ import { Calendar } from "react-feather"
 import { dt } from "@/lib/dt"
 
 import Image from "@/components/Image"
-import Title from "@/components/Title"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./stay.module.css"
 
@@ -29,13 +29,7 @@ export default function StayCard({ stay, lang }: StayCardProps) {
         height={240}
       />
       <footer className={styles.footer}>
-        <Title
-          as="h5"
-          level="h3"
-          weight="semiBold"
-          uppercase
-          className={styles.hotel}
-        >
+        <Title as="h5" className={styles.hotel} level="h3">
           {hotelInformation.hotelName}
         </Title>
         <div className={styles.date}>

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -1,24 +1,23 @@
-import Link from "next/link"
-
 import { _ } from "@/lib/translation"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Title from "@/components/Title"
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./emptyUpcomingStays.module.css"
 
 export default function EmptyUpcomingStaysBlock() {
   return (
     <section className={styles.container}>
-      <Title level="h3" as="h5" uppercase>
-        {_(" You have no upcoming stays.")}
+      <Title as="h5" level="h3">
+        {_("You have no upcoming stays.")}
         <span className={styles.grayTitle}>
           {" "}
           {_("Where should you go next?")}
         </span>
       </Title>
       <Button intent="primary" asChild type="button">
-        <Link className={styles.link} href={"#"} key="getInspired">
+        <Link className={styles.link} href="#" key="getInspired">
           {_("Get inspired")}
         </Link>
       </Button>

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -13,8 +13,7 @@ import ShowMoreButton from "../ShowMoreButton"
 import StayCard from "../StayCard"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
-import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { Page } from "@/types/components/myPages/stays/page"
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default function UpcomingStays({
   lang,
@@ -26,7 +25,7 @@ export default function UpcomingStays({
     trpc.user.stays.upcoming.useInfiniteQuery(
       { limit: 6 },
       {
-        getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
       }
     )