feat(SW-190): added hero to loyalty pages

components/ContentType/LoyaltyPage/LoyaltyPage.tsx

@@ -3,12 +3,16 @@ import { serverClient } from "@/lib/trpc/server"
 import { Blocks } from "@/components/Loyalty/Blocks"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
+import Hero from "@/components/TempDesignSystem/Hero"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 
 import styles from "./loyaltyPage.module.css"
 
-export default async function LoyaltyPage() {
+import { ImageVaultAsset } from "@/types/components/imageVaultImage"
+import type { LangParams } from "@/types/params"
+
+export default async function LoyaltyPage({ lang }: LangParams) {
   const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
 
   if (!loyaltyPageRes) {
@@ -16,7 +20,7 @@ export default async function LoyaltyPage() {
   }
 
   const { tracking, loyaltyPage } = loyaltyPageRes
-
+  const heroImage: ImageVaultAsset = loyaltyPage.header?.hero_image
   return (
     <>
       <section className={styles.content}>
@@ -25,7 +29,15 @@ export default async function LoyaltyPage() {
         ) : null}
 
         <MaxWidth className={styles.blocks} tag="main">
-          <Title>{loyaltyPage.heading}</Title>
+          <header className={styles.header}>
+            <Title>{loyaltyPage.heading}</Title>
+            {heroImage ? (
+              <Hero
+                alt={heroImage.meta.alt || heroImage.meta.caption || ""}
+                src={heroImage.url}
+              />
+            ) : null}
+          </header>
           {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
         </MaxWidth>
       </section>

components/ContentType/LoyaltyPage/loyaltyPage.module.css

@@ -15,6 +15,11 @@
   padding-right: var(--Spacing-x2);
 }
 
+.header {
+  display: grid;
+  gap: var(--Spacing-x4);
+}
+
 @media screen and (min-width: 1367px) {
   .content {
     gap: var(--Spacing-x5);