feat(SW-2265): Added campaign-page

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import styles from "./campaignPage.module.css"
+
+export default function CampaignPageSkeleton() {
+  return (
+    <div className={styles.pageContainer}>
+      <h1>
+        <SkeletonShimmer width="50%" height="2rem" />
+      </h1>
+    </div>
+  )
+}

apps/scandic-web/components/ContentType/CampaignPage/campaignPage.module.css

@@ -0,0 +1,52 @@
+.pageContainer {
+  display: grid;
+  gap: var(--Space-x6);
+  padding-bottom: var(--Space-x7);
+  width: var(--max-width-content);
+  margin: 0 auto;
+}
+
+.hero {
+  /* Temporary styles until we add the hero */
+  width: 100%;
+  height: 478px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--Surface-Brand-Accent-Default);
+}
+
+.intro {
+  display: grid;
+  gap: var(--Space-x5);
+}
+
+.headingWrapper {
+  display: grid;
+  gap: var(--Space-x2);
+}
+
+.heading {
+  color: var(--Text-Heading);
+  text-wrap: balance;
+  hyphens: auto;
+}
+
+.preamble {
+  display: grid;
+  gap: var(--Space-x2);
+
+  &:not(.twoColumns) {
+    max-width: var(--max-width-text-block);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .pageContainer {
+    gap: var(--Space-x9);
+  }
+
+  .preamble.twoColumns {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

apps/scandic-web/components/ContentType/CampaignPage/index.tsx

@@ -0,0 +1,60 @@
+import { cx } from "class-variance-authority"
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getCampaignPage } from "@/lib/trpc/memoizedRequests"
+
+import CampaignPageSkeleton from "./CampaignPageSkeleton"
+
+import styles from "./campaignPage.module.css"
+
+export default async function CampaignPage() {
+  const pageData = await getCampaignPage()
+
+  if (!pageData) {
+    notFound()
+  }
+
+  const { campaignPage } = pageData
+  const { heading, subheading, preamble } = campaignPage
+
+  return (
+    <>
+      <Suspense fallback={<CampaignPageSkeleton />}>
+        <div className={styles.pageContainer}>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          <div className={styles.hero}>---PLACE FOR THE HERO---</div>
+          <div className={styles.intro}>
+            <div className={styles.headingWrapper}>
+              <Typography variant="Title/lg">
+                <h1 className={styles.heading}>{heading}</h1>
+              </Typography>
+              {subheading ? (
+                <Typography variant="Title/Subtitle/lg">
+                  <p>{subheading}</p>
+                </Typography>
+              ) : null}
+            </div>
+            <Typography variant="Body/Lead text">
+              <div
+                className={cx(styles.preamble, {
+                  [styles.twoColumns]: preamble.is_two_columns,
+                })}
+              >
+                <p>{preamble.first_column}</p>
+                {preamble.is_two_columns && preamble.second_column ? (
+                  <p className={styles.secondColumn}>
+                    {preamble.second_column}
+                  </p>
+                ) : null}
+              </div>
+            </Typography>
+          </div>
+        </div>
+      </Suspense>
+      {/* <TrackingSDK pageData={tracking} /> */}
+    </>
+  )
+}