@snow-labs/brutal-ui 0.1.1 → 0.2.1

package/dist/components/brutal/index.js

@@ -4,6 +4,13 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
+import { useState, useEffect, useRef } from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import { Menu, XIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
 
 // src/lib/utils.ts
 function cn(...inputs) {
@@ -13,9 +20,6 @@ var colorMap = {
   white: "bg-background text-foreground",
   brand: "bg-brand",
   "brand-muted": "bg-brand-muted text-foreground",
-  blue: "bg-section-blue",
-  gray: "bg-section-gray text-foreground",
-  cream: "bg-section-cream text-foreground",
   black: "bg-foreground text-background",
   cta: "bg-cta"
 };
@@ -29,16 +33,28 @@ var paddingMap = {
   default: "brutal-section",
   lg: "brutal-section py-28 sm:py-36 md:py-44"
 };
+var patternMap = {
+  dots: "brutal-dots",
+  stripes: "brutal-stripes",
+  noise: "brutal-noise",
+  grain: "brutal-grain",
+  crosshatch: "brutal-crosshatch",
+  "grid-dots": "brutal-grid-dots",
+  "gradient-mesh": "brutal-gradient-mesh",
+  none: ""
+};
 function BrutalSection({
   children,
   color = "white",
   className,
   containerSize = "default",
   padding = "default",
+  pattern,
   dots = false,
   stripes = false,
   id
 }) {
+  const resolvedPattern = pattern ?? (dots ? "dots" : void 0) ?? (stripes ? "stripes" : void 0) ?? "none";
   return /* @__PURE__ */ jsx(
     "section",
     {
@@ -46,45 +62,67 @@ function BrutalSection({
       className: cn(
         paddingMap[padding],
         colorMap[color],
-        dots && "brutal-dots",
-        stripes && "brutal-stripes",
+        patternMap[resolvedPattern],
         className
       ),
       children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })
     }
   );
 }
-function WaveDivider({
+var paths = {
+  wave: "M0,64 C160,128 320,0 480,64 C640,128 800,0 960,64 L960,160 L0,160 Z",
+  jagged: "M0,80 L80,40 L160,80 L240,20 L320,80 L400,40 L480,80 L560,20 L640,80 L720,40 L800,80 L880,20 L960,80 L960,160 L0,160 Z",
+  curve: "M0,128 Q480,-32 960,128 L960,160 L0,160 Z",
+  castle: "M0,80 L0,60 L80,60 L80,80 L120,80 L120,40 L200,40 L200,80 L240,80 L240,60 L320,60 L320,80 L360,80 L360,40 L440,40 L440,80 L480,80 L480,60 L560,60 L560,80 L600,80 L600,40 L680,40 L680,80 L720,80 L720,60 L800,60 L800,80 L840,80 L840,40 L920,40 L920,80 L960,80 L960,160 L0,160 Z",
+  "torn-paper": "M0,70 C30,65 45,85 80,72 C115,59 130,90 170,78 C210,66 225,88 270,75 C315,62 340,92 380,79 C420,66 445,86 490,73 C535,60 560,88 600,76 C640,64 665,90 710,77 C755,64 780,84 830,71 C875,58 900,86 960,80 L960,160 L0,160 Z",
+  "brush-stroke": "M0,90 C80,50 120,100 200,60 C280,20 360,110 480,70 C600,30 640,100 720,80 C800,60 880,100 960,70 L960,160 L0,160 Z",
+  geometric: "M0,100 L120,60 L240,80 L360,40 L480,90 L600,50 L720,70 L840,30 L960,80 L960,160 L0,160 Z",
+  blob: "M0,80 C80,120 160,40 280,80 C400,120 440,30 560,70 C680,110 760,40 960,80 L960,160 L0,160 Z",
+  diagonal: "M0,160 L960,60 L960,160 Z",
+  zigzag: "M0,80 L60,40 L120,80 L180,40 L240,80 L300,40 L360,80 L420,40 L480,80 L540,40 L600,80 L660,40 L720,80 L780,40 L840,80 L900,40 L960,80 L960,160 L0,160 Z",
+  "hand-drawn": "M0,72 C20,68 35,82 60,75 C85,68 95,84 125,76 C155,68 170,85 200,77 C230,69 245,83 275,75 C305,67 320,86 350,78 C380,70 395,82 425,74 C455,66 470,84 500,76 C530,68 545,83 575,75 C605,67 620,85 650,77 C680,69 695,82 725,74 C755,66 770,84 800,76 C830,68 845,83 875,75 C905,67 920,82 960,74 L960,160 L0,160 Z"
+};
+function SectionDivider({
   from = "hsl(var(--background))",
   to = "hsl(var(--background))",
   flip = false,
   className = "",
-  variant = "wave"
+  variant = "wave",
+  layers = false
 }) {
-  const paths = {
-    wave: "M0,64 C160,128 320,0 480,64 C640,128 800,0 960,64 L960,160 L0,160 Z",
-    jagged: "M0,80 L80,40 L160,80 L240,20 L320,80 L400,40 L480,80 L560,20 L640,80 L720,40 L800,80 L880,20 L960,80 L960,160 L0,160 Z",
-    curve: "M0,128 Q480,-32 960,128 L960,160 L0,160 Z",
-    castle: "M0,80 L0,60 L80,60 L80,80 L120,80 L120,40 L200,40 L200,80 L240,80 L240,60 L320,60 L320,80 L360,80 L360,40 L440,40 L440,80 L480,80 L480,60 L560,60 L560,80 L600,80 L600,40 L680,40 L680,80 L720,80 L720,60 L800,60 L800,80 L840,80 L840,40 L920,40 L920,80 L960,80 L960,160 L0,160 Z"
-  };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `relative -my-px w-full overflow-hidden ${className}`,
+      className: cn("relative -my-px w-full overflow-hidden", className),
       style: { backgroundColor: from },
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          viewBox: "0 0 960 160",
-          preserveAspectRatio: "none",
-          className: "block w-full",
-          style: {
-            height: "clamp(40px, 6vw, 80px)",
-            transform: flip ? "scaleY(-1)" : void 0
-          },
-          children: /* @__PURE__ */ jsx("path", { d: paths[variant], fill: to })
-        }
-      )
+      children: [
+        layers && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 960 160",
+            preserveAspectRatio: "none",
+            className: "absolute inset-0 block w-full opacity-30",
+            style: {
+              height: "clamp(40px, 6vw, 80px)",
+              transform: flip ? "scaleY(-1) translateY(4px)" : "translateY(-4px)"
+            },
+            children: /* @__PURE__ */ jsx("path", { d: paths[variant], fill: to })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 960 160",
+            preserveAspectRatio: "none",
+            className: "relative block w-full",
+            style: {
+              height: "clamp(40px, 6vw, 80px)",
+              transform: flip ? "scaleY(-1)" : void 0
+            },
+            children: /* @__PURE__ */ jsx("path", { d: paths[variant], fill: to })
+          }
+        )
+      ]
     }
   );
 }
