feat: add card grid component

app/[lang]/(live)/(public)/loyalty-page/layout.module.css

@@ -1,10 +1,7 @@
 .layout {
   --max-width: 101.4rem;
-  --header-height: 4.5rem;
 
   display: grid;
   font-family: var(--ff-fira-sans);
-  grid-template-rows: var(--header-height) auto 1fr;
-  min-height: 100dvh;
   background-color: var(--Brand-Coffee-Subtle);
 }

app/[lang]/(live)/(public)/loyalty-page/layout.tsx

@@ -1,20 +1,16 @@
 import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
 
-import Header from "@/components/MyPages/Header"
-
 import styles from "./layout.module.css"
 
 import type { MyPagesLayoutProps } from "@/types/components/myPages/layout"
 
 export default async function LoyaltyPagesLayout({
   children,
-  params,
 }: React.PropsWithChildren<MyPagesLayoutProps>) {
   return (
     <div
       className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
     >
-      <Header lang={params.lang} />
       {children}
     </div>
   )

app/[lang]/(live)/(public)/loyalty-page/page.module.css

@@ -9,8 +9,7 @@
 .blocks {
   display: grid;
   gap: 4.2rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding: 1.6rem;
 }
 
 @media screen and (min-width: 950px) {

app/[lang]/(live)/(public)/loyalty-page/page.tsx

@@ -1,14 +1,15 @@
 import { notFound } from "next/navigation"
+
 import { serverClient } from "@/lib/trpc/server"
 
-import MaxWidth from "@/components/MaxWidth"
-import Sidebar from "@/components/Loyalty/Sidebar"
 import { Blocks } from "@/components/Loyalty/Blocks"
-
-import type { LangParams, PageArgs, UriParams } from "@/types/params"
+import Sidebar from "@/components/Loyalty/Sidebar"
+import MaxWidth from "@/components/MaxWidth"
 
 import styles from "./page.module.css"
 
+import type { LangParams, PageArgs, UriParams } from "@/types/params"
+
 export default async function LoyaltyPage({
   params,
   searchParams,
@@ -19,12 +20,12 @@ export default async function LoyaltyPage({
     }
 
     const loyaltyPage = await serverClient().contentstack.loyaltyPage.get({
-      uri: searchParams.uri,
-      lang: params.lang,
+      href: searchParams.uri,
+      locale: params.lang,
     })
 
     return (
-      <MaxWidth className={styles.content} tag="main">
+      <section className={styles.content}>
         <aside>
           {loyaltyPage.sidebar
             ? loyaltyPage.sidebar.map((block, i) => (
@@ -32,10 +33,10 @@ export default async function LoyaltyPage({
               ))
             : null}
         </aside>
-        <section className={styles.blocks}>
+        <MaxWidth className={styles.blocks} tag="main">
           <Blocks blocks={loyaltyPage.blocks} />
-        </section>
-      </MaxWidth>
+        </MaxWidth>
+      </section>
     )
   } catch (err) {
     return notFound()