Feature Grid default breakpoint

stories/ContentLockup.stories.js

@@ -8,7 +8,7 @@ export default {
     docs: {
       description: {
         component:
-          "A content lockup component that groups title, subtitle, description, and CTA button. Features responsive typography and spacing that adapts across breakpoints. Used within the HeroBanner component.",
+          "A content lockup component that groups title, subtitle, description, and CTA button. Features responsive typography and spacing that adapts across breakpoints. Supports hero and feature variants with different styling and typography scales.",
       },
     },
   },
@@ -38,11 +38,16 @@ export default {
       description:
         "Additional CSS classes to apply to the large button (md/lg breakpoints)",
     },
+    variant: {
+      control: { type: "select" },
+      options: ["hero", "feature"],
+      description: "The visual variant of the content lockup",
+    },
   },
   tags: ["autodocs"],
 };
 
-export const Default = {
+export const Hero = {
   args: {
     title: "Collaborate",
     subtitle: "with clarity",
@@ -50,11 +55,33 @@ export const Default = {
       "Help your community make important decisions in a way that reflects its unique values.",
     ctaText: "Learn how Community Rule works",
     ctaHref: "#",
+    variant: "hero",
   },
   parameters: {
     docs: {
       description: {
-        story: "Default content lockup with standard Community Rule messaging.",
+        story:
+          "Hero variant with large typography and inverse colors, designed for prominent display areas.",
+      },
+    },
+  },
+};
+
+export const Feature = {
+  args: {
+    title: "Build",
+    subtitle: "consensus",
+    description:
+      "Create structured decision-making processes that help your community reach agreement on important matters.",
+    ctaText: "Explore consensus methods",
+    ctaHref: "#",
+    variant: "feature",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Feature variant with smaller typography and primary colors, designed for content sections.",
       },
     },
   },
@@ -68,6 +95,7 @@ export const LongDescription = {
       "Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",
     ctaText: "Learn how Community Rule works",
     ctaHref: "#",
+    variant: "hero",
   },
   parameters: {
     docs: {
@@ -86,6 +114,7 @@ export const ShortContent = {
     description: "Easy community decision making.",
     ctaText: "Try it",
     ctaHref: "#",
+    variant: "feature",
   },
   parameters: {
     docs: {
@@ -105,6 +134,7 @@ export const CustomButtonStyling = {
     ctaText: "Learn how Community Rule works",
     ctaHref: "#",
     buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]",
+    variant: "hero",
   },
   parameters: {
     docs: {