@snow-labs/brutal-ui 0.2.1 → 0.3.1

package/dist/templates/saas-launch.js

@@ -263,6 +263,9 @@ 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"
 };
@@ -356,11 +359,11 @@ function BrutalHero({
       variant === "centered" && "mx-auto"
     ), children: description }),
     /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex flex-col gap-4 sm:flex-row sm:flex-wrap",
-      variant === "centered" && "sm:justify-center"
+      "flex flex-wrap gap-4",
+      variant === "centered" && "justify-center"
     ), children: [
-      /* @__PURE__ */ jsx(Button, { variant: ctaVariant, size: "xl", className: "w-full sm:w-auto", render: /* @__PURE__ */ jsx("a", { href: ctaHref }), children: ctaText }),
-      secondaryText && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "xl", className: "w-full sm:w-auto", render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }), children: secondaryText })
+      /* @__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 })
     ] }),
     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" }),
@@ -779,7 +782,7 @@ function BrutalTestimonials({
   headline,
   testimonials,
   variant = "masonry",
-  color = "brand-muted",
+  color = "blue",
   pattern,
   className
 }) {
@@ -1021,13 +1024,12 @@ function CTAButtons({
   secondaryText,
   secondaryHref
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-center", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         variant: ctaVariant,
         size: "xl",
-        className: "w-full sm:w-auto",
         render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
         children: ctaText
       }
@@ -1036,8 +1038,7 @@ function CTAButtons({
       Button,
       {
         variant: "outline",
-        size: "xl",
-        className: "w-full sm:w-auto",
+        size: "lg",
         render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
         children: secondaryText
       }
@@ -1067,13 +1068,12 @@ 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-col gap-4 sm:flex-row sm:flex-wrap", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap 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
           }
@@ -1082,8 +1082,7 @@ function SplitCTA(props) {
           Button,
           {
             variant: "outline",
-            size: "xl",
-            className: "w-full sm:w-auto",
+            size: "lg",
             render: /* @__PURE__ */ jsx("a", { href: props.secondaryHref || "#" }),
             children: props.secondaryText
           }
@@ -1153,7 +1152,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base font-medium shadow-brutal-sm transition-all outline-none placeholder:text-muted-foreground focus:shadow-brutal focus:-translate-x-0.5 focus:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm",
+        "h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base transition-all outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm",
         className
       ),
       ...props
@@ -1338,7 +1337,7 @@ function SaaSLaunchTemplate({
       }
     ),
     stats && stats.length > 0 && /* @__PURE__ */ jsx(StatsBar, { stats, color: "brand" }),
-    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand))", to: "hsl(var(--brand-muted))", variant: "torn-paper" }),
+    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand))", to: "hsl(var(--section-blue))", variant: "torn-paper" }),
     /* @__PURE__ */ jsx(
       BrutalTestimonials,
       {
@@ -1346,10 +1345,10 @@ function SaaSLaunchTemplate({
         badge: testimonials.badge,
         headline: testimonials.headline,
         testimonials: testimonials.items,
-        color: "brand-muted"
+        color: "blue"
       }
     ),
-    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand-muted))", to: "hsl(var(--background))", variant: "wave" }),
+    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--section-blue))", to: "hsl(var(--background))", variant: "wave" }),
     pricing && /* @__PURE__ */ jsx(
       PricingTable,
       {
@@ -1361,7 +1360,7 @@ function SaaSLaunchTemplate({
         color: "white"
       }
     ),
-    faq && faq.length > 0 && /* @__PURE__ */ jsx(FAQ, { badge: "FAQ", headline: "Common Questions", items: faq, color: "white" }),
+    faq && faq.length > 0 && /* @__PURE__ */ jsx(FAQ, { badge: "FAQ", headline: "Common Questions", items: faq, color: "gray" }),
     /* @__PURE__ */ jsx(
       BrutalCTA,
       {