@snow-labs/brutal-ui 0.3.1 → 0.4.0

package/dist/components/brutal/feature-showcase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/badge.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/feature-showcase.tsx"],"names":["jsx"],"mappings":"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","file":"feature-showcase.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 { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst badgeVariants = cva(\n  \"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!\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-brutal border-foreground bg-primary px-3 py-1 text-xs text-primary-foreground shadow-brutal-sm\",\n        secondary:\n          \"border-brutal border-foreground bg-secondary px-3 py-1 text-xs text-secondary-foreground shadow-brutal-sm\",\n        brand:\n          \"border-brutal border-foreground bg-brand px-3 py-1 text-xs text-brand-foreground shadow-brutal-sm\",\n        cta: \"border-brutal border-foreground bg-cta px-3 py-1 text-xs text-cta-foreground shadow-brutal-sm\",\n        outline:\n          \"border-brutal border-foreground bg-background px-3 py-1 text-xs text-foreground\",\n        destructive:\n          \"border-brutal border-destructive bg-destructive/10 px-3 py-1 text-xs text-destructive\",\n        ghost: \"px-2 py-0.5 text-xs text-muted-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  });\n}\n\nexport { Badge, badgeVariants };\n","import { cn } from \"../../lib/utils\";\n\nexport type SectionColor =\n  | \"white\"\n  | \"brand\"\n  | \"brand-muted\"\n  | \"blue\"\n  | \"gray\"\n  | \"cream\"\n  | \"black\"\n  | \"cta\";\n\nexport type SectionPattern =\n  | \"dots\"\n  | \"stripes\"\n  | \"noise\"\n  | \"grain\"\n  | \"crosshatch\"\n  | \"grid-dots\"\n  | \"gradient-mesh\"\n  | \"none\";\n\ninterface BrutalSectionProps {\n  children: React.ReactNode;\n  color?: SectionColor;\n  className?: string;\n  containerSize?: \"sm\" | \"default\" | \"lg\";\n  padding?: \"sm\" | \"default\" | \"lg\";\n  pattern?: SectionPattern;\n  /** @deprecated Use pattern=\"dots\" instead */\n  dots?: boolean;\n  /** @deprecated Use pattern=\"stripes\" instead */\n  stripes?: boolean;\n  id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n  white: \"bg-background text-foreground\",\n  brand: \"bg-brand\",\n  \"brand-muted\": \"bg-brand-muted text-foreground\",\n  blue: \"bg-section-blue\",\n  gray: \"bg-section-gray text-foreground\",\n  cream: \"bg-section-cream text-foreground\",\n  black: \"bg-foreground text-background\",\n  cta: \"bg-cta\",\n};\n\nconst containerMap = {\n  sm: \"brutal-container-sm\",\n  default: \"brutal-container\",\n  lg: \"brutal-container-lg\",\n};\n\nconst paddingMap = {\n  sm: \"brutal-section-sm\",\n  default: \"brutal-section\",\n  lg: \"brutal-section py-28 sm:py-36 md:py-44\",\n};\n\nconst patternMap: Record<SectionPattern, string> = {\n  dots: \"brutal-dots\",\n  stripes: \"brutal-stripes\",\n  noise: \"brutal-noise\",\n  grain: \"brutal-grain\",\n  crosshatch: \"brutal-crosshatch\",\n  \"grid-dots\": \"brutal-grid-dots\",\n  \"gradient-mesh\": \"brutal-gradient-mesh\",\n  none: \"\",\n};\n\nexport function BrutalSection({\n  children,\n  color = \"white\",\n  className,\n  containerSize = \"default\",\n  padding = \"default\",\n  pattern,\n  dots = false,\n  stripes = false,\n  id,\n}: BrutalSectionProps) {\n  const resolvedPattern = pattern\n    ?? (dots ? \"dots\" : undefined)\n    ?? (stripes ? \"stripes\" : undefined)\n    ?? \"none\";\n\n  return (\n    <section\n      id={id}\n      className={cn(\n        paddingMap[padding],\n        colorMap[color],\n        patternMap[resolvedPattern],\n        className\n      )}\n    >\n      <div className={containerMap[containerSize]}>{children}</div>\n    </section>\n  );\n}\n","import { cn } from \"../../lib/utils\";\nimport { Badge } from \"../ui/badge\";\nimport { BrutalSection } from \"./section\";\nimport type { SectionColor, SectionPattern } from \"./section\";\n\ninterface BrutalFeatureShowcaseProps {\n  badge?: string;\n  headline: string;\n  description: string;\n  visual: React.ReactNode;\n  features?: { icon?: React.ReactNode; text: string }[];\n  reversed?: boolean;\n  color?: SectionColor;\n  pattern?: SectionPattern;\n  className?: string;\n}\n\nexport function BrutalFeatureShowcase({\n  badge,\n  headline,\n  description,\n  visual,\n  features,\n  reversed = false,\n  color = \"white\",\n  pattern,\n  className,\n}: BrutalFeatureShowcaseProps) {\n  return (\n    <BrutalSection color={color} pattern={pattern} className={className}>\n      <div\n        className={cn(\n          \"grid items-center gap-12 lg:grid-cols-2 lg:gap-20\",\n          reversed && \"lg:[&>*:first-child]:order-2\"\n        )}\n      >\n        {/* Text side */}\n        <div className=\"flex flex-col gap-6\">\n          {badge && (\n            <Badge variant=\"outline\" className=\"w-fit font-mono text-xs uppercase tracking-widest\">\n              {badge}\n            </Badge>\n          )}\n\n          <h2 className=\"brutal-h2\">{headline}</h2>\n\n          <p className=\"brutal-body text-muted-foreground\">{description}</p>\n\n          {features && features.length > 0 && (\n            <ul className=\"flex flex-col gap-3 pt-2\">\n              {features.map((f, i) => (\n                <li key={i} className=\"flex items-start gap-3\">\n                  {f.icon ? (\n                    <span className=\"mt-0.5 flex size-6 shrink-0 items-center justify-center border-brutal border-foreground bg-brand-muted text-sm\">\n                      {f.icon}\n                    </span>\n                  ) : (\n                    <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\">\n                      ✓\n                    </span>\n                  )}\n                  <span className=\"text-sm font-medium\">{f.text}</span>\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n\n        {/* Visual side */}\n        <div\n          className={cn(\n            \"relative\",\n            reversed ? \"-rotate-1\" : \"rotate-1\",\n            \"transform transition-transform duration-300 hover:rotate-0\"\n          )}\n        >\n          {/* Decorative background card */}\n          <div className=\"absolute inset-0 translate-x-3 translate-y-3 border-brutal border-foreground bg-brand opacity-20\" />\n          {/* Main visual */}\n          <div className=\"relative border-brutal border-foreground bg-background shadow-brutal-lg\">\n            {visual}\n          </div>\n        </div>\n      </div>\n    </BrutalSection>\n  );\n}\n"]}

