fix: refactor buttons on card grid

components/Loyalty/Blocks/CardsGrid/index.tsx

@@ -20,22 +20,8 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
             scriptedTopTitle={card.scripted_top_title}
             heading={card.heading}
             bodyText={card.body_text}
-            secondaryButton={
+            secondaryButton={card.secondaryButton}
-              card.secondaryButton && {
+            primaryButton={card.primaryButton}
-                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>

components/TempDesignSystem/Card/card.module.css

@@ -1,15 +1,82 @@
-.linkCard {
+.container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 37rem;
+  height: 48rem;
   width: 100%;
   margin-right: 1.6rem;
   border-radius: 1.6rem;
-  gap: 1rem;
+  gap: var(--x2, 16px);
-  padding: 1.6rem;
+  padding: 0px 3.2rem;
 
-  background-color: var(--Base-Fill-Normal);
   text-align: center;
 }
+
+.themeOne {
+  --font-color: var(--Brand-Main-Strong, #4d001b);
+  --script-color: var(--UI-Red-70, #ad0015);
+  --divider-color: var(--UI-Red-10, #f7c1c2);
+
+  background: var(--Theme-Primary-Light-Surface-Normal, #f7e1d5);
+}
+
+.themeTwo {
+  --font-color: var(--Brand-Forest-Strong, #093021);
+  --script-color: var(--UI-Green-70, #286806);
+  --divider-color: var(--UI-Green-10, #badda8);
+
+  background: var(--Brand-Forest-Subtle, #d2edaf);
+}
+
+.themeThree {
+  --font-color: var(--Brand-Sea-Strong, #0d1440);
+  --script-color: var(--UI-Blue-70, #1555b4);
+  --divider-color: var(--UI-Blue-10, #c7d9f5);
+
+  background: var(--Brand-Sea-Accent, #fff0c2);
+}
+
+.scriptContainer {
+  display: grid;
+  gap: 1rem;
+}
+
+.scriptedTitle {
+  color: var(--script-color);
+
+  font-family: var(--ff-biro-script-plus);
+  font-size: var(--Script-1, 2.4rem);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 110%; /* 1.65rem */
+  letter-spacing: 0.03rem;
+  padding: 1rem;
+
+  transform: rotate(-3deg);
+}
+
+.divider {
+  border-bottom-color: var(--divider-color);
+}
+
+.heading {
+  color: var(--font-color);
+}
+
+.bodyText {
+  color: var(--font-color);
+  text-align: center;
+
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: 0.096px;
+}
+
+.buttonContainer {
+  display: flex;
+  gap: 0.8rem;
+  justify-content: center;
+}

components/TempDesignSystem/Card/card.ts

@@ -1,9 +1,24 @@
-export type CardProps = {
+import { cardVariants } from "./variants"
-  link?: {
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {
+  primaryButton?: {
     href: string
     title: string
+    openInNewTab?: boolean
+    isExternal: boolean
   }
-  title?: string | null
+  secondaryButton?: {
-  subtitle?: string | null
+    href: string
-  openInNewTab?: boolean
+    title: string
+    openInNewTab?: boolean
+    isExternal: boolean
+  }
+  scriptedTopTitle?: string | null
+  heading?: string | null
+  bodyText?: string | null
+  backgroundImage?: { url: string }
 }

components/TempDesignSystem/Card/index.tsx

@@ -1,36 +1,93 @@
 import Title from "@/components/Title"
 
 import Button from "../Button"
+import { ButtonProps } from "../Button/button"
+import Divider from "../Divider"
 import Link from "../Link"
 import { CardProps } from "./card"
+import { cardVariants } from "./variants"
 
 import styles from "./card.module.css"
 
 export default function Card({
-  link,
+  primaryButton,
-  subtitle,
+  secondaryButton,
-  title,
+  scriptedTopTitle,
-  openInNewTab = false,
+  heading,
+  bodyText,
+  backgroundImage,
+  className,
+  theme,
 }: CardProps) {
+  let buttonTheme: ButtonProps["theme"] = "primaryLight"
+
+  switch (theme) {
+    case "one":
+      buttonTheme = "primaryLight"
+      break
+    case "two":
+      buttonTheme = "secondaryLight"
+      break
+    case "three":
+      buttonTheme = "tertiaryLight"
+      break
+  }
+
   return (
-    <article className={styles.linkCard}>
+    <article
-      {title ? (
+      className={cardVariants({
-        <Title level="h3" weight="semiBold">
+        className,
-          {title}
+        theme,
+      })}
+    >
+      {scriptedTopTitle ? (
+        <section className={styles.scriptContainer}>
+          <Title level="h3" weight="semiBold" className={styles.scriptedTitle}>
+            {scriptedTopTitle}
+          </Title>
+          <Divider className={styles.divider} />
+        </section>
+      ) : null}
+      {heading ? (
+        <Title
+          level="h3"
+          as="h5"
+          weight="semiBold"
+          uppercase
+          className={styles.heading}
+        >
+          {heading}
         </Title>
       ) : null}
-      {subtitle ? (
+      {bodyText ? <p className={styles.bodyText}>{bodyText}</p> : null}
-        <Title level="h5" weight="light">
+      <div className={styles.buttonContainer}>
-          {subtitle}
+        {primaryButton ? (
-        </Title>
+          <Button asChild theme={buttonTheme} size="small">
-      ) : null}
+            <Link
-      {link ? (
+              href={primaryButton.href}
-        <Button asChild intent="primary">
+              target={primaryButton.openInNewTab ? "_blank" : undefined}
-          <Link href={link.href} target={openInNewTab ? "_blank" : undefined}>
+            >
-            {link.title}
+              {primaryButton.title}
-          </Link>
+            </Link>
-        </Button>
+          </Button>
-      ) : null}
+        ) : null}
+        {secondaryButton ? (
+          <Button
+            asChild
+            theme={buttonTheme}
+            size="small"
+            intent="secondary"
+            disabled
+          >
+            <Link
+              href={secondaryButton.href}
+              target={secondaryButton.openInNewTab ? "_blank" : undefined}
+            >
+              {secondaryButton.title}
+            </Link>
+          </Button>
+        ) : null}
+      </div>
     </article>
   )
 }

components/TempDesignSystem/CardGrid/variants.ts

@@ -9,10 +9,11 @@ export const cardGridVariants = cva(styles.gridContainer, {
     },
     variant: {
       twoColumnGrid: styles.twoColumnGrid,
-      treeColumnGrid: styles.treeColumnGrid,
+      threeColumnGrid: styles.threeColumnGrid,
+      twoPlusOne: styles.twoPlusOne,
     },
   },
   defaultVariants: {
-    variant: "treeColumnGrid",
+    variant: "threeColumnGrid",
   },
 })

components/Title/title.module.css

@@ -2,6 +2,7 @@
   /* font-family: var(--ff-brandon-text); */
   margin: 0;
   padding: 0;
+  color: var(--Brand-Main-Strong);
 }
 
 .uppercase {