feat: add card grid component

components/Loyalty/Blocks/CardGrid/cardGrid.module.css

@@ -0,0 +1,28 @@
+.container {
+  display: grid;
+  gap: 2.4rem;
+}
+
+.subtitle {
+  margin: 0;
+}
+
+.titleContainer {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.cardContainer {
+  display: grid;
+  gap: 1.6rem;
+}
+
+@media screen and (min-width: 950px) {
+  .cardContainer {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .cardWrapper:last-child {
+    grid-column: span 2;
+  }
+}

components/Loyalty/Blocks/CardGrid/index.tsx

@@ -0,0 +1,50 @@
+import { _ } from "@/lib/translation"
+
+import Card from "@/components/TempDesignSystem/Card"
+import Title from "@/components/Title"
+
+import styles from "./cardGrid.module.css"
+
+import { CardGridProps, CardProps } from "@/types/components/loyalty/blocks"
+
+export default function CardGrid({ card_grid }: CardGridProps) {
+  return (
+    <section className={styles.container}>
+      <header className={styles.titleContainer}>
+        <Title as="h3" level="h2" weight="semiBold" uppercase>
+          {card_grid.title}
+        </Title>
+        {card_grid.subtitle ? (
+          <Title
+            as="h5"
+            level="h3"
+            weight="regular"
+            className={styles.subtitle}
+          >
+            {card_grid.subtitle}
+          </Title>
+        ) : null}
+      </header>
+      <div className={styles.cardContainer}>
+        {card_grid.cards.map((card, i) => (
+          <CardWrapper key={`${card.title}+${i}`} card={card} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function CardWrapper({ card }: CardProps) {
+  const link = card.referenceConnection.edges.length
+    ? {
+        href: card.referenceConnection.edges[0].node.url,
+        title: _("Read more"),
+      }
+    : undefined
+
+  return (
+    <div className={styles.cardWrapper}>
+      <Card subtitle={card.subtitle} title={card.title} link={link} />
+    </div>
+  )
+}