feat(SW-1386): add full width campaign to start page

2025-01-21 15:13:34 +01:00
parent b57174647f
commit b0c24d8945
13 changed files with 349 additions and 7 deletions
@@ -0,0 +1,41 @@
+.container {
+  position: relative;
+  height: 640px;
+  overflow: hidden;
+}
+
+.content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 800px;
+  margin: 0 auto;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x4) var(--Spacing-x3);
+}
+
+.mainContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x2);
+}
+
+.buttons {
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
+.image {
+  max-width: 100%;
+  height: 600px;
+}
+
+@media screen and (min-width: 768px) {
+  .image {
+    height: 880px;
+  }
+}
@@ -0,0 +1,57 @@
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./fullWidthCampaign.module.css"
+
+import type { FullWidthCampaign } from "@/types/trpc/routers/contentstack/startPage"
+
+interface FullWidthCampaignProps {
+  content: FullWidthCampaign
+}
+
+export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
+  return content.full_width_campaignConnection.edges.map(({ node }) => (
+    <div key={node.system.uid} className={styles.container}>
+      {node.background_image ? (
+        <Image
+          className={styles.image}
+          alt={
+            node.background_image.meta.alt ||
+            node.background_image.meta.caption ||
+            ""
+          }
+          src={node.background_image.url}
+          focalPoint={node.background_image.focalPoint}
+          width={1512}
+          height={880}
+        />
+      ) : null}
+      <div className={styles.content}>
+        <BiroScript color="baseText">{node.scripted_top_title}</BiroScript>
+        <div className={styles.mainContent}>
+          <Title color="baseText" textAlign="center">
+            {node.heading}
+          </Title>
+          <Body color="baseText" textAlign="center">
+            {node.body_text}
+          </Body>
+          <div className={styles.buttons}>
+            {node.has_primary_button ? (
+              <Button intent="inverted" size="small" theme="base">
+                {node.primary_button.title}
+              </Button>
+            ) : null}
+            {node.has_secondary_button ? (
+              <Button intent="secondary" size="small" theme="primaryStrong">
+                {node.secondary_button.title}
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  ))
+}
@@ -7,6 +7,7 @@ import JsonToHtml from "@/components/JsonToHtml"
 import { SasTierComparison } from "@/components/SasTierComparison"

 import AccordionSection from "./Accordion"
+import FullWidthCampaign from "./FullWidthCampaign"
 import HotelListing from "./HotelListing"
 import Table from "./Table"

@@ -98,6 +99,8 @@ export default function Blocks({ blocks }: BlocksProps) {
            firstItem={firstItem}
          />
        )
+      case BlocksEnums.block.FullWidthCampaign:
+        return <FullWidthCampaign content={block.full_width_campaign} />
      default:
        return null
    }
@@ -43,13 +43,13 @@ 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 blocks={blocks} /> : null}
      </main>
      <Suspense fallback={null}>
        <TrackingSDK pageData={content.tracking} />