fix(SW-190): styling fixes

components/ContentType/LoyaltyPage/Intro/index.tsx

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

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

@@ -0,0 +1,10 @@
+.content {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+@media (min-width: 768px) {
+  .content {
+    gap: var(--Spacing-x3);
+  }
+}

components/ContentType/LoyaltyPage/LoyaltyPage.tsx

@@ -4,14 +4,15 @@ import { Blocks } from "@/components/Loyalty/Blocks"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
 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 "./loyaltyPage.module.css"
 
-import type { LangParams } from "@/types/params"
-
-export default async function LoyaltyPage({ lang }: LangParams) {
+export default async function LoyaltyPage() {
   const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
 
   if (!loyaltyPageRes) {
@@ -27,9 +28,15 @@ export default async function LoyaltyPage({ lang }: LangParams) {
           <Sidebar blocks={loyaltyPage.sidebar} />
         ) : null}
 
-        <MaxWidth className={styles.blocks} tag="main">
+        <MaxWidth className={styles.blocks} variant="content" tag="main">
           <header className={styles.header}>
-            <Title>{loyaltyPage.heading}</Title>
+            <Intro>
+              <Title as="h2">{loyaltyPage.heading}</Title>
+              {loyaltyPage.preamble ? (
+                <Preamble>{loyaltyPage.preamble}</Preamble>
+              ) : null}
+            </Intro>
+
             {heroImage ? (
               <Hero
                 alt={heroImage.meta.alt || heroImage.meta.caption || ""}