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,
};