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
--- a/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css
+++ b/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css
@@ -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;
+  }
+}
--- a/components/Blocks/FullWidthCampaign/index.tsx
+++ b/components/Blocks/FullWidthCampaign/index.tsx
@@ -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>
+  ))
+}