feat: implement ui for empty stay

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -3,12 +3,11 @@
   background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-Medium);
   display: flex;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x9);
   flex-direction: column;
-  justify-content: center;
   margin-bottom: var(--Spacing-x-half);
   min-height: 250px;
-  padding: var(--Spacing-x0) var(--Spacing-x3);
+  justify-content: end;
 }
 
 .burgundyTitle {
@@ -16,3 +15,13 @@
   display: block;
   text-align: center;
 }
+
+.link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: var(--Base-Surface-Primary-Normal);
+  padding: var(--Spacing-x-one-and-half) 0;
+  border-radius: 0 0 var(--Corner-radius-Medium) var(--Corner-radius-Medium);
+}

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

@@ -1,6 +1,7 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 
+import { ArrowRightIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -21,11 +22,14 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
           {formatMessage({ id: "Where will you go next?" })}
         </span>
       </Title>
-      <Button asChild intent="primary" type="button">
-        <Link href={homeHrefs[env.NODE_ENV][lang]}>
-          {formatMessage({ id: "Get inspired" })}
-        </Link>
-      </Button>
+      <Link
+        href={homeHrefs[env.NODE_ENV][lang]}
+        className={styles.link}
+        color="peach80"
+      >
+        {formatMessage({ id: "Get inspired" })}
+        <ArrowRightIcon color="peach80" />
+      </Link>
     </section>
   )
 }