fix: add table styling

components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx

@@ -1,26 +1,46 @@
-import Image from "@/components/Image"
+import BenefitValue from "../BenefitValue"
+import LevelSummary from "../LevelSummary"
+
+import styles from "./largeTable.module.css"
 
 import { LargeTableProps } from "@/types/components/loyalty/blocks"
 
 export default function LargeTable({ levels }: LargeTableProps) {
   return (
-    <table>
-      <thead>
-        <th />
-        {levels.map((level) => {
-          console.log({ level })
+    <table className={styles.table}>
+      <thead className={styles.thead}>
+        <tr>
+          <th />
+          {levels.map((level) => {
+            return (
+              <th key={level.tier} className={styles.th}>
+                <LevelSummary level={level} />
+              </th>
+            )
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {levels[0].benefits.map((benefit, index) => {
           return (
-            <th key={level.tier}>
-              <Image
-                src={level.icon}
-                alt={level.name}
-                width={140}
-                height={54}
-              />
-            </th>
+            <tr key={benefit.name} className={styles.tr}>
+              <th scope={"row"} className={styles.th}>
+                <span className={styles.benefitName}>{benefit.name}</span>
+                <span className={styles.benefitDescription}>
+                  {benefit.description}
+                </span>
+              </th>
+              {levels.map((level) => {
+                return (
+                  <td key={level.tier} className={styles.td}>
+                    <BenefitValue benefit={level.benefits[index]} />
+                  </td>
+                )
+              })}
+            </tr>
           )
         })}
-      </thead>
+      </tbody>
     </table>
   )
 }

components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -0,0 +1,31 @@
+.table {
+  border: 1px solid var(--Base-Border-Subtle);
+  border-collapse: collapse;
+  color: var(--BURGUNDY, #4d001b);
+}
+
+.thead {
+  background-color: var(--Base-Surface-Secondary-Normal);
+  position: sticky;
+  top: 0;
+}
+
+.th,
+.td {
+  border: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.th {
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: 400;
+}
+
+.td {
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  text-align: center;
+}
+
+.tr:nth-child(odd) {
+  background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
+}