kofi-stack-template-generator 2.1.61 → 2.1.62

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.
Files changed (12) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/dist/index.js +586 -6
  3. package/package.json +2 -2
  4. package/src/templates.generated.ts +9 -8
  5. package/templates/admin/src/app/globals.css.hbs +1 -2
  6. package/templates/design-system/src/app/globals.css.hbs +1 -2
  7. package/templates/marketing/nextjs/src/app/globals.css.hbs +3 -445
  8. package/templates/packages/ui/components.json.hbs +27 -0
  9. package/templates/packages/ui/package.json.hbs +5 -4
  10. package/templates/packages/ui/src/globals.css.hbs +568 -0
  11. package/templates/web/src/app/globals.css.hbs +11 -0
  12. package/templates/packages/ui/src/styles.css.hbs +0 -121
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kofi-stack-template-generator",
3
- "version": "2.1.61",
3
+ "version": "2.1.62",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -17,7 +17,7 @@
17
17
  "typecheck": "tsc --noEmit"
18
18
  },
19
19
  "dependencies": {
20
- "kofi-stack-types": "^2.1.61",
20
+ "kofi-stack-types": "^2.1.62",
21
21
  "handlebars": "^4.7.8",
22
22
  "memfs": "^4.9.0"
23
23
  },
package/src/templates.generated.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  // Auto-generated file. Do not edit manually.
2
2
  // Run 'pnpm prebuild' to regenerate.
3
- // Generated: 2026-01-19T19:40:59.995Z
4
- // Template count: 415
3
+ // Generated: 2026-01-19T19:54:48.420Z
4
+ // Template count: 416
5
5
 
6
6
  export const EMBEDDED_TEMPLATES: Record<string, string> = {
7
7
  "admin/next.config.ts.hbs": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n transpilePackages: ['@repo/ui', '@repo/backend'],\n}\n\nexport default nextConfig\n",
8
8
  "admin/package.json.hbs": "{\n \"name\": \"@repo/admin\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"next dev --turbopack --port 3003\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"biome check .\",\n \"lint:fix\": \"biome check --write .\",\n \"typecheck\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"@repo/ui\": \"workspace:*\",\n \"@repo/backend\": \"workspace:*\",\n \"next\": \"^16.0.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"next-themes\": \"^0.4.6\",\n \"convex\": \"^1.25.0\",\n \"better-auth\": \"1.4.9\",\n{{#if (eq shadcn.iconLibrary \"hugeicons\")}} \"@hugeicons/react\": \"^0.3.0\"\n{{/if}}{{#if (eq shadcn.iconLibrary \"lucide\")}} \"lucide-react\": \"^0.469.0\"\n{{/if}}{{#if (eq shadcn.iconLibrary \"tabler\")}} \"@tabler/icons-react\": \"^3.31.0\"\n{{/if}}{{#if (eq shadcn.iconLibrary \"phosphor\")}} \"@phosphor-icons/react\": \"^2.1.7\"\n{{/if}} },\n \"devDependencies\": {\n \"@repo/config-typescript\": \"workspace:*\",\n \"@types/node\": \"^20.0.0\",\n \"@types/react\": \"^19.0.0\",\n \"@types/react-dom\": \"^19.0.0\",\n \"tailwindcss\": \"^4.0.0\",\n \"@tailwindcss/postcss\": \"^4.0.0\",\n \"postcss\": \"^8.4.0\",\n \"typescript\": \"^5.0.0\"\n }\n}\n",
9
9
  "admin/postcss.config.mjs.hbs": "const config = {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n\nexport default config\n",
10
10
  "admin/src/app/analytics/page.tsx.hbs": "import { StatsCards } from '@/components/stats-cards'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card'\n\nexport default function AnalyticsPage() {\n return (\n <div className=\"space-y-8\">\n <div>\n <h1 className=\"text-3xl font-bold tracking-tight\">Analytics</h1>\n <p className=\"text-muted-foreground\">\n View detailed analytics and insights.\n </p>\n </div>\n\n <StatsCards />\n\n <div className=\"grid gap-6 md:grid-cols-2\">\n <Card>\n <CardHeader>\n <CardTitle>User Growth</CardTitle>\n <CardDescription>New users over time</CardDescription>\n </CardHeader>\n <CardContent className=\"h-[300px] flex items-center justify-center\">\n <p className=\"text-sm text-muted-foreground\">Chart placeholder</p>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Session Duration</CardTitle>\n <CardDescription>Average session length</CardDescription>\n </CardHeader>\n <CardContent className=\"h-[300px] flex items-center justify-center\">\n <p className=\"text-sm text-muted-foreground\">Chart placeholder</p>\n </CardContent>\n </Card>\n </div>\n </div>\n )\n}\n",
11
- "admin/src/app/globals.css.hbs": "@import \"tailwindcss\";\n@import \"@repo/ui/styles.css\";\n",
11
+ "admin/src/app/globals.css.hbs": "@import \"@repo/ui/globals.css\";\n",
12
12
  "admin/src/app/layout.tsx.hbs": "import type { Metadata } from 'next'\nimport { ThemeProvider } from 'next-themes'\nimport { AdminSidebar } from '@/components/admin-sidebar'\nimport './globals.css'\n\nexport const metadata: Metadata = {\n title: '{{projectName}} Admin',\n description: 'Admin dashboard for {{projectName}}',\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <html lang=\"en\" suppressHydrationWarning>\n <body className=\"min-h-screen bg-background font-sans antialiased\">\n <ThemeProvider\n attribute=\"class\"\n defaultTheme=\"system\"\n enableSystem\n disableTransitionOnChange\n >\n <div className=\"flex min-h-screen\">\n <AdminSidebar />\n <main className=\"flex-1 p-8\">{children}</main>\n </div>\n </ThemeProvider>\n </body>\n </html>\n )\n}\n",
13
13
  "admin/src/app/page.tsx.hbs": "import { StatsCards } from '@/components/stats-cards'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card'\n\nexport default function AdminDashboard() {\n return (\n <div className=\"space-y-8\">\n <div>\n <h1 className=\"text-3xl font-bold tracking-tight\">Dashboard</h1>\n <p className=\"text-muted-foreground\">\n Welcome to the {{projectName}} admin dashboard.\n </p>\n </div>\n\n <StatsCards />\n\n <div className=\"grid gap-6 md:grid-cols-2\">\n <Card>\n <CardHeader>\n <CardTitle>Recent Activity</CardTitle>\n <CardDescription>Latest user activity and events</CardDescription>\n </CardHeader>\n <CardContent>\n <p className=\"text-sm text-muted-foreground\">No recent activity to display.</p>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Quick Actions</CardTitle>\n <CardDescription>Common administrative tasks</CardDescription>\n </CardHeader>\n <CardContent className=\"space-y-2\">\n <a href=\"/users\" className=\"block text-sm text-primary hover:underline\">\n Manage Users\n </a>\n <a href=\"/analytics\" className=\"block text-sm text-primary hover:underline\">\n View Analytics\n </a>\n <a href=\"/settings\" className=\"block text-sm text-primary hover:underline\">\n System Settings\n </a>\n </CardContent>\n </Card>\n </div>\n </div>\n )\n}\n",
14
14
  "admin/src/app/settings/page.tsx.hbs": "import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card'\nimport { Button } from '@repo/ui/components/button'\nimport { Input } from '@repo/ui/components/input'\nimport { Label } from '@repo/ui/components/label'\n\nexport default function SettingsPage() {\n return (\n <div className=\"space-y-8\">\n <div>\n <h1 className=\"text-3xl font-bold tracking-tight\">Settings</h1>\n <p className=\"text-muted-foreground\">\n Configure application settings and preferences.\n </p>\n </div>\n\n <div className=\"grid gap-6\">\n <Card>\n <CardHeader>\n <CardTitle>General Settings</CardTitle>\n <CardDescription>Basic application configuration</CardDescription>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"app-name\">Application Name</Label>\n <Input id=\"app-name\" defaultValue=\"{{projectName}}\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"support-email\">Support Email</Label>\n <Input id=\"support-email\" type=\"email\" placeholder=\"support@example.com\" />\n </div>\n <Button>Save Changes</Button>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Security</CardTitle>\n <CardDescription>Security and authentication settings</CardDescription>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Two-Factor Authentication</p>\n <p className=\"text-sm text-muted-foreground\">\n Require 2FA for all admin users\n </p>\n </div>\n <Button variant=\"outline\">Configure</Button>\n </div>\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Session Timeout</p>\n <p className=\"text-sm text-muted-foreground\">\n Auto logout after inactivity\n </p>\n </div>\n <Button variant=\"outline\">Configure</Button>\n </div>\n </CardContent>\n </Card>\n\n <Card className=\"border-destructive\">\n <CardHeader>\n <CardTitle className=\"text-destructive\">Danger Zone</CardTitle>\n <CardDescription>Irreversible actions</CardDescription>\n </CardHeader>\n <CardContent>\n <Button variant=\"destructive\">Delete All Data</Button>\n </CardContent>\n </Card>\n </div>\n </div>\n )\n}\n",
