app/components/ContentLockup.js

@@ -2,7 +2,14 @@
 
 import Button from "./Button";
 
-const ContentLockup = ({ title, subtitle, description, ctaText, ctaHref }) => {
+const ContentLockup = ({
+  title,
+  subtitle,
+  description,
+  ctaText,
+  ctaHref,
+  buttonClassName = "",
+}) => {
   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">
       {/* Text content container */}
@@ -43,11 +50,7 @@ const ContentLockup = ({ title, subtitle, description, ctaText, ctaHref }) => {
         </div>
         {/* Large button for md and lg breakpoints */}
         <div className="hidden md:block xl:hidden">
-          <Button
-            variant="primary"
-            size="large"
-            className="shrink-0 whitespace-nowrap min-w-[280px]"
-          >
+          <Button variant="primary" size="large" className={buttonClassName}>
             {ctaText}
           </Button>
         </div>

app/components/HeroBanner.js

@@ -25,6 +25,7 @@ const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
               description={description}
               ctaText={ctaText}
               ctaHref={ctaHref}
+              buttonClassName="shrink-0 whitespace-nowrap min-w-[280px]"
             />
           </div>
 

stories/ContentLockup.stories.js

@@ -33,6 +33,11 @@ export default {
       control: { type: "text" },
       description: "The call-to-action button link",
     },
+    buttonClassName: {
+      control: { type: "text" },
+      description:
+        "Additional CSS classes to apply to the large button (md/lg breakpoints)",
+    },
   },
   tags: ["autodocs"],
 };
@@ -90,3 +95,23 @@ export const ShortContent = {
     },
   },
 };
+
+export const CustomButtonStyling = {
+  args: {
+    title: "Collaborate",
+    subtitle: "with clarity",
+    description:
+      "Help your community make important decisions in a way that reflects its unique values.",
+    ctaText: "Learn how Community Rule works",
+    ctaHref: "#",
+    buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Content lockup with custom button styling applied to the large button (md/lg breakpoints).",
+      },
+    },
+  },
+};