Merged in feat/SW-1388-startpage-header (pull request #1203)

feat(SW-1388): add hero image and heading to startpage

* feat(SW-1388): add hero image and heading to startpage

* fix(SW-1388): spacing variables for padding

* fix(SW-1388): use inset value instead


Approved-by: Erik Tiekstra

components/ContentType/StartPage/index.tsx

@@ -2,20 +2,54 @@ import { Suspense } from "react"
 
 import { getStartPage } from "@/lib/trpc/memoizedRequests"
 
+import Image from "@/components/Image"
+import PageContainer from "@/components/PageContainer"
+import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 
+import styles from "./startPage.module.css"
+
 export default async function StartPage() {
   const content = await getStartPage()
   if (!content) {
     return null
   }
 
+  const { header } = content.startPage
+
   return (
-    <p>
-      <code>{JSON.stringify(content, null, 2)}</code>
+    <PageContainer>
+      <header className={styles.header}>
+        <div className={styles.headerContent}>
+          <Title color="white" textAlign="center">
+            {header.heading}
+          </Title>
+          <div style={{ color: "white", backgroundColor: "darkred" }}>
+            👉 Insert booking widget here 👈
+          </div>
+        </div>
+        {header.hero_image ? (
+          <Image
+            className={styles.topImage}
+            alt={
+              header.hero_image.meta.alt || header.hero_image.meta.caption || ""
+            }
+            src={header.hero_image.url}
+            focalPoint={header.hero_image.focalPoint}
+            width={1512}
+            height={560}
+          />
+        ) : null}
+      </header>
+      <details
+        style={{ maxWidth: "100vw", overflow: "hidden", padding: "1rem 0" }}
+      >
+        <summary>JSON data</summary>
+        <pre>{JSON.stringify(content, null, 2)}</pre>
+      </details>
       <Suspense fallback={null}>
         <TrackingSDK pageData={content.tracking} />
       </Suspense>
-    </p>
+    </PageContainer>
   )
 }

components/ContentType/StartPage/startPage.module.css

@@ -0,0 +1,39 @@
+.header {
+  height: 560px;
+  position: relative;
+  overflow: hidden;
+}
+
+.header:after {
+  content: "";
+  background: linear-gradient(
+    182deg,
+    rgba(38, 32, 30, 0.08) 13%,
+    rgba(77, 0, 27, 0.4) 100%
+  );
+  position: absolute;
+  inset: 0;
+}
+
+.headerContent {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  grid-gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4);
+}
+
+@media screen and (min-width: 768px) {
+  .headerContent {
+    grid-gap: var(--Spacing-x4);
+    padding: 320px 160px 80px;
+  }
+}
+
+.topImage {
+  max-width: 100%;
+}

components/PageContainer/index.tsx

@@ -0,0 +1,7 @@
+import styles from "./pageContainer.module.css"
+
+import type { PropsWithChildren } from "react"
+
+export default function PageContainer({ children }: PropsWithChildren) {
+  return <div className={styles.container}>{children}</div>
+}

components/PageContainer/pageContainer.module.css

@@ -0,0 +1,6 @@
+.container {
+  width: 100%;
+  max-width: var(--max-width);
+  margin-left: auto;
+  margin-right: auto;
+}

lib/graphql/Query/StartPage/StartPage.graphql

@@ -4,6 +4,10 @@ query GetStartPage($locale: String!, $uid: String!) {
   start_page(uid: $uid, locale: $locale) {
     title
     url
+    header {
+      heading
+      hero_image
+    }
     system {
       ...System
       created_at

server/routers/contentstack/startPage/output.ts

@@ -1,10 +1,15 @@
 import { z } from "zod"
 
+import { tempImageVaultAssetSchema } from "../schemas/imageVault"
 import { systemSchema } from "../schemas/system"
 
 export const startPageSchema = z.object({
   start_page: z.object({
     title: z.string(),
+    header: z.object({
+      heading: z.string(),
+      hero_image: tempImageVaultAssetSchema,
+    }),
     system: systemSchema.merge(
       z.object({
         created_at: z.string(),