@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/ui/badge.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/pricing-table.tsx"],"names":["ButtonPrimitive","cva","jsx"],"mappings":"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","file":"pricing-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","\"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 { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst badgeVariants = cva(\n \"group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-md whitespace-nowrap font-bold transition-all [&>svg]:pointer-events-none [&>svg]:size-3!\",\n {\n variants: {\n variant: {\n default:\n \"border-brutal border-foreground bg-primary px-3 py-1 text-xs text-primary-foreground shadow-brutal-sm\",\n secondary:\n \"border-brutal border-foreground bg-secondary px-3 py-1 text-xs text-secondary-foreground shadow-brutal-sm\",\n brand:\n \"border-brutal border-foreground bg-brand px-3 py-1 text-xs text-brand-foreground shadow-brutal-sm\",\n cta: \"border-brutal border-foreground bg-cta px-3 py-1 text-xs text-cta-foreground shadow-brutal-sm\",\n outline:\n \"border-brutal border-foreground bg-background px-3 py-1 text-xs text-foreground\",\n destructive:\n \"border-brutal border-destructive bg-destructive/10 px-3 py-1 text-xs text-destructive\",\n ghost: \"px-2 py-0.5 text-xs text-muted-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ variant }), className),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n });\n}\n\nexport { Badge, badgeVariants };\n","import { cn } from \"../../lib/utils\";\n\nexport type SectionColor =\n | \"white\"\n | \"brand\"\n | \"brand-muted\"\n | \"blue\"\n | \"gray\"\n | \"cream\"\n | \"black\"\n | \"cta\";\n\nexport type SectionPattern =\n | \"dots\"\n | \"stripes\"\n | \"noise\"\n | \"grain\"\n | \"crosshatch\"\n | \"grid-dots\"\n | \"gradient-mesh\"\n | \"none\";\n\ninterface BrutalSectionProps {\n children: React.ReactNode;\n color?: SectionColor;\n className?: string;\n containerSize?: \"sm\" | \"default\" | \"lg\";\n padding?: \"sm\" | \"default\" | \"lg\";\n pattern?: SectionPattern;\n /** @deprecated Use pattern=\"dots\" instead */\n dots?: boolean;\n /** @deprecated Use pattern=\"stripes\" instead */\n stripes?: boolean;\n id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n white: \"bg-background text-foreground\",\n brand: \"bg-brand\",\n \"brand-muted\": \"bg-brand-muted text-foreground\",\n blue: \"bg-section-blue\",\n gray: \"bg-section-gray text-foreground\",\n cream: \"bg-section-cream text-foreground\",\n black: \"bg-foreground text-background\",\n cta: \"bg-cta\",\n};\n\nconst containerMap = {\n sm: \"brutal-container-sm\",\n default: \"brutal-container\",\n lg: \"brutal-container-lg\",\n};\n\nconst paddingMap = {\n sm: \"brutal-section-sm\",\n default: \"brutal-section\",\n lg: \"brutal-section py-28 sm:py-36 md:py-44\",\n};\n\nconst patternMap: Record<SectionPattern, string> = {\n dots: \"brutal-dots\",\n stripes: \"brutal-stripes\",\n noise: \"brutal-noise\",\n grain: \"brutal-grain\",\n crosshatch: \"brutal-crosshatch\",\n \"grid-dots\": \"brutal-grid-dots\",\n \"gradient-mesh\": \"brutal-gradient-mesh\",\n none: \"\",\n};\n\nexport function BrutalSection({\n children,\n color = \"white\",\n className,\n containerSize = \"default\",\n padding = \"default\",\n pattern,\n dots = false,\n stripes = false,\n id,\n}: BrutalSectionProps) {\n const resolvedPattern = pattern\n ?? (dots ? \"dots\" : undefined)\n ?? (stripes ? \"stripes\" : undefined)\n ?? \"none\";\n\n return (\n <section\n id={id}\n className={cn(\n paddingMap[padding],\n colorMap[color],\n patternMap[resolvedPattern],\n className\n )}\n >\n <div className={containerMap[containerSize]}>{children}</div>\n </section>\n );\n}\n","\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport { Badge } from \"../ui/badge\";\nimport { BrutalSection } from \"./section\";\nimport { useState } from \"react\";\n\ninterface PricingTier {\n name: string;\n description?: string;\n price: { monthly: number | string; annual: number | string };\n features: string[];\n ctaText: string;\n ctaHref?: string;\n ctaVariant?: \"cta\" | \"brand\" | \"default\" | \"outline\";\n}\n\ninterface PricingTableProps {\n badge?: string;\n headline?: string;\n description?: string;\n tiers: PricingTier[];\n popularIndex?: number;\n billingToggle?: boolean;\n color?: \"white\" | \"gray\" | \"cream\";\n className?: string;\n}\n\nexport function PricingTable({\n badge,\n headline,\n description,\n tiers,\n popularIndex,\n billingToggle = true,\n color = \"white\",\n className,\n}: PricingTableProps) {\n const [annual, setAnnual] = useState(false);\n\n return (\n <BrutalSection color={color} className={className}>\n {(headline || badge) && (\n <div className=\"mb-8 text-center\">\n {badge && <p className=\"brutal-label mb-4 text-muted-foreground\">{badge}</p>}\n {headline && <h2 className=\"brutal-h2 mb-4\">{headline}</h2>}\n {description && <p className=\"brutal-body mx-auto max-w-lg text-muted-foreground\">{description}</p>}\n </div>\n )}\n\n {billingToggle && (\n <div className=\"mb-10 flex items-center justify-center gap-3\">\n <span className={cn(\"text-sm font-bold\", !annual && \"text-brand\")}>Monthly</span>\n <button\n onClick={() => setAnnual(!annual)}\n className={cn(\n \"relative h-8 w-14 border-brutal border-foreground transition-colors\",\n annual ? \"bg-brand\" : \"bg-secondary\",\n )}\n >\n <span\n className={cn(\n \"absolute top-1 size-6 border border-foreground bg-background transition-transform\",\n annual ? \"left-7\" : \"left-1\",\n )}\n />\n </button>\n <span className={cn(\"text-sm font-bold\", annual && \"text-brand\")}>Annual</span>\n {annual && <Badge variant=\"cta\">Save 20%</Badge>}\n </div>\n )}\n\n <div className={cn(\n \"grid gap-6\",\n tiers.length === 2 && \"mx-auto max-w-2xl sm:grid-cols-2\",\n tiers.length === 3 && \"lg:grid-cols-3\",\n tiers.length >= 4 && \"sm:grid-cols-2 lg:grid-cols-4\",\n )}>\n {tiers.map((tier, i) => {\n const isPopular = i === popularIndex;\n const price = annual ? tier.price.annual : tier.price.monthly;\n\n return (\n <div\n key={tier.name}\n className={cn(\n \"relative flex flex-col border-brutal border-foreground bg-background p-6 shadow-brutal\",\n isPopular && \"border-brand shadow-brutal-lg ring-2 ring-brand z-10 scale-105\",\n )}\n >\n {isPopular && (\n <Badge variant=\"brand\" className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n Popular\n </Badge>\n )}\n <h3 className=\"brutal-h4 mb-1\">{tier.name}</h3>\n {tier.description && <p className=\"mb-4 text-sm text-muted-foreground\">{tier.description}</p>}\n <div className=\"mb-6\">\n <span className=\"brutal-h1\">{typeof price === \"number\" ? `$${price}` : price}</span>\n {typeof price === \"number\" && <span className=\"text-sm text-muted-foreground\">/mo</span>}\n </div>\n <ul className=\"mb-8 flex flex-1 flex-col gap-2\">\n {tier.features.map((feature) => (\n <li key={feature} className=\"flex items-start gap-2 text-sm\">\n <span className=\"mt-0.5 text-brand\">✓</span>\n {feature}\n </li>\n ))}\n </ul>\n <Button\n variant={tier.ctaVariant || (isPopular ? \"cta\" : \"outline\")}\n size=\"lg\"\n className=\"w-full\"\n render={tier.ctaHref ? <a href={tier.ctaHref} /> : undefined}\n >\n {tier.ctaText}\n </Button>\n </div>\n );\n })}\n </div>\n </BrutalSection>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/ui/badge.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/pricing-table.tsx"],"names":["ButtonPrimitive","cva","jsx"],"mappings":"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","file":"pricing-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","\"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 { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst badgeVariants = cva(\n \"group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-md whitespace-nowrap font-bold transition-all [&>svg]:pointer-events-none [&>svg]:size-3!\",\n {\n variants: {\n variant: {\n default:\n \"border-brutal border-foreground bg-primary px-3 py-1 text-xs text-primary-foreground shadow-brutal-sm\",\n secondary:\n \"border-brutal border-foreground bg-secondary px-3 py-1 text-xs text-secondary-foreground shadow-brutal-sm\",\n brand:\n \"border-brutal border-foreground bg-brand px-3 py-1 text-xs text-brand-foreground shadow-brutal-sm\",\n cta: \"border-brutal border-foreground bg-cta px-3 py-1 text-xs text-cta-foreground shadow-brutal-sm\",\n outline:\n \"border-brutal border-foreground bg-background px-3 py-1 text-xs text-foreground\",\n destructive:\n \"border-brutal border-destructive bg-destructive/10 px-3 py-1 text-xs text-destructive\",\n ghost: \"px-2 py-0.5 text-xs text-muted-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ variant }), className),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n });\n}\n\nexport { Badge, badgeVariants };\n","import { cn } from \"../../lib/utils\";\n\nexport type SectionColor =\n | \"white\"\n | \"brand\"\n | \"brand-muted\"\n | \"blue\"\n | \"gray\"\n | \"cream\"\n | \"black\"\n | \"cta\";\n\nexport type SectionPattern =\n | \"dots\"\n | \"stripes\"\n | \"noise\"\n | \"grain\"\n | \"crosshatch\"\n | \"grid-dots\"\n | \"gradient-mesh\"\n | \"none\";\n\ninterface BrutalSectionProps {\n children: React.ReactNode;\n color?: SectionColor;\n className?: string;\n containerSize?: \"sm\" | \"default\" | \"lg\";\n padding?: \"sm\" | \"default\" | \"lg\";\n pattern?: SectionPattern;\n /** @deprecated Use pattern=\"dots\" instead */\n dots?: boolean;\n /** @deprecated Use pattern=\"stripes\" instead */\n stripes?: boolean;\n id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n white: \"bg-background text-foreground\",\n brand: \"bg-brand\",\n \"brand-muted\": \"bg-brand-muted text-foreground\",\n blue: \"bg-section-blue\",\n gray: \"bg-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","\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport { Badge } from \"../ui/badge\";\nimport { BrutalSection } from \"./section\";\nimport { useState } from \"react\";\n\ninterface PricingTier {\n name: string;\n description?: string;\n price: { monthly: number | string; annual: number | string };\n features: string[];\n ctaText: string;\n ctaHref?: string;\n ctaVariant?: \"cta\" | \"brand\" | \"default\" | \"outline\";\n}\n\ninterface PricingTableProps {\n badge?: string;\n headline?: string;\n description?: string;\n tiers: PricingTier[];\n popularIndex?: number;\n billingToggle?: boolean;\n color?: \"white\" | \"gray\" | \"cream\";\n className?: string;\n}\n\nexport function PricingTable({\n badge,\n headline,\n description,\n tiers,\n popularIndex,\n billingToggle = true,\n color = \"white\",\n className,\n}: PricingTableProps) {\n const [annual, setAnnual] = useState(false);\n\n return (\n <BrutalSection color={color} className={className}>\n {(headline || badge) && (\n <div className=\"mb-8 text-center\">\n {badge && <p className=\"brutal-label mb-4 text-muted-foreground\">{badge}</p>}\n {headline && <h2 className=\"brutal-h2 mb-4\">{headline}</h2>}\n {description && <p className=\"brutal-body mx-auto max-w-lg text-muted-foreground\">{description}</p>}\n </div>\n )}\n\n {billingToggle && (\n <div className=\"mb-10 flex items-center justify-center gap-3\">\n <span className={cn(\"text-sm font-bold\", !annual && \"text-brand\")}>Monthly</span>\n <button\n onClick={() => setAnnual(!annual)}\n className={cn(\n \"relative h-8 w-14 border-brutal border-foreground transition-colors\",\n annual ? \"bg-brand\" : \"bg-secondary\",\n )}\n >\n <span\n className={cn(\n \"absolute top-1 size-6 border border-foreground bg-background transition-transform\",\n annual ? \"left-7\" : \"left-1\",\n )}\n />\n </button>\n <span className={cn(\"text-sm font-bold\", annual && \"text-brand\")}>Annual</span>\n {annual && <Badge variant=\"cta\">Save 20%</Badge>}\n </div>\n )}\n\n <div className={cn(\n \"grid gap-6\",\n tiers.length === 2 && \"mx-auto max-w-2xl sm:grid-cols-2\",\n tiers.length === 3 && \"lg:grid-cols-3\",\n tiers.length >= 4 && \"sm:grid-cols-2 lg:grid-cols-4\",\n )}>\n {tiers.map((tier, i) => {\n const isPopular = i === popularIndex;\n const price = annual ? tier.price.annual : tier.price.monthly;\n\n return (\n <div\n key={tier.name}\n className={cn(\n \"relative flex flex-col border-brutal border-foreground bg-background p-6 shadow-brutal\",\n isPopular && \"border-brand shadow-brutal-lg ring-2 ring-brand z-10 scale-105\",\n )}\n >\n {isPopular && (\n <Badge variant=\"brand\" className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n Popular\n </Badge>\n )}\n <h3 className=\"brutal-h4 mb-1\">{tier.name}</h3>\n {tier.description && <p className=\"mb-4 text-sm text-muted-foreground\">{tier.description}</p>}\n <div className=\"mb-6\">\n <span className=\"brutal-h1\">{typeof price === \"number\" ? `$${price}` : price}</span>\n {typeof price === \"number\" && <span className=\"text-sm text-muted-foreground\">/mo</span>}\n </div>\n <ul className=\"mb-8 flex flex-1 flex-col gap-2\">\n {tier.features.map((feature) => (\n <li key={feature} className=\"flex items-start gap-2 text-sm\">\n <span className=\"mt-0.5 text-brand\">✓</span>\n {feature}\n </li>\n ))}\n </ul>\n <Button\n variant={tier.ctaVariant || (isPopular ? \"cta\" : \"outline\")}\n size=\"lg\"\n className=\"w-full\"\n render={tier.ctaHref ? <a href={tier.ctaHref} /> : undefined}\n >\n {tier.ctaText}\n </Button>\n </div>\n );\n })}\n </div>\n </BrutalSection>\n );\n}\n"]}
|
|
@@ -12,8 +12,8 @@ var colorMap = {
|
|
|
12
12
|
brand: "bg-brand",
|
|
13
13
|
"brand-muted": "bg-brand-muted text-foreground",
|
|
14
14
|
blue: "bg-section-blue",
|
|
15
|
-
gray: "bg-
|
|
16
|
-
cream: "bg-
|
|
15
|
+
gray: "bg-muted text-foreground",
|
|
16
|
+
cream: "bg-secondary text-foreground",
|
|
17
17
|
black: "bg-foreground text-background",
|
|
18
18
|
cta: "bg-cta"
|
|
19
19
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section.tsx"],"names":[],"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,
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section.tsx"],"names":[],"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","file":"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","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"]}
|
|
@@ -12,8 +12,8 @@ var colorMap = {
|
|
|
12
12
|
brand: "bg-brand",
|
|
13
13
|
"brand-muted": "bg-brand-muted text-foreground",
|
|
14
14
|
blue: "bg-section-blue",
|
|
15
|
-
gray: "bg-
|
|
16
|
-
cream: "bg-
|
|
15
|
+
gray: "bg-muted text-foreground",
|
|
16
|
+
cream: "bg-secondary text-foreground",
|
|
17
17
|
black: "bg-foreground text-background",
|
|
18
18
|
cta: "bg-cta"
|
|
19
19
|
};
|
|
@@ -90,7 +90,7 @@ function StatItem({ stat, inView }) {
|
|
|
90
90
|
count.toLocaleString(),
|
|
91
91
|
stat.suffix
|
|
92
92
|
] }),
|
|
93
|
-
/* @__PURE__ */ jsx("p", { className: "brutal-label mt-2
|
|
93
|
+
/* @__PURE__ */ jsx("p", { className: "brutal-label mt-2 opacity-70", children: stat.label })
|
|
94
94
|
] });
|
|
95
95
|
}
|
|
96
96
|
function StatsBar({ stats, color = "white", className }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section.tsx","../../../src/components/brutal/stats-bar.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,
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section.tsx","../../../src/components/brutal/stats-bar.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;AChFA,SAAS,UAAA,CAAW,QAAgB,MAAA,EAAiB;AACnD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA;AAEpC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,MAAA,EAAQ;AACb,IAAA,IAAI,KAAA;AACJ,IAAA,MAAM,QAAA,GAAW,IAAA;AACjB,IAAA,MAAM,KAAA,GAAQ,YAAY,GAAA,EAAI;AAE9B,IAAA,SAAS,QAAQ,GAAA,EAAa;AAC5B,MAAA,MAAM,UAAU,GAAA,GAAM,KAAA;AACtB,MAAA,MAAM,QAAA,GAAW,IAAA,CAAK,GAAA,CAAI,OAAA,GAAU,UAAU,CAAC,CAAA;AAC/C,MAAA,MAAM,QAAQ,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,CAAA,GAAI,UAAU,CAAC,CAAA;AAC1C,MAAA,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,MAAM,CAAC,CAAA;AACnC,MAAA,IAAI,QAAA,GAAW,CAAA,EAAG,KAAA,GAAQ,qBAAA,CAAsB,OAAO,CAAA;AAAA,IACzD;AAEA,IAAA,KAAA,GAAQ,sBAAsB,OAAO,CAAA;AACrC,IAAA,OAAO,MAAM,qBAAqB,KAAK,CAAA;AAAA,EACzC,CAAA,EAAG,CAAC,MAAA,EAAQ,MAAM,CAAC,CAAA;AAEnB,EAAA,OAAO,KAAA;AACT;AAEA,SAAS,QAAA,CAAS,EAAE,IAAA,EAAM,MAAA,EAAO,EAAoC;AACnE,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,IAAA,CAAK,KAAA,EAAO,MAAM,CAAA;AAE3C,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,GAAA,EAAA,EAAE,WAAU,gBAAA,EACV,QAAA,EAAA;AAAA,MAAA,IAAA,CAAK,MAAA;AAAA,MAAQ,MAAM,cAAA,EAAe;AAAA,MAAG,IAAA,CAAK;AAAA,KAAA,EAC7C,CAAA;AAAA,oBACAA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8BAAA,EAAgC,eAAK,KAAA,EAAM;AAAA,GAAA,EAC1D,CAAA;AAEJ;AAEO,SAAS,SAAS,EAAE,KAAA,EAAO,KAAA,GAAQ,OAAA,EAAS,WAAU,EAAkB;AAC7E,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AACvC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAE1C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAClB,IAAA,MAAM,WAAW,IAAI,oBAAA;AAAA,MACnB,CAAC,CAAC,KAAK,CAAA,KAAM;AACX,QAAA,IAAI,MAAM,cAAA,EAAgB;AACxB,UAAA,SAAA,CAAU,IAAI,CAAA;AACd,UAAA,QAAA,CAAS,UAAA,EAAW;AAAA,QACtB;AAAA,MACF,CAAA;AAAA,MACA,EAAE,WAAW,GAAA;AAAI,KACnB;AACA,IAAA,QAAA,CAAS,OAAA,CAAQ,IAAI,OAAO,CAAA;AAC5B,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACEA,GAAAA,CAAC,aAAA,EAAA,EAAc,OAAc,OAAA,EAAQ,IAAA,EAAK,WACxC,QAAA,kBAAAA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,YAAA;AAAA,QACA,KAAA,CAAM,WAAW,CAAA,IAAK,aAAA;AAAA,QACtB,KAAA,CAAM,WAAW,CAAA,IAAK,aAAA;AAAA,QACtB,KAAA,CAAM,UAAU,CAAA,IAAK;AAAA,OACvB;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,qBACVA,GAAAA,CAAC,QAAA,EAAA,EAA0B,IAAA,EAAY,MAAA,EAAA,EAAxB,IAAA,CAAK,KAAmC,CACxD;AAAA;AAAA,GACH,EACF,CAAA;AAEJ","file":"stats-bar.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","\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { BrutalSection } from \"./section\";\nimport { useEffect, useRef, useState } from \"react\";\n\ninterface Stat {\n value: number;\n label: string;\n prefix?: string;\n suffix?: string;\n}\n\ninterface StatsBarProps {\n stats: Stat[];\n color?: \"white\" | \"brand\" | \"black\" | \"gray\";\n className?: string;\n}\n\nfunction useCountUp(target: number, inView: boolean) {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n if (!inView) return;\n let frame: number;\n const duration = 1500;\n const start = performance.now();\n\n function animate(now: number) {\n const elapsed = now - start;\n const progress = Math.min(elapsed / duration, 1);\n const eased = 1 - Math.pow(1 - progress, 3);\n setCount(Math.round(eased * target));\n if (progress < 1) frame = requestAnimationFrame(animate);\n }\n\n frame = requestAnimationFrame(animate);\n return () => cancelAnimationFrame(frame);\n }, [target, inView]);\n\n return count;\n}\n\nfunction StatItem({ stat, inView }: { stat: Stat; inView: boolean }) {\n const count = useCountUp(stat.value, inView);\n\n return (\n <div className=\"text-center\">\n <p className=\"brutal-display\">\n {stat.prefix}{count.toLocaleString()}{stat.suffix}\n </p>\n <p className=\"brutal-label mt-2 opacity-70\">{stat.label}</p>\n </div>\n );\n}\n\nexport function StatsBar({ stats, color = \"white\", className }: StatsBarProps) {\n const ref = useRef<HTMLDivElement>(null);\n const [inView, setInView] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setInView(true);\n observer.disconnect();\n }\n },\n { threshold: 0.3 }\n );\n observer.observe(ref.current);\n return () => observer.disconnect();\n }, []);\n\n return (\n <BrutalSection color={color} padding=\"sm\" className={className}>\n <div\n ref={ref}\n className={cn(\n \"grid gap-8\",\n stats.length === 2 && \"grid-cols-2\",\n stats.length === 3 && \"grid-cols-3\",\n stats.length >= 4 && \"grid-cols-2 sm:grid-cols-4\",\n )}\n >\n {stats.map((stat) => (\n <StatItem key={stat.label} stat={stat} inView={inView} />\n ))}\n </div>\n </BrutalSection>\n );\n}\n"]}
|
|
@@ -12,8 +12,8 @@ var colorMap = {
|
|
|
12
12
|
brand: "bg-brand",
|
|
13
13
|
"brand-muted": "bg-brand-muted text-foreground",
|
|
14
14
|
blue: "bg-section-blue",
|
|
15
|
-
gray: "bg-
|
|
16
|
-
cream: "bg-
|
|
15
|
+
gray: "bg-muted text-foreground",
|
|
16
|
+
cream: "bg-secondary text-foreground",
|
|
17
17
|
black: "bg-foreground text-background",
|
|
18
18
|
cta: "bg-cta"
|
|
19
19
|
};
|
|
@@ -69,7 +69,7 @@ function StarRating({ rating }) {
|
|
|
69
69
|
{
|
|
70
70
|
className: cn(
|
|
71
71
|
"text-sm",
|
|
72
|
-
i < rating ? "text-
|
|
72
|
+
i < rating ? "text-brand" : "text-foreground/20"
|
|
73
73
|
),
|
|
74
74
|
children: "\u2605"
|
|
75
75
|
},
|
|
@@ -97,17 +97,12 @@ function TestimonialCard({
|
|
|
97
97
|
{
|
|
98
98
|
src: t.avatar,
|
|
99
99
|
alt: t.name,
|
|
100
|
-
className: "size-9 border-2 object-cover"
|
|
101
|
-
style: { borderColor: "hsl(var(--brand))" }
|
|
100
|
+
className: "size-9 border-2 border-brand object-cover"
|
|
102
101
|
}
|
|
103
102
|
) : /* @__PURE__ */ jsx(
|
|
104
103
|
"div",
|
|
105
104
|
{
|
|
106
|
-
className: "flex size-9 items-center justify-center border-2 font-bold text-brand-foreground",
|
|
107
|
-
style: {
|
|
108
|
-
borderColor: "hsl(var(--brand))",
|
|
109
|
-
backgroundColor: "hsl(var(--brand))"
|
|
110
|
-
},
|
|
105
|
+
className: "flex size-9 items-center justify-center border-2 border-brand bg-brand font-bold text-brand-foreground",
|
|
111
106
|
children: t.name[0]
|
|
112
107
|
}
|
|
113
108
|
),
|
|
@@ -173,7 +168,7 @@ function BrutalTestimonials({
|
|
|
173
168
|
headline,
|
|
174
169
|
testimonials,
|
|
175
170
|
variant = "masonry",
|
|
176
|
-
color = "
|
|
171
|
+
color = "white",
|
|
177
172
|
pattern,
|
|
178
173
|
className
|
|
179
174
|
}) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section.tsx","../../../src/components/brutal/testimonials.tsx"],"names":["jsx"],"mappings":"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","file":"testimonials.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-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 { BrutalSection } from \"./section\";\nimport type { SectionColor, SectionPattern } from \"./section\";\n\nexport interface Testimonial {\n name: string;\n handle?: string;\n avatar?: string;\n text: string;\n role?: string;\n company?: string;\n companyLogo?: string;\n rating?: 1 | 2 | 3 | 4 | 5;\n featured?: boolean;\n}\n\ninterface BrutalTestimonialsProps {\n badge?: string;\n headline?: string;\n testimonials: Testimonial[];\n variant?: \"masonry\" | \"featured-grid\" | \"carousel\" | \"wall-of-love\";\n color?: SectionColor;\n pattern?: SectionPattern;\n className?: string;\n}\n\nfunction StarRating({ rating }: { rating: number }) {\n return (\n <div className=\"flex gap-0.5\">\n {Array.from({ length: 5 }, (_, i) => (\n <span\n key={i}\n className={cn(\n \"text-sm\",\n i < rating ? \"text-amber-500\" : \"text-foreground/20\"\n )}\n >\n ★\n </span>\n ))}\n </div>\n );\n}\n\nfunction TestimonialCard({\n t,\n className,\n}: {\n t: Testimonial;\n className?: string;\n}) {\n return (\n <div\n className={cn(\n \"relative break-inside-avoid border-brutal border-foreground bg-background p-5 text-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 >\n {/* Decorative quote mark */}\n <span className=\"pointer-events-none absolute top-3 right-4 select-none font-serif text-5xl leading-none text-foreground/[0.06]\">\n “\n </span>\n\n {t.rating && (\n <div className=\"mb-3\">\n <StarRating rating={t.rating} />\n </div>\n )}\n\n <p className=\"relative mb-4 text-sm leading-relaxed\">{t.text}</p>\n\n <div className=\"flex items-center gap-3\">\n {t.avatar ? (\n <img\n src={t.avatar}\n alt={t.name}\n className=\"size-9 border-2 object-cover\"\n style={{ borderColor: \"hsl(var(--brand))\" }}\n />\n ) : (\n <div\n className=\"flex size-9 items-center justify-center border-2 font-bold text-brand-foreground\"\n style={{\n borderColor: \"hsl(var(--brand))\",\n backgroundColor: \"hsl(var(--brand))\",\n }}\n >\n {t.name[0]}\n </div>\n )}\n <div className=\"min-w-0 flex-1\">\n <p className=\"text-sm font-bold\">{t.name}</p>\n {(t.role || t.company) && (\n <p className=\"truncate text-xs text-muted-foreground\">\n {t.role}\n {t.role && t.company && \" · \"}\n {t.company}\n </p>\n )}\n {!t.role && !t.company && t.handle && (\n <p className=\"font-mono text-xs text-muted-foreground\">\n {t.handle}\n </p>\n )}\n </div>\n {t.companyLogo && (\n <img\n src={t.companyLogo}\n alt={t.company || \"\"}\n className=\"h-5 object-contain opacity-60\"\n />\n )}\n </div>\n </div>\n );\n}\n\nfunction MasonryLayout({ testimonials }: { testimonials: Testimonial[] }) {\n return (\n <div className=\"columns-1 gap-6 sm:columns-2 lg:columns-3\">\n {testimonials.map((t, i) => (\n <TestimonialCard key={i} t={t} className=\"mb-6\" />\n ))}\n </div>\n );\n}\n\nfunction FeaturedGridLayout({\n testimonials,\n}: {\n testimonials: Testimonial[];\n}) {\n const featured = testimonials.find((t) => t.featured) || testimonials[0];\n const rest = testimonials.filter((t) => t !== featured);\n\n return (\n <div className=\"grid gap-6 lg:grid-cols-2\">\n {/* Large featured card */}\n {featured && (\n <TestimonialCard\n t={featured}\n className=\"flex flex-col justify-between p-8 lg:row-span-2\"\n />\n )}\n {/* Smaller grid */}\n {rest.map((t, i) => (\n <TestimonialCard key={i} t={t} />\n ))}\n </div>\n );\n}\n\nfunction CarouselLayout({ testimonials }: { testimonials: Testimonial[] }) {\n return (\n <div className=\"-mx-6 flex snap-x snap-mandatory gap-6 overflow-x-auto px-6 pb-4\">\n {testimonials.map((t, i) => (\n <TestimonialCard\n key={i}\n t={t}\n className=\"w-80 flex-none snap-center\"\n />\n ))}\n </div>\n );\n}\n\nfunction WallOfLoveLayout({ testimonials }: { testimonials: Testimonial[] }) {\n return (\n <div className=\"relative max-h-[600px] overflow-hidden\">\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n {testimonials.map((t, i) => (\n <TestimonialCard key={i} t={t} />\n ))}\n </div>\n {/* Fade overlay at bottom */}\n <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent\" />\n </div>\n );\n}\n\nexport function BrutalTestimonials({\n badge,\n headline,\n testimonials,\n variant = \"masonry\",\n color = \"blue\",\n pattern,\n className,\n}: BrutalTestimonialsProps) {\n return (\n <BrutalSection color={color} pattern={pattern} className={className}>\n {(headline || badge) && (\n <div className=\"mb-12 text-center\">\n {badge && <p className=\"brutal-label mb-4 opacity-70\">{badge}</p>}\n {headline && <h2 className=\"brutal-h2\">{headline}</h2>}\n </div>\n )}\n\n {variant === \"masonry\" && <MasonryLayout testimonials={testimonials} />}\n {variant === \"featured-grid\" && (\n <FeaturedGridLayout testimonials={testimonials} />\n )}\n {variant === \"carousel\" && (\n <CarouselLayout testimonials={testimonials} />\n )}\n {variant === \"wall-of-love\" && (\n <WallOfLoveLayout testimonials={testimonials} />\n )}\n </BrutalSection>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section.tsx","../../../src/components/brutal/testimonials.tsx"],"names":["jsx"],"mappings":"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","file":"testimonials.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\nexport interface Testimonial {\n name: string;\n handle?: string;\n avatar?: string;\n text: string;\n role?: string;\n company?: string;\n companyLogo?: string;\n rating?: 1 | 2 | 3 | 4 | 5;\n featured?: boolean;\n}\n\ninterface BrutalTestimonialsProps {\n badge?: string;\n headline?: string;\n testimonials: Testimonial[];\n variant?: \"masonry\" | \"featured-grid\" | \"carousel\" | \"wall-of-love\";\n color?: SectionColor;\n pattern?: SectionPattern;\n className?: string;\n}\n\nfunction StarRating({ rating }: { rating: number }) {\n return (\n <div className=\"flex gap-0.5\">\n {Array.from({ length: 5 }, (_, i) => (\n <span\n key={i}\n className={cn(\n \"text-sm\",\n i < rating ? \"text-brand\" : \"text-foreground/20\"\n )}\n >\n ★\n </span>\n ))}\n </div>\n );\n}\n\nfunction TestimonialCard({\n t,\n className,\n}: {\n t: Testimonial;\n className?: string;\n}) {\n return (\n <div\n className={cn(\n \"relative break-inside-avoid border-brutal border-foreground bg-background p-5 text-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 >\n {/* Decorative quote mark */}\n <span className=\"pointer-events-none absolute top-3 right-4 select-none font-serif text-5xl leading-none text-foreground/[0.06]\">\n “\n </span>\n\n {t.rating && (\n <div className=\"mb-3\">\n <StarRating rating={t.rating} />\n </div>\n )}\n\n <p className=\"relative mb-4 text-sm leading-relaxed\">{t.text}</p>\n\n <div className=\"flex items-center gap-3\">\n {t.avatar ? (\n <img\n src={t.avatar}\n alt={t.name}\n className=\"size-9 border-2 border-brand object-cover\"\n />\n ) : (\n <div\n className=\"flex size-9 items-center justify-center border-2 border-brand bg-brand font-bold text-brand-foreground\"\n >\n {t.name[0]}\n </div>\n )}\n <div className=\"min-w-0 flex-1\">\n <p className=\"text-sm font-bold\">{t.name}</p>\n {(t.role || t.company) && (\n <p className=\"truncate text-xs text-muted-foreground\">\n {t.role}\n {t.role && t.company && \" · \"}\n {t.company}\n </p>\n )}\n {!t.role && !t.company && t.handle && (\n <p className=\"font-mono text-xs text-muted-foreground\">\n {t.handle}\n </p>\n )}\n </div>\n {t.companyLogo && (\n <img\n src={t.companyLogo}\n alt={t.company || \"\"}\n className=\"h-5 object-contain opacity-60\"\n />\n )}\n </div>\n </div>\n );\n}\n\nfunction MasonryLayout({ testimonials }: { testimonials: Testimonial[] }) {\n return (\n <div className=\"columns-1 gap-6 sm:columns-2 lg:columns-3\">\n {testimonials.map((t, i) => (\n <TestimonialCard key={i} t={t} className=\"mb-6\" />\n ))}\n </div>\n );\n}\n\nfunction FeaturedGridLayout({\n testimonials,\n}: {\n testimonials: Testimonial[];\n}) {\n const featured = testimonials.find((t) => t.featured) || testimonials[0];\n const rest = testimonials.filter((t) => t !== featured);\n\n return (\n <div className=\"grid gap-6 lg:grid-cols-2\">\n {/* Large featured card */}\n {featured && (\n <TestimonialCard\n t={featured}\n className=\"flex flex-col justify-between p-8 lg:row-span-2\"\n />\n )}\n {/* Smaller grid */}\n {rest.map((t, i) => (\n <TestimonialCard key={i} t={t} />\n ))}\n </div>\n );\n}\n\nfunction CarouselLayout({ testimonials }: { testimonials: Testimonial[] }) {\n return (\n <div className=\"-mx-6 flex snap-x snap-mandatory gap-6 overflow-x-auto px-6 pb-4\">\n {testimonials.map((t, i) => (\n <TestimonialCard\n key={i}\n t={t}\n className=\"w-80 flex-none snap-center\"\n />\n ))}\n </div>\n );\n}\n\nfunction WallOfLoveLayout({ testimonials }: { testimonials: Testimonial[] }) {\n return (\n <div className=\"relative max-h-[600px] overflow-hidden\">\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n {testimonials.map((t, i) => (\n <TestimonialCard key={i} t={t} />\n ))}\n </div>\n {/* Fade overlay at bottom */}\n <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent\" />\n </div>\n );\n}\n\nexport function BrutalTestimonials({\n badge,\n headline,\n testimonials,\n variant = \"masonry\",\n color = \"white\",\n pattern,\n className,\n}: BrutalTestimonialsProps) {\n return (\n <BrutalSection color={color} pattern={pattern} className={className}>\n {(headline || badge) && (\n <div className=\"mb-12 text-center\">\n {badge && <p className=\"brutal-label mb-4 opacity-70\">{badge}</p>}\n {headline && <h2 className=\"brutal-h2\">{headline}</h2>}\n </div>\n )}\n\n {variant === \"masonry\" && <MasonryLayout testimonials={testimonials} />}\n {variant === \"featured-grid\" && (\n <FeaturedGridLayout testimonials={testimonials} />\n )}\n {variant === \"carousel\" && (\n <CarouselLayout testimonials={testimonials} />\n )}\n {variant === \"wall-of-love\" && (\n <WallOfLoveLayout testimonials={testimonials} />\n )}\n </BrutalSection>\n );\n}\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -40,9 +40,11 @@ export { BrutalSection, SectionColor, SectionPattern } from './components/brutal
|
|
|
40
40
|
export { SectionDivider, SectionDivider as WaveDivider } from './components/brutal/section-divider.js';
|
|
41
41
|
export { BrutalHero } from './components/brutal/hero.js';
|
|
42
42
|
export { BrutalFeatureGrid } from './components/brutal/feature-grid.js';
|
|
43
|
+
export { BrutalFeatureShowcase } from './components/brutal/feature-showcase.js';
|
|
43
44
|
export { BrutalTestimonials, Testimonial } from './components/brutal/testimonials.js';
|
|
44
45
|
export { BrutalIntegrationGrid } from './components/brutal/integration-grid.js';
|
|
45
46
|
export { BrutalCTA } from './components/brutal/cta-section.js';
|
|
47
|
+
export { BrutalComparisonTable } from './components/brutal/comparison-table.js';
|
|
46
48
|
export { BrutalNav } from './components/brutal/nav.js';
|
|
47
49
|
export { BrutalFooter } from './components/brutal/footer.js';
|
|
48
50
|
export { PricingTable } from './components/brutal/pricing-table.js';
|
|
@@ -50,6 +52,8 @@ export { LogoCloud } from './components/brutal/logo-cloud.js';
|
|
|
50
52
|
export { StatsBar } from './components/brutal/stats-bar.js';
|
|
51
53
|
export { FAQ } from './components/brutal/faq.js';
|
|
52
54
|
export { Newsletter } from './components/brutal/newsletter.js';
|
|
55
|
+
export { MockupWindow } from './components/brutal/mockup-window.js';
|
|
56
|
+
export { Marquee, MarqueeItem } from './components/brutal/marquee.js';
|
|
53
57
|
export { AppShell, useAppShell } from './components/dashboard/app-shell.js';
|
|
54
58
|
export { Sidebar } from './components/dashboard/sidebar.js';
|
|
55
59
|
export { StatCard } from './components/dashboard/stat-card.js';
|