@snow-labs/brutal-ui 0.1.1 → 0.2.1
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/cta-section.d.ts +7 -2
- package/dist/components/brutal/cta-section.js +136 -32
- package/dist/components/brutal/cta-section.js.map +1 -1
- package/dist/components/brutal/faq.d.ts +16 -0
- package/dist/components/brutal/faq.js +163 -0
- package/dist/components/brutal/faq.js.map +1 -0
- package/dist/components/brutal/feature-grid.d.ts +6 -2
- package/dist/components/brutal/feature-grid.js +73 -10
- package/dist/components/brutal/feature-grid.js.map +1 -1
- package/dist/components/brutal/footer.d.ts +14 -1
- package/dist/components/brutal/footer.js +181 -18
- package/dist/components/brutal/footer.js.map +1 -1
- package/dist/components/brutal/hero.d.ts +9 -2
- package/dist/components/brutal/hero.js +67 -22
- package/dist/components/brutal/hero.js.map +1 -1
- package/dist/components/brutal/index.d.ts +7 -2
- package/dist/components/brutal/index.js +1035 -128
- package/dist/components/brutal/index.js.map +1 -1
- package/dist/components/brutal/integration-grid.d.ts +1 -1
- package/dist/components/brutal/integration-grid.js +13 -5
- package/dist/components/brutal/integration-grid.js.map +1 -1
- package/dist/components/brutal/logo-cloud.d.ts +17 -0
- package/dist/components/brutal/logo-cloud.js +93 -0
- package/dist/components/brutal/logo-cloud.js.map +1 -0
- package/dist/components/brutal/nav.d.ts +3 -1
- package/dist/components/brutal/nav.js +166 -9
- package/dist/components/brutal/nav.js.map +1 -1
- package/dist/components/brutal/newsletter.d.ts +14 -0
- package/dist/components/brutal/newsletter.js +169 -0
- package/dist/components/brutal/newsletter.js.map +1 -0
- package/dist/components/brutal/pricing-table.d.ts +27 -0
- package/dist/components/brutal/pricing-table.js +251 -0
- package/dist/components/brutal/pricing-table.js.map +1 -0
- package/dist/components/brutal/section-divider.d.ts +14 -0
- package/dist/components/brutal/section-divider.js +70 -0
- package/dist/components/brutal/section-divider.js.map +1 -0
- package/dist/components/brutal/section.d.ts +7 -3
- package/dist/components/brutal/section.js +13 -5
- package/dist/components/brutal/section.js.map +1 -1
- package/dist/components/brutal/stats-bar.d.ts +16 -0
- package/dist/components/brutal/stats-bar.js +127 -0
- package/dist/components/brutal/stats-bar.js.map +1 -0
- package/dist/components/brutal/testimonials.d.ts +11 -3
- package/dist/components/brutal/testimonials.js +126 -33
- package/dist/components/brutal/testimonials.js.map +1 -1
- package/dist/components/brutal/wave-divider.d.ts +2 -12
- package/dist/components/brutal/wave-divider.js +54 -26
- package/dist/components/brutal/wave-divider.js.map +1 -1
- package/dist/components/dashboard/activity-feed.d.ts +18 -0
- package/dist/components/dashboard/activity-feed.js +105 -0
- package/dist/components/dashboard/activity-feed.js.map +1 -0
- package/dist/components/dashboard/app-shell.d.ts +19 -0
- package/dist/components/dashboard/app-shell.js +206 -0
- package/dist/components/dashboard/app-shell.js.map +1 -0
- package/dist/components/dashboard/empty-state.d.ts +14 -0
- package/dist/components/dashboard/empty-state.js +96 -0
- package/dist/components/dashboard/empty-state.js.map +1 -0
- package/dist/components/dashboard/file-upload.d.ts +12 -0
- package/dist/components/dashboard/file-upload.js +86 -0
- package/dist/components/dashboard/file-upload.js.map +1 -0
- package/dist/components/dashboard/index.d.ts +10 -0
- package/dist/components/dashboard/index.js +755 -0
- package/dist/components/dashboard/index.js.map +1 -0
- package/dist/components/dashboard/search-bar.d.ts +12 -0
- package/dist/components/dashboard/search-bar.js +49 -0
- package/dist/components/dashboard/search-bar.js.map +1 -0
- package/dist/components/dashboard/sidebar.d.ts +23 -0
- package/dist/components/dashboard/sidebar.js +113 -0
- package/dist/components/dashboard/sidebar.js.map +1 -0
- package/dist/components/dashboard/stat-card.d.ts +13 -0
- package/dist/components/dashboard/stat-card.js +55 -0
- package/dist/components/dashboard/stat-card.js.map +1 -0
- package/dist/components/dashboard/user-menu.d.ts +16 -0
- package/dist/components/dashboard/user-menu.js +179 -0
- package/dist/components/dashboard/user-menu.js.map +1 -0
- package/dist/components/dashboard/view-switcher.d.ts +12 -0
- package/dist/components/dashboard/view-switcher.js +130 -0
- package/dist/components/dashboard/view-switcher.js.map +1 -0
- package/dist/components/views/calendar-view.d.ts +17 -0
- package/dist/components/views/calendar-view.js +182 -0
- package/dist/components/views/calendar-view.js.map +1 -0
- package/dist/components/views/data-table.d.ts +15 -0
- package/dist/components/views/data-table.js +204 -0
- package/dist/components/views/data-table.js.map +1 -0
- package/dist/components/views/grid-view.d.ts +11 -0
- package/dist/components/views/grid-view.js +31 -0
- package/dist/components/views/grid-view.js.map +1 -0
- package/dist/components/views/index.d.ts +7 -0
- package/dist/components/views/index.js +542 -0
- package/dist/components/views/index.js.map +1 -0
- package/dist/components/views/kanban-board.d.ts +21 -0
- package/dist/components/views/kanban-board.js +153 -0
- package/dist/components/views/kanban-board.js.map +1 -0
- package/dist/components/views/list-view.d.ts +19 -0
- package/dist/components/views/list-view.js +96 -0
- package/dist/components/views/list-view.js.map +1 -0
- package/dist/index.d.ts +27 -3
- package/dist/index.js +1881 -142
- package/dist/index.js.map +1 -1
- package/dist/lib/animations.d.ts +68 -0
- package/dist/lib/animations.js +44 -0
- package/dist/lib/animations.js.map +1 -0
- package/dist/templates/dashboard.d.ts +40 -0
- package/dist/templates/dashboard.js +658 -0
- package/dist/templates/dashboard.js.map +1 -0
- package/dist/templates/index.d.ts +4 -0
- package/dist/templates/index.js +2001 -0
- package/dist/templates/index.js.map +1 -0
- package/dist/templates/saas-launch.d.ts +113 -0
- package/dist/templates/saas-launch.js +1394 -0
- package/dist/templates/saas-launch.js.map +1 -0
- package/dist/templates/studio.d.ts +72 -0
- package/dist/templates/studio.js +1099 -0
- package/dist/templates/studio.js.map +1 -0
- package/dist/theme.css +58 -15
- package/package.json +48 -2
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { SectionColor, SectionPattern } from './section.js';
|
|
2
3
|
|
|
3
4
|
interface BrutalCTAProps {
|
|
4
5
|
headline: string;
|
|
@@ -8,9 +9,13 @@ interface BrutalCTAProps {
|
|
|
8
9
|
ctaVariant?: "cta" | "brand" | "default" | "outline";
|
|
9
10
|
secondaryText?: string;
|
|
10
11
|
secondaryHref?: string;
|
|
11
|
-
color?:
|
|
12
|
+
color?: SectionColor;
|
|
13
|
+
pattern?: SectionPattern;
|
|
12
14
|
className?: string;
|
|
15
|
+
variant?: "centered" | "split" | "with-visual" | "floating-card";
|
|
16
|
+
visual?: React.ReactNode;
|
|
17
|
+
stats?: string;
|
|
13
18
|
}
|
|
14
|
-
declare function BrutalCTA({
|
|
19
|
+
declare function BrutalCTA({ variant, color, className, pattern, ...props }: BrutalCTAProps): react_jsx_runtime.JSX.Element;
|
|
15
20
|
|
|
16
21
|
export { BrutalCTA };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { Button as Button$1 } from '@base-ui/react/button';
|
|
3
|
-
import { cva } from 'class-variance-authority';
|
|
4
2
|
import { clsx } from 'clsx';
|
|
5
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { Button as Button$1 } from '@base-ui/react/button';
|
|
5
|
+
import { cva } from 'class-variance-authority';
|
|
6
6
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
|
-
// src/
|
|
8
|
+
// src/lib/utils.ts
|
|
9
9
|
function cn(...inputs) {
|
|
10
10
|
return twMerge(clsx(inputs));
|
|
11
11
|
}
|
|
@@ -69,9 +69,6 @@ var colorMap = {
|
|
|
69
69
|
white: "bg-background text-foreground",
|
|
70
70
|
brand: "bg-brand",
|
|
71
71
|
"brand-muted": "bg-brand-muted text-foreground",
|
|
72
|
-
blue: "bg-section-blue",
|
|
73
|
-
gray: "bg-section-gray text-foreground",
|
|
74
|
-
cream: "bg-section-cream text-foreground",
|
|
75
72
|
black: "bg-foreground text-background",
|
|
76
73
|
cta: "bg-cta"
|
|
77
74
|
};
|
|
@@ -85,16 +82,28 @@ var paddingMap = {
|
|
|
85
82
|
default: "brutal-section",
|
|
86
83
|
lg: "brutal-section py-28 sm:py-36 md:py-44"
|
|
87
84
|
};
|
|
85
|
+
var patternMap = {
|
|
86
|
+
dots: "brutal-dots",
|
|
87
|
+
stripes: "brutal-stripes",
|
|
88
|
+
noise: "brutal-noise",
|
|
89
|
+
grain: "brutal-grain",
|
|
90
|
+
crosshatch: "brutal-crosshatch",
|
|
91
|
+
"grid-dots": "brutal-grid-dots",
|
|
92
|
+
"gradient-mesh": "brutal-gradient-mesh",
|
|
93
|
+
none: ""
|
|
94
|
+
};
|
|
88
95
|
function BrutalSection({
|
|
89
96
|
children,
|
|
90
97
|
color = "white",
|
|
91
98
|
className,
|
|
92
99
|
containerSize = "default",
|
|
93
100
|
padding = "default",
|
|
101
|
+
pattern,
|
|
94
102
|
dots = false,
|
|
95
103
|
stripes = false,
|
|
96
104
|
id
|
|
97
105
|
}) {
|
|
106
|
+
const resolvedPattern = pattern ?? (dots ? "dots" : void 0) ?? (stripes ? "stripes" : void 0) ?? "none";
|
|
98
107
|
return /* @__PURE__ */ jsx(
|
|
99
108
|
"section",
|
|
100
109
|
{
|
|
@@ -102,50 +111,145 @@ function BrutalSection({
|
|
|
102
111
|
className: cn(
|
|
103
112
|
paddingMap[padding],
|
|
104
113
|
colorMap[color],
|
|
105
|
-
|
|
106
|
-
stripes && "brutal-stripes",
|
|
114
|
+
patternMap[resolvedPattern],
|
|
107
115
|
className
|
|
108
116
|
),
|
|
109
117
|
children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })
|
|
110
118
|
}
|
|
111
119
|
);
|
|
112
120
|
}
|
|
113
|
-
function
|
|
114
|
-
headline,
|
|
115
|
-
description,
|
|
121
|
+
function CTAButtons({
|
|
116
122
|
ctaText,
|
|
117
123
|
ctaHref = "#",
|
|
118
124
|
ctaVariant = "cta",
|
|
119
125
|
secondaryText,
|
|
120
|
-
secondaryHref
|
|
121
|
-
color = "black",
|
|
122
|
-
className
|
|
126
|
+
secondaryHref
|
|
123
127
|
}) {
|
|
124
|
-
return /* @__PURE__ */
|
|
125
|
-
/* @__PURE__ */ jsx(
|
|
126
|
-
|
|
127
|
-
|
|
128
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-center", children: [
|
|
129
|
+
/* @__PURE__ */ jsx(
|
|
130
|
+
Button,
|
|
131
|
+
{
|
|
132
|
+
variant: ctaVariant,
|
|
133
|
+
size: "xl",
|
|
134
|
+
className: "w-full sm:w-auto",
|
|
135
|
+
render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
|
|
136
|
+
children: ctaText
|
|
137
|
+
}
|
|
138
|
+
),
|
|
139
|
+
secondaryText && /* @__PURE__ */ jsx(
|
|
140
|
+
Button,
|
|
141
|
+
{
|
|
142
|
+
variant: "outline",
|
|
143
|
+
size: "xl",
|
|
144
|
+
className: "w-full sm:w-auto",
|
|
145
|
+
render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
|
|
146
|
+
children: secondaryText
|
|
147
|
+
}
|
|
148
|
+
)
|
|
149
|
+
] });
|
|
150
|
+
}
|
|
151
|
+
function CenteredCTA(props) {
|
|
152
|
+
return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
|
|
153
|
+
/* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: props.headline }),
|
|
154
|
+
props.description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-4 opacity-80", children: props.description }),
|
|
155
|
+
props.stats && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-8 opacity-60", children: props.stats }),
|
|
156
|
+
/* @__PURE__ */ jsx(
|
|
157
|
+
CTAButtons,
|
|
158
|
+
{
|
|
159
|
+
ctaText: props.ctaText,
|
|
160
|
+
ctaHref: props.ctaHref,
|
|
161
|
+
ctaVariant: props.ctaVariant,
|
|
162
|
+
secondaryText: props.secondaryText,
|
|
163
|
+
secondaryHref: props.secondaryHref
|
|
164
|
+
}
|
|
165
|
+
)
|
|
166
|
+
] });
|
|
167
|
+
}
|
|
168
|
+
function SplitCTA(props) {
|
|
169
|
+
return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
|
|
170
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
171
|
+
/* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: props.headline }),
|
|
172
|
+
props.description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-4 opacity-80", children: props.description }),
|
|
173
|
+
props.stats && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-8 opacity-60", children: props.stats }),
|
|
174
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:flex-wrap", children: [
|
|
175
|
+
/* @__PURE__ */ jsx(
|
|
176
|
+
Button,
|
|
177
|
+
{
|
|
178
|
+
variant: props.ctaVariant || "cta",
|
|
179
|
+
size: "xl",
|
|
180
|
+
className: "w-full sm:w-auto",
|
|
181
|
+
render: /* @__PURE__ */ jsx("a", { href: props.ctaHref || "#" }),
|
|
182
|
+
children: props.ctaText
|
|
183
|
+
}
|
|
184
|
+
),
|
|
185
|
+
props.secondaryText && /* @__PURE__ */ jsx(
|
|
186
|
+
Button,
|
|
187
|
+
{
|
|
188
|
+
variant: "outline",
|
|
189
|
+
size: "xl",
|
|
190
|
+
className: "w-full sm:w-auto",
|
|
191
|
+
render: /* @__PURE__ */ jsx("a", { href: props.secondaryHref || "#" }),
|
|
192
|
+
children: props.secondaryText
|
|
193
|
+
}
|
|
194
|
+
)
|
|
195
|
+
] })
|
|
196
|
+
] }),
|
|
197
|
+
props.visual && /* @__PURE__ */ jsx("div", { children: props.visual })
|
|
198
|
+
] });
|
|
199
|
+
}
|
|
200
|
+
function WithVisualCTA(props) {
|
|
201
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
202
|
+
props.visual && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-10", children: props.visual }),
|
|
203
|
+
/* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-2xl text-center", children: [
|
|
204
|
+
/* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: props.headline }),
|
|
205
|
+
props.description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-4 opacity-80", children: props.description }),
|
|
206
|
+
props.stats && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-8 opacity-60", children: props.stats }),
|
|
128
207
|
/* @__PURE__ */ jsx(
|
|
129
|
-
|
|
208
|
+
CTAButtons,
|
|
130
209
|
{
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
),
|
|
137
|
-
secondaryText && /* @__PURE__ */ jsx(
|
|
138
|
-
Button,
|
|
139
|
-
{
|
|
140
|
-
variant: "outline",
|
|
141
|
-
size: "lg",
|
|
142
|
-
render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
|
|
143
|
-
children: secondaryText
|
|
210
|
+
ctaText: props.ctaText,
|
|
211
|
+
ctaHref: props.ctaHref,
|
|
212
|
+
ctaVariant: props.ctaVariant,
|
|
213
|
+
secondaryText: props.secondaryText,
|
|
214
|
+
secondaryHref: props.secondaryHref
|
|
144
215
|
}
|
|
145
216
|
)
|
|
146
217
|
] })
|
|
218
|
+
] });
|
|
219
|
+
}
|
|
220
|
+
function FloatingCardCTA(props) {
|
|
221
|
+
return /* @__PURE__ */ jsx("div", { className: "relative z-10 -mt-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl border-brutal border-foreground bg-background p-8 text-center text-foreground shadow-brutal-lg", children: [
|
|
222
|
+
/* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: props.headline }),
|
|
223
|
+
props.description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-4 opacity-80", children: props.description }),
|
|
224
|
+
props.stats && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-8 opacity-60", children: props.stats }),
|
|
225
|
+
/* @__PURE__ */ jsx(
|
|
226
|
+
CTAButtons,
|
|
227
|
+
{
|
|
228
|
+
ctaText: props.ctaText,
|
|
229
|
+
ctaHref: props.ctaHref,
|
|
230
|
+
ctaVariant: props.ctaVariant,
|
|
231
|
+
secondaryText: props.secondaryText,
|
|
232
|
+
secondaryHref: props.secondaryHref
|
|
233
|
+
}
|
|
234
|
+
)
|
|
147
235
|
] }) });
|
|
148
236
|
}
|
|
237
|
+
function BrutalCTA({
|
|
238
|
+
variant = "centered",
|
|
239
|
+
color = "black",
|
|
240
|
+
className,
|
|
241
|
+
pattern,
|
|
242
|
+
...props
|
|
243
|
+
}) {
|
|
244
|
+
if (variant === "floating-card") {
|
|
245
|
+
return /* @__PURE__ */ jsx("div", { className: cn("brutal-container px-6", className), children: /* @__PURE__ */ jsx(FloatingCardCTA, { ...props, variant, color }) });
|
|
246
|
+
}
|
|
247
|
+
return /* @__PURE__ */ jsxs(BrutalSection, { color, pattern, className, children: [
|
|
248
|
+
variant === "centered" && /* @__PURE__ */ jsx(CenteredCTA, { ...props, variant, color }),
|
|
249
|
+
variant === "split" && /* @__PURE__ */ jsx(SplitCTA, { ...props, variant, color }),
|
|
250
|
+
variant === "with-visual" && /* @__PURE__ */ jsx(WithVisualCTA, { ...props, variant, color })
|
|
251
|
+
] });
|
|
252
|
+
}
|
|
149
253
|
|
|
150
254
|
export { BrutalCTA };
|
|
151
255
|
//# sourceMappingURL=cta-section.js.map
|
|
@@ -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\ntype SectionColor =\n | \"white\"\n | \"brand\"\n | \"brand-muted\"\n | \"blue\"\n | \"gray\"\n | \"cream\"\n | \"black\"\n | \"cta\";\n\ninterface BrutalSectionProps {\n children: React.ReactNode;\n color?: SectionColor;\n className?: string;\n containerSize?: \"sm\" | \"default\" | \"lg\";\n padding?: \"sm\" | \"default\" | \"lg\";\n dots?: boolean;\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\nexport function BrutalSection({\n children,\n color = \"white\",\n className,\n containerSize = \"default\",\n padding = \"default\",\n dots = false,\n stripes = false,\n id,\n}: BrutalSectionProps) {\n return (\n <section\n id={id}\n className={cn(\n paddingMap[padding],\n colorMap[color],\n dots && \"brutal-dots\",\n stripes && \"brutal-stripes\",\n className\n )}\n >\n <div className={containerMap[containerSize]}>{children}</div>\n </section>\n );\n}\n","import { Button } from \"../ui/button\";\nimport { BrutalSection } 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?: \"black\" | \"brand\" | \"blue\" | \"white\";\n className?: string;\n}\n\nexport function BrutalCTA({\n headline,\n description,\n ctaText,\n ctaHref = \"#\",\n ctaVariant = \"cta\",\n secondaryText,\n secondaryHref,\n color = \"black\",\n className,\n}: BrutalCTAProps) {\n return (\n <BrutalSection color={color} className={className}>\n <div className=\"mx-auto max-w-2xl text-center\">\n <h2 className=\"brutal-h1 mb-6\">{headline}</h2>\n {description && (\n <p className=\"brutal-body mb-8 opacity-80\">{description}</p>\n )}\n <div className=\"flex flex-wrap items-center justify-center gap-4\">\n <Button\n variant={ctaVariant}\n size=\"xl\"\n render={<a href={ctaHref} />}\n >\n {ctaText}\n </Button>\n {secondaryText && (\n <Button\n variant=\"outline\"\n size=\"lg\"\n render={<a href={secondaryHref || \"#\"} />}\n >\n {secondaryText}\n </Button>\n )}\n </div>\n </div>\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 | \"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 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-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-center\">\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-4 sm:flex-row sm:flex-wrap\">\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"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
interface FAQItem {
|
|
4
|
+
question: string;
|
|
5
|
+
answer: string;
|
|
6
|
+
}
|
|
7
|
+
interface FAQProps {
|
|
8
|
+
badge?: string;
|
|
9
|
+
headline?: string;
|
|
10
|
+
items: FAQItem[];
|
|
11
|
+
color?: "white" | "black";
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
declare function FAQ({ badge, headline, items, color, className, }: FAQProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
|
|
16
|
+
export { FAQ };
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
|
|
5
|
+
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
|
|
6
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
// src/lib/utils.ts
|
|
9
|
+
function cn(...inputs) {
|
|
10
|
+
return twMerge(clsx(inputs));
|
|
11
|
+
}
|
|
12
|
+
function Accordion({ className, ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx(
|
|
14
|
+
Accordion$1.Root,
|
|
15
|
+
{
|
|
16
|
+
"data-slot": "accordion",
|
|
17
|
+
className: cn("flex w-full flex-col", className),
|
|
18
|
+
...props
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
function AccordionItem({ className, ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
Accordion$1.Item,
|
|
25
|
+
{
|
|
26
|
+
"data-slot": "accordion-item",
|
|
27
|
+
className: cn("border-brutal border-foreground rounded-lg mb-2 px-3", className),
|
|
28
|
+
...props
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
function AccordionTrigger({
|
|
33
|
+
className,
|
|
34
|
+
children,
|
|
35
|
+
...props
|
|
36
|
+
}) {
|
|
37
|
+
return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
|
|
38
|
+
Accordion$1.Trigger,
|
|
39
|
+
{
|
|
40
|
+
"data-slot": "accordion-trigger",
|
|
41
|
+
className: cn(
|
|
42
|
+
"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",
|
|
43
|
+
className
|
|
44
|
+
),
|
|
45
|
+
...props,
|
|
46
|
+
children: [
|
|
47
|
+
children,
|
|
48
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }),
|
|
49
|
+
/* @__PURE__ */ jsx(ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
) });
|
|
53
|
+
}
|
|
54
|
+
function AccordionContent({
|
|
55
|
+
className,
|
|
56
|
+
children,
|
|
57
|
+
...props
|
|
58
|
+
}) {
|
|
59
|
+
return /* @__PURE__ */ jsx(
|
|
60
|
+
Accordion$1.Panel,
|
|
61
|
+
{
|
|
62
|
+
"data-slot": "accordion-content",
|
|
63
|
+
className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
|
|
64
|
+
...props,
|
|
65
|
+
children: /* @__PURE__ */ jsx(
|
|
66
|
+
"div",
|
|
67
|
+
{
|
|
68
|
+
className: cn(
|
|
69
|
+
"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",
|
|
70
|
+
className
|
|
71
|
+
),
|
|
72
|
+
children
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
var colorMap = {
|
|
79
|
+
white: "bg-background text-foreground",
|
|
80
|
+
brand: "bg-brand",
|
|
81
|
+
"brand-muted": "bg-brand-muted text-foreground",
|
|
82
|
+
black: "bg-foreground text-background",
|
|
83
|
+
cta: "bg-cta"
|
|
84
|
+
};
|
|
85
|
+
var containerMap = {
|
|
86
|
+
sm: "brutal-container-sm",
|
|
87
|
+
default: "brutal-container",
|
|
88
|
+
lg: "brutal-container-lg"
|
|
89
|
+
};
|
|
90
|
+
var paddingMap = {
|
|
91
|
+
sm: "brutal-section-sm",
|
|
92
|
+
default: "brutal-section",
|
|
93
|
+
lg: "brutal-section py-28 sm:py-36 md:py-44"
|
|
94
|
+
};
|
|
95
|
+
var patternMap = {
|
|
96
|
+
dots: "brutal-dots",
|
|
97
|
+
stripes: "brutal-stripes",
|
|
98
|
+
noise: "brutal-noise",
|
|
99
|
+
grain: "brutal-grain",
|
|
100
|
+
crosshatch: "brutal-crosshatch",
|
|
101
|
+
"grid-dots": "brutal-grid-dots",
|
|
102
|
+
"gradient-mesh": "brutal-gradient-mesh",
|
|
103
|
+
none: ""
|
|
104
|
+
};
|
|
105
|
+
function BrutalSection({
|
|
106
|
+
children,
|
|
107
|
+
color = "white",
|
|
108
|
+
className,
|
|
109
|
+
containerSize = "default",
|
|
110
|
+
padding = "default",
|
|
111
|
+
pattern,
|
|
112
|
+
dots = false,
|
|
113
|
+
stripes = false,
|
|
114
|
+
id
|
|
115
|
+
}) {
|
|
116
|
+
const resolvedPattern = pattern ?? (dots ? "dots" : void 0) ?? (stripes ? "stripes" : void 0) ?? "none";
|
|
117
|
+
return /* @__PURE__ */ jsx(
|
|
118
|
+
"section",
|
|
119
|
+
{
|
|
120
|
+
id,
|
|
121
|
+
className: cn(
|
|
122
|
+
paddingMap[padding],
|
|
123
|
+
colorMap[color],
|
|
124
|
+
patternMap[resolvedPattern],
|
|
125
|
+
className
|
|
126
|
+
),
|
|
127
|
+
children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
function FAQ({
|
|
132
|
+
badge,
|
|
133
|
+
headline,
|
|
134
|
+
items,
|
|
135
|
+
color = "white",
|
|
136
|
+
className
|
|
137
|
+
}) {
|
|
138
|
+
return /* @__PURE__ */ jsxs(BrutalSection, { color, className, children: [
|
|
139
|
+
(headline || badge) && /* @__PURE__ */ jsxs("div", { className: "mb-10 mx-auto max-w-2xl", children: [
|
|
140
|
+
badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-brand", children: badge }),
|
|
141
|
+
headline && /* @__PURE__ */ jsx("h2", { className: "brutal-h2", children: headline })
|
|
142
|
+
] }),
|
|
143
|
+
/* @__PURE__ */ jsx(Accordion, { className: "mx-auto max-w-2xl", children: items.map((item, i) => /* @__PURE__ */ jsxs(
|
|
144
|
+
AccordionItem,
|
|
145
|
+
{
|
|
146
|
+
value: `faq-${i}`,
|
|
147
|
+
className: cn(
|
|
148
|
+
"border-brutal border-foreground mb-3 px-5",
|
|
149
|
+
i % 2 === 0 ? "bg-background" : "bg-secondary"
|
|
150
|
+
),
|
|
151
|
+
children: [
|
|
152
|
+
/* @__PURE__ */ jsx(AccordionTrigger, { className: "brutal-h4 py-4 text-left", children: item.question }),
|
|
153
|
+
/* @__PURE__ */ jsx(AccordionContent, { className: "brutal-body pb-4 text-muted-foreground", children: item.answer })
|
|
154
|
+
]
|
|
155
|
+
},
|
|
156
|
+
i
|
|
157
|
+
)) })
|
|
158
|
+
] });
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
export { FAQ };
|
|
162
|
+
//# sourceMappingURL=faq.js.map
|
|
163
|
+
//# sourceMappingURL=faq.js.map
|
|
@@ -0,0 +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 | \"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 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\" | \"black\";\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,19 +1,23 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
+
type FeatureGridVariant = "icon-top" | "icon-left" | "numbered" | "bento";
|
|
3
4
|
interface Feature {
|
|
4
5
|
icon?: React.ReactNode;
|
|
5
6
|
title: string;
|
|
6
7
|
description: string;
|
|
8
|
+
featured?: boolean;
|
|
9
|
+
stat?: string;
|
|
7
10
|
}
|
|
8
11
|
interface BrutalFeatureGridProps {
|
|
12
|
+
variant?: FeatureGridVariant;
|
|
9
13
|
badge?: string;
|
|
10
14
|
headline: string;
|
|
11
15
|
description?: string;
|
|
12
16
|
features: Feature[];
|
|
13
17
|
columns?: 2 | 3 | 4;
|
|
14
|
-
color?: "white" | "brand" | "brand-muted" | "
|
|
18
|
+
color?: "white" | "brand" | "brand-muted" | "black";
|
|
15
19
|
className?: string;
|
|
16
20
|
}
|
|
17
|
-
declare function BrutalFeatureGrid({ badge, headline, description, features, columns, color, className, }: BrutalFeatureGridProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
declare function BrutalFeatureGrid({ variant, badge, headline, description, features, columns, color, className, }: BrutalFeatureGridProps): react_jsx_runtime.JSX.Element;
|
|
18
22
|
|
|
19
23
|
export { BrutalFeatureGrid };
|