@@ -145,39 +183,76 @@ function Button({
   );
 }
 function BrutalHero({
+  variant = "split",
   badge,
+  badgePosition = "above",
   headline,
   description,
   ctaText,
   ctaHref = "#",
   ctaVariant = "cta",
+  secondaryText,
+  secondaryHref,
   visual,
   color = "brand",
+  pattern,
   proof,
   className
 }) {
-  return /* @__PURE__ */ jsx(BrutalSection, { color, padding: "lg", className, children: /* @__PURE__ */ jsxs(
+  const badgeElement = badge && /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "grid items-center gap-12",
-        visual ? "lg:grid-cols-2 lg:gap-16" : "max-w-3xl"
+        "inline-flex w-fit border-brutal border-foreground bg-background px-3 py-1 font-mono text-xs font-bold uppercase tracking-widest text-foreground shadow-brutal-sm",
+        badgePosition === "floating" && "absolute -top-3 left-6 z-10"
       ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-          badge && /* @__PURE__ */ jsx("div", { className: "inline-flex w-fit border-brutal border-foreground bg-background px-3 py-1 font-mono text-xs font-bold uppercase tracking-widest shadow-brutal-sm", children: badge }),
-          /* @__PURE__ */ jsx("h1", { className: "brutal-display text-balance", children: headline }),
-          /* @__PURE__ */ jsx("p", { className: "brutal-body-lg max-w-lg opacity-80", children: description }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: ctaVariant, size: "xl", render: /* @__PURE__ */ jsx("a", { href: ctaHref }), children: ctaText }) }),
-          proof && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm font-medium opacity-70", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-flex size-5 items-center justify-center border border-current text-xs", children: "\u2713" }),
-            proof
-          ] })
-        ] }),
-        visual && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: visual })
-      ]
+      children: badge
     }
