@snow-labs/brutal-ui 0.3.1 → 0.4.0

package/dist/components/brutal/marquee.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface MarqueeProps {
+    children: React.ReactNode;
+    speed?: "slow" | "normal" | "fast";
+    direction?: "left" | "right";
+    pauseOnHover?: boolean;
+    className?: string;
+}
+declare function Marquee({ children, speed, direction, pauseOnHover, className, }: MarqueeProps): react_jsx_runtime.JSX.Element;
+interface MarqueeItemProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function MarqueeItem({ children, className }: MarqueeItemProps): react_jsx_runtime.JSX.Element;
+
+export { Marquee, MarqueeItem };

package/dist/components/brutal/marquee.js

@@ -0,0 +1,66 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var speedMap = {
+  slow: "60s",
+  normal: "30s",
+  fast: "15s"
+};
+function Marquee({
+  children,
+  speed = "normal",
+  direction = "left",
+  pauseOnHover = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group flex overflow-hidden border-y-brutal border-foreground bg-foreground py-3",
+        className
+      ),
+      children: [0, 1].map((copy) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "aria-hidden": copy === 1,
+          className: cn(
+            "flex shrink-0 items-center gap-8",
+            pauseOnHover && "group-hover:[animation-play-state:paused]"
+          ),
+          style: {
+            animation: `marquee ${speedMap[speed]} linear infinite`,
+            animationDirection: direction === "right" ? "reverse" : "normal"
+          },
+          children: [
+            children,
+            /* @__PURE__ */ jsx("span", { className: "mx-4 text-background/30 select-none", children: "\u2022" })
+          ]
+        },
+        copy
+      ))
+    }
+  );
+}
+function MarqueeItem({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center gap-2 whitespace-nowrap font-bold text-background",
+        className
+      ),
+      children
+    }
+  );
+}
+
+export { Marquee, MarqueeItem };
+//# sourceMappingURL=marquee.js.map
+//# sourceMappingURL=marquee.js.map

package/dist/components/brutal/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/marquee.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACKA,IAAM,QAAA,GAAW;AAAA,EACf,IAAA,EAAM,KAAA;AAAA,EACN,MAAA,EAAQ,KAAA;AAAA,EACR,IAAA,EAAM;AACR,CAAA;AAEO,SAAS,OAAA,CAAQ;AAAA,EACtB,QAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,SAAA,GAAY,MAAA;AAAA,EACZ,YAAA,GAAe,IAAA;AAAA,EACf;AACF,CAAA,EAAiB;AACf,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,iFAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,WAAC,CAAA,EAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,qBACX,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,eAAa,IAAA,KAAS,CAAA;AAAA,UACtB,SAAA,EAAW,EAAA;AAAA,YACT,kCAAA;AAAA,YACA,YAAA,IAAgB;AAAA,WAClB;AAAA,UACA,KAAA,EAAO;AAAA,YACL,SAAA,EAAW,CAAA,QAAA,EAAW,QAAA,CAAS,KAAK,CAAC,CAAA,gBAAA,CAAA;AAAA,YACrC,kBAAA,EAAoB,SAAA,KAAc,OAAA,GAAU,SAAA,GAAY;AAAA,WAC1D;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,4BAED,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,qCAAA,EAAsC,QAAA,EAAA,QAAA,EAAC;AAAA;AAAA,SAAA;AAAA,QAblD;AAAA,OAeR;AAAA;AAAA,GACH;AAEJ;AAOO,SAAS,WAAA,CAAY,EAAE,QAAA,EAAU,SAAA,EAAU,EAAqB;AACrE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,qFAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"marquee.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cn } from \"../../lib/utils\";\n\ninterface MarqueeProps {\n  children: React.ReactNode;\n  speed?: \"slow\" | \"normal\" | \"fast\";\n  direction?: \"left\" | \"right\";\n  pauseOnHover?: boolean;\n  className?: string;\n}\n\nconst speedMap = {\n  slow: \"60s\",\n  normal: \"30s\",\n  fast: \"15s\",\n};\n\nexport function Marquee({\n  children,\n  speed = \"normal\",\n  direction = \"left\",\n  pauseOnHover = true,\n  className,\n}: MarqueeProps) {\n  return (\n    <div\n      className={cn(\n        \"group flex overflow-hidden border-y-brutal border-foreground bg-foreground py-3\",\n        className\n      )}\n    >\n      {[0, 1].map((copy) => (\n        <div\n          key={copy}\n          aria-hidden={copy === 1}\n          className={cn(\n            \"flex shrink-0 items-center gap-8\",\n            pauseOnHover && \"group-hover:[animation-play-state:paused]\"\n          )}\n          style={{\n            animation: `marquee ${speedMap[speed]} linear infinite`,\n            animationDirection: direction === \"right\" ? \"reverse\" : \"normal\",\n          }}\n        >\n          {children}\n          {/* Separator */}\n          <span className=\"mx-4 text-background/30 select-none\">•</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n\ninterface MarqueeItemProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function MarqueeItem({ children, className }: MarqueeItemProps) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex shrink-0 items-center gap-2 whitespace-nowrap font-bold text-background\",\n        className\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n"]}

