Feature Grid default breakpoint

2025-08-26 20:43:57 -06:00
parent 646adba59d
commit 9e49c66611
10 changed files with 534 additions and 38 deletions
@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import ContentLockup from "./ContentLockup";
+import MiniCard from "./MiniCard";
+
+const FeatureGrid = ({ title, subtitle, className = "" }) => {
+  return (
+    <section
+      className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] bg-transparent ${className}`}
+      aria-labelledby="feature-grid-headline"
+      role="region"
+    >
+      <div className="max-w-[1200px] mx-auto gap-[var(--spacing-scale-048)]">
+        {/* Feature Content Lockup */}
+        <ContentLockup
+          title={title}
+          subtitle={subtitle}
+          variant="feature"
+          linkText="Learn more"
+          linkHref="#"
+        />
+
+        {/* MiniCard Grid */}
+        <div className="grid grid-cols-2 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)]">
+          <MiniCard
+            backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
+            labelLine1="Decision-making"
+            labelLine2="support"
+            panelContent="assets/Feature_Support.png"
+          />
+          <MiniCard
+            backgroundColor="bg-[#D1FFE2]"
+            labelLine1="Values alignment"
+            labelLine2="exercises"
+            panelContent="assets/Feature_Exercises.png"
+          />
+          <MiniCard
+            backgroundColor="bg-[#F4CAFF]"
+            labelLine1="Membership"
+            labelLine2="guidance"
+            panelContent="assets/Feature_Guidance.png"
+          />
+          <MiniCard
+            backgroundColor="bg-[#CBDDFF]"
+            labelLine1="Conflict resolution"
+            labelLine2="tools"
+            panelContent="assets/Feature_Tools.png"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeatureGrid;