stories/ContentLockup.stories.js

@@ -0,0 +1,92 @@
+import ContentLockup from "../app/components/ContentLockup";
+
+export default {
+  title: "Components/ContentLockup",
+  component: ContentLockup,
+  parameters: {
+    layout: "centered",
+    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.",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "The main title text",
+    },
+    subtitle: {
+      control: { type: "text" },
+      description: "The subtitle text",
+    },
+    description: {
+      control: { type: "text" },
+      description: "The description text",
+    },
+    ctaText: {
+      control: { type: "text" },
+      description: "The call-to-action button text",
+    },
+    ctaHref: {
+      control: { type: "text" },
+      description: "The call-to-action button link",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  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: "#",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default content lockup with standard Community Rule messaging.",
+      },
+    },
+  },
+};
+
+export const LongDescription = {
+  args: {
+    title: "Collaborate",
+    subtitle: "with clarity",
+    description:
+      "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: "#",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Content lockup with longer description text to test text wrapping.",
+      },
+    },
+  },
+};
+
+export const ShortContent = {
+  args: {
+    title: "Simple",
+    subtitle: "solution",
+    description: "Easy community decision making.",
+    ctaText: "Try it",
+    ctaHref: "#",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Content lockup with minimal content to test compact layouts.",
+      },
+    },
+  },
+};

stories/HeroBanner.stories.js

@@ -0,0 +1,57 @@
+import HeroBanner from "../app/components/HeroBanner";
+
+export default {
+  title: "Components/HeroBanner",
+  component: HeroBanner,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A responsive hero banner component that showcases the Community Rule branding and messaging. Adapts across multiple breakpoints with proper spacing, typography, and interactive elements. Includes background decorations and product demo integration.",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "The main title text",
+    },
+    subtitle: {
+      control: { type: "text" },
+      description: "The subtitle text",
+    },
+    description: {
+      control: { type: "text" },
+      description: "The description text",
+    },
+    ctaText: {
+      control: { type: "text" },
+      description: "The call-to-action button text",
+    },
+    ctaHref: {
+      control: { type: "text" },
+      description: "The call-to-action button link",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  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: "#",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Default hero banner with standard Community Rule messaging and branding.",
+      },
+    },
+  },
+};

stories/HeroBannerSystem.stories.js

