fix(SW-190): styling fixes

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -19,7 +19,7 @@ export default async function ContentTypePage({
 
   switch (params.contentType) {
     case "content-page":
-      return <ContentPage lang={params.lang} />
+      return <ContentPage />
     case "loyalty-page":
       return <LoyaltyPage />
     case "hotel-page":

components/ContentType/ContentPage/ContentPage.tsx

@@ -9,9 +9,7 @@ import Intro from "./Intro"
 
 import styles from "./contentPage.module.css"
 
-import type { LangParams } from "@/types/params"
+export default async function ContentPage() {
-
-export default async function ContentPage({ lang }: LangParams) {
   const contentPageRes = await serverClient().contentstack.contentPage.get()
 
   if (!contentPageRes) {
@@ -23,7 +21,7 @@ export default async function ContentPage({ lang }: LangParams) {
 
   return (
     <>
-      <section>
+      <section className={styles.content}>
         <header className={styles.header}>
           <Intro>
             <Title as="h2">{contentPage.header.heading}</Title>

components/ContentType/ContentPage/Intro/index.tsx

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

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

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

components/ContentType/ContentPage/contentPage.module.css

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

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() {
-
-export default async function LoyaltyPage({ lang }: LangParams) {
   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 || ""}

components/MaxWidth/maxWidth.module.css

@@ -1,5 +1,7 @@
 .container {
   position: relative;
+  max-width: 100%;
+  width: 100%;
 }
 
 .container.default {
@@ -16,5 +18,4 @@
 
 .container.center {
   margin: 0 auto;
-  width: 100vh;
 }

components/TempDesignSystem/Hero/hero.module.css

@@ -1,8 +1,14 @@
 .hero {
-  height: 480px;
+  height: 400px;
   margin-bottom: var(--Spacing-x2);
   max-width: 100%;
   object-fit: cover;
-  border-radius: var(--Corner-radius-Medium);
+  border-radius: var(--Corner-radius-xLarge);
   margin: 0;
 }
+
+@media (min-width: 768px) {
+  .hero {
+    height: 480px;
+  }
+}

lib/graphql/Fragments/ContentPage/Breadcrumbs.graphql

@@ -17,6 +17,18 @@ fragment ContentPageBreadcrumbs on ContentPage {
               }
               url
             }
+            ... on LoyaltyPage {
+              web {
+                breadcrumbs {
+                  title
+                }
+              }
+              system {
+                locale
+                uid
+              }
+              url
+            }
           }
         }
       }