package/dist/components/brutal/mockup-window.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface MockupWindowProps {
+    children: React.ReactNode;
+    title?: string;
+    variant?: "browser" | "terminal" | "phone";
+    className?: string;
+}
+declare function MockupWindow({ children, title, variant, className, }: MockupWindowProps): react_jsx_runtime.JSX.Element;
+
+export { MockupWindow };

package/dist/components/brutal/mockup-window.js

@@ -0,0 +1,80 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function MockupWindow({
+  children,
+  title = "app.example.com",
+  variant = "browser",
+  className
+}) {
+  if (variant === "phone") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mx-auto w-[280px] overflow-hidden rounded-[2rem] border-brutal border-foreground bg-background shadow-brutal-lg",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center bg-foreground py-2", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-28 rounded-full bg-background/20" }) }),
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center bg-foreground py-3", children: /* @__PURE__ */ jsx("div", { className: "h-1 w-24 rounded-full bg-background/30" }) })
+        ]
+      }
+    );
+  }
+  if (variant === "terminal") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden rounded-lg border-brutal border-foreground shadow-brutal-lg",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b-brutal border-foreground bg-foreground px-4 py-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+              /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+              /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2 font-mono text-xs text-background/60", children: title })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "bg-foreground text-background", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-lg border-brutal border-foreground shadow-brutal-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b-brutal border-foreground bg-muted px-4 py-2.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full border border-foreground/20 bg-red-400" }),
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full border border-foreground/20 bg-yellow-400" }),
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full border border-foreground/20 bg-green-400" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-sm rounded-md border border-foreground/10 bg-background px-3 py-1 text-center font-mono text-xs text-muted-foreground", children: title }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-[54px]" }),
+          " "
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bg-background", children })
+      ]
+    }
+  );
+}
+
+export { MockupWindow };
+//# sourceMappingURL=mockup-window.js.map
+//# sourceMappingURL=mockup-window.js.map

package/dist/components/brutal/mockup-window.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/mockup-window.tsx"],"names":[],"mappings":"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","file":"mockup-window.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cn } from \"../../lib/utils\";\n\ninterface MockupWindowProps {\n  children: React.ReactNode;\n  title?: string;\n  variant?: \"browser\" | \"terminal\" | \"phone\";\n  className?: string;\n}\n\nexport function MockupWindow({\n  children,\n  title = \"app.example.com\",\n  variant = \"browser\",\n  className,\n}: MockupWindowProps) {\n  if (variant === \"phone\") {\n    return (\n      <div\n        className={cn(\n          \"mx-auto w-[280px] overflow-hidden rounded-[2rem] border-brutal border-foreground bg-background shadow-brutal-lg\",\n          className\n        )}\n      >\n        {/* Notch */}\n        <div className=\"flex justify-center bg-foreground py-2\">\n          <div className=\"h-5 w-28 rounded-full bg-background/20\" />\n        </div>\n        {/* Screen */}\n        <div className=\"overflow-hidden\">{children}</div>\n        {/* Home indicator */}\n        <div className=\"flex justify-center bg-foreground py-3\">\n          <div className=\"h-1 w-24 rounded-full bg-background/30\" />\n        </div>\n      </div>\n    );\n  }\n\n  if (variant === \"terminal\") {\n    return (\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lg border-brutal border-foreground shadow-brutal-lg\",\n          className\n        )}\n      >\n        {/* Title bar */}\n        <div className=\"flex items-center gap-2 border-b-brutal border-foreground bg-foreground px-4 py-2.5\">\n          <div className=\"flex gap-1.5\">\n            <div className=\"size-3 rounded-full bg-red-500\" />\n            <div className=\"size-3 rounded-full bg-yellow-500\" />\n            <div className=\"size-3 rounded-full bg-green-500\" />\n          </div>\n          <span className=\"ml-2 font-mono text-xs text-background/60\">\n            {title}\n          </span>\n        </div>\n        {/* Content */}\n        <div className=\"bg-foreground text-background\">{children}</div>\n      </div>\n    );\n  }\n\n  // Browser variant (default)\n  return (\n    <div\n      className={cn(\n        \"overflow-hidden rounded-lg border-brutal border-foreground shadow-brutal-lg\",\n        className\n      )}\n    >\n      {/* Title bar */}\n      <div className=\"flex items-center gap-3 border-b-brutal border-foreground bg-muted px-4 py-2.5\">\n        <div className=\"flex gap-1.5\">\n          <div className=\"size-3 rounded-full border border-foreground/20 bg-red-400\" />\n          <div className=\"size-3 rounded-full border border-foreground/20 bg-yellow-400\" />\n          <div className=\"size-3 rounded-full border border-foreground/20 bg-green-400\" />\n        </div>\n        {/* URL bar */}\n        <div className=\"flex-1\">\n          <div className=\"mx-auto max-w-sm rounded-md border border-foreground/10 bg-background px-3 py-1 text-center font-mono text-xs text-muted-foreground\">\n            {title}\n          </div>\n        </div>\n        <div className=\"w-[54px]\" /> {/* Spacer for centering */}\n      </div>\n      {/* Content */}\n      <div className=\"bg-background\">{children}</div>\n    </div>\n  );\n}\n"]}