package/dist/components/brutal/hero.js

@@ -165,11 +165,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" }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/hero.tsx"],"names":["ButtonPrimitive","jsx"],"mappings":"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","file":"hero.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","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        // Primary: Black bg, white text, offset shadow\n        default:\n          \"border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // CTA: Mint green bg — the Bannerbear signature\n        cta: \"border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Brand: Dynamic brand color bg\n        brand:\n          \"border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Outline: White bg, black border, offset shadow\n        outline:\n          \"border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Secondary: Light bg, border, smaller shadow\n        secondary:\n          \"border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none\",\n        // Ghost: No border/shadow, subtle hover\n        ghost: \"hover:bg-secondary hover:text-foreground\",\n        // Link: Text only\n        link: \"text-foreground underline-offset-4 hover:underline\",\n        // Destructive\n        destructive:\n          \"border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Nav: Thin border, no shadow (for nav Sign In buttons)\n        nav: \"border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background\",\n      },\n      size: {\n        xs: \"h-7 gap-1 px-2.5 text-xs\",\n        sm: \"h-8 gap-1.5 px-3 text-sm\",\n        default: \"h-10 gap-2 px-5 text-sm\",\n        lg: \"h-12 gap-2 px-7 text-base\",\n        xl: \"h-14 gap-2.5 px-9 text-lg\",\n        icon: \"size-10\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-12\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","import { cn } from \"../../lib/utils\";\n\nexport type SectionColor =\n  | \"white\"\n  | \"brand\"\n  | \"brand-muted\"\n  | \"blue\"\n  | \"gray\"\n  | \"cream\"\n  | \"black\"\n  | \"cta\";\n\nexport type SectionPattern =\n  | \"dots\"\n  | \"stripes\"\n  | \"noise\"\n  | \"grain\"\n  | \"crosshatch\"\n  | \"grid-dots\"\n  | \"gradient-mesh\"\n  | \"none\";\n\ninterface BrutalSectionProps {\n  children: React.ReactNode;\n  color?: SectionColor;\n  className?: string;\n  containerSize?: \"sm\" | \"default\" | \"lg\";\n  padding?: \"sm\" | \"default\" | \"lg\";\n  pattern?: SectionPattern;\n  /** @deprecated Use pattern=\"dots\" instead */\n  dots?: boolean;\n  /** @deprecated Use pattern=\"stripes\" instead */\n  stripes?: boolean;\n  id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n  white: \"bg-background text-foreground\",\n  brand: \"bg-brand\",\n  \"brand-muted\": \"bg-brand-muted text-foreground\",\n  blue: \"bg-section-blue\",\n  gray: \"bg-section-gray text-foreground\",\n  cream: \"bg-section-cream text-foreground\",\n  black: \"bg-foreground text-background\",\n  cta: \"bg-cta\",\n};\n\nconst containerMap = {\n  sm: \"brutal-container-sm\",\n  default: \"brutal-container\",\n  lg: \"brutal-container-lg\",\n};\n\nconst paddingMap = {\n  sm: \"brutal-section-sm\",\n  default: \"brutal-section\",\n  lg: \"brutal-section py-28 sm:py-36 md:py-44\",\n};\n\nconst patternMap: Record<SectionPattern, string> = {\n  dots: \"brutal-dots\",\n  stripes: \"brutal-stripes\",\n  noise: \"brutal-noise\",\n  grain: \"brutal-grain\",\n  crosshatch: \"brutal-crosshatch\",\n  \"grid-dots\": \"brutal-grid-dots\",\n  \"gradient-mesh\": \"brutal-gradient-mesh\",\n  none: \"\",\n};\n\nexport function BrutalSection({\n  children,\n  color = \"white\",\n  className,\n  containerSize = \"default\",\n  padding = \"default\",\n  pattern,\n  dots = false,\n  stripes = false,\n  id,\n}: BrutalSectionProps) {\n  const resolvedPattern = pattern\n    ?? (dots ? \"dots\" : undefined)\n    ?? (stripes ? \"stripes\" : undefined)\n    ?? \"none\";\n\n  return (\n    <section\n      id={id}\n      className={cn(\n        paddingMap[padding],\n        colorMap[color],\n        patternMap[resolvedPattern],\n        className\n      )}\n    >\n      <div className={containerMap[containerSize]}>{children}</div>\n    </section>\n  );\n}\n","import { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport { BrutalSection } from \"./section\";\nimport type { SectionPattern } from \"./section\";\n\ntype HeroVariant = \"split\" | \"centered\" | \"overlap\" | \"asymmetric\";\n\ninterface BrutalHeroProps {\n  variant?: HeroVariant;\n  badge?: string;\n  badgePosition?: \"above\" | \"inline\" | \"floating\";\n  headline: string;\n  description: string;\n  ctaText: string;\n  ctaHref?: string;\n  ctaVariant?: \"cta\" | \"brand\" | \"default\";\n  secondaryText?: string;\n  secondaryHref?: string;\n  visual?: React.ReactNode;\n  color?: \"white\" | \"brand\" | \"brand-muted\" | \"gray\";\n  pattern?: SectionPattern;\n  proof?: string;\n  className?: string;\n}\n\nexport function BrutalHero({\n  variant = \"split\",\n  badge,\n  badgePosition = \"above\",\n  headline,\n  description,\n  ctaText,\n  ctaHref = \"#\",\n  ctaVariant = \"cta\",\n  secondaryText,\n  secondaryHref,\n  visual,\n  color = \"brand\",\n  pattern,\n  proof,\n  className,\n}: BrutalHeroProps) {\n  const badgeElement = badge && (\n    <div\n      className={cn(\n        \"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\",\n        badgePosition === \"floating\" && \"absolute -top-3 left-6 z-10\",\n      )}\n    >\n      {badge}\n    </div>\n  );\n\n  const textContent = (\n    <div className={cn(\n      \"flex flex-col gap-6\",\n      variant === \"centered\" && \"items-center text-center\",\n    )}>\n      {badgePosition === \"above\" && badgeElement}\n\n      <h1 className={cn(\n        \"brutal-display text-balance\",\n        variant === \"centered\" && \"mx-auto max-w-4xl\",\n      )}>\n        {badgePosition === \"inline\" && badgeElement}\n        {headline}\n      </h1>\n\n      <p className={cn(\n        \"brutal-body-lg max-w-lg opacity-80\",\n        variant === \"centered\" && \"mx-auto\",\n      )}>\n        {description}\n      </p>\n\n      <div className={cn(\n        \"flex flex-wrap gap-4\",\n        variant === \"centered\" && \"justify-center\",\n      )}>\n        <Button variant={ctaVariant} size=\"xl\" render={<a href={ctaHref} />}>\n          {ctaText}\n        </Button>\n        {secondaryText && (\n          <Button variant=\"outline\" size=\"xl\" render={<a href={secondaryHref || \"#\"} />}>\n            {secondaryText}\n          </Button>\n        )}\n      </div>\n\n      {proof && (\n        <p className=\"flex items-center gap-2 text-sm font-medium opacity-70\">\n          <span className=\"inline-flex size-5 items-center justify-center border border-current text-xs\">\n            ✓\n          </span>\n          {proof}\n        </p>\n      )}\n    </div>\n  );\n\n  const layoutClass = {\n    split: \"grid items-center gap-12 lg:grid-cols-2 lg:gap-16\",\n    centered: \"flex flex-col items-center gap-12\",\n    overlap: \"relative\",\n    asymmetric: \"grid items-center gap-12 lg:grid-cols-[3fr_2fr] lg:gap-16\",\n  }[variant];\n\n  return (\n    <BrutalSection color={color} padding=\"lg\" pattern={pattern} className={cn(\"relative\", className)}>\n      {badgePosition === \"floating\" && badgeElement}\n\n      <div className={layoutClass}>\n        {textContent}\n\n        {visual && variant === \"overlap\" ? (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center opacity-20\">\n            {visual}\n          </div>\n        ) : visual ? (\n          <div className={cn(\n            \"flex items-center justify-center\",\n            variant === \"asymmetric\" && \"-rotate-2 transform\",\n          )}>\n            {visual}\n          </div>\n        ) : null}\n      </div>\n    </BrutalSection>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/hero.tsx"],"names":["ButtonPrimitive","jsx"],"mappings":"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","file":"hero.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","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        // Primary: Black bg, white text, offset shadow\n        default:\n          \"border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // CTA: Mint green bg — the Bannerbear signature\n        cta: \"border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Brand: Dynamic brand color bg\n        brand:\n          \"border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Outline: White bg, black border, offset shadow\n        outline:\n          \"border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Secondary: Light bg, border, smaller shadow\n        secondary:\n          \"border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none\",\n        // Ghost: No border/shadow, subtle hover\n        ghost: \"hover:bg-secondary hover:text-foreground\",\n        // Link: Text only\n        link: \"text-foreground underline-offset-4 hover:underline\",\n        // Destructive\n        destructive:\n          \"border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Nav: Thin border, no shadow (for nav Sign In buttons)\n        nav: \"border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background\",\n      },\n      size: {\n        xs: \"h-7 gap-1 px-2.5 text-xs\",\n        sm: \"h-8 gap-1.5 px-3 text-sm\",\n        default: \"h-10 gap-2 px-5 text-sm\",\n        lg: \"h-12 gap-2 px-7 text-base\",\n        xl: \"h-14 gap-2.5 px-9 text-lg\",\n        icon: \"size-10\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-12\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","import { cn } from \"../../lib/utils\";\n\nexport type SectionColor =\n  | \"white\"\n  | \"brand\"\n  | \"brand-muted\"\n  | \"blue\"\n  | \"gray\"\n  | \"cream\"\n  | \"black\"\n  | \"cta\";\n\nexport type SectionPattern =\n  | \"dots\"\n  | \"stripes\"\n  | \"noise\"\n  | \"grain\"\n  | \"crosshatch\"\n  | \"grid-dots\"\n  | \"gradient-mesh\"\n  | \"none\";\n\ninterface BrutalSectionProps {\n  children: React.ReactNode;\n  color?: SectionColor;\n  className?: string;\n  containerSize?: \"sm\" | \"default\" | \"lg\";\n  padding?: \"sm\" | \"default\" | \"lg\";\n  pattern?: SectionPattern;\n  /** @deprecated Use pattern=\"dots\" instead */\n  dots?: boolean;\n  /** @deprecated Use pattern=\"stripes\" instead */\n  stripes?: boolean;\n  id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n  white: \"bg-background text-foreground\",\n  brand: \"bg-brand\",\n  \"brand-muted\": \"bg-brand-muted text-foreground\",\n  blue: \"bg-section-blue\",\n  gray: \"bg-section-gray text-foreground\",\n  cream: \"bg-section-cream text-foreground\",\n  black: \"bg-foreground text-background\",\n  cta: \"bg-cta\",\n};\n\nconst containerMap = {\n  sm: \"brutal-container-sm\",\n  default: \"brutal-container\",\n  lg: \"brutal-container-lg\",\n};\n\nconst paddingMap = {\n  sm: \"brutal-section-sm\",\n  default: \"brutal-section\",\n  lg: \"brutal-section py-28 sm:py-36 md:py-44\",\n};\n\nconst patternMap: Record<SectionPattern, string> = {\n  dots: \"brutal-dots\",\n  stripes: \"brutal-stripes\",\n  noise: \"brutal-noise\",\n  grain: \"brutal-grain\",\n  crosshatch: \"brutal-crosshatch\",\n  \"grid-dots\": \"brutal-grid-dots\",\n  \"gradient-mesh\": \"brutal-gradient-mesh\",\n  none: \"\",\n};\n\nexport function BrutalSection({\n  children,\n  color = \"white\",\n  className,\n  containerSize = \"default\",\n  padding = \"default\",\n  pattern,\n  dots = false,\n  stripes = false,\n  id,\n}: BrutalSectionProps) {\n  const resolvedPattern = pattern\n    ?? (dots ? \"dots\" : undefined)\n    ?? (stripes ? \"stripes\" : undefined)\n    ?? \"none\";\n\n  return (\n    <section\n      id={id}\n      className={cn(\n        paddingMap[padding],\n        colorMap[color],\n        patternMap[resolvedPattern],\n        className\n      )}\n    >\n      <div className={containerMap[containerSize]}>{children}</div>\n    </section>\n  );\n}\n","import { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport { BrutalSection } from \"./section\";\nimport type { SectionPattern } from \"./section\";\n\ntype HeroVariant = \"split\" | \"centered\" | \"overlap\" | \"asymmetric\";\n\ninterface BrutalHeroProps {\n  variant?: HeroVariant;\n  badge?: string;\n  badgePosition?: \"above\" | \"inline\" | \"floating\";\n  headline: string;\n  description: string;\n  ctaText: string;\n  ctaHref?: string;\n  ctaVariant?: \"cta\" | \"brand\" | \"default\";\n  secondaryText?: string;\n  secondaryHref?: string;\n  visual?: React.ReactNode;\n  color?: \"white\" | \"brand\" | \"brand-muted\" | \"gray\";\n  pattern?: SectionPattern;\n  proof?: string;\n  className?: string;\n}\n\nexport function BrutalHero({\n  variant = \"split\",\n  badge,\n  badgePosition = \"above\",\n  headline,\n  description,\n  ctaText,\n  ctaHref = \"#\",\n  ctaVariant = \"cta\",\n  secondaryText,\n  secondaryHref,\n  visual,\n  color = \"brand\",\n  pattern,\n  proof,\n  className,\n}: BrutalHeroProps) {\n  const badgeElement = badge && (\n    <div\n      className={cn(\n        \"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\",\n        badgePosition === \"floating\" && \"absolute -top-3 left-6 z-10\",\n      )}\n    >\n      {badge}\n    </div>\n  );\n\n  const textContent = (\n    <div className={cn(\n      \"flex flex-col gap-6\",\n      variant === \"centered\" && \"items-center text-center\",\n    )}>\n      {badgePosition === \"above\" && badgeElement}\n\n      <h1 className={cn(\n        \"brutal-display text-balance\",\n        variant === \"centered\" && \"mx-auto max-w-4xl\",\n      )}>\n        {badgePosition === \"inline\" && badgeElement}\n        {headline}\n      </h1>\n\n      <p className={cn(\n        \"brutal-body-lg max-w-lg opacity-80\",\n        variant === \"centered\" && \"mx-auto\",\n      )}>\n        {description}\n      </p>\n\n      <div className={cn(\n        \"flex flex-col gap-3 sm:flex-row sm:gap-4\",\n        variant === \"centered\" && \"sm:justify-center\",\n      )}>\n        <Button variant={ctaVariant} size=\"xl\" className=\"w-full sm:w-auto\" render={<a href={ctaHref} />}>\n          {ctaText}\n        </Button>\n        {secondaryText && (\n          <Button variant=\"outline\" size=\"xl\" className=\"w-full sm:w-auto\" render={<a href={secondaryHref || \"#\"} />}>\n            {secondaryText}\n          </Button>\n        )}\n      </div>\n\n      {proof && (\n        <p className=\"flex items-center gap-2 text-sm font-medium opacity-70\">\n          <span className=\"inline-flex size-5 items-center justify-center border border-current text-xs\">\n            ✓\n          </span>\n          {proof}\n        </p>\n      )}\n    </div>\n  );\n\n  const layoutClass = {\n    split: \"grid items-center gap-12 lg:grid-cols-2 lg:gap-16\",\n    centered: \"flex flex-col items-center gap-12\",\n    overlap: \"relative\",\n    asymmetric: \"grid items-center gap-12 lg:grid-cols-[3fr_2fr] lg:gap-16\",\n  }[variant];\n\n  return (\n    <BrutalSection color={color} padding=\"lg\" pattern={pattern} className={cn(\"relative\", className)}>\n      {badgePosition === \"floating\" && badgeElement}\n\n      <div className={layoutClass}>\n        {textContent}\n\n        {visual && variant === \"overlap\" ? (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center opacity-20\">\n            {visual}\n          </div>\n        ) : visual ? (\n          <div className={cn(\n            \"flex items-center justify-center\",\n            variant === \"asymmetric\" && \"-rotate-2 transform\",\n          )}>\n            {visual}\n          </div>\n        ) : null}\n      </div>\n    </BrutalSection>\n  );\n}\n"]}

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

