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

components/MaxWidth/index.tsx

@@ -1,17 +1,21 @@
 "use client"
-import { cva } from "class-variance-authority"
 
-import styles from "./maxWidth.module.css"
+import { maxWidthVariants } from "./variants"
 
 import type { MaxWidthProps } from "@/types/components/max-width"
 
-const maxWidthVariants = cva(styles.container)
-
 export default function MaxWidth({
   className,
   tag = "section",
+  variant,
+  align,
   ...props
 }: MaxWidthProps) {
   const Cmp = tag
-  return <Cmp className={maxWidthVariants({ className })} {...props} />
+  return (
+    <Cmp
+      className={maxWidthVariants({ className, variant, align })}
+      {...props}
+    />
+  )
 }

components/MaxWidth/maxWidth.module.css

@@ -1,4 +1,20 @@
 .container {
-  max-width: var(--max-width, 1140px);
   position: relative;
 }
+
+.container.default {
+  max-width: var(--max-width, 1140px);
+}
+
+.container.text {
+  max-width: 49.5rem;
+}
+
+.container.content {
+  max-width: 74.75rem;
+}
+
+.container.center {
+  margin: 0 auto;
+  width: 100vh;
+}

components/MaxWidth/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./maxWidth.module.css"
+
+export const maxWidthVariants = cva(styles.container, {
+  variants: {
+    variant: {
+      text: styles.text,
+      content: styles.content,
+      default: styles.default,
+    },
+    align: {
+      center: styles.center,
+      left: styles.left,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    align: "center",
+  },
+})