@snow-labs/brutal-ui 0.3.2 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/brutal/comparison-table.d.ts +23 -0
- package/dist/components/brutal/comparison-table.js +117 -0
- package/dist/components/brutal/comparison-table.js.map +1 -0
- package/dist/components/brutal/cta-section.js +2 -2
- package/dist/components/brutal/cta-section.js.map +1 -1
- package/dist/components/brutal/faq.js +2 -2
- package/dist/components/brutal/faq.js.map +1 -1
- package/dist/components/brutal/feature-grid.d.ts +1 -1
- package/dist/components/brutal/feature-grid.js +10 -2
- package/dist/components/brutal/feature-grid.js.map +1 -1
- package/dist/components/brutal/feature-showcase.d.ts +20 -0
- package/dist/components/brutal/feature-showcase.js +158 -0
- package/dist/components/brutal/feature-showcase.js.map +1 -0
- package/dist/components/brutal/footer.js +1 -2
- package/dist/components/brutal/footer.js.map +1 -1
- package/dist/components/brutal/hero.js +2 -2
- package/dist/components/brutal/hero.js.map +1 -1
- package/dist/components/brutal/index.d.ts +4 -0
- package/dist/components/brutal/index.js +275 -59
- package/dist/components/brutal/index.js.map +1 -1
- package/dist/components/brutal/integration-grid.js +3 -3
- package/dist/components/brutal/integration-grid.js.map +1 -1
- package/dist/components/brutal/logo-cloud.js +2 -2
- package/dist/components/brutal/logo-cloud.js.map +1 -1
- package/dist/components/brutal/marquee.d.ts +17 -0
- package/dist/components/brutal/marquee.js +66 -0
- package/dist/components/brutal/marquee.js.map +1 -0
- package/dist/components/brutal/mockup-window.d.ts +11 -0
- package/dist/components/brutal/mockup-window.js +80 -0
- package/dist/components/brutal/mockup-window.js.map +1 -0
- package/dist/components/brutal/nav.js +1 -1
- package/dist/components/brutal/nav.js.map +1 -1
- package/dist/components/brutal/newsletter.js +2 -2
- package/dist/components/brutal/newsletter.js.map +1 -1
- package/dist/components/brutal/pricing-table.js +2 -2
- package/dist/components/brutal/pricing-table.js.map +1 -1
- package/dist/components/brutal/section.js +2 -2
- package/dist/components/brutal/section.js.map +1 -1
- package/dist/components/brutal/stats-bar.js +3 -3
- package/dist/components/brutal/stats-bar.js.map +1 -1
- package/dist/components/brutal/testimonials.js +6 -11
- package/dist/components/brutal/testimonials.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +233 -17
- package/dist/index.js.map +1 -1
- package/dist/templates/index.js +17 -15
- package/dist/templates/index.js.map +1 -1
- package/dist/templates/saas-launch.js +17 -15
- package/dist/templates/saas-launch.js.map +1 -1
- package/dist/templates/studio.js +16 -14
- package/dist/templates/studio.js.map +1 -1
- package/dist/theme.css +41 -4
- package/package.json +1 -1
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { SectionColor, SectionPattern } from './section.js';
|
|
3
|
+
|
|
4
|
+
interface ComparisonFeature {
|
|
5
|
+
name: string;
|
|
6
|
+
us: string | boolean;
|
|
7
|
+
them: string | boolean;
|
|
8
|
+
highlight?: boolean;
|
|
9
|
+
}
|
|
10
|
+
interface BrutalComparisonTableProps {
|
|
11
|
+
badge?: string;
|
|
12
|
+
headline: string;
|
|
13
|
+
description?: string;
|
|
14
|
+
usName: string;
|
|
15
|
+
themName: string;
|
|
16
|
+
features: ComparisonFeature[];
|
|
17
|
+
color?: SectionColor;
|
|
18
|
+
pattern?: SectionPattern;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
declare function BrutalComparisonTable({ badge, headline, description, usName, themName, features, color, pattern, className, }: BrutalComparisonTableProps): react_jsx_runtime.JSX.Element;
|
|
22
|
+
|
|
23
|
+
export { BrutalComparisonTable };
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// src/lib/utils.ts
|
|
7
|
+
function cn(...inputs) {
|
|
8
|
+
return twMerge(clsx(inputs));
|
|
9
|
+
}
|
|
10
|
+
var colorMap = {
|
|
11
|
+
white: "bg-background text-foreground",
|
|
12
|
+
brand: "bg-brand",
|
|
13
|
+
"brand-muted": "bg-brand-muted text-foreground",
|
|
14
|
+
blue: "bg-section-blue",
|
|
15
|
+
gray: "bg-muted text-foreground",
|
|
16
|
+
cream: "bg-secondary text-foreground",
|
|
17
|
+
black: "bg-foreground text-background",
|
|
18
|
+
cta: "bg-cta"
|
|
19
|
+
};
|
|
20
|
+
var containerMap = {
|
|
21
|
+
sm: "brutal-container-sm",
|
|
22
|
+
default: "brutal-container",
|
|
23
|
+
lg: "brutal-container-lg"
|
|
24
|
+
};
|
|
25
|
+
var paddingMap = {
|
|
26
|
+
sm: "brutal-section-sm",
|
|
27
|
+
default: "brutal-section",
|
|
28
|
+
lg: "brutal-section py-28 sm:py-36 md:py-44"
|
|
29
|
+
};
|
|
30
|
+
var patternMap = {
|
|
31
|
+
dots: "brutal-dots",
|
|
32
|
+
stripes: "brutal-stripes",
|
|
33
|
+
noise: "brutal-noise",
|
|
34
|
+
grain: "brutal-grain",
|
|
35
|
+
crosshatch: "brutal-crosshatch",
|
|
36
|
+
"grid-dots": "brutal-grid-dots",
|
|
37
|
+
"gradient-mesh": "brutal-gradient-mesh",
|
|
38
|
+
none: ""
|
|
39
|
+
};
|
|
40
|
+
function BrutalSection({
|
|
41
|
+
children,
|
|
42
|
+
color = "white",
|
|
43
|
+
className,
|
|
44
|
+
containerSize = "default",
|
|
45
|
+
padding = "default",
|
|
46
|
+
pattern,
|
|
47
|
+
dots = false,
|
|
48
|
+
stripes = false,
|
|
49
|
+
id
|
|
50
|
+
}) {
|
|
51
|
+
const resolvedPattern = pattern ?? (dots ? "dots" : void 0) ?? (stripes ? "stripes" : void 0) ?? "none";
|
|
52
|
+
return /* @__PURE__ */ jsx(
|
|
53
|
+
"section",
|
|
54
|
+
{
|
|
55
|
+
id,
|
|
56
|
+
className: cn(
|
|
57
|
+
paddingMap[padding],
|
|
58
|
+
colorMap[color],
|
|
59
|
+
patternMap[resolvedPattern],
|
|
60
|
+
className
|
|
61
|
+
),
|
|
62
|
+
children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
function CellValue({ value }) {
|
|
67
|
+
if (typeof value === "boolean") {
|
|
68
|
+
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" });
|
|
69
|
+
}
|
|
70
|
+
return /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: value });
|
|
71
|
+
}
|
|
72
|
+
function BrutalComparisonTable({
|
|
73
|
+
badge,
|
|
74
|
+
headline,
|
|
75
|
+
description,
|
|
76
|
+
usName,
|
|
77
|
+
themName,
|
|
78
|
+
features,
|
|
79
|
+
color = "white",
|
|
80
|
+
pattern,
|
|
81
|
+
className
|
|
82
|
+
}) {
|
|
83
|
+
return /* @__PURE__ */ jsxs(BrutalSection, { color, pattern, className, children: [
|
|
84
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", children: [
|
|
85
|
+
badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-brand", children: badge }),
|
|
86
|
+
/* @__PURE__ */ jsx("h2", { className: "brutal-h2 mb-4", children: headline }),
|
|
87
|
+
description && /* @__PURE__ */ jsx("p", { className: "brutal-body text-muted-foreground", children: description })
|
|
88
|
+
] }),
|
|
89
|
+
/* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
|
|
90
|
+
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
|
|
91
|
+
/* @__PURE__ */ jsx("th", { className: "border-b-brutal border-foreground px-4 py-3 text-left text-sm font-medium text-muted-foreground", children: "Feature" }),
|
|
92
|
+
/* @__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 }) }),
|
|
93
|
+
/* @__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 }) })
|
|
94
|
+
] }) }),
|
|
95
|
+
/* @__PURE__ */ jsx("tbody", { children: features.map((f, i) => /* @__PURE__ */ jsxs(
|
|
96
|
+
"tr",
|
|
97
|
+
{
|
|
98
|
+
className: cn(
|
|
99
|
+
"transition-colors",
|
|
100
|
+
f.highlight && "bg-brand-muted/50",
|
|
101
|
+
i % 2 === 0 && !f.highlight && "bg-muted/30"
|
|
102
|
+
),
|
|
103
|
+
children: [
|
|
104
|
+
/* @__PURE__ */ jsx("td", { className: "border-b border-foreground/10 px-4 py-3 text-sm font-medium", children: f.name }),
|
|
105
|
+
/* @__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 }) }),
|
|
106
|
+
/* @__PURE__ */ jsx("td", { className: "border-b border-foreground/10 px-4 py-3 text-center", children: /* @__PURE__ */ jsx(CellValue, { value: f.them }) })
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
i
|
|
110
|
+
)) })
|
|
111
|
+
] }) })
|
|
112
|
+
] });
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
export { BrutalComparisonTable };
|
|
116
|
+
//# sourceMappingURL=comparison-table.js.map
|
|
117
|
+
//# sourceMappingURL=comparison-table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section.tsx","../../../src/components/brutal/comparison-table.tsx"],"names":["jsx"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AC+BA,IAAM,QAAA,GAAyC;AAAA,EAC7C,KAAA,EAAO,+BAAA;AAAA,EACP,KAAA,EAAO,UAAA;AAAA,EACP,aAAA,EAAe,gCAAA;AAAA,EACf,IAAA,EAAM,iBAAA;AAAA,EACN,IAAA,EAAM,0BAAA;AAAA,EACN,KAAA,EAAO,8BAAA;AAAA,EACP,KAAA,EAAO,+BAAA;AAAA,EACP,GAAA,EAAK;AACP,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,EAAA,EAAI,qBAAA;AAAA,EACJ,OAAA,EAAS,kBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,mBAAA;AAAA,EACJ,OAAA,EAAS,gBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GAA6C;AAAA,EACjD,IAAA,EAAM,aAAA;AAAA,EACN,OAAA,EAAS,gBAAA;AAAA,EACT,KAAA,EAAO,cAAA;AAAA,EACP,KAAA,EAAO,cAAA;AAAA,EACP,UAAA,EAAY,mBAAA;AAAA,EACZ,WAAA,EAAa,kBAAA;AAAA,EACb,eAAA,EAAiB,sBAAA;AAAA,EACjB,IAAA,EAAM;AACR,CAAA;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,aAAA,GAAgB,SAAA;AAAA,EAChB,OAAA,GAAU,SAAA;AAAA,EACV,OAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,kBAAkB,OAAA,KAClB,IAAA,GAAO,SAAS,MAAA,CAAA,KAChB,OAAA,GAAU,YAAY,MAAA,CAAA,IACvB,MAAA;AAEL,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,OAAO,CAAA;AAAA,QAClB,SAAS,KAAK,CAAA;AAAA,QACd,WAAW,eAAe,CAAA;AAAA,QAC1B;AAAA,OACF;AAAA,MAEA,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,aAAa,GAAI,QAAA,EAAS;AAAA;AAAA,GACzD;AAEJ;AC5EA,SAAS,SAAA,CAAU,EAAE,KAAA,EAAM,EAAgC;AACzD,EAAA,IAAI,OAAO,UAAU,SAAA,EAAW;AAC9B,IAAA,OAAO,KAAA,mBACLA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iIAAA,EAAkI,QAAA,EAAA,QAAA,EAElJ,CAAA,mBAEAA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mHAAkH,QAAA,EAAA,QAAA,EAElI,CAAA;AAAA,EAEJ;AACA,EAAA,uBAAOA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAuB,QAAA,EAAA,KAAA,EAAM,CAAA;AACtD;AAEO,SAAS,qBAAA,CAAsB;AAAA,EACpC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,OAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,uBACE,IAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAc,OAAA,EAAkB,SAAA,EAC7C,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBAASA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,gCAAgC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBAC7DA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,kBAAkB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MACxC,+BACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qCAAqC,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EAElE,CAAA;AAAA,oBAEAA,IAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBACb,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EAAM,WAAU,wBAAA,EACf,QAAA,EAAA;AAAA,sBAAAA,GAAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,IAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,iGAAA,EAAkG,QAAA,EAAA,SAAA,EAEhH,CAAA;AAAA,wBACAA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,wEAAA,EACZ,QAAA,kBAAAA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAA,MAAA,EAAO,CAAA,EACpD,CAAA;AAAA,wBACAA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,yDAAA,EACZ,QAAA,kBAAAA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EACb,QAAA,EAAA,QAAA,EACH,CAAA,EACF;AAAA,OAAA,EACF,CAAA,EACF,CAAA;AAAA,sBACAA,GAAAA,CAAC,OAAA,EAAA,EACE,mBAAS,GAAA,CAAI,CAAC,GAAG,CAAA,qBAChB,IAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAW,EAAA;AAAA,YACT,mBAAA;AAAA,YACA,EAAE,SAAA,IAAa,mBAAA;AAAA,YACf,CAAA,GAAI,CAAA,KAAM,CAAA,IAAK,CAAC,EAAE,SAAA,IAAa;AAAA,WACjC;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAAA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DAAA,EACX,YAAE,IAAA,EACL,CAAA;AAAA,4BACAA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,uEAAA,EACZ,QAAA,kBAAAA,GAAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,CAAA,CAAE,EAAA,EAAI,CAAA,EAC1B,CAAA;AAAA,4BACAA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qDAAA,EACZ,QAAA,kBAAAA,GAAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,CAAA,CAAE,IAAA,EAAM,CAAA,EAC5B;AAAA;AAAA,SAAA;AAAA,QAfK;AAAA,OAiBR,CAAA,EACH;AAAA,KAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"comparison-table.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\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-muted text-foreground\",\n cream: \"bg-secondary 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 { BrutalSection } from \"./section\";\nimport type { SectionColor, SectionPattern } from \"./section\";\n\ninterface ComparisonFeature {\n name: string;\n us: string | boolean;\n them: string | boolean;\n highlight?: boolean;\n}\n\ninterface BrutalComparisonTableProps {\n badge?: string;\n headline: string;\n description?: string;\n usName: string;\n themName: string;\n features: ComparisonFeature[];\n color?: SectionColor;\n pattern?: SectionPattern;\n className?: string;\n}\n\nfunction CellValue({ value }: { value: string | boolean }) {\n if (typeof value === \"boolean\") {\n return value ? (\n <span className=\"inline-flex size-7 items-center justify-center border-brutal border-foreground bg-brand font-bold text-brand-foreground text-sm\">\n ✓\n </span>\n ) : (\n <span className=\"inline-flex size-7 items-center justify-center border-brutal border-foreground/20 text-sm text-muted-foreground\">\n —\n </span>\n );\n }\n return <span className=\"text-sm font-medium\">{value}</span>;\n}\n\nexport function BrutalComparisonTable({\n badge,\n headline,\n description,\n usName,\n themName,\n features,\n color = \"white\",\n pattern,\n className,\n}: BrutalComparisonTableProps) {\n return (\n <BrutalSection color={color} pattern={pattern} className={className}>\n <div className=\"mb-12 max-w-2xl\">\n {badge && <p className=\"brutal-label mb-4 text-brand\">{badge}</p>}\n <h2 className=\"brutal-h2 mb-4\">{headline}</h2>\n {description && (\n <p className=\"brutal-body text-muted-foreground\">{description}</p>\n )}\n </div>\n\n <div className=\"overflow-x-auto\">\n <table className=\"w-full border-collapse\">\n <thead>\n <tr>\n <th className=\"border-b-brutal border-foreground px-4 py-3 text-left text-sm font-medium text-muted-foreground\">\n Feature\n </th>\n <th className=\"border-b-brutal border-foreground bg-brand-muted px-4 py-3 text-center\">\n <span className=\"brutal-label text-brand\">{usName}</span>\n </th>\n <th className=\"border-b-brutal border-foreground px-4 py-3 text-center\">\n <span className=\"brutal-label text-muted-foreground\">\n {themName}\n </span>\n </th>\n </tr>\n </thead>\n <tbody>\n {features.map((f, i) => (\n <tr\n key={i}\n className={cn(\n \"transition-colors\",\n f.highlight && \"bg-brand-muted/50\",\n i % 2 === 0 && !f.highlight && \"bg-muted/30\"\n )}\n >\n <td className=\"border-b border-foreground/10 px-4 py-3 text-sm font-medium\">\n {f.name}\n </td>\n <td className=\"border-b border-foreground/10 bg-brand-muted/30 px-4 py-3 text-center\">\n <CellValue value={f.us} />\n </td>\n <td className=\"border-b border-foreground/10 px-4 py-3 text-center\">\n <CellValue value={f.them} />\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </BrutalSection>\n );\n}\n"]}
|
|
@@ -70,8 +70,8 @@ var colorMap = {
|
|
|
70
70
|
brand: "bg-brand",
|
|
71
71
|
"brand-muted": "bg-brand-muted text-foreground",
|
|
72
72
|
blue: "bg-section-blue",
|
|
73
|
-
gray: "bg-
|
|
74
|
-
cream: "bg-
|
|
73
|
+
gray: "bg-muted text-foreground",
|
|
74
|
+
cream: "bg-secondary text-foreground",
|
|
75
75
|
black: "bg-foreground text-background",
|
|
76
76
|
cta: "bg-cta"
|
|
77
77
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/cta-section.tsx"],"names":["ButtonPrimitive","jsx"],"mappings":"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","file":"cta-section.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 { SectionColor, SectionPattern } from \"./section\";\n\ninterface BrutalCTAProps {\n headline: string;\n description?: string;\n ctaText: string;\n ctaHref?: string;\n ctaVariant?: \"cta\" | \"brand\" | \"default\" | \"outline\";\n secondaryText?: string;\n secondaryHref?: string;\n color?: SectionColor;\n pattern?: SectionPattern;\n className?: string;\n variant?: \"centered\" | \"split\" | \"with-visual\" | \"floating-card\";\n visual?: React.ReactNode;\n stats?: string;\n}\n\nfunction CTAButtons({\n ctaText,\n ctaHref = \"#\",\n ctaVariant = \"cta\",\n secondaryText,\n secondaryHref,\n}: Pick<\n BrutalCTAProps,\n \"ctaText\" | \"ctaHref\" | \"ctaVariant\" | \"secondaryText\" | \"secondaryHref\"\n>) {\n return (\n <div className=\"flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-4\">\n <Button\n variant={ctaVariant}\n size=\"xl\"\n className=\"w-full sm:w-auto\"\n render={<a href={ctaHref} />}\n >\n {ctaText}\n </Button>\n {secondaryText && (\n <Button\n variant=\"outline\"\n size=\"xl\"\n className=\"w-full sm:w-auto\"\n render={<a href={secondaryHref || \"#\"} />}\n >\n {secondaryText}\n </Button>\n )}\n </div>\n );\n}\n\nfunction CenteredCTA(props: BrutalCTAProps) {\n return (\n <div className=\"mx-auto max-w-2xl text-center\">\n <h2 className=\"brutal-h1 mb-6\">{props.headline}</h2>\n {props.description && (\n <p className=\"brutal-body mb-4 opacity-80\">{props.description}</p>\n )}\n {props.stats && (\n <p className=\"brutal-label mb-8 opacity-60\">{props.stats}</p>\n )}\n <CTAButtons\n ctaText={props.ctaText}\n ctaHref={props.ctaHref}\n ctaVariant={props.ctaVariant}\n secondaryText={props.secondaryText}\n secondaryHref={props.secondaryHref}\n />\n </div>\n );\n}\n\nfunction SplitCTA(props: BrutalCTAProps) {\n return (\n <div className=\"grid items-center gap-12 lg:grid-cols-2\">\n <div>\n <h2 className=\"brutal-h1 mb-6\">{props.headline}</h2>\n {props.description && (\n <p className=\"brutal-body mb-4 opacity-80\">{props.description}</p>\n )}\n {props.stats && (\n <p className=\"brutal-label mb-8 opacity-60\">{props.stats}</p>\n )}\n <div className=\"flex flex-col gap-3 sm:flex-row sm:gap-4\">\n <Button\n variant={props.ctaVariant || \"cta\"}\n size=\"xl\"\n className=\"w-full sm:w-auto\"\n render={<a href={props.ctaHref || \"#\"} />}\n >\n {props.ctaText}\n </Button>\n {props.secondaryText && (\n <Button\n variant=\"outline\"\n size=\"xl\"\n className=\"w-full sm:w-auto\"\n render={<a href={props.secondaryHref || \"#\"} />}\n >\n {props.secondaryText}\n </Button>\n )}\n </div>\n </div>\n {props.visual && <div>{props.visual}</div>}\n </div>\n );\n}\n\nfunction WithVisualCTA(props: BrutalCTAProps) {\n return (\n <div className=\"relative\">\n {props.visual && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center opacity-10\">\n {props.visual}\n </div>\n )}\n <div className=\"relative mx-auto max-w-2xl text-center\">\n <h2 className=\"brutal-h1 mb-6\">{props.headline}</h2>\n {props.description && (\n <p className=\"brutal-body mb-4 opacity-80\">{props.description}</p>\n )}\n {props.stats && (\n <p className=\"brutal-label mb-8 opacity-60\">{props.stats}</p>\n )}\n <CTAButtons\n ctaText={props.ctaText}\n ctaHref={props.ctaHref}\n ctaVariant={props.ctaVariant}\n secondaryText={props.secondaryText}\n secondaryHref={props.secondaryHref}\n />\n </div>\n </div>\n );\n}\n\nfunction FloatingCardCTA(props: BrutalCTAProps) {\n return (\n <div className=\"relative z-10 -mt-16\">\n <div className=\"mx-auto max-w-2xl border-brutal border-foreground bg-background p-8 text-center text-foreground shadow-brutal-lg\">\n <h2 className=\"brutal-h1 mb-6\">{props.headline}</h2>\n {props.description && (\n <p className=\"brutal-body mb-4 opacity-80\">{props.description}</p>\n )}\n {props.stats && (\n <p className=\"brutal-label mb-8 opacity-60\">{props.stats}</p>\n )}\n <CTAButtons\n ctaText={props.ctaText}\n ctaHref={props.ctaHref}\n ctaVariant={props.ctaVariant}\n secondaryText={props.secondaryText}\n secondaryHref={props.secondaryHref}\n />\n </div>\n </div>\n );\n}\n\nexport function BrutalCTA({\n variant = \"centered\",\n color = \"black\",\n className,\n pattern,\n ...props\n}: BrutalCTAProps) {\n // floating-card variant doesn't wrap in a section — it floats above the previous section\n if (variant === \"floating-card\") {\n return (\n <div className={cn(\"brutal-container px-6\", className)}>\n <FloatingCardCTA {...props} variant={variant} color={color} />\n </div>\n );\n }\n\n return (\n <BrutalSection color={color} pattern={pattern} className={className}>\n {variant === \"centered\" && <CenteredCTA {...props} variant={variant} color={color} />}\n {variant === \"split\" && <SplitCTA {...props} variant={variant} color={color} />}\n {variant === \"with-visual\" && <WithVisualCTA {...props} variant={variant} color={color} />}\n </BrutalSection>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/cta-section.tsx"],"names":["ButtonPrimitive","jsx"],"mappings":"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","file":"cta-section.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-muted text-foreground\",\n cream: \"bg-secondary 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 { SectionColor, SectionPattern } from \"./section\";\n\ninterface BrutalCTAProps {\n headline: string;\n description?: string;\n ctaText: string;\n ctaHref?: string;\n ctaVariant?: \"cta\" | \"brand\" | \"default\" | \"outline\";\n secondaryText?: string;\n secondaryHref?: string;\n color?: SectionColor;\n pattern?: SectionPattern;\n className?: string;\n variant?: \"centered\" | \"split\" | \"with-visual\" | \"floating-card\";\n visual?: React.ReactNode;\n stats?: string;\n}\n\nfunction CTAButtons({\n ctaText,\n ctaHref = \"#\",\n ctaVariant = \"cta\",\n secondaryText,\n secondaryHref,\n}: Pick<\n BrutalCTAProps,\n \"ctaText\" | \"ctaHref\" | \"ctaVariant\" | \"secondaryText\" | \"secondaryHref\"\n>) {\n return (\n <div className=\"flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-4\">\n <Button\n variant={ctaVariant}\n size=\"xl\"\n className=\"w-full sm:w-auto\"\n render={<a href={ctaHref} />}\n >\n {ctaText}\n </Button>\n {secondaryText && (\n <Button\n variant=\"outline\"\n size=\"xl\"\n className=\"w-full sm:w-auto\"\n render={<a href={secondaryHref || \"#\"} />}\n >\n {secondaryText}\n </Button>\n )}\n </div>\n );\n}\n\nfunction CenteredCTA(props: BrutalCTAProps) {\n return (\n <div className=\"mx-auto max-w-2xl text-center\">\n <h2 className=\"brutal-h1 mb-6\">{props.headline}</h2>\n {props.description && (\n <p className=\"brutal-body mb-4 opacity-80\">{props.description}</p>\n )}\n {props.stats && (\n <p className=\"brutal-label mb-8 opacity-60\">{props.stats}</p>\n )}\n <CTAButtons\n ctaText={props.ctaText}\n ctaHref={props.ctaHref}\n ctaVariant={props.ctaVariant}\n secondaryText={props.secondaryText}\n secondaryHref={props.secondaryHref}\n />\n </div>\n );\n}\n\nfunction SplitCTA(props: BrutalCTAProps) {\n return (\n <div className=\"grid items-center gap-12 lg:grid-cols-2\">\n <div>\n <h2 className=\"brutal-h1 mb-6\">{props.headline}</h2>\n {props.description && (\n <p className=\"brutal-body mb-4 opacity-80\">{props.description}</p>\n )}\n {props.stats && (\n <p className=\"brutal-label mb-8 opacity-60\">{props.stats}</p>\n )}\n <div className=\"flex flex-col gap-3 sm:flex-row sm:gap-4\">\n <Button\n variant={props.ctaVariant || \"cta\"}\n size=\"xl\"\n className=\"w-full sm:w-auto\"\n render={<a href={props.ctaHref || \"#\"} />}\n >\n {props.ctaText}\n </Button>\n {props.secondaryText && (\n <Button\n variant=\"outline\"\n size=\"xl\"\n className=\"w-full sm:w-auto\"\n render={<a href={props.secondaryHref || \"#\"} />}\n >\n {props.secondaryText}\n </Button>\n )}\n </div>\n </div>\n {props.visual && <div>{props.visual}</div>}\n </div>\n );\n}\n\nfunction WithVisualCTA(props: BrutalCTAProps) {\n return (\n <div className=\"relative\">\n {props.visual && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center opacity-10\">\n {props.visual}\n </div>\n )}\n <div className=\"relative mx-auto max-w-2xl text-center\">\n <h2 className=\"brutal-h1 mb-6\">{props.headline}</h2>\n {props.description && (\n <p className=\"brutal-body mb-4 opacity-80\">{props.description}</p>\n )}\n {props.stats && (\n <p className=\"brutal-label mb-8 opacity-60\">{props.stats}</p>\n )}\n <CTAButtons\n ctaText={props.ctaText}\n ctaHref={props.ctaHref}\n ctaVariant={props.ctaVariant}\n secondaryText={props.secondaryText}\n secondaryHref={props.secondaryHref}\n />\n </div>\n </div>\n );\n}\n\nfunction FloatingCardCTA(props: BrutalCTAProps) {\n return (\n <div className=\"relative z-10 -mt-16\">\n <div className=\"mx-auto max-w-2xl border-brutal border-foreground bg-background p-8 text-center text-foreground shadow-brutal-lg\">\n <h2 className=\"brutal-h1 mb-6\">{props.headline}</h2>\n {props.description && (\n <p className=\"brutal-body mb-4 opacity-80\">{props.description}</p>\n )}\n {props.stats && (\n <p className=\"brutal-label mb-8 opacity-60\">{props.stats}</p>\n )}\n <CTAButtons\n ctaText={props.ctaText}\n ctaHref={props.ctaHref}\n ctaVariant={props.ctaVariant}\n secondaryText={props.secondaryText}\n secondaryHref={props.secondaryHref}\n />\n </div>\n </div>\n );\n}\n\nexport function BrutalCTA({\n variant = \"centered\",\n color = \"black\",\n className,\n pattern,\n ...props\n}: BrutalCTAProps) {\n // floating-card variant doesn't wrap in a section — it floats above the previous section\n if (variant === \"floating-card\") {\n return (\n <div className={cn(\"brutal-container px-6\", className)}>\n <FloatingCardCTA {...props} variant={variant} color={color} />\n </div>\n );\n }\n\n return (\n <BrutalSection color={color} pattern={pattern} className={className}>\n {variant === \"centered\" && <CenteredCTA {...props} variant={variant} color={color} />}\n {variant === \"split\" && <SplitCTA {...props} variant={variant} color={color} />}\n {variant === \"with-visual\" && <WithVisualCTA {...props} variant={variant} color={color} />}\n </BrutalSection>\n );\n}\n"]}
|
|
@@ -80,8 +80,8 @@ var colorMap = {
|
|
|
80
80
|
brand: "bg-brand",
|
|
81
81
|
"brand-muted": "bg-brand-muted text-foreground",
|
|
82
82
|
blue: "bg-section-blue",
|
|
83
|
-
gray: "bg-
|
|
84
|
-
cream: "bg-
|
|
83
|
+
gray: "bg-muted text-foreground",
|
|
84
|
+
cream: "bg-secondary text-foreground",
|
|
85
85
|
black: "bg-foreground text-background",
|
|
86
86
|
cta: "bg-cta"
|
|
87
87
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/accordion.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/faq.tsx"],"names":["AccordionPrimitive","jsx","jsxs"],"mappings":"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","file":"faq.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 { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"../../lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n className={cn(\"flex w-full flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n className={cn(\"border-brutal border-foreground rounded-lg mb-2 px-3\", className)}\n {...props}\n />\n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: AccordionPrimitive.Trigger.Props) {\n return (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n data-slot=\"accordion-trigger\"\n className={cn(\n \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-bold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: AccordionPrimitive.Panel.Props) {\n return (\n <AccordionPrimitive.Panel\n data-slot=\"accordion-content\"\n className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n {...props}\n >\n <div\n className={cn(\n \"h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n className\n )}\n >\n {children}\n </div>\n </AccordionPrimitive.Panel>\n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\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 { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"../ui/accordion\";\nimport { BrutalSection } from \"./section\";\n\ninterface FAQItem {\n question: string;\n answer: string;\n}\n\ninterface FAQProps {\n badge?: string;\n headline?: string;\n items: FAQItem[];\n color?: \"white\" | \"gray\" | \"cream\";\n className?: string;\n}\n\nexport function FAQ({\n badge,\n headline,\n items,\n color = \"white\",\n className,\n}: FAQProps) {\n return (\n <BrutalSection color={color} className={className}>\n {(headline || badge) && (\n <div className=\"mb-10 mx-auto max-w-2xl\">\n {badge && <p className=\"brutal-label mb-4 text-brand\">{badge}</p>}\n {headline && <h2 className=\"brutal-h2\">{headline}</h2>}\n </div>\n )}\n <Accordion className=\"mx-auto max-w-2xl\">\n {items.map((item, i) => (\n <AccordionItem\n key={i}\n value={`faq-${i}`}\n className={cn(\n \"border-brutal border-foreground mb-3 px-5\",\n i % 2 === 0 ? \"bg-background\" : \"bg-secondary\",\n )}\n >\n <AccordionTrigger className=\"brutal-h4 py-4 text-left\">\n {item.question}\n </AccordionTrigger>\n <AccordionContent className=\"brutal-body pb-4 text-muted-foreground\">\n {item.answer}\n </AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n </BrutalSection>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/accordion.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/faq.tsx"],"names":["AccordionPrimitive","jsx","jsxs"],"mappings":"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","file":"faq.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 { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"../../lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n className={cn(\"flex w-full flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n className={cn(\"border-brutal border-foreground rounded-lg mb-2 px-3\", className)}\n {...props}\n />\n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: AccordionPrimitive.Trigger.Props) {\n return (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n data-slot=\"accordion-trigger\"\n className={cn(\n \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-bold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: AccordionPrimitive.Panel.Props) {\n return (\n <AccordionPrimitive.Panel\n data-slot=\"accordion-content\"\n className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n {...props}\n >\n <div\n className={cn(\n \"h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n className\n )}\n >\n {children}\n </div>\n </AccordionPrimitive.Panel>\n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\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-muted text-foreground\",\n cream: \"bg-secondary 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 { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"../ui/accordion\";\nimport { BrutalSection } from \"./section\";\n\ninterface FAQItem {\n question: string;\n answer: string;\n}\n\ninterface FAQProps {\n badge?: string;\n headline?: string;\n items: FAQItem[];\n color?: \"white\" | \"gray\" | \"cream\";\n className?: string;\n}\n\nexport function FAQ({\n badge,\n headline,\n items,\n color = \"white\",\n className,\n}: FAQProps) {\n return (\n <BrutalSection color={color} className={className}>\n {(headline || badge) && (\n <div className=\"mb-10 mx-auto max-w-2xl\">\n {badge && <p className=\"brutal-label mb-4 text-brand\">{badge}</p>}\n {headline && <h2 className=\"brutal-h2\">{headline}</h2>}\n </div>\n )}\n <Accordion className=\"mx-auto max-w-2xl\">\n {items.map((item, i) => (\n <AccordionItem\n key={i}\n value={`faq-${i}`}\n className={cn(\n \"border-brutal border-foreground mb-3 px-5\",\n i % 2 === 0 ? \"bg-background\" : \"bg-secondary\",\n )}\n >\n <AccordionTrigger className=\"brutal-h4 py-4 text-left\">\n {item.question}\n </AccordionTrigger>\n <AccordionContent className=\"brutal-body pb-4 text-muted-foreground\">\n {item.answer}\n </AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n </BrutalSection>\n );\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
type FeatureGridVariant = "icon-top" | "icon-left" | "numbered" | "bento";
|
|
3
|
+
type FeatureGridVariant = "icon-top" | "icon-left" | "numbered" | "bento" | "minimal";
|
|
4
4
|
interface Feature {
|
|
5
5
|
icon?: React.ReactNode;
|
|
6
6
|
title: string;
|
|
@@ -68,8 +68,8 @@ var colorMap = {
|
|
|
68
68
|
brand: "bg-brand",
|
|
69
69
|
"brand-muted": "bg-brand-muted text-foreground",
|
|
70
70
|
blue: "bg-section-blue",
|
|
71
|
-
gray: "bg-
|
|
72
|
-
cream: "bg-
|
|
71
|
+
gray: "bg-muted text-foreground",
|
|
72
|
+
cream: "bg-secondary text-foreground",
|
|
73
73
|
black: "bg-foreground text-background",
|
|
74
74
|
cta: "bg-cta"
|
|
75
75
|
};
|
|
@@ -166,6 +166,14 @@ function FeatureCard({
|
|
|
166
166
|
index
|
|
167
167
|
}) {
|
|
168
168
|
const isBentoFeatured = variant === "bento" && feature.featured;
|
|
169
|
+
if (variant === "minimal") {
|
|
170
|
+
return /* @__PURE__ */ jsxs("div", { className: "group flex flex-col gap-3 border-l-4 border-l-brand py-1 pl-5", children: [
|
|
171
|
+
feature.icon && /* @__PURE__ */ jsx("div", { className: "text-2xl", children: feature.icon }),
|
|
172
|
+
feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label text-brand", children: feature.stat }),
|
|
173
|
+
/* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: feature.title }),
|
|
174
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: feature.description })
|
|
175
|
+
] });
|
|
176
|
+
}
|
|
169
177
|
if (variant === "icon-left") {
|
|
170
178
|
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: [
|
|
171
179
|
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 }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/card.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/feature-grid.tsx"],"names":["jsx"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,SAAS,IAAA,CAAK;AAAA,EACZ,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgC;AAC9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,2NAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAC7C,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,SAAA,CAAU,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACvE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA;AAAA,MACxD,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,MACvD,GAAG;AAAA;AAAA,GACN;AAEJ;AAYA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACzE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,EAAA,EAAI,SAAS,CAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACN;AAEJ;AChCA,IAAM,QAAA,GAAyC;AAAA,EAC7C,KAAA,EAAO,+BAAA;AAAA,EACP,KAAA,EAAO,UAAA;AAAA,EACP,aAAA,EAAe,gCAAA;AAAA,EACf,IAAA,EAAM,iBAAA;AAAA,EACN,IAAA,EAAM,iCAAA;AAAA,EACN,KAAA,EAAO,kCAAA;AAAA,EACP,KAAA,EAAO,+BAAA;AAAA,EACP,GAAA,EAAK;AACP,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,EAAA,EAAI,qBAAA;AAAA,EACJ,OAAA,EAAS,kBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,mBAAA;AAAA,EACJ,OAAA,EAAS,gBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GAA6C;AAAA,EACjD,IAAA,EAAM,aAAA;AAAA,EACN,OAAA,EAAS,gBAAA;AAAA,EACT,KAAA,EAAO,cAAA;AAAA,EACP,KAAA,EAAO,cAAA;AAAA,EACP,UAAA,EAAY,mBAAA;AAAA,EACZ,WAAA,EAAa,kBAAA;AAAA,EACb,eAAA,EAAiB,sBAAA;AAAA,EACjB,IAAA,EAAM;AACR,CAAA;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,aAAA,GAAgB,SAAA;AAAA,EAChB,OAAA,GAAU,SAAA;AAAA,EACV,OAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,kBAAkB,OAAA,KAClB,IAAA,GAAO,SAAS,MAAA,CAAA,KAChB,OAAA,GAAU,YAAY,MAAA,CAAA,IACvB,MAAA;AAEL,EAAA,uBACEA,GAAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,OAAO,CAAA;AAAA,QAClB,SAAS,KAAK,CAAA;AAAA,QACd,WAAW,eAAe,CAAA;AAAA,QAC1B;AAAA,OACF;AAAA,MAEA,0BAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,aAAa,GAAI,QAAA,EAAS;AAAA;AAAA,GACzD;AAEJ;ACpEA,IAAM,MAAA,GAAS;AAAA,EACb,CAAA,EAAG,gBAAA;AAAA,EACH,CAAA,EAAG,+BAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAEO,SAAS,iBAAA,CAAkB;AAAA,EAChC,OAAA,GAAU,UAAA;AAAA,EACV,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,KAAA,GAAQ,OAAA;AAAA,EACR;AACF,CAAA,EAA2B;AACzB,EAAA,uBACE,IAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAc,SAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,gCAAgC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBAErDA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,kBAAkB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MACxC,+BACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qCAAqC,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EAElE,CAAA;AAAA,oBAEAA,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,YAAA;AAAA,UACA,OAAA,KAAY,OAAA,GAAU,+BAAA,GAAkC,MAAA,CAAO,OAAO;AAAA,SACxE;AAAA,QAEC,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,EAAS,sBACtBA,GAAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YAEC,OAAA;AAAA,YACA,OAAA;AAAA,YACA,KAAA,EAAO;AAAA,WAAA;AAAA,UAHF,OAAA,CAAQ;AAAA,SAKhB;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,eAAA,GAAkB,OAAA,KAAY,OAAA,IAAW,OAAA,CAAQ,QAAA;AAEvD,EAAA,IAAI,YAAY,WAAA,EAAa;AAC3B,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uMAAA,EACZ,QAAA,EAAA;AAAA,MAAA,OAAA,CAAQ,wBACPA,GAAAA,CAAC,SAAI,SAAA,EAAU,4HAAA,EACZ,kBAAQ,IAAA,EACX,CAAA;AAAA,2BAED,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,wBACPA,GAAAA,CAAC,OAAE,SAAA,EAAU,8BAAA,EAAgC,kBAAQ,IAAA,EAAK,CAAA;AAAA,wBAE5DA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBAAA,EAAkB,kBAAQ,KAAA,EAAM,CAAA;AAAA,wBAC9CA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+BAAA,EAAiC,kBAAQ,WAAA,EAAY;AAAA,OAAA,EACpE;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,YAAY,UAAA,EAAY;AAC1B,IAAA,4BACG,IAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,UAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iDAAA,EACb,QAAA,EAAA,MAAA,CAAO,KAAA,GAAQ,CAAC,CAAA,CAAE,QAAA,CAAS,CAAA,EAAG,GAAG,CAAA,EACpC,CAAA;AAAA,QACC,OAAA,CAAQ,wBACPA,GAAAA,CAAC,OAAE,SAAA,EAAU,8BAAA,EAAgC,kBAAQ,IAAA,EAAK,CAAA;AAAA,wBAE5DA,GAAAA,CAAC,SAAA,EAAA,EAAW,QAAA,EAAA,OAAA,CAAQ,KAAA,EAAM;AAAA,OAAA,EAC5B,CAAA;AAAA,sBACAA,IAAC,WAAA,EAAA,EACC,QAAA,kBAAAA,IAAC,eAAA,EAAA,EAAiB,QAAA,EAAA,OAAA,CAAQ,aAAY,CAAA,EACxC;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,eAAA,IAAmB;AAAA,OACrB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,UAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,OAAA,CAAQ,wBACPA,GAAAA,CAAC,SAAI,SAAA,EAAU,8IAAA,EACZ,kBAAQ,IAAA,EACX,CAAA;AAAA,UAED,OAAA,CAAQ,wBACPA,GAAAA,CAAC,OAAE,SAAA,EAAU,8BAAA,EAAgC,kBAAQ,IAAA,EAAK,CAAA;AAAA,0BAE5DA,GAAAA,CAAC,SAAA,EAAA,EAAW,QAAA,EAAA,OAAA,CAAQ,KAAA,EAAM;AAAA,SAAA,EAC5B,CAAA;AAAA,wBACAA,IAAC,WAAA,EAAA,EACC,QAAA,kBAAAA,IAAC,eAAA,EAAA,EAAiB,QAAA,EAAA,OAAA,CAAQ,aAAY,CAAA,EACxC;AAAA;AAAA;AAAA,GACF;AAEJ","file":"feature-grid.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 * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Card({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card\"\n className={cn(\n \"group/card flex flex-col gap-4 rounded-lg border-brutal border-foreground bg-card p-5 text-card-foreground shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg\",\n className\n )}\n {...props}\n />\n );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\"flex flex-col gap-1\", className)}\n {...props}\n />\n );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn(\"text-lg font-bold leading-snug\", className)}\n {...props}\n />\n );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-action\"\n className={cn(\"self-start justify-self-end\", className)}\n {...props}\n />\n );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn(\"\", className)}\n {...props}\n />\n );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn(\n \"flex items-center border-t-brutal border-foreground pt-4\",\n className\n )}\n {...props}\n />\n );\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n};\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 {\n Card,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n} from \"../ui/card\";\nimport { BrutalSection } from \"./section\";\n\ntype FeatureGridVariant = \"icon-top\" | \"icon-left\" | \"numbered\" | \"bento\";\n\ninterface Feature {\n icon?: React.ReactNode;\n title: string;\n description: string;\n featured?: boolean;\n stat?: string;\n}\n\ninterface BrutalFeatureGridProps {\n variant?: FeatureGridVariant;\n badge?: string;\n headline: string;\n description?: string;\n features: Feature[];\n columns?: 2 | 3 | 4;\n color?: \"white\" | \"brand\" | \"brand-muted\" | \"gray\" | \"cream\";\n className?: string;\n}\n\nconst colMap = {\n 2: \"sm:grid-cols-2\",\n 3: \"sm:grid-cols-2 lg:grid-cols-3\",\n 4: \"sm:grid-cols-2 lg:grid-cols-4\",\n};\n\nexport function BrutalFeatureGrid({\n variant = \"icon-top\",\n badge,\n headline,\n description,\n features,\n columns = 3,\n color = \"white\",\n className,\n}: BrutalFeatureGridProps) {\n return (\n <BrutalSection color={color} className={className}>\n <div className=\"mb-12 max-w-2xl\">\n {badge && (\n <p className=\"brutal-label mb-4 text-brand\">{badge}</p>\n )}\n <h2 className=\"brutal-h2 mb-4\">{headline}</h2>\n {description && (\n <p className=\"brutal-body text-muted-foreground\">{description}</p>\n )}\n </div>\n\n <div\n className={cn(\n \"grid gap-6\",\n variant === \"bento\" ? \"sm:grid-cols-2 lg:grid-cols-3\" : colMap[columns],\n )}\n >\n {features.map((feature, i) => (\n <FeatureCard\n key={feature.title}\n feature={feature}\n variant={variant}\n index={i}\n />\n ))}\n </div>\n </BrutalSection>\n );\n}\n\nfunction FeatureCard({\n feature,\n variant,\n index,\n}: {\n feature: Feature;\n variant: FeatureGridVariant;\n index: number;\n}) {\n const isBentoFeatured = variant === \"bento\" && feature.featured;\n\n if (variant === \"icon-left\") {\n return (\n <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\">\n {feature.icon && (\n <div className=\"flex size-12 shrink-0 items-center justify-center border-brutal border-foreground bg-brand-muted text-2xl shadow-brutal-sm\">\n {feature.icon}\n </div>\n )}\n <div>\n {feature.stat && (\n <p className=\"brutal-label mb-1 text-brand\">{feature.stat}</p>\n )}\n <h3 className=\"brutal-h4 mb-1\">{feature.title}</h3>\n <p className=\"text-sm text-muted-foreground\">{feature.description}</p>\n </div>\n </div>\n );\n }\n\n if (variant === \"numbered\") {\n return (\n <Card>\n <CardHeader>\n <span className=\"brutal-display mb-2 block text-brand opacity-20\">\n {String(index + 1).padStart(2, \"0\")}\n </span>\n {feature.stat && (\n <p className=\"brutal-label mb-1 text-brand\">{feature.stat}</p>\n )}\n <CardTitle>{feature.title}</CardTitle>\n </CardHeader>\n <CardContent>\n <CardDescription>{feature.description}</CardDescription>\n </CardContent>\n </Card>\n );\n }\n\n return (\n <Card\n className={cn(\n isBentoFeatured && \"sm:col-span-2 bg-brand-muted\",\n )}\n >\n <CardHeader>\n {feature.icon && (\n <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\">\n {feature.icon}\n </div>\n )}\n {feature.stat && (\n <p className=\"brutal-label mb-1 text-brand\">{feature.stat}</p>\n )}\n <CardTitle>{feature.title}</CardTitle>\n </CardHeader>\n <CardContent>\n <CardDescription>{feature.description}</CardDescription>\n </CardContent>\n </Card>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/card.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/feature-grid.tsx"],"names":["jsx"],"mappings":"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","file":"feature-grid.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 * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Card({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card\"\n className={cn(\n \"group/card flex flex-col gap-4 rounded-lg border-brutal border-foreground bg-card p-5 text-card-foreground shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg\",\n className\n )}\n {...props}\n />\n );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\"flex flex-col gap-1\", className)}\n {...props}\n />\n );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn(\"text-lg font-bold leading-snug\", className)}\n {...props}\n />\n );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-action\"\n className={cn(\"self-start justify-self-end\", className)}\n {...props}\n />\n );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn(\"\", className)}\n {...props}\n />\n );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn(\n \"flex items-center border-t-brutal border-foreground pt-4\",\n className\n )}\n {...props}\n />\n );\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n};\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-muted text-foreground\",\n cream: \"bg-secondary 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 {\n Card,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n} from \"../ui/card\";\nimport { BrutalSection } from \"./section\";\n\ntype FeatureGridVariant = \"icon-top\" | \"icon-left\" | \"numbered\" | \"bento\" | \"minimal\";\n\ninterface Feature {\n icon?: React.ReactNode;\n title: string;\n description: string;\n featured?: boolean;\n stat?: string;\n}\n\ninterface BrutalFeatureGridProps {\n variant?: FeatureGridVariant;\n badge?: string;\n headline: string;\n description?: string;\n features: Feature[];\n columns?: 2 | 3 | 4;\n color?: \"white\" | \"brand\" | \"brand-muted\" | \"gray\" | \"cream\";\n className?: string;\n}\n\nconst colMap = {\n 2: \"sm:grid-cols-2\",\n 3: \"sm:grid-cols-2 lg:grid-cols-3\",\n 4: \"sm:grid-cols-2 lg:grid-cols-4\",\n};\n\nexport function BrutalFeatureGrid({\n variant = \"icon-top\",\n badge,\n headline,\n description,\n features,\n columns = 3,\n color = \"white\",\n className,\n}: BrutalFeatureGridProps) {\n return (\n <BrutalSection color={color} className={className}>\n <div className=\"mb-12 max-w-2xl\">\n {badge && (\n <p className=\"brutal-label mb-4 text-brand\">{badge}</p>\n )}\n <h2 className=\"brutal-h2 mb-4\">{headline}</h2>\n {description && (\n <p className=\"brutal-body text-muted-foreground\">{description}</p>\n )}\n </div>\n\n <div\n className={cn(\n \"grid gap-6\",\n variant === \"bento\" ? \"sm:grid-cols-2 lg:grid-cols-3\" : colMap[columns],\n )}\n >\n {features.map((feature, i) => (\n <FeatureCard\n key={feature.title}\n feature={feature}\n variant={variant}\n index={i}\n />\n ))}\n </div>\n </BrutalSection>\n );\n}\n\nfunction FeatureCard({\n feature,\n variant,\n index,\n}: {\n feature: Feature;\n variant: FeatureGridVariant;\n index: number;\n}) {\n const isBentoFeatured = variant === \"bento\" && feature.featured;\n\n if (variant === \"minimal\") {\n return (\n <div className=\"group flex flex-col gap-3 border-l-4 border-l-brand py-1 pl-5\">\n {feature.icon && (\n <div className=\"text-2xl\">{feature.icon}</div>\n )}\n {feature.stat && (\n <p className=\"brutal-label text-brand\">{feature.stat}</p>\n )}\n <h3 className=\"text-lg font-bold\">{feature.title}</h3>\n <p className=\"text-sm leading-relaxed text-muted-foreground\">{feature.description}</p>\n </div>\n );\n }\n\n if (variant === \"icon-left\") {\n return (\n <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\">\n {feature.icon && (\n <div className=\"flex size-12 shrink-0 items-center justify-center border-brutal border-foreground bg-brand-muted text-2xl shadow-brutal-sm\">\n {feature.icon}\n </div>\n )}\n <div>\n {feature.stat && (\n <p className=\"brutal-label mb-1 text-brand\">{feature.stat}</p>\n )}\n <h3 className=\"brutal-h4 mb-1\">{feature.title}</h3>\n <p className=\"text-sm text-muted-foreground\">{feature.description}</p>\n </div>\n </div>\n );\n }\n\n if (variant === \"numbered\") {\n return (\n <Card>\n <CardHeader>\n <span className=\"brutal-display mb-2 block text-brand opacity-20\">\n {String(index + 1).padStart(2, \"0\")}\n </span>\n {feature.stat && (\n <p className=\"brutal-label mb-1 text-brand\">{feature.stat}</p>\n )}\n <CardTitle>{feature.title}</CardTitle>\n </CardHeader>\n <CardContent>\n <CardDescription>{feature.description}</CardDescription>\n </CardContent>\n </Card>\n );\n }\n\n return (\n <Card\n className={cn(\n isBentoFeatured && \"sm:col-span-2 bg-brand-muted\",\n )}\n >\n <CardHeader>\n {feature.icon && (\n <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\">\n {feature.icon}\n </div>\n )}\n {feature.stat && (\n <p className=\"brutal-label mb-1 text-brand\">{feature.stat}</p>\n )}\n <CardTitle>{feature.title}</CardTitle>\n </CardHeader>\n <CardContent>\n <CardDescription>{feature.description}</CardDescription>\n </CardContent>\n </Card>\n );\n}\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { SectionColor, SectionPattern } from './section.js';
|
|
3
|
+
|
|
4
|
+
interface BrutalFeatureShowcaseProps {
|
|
5
|
+
badge?: string;
|
|
6
|
+
headline: string;
|
|
7
|
+
description: string;
|
|
8
|
+
visual: React.ReactNode;
|
|
9
|
+
features?: {
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
text: string;
|
|
12
|
+
}[];
|
|
13
|
+
reversed?: boolean;
|
|
14
|
+
color?: SectionColor;
|
|
15
|
+
pattern?: SectionPattern;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
declare function BrutalFeatureShowcase({ badge, headline, description, visual, features, reversed, color, pattern, className, }: BrutalFeatureShowcaseProps): react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
export { BrutalFeatureShowcase };
|