@@ -2,9 +2,11 @@ export { BrutalSection, SectionColor, SectionPattern } from './section.js';
 export { SectionDivider, SectionDivider as WaveDivider } from './section-divider.js';
 export { BrutalHero } from './hero.js';
 export { BrutalFeatureGrid } from './feature-grid.js';
+export { BrutalFeatureShowcase } from './feature-showcase.js';
 export { BrutalTestimonials } from './testimonials.js';
 export { BrutalIntegrationGrid } from './integration-grid.js';
 export { BrutalCTA } from './cta-section.js';
+export { BrutalComparisonTable } from './comparison-table.js';
 export { BrutalNav } from './nav.js';
 export { BrutalFooter } from './footer.js';
 export { PricingTable } from './pricing-table.js';
@@ -12,4 +14,6 @@ export { LogoCloud } from './logo-cloud.js';
 export { StatsBar } from './stats-bar.js';
 export { FAQ } from './faq.js';
 export { Newsletter } from './newsletter.js';
+export { MockupWindow } from './mockup-window.js';
+export { Marquee, MarqueeItem } from './marquee.js';
 import 'react/jsx-runtime';

package/dist/components/brutal/index.js

@@ -4,12 +4,12 @@ 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 { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 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
@@ -229,11 +229,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" }),
@@ -360,6 +360,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 }),
@@ -397,6 +405,92 @@ function FeatureCard({
     }
   );
 }
