Merged in feat/LOY-276-sas-hero-image (pull request #2411)

feat(LOY-276): add hero image to account page

Approved-by: Erik Tiekstra

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css

@@ -1,18 +1,57 @@
+.header {
+  height: 400px;
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: var(--Space-x4);
+  border-radius: var(--Corner-radius-lg);
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, transparent, var(--Text-Brand-OnPrimary-1-Default) 8%)
+        13%,
+      color-mix(in srgb, transparent, var(--Text-Brand-OnPrimary-1-Heading) 40%)
+        100%
+    );
+  }
+}
+
+.heading {
+  position: relative;
+  z-index: 3;
+  color: var(--Text-Inverted);
+}
+
+.image {
+  z-index: 1;
+}
+
 .blocks {
   display: grid;
-  gap: var(--Spacing-x5);
+  gap: var(--Space-x5);
   max-width: var(--max-width-page);
   align-content: flex-start;
 }
 
 @media screen and (min-width: 768px) {
   .blocks {
-    gap: var(--Spacing-x7);
+    gap: var(--Space-x7);
   }
 }
 
 @media screen and (min-width: 1367px) {
+  .header {
+    height: 480px;
+    padding-bottom: 150px;
+  }
   .blocks {
-    gap: var(--Spacing-x7);
+    gap: var(--Space-x7);
   }
 }

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -1,6 +1,9 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import Blocks from "@/components/Blocks"
+import Image from "@/components/Image"
 import SectionHeader from "@/components/Section/Header"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
@@ -23,17 +26,37 @@ export default async function MyPages({}: PageArgs<
   }
 
   const { tracking, accountPage } = accountPageRes
-  const { heading, preamble, content } = accountPage
+  const { heading, preamble, hero_image, hero_image_active, content } =
+    accountPage
 
   return (
     <>
       <main className={styles.blocks}>
-        <SectionHeader
-          title={heading}
-          preamble={preamble}
-          headingAs="h1"
-          headingLevel="h1"
-        />
+        {hero_image_active ? (
+          <header className={styles.header}>
+            <Typography variant="Title/lg">
+              <h1 className={styles.heading}>{heading}</h1>
+            </Typography>
+            {hero_image ? (
+              <Image
+                className={styles.image}
+                alt={hero_image.meta.alt || hero_image.meta.caption || ""}
+                src={hero_image.url}
+                focalPoint={hero_image.focalPoint}
+                sizes="100vw"
+                fill
+                priority
+              />
+            ) : null}
+          </header>
+        ) : (
+          <SectionHeader
+            title={heading}
+            preamble={preamble}
+            headingAs="h1"
+            headingLevel="h1"
+          />
+        )}
 
         {content?.length ? (
           <Blocks blocks={content} />