package/dist/index.d.ts

@@ -40,9 +40,11 @@ export { BrutalSection, SectionColor, SectionPattern } from './components/brutal
 export { SectionDivider, SectionDivider as WaveDivider } from './components/brutal/section-divider.js';
 export { BrutalHero } from './components/brutal/hero.js';
 export { BrutalFeatureGrid } from './components/brutal/feature-grid.js';
+export { BrutalFeatureShowcase } from './components/brutal/feature-showcase.js';
 export { BrutalTestimonials, Testimonial } from './components/brutal/testimonials.js';
 export { BrutalIntegrationGrid } from './components/brutal/integration-grid.js';
 export { BrutalCTA } from './components/brutal/cta-section.js';
+export { BrutalComparisonTable } from './components/brutal/comparison-table.js';
 export { BrutalNav } from './components/brutal/nav.js';
 export { BrutalFooter } from './components/brutal/footer.js';
 export { PricingTable } from './components/brutal/pricing-table.js';
@@ -50,6 +52,8 @@ export { LogoCloud } from './components/brutal/logo-cloud.js';
 export { StatsBar } from './components/brutal/stats-bar.js';
 export { FAQ } from './components/brutal/faq.js';
 export { Newsletter } from './components/brutal/newsletter.js';
+export { MockupWindow } from './components/brutal/mockup-window.js';
+export { Marquee, MarqueeItem } from './components/brutal/marquee.js';
 export { AppShell, useAppShell } from './components/dashboard/app-shell.js';
 export { Sidebar } from './components/dashboard/sidebar.js';
 export { StatCard } from './components/dashboard/stat-card.js';

package/dist/index.js

@@ -3053,11 +3053,11 @@ function BrutalHero({
       variant === "centered" && "mx-auto"
     ), children: description }),
     /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex flex-wrap gap-4",
-      variant === "centered" && "justify-center"
+      "flex flex-col gap-3 sm:flex-row sm:gap-4",
+      variant === "centered" && "sm:justify-center"
     ), children: [
-      /* @__PURE__ */ jsx(Button, { variant: ctaVariant, size: "xl", render: /* @__PURE__ */ jsx("a", { href: ctaHref }), children: ctaText }),
-      secondaryText && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "xl", render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }), children: secondaryText })
+      /* @__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" }),
@@ -3128,6 +3128,14 @@ function FeatureCard({
   index
 }) {
   const isBentoFeatured = variant === "bento" && feature.featured;
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxs("div", { className: "group flex flex-col gap-3 border-l-4 border-l-brand py-1 pl-5", children: [
+      feature.icon && /* @__PURE__ */ jsx("div", { className: "text-2xl", children: feature.icon }),
+      feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label text-brand", children: feature.stat }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: feature.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: feature.description })
+    ] });
+  }
   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 }),
@@ -3165,6 +3173,52 @@ function FeatureCard({
     }
   );
 }
