feat: add new cards grid block

components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css

@@ -0,0 +1,4 @@
+.section {
+  display: grid;
+  gap: 2.4rem;
+}

components/Loyalty/Blocks/CardsGrid/index.tsx

@@ -0,0 +1,44 @@
+import { _ } from "@/lib/translation"
+
+import Header from "@/components/MyPages/Blocks/Header"
+import Card from "@/components/TempDesignSystem/Card"
+import CardGrid from "@/components/TempDesignSystem/CardGrid"
+
+import styles from "./cardsGrid.module.css"
+
+import { CardsGridProps } from "@/types/components/loyalty/blocks"
+
+export default function CardsGrid({ cards_grid }: CardsGridProps) {
+  return (
+    <section className={styles.section}>
+      <Header title={cards_grid.title} subtitle={cards_grid.preamble} />
+      <CardGrid variant={cards_grid.layout}>
+        {cards_grid.cards.map((card) => (
+          <Card
+            theme={cards_grid.theme || "one"}
+            key={card.system.uid}
+            scriptedTopTitle={card.scripted_top_title}
+            heading={card.heading}
+            bodyText={card.body_text}
+            secondaryButton={
+              card.secondaryButton && {
+                href: card.secondaryButton.link.href,
+                title: card.secondaryButton.link.title,
+                openInNewTab: card.secondaryButton.open_in_new_tab,
+                isExternal: card.secondaryButton.isExternal,
+              }
+            }
+            primaryButton={
+              card.primaryButton && {
+                href: card.primaryButton.link.href,
+                title: card.primaryButton.link.title,
+                openInNewTab: card.primaryButton.open_in_new_tab,
+                isExternal: card.primaryButton.isExternal,
+              }
+            }
+          />
+        ))}
+      </CardGrid>
+    </section>
+  )
+}