@@ -0,0 +1,248 @@
+import HeroBanner from "../app/components/HeroBanner";
+import ContentLockup from "../app/components/ContentLockup";
+import HeroDecor from "../app/components/HeroDecor";
+
+export default {
+  title: "Systems/HeroBanner System",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Complete HeroBanner system showcasing all nested components working together. This demonstrates the full responsive behavior and component integration.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const CompleteSystem = {
+  render: () => (
+    <div className="min-h-screen bg-gray-50">
+      <HeroBanner
+        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="#"
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Complete HeroBanner system with all components integrated. Resize your browser to see responsive behavior across all breakpoints.",
+      },
+    },
+  },
+};
+
+export const ComponentBreakdown = {
+  render: () => (
+    <div className="space-y-12 p-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-6">HeroBanner Components</h2>
+
+        <div className="space-y-8">
+          <div>
+            <h3 className="text-lg font-semibold mb-4">
+              1. ContentLockup Component
+            </h3>
+            <div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg">
+              <ContentLockup
+                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="#"
+              />
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-4">
+              2. HeroDecor Component
+            </h3>
+            <div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden h-64">
+              <HeroDecor className="w-full h-full" />
+              <div className="relative z-10 text-white mt-4">
+                <p>Decoration appears behind content</p>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-4">
+              3. Complete HeroBanner
+            </h3>
+            <HeroBanner
+              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="#"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Breakdown of individual components that make up the HeroBanner system, showing how they work together.",
+      },
+    },
+  },
+};
+
+export const ResponsiveBreakpoints = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <h2 className="text-2xl font-bold">Responsive Breakpoints</h2>
+
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-lg font-semibold mb-2">XSmall (≤429px)</h3>
+          <div
+            className="border-2 border-gray-300 rounded-lg overflow-hidden"
+            style={{ width: "400px" }}
+          >
+            <HeroBanner
+              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="#"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Small (430px+)</h3>
+          <div
+            className="border-2 border-gray-300 rounded-lg overflow-hidden"
+            style={{ width: "600px" }}
+          >
+            <HeroBanner
+              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="#"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Medium (768px+)</h3>
+          <div
+            className="border-2 border-gray-300 rounded-lg overflow-hidden"
+            style={{ width: "900px" }}
+          >
+            <HeroBanner
+              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="#"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Large (1024px+)</h3>
+          <div
+            className="border-2 border-gray-300 rounded-lg overflow-hidden"
+            style={{ width: "1200px" }}
+          >
+            <HeroBanner
+              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="#"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">XLarge (1440px+)</h3>
+          <div
+            className="border-2 border-gray-300 rounded-lg overflow-hidden"
+            style={{ width: "1600px" }}
+          >
+            <HeroBanner
+              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="#"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "HeroBanner system demonstrating responsive behavior at each breakpoint. Each container simulates a different screen size.",
+      },
+    },
+  },
+};
+
+export const ContentVariations = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <h2 className="text-2xl font-bold">Content Variations</h2>
+
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Standard Content</h3>
+          <HeroBanner
+            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="#"
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Alternative Content</h3>
+          <HeroBanner
+            title="Build"
+            subtitle="better communities"
+            description="Create operating manuals that help your community thrive and make decisions together."
+            ctaText="Get started today"
+            ctaHref="/signup"
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Long Description</h3>
+          <HeroBanner
+            title="Collaborate"
+            subtitle="with clarity"
+            description="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="#"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "HeroBanner system with different content variations to demonstrate flexibility and content handling.",
+      },
+    },
+  },
+};

stories/HeroDecor.stories.js

@@ -0,0 +1,58 @@
+import HeroDecor from "../app/components/HeroDecor";
+
+export default {
+  title: "Components/HeroDecor",
+  component: HeroDecor,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A decorative SVG component that provides background visual elements for the HeroBanner. Features grain effects and organic shapes that enhance the visual appeal without interfering with content readability.",
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for positioning and styling",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    className: "w-[400px] h-[200px]",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default hero decoration with standard sizing and positioning.",
+      },
+    },
+  },
+};
+
+export const WithBackground = {
+  args: {
+    className: "w-[600px] h-[300px]",
+  },
+  render: (args) => (
+    <div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden">
+      <HeroDecor {...args} />
+      <div className="relative z-10 text-white mt-4">
+        <h3>Content Overlay</h3>
+        <p>This demonstrates how the decoration appears behind content.</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Hero decoration with background color to show how it integrates with content.",
+      },
+    },
+  },
+};

stories/NumberedCard.stories.js

@@ -94,20 +94,3 @@ export const LongText = {
     },
   },
 };
-
-export const ResponsiveTest = {
-  args: {
-    number: 2,
-    text: "Test responsive behavior by resizing your browser window",
-    iconShape: "gear",
-    iconColor: "purple",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
-      },
-    },
-  },
-};

stories/NumberedCards.stories.js

@@ -90,36 +90,3 @@ export const CustomContent = {
     },
   },
 };
-
-export const ResponsiveBreakpoints = {
-  args: {
-    title: "Responsive Design Test",
-    subtitle:
-      "This story demonstrates how the component adapts across different breakpoints: xsm, sm, lg, and xl.",
-    cards: [
-      {
-        text: "Mobile-first design approach",
-        iconShape: "blob",
-        iconColor: "green",
-      },
-      {
-        text: "Tablet and desktop optimization",
-        iconShape: "gear",
-        iconColor: "purple",
-      },
-      {
-        text: "Large screen layouts and spacing",
-        iconShape: "star",
-        iconColor: "orange",
-      },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
-      },
-    },
-  },
-};