-  ) });
+  );
+  const textContent = /* @__PURE__ */ jsxs("div", { className: cn(
+    "flex flex-col gap-6",
+    variant === "centered" && "items-center text-center"
+  ), children: [
+    badgePosition === "above" && badgeElement,
+    /* @__PURE__ */ jsxs("h1", { className: cn(
+      "brutal-display text-balance",
+      variant === "centered" && "mx-auto max-w-4xl"
+    ), children: [
+      badgePosition === "inline" && badgeElement,
+      headline
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: cn(
+      "brutal-body-lg max-w-lg opacity-80",
+      variant === "centered" && "mx-auto"
+    ), children: description }),
+    /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex flex-col gap-4 sm:flex-row sm:flex-wrap",
+      variant === "centered" && "sm:justify-center"
+    ), children: [
+      /* @__PURE__ */ jsx(Button, { variant: ctaVariant, size: "xl", className: "w-full sm:w-auto", render: /* @__PURE__ */ jsx("a", { href: ctaHref }), children: ctaText }),
+      secondaryText && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "xl", className: "w-full sm:w-auto", render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }), children: secondaryText })
+    ] }),
+    proof && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm font-medium opacity-70", children: [
+      /* @__PURE__ */ jsx("span", { className: "inline-flex size-5 items-center justify-center border border-current text-xs", children: "\u2713" }),
+      proof
+    ] })
+  ] });
+  const layoutClass = {
+    split: "grid items-center gap-12 lg:grid-cols-2 lg:gap-16",
+    centered: "flex flex-col items-center gap-12",
+    overlap: "relative",
+    asymmetric: "grid items-center gap-12 lg:grid-cols-[3fr_2fr] lg:gap-16"
+  }[variant];
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, padding: "lg", pattern, className: cn("relative", className), children: [
+    badgePosition === "floating" && badgeElement,
+    /* @__PURE__ */ jsxs("div", { className: layoutClass, children: [
+      textContent,
+      visual && variant === "overlap" ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-20", children: visual }) : visual ? /* @__PURE__ */ jsx("div", { className: cn(
+        "flex items-center justify-center",
+        variant === "asymmetric" && "-rotate-2 transform"
+      ), children: visual }) : null
+    ] })
+  ] });
 }
 function Card({
   className,
@@ -241,6 +316,7 @@ var colMap = {
   4: "sm:grid-cols-2 lg:grid-cols-4"
 };
 function BrutalFeatureGrid({
+  variant = "icon-top",
   badge,
   headline,
   description,
@@ -251,57 +327,196 @@ function BrutalFeatureGrid({
 }) {
   return /* @__PURE__ */ jsxs(BrutalSection, { color, className, children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", children: [
-      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-muted-foreground", children: badge }),
+      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-brand", children: badge }),
       /* @__PURE__ */ jsx("h2", { className: "brutal-h2 mb-4", children: headline }),
       description && /* @__PURE__ */ jsx("p", { className: "brutal-body text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("grid gap-6", colMap[columns]), children: features.map((feature) => /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid gap-6",
+          variant === "bento" ? "sm:grid-cols-2 lg:grid-cols-3" : colMap[columns]
+        ),
+        children: features.map((feature, i) => /* @__PURE__ */ jsx(
+          FeatureCard,
+          {
+            feature,
+            variant,
+            index: i
+          },
+          feature.title
+        ))
+      }
+    )
+  ] });
+}
+function FeatureCard({
+  feature,
+  variant,
+  index
+}) {
+  const isBentoFeatured = variant === "bento" && feature.featured;
+  if (variant === "icon-left") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex gap-4 border-brutal border-foreground border-l-4 border-l-brand bg-background p-5 shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg", children: [
+      feature.icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 shrink-0 items-center justify-center border-brutal border-foreground bg-brand-muted text-2xl shadow-brutal-sm", children: feature.icon }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-1 text-brand", children: feature.stat }),
+        /* @__PURE__ */ jsx("h3", { className: "brutal-h4 mb-1", children: feature.title }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+      ] })
+    ] });
+  }
+  if (variant === "numbered") {
+    return /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsxs(CardHeader, { children: [
-        feature.icon && /* @__PURE__ */ jsx("div", { className: "mb-2 inline-flex size-12 items-center justify-center border-brutal border-foreground bg-brand-muted text-2xl shadow-brutal-sm", children: feature.icon }),
+        /* @__PURE__ */ jsx("span", { className: "brutal-display mb-2 block text-brand opacity-20", children: String(index + 1).padStart(2, "0") }),
+        feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-1 text-brand", children: feature.stat }),
         /* @__PURE__ */ jsx(CardTitle, { children: feature.title })
       ] }),
       /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(CardDescription, { children: feature.description }) })
