import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as t}from"./HeroBanner-D2qHR4vw.js";import{C as r}from"./ContentLockup-DbWiPA4N.js";import{H as o}from"./HeroDecor-Csfoi-N_.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./Button-Z4hbXct5.js";const y={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"]},n={render:()=>e.jsx("div",{className:"min-h-screen bg-gray-50",children:e.jsx(t,{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:"Complete HeroBanner system with all components integrated. Resize your browser to see responsive behavior across all breakpoints."}}}},a={render:()=>e.jsx("div",{className:"space-y-12 p-8",children:e.jsxs("div",{children:[e.jsx("h2",{className:"text-2xl font-bold mb-6",children:"HeroBanner Components"}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-4",children:"1. ContentLockup Component"}),e.jsx("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg",children:e.jsx(r,{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:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-4",children:"2. HeroDecor Component"}),e.jsxs("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden h-64",children:[e.jsx(o,{className:"w-full h-full"}),e.jsx("div",{className:"relative z-10 text-white mt-4",children:e.jsx("p",{children:"Decoration appears behind content"})})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-4",children:"3. Complete HeroBanner"}),e.jsx(t,{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:"Breakdown of individual components that make up the HeroBanner system, showing how they work together."}}}},s={render:()=>e.jsxs("div",{className:"space-y-8 p-8",children:[e.jsx("h2",{className:"text-2xl font-bold",children:"Responsive Breakpoints"}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"XSmall (≤429px)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"400px"},children:e.jsx(t,{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:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Small (430px+)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"600px"},children:e.jsx(t,{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:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Medium (768px+)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"900px"},children:e.jsx(t,{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:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Large (1024px+)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"1200px"},children:e.jsx(t,{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:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"XLarge (1440px+)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"1600px"},children:e.jsx(t,{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:"HeroBanner system demonstrating responsive behavior at each breakpoint. Each container simulates a different screen size."}}}},i={render:()=>e.jsxs("div",{className:"space-y-8 p-8",children:[e.jsx("h2",{className:"text-2xl font-bold",children:"Content Variations"}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Standard Content"}),e.jsx(t,{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:"#"})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Alternative Content"}),e.jsx(t,{title:"Build",subtitle:"better communities",description:"Create operating manuals that help your community thrive and make decisions together.",ctaText:"Get started today",ctaHref:"/signup"})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Long Description"}),e.jsx(t,{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:"HeroBanner system with different content variations to demonstrate flexibility and content handling."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  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."
      }
    }
  }
}`,...n.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  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."
      }
    }
  }
}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  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."
      }
    }
  }
}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  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."
      }
    }
  }
}`,...i.parameters?.docs?.source}}};const v=["CompleteSystem","ComponentBreakdown","ResponsiveBreakpoints","ContentVariations"];export{n as CompleteSystem,a as ComponentBreakdown,i as ContentVariations,s as ResponsiveBreakpoints,v as __namedExportsOrder,y as default};