+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 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",
@@ -567,12 +661,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
       }
@@ -581,7 +676,8 @@ function CTAButtons({
       Button,
       {
         variant: "outline",
-        size: "lg",
+        size: "xl",
+        className: "w-full sm:w-auto",
         render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
         children: secondaryText
       }
@@ -611,12 +707,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
           }
@@ -625,7 +722,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
           }
@@ -688,6 +786,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 Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(Dialog.Root, { "data-slot": "sheet", ...props });
 }
@@ -1020,46 +1166,6 @@ 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,
@@ -1358,7 +1464,127 @@ 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
+    }
+  );
+}
 
-export { BrutalCTA, BrutalFeatureGrid, BrutalFooter, BrutalHero, BrutalIntegrationGrid, BrutalNav, BrutalSection, BrutalTestimonials, FAQ, LogoCloud, Newsletter, PricingTable, SectionDivider, StatsBar, SectionDivider as WaveDivider };
+export { BrutalCTA, BrutalComparisonTable, BrutalFeatureGrid, BrutalFeatureShowcase, BrutalFooter, BrutalHero, BrutalIntegrationGrid, BrutalNav, BrutalSection, BrutalTestimonials, FAQ, LogoCloud, Marquee, MarqueeItem, MockupWindow, Newsletter, PricingTable, SectionDivider, StatsBar, SectionDivider as WaveDivider };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map