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

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