feat(SW-190): added hero to static content pages

components/ContentType/ContentPage.tsx

@@ -1,3 +0,0 @@
-export default async function ContentPage() {
-  return null
-}

components/ContentType/ContentPage/ContentPage.tsx

@@ -0,0 +1,47 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import Hero from "@/components/TempDesignSystem/Hero"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import TrackingSDK from "@/components/TrackingSDK"
+
+import Intro from "./Intro"
+
+import styles from "./contentPage.module.css"
+
+import type { LangParams } from "@/types/params"
+
+export default async function ContentPage({ lang }: LangParams) {
+  const contentPageRes = await serverClient().contentstack.contentPage.get()
+
+  if (!contentPageRes) {
+    return null
+  }
+
+  const { tracking, contentPage } = contentPageRes
+  const heroImage = contentPage.hero_image
+
+  return (
+    <>
+      <section>
+        <header className={styles.header}>
+          <Intro>
+            <Title as="h2">{contentPage.header.heading}</Title>
+            <Preamble>{contentPage.header.preamble}</Preamble>
+          </Intro>
+        </header>
+
+        {heroImage ? (
+          <div className={styles.hero}>
+            <Hero
+              alt={heroImage.meta.alt || heroImage.meta.caption || ""}
+              src={heroImage.url}
+            />
+          </div>
+        ) : null}
+      </section>
+
+      <TrackingSDK pageData={tracking} />
+    </>
+  )
+}

components/ContentType/ContentPage/Intro/index.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from "react"
+
+import MaxWidth from "@/components/MaxWidth"
+
+import styles from "./intro.module.css"
+
+export default async function Intro({ children }: PropsWithChildren) {
+  return (
+    <div className={styles.intro}>
+      <MaxWidth variant="content" tag="div">
+        <MaxWidth
+          className={styles.content}
+          variant="text"
+          align="left"
+          tag="div"
+        >
+          {children}
+        </MaxWidth>
+      </MaxWidth>
+    </div>
+  )
+}

components/ContentType/ContentPage/Intro/intro.module.css

@@ -0,0 +1,8 @@
+.intro {
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x3);
+}

components/ContentType/ContentPage/contentPage.module.css

@@ -0,0 +1,17 @@
+.content {
+  display: grid;
+  padding-bottom: var(--Spacing-x9);
+  position: relative;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.header {
+  background-color: var(--Base-Surface-Subtle-Normal);
+}
+
+.hero {
+  display: grid;
+  justify-content: center;
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+}

components/ContentType/LoyaltyPage/LoyaltyPage.tsx

@@ -9,7 +9,6 @@ import TrackingSDK from "@/components/TrackingSDK"
 
 import styles from "./loyaltyPage.module.css"
 
-import { ImageVaultAsset } from "@/types/components/imageVaultImage"
 import type { LangParams } from "@/types/params"
 
 export default async function LoyaltyPage({ lang }: LangParams) {
@@ -20,7 +19,7 @@ export default async function LoyaltyPage({ lang }: LangParams) {
   }
 
   const { tracking, loyaltyPage } = loyaltyPageRes
-  const heroImage: ImageVaultAsset = loyaltyPage.header?.hero_image
+  const heroImage = loyaltyPage.hero_image
   return (
     <>
       <section className={styles.content}>