@snow-labs/brutal-ui 0.2.0 → 0.3.0

package/dist/templates/index.js

@@ -268,9 +268,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"
 };
@@ -364,11 +361,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-4 sm:flex-row sm:flex-wrap",
+      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" }),
@@ -532,14 +529,6 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-var accentColors = [
-  "hsl(var(--brand))",
-  "hsl(var(--cta))",
-  "hsl(var(--section-blue))",
-  "hsl(12 85% 62%)",
-  "hsl(260 55% 68%)",
-  "hsl(25 75% 48%)"
-];
 var colMap = {
   2: "sm:grid-cols-2",
   3: "sm:grid-cols-2 lg:grid-cols-3",
@@ -557,7 +546,7 @@ 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 })
     ] }),
@@ -573,8 +562,7 @@ function BrutalFeatureGrid({
           {
             feature,
             variant,
-            index: i,
-            accentColor: accentColors[i % accentColors.length]
+            index: i
           },
           feature.title
         ))
@@ -585,38 +573,23 @@ function BrutalFeatureGrid({
 function FeatureCard({
   feature,
   variant,
-  index,
-  accentColor
+  index
 }) {
   const isBentoFeatured = variant === "bento" && feature.featured;
   if (variant === "icon-left") {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex gap-4 border-brutal border-foreground bg-background p-5 shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg",
-        style: { borderLeftColor: accentColor, borderLeftWidth: "4px" },
-        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 })
-          ] })
-        ]
-      }
-    );
+    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: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "brutal-display mb-2 block opacity-15",
-            style: { color: accentColor },
-            children: String(index + 1).padStart(2, "0")
-          }
-        ),
+        /* @__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 })
       ] }),
@@ -631,14 +604,7 @@ function FeatureCard({
       ),
       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",
-              style: { borderBottomColor: accentColor },
-              children: feature.icon
-            }
-          ),
+          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 })
         ] }),
@@ -818,7 +784,7 @@ function BrutalTestimonials({
   headline,
   testimonials,
   variant = "masonry",
-  color = "blue",
+  color = "brand-muted",
   pattern,
   className
 }) {
@@ -1032,8 +998,8 @@ function FAQ({
   className
 }) {
   return /* @__PURE__ */ jsxs(BrutalSection, { color, className, children: [
-    (headline || badge) && /* @__PURE__ */ jsxs("div", { className: "mb-10 max-w-2xl", children: [
-      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-muted-foreground", children: badge }),
+    (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(
@@ -1060,12 +1026,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-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
       }
@@ -1074,7 +1041,8 @@ function CTAButtons({
       Button,
       {
         variant: "outline",
-        size: "lg",
+        size: "xl",
+        className: "w-full sm:w-auto",
         render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
         children: secondaryText
       }
@@ -1104,12 +1072,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-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
           }
@@ -1118,7 +1087,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
           }
@@ -1373,7 +1343,7 @@ function SaaSLaunchTemplate({
       }
     ),
     stats && stats.length > 0 && /* @__PURE__ */ jsx(StatsBar, { stats, color: "brand" }),
-    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand))", to: "hsl(var(--section-blue))", variant: "torn-paper" }),
+    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand))", to: "hsl(var(--brand-muted))", variant: "torn-paper" }),
     /* @__PURE__ */ jsx(
       BrutalTestimonials,
       {
@@ -1381,10 +1351,10 @@ function SaaSLaunchTemplate({
         badge: testimonials.badge,
         headline: testimonials.headline,
         testimonials: testimonials.items,
-        color: "blue"
+        color: "brand-muted"
       }
     ),
-    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--section-blue))", to: "hsl(var(--background))", variant: "wave" }),
+    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand-muted))", to: "hsl(var(--background))", variant: "wave" }),
     pricing && /* @__PURE__ */ jsx(
       PricingTable,
       {
@@ -1396,7 +1366,7 @@ function SaaSLaunchTemplate({
         color: "white"
       }
     ),
-    faq && faq.length > 0 && /* @__PURE__ */ jsx(FAQ, { badge: "FAQ", headline: "Common Questions", items: faq, color: "gray" }),
+    faq && faq.length > 0 && /* @__PURE__ */ jsx(FAQ, { badge: "FAQ", headline: "Common Questions", items: faq, color: "white" }),
     /* @__PURE__ */ jsx(
       BrutalCTA,
       {
@@ -1493,7 +1463,7 @@ function StudioTemplate({
       }
     ),
     testimonials && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--background))", to: "hsl(var(--section-gray))", variant: "diagonal" }),
+      /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--background))", to: "hsl(var(--brand-muted))", variant: "diagonal" }),
       /* @__PURE__ */ jsx(
         BrutalTestimonials,
         {
@@ -1501,10 +1471,10 @@ function StudioTemplate({
           badge: testimonials.badge,
           headline: testimonials.headline,
           testimonials: testimonials.items,
-          color: "gray"
+          color: "brand-muted"
         }
       ),
-      /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--section-gray))", to: "hsl(var(--background))", variant: "diagonal", flip: true })
+      /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand-muted))", to: "hsl(var(--background))", variant: "diagonal", flip: true })
     ] }),
     newsletter && /* @__PURE__ */ jsx(
       Newsletter,