feat(SW-272) added mega menu

components/TempDesignSystem/Card/card.module.css

@@ -1,10 +1,11 @@
 .container {
-  align-items: center;
+  position: relative;
   display: flex;
-  border-radius: var(--Corner-radius-Medium);
+  align-items: center;
   flex-direction: column;
-  height: 320px; /* Fixed height from Figma */
   justify-content: center;
+  border-radius: var(--Corner-radius-Medium);
+  height: 320px; /* Fixed height from Figma */
   margin-right: var(--Spacing-x2);
   text-align: center;
   width: 100%;
@@ -12,11 +13,29 @@
   overflow: hidden;
 }
 
+.imageWrapper {
+  display: flex;
+}
+
+.imageWrapper::after {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.36) 50%,
+    rgba(0, 0, 0, 0.75) 100%
+  );
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .image {
   object-fit: cover;
-  overflow: hidden;
   width: 100%;
-  height: auto;
+  height: 100%;
   min-height: 320px; /* Fixed height from Figma */
 }
 
@@ -78,9 +97,10 @@
 .themeImage {
   --font-color: var(--Base-Text-Inverted);
   --script-color: var(--Base-Text-Inverted);
+}
 
-  border: 1px; /* px from Figma */
-  border-color: var(--Base-Border-Subtle);
+.themeImage .content {
+  position: absolute;
 }
 
 .scriptContainer {
@@ -88,7 +108,7 @@
   gap: var(--Spacing-x1);
 }
 
-span.scriptedTitle {
+.scriptedTitle {
   color: var(--script-color);
   padding: var(--Spacing-x1);
   margin: 0;
@@ -98,7 +118,7 @@ span.scriptedTitle {
   color: var(--font-color);
 }
 
-p.bodyText {
+.bodyText {
   color: var(--font-color);
 }
 

components/TempDesignSystem/Card/card.ts

@@ -11,16 +11,18 @@ export interface CardProps
     href: string
     title: string
     openInNewTab?: boolean
-    isExternal: boolean
-  }
+    isExternal?: boolean
+  } | null
   secondaryButton?: {
     href: string
     title: string
     openInNewTab?: boolean
-    isExternal: boolean
-  }
+    isExternal?: boolean
+  } | null
   scriptedTopTitle?: string | null
   heading?: string | null
   bodyText?: string | null
   backgroundImage?: ImageVaultAsset
+  onPrimaryButtonClick?: () => void
+  onSecondaryButtonClick?: () => void
 }

components/TempDesignSystem/Card/index.tsx

@@ -21,24 +21,28 @@ export default function Card({
   className,
   theme,
   backgroundImage,
+  onPrimaryButtonClick,
+  onSecondaryButtonClick,
 }: CardProps) {
   const { buttonTheme, primaryLinkColor, secondaryLinkColor } = getTheme(theme)
 
   return (
     <article
       className={cardVariants({
-        className,
         theme,
+        className,
       })}
     >
       {backgroundImage && (
-        <Image
-          src={backgroundImage.url}
-          className={styles.image}
-          alt={backgroundImage.meta.alt || backgroundImage.title}
-          width={420}
-          height={320}
-        />
+        <div className={styles.imageWrapper}>
+          <Image
+            src={backgroundImage.url}
+            className={styles.image}
+            alt={backgroundImage.meta.alt || backgroundImage.title}
+            width={backgroundImage.dimensions.width || 420}
+            height={backgroundImage.dimensions.height || 320}
+          />
+        </div>
       )}
       <div className={styles.content}>
         {scriptedTopTitle ? (
@@ -73,6 +77,7 @@ export default function Card({
                 href={primaryButton.href}
                 target={primaryButton.openInNewTab ? "_blank" : undefined}
                 color={primaryLinkColor}
+                onClick={onPrimaryButtonClick}
               >
                 {primaryButton.title}
               </Link>
@@ -90,6 +95,7 @@ export default function Card({
                 href={secondaryButton.href}
                 target={secondaryButton.openInNewTab ? "_blank" : undefined}
                 color={secondaryLinkColor}
+                onClick={onSecondaryButtonClick}
               >
                 {secondaryButton.title}
               </Link>