+function BrutalFeatureShowcase({
+  badge,
+  headline,
+  description,
+  visual,
+  features,
+  reversed = false,
+  color = "white",
+  pattern,
+  className
+}) {
+  return /* @__PURE__ */ jsx(BrutalSection, { color, pattern, className, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid items-center gap-12 lg:grid-cols-2 lg:gap-20",
+        reversed && "lg:[&>*:first-child]:order-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+          badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "w-fit font-mono text-xs uppercase tracking-widest", children: badge }),
+          /* @__PURE__ */ jsx("h2", { className: "brutal-h2", children: headline }),
+          /* @__PURE__ */ jsx("p", { className: "brutal-body text-muted-foreground", children: description }),
+          features && features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3 pt-2", children: features.map((f, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+            f.icon ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-6 shrink-0 items-center justify-center border-brutal border-foreground bg-brand-muted text-sm", children: f.icon }) : /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-6 shrink-0 items-center justify-center border-brutal border-foreground bg-brand text-sm text-brand-foreground font-bold", children: "\u2713" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: f.text })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative",
+              reversed ? "-rotate-1" : "rotate-1",
+              "transform transition-transform duration-300 hover:rotate-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 translate-x-3 translate-y-3 border-brutal border-foreground bg-brand opacity-20" }),
+              /* @__PURE__ */ jsx("div", { className: "relative border-brutal border-foreground bg-background shadow-brutal-lg", children: visual })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
 function StarRating({ rating }) {
   return /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(
     "span",
@@ -3335,12 +3389,13 @@ function CTAButtons({
   secondaryText,
   secondaryHref
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-4", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         variant: ctaVariant,
         size: "xl",
+        className: "w-full sm:w-auto",
         render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
         children: ctaText
       }
@@ -3349,7 +3404,8 @@ function CTAButtons({
       Button,
       {
         variant: "outline",
-        size: "lg",
+        size: "xl",
+        className: "w-full sm:w-auto",
         render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
         children: secondaryText
       }
@@ -3379,12 +3435,13 @@ function SplitCTA(props) {
       /* @__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-wrap gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:gap-4", 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
           }
@@ -3393,7 +3450,8 @@ function SplitCTA(props) {
           Button,
           {
             variant: "outline",
-            size: "lg",
+            size: "xl",
+            className: "w-full sm:w-auto",
             render: /* @__PURE__ */ jsx("a", { href: props.secondaryHref || "#" }),
             children: props.secondaryText
           }
@@ -3456,6 +3514,54 @@ function BrutalCTA({
     variant === "with-visual" && /* @__PURE__ */ jsx(WithVisualCTA, { ...props, variant, color })
   ] });
 }
+function CellValue({ value }) {
+  if (typeof value === "boolean") {
+    return value ? /* @__PURE__ */ jsx("span", { className: "inline-flex size-7 items-center justify-center border-brutal border-foreground bg-brand font-bold text-brand-foreground text-sm", children: "\u2713" }) : /* @__PURE__ */ jsx("span", { className: "inline-flex size-7 items-center justify-center border-brutal border-foreground/20 text-sm text-muted-foreground", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: value });
+}
+function BrutalComparisonTable({
+  badge,
+  headline,
+  description,
+  usName,
+  themName,
+  features,
+  color = "white",
+  pattern,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, pattern, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", children: [
+      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: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: "border-b-brutal border-foreground px-4 py-3 text-left text-sm font-medium text-muted-foreground", children: "Feature" }),
+        /* @__PURE__ */ jsx("th", { className: "border-b-brutal border-foreground bg-brand-muted px-4 py-3 text-center", children: /* @__PURE__ */ jsx("span", { className: "brutal-label text-brand", children: usName }) }),
+        /* @__PURE__ */ jsx("th", { className: "border-b-brutal border-foreground px-4 py-3 text-center", children: /* @__PURE__ */ jsx("span", { className: "brutal-label text-muted-foreground", children: themName }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: features.map((f, i) => /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          className: cn(
+            "transition-colors",
+            f.highlight && "bg-brand-muted/50",
+            i % 2 === 0 && !f.highlight && "bg-muted/30"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("td", { className: "border-b border-foreground/10 px-4 py-3 text-sm font-medium", children: f.name }),
+            /* @__PURE__ */ jsx("td", { className: "border-b border-foreground/10 bg-brand-muted/30 px-4 py-3 text-center", children: /* @__PURE__ */ jsx(CellValue, { value: f.us }) }),
+            /* @__PURE__ */ jsx("td", { className: "border-b border-foreground/10 px-4 py-3 text-center", children: /* @__PURE__ */ jsx(CellValue, { value: f.them }) })
+          ]
+        },
+        i
+      )) })
+    ] }) })
+  ] });
+}
 function BrutalNav({
   logo,
   links,
@@ -3927,6 +4033,126 @@ function Newsletter({
     )
   ] }) });
 }
