fix(SW-1386): sorted out width on blocks and fixed some padding stuff

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

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%;
 }

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"]