From 77882079e80ac6bb1f61a7ce5c782d7de69018ef Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 27 Aug 2025 09:23:54 -0600
Subject: [PATCH] Add interactivity and accessibility

---
 app/components/FeatureGrid.js | 14 +++++++-
 app/components/MiniCard.js    | 64 +++++++++++++++++++++++++++++++++--
 2 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/app/components/FeatureGrid.js b/app/components/FeatureGrid.js
index f6e19c1..8d29827 100644
--- a/app/components/FeatureGrid.js
+++ b/app/components/FeatureGrid.js
@@ -25,30 +25,42 @@ const FeatureGrid = ({ title, subtitle, className = "" }) => {
           </div>
 
           {/* MiniCard Grid */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0">
+          <div
+            className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0"
+            role="grid"
+            aria-label="Feature tools and services"
+          >
             <MiniCard
               backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
               labelLine1="Decision-making"
               labelLine2="support"
               panelContent="assets/Feature_Support.png"
+              ariaLabel="Decision-making support tools"
+              href="#decision-making"
             />
             <MiniCard
               backgroundColor="bg-[#D1FFE2]"
               labelLine1="Values alignment"
               labelLine2="exercises"
               panelContent="assets/Feature_Exercises.png"
+              ariaLabel="Values alignment exercises"
+              href="#values-alignment"
             />
             <MiniCard
               backgroundColor="bg-[#F4CAFF]"
               labelLine1="Membership"
               labelLine2="guidance"
               panelContent="assets/Feature_Guidance.png"
+              ariaLabel="Membership guidance resources"
+              href="#membership-guidance"
             />
             <MiniCard
               backgroundColor="bg-[#CBDDFF]"
               labelLine1="Conflict resolution"
               labelLine2="tools"
               panelContent="assets/Feature_Tools.png"
+              ariaLabel="Conflict resolution tools"
+              href="#conflict-resolution"
             />
           </div>
         </div>
diff --git a/app/components/MiniCard.js b/app/components/MiniCard.js
index 1df1040..9b5abf5 100644
--- a/app/components/MiniCard.js
+++ b/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;