+function MockupWindow({
+  children,
+  title = "app.example.com",
+  variant = "browser",
+  className
+}) {
+  if (variant === "phone") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mx-auto w-[280px] overflow-hidden rounded-[2rem] border-brutal border-foreground bg-background shadow-brutal-lg",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center bg-foreground py-2", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-28 rounded-full bg-background/20" }) }),
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center bg-foreground py-3", children: /* @__PURE__ */ jsx("div", { className: "h-1 w-24 rounded-full bg-background/30" }) })
+        ]
+      }
+    );
+  }
+  if (variant === "terminal") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden rounded-lg border-brutal border-foreground shadow-brutal-lg",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b-brutal border-foreground bg-foreground px-4 py-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+              /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+              /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2 font-mono text-xs text-background/60", children: title })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "bg-foreground text-background", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-lg border-brutal border-foreground shadow-brutal-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b-brutal border-foreground bg-muted px-4 py-2.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full border border-foreground/20 bg-red-400" }),
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full border border-foreground/20 bg-yellow-400" }),
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full border border-foreground/20 bg-green-400" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-sm rounded-md border border-foreground/10 bg-background px-3 py-1 text-center font-mono text-xs text-muted-foreground", children: title }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-[54px]" }),
+          " "
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bg-background", children })
+      ]
+    }
+  );
+}
+var speedMap = {
+  slow: "60s",
+  normal: "30s",
+  fast: "15s"
+};
+function Marquee({
+  children,
+  speed = "normal",
+  direction = "left",
+  pauseOnHover = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group flex overflow-hidden border-y-brutal border-foreground bg-foreground py-3",
+        className
+      ),
+      children: [0, 1].map((copy) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "aria-hidden": copy === 1,
+          className: cn(
+            "flex shrink-0 items-center gap-8",
+            pauseOnHover && "group-hover:[animation-play-state:paused]"
+          ),
+          style: {
+            animation: `marquee ${speedMap[speed]} linear infinite`,
+            animationDirection: direction === "right" ? "reverse" : "normal"
+          },
+          children: [
+            children,
+            /* @__PURE__ */ jsx("span", { className: "mx-4 text-background/30 select-none", children: "\u2022" })
+          ]
+        },
+        copy
+      ))
+    }
+  );
+}
+function MarqueeItem({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center gap-2 whitespace-nowrap font-bold text-background",
+        className
+      ),
+      children
+    }
+  );
+}
 var AppShellContext = createContext({
   collapsed: false,
   setCollapsed: () => {
@@ -4923,6 +5149,6 @@ function DashboardTemplate({
   );
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, AlertDescription, AlertTitle, AppShell, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrutalCTA, BrutalFeatureGrid, BrutalFooter, BrutalHero, BrutalIntegrationGrid, BrutalNav, BrutalSection, BrutalTestimonials, Button, CalendarView, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DashboardTemplate, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FAQ, FileUpload, GridView, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, KanbanBoard, Label, ListView, LogoCloud, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Newsletter, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PricingTable, Progress, RadioGroup, RadioGroupItem, SaaSLaunchTemplate, ScrollArea, ScrollBar, SearchBar, SectionDivider, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, Skeleton, Slider, StatCard, StatsBar, StudioTemplate, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserMenu, ViewSwitcher, SectionDivider as WaveDivider, badgeVariants, buttonVariants, cn, defaultTransition, fadeIn, fadeInUp, navigationMenuTriggerStyle, scaleIn, slideInLeft, slideInRight, springTransition, staggerContainer, tabsListVariants, toggleVariants, useAppShell };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, AlertDescription, AlertTitle, AppShell, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrutalCTA, BrutalComparisonTable, BrutalFeatureGrid, BrutalFeatureShowcase, BrutalFooter, BrutalHero, BrutalIntegrationGrid, BrutalNav, BrutalSection, BrutalTestimonials, Button, CalendarView, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DashboardTemplate, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FAQ, FileUpload, GridView, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, KanbanBoard, Label, ListView, LogoCloud, Marquee, MarqueeItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MockupWindow, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, Newsletter, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PricingTable, Progress, RadioGroup, RadioGroupItem, SaaSLaunchTemplate, ScrollArea, ScrollBar, SearchBar, SectionDivider, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, Skeleton, Slider, StatCard, StatsBar, StudioTemplate, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserMenu, ViewSwitcher, SectionDivider as WaveDivider, badgeVariants, buttonVariants, cn, defaultTransition, fadeIn, fadeInUp, navigationMenuTriggerStyle, scaleIn, slideInLeft, slideInRight, springTransition, staggerContainer, tabsListVariants, toggleVariants, useAppShell };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map