From 672389e85ca219ca232852af871e0c181fc5ea1b Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 29 Jan 2025 13:55:51 +0100
Subject: [PATCH] fix(SW-1386): sorted out width on blocks and fixed some
 padding stuff

---
 components/ContentType/StartPage/index.tsx    | 29 ++++++++++++++-----
 .../StartPage/startPage.module.css            | 18 +++++++++---
 types/trpc/routers/contentstack/startPage.ts  |  5 +++-
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/components/ContentType/StartPage/index.tsx b/components/ContentType/StartPage/index.tsx
index 9ecf0e007..d94a7d2ff 100644
--- a/components/ContentType/StartPage/index.tsx
+++ b/components/ContentType/StartPage/index.tsx
@@ -1,8 +1,10 @@
+import { assertNullableType } from "graphql"
 import { Suspense } from "react"
 
 import { getStartPage } from "@/lib/trpc/memoizedRequests"
 
 import Blocks from "@/components/Blocks"
+import FullWidthCampaign from "@/components/Blocks/FullWidthCampaign"
 import Image from "@/components/Image"
 import PageContainer from "@/components/PageContainer"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -10,6 +12,8 @@ import TrackingSDK from "@/components/TrackingSDK"
 
 import styles from "./startPage.module.css"
 
+import { BlocksEnums } from "@/types/enums/blocks"
+
 export default async function StartPage() {
   const content = await getStartPage()
   if (!content) {
@@ -43,13 +47,24 @@ export default async function StartPage() {
         ) : null}
       </header>
       <main className={styles.main}>
-        {blocks ? <Blocks blocks={blocks} /> : null}
-        <details
-          style={{ maxWidth: "100vw", overflow: "hidden", padding: "1rem 0" }}
-        >
-          <summary>JSON data</summary>
-          <pre>{JSON.stringify(content, null, 2)}</pre>
-        </details>
+        {blocks
+          ? blocks.map((block) => {
+              if (block.typename === BlocksEnums.block.FullWidthCampaign) {
+                return (
+                  <FullWidthCampaign
+                    key={block.typename}
+                    content={block.full_width_campaign}
+                  />
+                )
+              }
+
+              return (
+                <div key={block.typename} className={styles.section}>
+                  <Blocks blocks={[block]} />
+                </div>
+              )
+            })
+          : null}
       </main>
       <Suspense fallback={null}>
         <TrackingSDK pageData={content.tracking} />
diff --git a/components/ContentType/StartPage/startPage.module.css b/components/ContentType/StartPage/startPage.module.css
index 378d16845..d69fef887 100644
--- a/components/ContentType/StartPage/startPage.module.css
+++ b/components/ContentType/StartPage/startPage.module.css
@@ -40,9 +40,19 @@
 
 .main {
   display: grid;
-  width: 100%;
   gap: var(--Spacing-x6);
-  margin: 0 auto;
-  max-width: var(--max-width-content);
-  padding: var(--Spacing-x4) 0;
+  padding: calc(var(--Spacing-x5) * 2) 0 calc(var(--Spacing-x5) * 4);
+}
+
+@media screen and (min-width: 768px) {
+  .main {
+    gap: calc(var(--Spacing-x5) * 3);
+  }
+}
+
+.section {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--max-width-content);
+  width: 100%;
 }
diff --git a/types/trpc/routers/contentstack/startPage.ts b/types/trpc/routers/contentstack/startPage.ts
index c204c04c5..ae93ef46a 100644
--- a/types/trpc/routers/contentstack/startPage.ts
+++ b/types/trpc/routers/contentstack/startPage.ts
@@ -1,5 +1,6 @@
 import type { z } from "zod"
 
+import type { fullWidthCampaignSchema } from "@/server/routers/contentstack/schemas/blocks/fullWidthCampaign"
 import type {
   blocksSchema,
   startPageRefsSchema,
@@ -16,4 +17,6 @@ export interface StartPageRefs extends z.output<typeof startPageRefsSchema> {}
 
 export type Block = z.output<typeof blocksSchema>
 
-export type FullWidthCampaign = Block["full_width_campaign"]
+export type FullWidthCampaign = z.output<
+  typeof fullWidthCampaignSchema
+>["full_width_campaign"]