@@ -34,7 +34,7 @@ export const EMBEDDED_TEMPLATES: Record<string, string> = {
34
34
  "design-system/src/app/blocks/page.tsx.hbs": "import { Button } from '@repo/ui/components/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card'\n\nexport default function BlocksPage() {\n return (\n <div className=\"container mx-auto max-w-6xl px-6 py-10 space-y-16\">\n <div className=\"space-y-4\">\n <h1 className=\"text-4xl font-bold tracking-tight\">Blocks</h1>\n <p className=\"text-xl text-muted-foreground\">\n Pre-built marketing and application blocks.\n </p>\n </div>\n\n {/* Hero Block */}\n <section className=\"space-y-4\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Hero Section</h2>\n <div className=\"rounded-lg border bg-gradient-to-b from-background to-muted p-12 text-center\">\n <h1 className=\"text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl\">\n Build something amazing\n </h1>\n <p className=\"mt-6 text-lg text-muted-foreground max-w-2xl mx-auto\">\n Start your next project with our powerful starter kit. Built with\n the latest technologies and best practices.\n </p>\n <div className=\"mt-8 flex justify-center gap-4\">\n <Button size=\"lg\">Get Started</Button>\n <Button size=\"lg\" variant=\"outline\">Learn More</Button>\n </div>\n </div>\n </section>\n\n {/* Features Block */}\n <section className=\"space-y-4\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Features Grid</h2>\n <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n <Card>\n <CardHeader>\n <CardTitle>Fast Development</CardTitle>\n <CardDescription>\n Get started quickly with pre-built components and templates.\n </CardDescription>\n </CardHeader>\n </Card>\n <Card>\n <CardHeader>\n <CardTitle>Type Safe</CardTitle>\n <CardDescription>\n Full TypeScript support with strict type checking enabled.\n </CardDescription>\n </CardHeader>\n </Card>\n <Card>\n <CardHeader>\n <CardTitle>Modern Stack</CardTitle>\n <CardDescription>\n Built with Next.js 16, React 19, and Tailwind CSS v4.\n </CardDescription>\n </CardHeader>\n </Card>\n </div>\n </section>\n\n {/* CTA Block */}\n <section className=\"space-y-4\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Call to Action</h2>\n <div className=\"rounded-lg border bg-primary p-12 text-center text-primary-foreground\">\n <h2 className=\"text-3xl font-bold\">Ready to get started?</h2>\n <p className=\"mt-4 text-lg opacity-90\">\n Join thousands of developers building with our platform.\n </p>\n <div className=\"mt-8\">\n <Button size=\"lg\" variant=\"secondary\">\n Start Free Trial\n </Button>\n </div>\n </div>\n </section>\n\n {/* Pricing Block */}\n <section className=\"space-y-4\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Pricing Cards</h2>\n <div className=\"grid gap-6 md:grid-cols-3\">\n <Card>\n <CardHeader>\n <CardTitle>Starter</CardTitle>\n <CardDescription>For individuals and small projects</CardDescription>\n <div className=\"mt-4\">\n <span className=\"text-4xl font-bold\">$0</span>\n <span className=\"text-muted-foreground\">/month</span>\n </div>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm\">\n <li>Up to 3 projects</li>\n <li>Basic analytics</li>\n <li>Community support</li>\n </ul>\n <Button className=\"mt-6 w-full\" variant=\"outline\">Get Started</Button>\n </CardContent>\n </Card>\n <Card className=\"border-primary\">\n <CardHeader>\n <CardTitle>Pro</CardTitle>\n <CardDescription>For growing teams</CardDescription>\n <div className=\"mt-4\">\n <span className=\"text-4xl font-bold\">$29</span>\n <span className=\"text-muted-foreground\">/month</span>\n </div>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm\">\n <li>Unlimited projects</li>\n <li>Advanced analytics</li>\n <li>Priority support</li>\n </ul>\n <Button className=\"mt-6 w-full\">Subscribe</Button>\n </CardContent>\n </Card>\n <Card>\n <CardHeader>\n <CardTitle>Enterprise</CardTitle>\n <CardDescription>For large organizations</CardDescription>\n <div className=\"mt-4\">\n <span className=\"text-4xl font-bold\">Custom</span>\n </div>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm\">\n <li>Custom limits</li>\n <li>Dedicated support</li>\n <li>SLA guarantee</li>\n </ul>\n <Button className=\"mt-6 w-full\" variant=\"outline\">Contact Sales</Button>\n </CardContent>\n </Card>\n </div>\n </section>\n </div>\n )\n}\n",
35
35
  "design-system/src/app/colors/page.tsx.hbs": "import { ColorPalette } from '@/components/color-palette'\n\nexport default function ColorsPage() {\n return (\n <div className=\"container mx-auto max-w-6xl px-6 py-10 space-y-8\">\n <div className=\"space-y-4\">\n <h1 className=\"text-4xl font-bold tracking-tight\">Color Palette</h1>\n <p className=\"text-xl text-muted-foreground\">\n The color system for {{projectName}}. Click any swatch to copy the Tailwind class.\n </p>\n </div>\n\n <div className=\"rounded-lg border bg-card p-6\">\n <h2 className=\"text-lg font-semibold mb-4\">Usage</h2>\n <p className=\"text-muted-foreground mb-4\">\n Colors are defined as CSS variables and mapped to Tailwind utility classes.\n Use semantic color names for consistency across themes.\n </p>\n <div className=\"grid gap-4 md:grid-cols-2\">\n <div className=\"rounded-md bg-muted p-4\">\n <p className=\"text-sm font-mono text-muted-foreground mb-2\">Background</p>\n <code className=\"text-sm\">className=&quot;bg-primary text-primary-foreground&quot;</code>\n </div>\n <div className=\"rounded-md bg-muted p-4\">\n <p className=\"text-sm font-mono text-muted-foreground mb-2\">Text</p>\n <code className=\"text-sm\">className=&quot;text-muted-foreground&quot;</code>\n </div>\n </div>\n </div>\n\n <ColorPalette />\n </div>\n )\n}\n",
36
36
  "design-system/src/app/components/page.tsx.hbs": "import { Button } from '@repo/ui/components/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@repo/ui/components/card'\nimport { Input } from '@repo/ui/components/input'\nimport { Label } from '@repo/ui/components/label'\nimport { Badge } from '@repo/ui/components/badge'\nimport { Separator } from '@repo/ui/components/separator'\n\nexport default function ComponentsPage() {\n return (\n <div className=\"container mx-auto max-w-6xl px-6 py-10 space-y-12\">\n <div className=\"space-y-4\">\n <h1 className=\"text-4xl font-bold tracking-tight\">Components</h1>\n <p className=\"text-xl text-muted-foreground\">\n UI components from the shared @repo/ui package.\n </p>\n </div>\n\n <section className=\"space-y-6\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Buttons</h2>\n <div className=\"flex flex-wrap gap-4\">\n <Button>Default</Button>\n <Button variant=\"secondary\">Secondary</Button>\n <Button variant=\"destructive\">Destructive</Button>\n <Button variant=\"outline\">Outline</Button>\n <Button variant=\"ghost\">Ghost</Button>\n <Button variant=\"link\">Link</Button>\n </div>\n <div className=\"flex flex-wrap gap-4\">\n <Button size=\"sm\">Small</Button>\n <Button size=\"default\">Default</Button>\n <Button size=\"lg\">Large</Button>\n </div>\n </section>\n\n <Separator />\n\n <section className=\"space-y-6\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Cards</h2>\n <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n <Card>\n <CardHeader>\n <CardTitle>Card Title</CardTitle>\n <CardDescription>Card description goes here.</CardDescription>\n </CardHeader>\n <CardContent>\n <p>Card content with some example text.</p>\n </CardContent>\n <CardFooter>\n <Button size=\"sm\">Action</Button>\n </CardFooter>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Another Card</CardTitle>\n <CardDescription>Different content example.</CardDescription>\n </CardHeader>\n <CardContent>\n <p>More card content here.</p>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Third Card</CardTitle>\n <CardDescription>Yet another card example.</CardDescription>\n </CardHeader>\n <CardContent>\n <p>Additional content for this card.</p>\n </CardContent>\n </Card>\n </div>\n </section>\n\n <Separator />\n\n <section className=\"space-y-6\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Form Elements</h2>\n <div className=\"grid gap-6 md:grid-cols-2\">\n <div className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input id=\"email\" type=\"email\" placeholder=\"Enter your email\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" placeholder=\"Enter password\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"disabled\">Disabled Input</Label>\n <Input id=\"disabled\" disabled placeholder=\"Disabled input\" />\n </div>\n </div>\n </div>\n </section>\n\n <Separator />\n\n <section className=\"space-y-6\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Badges</h2>\n <div className=\"flex flex-wrap gap-4\">\n <Badge>Default</Badge>\n <Badge variant=\"secondary\">Secondary</Badge>\n <Badge variant=\"destructive\">Destructive</Badge>\n <Badge variant=\"outline\">Outline</Badge>\n </div>\n </section>\n </div>\n )\n}\n",
37
- "design-system/src/app/globals.css.hbs": "@import \"tailwindcss\";\n@import \"@repo/ui/styles.css\";\n",
37
+ "design-system/src/app/globals.css.hbs": "@import \"@repo/ui/globals.css\";\n",
38
38
  "design-system/src/app/layout.tsx.hbs": "import type { Metadata } from 'next'\nimport { ThemeProvider } from 'next-themes'\nimport './globals.css'\n\nexport const metadata: Metadata = {\n title: '{{projectName}} Design System',\n description: 'Design system documentation and component showcase',\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <html lang=\"en\" suppressHydrationWarning>\n <body className=\"min-h-screen bg-background font-sans antialiased\">\n <ThemeProvider\n attribute=\"class\"\n defaultTheme=\"system\"\n enableSystem\n disableTransitionOnChange\n >\n <div className=\"relative flex min-h-screen flex-col\">\n <header className=\"sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\n <div className=\"container flex h-14 items-center\">\n <div className=\"mr-4 flex\">\n <a href=\"/\" className=\"mr-6 flex items-center space-x-2\">\n <span className=\"font-bold\">{{projectName}} Design System</span>\n </a>\n <nav className=\"flex items-center space-x-6 text-sm font-medium\">\n <a href=\"/colors\" className=\"transition-colors hover:text-foreground/80 text-foreground/60\">Colors</a>\n <a href=\"/typography\" className=\"transition-colors hover:text-foreground/80 text-foreground/60\">Typography</a>\n <a href=\"/components\" className=\"transition-colors hover:text-foreground/80 text-foreground/60\">Components</a>\n <a href=\"/blocks\" className=\"transition-colors hover:text-foreground/80 text-foreground/60\">Blocks</a>\n </nav>\n </div>\n </div>\n </header>\n <main className=\"flex-1\">{children}</main>\n </div>\n </ThemeProvider>\n </body>\n </html>\n )\n}\n",
39
39
  "design-system/src/app/page.tsx.hbs": "import { Card, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card'\nimport { Separator } from '@repo/ui/components/separator'\n\nexport default function Home() {\n return (\n <main className=\"container mx-auto max-w-4xl px-6 py-16\">\n <header className=\"mb-12 text-center\">\n <h1 className=\"text-4xl font-bold tracking-tight text-foreground\">\n Design System & Blocks\n </h1>\n <p className=\"mt-4 text-lg text-muted-foreground max-w-2xl mx-auto\">\n Explore the component library and design tokens for {{projectName}}.\n </p>\n </header>\n\n <Separator className=\"mb-12\" />\n\n <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n <a href=\"/colors\" className=\"group\">\n <Card className=\"h-full transition-all hover:border-primary/50 hover:shadow-md\">\n <CardHeader>\n <CardTitle className=\"text-xl\">Colors</CardTitle>\n <CardDescription className=\"text-base\">\n View the color palette and brand colors.\n </CardDescription>\n </CardHeader>\n </Card>\n </a>\n\n <a href=\"/typography\" className=\"group\">\n <Card className=\"h-full transition-all hover:border-primary/50 hover:shadow-md\">\n <CardHeader>\n <CardTitle className=\"text-xl\">Typography</CardTitle>\n <CardDescription className=\"text-base\">\n Typography scale and font styles.\n </CardDescription>\n </CardHeader>\n </Card>\n </a>\n\n <a href=\"/components\" className=\"group\">\n <Card className=\"h-full transition-all hover:border-primary/50 hover:shadow-md\">\n <CardHeader>\n <CardTitle className=\"text-xl\">Components</CardTitle>\n <CardDescription className=\"text-base\">\n View all shadcn UI components.\n </CardDescription>\n </CardHeader>\n </Card>\n </a>\n\n <a href=\"/blocks\" className=\"group\">\n <Card className=\"h-full transition-all hover:border-primary/50 hover:shadow-md\">\n <CardHeader>\n <CardTitle className=\"text-xl\">Blocks</CardTitle>\n <CardDescription className=\"text-base\">\n Pre-built marketing blocks.\n </CardDescription>\n </CardHeader>\n </Card>\n </a>\n </div>\n </main>\n )\n}\n",
40
40
  "design-system/src/app/typography/page.tsx.hbs": "export default function TypographyPage() {\n return (\n <div className=\"container mx-auto max-w-4xl px-6 py-10 space-y-12\">\n <div className=\"space-y-4\">\n <h1 className=\"text-4xl font-bold tracking-tight\">Typography</h1>\n <p className=\"text-xl text-muted-foreground\">\n Typography scale and text styles for {{projectName}}.\n </p>\n </div>\n\n <section className=\"space-y-6\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Headings</h2>\n <div className=\"space-y-4\">\n <div className=\"flex items-baseline gap-4\">\n <span className=\"text-sm text-muted-foreground w-20\">h1</span>\n <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n Heading One\n </h1>\n </div>\n <div className=\"flex items-baseline gap-4\">\n <span className=\"text-sm text-muted-foreground w-20\">h2</span>\n <h2 className=\"scroll-m-20 text-3xl font-semibold tracking-tight\">\n Heading Two\n </h2>\n </div>\n <div className=\"flex items-baseline gap-4\">\n <span className=\"text-sm text-muted-foreground w-20\">h3</span>\n <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n Heading Three\n </h3>\n </div>\n <div className=\"flex items-baseline gap-4\">\n <span className=\"text-sm text-muted-foreground w-20\">h4</span>\n <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n Heading Four\n </h4>\n </div>\n </div>\n </section>\n\n <section className=\"space-y-6\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Body Text</h2>\n <div className=\"space-y-4\">\n <div>\n <span className=\"text-sm text-muted-foreground\">Large</span>\n <p className=\"text-lg text-muted-foreground\">\n The quick brown fox jumps over the lazy dog. This is large body text.\n </p>\n </div>\n <div>\n <span className=\"text-sm text-muted-foreground\">Default</span>\n <p className=\"leading-7\">\n The quick brown fox jumps over the lazy dog. This is default body text with proper line height for readability.\n </p>\n </div>\n <div>\n <span className=\"text-sm text-muted-foreground\">Small</span>\n <p className=\"text-sm text-muted-foreground\">\n The quick brown fox jumps over the lazy dog. This is small text.\n </p>\n </div>\n <div>\n <span className=\"text-sm text-muted-foreground\">Muted</span>\n <p className=\"text-sm text-muted-foreground\">\n The quick brown fox jumps over the lazy dog. This is muted text for secondary content.\n </p>\n </div>\n </div>\n </section>\n\n <section className=\"space-y-6\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Inline Styles</h2>\n <div className=\"space-y-4\">\n <p>\n This is <strong>bold text</strong> for emphasis.\n </p>\n <p>\n This is <em>italic text</em> for emphasis.\n </p>\n <p>\n This is <code className=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">inline code</code> for technical terms.\n </p>\n <p>\n This is a <a href=\"#\" className=\"font-medium text-primary underline underline-offset-4\">link</a> for navigation.\n </p>\n </div>\n </section>\n\n <section className=\"space-y-6\">\n <h2 className=\"text-2xl font-semibold border-b pb-2\">Lists</h2>\n <div className=\"grid gap-8 md:grid-cols-2\">\n <div>\n <span className=\"text-sm text-muted-foreground mb-2 block\">Unordered List</span>\n <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n <li>First item in the list</li>\n <li>Second item in the list</li>\n <li>Third item in the list</li>\n </ul>\n </div>\n <div>\n <span className=\"text-sm text-muted-foreground mb-2 block\">Ordered List</span>\n <ol className=\"my-6 ml-6 list-decimal [&>li]:mt-2\">\n <li>First numbered item</li>\n <li>Second numbered item</li>\n <li>Third numbered item</li>\n </ol>\n </div>\n </div>\n </section>\n </div>\n )\n}\n",
@@ -85,7 +85,7 @@ export const EMBEDDED_TEMPLATES: Record<string, string> = {
85
85
  "marketing/nextjs/src/app/features/page.tsx": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport {\n BentoFeatures,\n FeatureShowcase,\n LogoBanner,\n FinalCTA,\n} from \"@/components/blocks\"\n\nexport default function FeaturesPage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero */}\n <section className=\"py-16 md:py-24\">\n <div className=\"container mx-auto px-4 text-center\">\n <h1 className=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Powerful features for modern teams\n </h1>\n <p className=\"text-xl text-muted-foreground max-w-2xl mx-auto\">\n Everything you need to streamline workflows, boost productivity, and scale your business.\n </p>\n </div>\n </section>\n\n {/* Bento Features */}\n <BentoFeatures\n heading=\"Discover what SaaSify can do\"\n subheading=\"Everything you need to work smarter and scale faster\"\n />\n\n {/* Feature Showcase: Integrations */}\n <FeatureShowcase\n label=\"Seamless Integrations\"\n headline=\"Connect everything your team uses in one place\"\n description=\"Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically.\"\n features={[\n { text: \"100+ native integrations\" },\n { text: \"Two-way data sync\" },\n { text: \"Custom webhooks\" },\n { text: \"API access included\" },\n ]}\n link={{ label: \"Learn more\", href: \"#\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Analytics */}\n <FeatureShowcase\n label=\"Actionable Analytics\"\n headline=\"Make decisions backed by real-time data\"\n description=\"Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.\"\n features={[\n { text: \"Real-time dashboards\" },\n { text: \"Custom reports\" },\n { text: \"Team performance metrics\" },\n { text: \"Automated insights\" },\n ]}\n link={{ label: \"Learn more\", href: \"#\" }}\n imagePosition=\"left\"\n />\n\n {/* Feature Showcase: Automation */}\n <FeatureShowcase\n label=\"Workflow Automation\"\n headline=\"Eliminate busywork with smart automation\"\n description=\"Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.\"\n features={[\n { text: \"Visual workflow builder\" },\n { text: \"Conditional logic\" },\n { text: \"Scheduled triggers\" },\n { text: \"Cross-app automation\" },\n ]}\n link={{ label: \"Learn more\", href: \"#\" }}\n imagePosition=\"right\"\n />\n\n {/* Logo Banner */}\n <LogoBanner\n heading=\"Integrates with your favorite tools\"\n style=\"grid\"\n logos={[\n { name: \"Slack\", initials: \"SL\" },\n { name: \"Salesforce\", initials: \"SF\" },\n { name: \"HubSpot\", initials: \"HS\" },\n { name: \"Google Workspace\", initials: \"GW\" },\n { name: \"Zapier\", initials: \"ZP\" },\n { name: \"Jira\", initials: \"JI\" },\n ]}\n />\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to transform how your team works?\"\n subheading=\"Start your free trial today. No credit card required.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"View pricing\", href: \"/pricing\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
86
86
  "marketing/nextjs/src/app/features/security/page.tsx": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport { FinalCTA } from \"@/components/blocks\"\nimport { Shield, Lock, Key, Eye, Server, FileCheck } from \"lucide-react\"\n\nconst features = [\n {\n icon: <Shield className=\"h-6 w-6\" />,\n title: \"SOC 2 Type II Certified\",\n description:\n \"We've passed rigorous third-party audits to verify our security controls and practices.\",\n },\n {\n icon: <Lock className=\"h-6 w-6\" />,\n title: \"AES-256 Encryption\",\n description:\n \"All data is encrypted at rest and in transit using industry-standard encryption.\",\n },\n {\n icon: <Key className=\"h-6 w-6\" />,\n title: \"Single Sign-On (SSO)\",\n description:\n \"Connect with your identity provider. Support for SAML 2.0, OIDC, and OAuth.\",\n },\n {\n icon: <Eye className=\"h-6 w-6\" />,\n title: \"Audit Logs\",\n description:\n \"Track every action in your workspace. Full audit trails for compliance and security.\",\n },\n {\n icon: <Server className=\"h-6 w-6\" />,\n title: \"99.9% Uptime SLA\",\n description:\n \"We guarantee availability with redundant infrastructure across multiple regions.\",\n },\n {\n icon: <FileCheck className=\"h-6 w-6\" />,\n title: \"GDPR Compliant\",\n description:\n \"Full compliance with GDPR, CCPA, and other privacy regulations. Your data, your control.\",\n },\n]\n\nconst certifications = [\n { name: \"SOC 2 Type II\", description: \"Audited security controls\" },\n { name: \"GDPR\", description: \"EU data protection\" },\n { name: \"CCPA\", description: \"California privacy\" },\n { name: \"ISO 27001\", description: \"Information security\" },\n]\n\nexport default function SecurityPage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero */}\n <section className=\"py-16 md:py-24\">\n <div className=\"container mx-auto px-4\">\n <div className=\"max-w-3xl mx-auto text-center\">\n <div className=\"inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6\">\n Security\n </div>\n <h1 className=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Enterprise-grade security for every team\n </h1>\n <p className=\"text-xl text-muted-foreground mb-8\">\n Your data is protected by industry-leading security practices. SOC 2 certified, GDPR compliant, and built for enterprise.\n </p>\n <div className=\"flex flex-wrap gap-4 justify-center\">\n <a\n href=\"/sign-up\"\n className=\"inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors\"\n >\n Start free trial\n </a>\n <a\n href=\"/contact\"\n className=\"inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors\"\n >\n Contact security team\n </a>\n </div>\n </div>\n </div>\n </section>\n\n {/* Certifications */}\n <section className=\"pb-16 md:pb-24\">\n <div className=\"container mx-auto px-4\">\n <div className=\"grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto\">\n {certifications.map((cert) => (\n <div\n key={cert.name}\n className=\"text-center p-6 rounded-lg border border-border bg-card\"\n >\n <div className=\"font-semibold mb-1\">{cert.name}</div>\n <div className=\"text-sm text-muted-foreground\">{cert.description}</div>\n </div>\n ))}\n </div>\n </div>\n </section>\n\n {/* Features Grid */}\n <section className=\"py-16 md:py-24 bg-muted/30\">\n <div className=\"container mx-auto px-4\">\n <div className=\"text-center mb-12 md:mb-16\">\n <h2 className=\"text-3xl md:text-4xl font-bold tracking-tight mb-4\">\n Security you can trust\n </h2>\n <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n We take security seriously at every layer of our platform.\n </p>\n </div>\n\n <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto\">\n {features.map((feature) => (\n <div\n key={feature.title}\n className=\"bg-card rounded-lg border border-border p-6\"\n >\n <div className=\"w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4\">\n {feature.icon}\n </div>\n <h3 className=\"text-lg font-semibold mb-2\">{feature.title}</h3>\n <p className=\"text-muted-foreground text-sm\">{feature.description}</p>\n </div>\n ))}\n </div>\n </div>\n </section>\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to secure your workflow?\"\n subheading=\"Start your free trial with enterprise-grade security from day one.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"View security docs\", href: \"#\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
87
87
  "marketing/nextjs/src/app/features/workflows/page.tsx": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport { FinalCTA } from \"@/components/blocks\"\nimport { Workflow, Users, FileText, CheckSquare, Kanban, Calendar } from \"lucide-react\"\n\nconst features = [\n {\n icon: <Workflow className=\"h-6 w-6\" />,\n title: \"Custom Workflows\",\n description:\n \"Design workflows that match how your team actually works. Fully customizable stages and transitions.\",\n },\n {\n icon: <Users className=\"h-6 w-6\" />,\n title: \"Team Collaboration\",\n description:\n \"Assign tasks, leave comments, and collaborate in real-time. Everyone stays in sync.\",\n },\n {\n icon: <FileText className=\"h-6 w-6\" />,\n title: \"Templates Library\",\n description:\n \"Start fast with pre-built templates for common workflows. Customize as needed.\",\n },\n {\n icon: <CheckSquare className=\"h-6 w-6\" />,\n title: \"Task Dependencies\",\n description:\n \"Link tasks together with dependencies. See the critical path at a glance.\",\n },\n {\n icon: <Kanban className=\"h-6 w-6\" />,\n title: \"Kanban Boards\",\n description:\n \"Visualize your workflow with drag-and-drop kanban boards. Track progress instantly.\",\n },\n {\n icon: <Calendar className=\"h-6 w-6\" />,\n title: \"Timeline View\",\n description:\n \"See your workflow on a timeline. Plan sprints and manage deadlines visually.\",\n },\n]\n\nexport default function WorkflowsPage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero */}\n <section className=\"py-16 md:py-24\">\n <div className=\"container mx-auto px-4\">\n <div className=\"max-w-3xl mx-auto text-center\">\n <div className=\"inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6\">\n Workflows\n </div>\n <h1 className=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Build workflows that match how you work\n </h1>\n <p className=\"text-xl text-muted-foreground mb-8\">\n Design custom workflows with kanban boards, timelines, and task dependencies. Keep your team aligned and projects on track.\n </p>\n <div className=\"flex flex-wrap gap-4 justify-center\">\n <a\n href=\"/sign-up\"\n className=\"inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors\"\n >\n Start free trial\n </a>\n <a\n href=\"/demo\"\n className=\"inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors\"\n >\n Watch demo\n </a>\n </div>\n </div>\n </div>\n </section>\n\n {/* Workflow Preview */}\n <section className=\"pb-16 md:pb-24\">\n <div className=\"container mx-auto px-4\">\n <div className=\"max-w-5xl mx-auto\">\n <div className=\"aspect-video bg-gradient-to-br from-primary/20 to-primary/5 rounded-lg border border-border flex items-center justify-center\">\n <div className=\"text-center text-muted-foreground\">\n <Kanban className=\"h-16 w-16 mx-auto mb-4 opacity-50\" />\n <p>Workflow Preview</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n {/* Features Grid */}\n <section className=\"py-16 md:py-24 bg-muted/30\">\n <div className=\"container mx-auto px-4\">\n <div className=\"text-center mb-12 md:mb-16\">\n <h2 className=\"text-3xl md:text-4xl font-bold tracking-tight mb-4\">\n Everything you need to manage work\n </h2>\n <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n Powerful features that adapt to any team or project type.\n </p>\n </div>\n\n <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto\">\n {features.map((feature) => (\n <div\n key={feature.title}\n className=\"bg-card rounded-lg border border-border p-6\"\n >\n <div className=\"w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4\">\n {feature.icon}\n </div>\n <h3 className=\"text-lg font-semibold mb-2\">{feature.title}</h3>\n <p className=\"text-muted-foreground text-sm\">{feature.description}</p>\n </div>\n ))}\n </div>\n </div>\n </section>\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to streamline your workflow?\"\n subheading=\"Start your free trial and build your first workflow in minutes.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Explore templates\", href: \"#\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
88
- "marketing/nextjs/src/app/globals.css.hbs": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n\t/* Colors */\n\t--color-background: var(--background);\n\t--color-foreground: var(--foreground);\n\n\t--color-card: var(--card);\n\t--color-card-foreground: var(--card-foreground);\n\n\t--color-popover: var(--popover);\n\t--color-popover-foreground: var(--popover-foreground);\n\n\t--color-primary: var(--primary);\n\t--color-primary-foreground: var(--primary-foreground);\n\n\t--color-secondary: var(--secondary);\n\t--color-secondary-foreground: var(--secondary-foreground);\n\n\t--color-muted: var(--muted);\n\t--color-muted-foreground: var(--muted-foreground);\n\n\t--color-accent: var(--accent);\n\t--color-accent-foreground: var(--accent-foreground);\n\n\t--color-destructive: var(--destructive);\n\n\t--color-border: var(--border);\n\t--color-input: var(--input);\n\t--color-ring: var(--ring);\n\n\t--color-chart-1: var(--chart-1);\n\t--color-chart-2: var(--chart-2);\n\t--color-chart-3: var(--chart-3);\n\t--color-chart-4: var(--chart-4);\n\t--color-chart-5: var(--chart-5);\n\n\t/* Border radius */\n\t--radius-sm: calc(var(--radius) - 4px);\n\t--radius-md: calc(var(--radius) - 2px);\n\t--radius-lg: var(--radius);\n\t--radius-xl: calc(var(--radius) + 4px);\n\n\t/* Fonts */\n\t--font-sans: var(--font-geist-sans), system-ui, sans-serif;\n\t--font-mono: var(--font-geist-mono), monospace;\n\n\t/* Container */\n\t--container-sm: 40rem;\n\t--container-md: 48rem;\n\t--container-lg: 64rem;\n\t--container-xl: 80rem;\n\t--container-2xl: 96rem;\n\n\t/* Animations */\n\t--animate-accordion-down: accordion-down 0.2s ease-out;\n\t--animate-accordion-up: accordion-up 0.2s ease-out;\n}\n\n@keyframes accordion-down {\n\tfrom {\n\t\theight: 0;\n\t}\n\tto {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n}\n\n@keyframes accordion-up {\n\tfrom {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n\tto {\n\t\theight: 0;\n\t}\n}\n\n/* ========================================\n THEME COLOR VARIABLES\n ======================================== */\n\n:root {\n\t--radius: 0.625rem;\n\t--background: oklch(1 0 0);\n\t--foreground: oklch(0.145 0 0);\n\t--card: oklch(1 0 0);\n\t--card-foreground: oklch(0.145 0 0);\n\t--popover: oklch(1 0 0);\n\t--popover-foreground: oklch(0.145 0 0);\n\t--secondary: oklch(0.97 0 0);\n\t--secondary-foreground: oklch(0.205 0 0);\n\t--muted: oklch(0.97 0 0);\n\t--muted-foreground: oklch(0.556 0 0);\n\t--accent: oklch(0.97 0 0);\n\t--accent-foreground: oklch(0.205 0 0);\n\t--destructive: oklch(0.577 0.245 27.325);\n\t--border: oklch(0.922 0 0);\n\t--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.546 0.245 262.881);\n\t--primary-foreground: oklch(0.985 0.002 247.858);\n\t--ring: oklch(0.546 0.245 262.881);\n\t--chart-1: oklch(0.546 0.245 262.881);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.596 0.145 163.225);\n\t--primary-foreground: oklch(0.982 0.018 155.826);\n\t--ring: oklch(0.596 0.145 163.225);\n\t--chart-1: oklch(0.596 0.145 163.225);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.627 0.265 303.9);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.627 0.265 303.9);\n\t--chart-1: oklch(0.627 0.265 303.9);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.637 0.237 25.331);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.637 0.237 25.331);\n\t--chart-1: oklch(0.637 0.237 25.331);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.705 0.191 47.604);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.705 0.191 47.604);\n\t--chart-1: oklch(0.705 0.191 47.604);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.769 0.188 70.08);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.769 0.188 70.08);\n\t--chart-1: oklch(0.769 0.188 70.08);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.715 0.143 215.221);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.715 0.143 215.221);\n\t--chart-1: oklch(0.715 0.143 215.221);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.667 0.295 322.15);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.667 0.295 322.15);\n\t--chart-1: oklch(0.667 0.295 322.15);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.585 0.233 277.117);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.585 0.233 277.117);\n\t--chart-1: oklch(0.585 0.233 277.117);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.768 0.233 130.85);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.768 0.233 130.85);\n\t--chart-1: oklch(0.768 0.233 130.85);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.718 0.202 349.761);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.718 0.202 349.761);\n\t--chart-1: oklch(0.718 0.202 349.761);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.645 0.246 16.439);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.645 0.246 16.439);\n\t--chart-1: oklch(0.645 0.246 16.439);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.685 0.169 237.323);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.685 0.169 237.323);\n\t--chart-1: oklch(0.685 0.169 237.323);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.704 0.14 182.503);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.704 0.14 182.503);\n\t--chart-1: oklch(0.704 0.14 182.503);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.606 0.25 292.717);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.606 0.25 292.717);\n\t--chart-1: oklch(0.606 0.25 292.717);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.795 0.184 86.047);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.795 0.184 86.047);\n\t--chart-1: oklch(0.795 0.184 86.047);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.646 0.222 41.116);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n\t--background: oklch(0.145 0 0);\n\t--foreground: oklch(0.985 0 0);\n\t--card: oklch(0.205 0 0);\n\t--card-foreground: oklch(0.985 0 0);\n\t--popover: oklch(0.269 0 0);\n\t--popover-foreground: oklch(0.985 0 0);\n\t--secondary: oklch(0.269 0 0);\n\t--secondary-foreground: oklch(0.985 0 0);\n\t--muted: oklch(0.269 0 0);\n\t--muted-foreground: oklch(0.708 0 0);\n\t--accent: oklch(0.371 0 0);\n\t--accent-foreground: oklch(0.985 0 0);\n\t--destructive: oklch(0.704 0.191 22.216);\n\t--border: oklch(1 0 0 / 10%);\n\t--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.623 0.214 262.881);\n\t--primary-foreground: oklch(0.273 0.033 256.848);\n\t--ring: oklch(0.623 0.214 262.881);\n\t--chart-1: oklch(0.623 0.214 262.881);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.714 0.203 305.504);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.714 0.203 305.504);\n\t--chart-1: oklch(0.714 0.203 305.504);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.704 0.191 22.216);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.704 0.191 22.216);\n\t--chart-1: oklch(0.704 0.191 22.216);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.792 0.17 52.615);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.792 0.17 52.615);\n\t--chart-1: oklch(0.792 0.17 52.615);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.828 0.189 84.429);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.828 0.189 84.429);\n\t--chart-1: oklch(0.828 0.189 84.429);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.789 0.154 211.53);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.789 0.154 211.53);\n\t--chart-1: oklch(0.789 0.154 211.53);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.765 0.166 160.391);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.765 0.166 160.391);\n\t--chart-1: oklch(0.765 0.166 160.391);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.74 0.238 322.16);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.74 0.238 322.16);\n\t--chart-1: oklch(0.74 0.238 322.16);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.673 0.182 276.935);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.673 0.182 276.935);\n\t--chart-1: oklch(0.673 0.182 276.935);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.841 0.238 128.85);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.841 0.238 128.85);\n\t--chart-1: oklch(0.841 0.238 128.85);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.775 0.181 349.761);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.775 0.181 349.761);\n\t--chart-1: oklch(0.775 0.181 349.761);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.712 0.194 13.428);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.712 0.194 13.428);\n\t--chart-1: oklch(0.712 0.194 13.428);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.756 0.143 232.661);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.756 0.143 232.661);\n\t--chart-1: oklch(0.756 0.143 232.661);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.777 0.152 181.912);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.777 0.152 181.912);\n\t--chart-1: oklch(0.777 0.152 181.912);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.702 0.183 293.541);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.702 0.183 293.541);\n\t--chart-1: oklch(0.702 0.183 293.541);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.852 0.199 91.936);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.852 0.199 91.936);\n\t--chart-1: oklch(0.852 0.199 91.936);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n/* ========================================\n BASE STYLES\n ======================================== */\n\n@layer base {\n\t* {\n\t\t@apply border-border outline-ring/50;\n\t}\n\tbody {\n\t\t@apply bg-background text-foreground;\n\t}\n}\n\n/* Container utility */\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n\tfont-size: 2.25rem !important;\n\tline-height: 2.5rem !important;\n\tfont-weight: 700 !important;\n\tletter-spacing: -0.025em !important;\n\tmargin-bottom: 1.5rem !important;\n\tcolor: var(--color-foreground) !important;\n}\n\n.hero-content p {\n\tfont-size: 1.25rem !important;\n\tline-height: 1.75rem !important;\n\tcolor: var(--color-muted-foreground) !important;\n\tmax-width: 42rem;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmargin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n\tcolor: white !important;\n}\n\n.hero-content--dark p {\n\tcolor: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n\t.hero-content h1 {\n\t\tfont-size: 3.75rem !important;\n\t\tline-height: 1 !important;\n\t}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n.hero-content--left p {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n\tposition: relative;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\theight: 25rem;\n\twidth: 100%;\n\tbackground: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n\t.hero-showcase {\n\t\theight: 31.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-showcase {\n\t\theight: 37.5rem;\n\t}\n}\n\n.hero-bg-image {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 0;\n\topacity: 0.1;\n}\n\n.hero-bg-image img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center;\n}\n\n.hero-mockup-centered {\n\tposition: relative;\n\tz-index: 10;\n\tpadding: 2rem;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.hero-mockup-centered {\n\t\tpadding: 3rem;\n\t}\n}\n\n.mockup-wrapper {\n\tbackground: var(--color-background);\n\tborder-radius: 12px;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n\toverflow: hidden;\n\tanimation: mockup-entrance 0.8s ease-out;\n\twidth: 100%;\n}\n\n.mockup-wrapper img {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: block;\n}\n\n@keyframes mockup-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(30px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tbackground: var(--color-muted);\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n\tdisplay: flex;\n\tgap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n\tbackground: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n\tbackground: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n\tbackground: #27ca40;\n}\n\n.mockup-chrome-title {\n\tflex: 1;\n\ttext-align: center;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n\twidth: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n\tdisplay: flex;\n\tmin-height: 400px;\n}\n\n.mockup-sidebar {\n\twidth: 220px;\n\tbackground: var(--color-card);\n\tborder-right: 1px solid var(--color-border);\n\tflex-shrink: 0;\n}\n\n.sidebar-header {\n\tpadding: 16px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.logo-icon {\n\twidth: 28px;\n\theight: 28px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tborder-radius: 6px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 700;\n\tfont-size: 14px;\n}\n\n.logo-text {\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n}\n\n.sidebar-nav {\n\tpadding: 8px;\n}\n\n.sidebar-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 10px 12px;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\ttransition: all 0.15s ease;\n\tcursor: pointer;\n}\n\n.sidebar-item:hover {\n\tbackground: var(--color-accent);\n\tcolor: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n\tcolor: var(--color-primary);\n}\n\n.sidebar-icon {\n\tfont-size: 16px;\n}\n\n.sidebar-label {\n\tflex: 1;\n}\n\n.sidebar-badge {\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tfont-size: 11px;\n\tpadding: 2px 6px;\n\tborder-radius: 10px;\n\tfont-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--color-background);\n}\n\n.main-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 16px 20px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.header-title h2 {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0;\n\tcolor: var(--color-foreground);\n}\n\n.header-breadcrumb {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.header-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.action-btn {\n\tpadding: 8px 16px;\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tborder: none;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n}\n\n.action-btn--success {\n\tbackground: #27ca40;\n}\n\n.action-btn--featured {\n\tbackground: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.editor-panel {\n\tflex: 1;\n\tpadding: 20px;\n\tborder-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n\tmargin-bottom: 20px;\n}\n\n.editor-label {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n\tmargin-bottom: 6px;\n}\n\n.editor-input {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.input-text {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-cursor {\n\twidth: 2px;\n\theight: 18px;\n\tbackground: var(--color-primary);\n\tanimation: blink 1s infinite;\n\tmargin-left: 2px;\n}\n\n@keyframes blink {\n\t0%,\n\t50% {\n\t\topacity: 1;\n\t}\n\t51%,\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.editor-select {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.select-arrow {\n\tfont-size: 10px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tmin-height: 80px;\n}\n\n.textarea-text {\n\ttransition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n\tcolor: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n\twidth: 320px;\n\tpadding: 20px;\n\tbackground: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 16px;\n}\n\n.preview-label {\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.preview-url {\n\tfont-size: 11px;\n\tcolor: var(--color-muted-foreground);\n\tfont-family: monospace;\n}\n\n.preview-card {\n\tbackground: var(--color-card);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition: all 0.3s ease;\n}\n\n.preview-badge {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tfont-size: 11px;\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tanimation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n\tfrom {\n\t\ttransform: scale(0);\n\t\topacity: 0;\n\t}\n\tto {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}\n\n.preview-image {\n\theight: 120px;\n\tbackground: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 40px;\n}\n\n.preview-content {\n\tpadding: 16px;\n}\n\n.preview-category-tag {\n\tdisplay: inline-block;\n\tfont-size: 11px;\n\tcolor: var(--color-primary);\n\tfont-weight: 500;\n\tmargin-bottom: 8px;\n}\n\n.preview-title {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0 0 8px;\n\tcolor: var(--color-foreground);\n}\n\n.preview-description {\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\tline-height: 1.5;\n\tmargin: 0 0 12px;\n}\n\n.preview-meta {\n\tdisplay: flex;\n\tgap: 8px;\n\tfont-size: 12px;\n}\n\n.meta-rating {\n\tcolor: #ffc24a;\n}\n\n.meta-reviews {\n\tcolor: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 24px;\n\tpadding: 16px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.indicator {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: 6px 12px;\n\tborder-radius: 20px;\n\ttransition: all 0.2s ease;\n}\n\n.indicator:hover {\n\tbackground: var(--color-accent);\n}\n\n.indicator--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: var(--color-muted-foreground);\n\ttransition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n\tbackground: var(--color-primary);\n\tbox-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n\tcolor: var(--color-foreground);\n\tfont-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n\toverflow: hidden;\n\tmask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n\tdisplay: flex;\n\tanimation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n\tanimation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n\t0% {\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n.logo-item {\n\tflex-shrink: 0;\n\tmin-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n\t.mockup-content {\n\t\tflex-direction: column;\n\t}\n\n\t.mockup-sidebar {\n\t\twidth: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.sidebar-nav {\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t}\n\n\t.sidebar-item {\n\t\twhite-space: nowrap;\n\t}\n\n\t.main-split {\n\t\tflex-direction: column;\n\t}\n\n\t.editor-panel {\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.preview-panel {\n\t\twidth: 100%;\n\t}\n\n\t.mockup-indicators {\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\t}\n\n\t.indicator-label {\n\t\tdisplay: none;\n\t}\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n\tanimation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(10px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.feature-showcase-content {\n\tanimation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.stat-number {\n\tanimation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n\ttransition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n\ttransform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n\t0%,\n\t100% {\n\t\ttransform: translateY(0);\n\t}\n\t50% {\n\t\ttransform: translateY(-10px);\n\t}\n}\n\n.cta-decorative {\n\tanimation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.feature-card {\n\tanimation: card-entrance 0.4s ease-out;\n\tanimation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n\tanimation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n\tanimation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n\tanimation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n\tanimation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n\tanimation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n\tanimation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n\tscroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.cta-button::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tbackground: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n\topacity: 0;\n\ttransition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n\topacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n",
88
+ "marketing/nextjs/src/app/globals.css.hbs": "/* Import shared design tokens from @repo/ui */\n@import \"@repo/ui/globals.css\";\n\n/* Marketing app specific overrides */\n@theme inline {\n\t--font-sans: var(--font-geist-sans), system-ui, sans-serif;\n\t--font-mono: var(--font-geist-mono), monospace;\n\n\t/* Container */\n\t--container-sm: 40rem;\n\t--container-md: 48rem;\n\t--container-lg: 64rem;\n\t--container-xl: 80rem;\n\t--container-2xl: 96rem;\n\n\t/* Animations */\n\t--animate-accordion-down: accordion-down 0.2s ease-out;\n\t--animate-accordion-up: accordion-up 0.2s ease-out;\n}\n\n@keyframes accordion-down {\n\tfrom {\n\t\theight: 0;\n\t}\n\tto {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n}\n\n@keyframes accordion-up {\n\tfrom {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n\tto {\n\t\theight: 0;\n\t}\n}\n\n/* Container utility */\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n\tfont-size: 2.25rem !important;\n\tline-height: 2.5rem !important;\n\tfont-weight: 700 !important;\n\tletter-spacing: -0.025em !important;\n\tmargin-bottom: 1.5rem !important;\n\tcolor: var(--color-foreground) !important;\n}\n\n.hero-content p {\n\tfont-size: 1.25rem !important;\n\tline-height: 1.75rem !important;\n\tcolor: var(--color-muted-foreground) !important;\n\tmax-width: 42rem;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmargin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n\tcolor: white !important;\n}\n\n.hero-content--dark p {\n\tcolor: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n\t.hero-content h1 {\n\t\tfont-size: 3.75rem !important;\n\t\tline-height: 1 !important;\n\t}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n.hero-content--left p {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n\tposition: relative;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\theight: 25rem;\n\twidth: 100%;\n\tbackground: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n\t.hero-showcase {\n\t\theight: 31.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-showcase {\n\t\theight: 37.5rem;\n\t}\n}\n\n.hero-bg-image {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 0;\n\topacity: 0.1;\n}\n\n.hero-bg-image img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center;\n}\n\n.hero-mockup-centered {\n\tposition: relative;\n\tz-index: 10;\n\tpadding: 2rem;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.hero-mockup-centered {\n\t\tpadding: 3rem;\n\t}\n}\n\n.mockup-wrapper {\n\tbackground: var(--color-background);\n\tborder-radius: 12px;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n\toverflow: hidden;\n\tanimation: mockup-entrance 0.8s ease-out;\n\twidth: 100%;\n}\n\n.mockup-wrapper img {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: block;\n}\n\n@keyframes mockup-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(30px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tbackground: var(--color-muted);\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n\tdisplay: flex;\n\tgap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n\tbackground: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n\tbackground: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n\tbackground: #27ca40;\n}\n\n.mockup-chrome-title {\n\tflex: 1;\n\ttext-align: center;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n\twidth: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n\tdisplay: flex;\n\tmin-height: 400px;\n}\n\n.mockup-sidebar {\n\twidth: 220px;\n\tbackground: var(--color-card);\n\tborder-right: 1px solid var(--color-border);\n\tflex-shrink: 0;\n}\n\n.sidebar-header {\n\tpadding: 16px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.logo-icon {\n\twidth: 28px;\n\theight: 28px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tborder-radius: 6px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 700;\n\tfont-size: 14px;\n}\n\n.logo-text {\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n}\n\n.sidebar-nav {\n\tpadding: 8px;\n}\n\n.sidebar-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 10px 12px;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\ttransition: all 0.15s ease;\n\tcursor: pointer;\n}\n\n.sidebar-item:hover {\n\tbackground: var(--color-accent);\n\tcolor: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n\tcolor: var(--color-primary);\n}\n\n.sidebar-icon {\n\tfont-size: 16px;\n}\n\n.sidebar-label {\n\tflex: 1;\n}\n\n.sidebar-badge {\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tfont-size: 11px;\n\tpadding: 2px 6px;\n\tborder-radius: 10px;\n\tfont-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--color-background);\n}\n\n.main-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 16px 20px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.header-title h2 {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0;\n\tcolor: var(--color-foreground);\n}\n\n.header-breadcrumb {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.header-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.action-btn {\n\tpadding: 8px 16px;\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tborder: none;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n}\n\n.action-btn--success {\n\tbackground: #27ca40;\n}\n\n.action-btn--featured {\n\tbackground: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.editor-panel {\n\tflex: 1;\n\tpadding: 20px;\n\tborder-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n\tmargin-bottom: 20px;\n}\n\n.editor-label {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n\tmargin-bottom: 6px;\n}\n\n.editor-input {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.input-text {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-cursor {\n\twidth: 2px;\n\theight: 18px;\n\tbackground: var(--color-primary);\n\tanimation: blink 1s infinite;\n\tmargin-left: 2px;\n}\n\n@keyframes blink {\n\t0%,\n\t50% {\n\t\topacity: 1;\n\t}\n\t51%,\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.editor-select {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.select-arrow {\n\tfont-size: 10px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tmin-height: 80px;\n}\n\n.textarea-text {\n\ttransition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n\tcolor: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n\twidth: 320px;\n\tpadding: 20px;\n\tbackground: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 16px;\n}\n\n.preview-label {\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.preview-url {\n\tfont-size: 11px;\n\tcolor: var(--color-muted-foreground);\n\tfont-family: monospace;\n}\n\n.preview-card {\n\tbackground: var(--color-card);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition: all 0.3s ease;\n}\n\n.preview-badge {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tfont-size: 11px;\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tanimation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n\tfrom {\n\t\ttransform: scale(0);\n\t\topacity: 0;\n\t}\n\tto {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}\n\n.preview-image {\n\theight: 120px;\n\tbackground: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 40px;\n}\n\n.preview-content {\n\tpadding: 16px;\n}\n\n.preview-category-tag {\n\tdisplay: inline-block;\n\tfont-size: 11px;\n\tcolor: var(--color-primary);\n\tfont-weight: 500;\n\tmargin-bottom: 8px;\n}\n\n.preview-title {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0 0 8px;\n\tcolor: var(--color-foreground);\n}\n\n.preview-description {\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\tline-height: 1.5;\n\tmargin: 0 0 12px;\n}\n\n.preview-meta {\n\tdisplay: flex;\n\tgap: 8px;\n\tfont-size: 12px;\n}\n\n.meta-rating {\n\tcolor: #ffc24a;\n}\n\n.meta-reviews {\n\tcolor: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 24px;\n\tpadding: 16px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.indicator {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: 6px 12px;\n\tborder-radius: 20px;\n\ttransition: all 0.2s ease;\n}\n\n.indicator:hover {\n\tbackground: var(--color-accent);\n}\n\n.indicator--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: var(--color-muted-foreground);\n\ttransition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n\tbackground: var(--color-primary);\n\tbox-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n\tcolor: var(--color-foreground);\n\tfont-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n\toverflow: hidden;\n\tmask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n\tdisplay: flex;\n\tanimation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n\tanimation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n\t0% {\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n.logo-item {\n\tflex-shrink: 0;\n\tmin-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n\t.mockup-content {\n\t\tflex-direction: column;\n\t}\n\n\t.mockup-sidebar {\n\t\twidth: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.sidebar-nav {\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t}\n\n\t.sidebar-item {\n\t\twhite-space: nowrap;\n\t}\n\n\t.main-split {\n\t\tflex-direction: column;\n\t}\n\n\t.editor-panel {\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.preview-panel {\n\t\twidth: 100%;\n\t}\n\n\t.mockup-indicators {\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\t}\n\n\t.indicator-label {\n\t\tdisplay: none;\n\t}\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n\tanimation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(10px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.feature-showcase-content {\n\tanimation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.stat-number {\n\tanimation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n\ttransition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n\ttransform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n\t0%,\n\t100% {\n\t\ttransform: translateY(0);\n\t}\n\t50% {\n\t\ttransform: translateY(-10px);\n\t}\n}\n\n.cta-decorative {\n\tanimation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.feature-card {\n\tanimation: card-entrance 0.4s ease-out;\n\tanimation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n\tanimation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n\tanimation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n\tanimation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n\tanimation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n\tanimation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n\tanimation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n\tscroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.cta-button::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tbackground: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n\topacity: 0;\n\ttransition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n\topacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n",
89
89
  "marketing/nextjs/src/app/layout.tsx.hbs": "import type { Metadata } from 'next'\nimport { Geist, Geist_Mono } from 'next/font/google'\nimport { ThemeProvider } from '@/components/ThemeProvider'\nimport './globals.css'\n\nconst geistSans = Geist({\n variable: '--font-geist-sans',\n subsets: ['latin'],\n})\n\nconst geistMono = Geist_Mono({\n variable: '--font-geist-mono',\n subsets: ['latin'],\n})\n\nexport const metadata: Metadata = {\n title: 'SaaSify - The modern platform for growing teams',\n description: 'Transform your workflow with our all-in-one platform. Streamline operations, boost productivity, and scale your business with powerful tools designed for modern teams.',\n keywords: ['SaaS', 'productivity', 'workflow', 'automation', 'team collaboration'],\n openGraph: {\n title: 'SaaSify - The modern platform for growing teams',\n description: 'Transform your workflow with our all-in-one platform.',\n type: 'website',\n },\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <html lang=\"en\" suppressHydrationWarning>\n <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>\n <ThemeProvider\n attribute=\"class\"\n defaultTheme=\"system\"\n enableSystem\n disableTransitionOnChange\n >\n {children}\n </ThemeProvider>\n </body>\n </html>\n )\n}\n",
90
90
  "marketing/nextjs/src/app/page.tsx": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport { ProductShowcaseHero } from \"@/components/heros\"\nimport {\n LogoBanner,\n ProofBanner,\n BentoFeatures,\n FeatureShowcase,\n IndustryTabs,\n TestimonialsGrid,\n TrustColumns,\n PricingTable,\n FinalCTA,\n} from \"@/components/blocks\"\n\nexport default function HomePage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero Section */}\n <ProductShowcaseHero\n headline=\"The modern platform for growing teams\"\n description=\"Streamline workflows, boost productivity, and scale your business with one powerful platform.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Watch demo\", href: \"/demo\", variant: \"outline\" },\n ]}\n />\n\n {/* Logo Banner - Social proof */}\n <LogoBanner\n heading=\"Trusted by fast-growing companies everywhere\"\n style=\"scroll\"\n />\n\n {/* Value Proposition */}\n <ProofBanner\n headline=\"Transform how your team works, collaborates, and grows\"\n subtext=\"Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"outline\" },\n ]}\n />\n\n {/* Bento Features */}\n <BentoFeatures\n heading=\"Discover what SaaSify can do\"\n subheading=\"Everything you need to work smarter and scale faster\"\n />\n\n {/* Feature Showcase: Integrations */}\n <FeatureShowcase\n label=\"Seamless Integrations\"\n headline=\"Connect everything your team uses in one place\"\n description=\"Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically.\"\n features={[\n { text: \"100+ native integrations\" },\n { text: \"Two-way data sync\" },\n { text: \"Custom webhooks\" },\n { text: \"API access included\" },\n ]}\n link={{ label: \"Explore integrations\", href: \"/features\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Analytics */}\n <FeatureShowcase\n label=\"Actionable Analytics\"\n headline=\"Make decisions backed by real-time data\"\n description=\"Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.\"\n features={[\n { text: \"Real-time dashboards\" },\n { text: \"Custom reports\" },\n { text: \"Team performance metrics\" },\n { text: \"Automated insights\" },\n ]}\n link={{ label: \"Learn about analytics\", href: \"/features\" }}\n imagePosition=\"left\"\n />\n\n {/* Feature Showcase: Automation */}\n <FeatureShowcase\n label=\"Workflow Automation\"\n headline=\"Eliminate busywork with smart automation\"\n description=\"Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.\"\n features={[\n { text: \"Visual workflow builder\" },\n { text: \"Conditional logic\" },\n { text: \"Scheduled triggers\" },\n { text: \"Cross-app automation\" },\n ]}\n link={{ label: \"See automation features\", href: \"/features\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Collaboration */}\n <FeatureShowcase\n label=\"Team Collaboration\"\n headline=\"Work together seamlessly, from anywhere\"\n description=\"Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team.\"\n features={[\n { text: \"Real-time collaboration\" },\n { text: \"Shared workspaces\" },\n { text: \"Comments and mentions\" },\n { text: \"Activity tracking\" },\n ]}\n link={{ label: \"Explore collaboration\", href: \"/features\" }}\n imagePosition=\"left\"\n />\n\n {/* Industry Tabs */}\n <IndustryTabs\n heading=\"Solutions that deliver real results\"\n subheading=\"Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.\"\n />\n\n {/* Testimonials */}\n <TestimonialsGrid\n heading=\"Loved by teams at companies of all sizes\"\n subheading=\"See how leading teams use SaaSify to drive growth and productivity.\"\n />\n\n {/* Trust Columns */}\n <TrustColumns />\n\n {/* Second Logo Banner - Integrations */}\n <LogoBanner\n heading=\"Integrates with your favorite tools\"\n style=\"grid\"\n logos={[\n { name: \"Slack\", initials: \"SL\" },\n { name: \"Salesforce\", initials: \"SF\" },\n { name: \"HubSpot\", initials: \"HS\" },\n { name: \"Google Workspace\", initials: \"GW\" },\n { name: \"Zapier\", initials: \"ZP\" },\n { name: \"Jira\", initials: \"JI\" },\n ]}\n />\n\n {/* Pricing */}\n <PricingTable\n heading=\"Simple, transparent pricing\"\n subheading=\"Start free, upgrade as your team grows. No hidden fees.\"\n />\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to transform how your team works?\"\n subheading=\"Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
91
91
  "marketing/nextjs/src/app/pricing/page.tsx": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport { PricingTable, FinalCTA } from \"@/components/blocks\"\n\nexport default function PricingPage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero */}\n <section className=\"py-16 md:py-24\">\n <div className=\"container mx-auto px-4 text-center\">\n <h1 className=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Simple, transparent pricing\n </h1>\n <p className=\"text-xl text-muted-foreground max-w-2xl mx-auto\">\n Start free, upgrade as your team grows. No hidden fees, no surprises.\n </p>\n </div>\n </section>\n\n {/* Pricing Table */}\n <PricingTable\n heading=\"\"\n subheading=\"\"\n />\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to get started?\"\n subheading=\"Join thousands of teams who chose the smarter way to work.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Contact sales\", href: \"/contact\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
@@ -389,13 +389,14 @@ export const EMBEDDED_TEMPLATES: Record<string, string> = {
389
389
  "packages/config-typescript/base.json.hbs": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"incremental\": true\n },\n \"exclude\": [\"node_modules\"]\n}\n",
390
390
  "packages/config-typescript/nextjs.json.hbs": "{\n \"extends\": \"./base.json\",\n \"compilerOptions\": {\n \"jsx\": \"react-jsx\",\n \"plugins\": [{ \"name\": \"next\" }]\n }\n}\n",
391
391
  "packages/config-typescript/package.json.hbs": "{\n \"name\": \"@repo/config-typescript\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"exports\": {\n \"./base.json\": \"./base.json\",\n \"./nextjs.json\": \"./nextjs.json\"\n },\n \"files\": [\"base.json\", \"nextjs.json\"]\n}\n",
392
- "packages/ui/package.json.hbs": "{\n \"name\": \"@repo/ui\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"main\": \"./src/index.ts\",\n \"types\": \"./src/index.ts\",\n \"exports\": {\n \".\": \"./src/index.ts\",\n \"./styles.css\": {\n \"style\": \"./src/styles.css\",\n \"default\": \"./src/styles.css\"\n },\n \"./components/*\": \"./src/components/*.tsx\",\n \"./lib/*\": \"./src/lib/*.ts\"\n },\n \"scripts\": {\n \"lint\": \"biome check .\",\n \"lint:fix\": \"biome check --write .\",\n \"typecheck\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n {{#if (eq shadcn.iconLibrary \"hugeicons\")}}\"@hugeicons/react\": \"^0.3.0\",{{/if}}\n {{#if (eq shadcn.iconLibrary \"lucide\")}}\"lucide-react\": \"^0.469.0\",{{/if}}\n {{#if (eq shadcn.iconLibrary \"tabler\")}}\"@tabler/icons-react\": \"^3.31.0\",{{/if}}\n {{#if (eq shadcn.iconLibrary \"phosphor\")}}\"@phosphor-icons/react\": \"^2.1.7\",{{/if}}\n \"class-variance-authority\": \"^0.7.0\",\n \"clsx\": \"^2.1.0\",\n \"tailwind-merge\": \"^2.5.0\"\n },\n \"devDependencies\": {\n \"@repo/config-typescript\": \"workspace:*\",\n \"@types/react\": \"^19.0.0\",\n \"@types/react-dom\": \"^19.0.0\",\n \"react\": \"^19.0.0\",\n \"tailwindcss\": \"^4.0.0\",\n \"typescript\": \"^5.0.0\"\n },\n \"peerDependencies\": {\n \"react\": \"^19.0.0\"\n }\n}\n",
392
+ "packages/ui/components.json.hbs": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n{{#if (eq shadcn.style \"nova\")}}\n \"style\": \"new-york\",\n{{else if (eq shadcn.style \"vega\")}}\n \"style\": \"default\",\n{{else}}\n \"style\": \"new-york\",\n{{/if}}\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"\",\n \"css\": \"src/globals.css\",\n \"baseColor\": \"{{shadcn.baseColor}}\",\n \"cssVariables\": true,\n \"prefix\": \"\"\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\",\n \"ui\": \"@/components/ui\",\n \"lib\": \"@/lib\",\n \"hooks\": \"@/hooks\"\n },\n \"iconLibrary\": \"{{shadcn.iconLibrary}}\"\n}\n",
393
+ "packages/ui/package.json.hbs": "{\n \"name\": \"@repo/ui\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"main\": \"./src/index.ts\",\n \"types\": \"./src/index.ts\",\n \"exports\": {\n \".\": \"./src/index.ts\",\n \"./globals.css\": {\n \"style\": \"./src/globals.css\",\n \"default\": \"./src/globals.css\"\n },\n \"./components/*\": \"./src/components/*.tsx\",\n \"./lib/*\": \"./src/lib/*.ts\"\n },\n \"scripts\": {\n \"lint\": \"biome check .\",\n \"lint:fix\": \"biome check --write .\",\n \"typecheck\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n {{#if (eq shadcn.iconLibrary \"hugeicons\")}}\"@hugeicons/react\": \"^0.3.0\",{{/if}}\n {{#if (eq shadcn.iconLibrary \"lucide\")}}\"lucide-react\": \"^0.469.0\",{{/if}}\n {{#if (eq shadcn.iconLibrary \"tabler\")}}\"@tabler/icons-react\": \"^3.31.0\",{{/if}}\n {{#if (eq shadcn.iconLibrary \"phosphor\")}}\"@phosphor-icons/react\": \"^2.1.7\",{{/if}}\n \"class-variance-authority\": \"^0.7.0\",\n \"clsx\": \"^2.1.0\",\n \"tailwind-merge\": \"^2.5.0\",\n \"tw-animate-css\": \"^1.3.0\"\n },\n \"devDependencies\": {\n \"@repo/config-typescript\": \"workspace:*\",\n \"@types/react\": \"^19.0.0\",\n \"@types/react-dom\": \"^19.0.0\",\n \"react\": \"^19.0.0\",\n \"tailwindcss\": \"^4.0.0\",\n \"typescript\": \"^5.0.0\"\n },\n \"peerDependencies\": {\n \"react\": \"^19.0.0\"\n }\n}\n",
393
394
  "packages/ui/src/components/button.tsx.hbs": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, ...props }, ref) => {\n return (\n <button\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
394
395
  "packages/ui/src/components/card.tsx.hbs": "import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"rounded-xl border bg-card text-card-foreground shadow\",\n className\n )}\n {...props}\n />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n {...props}\n />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"font-semibold leading-none tracking-tight\", className)}\n {...props}\n />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex items-center p-6 pt-0\", className)}\n {...props}\n />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
395
396
  "packages/ui/src/components/separator.tsx.hbs": "import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n ({ className, orientation = \"horizontal\", ...props }, ref) => (\n <div\n ref={ref}\n role=\"separator\"\n aria-orientation={orientation}\n className={cn(\n \"shrink-0 bg-border\",\n orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n className\n )}\n {...props}\n />\n )\n)\nSeparator.displayName = \"Separator\"\n\nexport { Separator }\n",
397
+ "packages/ui/src/globals.css.hbs": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n --color-sidebar-ring: var(--sidebar-ring);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar: var(--sidebar);\n --color-chart-5: var(--chart-5);\n --color-chart-4: var(--chart-4);\n --color-chart-3: var(--chart-3);\n --color-chart-2: var(--chart-2);\n --color-chart-1: var(--chart-1);\n --color-ring: var(--ring);\n --color-input: var(--input);\n --color-border: var(--border);\n --color-destructive: var(--destructive);\n --color-accent-foreground: var(--accent-foreground);\n --color-accent: var(--accent);\n --color-muted-foreground: var(--muted-foreground);\n --color-muted: var(--muted);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-secondary: var(--secondary);\n --color-primary-foreground: var(--primary-foreground);\n --color-primary: var(--primary);\n --color-popover-foreground: var(--popover-foreground);\n --color-popover: var(--popover);\n --color-card-foreground: var(--card-foreground);\n --color-card: var(--card);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n}\n\n/* ========================================\n THEME COLOR VARIABLES - LIGHT MODE\n ======================================== */\n\n:root {\n --radius: 0.625rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n --primary: oklch(0.546 0.245 262.881);\n --primary-foreground: oklch(0.985 0.002 247.858);\n --ring: oklch(0.546 0.245 262.881);\n --sidebar-primary: oklch(0.546 0.245 262.881);\n --sidebar-primary-foreground: oklch(0.985 0.002 247.858);\n --sidebar-ring: oklch(0.546 0.245 262.881);\n --chart-1: oklch(0.546 0.245 262.881);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n --primary: oklch(0.596 0.145 163.225);\n --primary-foreground: oklch(0.982 0.018 155.826);\n --ring: oklch(0.596 0.145 163.225);\n --sidebar-primary: oklch(0.596 0.145 163.225);\n --sidebar-primary-foreground: oklch(0.982 0.018 155.826);\n --sidebar-ring: oklch(0.596 0.145 163.225);\n --chart-1: oklch(0.596 0.145 163.225);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n --primary: oklch(0.627 0.265 303.9);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.627 0.265 303.9);\n --sidebar-primary: oklch(0.627 0.265 303.9);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.627 0.265 303.9);\n --chart-1: oklch(0.627 0.265 303.9);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n --primary: oklch(0.637 0.237 25.331);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.637 0.237 25.331);\n --sidebar-primary: oklch(0.637 0.237 25.331);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.637 0.237 25.331);\n --chart-1: oklch(0.637 0.237 25.331);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n --primary: oklch(0.705 0.191 47.604);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.705 0.191 47.604);\n --sidebar-primary: oklch(0.705 0.191 47.604);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.705 0.191 47.604);\n --chart-1: oklch(0.705 0.191 47.604);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n --primary: oklch(0.769 0.188 70.08);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.769 0.188 70.08);\n --sidebar-primary: oklch(0.769 0.188 70.08);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.769 0.188 70.08);\n --chart-1: oklch(0.769 0.188 70.08);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n --primary: oklch(0.715 0.143 215.221);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.715 0.143 215.221);\n --sidebar-primary: oklch(0.715 0.143 215.221);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.715 0.143 215.221);\n --chart-1: oklch(0.715 0.143 215.221);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --sidebar-primary: oklch(0.696 0.17 162.48);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n --primary: oklch(0.667 0.295 322.15);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.667 0.295 322.15);\n --sidebar-primary: oklch(0.667 0.295 322.15);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.667 0.295 322.15);\n --chart-1: oklch(0.667 0.295 322.15);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n --primary: oklch(0.585 0.233 277.117);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.585 0.233 277.117);\n --sidebar-primary: oklch(0.585 0.233 277.117);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.585 0.233 277.117);\n --chart-1: oklch(0.585 0.233 277.117);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n --primary: oklch(0.768 0.233 130.85);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.768 0.233 130.85);\n --sidebar-primary: oklch(0.768 0.233 130.85);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.768 0.233 130.85);\n --chart-1: oklch(0.768 0.233 130.85);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n --primary: oklch(0.718 0.202 349.761);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.718 0.202 349.761);\n --sidebar-primary: oklch(0.718 0.202 349.761);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.718 0.202 349.761);\n --chart-1: oklch(0.718 0.202 349.761);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n --primary: oklch(0.645 0.246 16.439);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.645 0.246 16.439);\n --sidebar-primary: oklch(0.645 0.246 16.439);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.645 0.246 16.439);\n --chart-1: oklch(0.645 0.246 16.439);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n --primary: oklch(0.685 0.169 237.323);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.685 0.169 237.323);\n --sidebar-primary: oklch(0.685 0.169 237.323);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.685 0.169 237.323);\n --chart-1: oklch(0.685 0.169 237.323);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n --primary: oklch(0.704 0.14 182.503);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.704 0.14 182.503);\n --sidebar-primary: oklch(0.704 0.14 182.503);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.704 0.14 182.503);\n --chart-1: oklch(0.704 0.14 182.503);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n --primary: oklch(0.606 0.25 292.717);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.606 0.25 292.717);\n --sidebar-primary: oklch(0.606 0.25 292.717);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.606 0.25 292.717);\n --chart-1: oklch(0.606 0.25 292.717);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n --primary: oklch(0.795 0.184 86.047);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.795 0.184 86.047);\n --sidebar-primary: oklch(0.795 0.184 86.047);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.795 0.184 86.047);\n --chart-1: oklch(0.795 0.184 86.047);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.646 0.222 41.116);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n/* ========================================\n THEME COLOR VARIABLES - DARK MODE\n ======================================== */\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.205 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(1 0 0 / 10%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"blue\")}}\n --primary: oklch(0.623 0.214 262.881);\n --primary-foreground: oklch(0.273 0.033 256.848);\n --ring: oklch(0.623 0.214 262.881);\n --sidebar-primary: oklch(0.623 0.214 262.881);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.623 0.214 262.881);\n --chart-1: oklch(0.623 0.214 262.881);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"green\")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --sidebar-primary: oklch(0.696 0.17 162.48);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"purple\")}}\n --primary: oklch(0.714 0.203 305.504);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.714 0.203 305.504);\n --sidebar-primary: oklch(0.714 0.203 305.504);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.714 0.203 305.504);\n --chart-1: oklch(0.714 0.203 305.504);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"red\")}}\n --primary: oklch(0.704 0.191 22.216);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.704 0.191 22.216);\n --sidebar-primary: oklch(0.704 0.191 22.216);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.704 0.191 22.216);\n --chart-1: oklch(0.704 0.191 22.216);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"orange\")}}\n --primary: oklch(0.792 0.17 52.615);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.792 0.17 52.615);\n --sidebar-primary: oklch(0.792 0.17 52.615);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.792 0.17 52.615);\n --chart-1: oklch(0.792 0.17 52.615);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"amber\")}}\n --primary: oklch(0.828 0.189 84.429);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.828 0.189 84.429);\n --sidebar-primary: oklch(0.828 0.189 84.429);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.828 0.189 84.429);\n --chart-1: oklch(0.828 0.189 84.429);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n --primary: oklch(0.789 0.154 211.53);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.789 0.154 211.53);\n --sidebar-primary: oklch(0.789 0.154 211.53);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.789 0.154 211.53);\n --chart-1: oklch(0.789 0.154 211.53);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n --primary: oklch(0.765 0.166 160.391);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.765 0.166 160.391);\n --sidebar-primary: oklch(0.765 0.166 160.391);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.765 0.166 160.391);\n --chart-1: oklch(0.765 0.166 160.391);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n --primary: oklch(0.74 0.238 322.16);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.74 0.238 322.16);\n --sidebar-primary: oklch(0.74 0.238 322.16);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.74 0.238 322.16);\n --chart-1: oklch(0.74 0.238 322.16);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n --primary: oklch(0.673 0.182 276.935);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.673 0.182 276.935);\n --sidebar-primary: oklch(0.673 0.182 276.935);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.673 0.182 276.935);\n --chart-1: oklch(0.673 0.182 276.935);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"lime\")}}\n --primary: oklch(0.841 0.238 128.85);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.841 0.238 128.85);\n --sidebar-primary: oklch(0.841 0.238 128.85);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.841 0.238 128.85);\n --chart-1: oklch(0.841 0.238 128.85);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"pink\")}}\n --primary: oklch(0.775 0.181 349.761);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.775 0.181 349.761);\n --sidebar-primary: oklch(0.775 0.181 349.761);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.775 0.181 349.761);\n --chart-1: oklch(0.775 0.181 349.761);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"rose\")}}\n --primary: oklch(0.712 0.194 13.428);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.712 0.194 13.428);\n --sidebar-primary: oklch(0.712 0.194 13.428);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.712 0.194 13.428);\n --chart-1: oklch(0.712 0.194 13.428);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"sky\")}}\n --primary: oklch(0.756 0.143 232.661);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.756 0.143 232.661);\n --sidebar-primary: oklch(0.756 0.143 232.661);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.756 0.143 232.661);\n --chart-1: oklch(0.756 0.143 232.661);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"teal\")}}\n --primary: oklch(0.777 0.152 181.912);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.777 0.152 181.912);\n --sidebar-primary: oklch(0.777 0.152 181.912);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.777 0.152 181.912);\n --chart-1: oklch(0.777 0.152 181.912);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"violet\")}}\n --primary: oklch(0.702 0.183 293.541);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.702 0.183 293.541);\n --sidebar-primary: oklch(0.702 0.183 293.541);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.702 0.183 293.541);\n --chart-1: oklch(0.702 0.183 293.541);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n --primary: oklch(0.852 0.199 91.936);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.852 0.199 91.936);\n --sidebar-primary: oklch(0.852 0.199 91.936);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.852 0.199 91.936);\n --chart-1: oklch(0.852 0.199 91.936);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n",
396
398
  "packages/ui/src/index.ts.hbs": "export { cn } from './lib/utils'\n// Export components as they are added\n// export * from './components/ui/button'\n",
397
399
  "packages/ui/src/lib/utils.ts.hbs": "import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n",
398
- "packages/ui/src/styles.css.hbs": "@import \"tailwindcss\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n --color-sidebar-ring: var(--sidebar-ring);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar: var(--sidebar);\n --color-chart-5: var(--chart-5);\n --color-chart-4: var(--chart-4);\n --color-chart-3: var(--chart-3);\n --color-chart-2: var(--chart-2);\n --color-chart-1: var(--chart-1);\n --color-ring: var(--ring);\n --color-input: var(--input);\n --color-border: var(--border);\n --color-destructive: var(--destructive);\n --color-accent-foreground: var(--accent-foreground);\n --color-accent: var(--accent);\n --color-muted-foreground: var(--muted-foreground);\n --color-muted: var(--muted);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-secondary: var(--secondary);\n --color-primary-foreground: var(--primary-foreground);\n --color-primary: var(--primary);\n --color-popover-foreground: var(--popover-foreground);\n --color-popover: var(--popover);\n --color-card-foreground: var(--card-foreground);\n --color-card: var(--card);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n}\n\n:root {\n --radius: 0.625rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n}\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.205 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(1 0 0 / 10%);\n --sidebar-ring: oklch(0.556 0 0);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n",
399
400
  "packages/ui/tsconfig.json.hbs": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"react-jsx\",\n \"incremental\": true,\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"src/**/*\"],\n \"exclude\": [\"node_modules\"]\n}\n",
400
401
  "web/_env.local.hbs": "# Convex - These values are synced from packages/backend/.env.local after running convex dev\n# NEXT_PUBLIC_CONVEX_URL and NEXT_PUBLIC_CONVEX_SITE_URL are auto-synced by dev script\nNEXT_PUBLIC_CONVEX_URL=\nNEXT_PUBLIC_CONVEX_SITE_URL=\n\n# Site URL for auth (your frontend URL)\nNEXT_PUBLIC_SITE_URL=http://localhost:3000\n{{#if (eq integrations.analytics 'posthog')}}\n\n# PostHog\nNEXT_PUBLIC_POSTHOG_KEY=\nNEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com\n{{/if}}\n{{#if (eq integrations.payments 'stripe')}}\n\n# Stripe\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=\n{{/if}}\n",
401
402
  "web/components.json.hbs": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n{{#if (eq shadcn.style \"nova\")}}\n \"style\": \"new-york\",\n{{else if (eq shadcn.style \"vega\")}}\n \"style\": \"default\",\n{{else}}\n \"style\": \"new-york\",\n{{/if}}\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"\",\n \"css\": \"src/app/globals.css\",\n \"baseColor\": \"{{shadcn.baseColor}}\",\n \"cssVariables\": true,\n \"prefix\": \"\"\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\",\n \"ui\": \"@/components/ui\",\n \"lib\": \"@/lib\",\n \"hooks\": \"@/hooks\"\n },\n \"iconLibrary\": \"{{shadcn.iconLibrary}}\"\n}\n",
@@ -406,7 +407,7 @@ export const EMBEDDED_TEMPLATES: Record<string, string> = {
406
407
  "web/src/app/(auth)/sign-in/page.tsx.hbs": "import { SignInForm } from '@/components/auth/sign-in-form'\n\nexport default function SignInPage() {\n return <SignInForm />\n}\n",
407
408
  "web/src/app/(auth)/sign-up/page.tsx.hbs": "import { SignUpForm } from '@/components/auth/sign-up-form'\n\nexport default function SignUpPage() {\n return <SignUpForm />\n}\n",
408
409
  "web/src/app/api/auth/[...all]/route.ts.hbs": "import { handler } from '@/lib/auth-server'\n\nexport const { GET, POST } = handler\n",
409
- "web/src/app/globals.css.hbs": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n --color-sidebar-ring: var(--sidebar-ring);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar: var(--sidebar);\n --color-chart-5: var(--chart-5);\n --color-chart-4: var(--chart-4);\n --color-chart-3: var(--chart-3);\n --color-chart-2: var(--chart-2);\n --color-chart-1: var(--chart-1);\n --color-ring: var(--ring);\n --color-input: var(--input);\n --color-border: var(--border);\n --color-destructive: var(--destructive);\n --color-accent-foreground: var(--accent-foreground);\n --color-accent: var(--accent);\n --color-muted-foreground: var(--muted-foreground);\n --color-muted: var(--muted);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-secondary: var(--secondary);\n --color-primary-foreground: var(--primary-foreground);\n --color-primary: var(--primary);\n --color-popover-foreground: var(--popover-foreground);\n --color-popover: var(--popover);\n --color-card-foreground: var(--card-foreground);\n --color-card: var(--card);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n}\n\n/* ========================================\n THEME COLOR VARIABLES - LIGHT MODE\n ======================================== */\n\n:root {\n --radius: 0.625rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n --primary: oklch(0.546 0.245 262.881);\n --primary-foreground: oklch(0.985 0.002 247.858);\n --ring: oklch(0.546 0.245 262.881);\n --sidebar-primary: oklch(0.546 0.245 262.881);\n --sidebar-primary-foreground: oklch(0.985 0.002 247.858);\n --sidebar-ring: oklch(0.546 0.245 262.881);\n --chart-1: oklch(0.546 0.245 262.881);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n --primary: oklch(0.596 0.145 163.225);\n --primary-foreground: oklch(0.982 0.018 155.826);\n --ring: oklch(0.596 0.145 163.225);\n --sidebar-primary: oklch(0.596 0.145 163.225);\n --sidebar-primary-foreground: oklch(0.982 0.018 155.826);\n --sidebar-ring: oklch(0.596 0.145 163.225);\n --chart-1: oklch(0.596 0.145 163.225);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n --primary: oklch(0.627 0.265 303.9);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.627 0.265 303.9);\n --sidebar-primary: oklch(0.627 0.265 303.9);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.627 0.265 303.9);\n --chart-1: oklch(0.627 0.265 303.9);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n --primary: oklch(0.637 0.237 25.331);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.637 0.237 25.331);\n --sidebar-primary: oklch(0.637 0.237 25.331);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.637 0.237 25.331);\n --chart-1: oklch(0.637 0.237 25.331);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n --primary: oklch(0.705 0.191 47.604);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.705 0.191 47.604);\n --sidebar-primary: oklch(0.705 0.191 47.604);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.705 0.191 47.604);\n --chart-1: oklch(0.705 0.191 47.604);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n --primary: oklch(0.769 0.188 70.08);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.769 0.188 70.08);\n --sidebar-primary: oklch(0.769 0.188 70.08);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.769 0.188 70.08);\n --chart-1: oklch(0.769 0.188 70.08);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n --primary: oklch(0.715 0.143 215.221);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.715 0.143 215.221);\n --sidebar-primary: oklch(0.715 0.143 215.221);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.715 0.143 215.221);\n --chart-1: oklch(0.715 0.143 215.221);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --sidebar-primary: oklch(0.696 0.17 162.48);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n --primary: oklch(0.667 0.295 322.15);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.667 0.295 322.15);\n --sidebar-primary: oklch(0.667 0.295 322.15);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.667 0.295 322.15);\n --chart-1: oklch(0.667 0.295 322.15);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n --primary: oklch(0.585 0.233 277.117);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.585 0.233 277.117);\n --sidebar-primary: oklch(0.585 0.233 277.117);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.585 0.233 277.117);\n --chart-1: oklch(0.585 0.233 277.117);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n --primary: oklch(0.768 0.233 130.85);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.768 0.233 130.85);\n --sidebar-primary: oklch(0.768 0.233 130.85);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.768 0.233 130.85);\n --chart-1: oklch(0.768 0.233 130.85);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n --primary: oklch(0.718 0.202 349.761);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.718 0.202 349.761);\n --sidebar-primary: oklch(0.718 0.202 349.761);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.718 0.202 349.761);\n --chart-1: oklch(0.718 0.202 349.761);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n --primary: oklch(0.645 0.246 16.439);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.645 0.246 16.439);\n --sidebar-primary: oklch(0.645 0.246 16.439);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.645 0.246 16.439);\n --chart-1: oklch(0.645 0.246 16.439);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n --primary: oklch(0.685 0.169 237.323);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.685 0.169 237.323);\n --sidebar-primary: oklch(0.685 0.169 237.323);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.685 0.169 237.323);\n --chart-1: oklch(0.685 0.169 237.323);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n --primary: oklch(0.704 0.14 182.503);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.704 0.14 182.503);\n --sidebar-primary: oklch(0.704 0.14 182.503);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.704 0.14 182.503);\n --chart-1: oklch(0.704 0.14 182.503);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n --primary: oklch(0.606 0.25 292.717);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.606 0.25 292.717);\n --sidebar-primary: oklch(0.606 0.25 292.717);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.606 0.25 292.717);\n --chart-1: oklch(0.606 0.25 292.717);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n --primary: oklch(0.795 0.184 86.047);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.795 0.184 86.047);\n --sidebar-primary: oklch(0.795 0.184 86.047);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.795 0.184 86.047);\n --chart-1: oklch(0.795 0.184 86.047);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.646 0.222 41.116);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n/* ========================================\n THEME COLOR VARIABLES - DARK MODE\n ======================================== */\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.205 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(1 0 0 / 10%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"blue\")}}\n --primary: oklch(0.623 0.214 262.881);\n --primary-foreground: oklch(0.273 0.033 256.848);\n --ring: oklch(0.623 0.214 262.881);\n --sidebar-primary: oklch(0.623 0.214 262.881);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.623 0.214 262.881);\n --chart-1: oklch(0.623 0.214 262.881);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"green\")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --sidebar-primary: oklch(0.696 0.17 162.48);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"purple\")}}\n --primary: oklch(0.714 0.203 305.504);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.714 0.203 305.504);\n --sidebar-primary: oklch(0.714 0.203 305.504);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.714 0.203 305.504);\n --chart-1: oklch(0.714 0.203 305.504);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"red\")}}\n --primary: oklch(0.704 0.191 22.216);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.704 0.191 22.216);\n --sidebar-primary: oklch(0.704 0.191 22.216);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.704 0.191 22.216);\n --chart-1: oklch(0.704 0.191 22.216);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"orange\")}}\n --primary: oklch(0.792 0.17 52.615);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.792 0.17 52.615);\n --sidebar-primary: oklch(0.792 0.17 52.615);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.792 0.17 52.615);\n --chart-1: oklch(0.792 0.17 52.615);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"amber\")}}\n --primary: oklch(0.828 0.189 84.429);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.828 0.189 84.429);\n --sidebar-primary: oklch(0.828 0.189 84.429);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.828 0.189 84.429);\n --chart-1: oklch(0.828 0.189 84.429);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n --primary: oklch(0.789 0.154 211.53);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.789 0.154 211.53);\n --sidebar-primary: oklch(0.789 0.154 211.53);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.789 0.154 211.53);\n --chart-1: oklch(0.789 0.154 211.53);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n --primary: oklch(0.765 0.166 160.391);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.765 0.166 160.391);\n --sidebar-primary: oklch(0.765 0.166 160.391);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.765 0.166 160.391);\n --chart-1: oklch(0.765 0.166 160.391);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n --primary: oklch(0.74 0.238 322.16);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.74 0.238 322.16);\n --sidebar-primary: oklch(0.74 0.238 322.16);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.74 0.238 322.16);\n --chart-1: oklch(0.74 0.238 322.16);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n --primary: oklch(0.673 0.182 276.935);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.673 0.182 276.935);\n --sidebar-primary: oklch(0.673 0.182 276.935);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.673 0.182 276.935);\n --chart-1: oklch(0.673 0.182 276.935);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"lime\")}}\n --primary: oklch(0.841 0.238 128.85);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.841 0.238 128.85);\n --sidebar-primary: oklch(0.841 0.238 128.85);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.841 0.238 128.85);\n --chart-1: oklch(0.841 0.238 128.85);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"pink\")}}\n --primary: oklch(0.775 0.181 349.761);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.775 0.181 349.761);\n --sidebar-primary: oklch(0.775 0.181 349.761);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.775 0.181 349.761);\n --chart-1: oklch(0.775 0.181 349.761);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"rose\")}}\n --primary: oklch(0.712 0.194 13.428);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.712 0.194 13.428);\n --sidebar-primary: oklch(0.712 0.194 13.428);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.712 0.194 13.428);\n --chart-1: oklch(0.712 0.194 13.428);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"sky\")}}\n --primary: oklch(0.756 0.143 232.661);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.756 0.143 232.661);\n --sidebar-primary: oklch(0.756 0.143 232.661);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.756 0.143 232.661);\n --chart-1: oklch(0.756 0.143 232.661);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"teal\")}}\n --primary: oklch(0.777 0.152 181.912);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.777 0.152 181.912);\n --sidebar-primary: oklch(0.777 0.152 181.912);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.777 0.152 181.912);\n --chart-1: oklch(0.777 0.152 181.912);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"violet\")}}\n --primary: oklch(0.702 0.183 293.541);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.702 0.183 293.541);\n --sidebar-primary: oklch(0.702 0.183 293.541);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.702 0.183 293.541);\n --chart-1: oklch(0.702 0.183 293.541);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n --primary: oklch(0.852 0.199 91.936);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.852 0.199 91.936);\n --sidebar-primary: oklch(0.852 0.199 91.936);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.852 0.199 91.936);\n --chart-1: oklch(0.852 0.199 91.936);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n",
410
+ "web/src/app/globals.css.hbs": "{{#if (eq structure 'monorepo')}}\n/* Import shared design tokens from @repo/ui */\n@import \"@repo/ui/globals.css\";\n\n/* Web app specific overrides */\n@theme inline {\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n}\n{{else}}\n@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n --color-sidebar-ring: var(--sidebar-ring);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar: var(--sidebar);\n --color-chart-5: var(--chart-5);\n --color-chart-4: var(--chart-4);\n --color-chart-3: var(--chart-3);\n --color-chart-2: var(--chart-2);\n --color-chart-1: var(--chart-1);\n --color-ring: var(--ring);\n --color-input: var(--input);\n --color-border: var(--border);\n --color-destructive: var(--destructive);\n --color-accent-foreground: var(--accent-foreground);\n --color-accent: var(--accent);\n --color-muted-foreground: var(--muted-foreground);\n --color-muted: var(--muted);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-secondary: var(--secondary);\n --color-primary-foreground: var(--primary-foreground);\n --color-primary: var(--primary);\n --color-popover-foreground: var(--popover-foreground);\n --color-popover: var(--popover);\n --color-card-foreground: var(--card-foreground);\n --color-card: var(--card);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n}\n\n/* ========================================\n THEME COLOR VARIABLES - LIGHT MODE\n ======================================== */\n\n:root {\n --radius: 0.625rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n --primary: oklch(0.546 0.245 262.881);\n --primary-foreground: oklch(0.985 0.002 247.858);\n --ring: oklch(0.546 0.245 262.881);\n --sidebar-primary: oklch(0.546 0.245 262.881);\n --sidebar-primary-foreground: oklch(0.985 0.002 247.858);\n --sidebar-ring: oklch(0.546 0.245 262.881);\n --chart-1: oklch(0.546 0.245 262.881);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n --primary: oklch(0.596 0.145 163.225);\n --primary-foreground: oklch(0.982 0.018 155.826);\n --ring: oklch(0.596 0.145 163.225);\n --sidebar-primary: oklch(0.596 0.145 163.225);\n --sidebar-primary-foreground: oklch(0.982 0.018 155.826);\n --sidebar-ring: oklch(0.596 0.145 163.225);\n --chart-1: oklch(0.596 0.145 163.225);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n --primary: oklch(0.627 0.265 303.9);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.627 0.265 303.9);\n --sidebar-primary: oklch(0.627 0.265 303.9);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.627 0.265 303.9);\n --chart-1: oklch(0.627 0.265 303.9);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n --primary: oklch(0.637 0.237 25.331);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.637 0.237 25.331);\n --sidebar-primary: oklch(0.637 0.237 25.331);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.637 0.237 25.331);\n --chart-1: oklch(0.637 0.237 25.331);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n --primary: oklch(0.705 0.191 47.604);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.705 0.191 47.604);\n --sidebar-primary: oklch(0.705 0.191 47.604);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.705 0.191 47.604);\n --chart-1: oklch(0.705 0.191 47.604);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n --primary: oklch(0.769 0.188 70.08);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.769 0.188 70.08);\n --sidebar-primary: oklch(0.769 0.188 70.08);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.769 0.188 70.08);\n --chart-1: oklch(0.769 0.188 70.08);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n --primary: oklch(0.715 0.143 215.221);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.715 0.143 215.221);\n --sidebar-primary: oklch(0.715 0.143 215.221);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.715 0.143 215.221);\n --chart-1: oklch(0.715 0.143 215.221);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --sidebar-primary: oklch(0.696 0.17 162.48);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n --primary: oklch(0.667 0.295 322.15);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.667 0.295 322.15);\n --sidebar-primary: oklch(0.667 0.295 322.15);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.667 0.295 322.15);\n --chart-1: oklch(0.667 0.295 322.15);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n --primary: oklch(0.585 0.233 277.117);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.585 0.233 277.117);\n --sidebar-primary: oklch(0.585 0.233 277.117);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.585 0.233 277.117);\n --chart-1: oklch(0.585 0.233 277.117);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n --primary: oklch(0.768 0.233 130.85);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.768 0.233 130.85);\n --sidebar-primary: oklch(0.768 0.233 130.85);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.768 0.233 130.85);\n --chart-1: oklch(0.768 0.233 130.85);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n --primary: oklch(0.718 0.202 349.761);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.718 0.202 349.761);\n --sidebar-primary: oklch(0.718 0.202 349.761);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.718 0.202 349.761);\n --chart-1: oklch(0.718 0.202 349.761);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n --primary: oklch(0.645 0.246 16.439);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.645 0.246 16.439);\n --sidebar-primary: oklch(0.645 0.246 16.439);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.645 0.246 16.439);\n --chart-1: oklch(0.645 0.246 16.439);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n --primary: oklch(0.685 0.169 237.323);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.685 0.169 237.323);\n --sidebar-primary: oklch(0.685 0.169 237.323);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.685 0.169 237.323);\n --chart-1: oklch(0.685 0.169 237.323);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n --primary: oklch(0.704 0.14 182.503);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.704 0.14 182.503);\n --sidebar-primary: oklch(0.704 0.14 182.503);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.704 0.14 182.503);\n --chart-1: oklch(0.704 0.14 182.503);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n --primary: oklch(0.606 0.25 292.717);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.606 0.25 292.717);\n --sidebar-primary: oklch(0.606 0.25 292.717);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.606 0.25 292.717);\n --chart-1: oklch(0.606 0.25 292.717);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n --primary: oklch(0.795 0.184 86.047);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.795 0.184 86.047);\n --sidebar-primary: oklch(0.795 0.184 86.047);\n --sidebar-primary-foreground: oklch(0.216 0.006 56.043);\n --sidebar-ring: oklch(0.795 0.184 86.047);\n --chart-1: oklch(0.795 0.184 86.047);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.646 0.222 41.116);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n/* ========================================\n THEME COLOR VARIABLES - DARK MODE\n ======================================== */\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.205 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(1 0 0 / 10%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"blue\")}}\n --primary: oklch(0.623 0.214 262.881);\n --primary-foreground: oklch(0.273 0.033 256.848);\n --ring: oklch(0.623 0.214 262.881);\n --sidebar-primary: oklch(0.623 0.214 262.881);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.623 0.214 262.881);\n --chart-1: oklch(0.623 0.214 262.881);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"green\")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --sidebar-primary: oklch(0.696 0.17 162.48);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"purple\")}}\n --primary: oklch(0.714 0.203 305.504);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.714 0.203 305.504);\n --sidebar-primary: oklch(0.714 0.203 305.504);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.714 0.203 305.504);\n --chart-1: oklch(0.714 0.203 305.504);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"red\")}}\n --primary: oklch(0.704 0.191 22.216);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.704 0.191 22.216);\n --sidebar-primary: oklch(0.704 0.191 22.216);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.704 0.191 22.216);\n --chart-1: oklch(0.704 0.191 22.216);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"orange\")}}\n --primary: oklch(0.792 0.17 52.615);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.792 0.17 52.615);\n --sidebar-primary: oklch(0.792 0.17 52.615);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.792 0.17 52.615);\n --chart-1: oklch(0.792 0.17 52.615);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"amber\")}}\n --primary: oklch(0.828 0.189 84.429);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.828 0.189 84.429);\n --sidebar-primary: oklch(0.828 0.189 84.429);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.828 0.189 84.429);\n --chart-1: oklch(0.828 0.189 84.429);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n --primary: oklch(0.789 0.154 211.53);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.789 0.154 211.53);\n --sidebar-primary: oklch(0.789 0.154 211.53);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.789 0.154 211.53);\n --chart-1: oklch(0.789 0.154 211.53);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n --primary: oklch(0.765 0.166 160.391);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.765 0.166 160.391);\n --sidebar-primary: oklch(0.765 0.166 160.391);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.765 0.166 160.391);\n --chart-1: oklch(0.765 0.166 160.391);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n --primary: oklch(0.74 0.238 322.16);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.74 0.238 322.16);\n --sidebar-primary: oklch(0.74 0.238 322.16);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.74 0.238 322.16);\n --chart-1: oklch(0.74 0.238 322.16);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n --primary: oklch(0.673 0.182 276.935);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.673 0.182 276.935);\n --sidebar-primary: oklch(0.673 0.182 276.935);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.673 0.182 276.935);\n --chart-1: oklch(0.673 0.182 276.935);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"lime\")}}\n --primary: oklch(0.841 0.238 128.85);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.841 0.238 128.85);\n --sidebar-primary: oklch(0.841 0.238 128.85);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.841 0.238 128.85);\n --chart-1: oklch(0.841 0.238 128.85);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"pink\")}}\n --primary: oklch(0.775 0.181 349.761);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.775 0.181 349.761);\n --sidebar-primary: oklch(0.775 0.181 349.761);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.775 0.181 349.761);\n --chart-1: oklch(0.775 0.181 349.761);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"rose\")}}\n --primary: oklch(0.712 0.194 13.428);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.712 0.194 13.428);\n --sidebar-primary: oklch(0.712 0.194 13.428);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.712 0.194 13.428);\n --chart-1: oklch(0.712 0.194 13.428);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"sky\")}}\n --primary: oklch(0.756 0.143 232.661);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.756 0.143 232.661);\n --sidebar-primary: oklch(0.756 0.143 232.661);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.756 0.143 232.661);\n --chart-1: oklch(0.756 0.143 232.661);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"teal\")}}\n --primary: oklch(0.777 0.152 181.912);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.777 0.152 181.912);\n --sidebar-primary: oklch(0.777 0.152 181.912);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.777 0.152 181.912);\n --chart-1: oklch(0.777 0.152 181.912);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"violet\")}}\n --primary: oklch(0.702 0.183 293.541);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.702 0.183 293.541);\n --sidebar-primary: oklch(0.702 0.183 293.541);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.702 0.183 293.541);\n --chart-1: oklch(0.702 0.183 293.541);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n --primary: oklch(0.852 0.199 91.936);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.852 0.199 91.936);\n --sidebar-primary: oklch(0.852 0.199 91.936);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.852 0.199 91.936);\n --chart-1: oklch(0.852 0.199 91.936);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n{{/if}}\n",
410
411
  "web/src/app/layout.tsx.hbs": "import type { Metadata } from 'next'\nimport { Geist, Geist_Mono } from 'next/font/google'\nimport { ConvexClientProvider } from '@/components/providers/convex-provider'\n{{#if (eq integrations.analytics 'posthog')}}\nimport { PostHogProvider } from '@/components/providers/posthog-provider'\n{{/if}}\n{{#if (eq integrations.analytics 'vercel')}}\nimport { Analytics } from '@vercel/analytics/react'\nimport { SpeedInsights } from '@vercel/speed-insights/next'\n{{/if}}\nimport './globals.css'\n\nconst geistSans = Geist({\n variable: '--font-geist-sans',\n subsets: ['latin'],\n})\n\nconst geistMono = Geist_Mono({\n variable: '--font-geist-mono',\n subsets: ['latin'],\n})\n\nexport const metadata: Metadata = {\n title: '{{projectName}}',\n description: 'Built with create-kofi-stack',\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <html lang=\"en\" suppressHydrationWarning>\n <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>\n <ConvexClientProvider>\n {{#if (eq integrations.analytics 'posthog')}}\n <PostHogProvider>\n {children}\n </PostHogProvider>\n {{else}}\n {children}\n {{/if}}\n </ConvexClientProvider>\n {{#if (eq integrations.analytics 'vercel')}}\n <Analytics />\n <SpeedInsights />\n {{/if}}\n </body>\n </html>\n )\n}\n",
411
412
  "web/src/app/page.tsx.hbs": "'use client'\n\nimport { useQuery } from 'convex/react'\nimport { api } from '{{#if (eq structure 'monorepo')}}@repo/backend{{else}}../convex/_generated/api{{/if}}'\nimport { DashboardLayout } from '@/components/dashboard/dashboard-layout'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Skeleton } from '@/components/ui/skeleton'\n\nexport default function HomePage() {\n const user = useQuery(api.users.viewer)\n\n if (user === undefined) {\n return (\n <DashboardLayout title=\"Dashboard\">\n <div className=\"space-y-6\">\n <Skeleton className=\"h-8 w-64\" />\n <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n <Skeleton className=\"h-32\" />\n <Skeleton className=\"h-32\" />\n <Skeleton className=\"h-32\" />\n </div>\n </div>\n </DashboardLayout>\n )\n }\n\n return (\n <DashboardLayout title=\"Dashboard\">\n <div className=\"space-y-6\">\n <div>\n <h1 className=\"text-3xl font-bold tracking-tight\">\n Welcome back{user?.name ? `, ${user.name}` : ''}!\n </h1>\n <p className=\"text-muted-foreground\">\n Here's what's happening with your project today.\n </p>\n </div>\n\n <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n <Card>\n <CardHeader>\n <CardTitle>Getting Started</CardTitle>\n <CardDescription>Quick start guide for your app</CardDescription>\n </CardHeader>\n <CardContent>\n <ul className=\"list-disc list-inside space-y-1 text-sm text-muted-foreground\">\n <li>Customize your dashboard layout</li>\n <li>Add new pages to the sidebar</li>\n <li>Connect your data sources</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Documentation</CardTitle>\n <CardDescription>Learn how to build with Kofi Stack</CardDescription>\n </CardHeader>\n <CardContent>\n <ul className=\"list-disc list-inside space-y-1 text-sm text-muted-foreground\">\n <li>\n <a\n href=\"https://docs.convex.dev\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-primary hover:underline\"\n >\n Convex Documentation\n </a>\n </li>\n <li>\n <a\n href=\"https://ui.shadcn.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-primary hover:underline\"\n >\n shadcn/ui Components\n </a>\n </li>\n <li>\n <a\n href=\"https://nextjs.org/docs\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-primary hover:underline\"\n >\n Next.js Documentation\n </a>\n </li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Your Stack</CardTitle>\n <CardDescription>Technologies powering your app</CardDescription>\n </CardHeader>\n <CardContent>\n <ul className=\"list-disc list-inside space-y-1 text-sm text-muted-foreground\">\n <li>Next.js 15 with App Router</li>\n <li>Convex for backend & database</li>\n <li>Convex Auth for authentication</li>\n <li>shadcn/ui components</li>\n <li>Tailwind CSS for styling</li>\n </ul>\n </CardContent>\n </Card>\n </div>\n\n <div className=\"pt-4 border-t\">\n <p className=\"text-sm text-muted-foreground\">\n Created with{' '}\n <a\n href=\"https://github.com/theodenanyoh11/create-kofi-stack\"\n className=\"text-primary hover:underline\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n create-kofi-stack\n </a>\n </p>\n </div>\n </div>\n </DashboardLayout>\n )\n}\n",
412
413
  "web/src/components/auth/sign-in-form.tsx.hbs": "'use client'\n\nimport { useState } from 'react'\nimport { useRouter } from 'next/navigation'\nimport Link from 'next/link'\nimport { signIn } from '@/lib/auth'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Separator } from '@/components/ui/separator'\n\nexport function SignInForm() {\n const router = useRouter()\n const [email, setEmail] = useState('')\n const [password, setPassword] = useState('')\n const [isLoading, setIsLoading] = useState(false)\n const [error, setError] = useState<string | null>(null)\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault()\n setIsLoading(true)\n setError(null)\n\n try {\n const result = await signIn.email({\n email,\n password,\n })\n\n if (result.error) {\n setError(result.error.message || 'Invalid email or password')\n } else {\n router.push('/')\n }\n } catch (err) {\n setError('Invalid email or password')\n } finally {\n setIsLoading(false)\n }\n }\n\n const handleSocialSignIn = async (provider: 'github' | 'google') => {\n await signIn.social({\n provider,\n callbackURL: '/',\n })\n }\n\n return (\n <Card>\n <CardHeader className=\"text-center\">\n <CardTitle className=\"text-2xl\">Welcome back</CardTitle>\n <CardDescription>Sign in to your account to continue</CardDescription>\n </CardHeader>\n <CardContent>\n <form onSubmit={handleSubmit} className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"you@example.com\"\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n required\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input\n id=\"password\"\n type=\"password\"\n placeholder=\"Enter your password\"\n value={password}\n onChange={(e) => setPassword(e.target.value)}\n required\n />\n </div>\n\n {error && (\n <p className=\"text-sm text-destructive\">{error}</p>\n )}\n\n <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n {isLoading ? 'Signing in...' : 'Sign In'}\n </Button>\n </form>\n\n <div className=\"relative my-6\">\n <div className=\"absolute inset-0 flex items-center\">\n <Separator className=\"w-full\" />\n </div>\n <div className=\"relative flex justify-center text-xs uppercase\">\n <span className=\"bg-card px-2 text-muted-foreground\">Or continue with</span>\n </div>\n </div>\n\n <div className=\"grid grid-cols-2 gap-4\">\n <Button variant=\"outline\" onClick={() => handleSocialSignIn('github')}>\n <svg className=\"mr-2 h-4 w-4\" viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\" d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\n </svg>\n GitHub\n </Button>\n <Button variant=\"outline\" onClick={() => handleSocialSignIn('google')}>\n <svg className=\"mr-2 h-4 w-4\" viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n <path fill=\"currentColor\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n <path fill=\"currentColor\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n <path fill=\"currentColor\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n </svg>\n Google\n </Button>\n </div>\n\n <p className=\"mt-6 text-center text-sm text-muted-foreground\">\n Don&apos;t have an account?{' '}\n <Link href=\"/sign-up\" className=\"text-primary hover:underline font-medium\">\n Sign up\n </Link>\n </p>\n </CardContent>\n </Card>\n )\n}\n",