From 6e274124c36c13765ba620484fa8547714dd9aa9 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 19 Aug 2025 23:16:13 -0600
Subject: [PATCH] Content Lockup button fixed

---
 app/components/ContentLockup.js  | 15 +++++++++------
 app/components/HeroBanner.js     |  1 +
 stories/ContentLockup.stories.js | 25 +++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index 273fa3d..d5df66b 100644
--- a/app/components/ContentLockup.js
+++ b/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>
diff --git a/app/components/HeroBanner.js b/app/components/HeroBanner.js
index 93acafe..4b2f7d4 100644
--- a/app/components/HeroBanner.js
+++ b/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>
 
diff --git a/stories/ContentLockup.stories.js b/stories/ContentLockup.stories.js
index e37a74e..6247073 100644
--- a/stories/ContentLockup.stories.js
+++ b/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).",
+      },
+    },
+  },
+};