Add interactivity and accessibility

app/components/MiniCard.js

@@ -10,19 +10,27 @@ const MiniCard = ({
   label,
   labelLine1,
   labelLine2,
+  onClick,
+  href,
+  ariaLabel,
 }) => {
-  return (
+  const cardContent = (
     <div className={`h-[186px] flex flex-col gap-[7px] ${className}`}>
       {/* Top part - Inner panel */}
       <div
-        className={`flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center`}
+        className={`flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`}
       >
         {/* Content for the inner panel */}
         {panelContent && (
           <div className="flex items-center justify-center w-full h-full">
             <img
               src={panelContent}
-              alt=""
+              alt={
+                ariaLabel ||
+                `${labelLine1} ${labelLine2}` ||
+                label ||
+                "Feature icon"
+              }
               className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
             />
           </div>
@@ -44,6 +52,56 @@ const MiniCard = ({
       </div>
     </div>
   );
+
+  // If href is provided, render as a link
+  if (href) {
+    return (
+      <a
+        href={href}
+        className="block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]"
+        aria-label={
+          ariaLabel || `${labelLine1} ${labelLine2}` || label || "Feature card"
+        }
+        tabIndex={0}
+      >
+        {cardContent}
+      </a>
+    );
+  }
+
+  // If onClick is provided, render as a button
+  if (onClick) {
+    return (
+      <button
+        onClick={onClick}
+        className="block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]"
+        aria-label={
+          ariaLabel || `${labelLine1} ${labelLine2}` || label || "Feature card"
+        }
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick();
+          }
+        }}
+      >
+        {cardContent}
+      </button>
+    );
+  }
+
+  // Default render as a div
+  return (
+    <div
+      className="block"
+      aria-label={
+        ariaLabel || `${labelLine1} ${labelLine2}` || label || "Feature card"
+      }
+    >
+      {cardContent}
+    </div>
+  );
 };
 
 export default MiniCard;