feat: add JoinLoyalty component

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

@@ -6,4 +6,5 @@
   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/page.module.css

@@ -6,6 +6,13 @@
   position: relative;
 }
 
+.blocks {
+  display: grid;
+  gap: 4.2rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 @media screen and (min-width: 950px) {
   .content {
     gap: 10rem;
@@ -15,4 +22,10 @@
     padding-right: 2.4rem;
     padding-top: 5.8rem;
   }
+
+  .blocks {
+    gap: 6.4rem;
+    padding-left: 0;
+    padding-right: 0;
+  }
 }

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

@@ -6,6 +6,7 @@ import { LangParams, PageArgs, UriParams } from "@/types/params"
 import { notFound } from "next/navigation"
 
 import styles from "./page.module.css"
+import Sidebar from "@/components/Loyalty/Sidebar"
 
 export default async function LoyaltyPage({
   params,
@@ -22,13 +23,19 @@ export default async function LoyaltyPage({
     })
 
     return (
-      <main className={styles.content}>
-        <aside>{loyaltyPage.sidebar ? <></> : null}</aside>
-        <MaxWidth>
-          <Title>{loyaltyPage.title}</Title>
+      <MaxWidth className={styles.content} tag="main">
+        <aside>
+          {loyaltyPage.sidebar
+            ? loyaltyPage.sidebar.map((block, i) => (
+                <Sidebar key={i} block={block} />
+              ))
+            : null}
+        </aside>
+        <section className={styles.blocks}>
+          <Title as="h3">{loyaltyPage.title}</Title>
           <Content content={loyaltyPage.content} />
-        </MaxWidth>
-      </main>
+        </section>
+      </MaxWidth>
     )
   } catch (err) {
     return notFound()