feat: implement ui on benefits card

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -19,3 +19,27 @@
   min-height: 280px;
   padding: var(--Spacing-x3);
 }
+
+.card {
+  align-items: center;
+  background-color: var(--Base-Background-Primary-Normal, #faf6f2);
+  border: 1px solid var(--Base-Border-Subtle, #e3d9d1);
+  border-radius: var(--Medium, 8px);
+  color: var(--Theme-Primary-Light-On-Surface-Text);
+  display: flex;
+  flex: 1 1 0px;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  min-height: 280px;
+  padding: 30px;
+  text-align: center;
+}
+
+.preTitle {
+  font-family: var(--typography-Script-2-fontFamily);
+  font-size: var(--typography-Script-2-fontSize);
+  font-weight: var(--typography-Script-2-fontWeight);
+  color: var(--Primary-Light-On-Surface-Accent, #b05b65);
+  transform: rotate(-3deg);
+}

components/TempDesignSystem/CardGrid/cardGrid.module.css

@@ -0,0 +1,66 @@
+.gridContainer {
+  display: grid;
+  gap: 1.6rem;
+}
+
+.carousel {
+  display: grid;
+  grid-auto-columns: 80dvw;
+  grid-auto-flow: column;
+  gap: 1.6rem;
+
+  margin-left: -1.6rem;
+  margin-right: -1.6rem;
+  padding-left: 1.6rem;
+
+  overflow-x: scroll;
+  scroll-padding-left: 1.6rem;
+  scroll-snap-type: x mandatory;
+
+  scrollbar-width: none;
+  /* Hide scrollbar IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide Scrollbar Firefox */
+}
+
+.carousel:last-child {
+  margin-right: 1.6rem;
+}
+
+.carousel > * {
+  scroll-snap-align: start;
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.gridContainer::-webkit-scrollbar {
+  display: none;
+}
+
+@media screen and (min-width: 1367px) {
+  .oneColumnGrid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .twoColumnGrid,
+  .twoPlusOne {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .threeColumnGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .fourColumnGrid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .twoPlusOne > *:last-child {
+    grid-column: span 2;
+  }
+
+  .carousel {
+    grid-auto-flow: unset;
+    margin: 0;
+    padding: 0;
+  }
+}

components/TempDesignSystem/CardGrid/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./cardGrid.module.css"
+
+export const cardGridVariants = cva(styles.gridContainer, {
+  variants: {
+    isMobileCarousel: {
+      true: styles.carousel,
+    },
+    variant: {
+      oneColumnGrid: styles.oneColumnGrid,
+      twoColumnGrid: styles.twoColumnGrid,
+      threeColumnGrid: styles.threeColumnGrid,
+      fourColumnGrid: styles.fourColumnGrid,
+      twoPlusOne: styles.twoPlusOne,
+    },
+  },
+  defaultVariants: {
+    variant: "threeColumnGrid",
+  },
+})