Merged in feat/SW-3441-add-hero-floatingbookingwid (pull request #2789)

feat(SW-3441): Add Hero image to sas landing page

* feat(SW-3441): Add Hero image to sas landing page

* feat(SW-3441): Code Optimise


Approved-by: Joakim Jäderberg

apps/partner-sas/app/[lang]/@bookingwidget/[...path]/page.tsx

@@ -1 +1 @@
-export { default } from "../page"
+export { default } from "../default"

apps/partner-sas/app/[lang]/@bookingwidget/default.tsx

@@ -0,0 +1,16 @@
+import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
+import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
+
+import { getLang } from "@/i18n/serverContext"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function BookingWidgetPage(props: PageArgs<LangParams>) {
+  const searchParams = await props.searchParams
+
+  const booking = parseBookingWidgetSearchParams(searchParams)
+
+  const lang = await getLang()
+
+  return <BookingWidget booking={booking} lang={lang} />
+}

apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/page.tsx

@@ -1 +1 @@
-export { default } from "../page"
+export { default } from "../default"

apps/partner-sas/app/[lang]/@bookingwidget/page.tsx

@@ -1,16 +1,3 @@
-import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
-import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
-
-import { getLang } from "@/i18n/serverContext"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function BookingWidgetPage(props: PageArgs<LangParams>) {
-  const searchParams = await props.searchParams
-
-  const booking = parseBookingWidgetSearchParams(searchParams)
-
-  const lang = await getLang()
-
-  return <BookingWidget booking={booking} lang={lang} />
+export default async function BookingWidgetPage() {
+  return null
 }

apps/partner-sas/app/[lang]/page.module.css

@@ -0,0 +1,18 @@
+.mainContent {
+  /* Calculate height for large screens and displays */
+  height: calc(100dvh - 402px);
+  min-height: 480px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.backdrop {
+  position: absolute;
+  inset: 0;
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}

apps/partner-sas/app/[lang]/page.tsx

@@ -1,8 +1,34 @@
-export default async function Home() {
+import { FloatingBookingWidget } from "@scandic-hotels/booking-flow/BookingWidget/FloatingBookingWidget"
+import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
+import Image from "@scandic-hotels/design-system/Image"
+
+import { getLang } from "@/i18n/serverContext"
+import LandingPageHeroImage from "@/public/_static/img/landing-page-hero.png"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function Home(props: PageArgs<LangParams>) {
+  const searchParams = await props.searchParams
+
+  const booking = parseBookingWidgetSearchParams(searchParams)
+
+  const lang = await getLang()
+
   return (
-    <div>
-      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-      <h2>start page</h2>
-    </div>
+    <section className={styles.mainContent}>
+      <div className={styles.bookingWidgetWrapper}>
+        <FloatingBookingWidget booking={booking} lang={lang} />
+      </div>
+      <Image
+        alt="Hero Image"
+        className={styles.backdrop}
+        src={LandingPageHeroImage}
+        sizes="100vw"
+        quality={80}
+        loading="lazy"
+      />
+    </section>
   )
 }

apps/partner-sas/app/components/Footer/footer.module.css

@@ -1,6 +1,5 @@
 .root {
   background-color: var(--Base-Surface-Primary-light-Normal);
-  height: 100px;
 }
 
 .sasLogo {