-    ] }, feature.title)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        isBentoFeatured && "sm:col-span-2 bg-brand-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          feature.icon && /* @__PURE__ */ jsx("div", { className: "mb-2 inline-flex size-12 items-center justify-center border-brutal border-foreground border-b-brand bg-brand-muted text-2xl shadow-brutal-sm", children: feature.icon }),
+          feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-1 text-brand", children: feature.stat }),
+          /* @__PURE__ */ jsx(CardTitle, { children: feature.title })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(CardDescription, { children: feature.description }) })
+      ]
+    }
+  );
+}
+function StarRating({ rating }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-sm",
+        i < rating ? "text-amber-500" : "text-foreground/20"
+      ),
+      children: "\u2605"
+    },
+    i
+  )) });
+}
+function TestimonialCard({
+  t,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative break-inside-avoid border-brutal border-foreground bg-background p-5 text-foreground shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute top-3 right-4 select-none font-serif text-5xl leading-none text-foreground/[0.06]", children: "\u201C" }),
+        t.rating && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(StarRating, { rating: t.rating }) }),
+        /* @__PURE__ */ jsx("p", { className: "relative mb-4 text-sm leading-relaxed", children: t.text }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          t.avatar ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: t.avatar,
+              alt: t.name,
+              className: "size-9 border-2 object-cover",
+              style: { borderColor: "hsl(var(--brand))" }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex size-9 items-center justify-center border-2 font-bold text-brand-foreground",
+              style: {
+                borderColor: "hsl(var(--brand))",
+                backgroundColor: "hsl(var(--brand))"
+              },
+              children: t.name[0]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", children: t.name }),
+            (t.role || t.company) && /* @__PURE__ */ jsxs("p", { className: "truncate text-xs text-muted-foreground", children: [
+              t.role,
+              t.role && t.company && " \xB7 ",
+              t.company
+            ] }),
+            !t.role && !t.company && t.handle && /* @__PURE__ */ jsx("p", { className: "font-mono text-xs text-muted-foreground", children: t.handle })
+          ] }),
+          t.companyLogo && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: t.companyLogo,
+              alt: t.company || "",
+              className: "h-5 object-contain opacity-60"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function MasonryLayout({ testimonials }) {
+  return /* @__PURE__ */ jsx("div", { className: "columns-1 gap-6 sm:columns-2 lg:columns-3", children: testimonials.map((t, i) => /* @__PURE__ */ jsx(TestimonialCard, { t, className: "mb-6" }, i)) });
+}
+function FeaturedGridLayout({
+  testimonials
+}) {
+  const featured = testimonials.find((t) => t.featured) || testimonials[0];
+  const rest = testimonials.filter((t) => t !== featured);
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [
+    featured && /* @__PURE__ */ jsx(
+      TestimonialCard,
+      {
+        t: featured,
+        className: "flex flex-col justify-between p-8 lg:row-span-2"
+      }
+    ),
+    rest.map((t, i) => /* @__PURE__ */ jsx(TestimonialCard, { t }, i))
+  ] });
+}
+function CarouselLayout({ testimonials }) {
+  return /* @__PURE__ */ jsx("div", { className: "-mx-6 flex snap-x snap-mandatory gap-6 overflow-x-auto px-6 pb-4", children: testimonials.map((t, i) => /* @__PURE__ */ jsx(
+    TestimonialCard,
+    {
+      t,
+      className: "w-80 flex-none snap-center"
+    },
+    i
+  )) });
+}
+function WallOfLoveLayout({ testimonials }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative max-h-[600px] overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: testimonials.map((t, i) => /* @__PURE__ */ jsx(TestimonialCard, { t }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent" })
   ] });
 }
 function BrutalTestimonials({
   badge,
   headline,
   testimonials,
-  color = "blue",
+  variant = "masonry",
+  color = "brand-muted",
+  pattern,
   className
 }) {
-  return /* @__PURE__ */ jsxs(BrutalSection, { color, className, children: [
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, pattern, className, children: [
     (headline || badge) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
       badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 opacity-70", children: badge }),
       headline && /* @__PURE__ */ jsx("h2", { className: "brutal-h2", children: headline })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "columns-1 gap-6 sm:columns-2 lg:columns-3", children: testimonials.map((t, i) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "mb-6 break-inside-avoid border-brutal border-foreground bg-background p-5 text-foreground shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm leading-relaxed", children: t.text }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            t.avatar ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: t.avatar,
-                alt: t.name,
-                className: "size-9 border-brutal border-foreground object-cover"
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex size-9 items-center justify-center border-brutal border-foreground bg-brand font-bold text-brand-foreground", children: t.name[0] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", children: t.name }),
-              t.handle && /* @__PURE__ */ jsx("p", { className: "font-mono text-xs text-muted-foreground", children: t.handle })
-            ] })
-          ] })
-        ]
-      },
-      i
-    )) })
+    variant === "masonry" && /* @__PURE__ */ jsx(MasonryLayout, { testimonials }),
+    variant === "featured-grid" && /* @__PURE__ */ jsx(FeaturedGridLayout, { testimonials }),
+    variant === "carousel" && /* @__PURE__ */ jsx(CarouselLayout, { testimonials }),
+    variant === "wall-of-love" && /* @__PURE__ */ jsx(WallOfLoveLayout, { testimonials })
   ] });
 }
 function BrutalIntegrationGrid({
@@ -342,63 +557,259 @@ function BrutalIntegrationGrid({
     }) })
   ] });
 }
-function BrutalCTA({
-  headline,
-  description,
+function CTAButtons({
   ctaText,
   ctaHref = "#",
   ctaVariant = "cta",
   secondaryText,
-  secondaryHref,
-  color = "black",
-  className
+  secondaryHref
 }) {
-  return /* @__PURE__ */ jsx(BrutalSection, { color, className, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
-    /* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: headline }),
-    description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-8 opacity-80", children: description }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-center", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: ctaVariant,
+        size: "xl",
+        className: "w-full sm:w-auto",
+        render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
+        children: ctaText
+      }
+    ),
+    secondaryText && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "xl",
+        className: "w-full sm:w-auto",
+        render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
+        children: secondaryText
+      }
+    )
+  ] });
+}
+function CenteredCTA(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
+    /* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: props.headline }),
+    props.description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-4 opacity-80", children: props.description }),
+    props.stats && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-8 opacity-60", children: props.stats }),
+    /* @__PURE__ */ jsx(
+      CTAButtons,
+      {
+        ctaText: props.ctaText,
+        ctaHref: props.ctaHref,
+        ctaVariant: props.ctaVariant,
+        secondaryText: props.secondaryText,
+        secondaryHref: props.secondaryHref
+      }
+    )
+  ] });
+}
+function SplitCTA(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: props.headline }),
+      props.description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-4 opacity-80", children: props.description }),
+      props.stats && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-8 opacity-60", children: props.stats }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:flex-wrap", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: props.ctaVariant || "cta",
+            size: "xl",
+            className: "w-full sm:w-auto",
+            render: /* @__PURE__ */ jsx("a", { href: props.ctaHref || "#" }),
+            children: props.ctaText
+          }
+        ),
+        props.secondaryText && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "xl",
+            className: "w-full sm:w-auto",
+            render: /* @__PURE__ */ jsx("a", { href: props.secondaryHref || "#" }),
+            children: props.secondaryText
+          }
+        )
+      ] })
+    ] }),
+    props.visual && /* @__PURE__ */ jsx("div", { children: props.visual })
+  ] });
+}
+function WithVisualCTA(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    props.visual && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-10", children: props.visual }),
+    /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-2xl text-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: props.headline }),
+      props.description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-4 opacity-80", children: props.description }),
+      props.stats && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-8 opacity-60", children: props.stats }),
       /* @__PURE__ */ jsx(
-        Button,
+        CTAButtons,
         {
-          variant: ctaVariant,
-          size: "xl",
-          render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
-          children: ctaText
-        }
-      ),
-      secondaryText && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outline",
-          size: "lg",
-          render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
-          children: secondaryText
+          ctaText: props.ctaText,
+          ctaHref: props.ctaHref,
+          ctaVariant: props.ctaVariant,
+          secondaryText: props.secondaryText,
+          secondaryHref: props.secondaryHref
         }
       )
     ] })
