Feature Grid default breakpoint

app/components/ContentLockup.js

@@ -9,58 +9,104 @@ const ContentLockup = ({
   ctaText,
   ctaHref,
   buttonClassName = "",
+  variant = "hero",
+  linkText,
+  linkHref,
 }) => {
+  // Variant-specific styling
+  const variantStyles = {
+    hero: {
+      container:
+        "flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10",
+      textContainer:
+        "flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]",
+      titleGroup: "flex flex-col xl:gap-0",
+      titleContainer:
+        "flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",
+      title:
+        "font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",
+      subtitle:
+        "font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",
+      description:
+        "font-inter font-normal text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)]",
+      shape:
+        "w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]",
+    },
+    feature: {
+      container: "flex flex-col gap-[var(--spacing-scale-012)] relative z-10",
+      textContainer: "flex flex-col gap-[var(--spacing-scale-012)]",
+      titleGroup: "flex flex-col gap-[var(--spacing-scale-012)]",
+      titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
+      title:
+        "font-bricolage-grotesque font-medium text-[32px] leading-[130%] tracking-[0] text-[var(--color-content-default-primary)]",
+      subtitle:
+        "font-space-grotesk font-normal text-[20px] leading-[130%] tracking-[0] text-[var(--color-content-default-primary)]",
+      description:
+        "font-inter font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-secondary)]",
+      shape:
+        "w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]",
+    },
+  };
+
+  const styles = variantStyles[variant] || variantStyles.hero;
+
   return (
-    <div className="flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10">
+    <div className={styles.container}>
       {/* Text content container */}
-      <div className="flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]">
-        {/* Title and subtitle group - no gap between them at xl */}
-        <div className="flex flex-col xl:gap-0">
+      <div className={styles.textContainer}>
+        {/* Title and subtitle group */}
+        <div className={styles.titleGroup}>
           {/* Title container */}
-          <div className="flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center">
-            <h1 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]">
-              {title}
-            </h1>
+          <div className={styles.titleContainer}>
+            <h1 className={styles.title}>{title}</h1>
             <img
               src="assets/Shapes_1.svg"
               alt="Decorative shapes"
-              className="w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]"
+              className={styles.shape}
             />
           </div>
 
           {/* Subtitle */}
-          <h2 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]">
-            {subtitle}
-          </h2>
+          <h2 className={styles.subtitle}>{subtitle}</h2>
         </div>
 
-        {/* Description - 20px gap from subtitle at xl */}
-        <p className="font-inter font-normal text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)]">
-          {description}
-        </p>
+        {/* Description */}
+        {description && <p className={styles.description}>{description}</p>}
       </div>
 
+      {/* Link for feature variant */}
+      {variant === "feature" && linkText && (
+        <a
+          href={linkHref || "#"}
+          className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors"
+        >
+          {linkText}
+        </a>
+      )}
+
       {/* CTA Button */}
-      <div className="flex justify-start">
-        {/* Small button for xsm and sm breakpoints */}
-        <div className="block md:hidden">
-          <Button variant="primary" size="small">
-            {ctaText}
-          </Button>
+      {ctaText && (
+        <div className="flex justify-start">
+          {/* Small button for xsm and sm breakpoints */}
+          <div className="block md:hidden">
+            <Button variant="primary" size="small">
+              {ctaText}
+            </Button>
+          </div>
+          {/* Large button for md and lg breakpoints */}
+          <div className="hidden md:block xl:hidden">
+            <Button variant="primary" size="large" className={buttonClassName}>
+              {ctaText}
+            </Button>
+          </div>
+          {/* XLarge button for xl breakpoint */}
+          <div className="hidden xl:block">
+            <Button variant="primary" size="xlarge">
+              {ctaText}
+            </Button>
+          </div>
         </div>
-        {/* Large button for md and lg breakpoints */}
-        <div className="hidden md:block xl:hidden">
-          <Button variant="primary" size="large" className={buttonClassName}>
-            {ctaText}
-          </Button>
-        </div>
-        {/* XLarge button for xl breakpoint */}
-        <div className="hidden xl:block">
-          <Button variant="primary" size="xlarge">
-            {ctaText}
-          </Button>
-        </div>
-      </div>
+      )}
     </div>
   );
 };

app/components/FeatureGrid.js

@@ -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;

app/components/MiniCard.js

@@ -0,0 +1,49 @@
+"use client";
+
+import React from "react";
+
+const MiniCard = ({
+  children,
+  className = "",
+  backgroundColor = "bg-[var(--color-surface-default-brand-royal)]",
+  panelContent,
+  label,
+  labelLine1,
+  labelLine2,
+}) => {
+  return (
+    <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`}
+      >
+        {/* Content for the inner panel */}
+        {panelContent && (
+          <div className="flex items-center justify-center w-full h-full">
+            <img
+              src={panelContent}
+              alt=""
+              className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
+            />
+          </div>
+        )}
+        {children}
+      </div>
+
+      {/* Bottom part - Text container */}
+      <div className="font-inter font-medium text-[12px] leading-[14px] text-center text-[var(--color-content-default-primary)]">
+        {labelLine1 && labelLine2 ? (
+          <>
+            <div>{labelLine1}</div>
+            <div>{labelLine2}</div>
+            <div>&nbsp;</div>
+          </>
+        ) : (
+          label
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MiniCard;

app/page.js

@@ -3,6 +3,7 @@ import HeroBanner from "./components/HeroBanner";
 import LogoWall from "./components/LogoWall";
 import RuleStack from "./components/RuleStack";
 import QuoteBlock from "./components/QuoteBlock";
+import FeatureGrid from "./components/FeatureGrid";
 
 export default function Page() {
   const heroBannerData = {
@@ -36,12 +37,19 @@ export default function Page() {
     ],
   };
 
+  const featureGridData = {
+    title: "We've got your back, every step of the way",
+    subtitle:
+      "Use our toolkit to improve, document, and evolve your organization.",
+  };
+
   return (
     <div>
       <HeroBanner {...heroBannerData} />
       <LogoWall />
       <NumberedCards {...numberedCardsData} />
       <RuleStack />
+      <FeatureGrid {...featureGridData} />
       <QuoteBlock />
     </div>
   );