From e606d4b6a5d21acfe6f311301f6b11dc2b19f6ce Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 27 Aug 2025 10:29:32 -0600
Subject: [PATCH] Make Feature Grid an HTML section

---
 app/components/FeatureGrid.js | 118 +++++++++++++++++-----------------
 1 file changed, 58 insertions(+), 60 deletions(-)

diff --git a/app/components/FeatureGrid.js b/app/components/FeatureGrid.js
index 7c6c4fa..0cdec2e 100644
--- a/app/components/FeatureGrid.js
+++ b/app/components/FeatureGrid.js
@@ -6,67 +6,65 @@ import MiniCard from "./MiniCard";
 
 const FeatureGrid = ({ title, subtitle, className = "" }) => {
   return (
-    <div className="p-0 lg:p-[var(--spacing-scale-064)]">
-      <section
-        className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2 ${className}`}
-        aria-labelledby="feature-grid-headline"
-        role="region"
-        tabIndex={-1}
-      >
-        <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
-          {/* Feature Content Lockup */}
-          <div className="lg:shrink lg:min-w-0">
-            <ContentLockup
-              title={title}
-              subtitle={subtitle}
-              variant="feature"
-              linkText="Learn more"
-              linkHref="#"
-            />
-          </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"
-            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>
+    <section
+      className={`p-0 lg:p-[var(--spacing-scale-064)] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2 ${className}`}
+      aria-labelledby="feature-grid-headline"
+      role="region"
+      tabIndex={-1}
+    >
+      <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
+        {/* Feature Content Lockup */}
+        <div className="lg:shrink lg:min-w-0">
+          <ContentLockup
+            title={title}
+            subtitle={subtitle}
+            variant="feature"
+            linkText="Learn more"
+            linkHref="#"
+          />
         </div>
-      </section>
-    </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"
+          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>
+    </section>
   );
 };