feat(WEB-250): overview hero final ui

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