+  ] });
+}
+function FloatingCardCTA(props) {
+  return /* @__PURE__ */ jsx("div", { className: "relative z-10 -mt-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl border-brutal border-foreground bg-background p-8 text-center text-foreground shadow-brutal-lg", children: [
+    /* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: props.headline }),
+    props.description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-4 opacity-80", children: props.description }),
+    props.stats && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-8 opacity-60", children: props.stats }),
+    /* @__PURE__ */ jsx(
+      CTAButtons,
+      {
+        ctaText: props.ctaText,
+        ctaHref: props.ctaHref,
+        ctaVariant: props.ctaVariant,
+        secondaryText: props.secondaryText,
+        secondaryHref: props.secondaryHref
+      }
+    )
   ] }) });
 }
+function BrutalCTA({
+  variant = "centered",
+  color = "black",
+  className,
+  pattern,
+  ...props
+}) {
+  if (variant === "floating-card") {
+    return /* @__PURE__ */ jsx("div", { className: cn("brutal-container px-6", className), children: /* @__PURE__ */ jsx(FloatingCardCTA, { ...props, variant, color }) });
+  }
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, pattern, className, children: [
+    variant === "centered" && /* @__PURE__ */ jsx(CenteredCTA, { ...props, variant, color }),
+    variant === "split" && /* @__PURE__ */ jsx(SplitCTA, { ...props, variant, color }),
+    variant === "with-visual" && /* @__PURE__ */ jsx(WithVisualCTA, { ...props, variant, color })
+  ] });
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/60 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 border-brutal border-foreground bg-background bg-clip-padding text-sm shadow-brutal-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            Dialog.Close,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-3 right-3",
+                  size: "icon-sm"
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  XIcon,
+                  {}
+                ),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-base font-bold text-foreground", className),
+      ...props
+    }
+  );
+}
 function BrutalNav({
   logo,
   links,
   ctaText = "Sign In",
   ctaHref = "/admin",
+  variant = "solid",
   className
 }) {
-  return /* @__PURE__ */ jsx(
-    "header",
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  useEffect(() => {
+    if (variant !== "transparent") return;
+    const onScroll = () => setIsScrolled(window.scrollY > 20);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [variant]);
+  const variantStyles = {
+    solid: "sticky top-0 z-50 w-full border-b-brutal border-foreground bg-brand",
+    transparent: cn(
+      "fixed top-0 left-0 right-0 z-50 w-full transition-all duration-200",
+      isScrolled ? "bg-background/80 text-foreground backdrop-blur-md border-b border-foreground/10" : "bg-transparent text-white"
+    ),
+    "floating-pill": "fixed top-0 left-0 right-0 z-50 mx-4 mt-4 rounded-full border-brutal border-foreground bg-background shadow-brutal"
+  };
+  return /* @__PURE__ */ jsx("header", { className: cn(variantStyles[variant], className), children: /* @__PURE__ */ jsxs(
+    "div",
     {
       className: cn(
-        "sticky top-0 z-50 w-full border-b-brutal border-foreground bg-brand",
-        className
+        "flex h-14 items-center justify-between px-6",
+        variant === "floating-pill" ? "mx-auto max-w-7xl" : "brutal-container"
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "brutal-container flex h-14 items-center justify-between px-6", children: [
+      children: [
         /* @__PURE__ */ jsx("a", { href: "/", className: "flex items-center gap-2 text-lg font-black", children: logo }),
         /* @__PURE__ */ jsx("nav", { className: "hidden items-center gap-1 md:flex", children: links.map((link) => /* @__PURE__ */ jsxs(
           "a",
           {
             href: link.href,
-            className: "relative px-3 py-1.5 text-sm font-bold transition-colors hover:opacity-70",
+            className: cn(
+              "relative rounded-md px-3 py-1.5 text-sm font-bold transition-colors hover:opacity-70",
+              link.active && "bg-foreground/10"
+            ),
             children: [
               link.label,
               link.badge && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 border border-foreground bg-background px-1 font-mono text-[9px] font-bold uppercase text-foreground", children: link.badge })
@@ -406,44 +817,202 @@ function BrutalNav({
           },
           link.href
         )) }),
-        /* @__PURE__ */ jsx(Button, { variant: "nav", size: "sm", render: /* @__PURE__ */ jsx("a", { href: ctaHref }), children: ctaText })
-      ] })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "nav",
+              size: "sm",
+              render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
+              className: "hidden md:inline-flex",
+              children: ctaText
+            }
+          ),
+          /* @__PURE__ */ jsxs(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+            /* @__PURE__ */ jsxs(
+              SheetTrigger,
+              {
+                render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", className: "md:hidden" }),
+                children: [
+                  /* @__PURE__ */ jsx(Menu, { className: "size-5" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Menu" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(SheetContent, { side: "right", showCloseButton: true, children: [
+              /* @__PURE__ */ jsx(SheetTitle, { children: "Navigation" }),
+              /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-1 px-2 pt-4", children: [
+                links.map((link) => /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: link.href,
+                    onClick: () => setMobileOpen(false),
+                    className: cn(
+                      "flex items-center gap-2 rounded-md px-3 py-2.5 text-sm font-bold transition-colors hover:bg-foreground/5",
+                      link.active && "bg-foreground/10"
+                    ),
+                    children: [
+                      link.label,
+                      link.badge && /* @__PURE__ */ jsx("span", { className: "border border-foreground bg-background px-1 font-mono text-[9px] font-bold uppercase text-foreground", children: link.badge })
+                    ]
+                  },
+                  link.href
+                )),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 border-t border-foreground/10 pt-4", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "default",
+                    size: "default",
+                    render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
+                    className: "w-full",
+                    children: ctaText
+                  }
+                ) })
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base font-medium shadow-brutal-sm transition-all outline-none placeholder:text-muted-foreground focus:shadow-brutal focus:-translate-x-0.5 focus:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm",
+        className
+      ),
+      ...props
     }
   );
 }
+function SocialsRow({
+  socials
+}) {
+  const items = [
+    { key: "twitter", label: "Twitter", url: socials.twitter },
+    { key: "github", label: "GitHub", url: socials.github },
+    { key: "linkedin", label: "LinkedIn", url: socials.linkedin },
+    { key: "discord", label: "Discord", url: socials.discord }
+  ].filter((s) => s.url);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: items.map((s) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: s.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "text-sm font-bold transition-colors hover:text-muted-foreground",
+      children: s.label
+    },
+    s.key
+  )) });
+}
+function NewsletterSection({
+  newsletter
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "mb-10 border-b-brutal border-foreground pb-10", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg text-center", children: [
+    /* @__PURE__ */ jsx("h3", { className: "brutal-h4 mb-2", children: newsletter.headline || "Stay in the loop" }),
+    newsletter.description && /* @__PURE__ */ jsx("p", { className: "brutal-caption mb-4", children: newsletter.description }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (e) => e.preventDefault(),
+        className: "flex gap-2",
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "email",
+              placeholder: newsletter.placeholder || "you@email.com",
+              className: "flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "default", size: "default", type: "submit", children: newsletter.buttonText || "Subscribe" })
+        ]
+      }
+    )
+  ] }) });
+}
+function MegaContent({
+  logo,
+  tagline,
+  columns,
+  socials
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-10 flex flex-col gap-8 sm:flex-row sm:items-start sm:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "max-w-xs", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-2 text-xl font-black", children: logo }),
+      tagline && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: tagline }),
+      socials && /* @__PURE__ */ jsx(SocialsRow, { socials })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 sm:grid-cols-3 md:gap-12", children: columns.map((col) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "brutal-label mb-3 text-muted-foreground", children: col.title }),
+      /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: col.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: link.href,
+          className: "text-sm font-medium transition-colors hover:text-muted-foreground",
+          children: link.label
+        }
+      ) }, link.href)) })
+    ] }, col.title)) })
+  ] });
+}
+function MinimalContent({
+  logo,
+  columns,
+  socials
+}) {
+  const allLinks = columns.flatMap((col) => col.links);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-col items-center gap-4 sm:flex-row sm:justify-between", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-xl font-black", children: logo }),
+    /* @__PURE__ */ jsx("nav", { className: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2", children: allLinks.map((link) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: link.href,
+        className: "text-sm font-medium transition-colors hover:text-muted-foreground",
+        children: link.label
+      },
+      link.href
+    )) }),
+    socials && /* @__PURE__ */ jsx(SocialsRow, { socials })
+  ] });
+}
 function BrutalFooter({
   logo,
   tagline,
   columns,
   bottomLeft,
   bottomRight,
+  variant = "mega",
+  socials,
+  newsletter,
   className
 }) {
   return /* @__PURE__ */ jsx(
     "footer",
     {
       className: cn(
-        "w-full border-t-brutal border-foreground bg-background px-6 py-12 text-foreground",
+        "w-full border-t-4 bg-background px-6 py-12 text-foreground",
         className
       ),
+      style: { borderTopColor: "hsl(var(--brand))" },
       children: /* @__PURE__ */ jsxs("div", { className: "brutal-container", children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-10 flex flex-col gap-8 sm:flex-row sm:items-start sm:justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "max-w-xs", children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-2 text-xl font-black", children: logo }),
-            tagline && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: tagline })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 sm:grid-cols-3 md:gap-12", children: columns.map((col) => /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h3", { className: "brutal-label mb-3 text-muted-foreground", children: col.title }),
-            /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: col.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: link.href,
-                className: "text-sm font-medium transition-colors hover:text-muted-foreground",
-                children: link.label
-              }
-            ) }, link.href)) })
-          ] }, col.title)) })
-        ] }),
+        variant === "newsletter" && newsletter && /* @__PURE__ */ jsx(NewsletterSection, { newsletter }),
+        variant === "minimal" ? /* @__PURE__ */ jsx(MinimalContent, { logo, columns, socials }) : /* @__PURE__ */ jsx(
+          MegaContent,
+          {
+            logo,
+            tagline,
+            columns,
+            socials
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t-brutal border-foreground pt-6 font-mono text-xs uppercase tracking-widest text-muted-foreground", children: [
           /* @__PURE__ */ jsx("span", { children: bottomLeft || "Built with care" }),
           /* @__PURE__ */ jsx("span", { children: bottomRight || (/* @__PURE__ */ new Date()).getFullYear() })
@@ -452,7 +1021,345 @@ function BrutalFooter({
     }
   );
 }
+var badgeVariants = cva(
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-md whitespace-nowrap font-bold transition-all [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "border-brutal border-foreground bg-primary px-3 py-1 text-xs text-primary-foreground shadow-brutal-sm",
+        secondary: "border-brutal border-foreground bg-secondary px-3 py-1 text-xs text-secondary-foreground shadow-brutal-sm",
+        brand: "border-brutal border-foreground bg-brand px-3 py-1 text-xs text-brand-foreground shadow-brutal-sm",
+        cta: "border-brutal border-foreground bg-cta px-3 py-1 text-xs text-cta-foreground shadow-brutal-sm",
+        outline: "border-brutal border-foreground bg-background px-3 py-1 text-xs text-foreground",
+        destructive: "border-brutal border-destructive bg-destructive/10 px-3 py-1 text-xs text-destructive",
+        ghost: "px-2 py-0.5 text-xs text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(badgeVariants({ variant }), className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant
+    }
+  });
+}
+function PricingTable({
+  badge,
+  headline,
+  description,
+  tiers,
+  popularIndex,
+  billingToggle = true,
+  color = "white",
+  className
+}) {
+  const [annual, setAnnual] = useState(false);
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, className, children: [
+    (headline || badge) && /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center", children: [
+      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-muted-foreground", children: badge }),
+      headline && /* @__PURE__ */ jsx("h2", { className: "brutal-h2 mb-4", children: headline }),
+      description && /* @__PURE__ */ jsx("p", { className: "brutal-body mx-auto max-w-lg text-muted-foreground", children: description })
+    ] }),
+    billingToggle && /* @__PURE__ */ jsxs("div", { className: "mb-10 flex items-center justify-center gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("text-sm font-bold", !annual && "text-brand"), children: "Monthly" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setAnnual(!annual),
+          className: cn(
+            "relative h-8 w-14 border-brutal border-foreground transition-colors",
+            annual ? "bg-brand" : "bg-secondary"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute top-1 size-6 border border-foreground bg-background transition-transform",
+                annual ? "left-7" : "left-1"
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: cn("text-sm font-bold", annual && "text-brand"), children: "Annual" }),
+      annual && /* @__PURE__ */ jsx(Badge, { variant: "cta", children: "Save 20%" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn(
+      "grid gap-6",
+      tiers.length === 2 && "mx-auto max-w-2xl sm:grid-cols-2",
+      tiers.length === 3 && "lg:grid-cols-3",
+      tiers.length >= 4 && "sm:grid-cols-2 lg:grid-cols-4"
+    ), children: tiers.map((tier, i) => {
+      const isPopular = i === popularIndex;
+      const price = annual ? tier.price.annual : tier.price.monthly;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex flex-col border-brutal border-foreground bg-background p-6 shadow-brutal",
+            isPopular && "border-brand shadow-brutal-lg ring-2 ring-brand z-10 scale-105"
+          ),
+          children: [
+            isPopular && /* @__PURE__ */ jsx(Badge, { variant: "brand", className: "absolute -top-3 left-1/2 -translate-x-1/2", children: "Popular" }),
+            /* @__PURE__ */ jsx("h3", { className: "brutal-h4 mb-1", children: tier.name }),
+            tier.description && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: tier.description }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+              /* @__PURE__ */ jsx("span", { className: "brutal-h1", children: typeof price === "number" ? `$${price}` : price }),
+              typeof price === "number" && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "/mo" })
+            ] }),
+            /* @__PURE__ */ jsx("ul", { className: "mb-8 flex flex-1 flex-col gap-2", children: tier.features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-brand", children: "\u2713" }),
+              feature
+            ] }, feature)) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: tier.ctaVariant || (isPopular ? "cta" : "outline"),
+                size: "lg",
+                className: "w-full",
+                render: tier.ctaHref ? /* @__PURE__ */ jsx("a", { href: tier.ctaHref }) : void 0,
+                children: tier.ctaText
+              }
+            )
+          ]
+        },
+        tier.name
+      );
+    }) })
+  ] });
+}
+function LogoCloud({
+  title,
+  logos,
+  marquee = false,
+  color = "white",
+  className
+}) {
+  const logoElements = logos.map((logo) => {
+    const img = /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logo.src,
+        alt: logo.alt,
+        className: "h-8 max-w-[120px] object-contain opacity-50 grayscale transition-all duration-200 hover:opacity-100 hover:grayscale-0"
+      },
+      logo.alt
+    );
+    return logo.href ? /* @__PURE__ */ jsx("a", { href: logo.href, className: "flex items-center px-6", children: img }, logo.alt) : /* @__PURE__ */ jsx("div", { className: "flex items-center px-6", children: img }, logo.alt);
+  });
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, padding: "sm", className, children: [
+    title && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-6 text-center text-muted-foreground", children: title }),
+    marquee ? /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex animate-marquee", children: [
+      logoElements,
+      logoElements
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-8", children: logoElements })
+  ] });
+}
+function useCountUp(target, inView) {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    if (!inView) return;
+    let frame;
+    const duration = 1500;
+    const start = performance.now();
+    function animate(now) {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setCount(Math.round(eased * target));
+      if (progress < 1) frame = requestAnimationFrame(animate);
+    }
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [target, inView]);
+  return count;
+}
+function StatItem({ stat, inView }) {
+  const count = useCountUp(stat.value, inView);
+  return /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsxs("p", { className: "brutal-display", children: [
+      stat.prefix,
+      count.toLocaleString(),
+      stat.suffix
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "brutal-label mt-2 text-muted-foreground", children: stat.label })
+  ] });
+}
+function StatsBar({ stats, color = "white", className }) {
+  const ref = useRef(null);
+  const [inView, setInView] = useState(false);
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.3 }
+    );
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(BrutalSection, { color, padding: "sm", className, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "grid gap-8",
+        stats.length === 2 && "grid-cols-2",
+        stats.length === 3 && "grid-cols-3",
+        stats.length >= 4 && "grid-cols-2 sm:grid-cols-4"
+      ),
+      children: stats.map((stat) => /* @__PURE__ */ jsx(StatItem, { stat, inView }, stat.label))
+    }
+  ) });
+}
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Root,
+    {
+      "data-slot": "accordion",
+      className: cn("flex w-full flex-col", className),
+      ...props
+    }
+  );
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-brutal border-foreground rounded-lg mb-2 px-3", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    Accordion$1.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-bold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }),
+        /* @__PURE__ */ jsx(ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Panel,
+    {
+      "data-slot": "accordion-content",
+      className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function FAQ({
+  badge,
+  headline,
+  items,
+  color = "white",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, className, children: [
+    (headline || badge) && /* @__PURE__ */ jsxs("div", { className: "mb-10 mx-auto max-w-2xl", children: [
+      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-brand", children: badge }),
+      headline && /* @__PURE__ */ jsx("h2", { className: "brutal-h2", children: headline })
+    ] }),
+    /* @__PURE__ */ jsx(Accordion, { className: "mx-auto max-w-2xl", children: items.map((item, i) => /* @__PURE__ */ jsxs(
+      AccordionItem,
+      {
+        value: `faq-${i}`,
+        className: cn(
+          "border-brutal border-foreground mb-3 px-5",
+          i % 2 === 0 ? "bg-background" : "bg-secondary"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { className: "brutal-h4 py-4 text-left", children: item.question }),
+          /* @__PURE__ */ jsx(AccordionContent, { className: "brutal-body pb-4 text-muted-foreground", children: item.answer })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+function Newsletter({
+  headline = "Stay in the loop",
+  description,
+  placeholder = "you@example.com",
+  buttonText = "Subscribe",
+  onSubmit,
+  color = "white",
+  className
+}) {
+  return /* @__PURE__ */ jsx(BrutalSection, { color, padding: "sm", className, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-md border-brutal border-foreground bg-background p-8 text-foreground shadow-brutal-lg", children: [
+    /* @__PURE__ */ jsx("h3", { className: "brutal-h3 mb-2", children: headline }),
+    description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-6 text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (e) => {
+          e.preventDefault();
+          const form = e.target;
+          const email = new FormData(form).get("email");
+          onSubmit?.(email);
+        },
+        className: "flex gap-3",
+        children: [
+          /* @__PURE__ */ jsx(Input, { type: "email", name: "email", placeholder, required: true, className: "flex-1" }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: "cta", children: buttonText })
+        ]
+      }
+    )
+  ] }) });
+}
 
-export { BrutalCTA, BrutalFeatureGrid, BrutalFooter, BrutalHero, BrutalIntegrationGrid, BrutalNav, BrutalSection, BrutalTestimonials, WaveDivider };
+export { BrutalCTA, BrutalFeatureGrid, BrutalFooter, BrutalHero, BrutalIntegrationGrid, BrutalNav, BrutalSection, BrutalTestimonials, FAQ, LogoCloud, Newsletter, PricingTable, SectionDivider, StatsBar, SectionDivider as WaveDivider };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map