kofi-stack-template-generator 2.1.59 → 2.1.61

package/dist/index.js

@@ -2667,9 +2667,348 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
   "marketing/astro/src/pages/terms.astro": '---\nimport Layout from "../layouts/Layout.astro"\nimport Header from "../components/Header.astro"\nimport Footer from "../components/Footer.astro"\n---\n\n<Layout title="Terms of Service - SaaSify" description="Terms and conditions for using SaaSify.">\n  <div class="min-h-screen flex flex-col">\n    <Header />\n\n    <main class="flex-1">\n      <article class="py-16 md:py-24">\n        <div class="container mx-auto px-4 max-w-3xl">\n          <h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n            Terms of Service\n          </h1>\n          <p class="text-muted-foreground mb-8">\n            Last updated: January 1, 2025\n          </p>\n\n          <div class="prose prose-neutral dark:prose-invert max-w-none">\n            <h2 class="text-2xl font-semibold mt-8 mb-4">Agreement to Terms</h2>\n            <p class="text-muted-foreground mb-4">\n              By accessing or using SaaSify, you agree to be bound by these Terms of Service. If you disagree with any part of the terms, you may not access the service.\n            </p>\n\n            <h2 class="text-2xl font-semibold mt-8 mb-4">Use License</h2>\n            <p class="text-muted-foreground mb-4">\n              Subject to your compliance with these Terms, we grant you a limited, non-exclusive, non-transferable license to access and use our service for your internal business purposes.\n            </p>\n\n            <h2 class="text-2xl font-semibold mt-8 mb-4">User Accounts</h2>\n            <p class="text-muted-foreground mb-4">\n              When you create an account with us, you must provide accurate, complete, and current information. You are responsible for safeguarding your account credentials and for all activities that occur under your account.\n            </p>\n\n            <h2 class="text-2xl font-semibold mt-8 mb-4">Prohibited Uses</h2>\n            <p class="text-muted-foreground mb-4">\n              You may not use our service:\n            </p>\n            <ul class="list-disc pl-6 text-muted-foreground mb-4 space-y-2">\n              <li>For any unlawful purpose or to promote illegal activities</li>\n              <li>To violate any applicable laws or regulations</li>\n              <li>To infringe upon the rights of others</li>\n              <li>To interfere with or disrupt the service or servers</li>\n            </ul>\n\n            <h2 class="text-2xl font-semibold mt-8 mb-4">Payment Terms</h2>\n            <p class="text-muted-foreground mb-4">\n              Paid subscriptions are billed in advance on a monthly or annual basis. You agree to pay all fees associated with your subscription plan.\n            </p>\n\n            <h2 class="text-2xl font-semibold mt-8 mb-4">Limitation of Liability</h2>\n            <p class="text-muted-foreground mb-4">\n              In no event shall SaaSify be liable for any indirect, incidental, special, consequential, or punitive damages arising out of or related to your use of the service.\n            </p>\n\n            <h2 class="text-2xl font-semibold mt-8 mb-4">Contact Us</h2>\n            <p class="text-muted-foreground mb-4">\n              If you have any questions about these Terms, please contact us at legal@saasify.com.\n            </p>\n          </div>\n        </div>\n      </article>\n    </main>\n\n    <Footer />\n  </div>\n</Layout>\n',
   "marketing/astro/src/styles/globals.css.hbs": '@import "tailwindcss";\n\n@theme inline {\n	--color-background: var(--background);\n	--color-foreground: var(--foreground);\n	--color-card: var(--card);\n	--color-card-foreground: var(--card-foreground);\n	--color-popover: var(--popover);\n	--color-popover-foreground: var(--popover-foreground);\n	--color-primary: var(--primary);\n	--color-primary-foreground: var(--primary-foreground);\n	--color-secondary: var(--secondary);\n	--color-secondary-foreground: var(--secondary-foreground);\n	--color-muted: var(--muted);\n	--color-muted-foreground: var(--muted-foreground);\n	--color-accent: var(--accent);\n	--color-accent-foreground: var(--accent-foreground);\n	--color-destructive: var(--destructive);\n	--color-border: var(--border);\n	--color-input: var(--input);\n	--color-ring: var(--ring);\n	--color-chart-1: var(--chart-1);\n	--color-chart-2: var(--chart-2);\n	--color-chart-3: var(--chart-3);\n	--color-chart-4: var(--chart-4);\n	--color-chart-5: var(--chart-5);\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{{#if (eq shadcn.font "inter")}}\n	--font-sans: "Inter", system-ui, sans-serif;\n{{else if (eq shadcn.font "noto-sans")}}\n	--font-sans: "Noto Sans", system-ui, sans-serif;\n{{else if (eq shadcn.font "nunito-sans")}}\n	--font-sans: "Nunito Sans", system-ui, sans-serif;\n{{else if (eq shadcn.font "figtree")}}\n	--font-sans: "Figtree", system-ui, sans-serif;\n{{else if (eq shadcn.font "roboto")}}\n	--font-sans: "Roboto", system-ui, sans-serif;\n{{else if (eq shadcn.font "raleway")}}\n	--font-sans: "Raleway", system-ui, sans-serif;\n{{else if (eq shadcn.font "dm-sans")}}\n	--font-sans: "DM Sans", system-ui, sans-serif;\n{{else if (eq shadcn.font "public-sans")}}\n	--font-sans: "Public Sans", system-ui, sans-serif;\n{{else if (eq shadcn.font "outfit")}}\n	--font-sans: "Outfit", system-ui, sans-serif;\n{{else if (eq shadcn.font "jetbrains-mono")}}\n	--font-sans: "JetBrains Mono", monospace;\n{{else}}\n	--font-sans: "Inter", system-ui, sans-serif;\n{{/if}}\n	--font-mono: monospace;\n}\n\n:root {\n	/* Border Radius */\n{{#if (eq shadcn.radius "none")}}\n	--radius: 0;\n{{else if (eq shadcn.radius "small")}}\n	--radius: 0.25rem;\n{{else if (eq shadcn.radius "medium")}}\n	--radius: 0.5rem;\n{{else if (eq shadcn.radius "large")}}\n	--radius: 1rem;\n{{else}}\n	--radius: 0.625rem;\n{{/if}}\n\n	/* Base Colors - Light Mode */\n{{#if (eq shadcn.baseColor "stone")}}\n	--background: oklch(1 0 60);\n	--foreground: oklch(0.147 0.004 49.25);\n	--card: oklch(1 0 60);\n	--card-foreground: oklch(0.147 0.004 49.25);\n	--popover: oklch(1 0 60);\n	--popover-foreground: oklch(0.147 0.004 49.25);\n	--secondary: oklch(0.97 0.001 67.54);\n	--secondary-foreground: oklch(0.216 0.006 56.04);\n	--muted: oklch(0.97 0.001 67.54);\n	--muted-foreground: oklch(0.553 0.013 58.07);\n	--accent: oklch(0.97 0.001 67.54);\n	--accent-foreground: oklch(0.216 0.006 56.04);\n	--destructive: oklch(0.577 0.245 27.325);\n	--border: oklch(0.923 0.003 73.14);\n	--input: oklch(0.923 0.003 73.14);\n{{else if (eq shadcn.baseColor "zinc")}}\n	--background: oklch(1 0 0);\n	--foreground: oklch(0.141 0.005 285.82);\n	--card: oklch(1 0 0);\n	--card-foreground: oklch(0.141 0.005 285.82);\n	--popover: oklch(1 0 0);\n	--popover-foreground: oklch(0.141 0.005 285.82);\n	--secondary: oklch(0.967 0.001 286.38);\n	--secondary-foreground: oklch(0.21 0.006 285.89);\n	--muted: oklch(0.967 0.001 286.38);\n	--muted-foreground: oklch(0.553 0.016 286.07);\n	--accent: oklch(0.967 0.001 286.38);\n	--accent-foreground: oklch(0.21 0.006 285.89);\n	--destructive: oklch(0.577 0.245 27.325);\n	--border: oklch(0.92 0.004 286.32);\n	--input: oklch(0.92 0.004 286.32);\n{{else if (eq shadcn.baseColor "gray")}}\n	--background: oklch(1 0 0);\n	--foreground: oklch(0.13 0.028 261.69);\n	--card: oklch(1 0 0);\n	--card-foreground: oklch(0.13 0.028 261.69);\n	--popover: oklch(1 0 0);\n	--popover-foreground: oklch(0.13 0.028 261.69);\n	--secondary: oklch(0.968 0.007 247.86);\n	--secondary-foreground: oklch(0.21 0.034 264.53);\n	--muted: oklch(0.968 0.007 247.86);\n	--muted-foreground: oklch(0.551 0.027 264.36);\n	--accent: oklch(0.968 0.007 247.86);\n	--accent-foreground: oklch(0.21 0.034 264.53);\n	--destructive: oklch(0.577 0.245 27.325);\n	--border: oklch(0.918 0.011 249.42);\n	--input: oklch(0.918 0.011 249.42);\n{{else}}\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{{/if}}\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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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[data-theme="dark"] {\n	/* Base Colors - Dark Mode */\n{{#if (eq shadcn.baseColor "stone")}}\n	--background: oklch(0.147 0.004 49.25);\n	--foreground: oklch(0.97 0.001 67.54);\n	--card: oklch(0.216 0.006 56.04);\n	--card-foreground: oklch(0.97 0.001 67.54);\n	--popover: oklch(0.269 0.007 34.26);\n	--popover-foreground: oklch(0.97 0.001 67.54);\n	--secondary: oklch(0.269 0.007 34.26);\n	--secondary-foreground: oklch(0.97 0.001 67.54);\n	--muted: oklch(0.269 0.007 34.26);\n	--muted-foreground: oklch(0.709 0.01 56.26);\n	--accent: oklch(0.371 0.01 50.64);\n	--accent-foreground: oklch(0.97 0.001 67.54);\n	--destructive: oklch(0.704 0.191 22.216);\n	--border: oklch(1 0 0 / 10%);\n	--input: oklch(1 0 0 / 15%);\n{{else if (eq shadcn.baseColor "zinc")}}\n	--background: oklch(0.141 0.005 285.82);\n	--foreground: oklch(0.985 0.002 247.86);\n	--card: oklch(0.21 0.006 285.89);\n	--card-foreground: oklch(0.985 0.002 247.86);\n	--popover: oklch(0.274 0.006 286.03);\n	--popover-foreground: oklch(0.985 0.002 247.86);\n	--secondary: oklch(0.274 0.006 286.03);\n	--secondary-foreground: oklch(0.985 0.002 247.86);\n	--muted: oklch(0.274 0.006 286.03);\n	--muted-foreground: oklch(0.705 0.015 286.07);\n	--accent: oklch(0.37 0.013 285.81);\n	--accent-foreground: oklch(0.985 0.002 247.86);\n	--destructive: oklch(0.704 0.191 22.216);\n	--border: oklch(1 0 0 / 10%);\n	--input: oklch(1 0 0 / 15%);\n{{else if (eq shadcn.baseColor "gray")}}\n	--background: oklch(0.13 0.028 261.69);\n	--foreground: oklch(0.985 0.002 247.86);\n	--card: oklch(0.21 0.034 264.53);\n	--card-foreground: oklch(0.985 0.002 247.86);\n	--popover: oklch(0.274 0.029 256.85);\n	--popover-foreground: oklch(0.985 0.002 247.86);\n	--secondary: oklch(0.274 0.029 256.85);\n	--secondary-foreground: oklch(0.985 0.002 247.86);\n	--muted: oklch(0.274 0.029 256.85);\n	--muted-foreground: oklch(0.704 0.022 261.32);\n	--accent: oklch(0.37 0.033 259.73);\n	--accent-foreground: oklch(0.985 0.002 247.86);\n	--destructive: oklch(0.704 0.191 22.216);\n	--border: oklch(1 0 0 / 10%);\n	--input: oklch(1 0 0 / 15%);\n{{else}}\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.269 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.371 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{{/if}}\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{{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{{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{{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{{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{{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{{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{{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{{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{{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{{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{{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{{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{{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{{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{{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{{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{{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{{else}}\n	--primary: oklch(0.922 0 0);\n	--primary-foreground: oklch(0.205 0 0);\n	--ring: oklch(0.556 0 0);\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\n.container {\n	width: 100%;\n	margin-left: auto;\n	margin-right: auto;\n	padding-left: 1rem;\n	padding-right: 1rem;\n	max-width: 96rem;\n}\n\n@media (min-width: 640px) {\n	.container {\n		padding-left: 1.5rem;\n		padding-right: 1.5rem;\n	}\n}\n\n@media (min-width: 1024px) {\n	.container {\n		padding-left: 2rem;\n		padding-right: 2rem;\n	}\n}\n\n/* ========================================\n   HERO TYPOGRAPHY\n   ======================================== */\n\n.hero-content h1 {\n	font-size: 2.25rem !important;\n	line-height: 2.5rem !important;\n	font-weight: 700 !important;\n	letter-spacing: -0.025em !important;\n	margin-bottom: 1.5rem !important;\n	color: var(--color-foreground) !important;\n}\n\n.hero-content p {\n	font-size: 1.25rem !important;\n	line-height: 1.75rem !important;\n	color: var(--color-muted-foreground) !important;\n	max-width: 42rem;\n	margin-left: auto;\n	margin-right: auto;\n	margin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n	color: white !important;\n}\n\n.hero-content--dark p {\n	color: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n	.hero-content h1 {\n		font-size: 3.75rem !important;\n		line-height: 1 !important;\n	}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n	text-align: left !important;\n	margin-left: 0 !important;\n	margin-right: 0 !important;\n}\n\n.hero-content--left p {\n	text-align: left !important;\n	margin-left: 0 !important;\n	margin-right: 0 !important;\n}\n\n/* ========================================\n   PRODUCT SHOWCASE HERO STYLES\n   ======================================== */\n\n.hero-showcase {\n	position: relative;\n	border-radius: 1rem;\n	overflow: hidden;\n	height: 25rem;\n	width: 100%;\n	background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n	.hero-showcase {\n		height: 31.25rem;\n	}\n}\n\n@media (min-width: 1024px) {\n	.hero-showcase {\n		height: 37.5rem;\n	}\n}\n\n.hero-bg-image {\n	position: absolute;\n	inset: 0;\n	z-index: 0;\n	opacity: 0.1;\n}\n\n.hero-bg-image img {\n	width: 100%;\n	height: 100%;\n	object-fit: cover;\n	object-position: center;\n}\n\n.hero-mockup-centered {\n	position: relative;\n	z-index: 10;\n	padding: 2rem;\n	display: flex;\n	justify-content: center;\n	align-items: center;\n	height: 100%;\n}\n\n@media (min-width: 768px) {\n	.hero-mockup-centered {\n		padding: 3rem;\n	}\n}\n\n.mockup-wrapper {\n	background: var(--color-background);\n	border-radius: 12px;\n	box-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	overflow: hidden;\n	animation: mockup-entrance 0.8s ease-out;\n	width: 100%;\n}\n\n.mockup-wrapper img {\n	width: 100%;\n	height: auto;\n	display: block;\n}\n\n@keyframes mockup-entrance {\n	from {\n		opacity: 0;\n		transform: translateY(30px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n	display: flex;\n	align-items: center;\n	padding: 12px 16px;\n	background: var(--color-muted);\n	border-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n	display: flex;\n	gap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n	width: 12px;\n	height: 12px;\n	border-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n	background: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n	background: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n	background: #27ca40;\n}\n\n.mockup-chrome-title {\n	flex: 1;\n	text-align: center;\n	font-size: 13px;\n	font-weight: 500;\n	color: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n	width: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n	display: flex;\n	min-height: 400px;\n}\n\n.mockup-sidebar {\n	width: 220px;\n	background: var(--color-card);\n	border-right: 1px solid var(--color-border);\n	flex-shrink: 0;\n}\n\n.sidebar-header {\n	padding: 16px;\n	border-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n	display: flex;\n	align-items: center;\n	gap: 10px;\n}\n\n.logo-icon {\n	width: 28px;\n	height: 28px;\n	background: var(--color-primary);\n	color: white;\n	border-radius: 6px;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	font-weight: 700;\n	font-size: 14px;\n}\n\n.logo-text {\n	font-weight: 600;\n	font-size: 14px;\n	color: var(--color-foreground);\n}\n\n.sidebar-nav {\n	padding: 8px;\n}\n\n.sidebar-item {\n	display: flex;\n	align-items: center;\n	gap: 10px;\n	padding: 10px 12px;\n	border-radius: 6px;\n	font-size: 13px;\n	color: var(--color-muted-foreground);\n	transition: all 0.15s ease;\n	cursor: pointer;\n}\n\n.sidebar-item:hover {\n	background: var(--color-accent);\n	color: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n	background: oklch(from var(--color-primary) l c h / 0.12);\n	color: var(--color-primary);\n}\n\n.sidebar-icon {\n	font-size: 16px;\n}\n\n.sidebar-label {\n	flex: 1;\n}\n\n.sidebar-badge {\n	background: var(--color-primary);\n	color: var(--color-primary-foreground);\n	font-size: 11px;\n	padding: 2px 6px;\n	border-radius: 10px;\n	font-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n	flex: 1;\n	display: flex;\n	flex-direction: column;\n	background: var(--color-background);\n}\n\n.main-header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 16px 20px;\n	border-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n	display: flex;\n	flex-direction: column;\n	gap: 2px;\n}\n\n.header-title h2 {\n	font-size: 16px;\n	font-weight: 600;\n	margin: 0;\n	color: var(--color-foreground);\n}\n\n.header-breadcrumb {\n	font-size: 12px;\n	color: var(--color-muted-foreground);\n}\n\n.header-actions {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n}\n\n.action-btn {\n	padding: 8px 16px;\n	background: var(--color-primary);\n	color: var(--color-primary-foreground);\n	border: none;\n	border-radius: 6px;\n	font-size: 13px;\n	font-weight: 500;\n	cursor: pointer;\n	transition: all 0.3s ease;\n}\n\n.action-btn--success {\n	background: #27ca40;\n}\n\n.action-btn--featured {\n	background: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n	display: flex;\n	flex: 1;\n}\n\n.editor-panel {\n	flex: 1;\n	padding: 20px;\n	border-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n	margin-bottom: 20px;\n}\n\n.editor-label {\n	display: block;\n	font-size: 12px;\n	font-weight: 500;\n	color: var(--color-muted-foreground);\n	margin-bottom: 6px;\n}\n\n.editor-input {\n	background: var(--color-muted);\n	border: 1px solid var(--color-border);\n	border-radius: 6px;\n	padding: 10px 12px;\n	font-size: 14px;\n	color: var(--color-foreground);\n	display: flex;\n	align-items: center;\n}\n\n.input-text {\n	flex: 1;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n.input-cursor {\n	width: 2px;\n	height: 18px;\n	background: var(--color-primary);\n	animation: blink 1s infinite;\n	margin-left: 2px;\n}\n\n@keyframes blink {\n	0%,\n	50% {\n		opacity: 1;\n	}\n	51%,\n	100% {\n		opacity: 0;\n	}\n}\n\n.editor-select {\n	background: var(--color-muted);\n	border: 1px solid var(--color-border);\n	border-radius: 6px;\n	padding: 10px 12px;\n	font-size: 14px;\n	color: var(--color-foreground);\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n}\n\n.select-arrow {\n	font-size: 10px;\n	color: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n	background: var(--color-muted);\n	border: 1px solid var(--color-border);\n	border-radius: 6px;\n	padding: 10px 12px;\n	font-size: 14px;\n	color: var(--color-foreground);\n	min-height: 80px;\n}\n\n.textarea-text {\n	transition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n	color: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n	width: 320px;\n	padding: 20px;\n	background: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	margin-bottom: 16px;\n}\n\n.preview-label {\n	font-size: 12px;\n	font-weight: 500;\n	color: var(--color-muted-foreground);\n}\n\n.preview-url {\n	font-size: 11px;\n	color: var(--color-muted-foreground);\n	font-family: monospace;\n}\n\n.preview-card {\n	background: var(--color-card);\n	border: 1px solid var(--color-border);\n	border-radius: 10px;\n	overflow: hidden;\n	position: relative;\n	transition: all 0.3s ease;\n}\n\n.preview-badge {\n	position: absolute;\n	top: 10px;\n	right: 10px;\n	background: var(--color-primary);\n	color: white;\n	font-size: 11px;\n	padding: 4px 8px;\n	border-radius: 4px;\n	font-weight: 500;\n	animation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n	from {\n		transform: scale(0);\n		opacity: 0;\n	}\n	to {\n		transform: scale(1);\n		opacity: 1;\n	}\n}\n\n.preview-image {\n	height: 120px;\n	background: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n	width: 100%;\n	height: 100%;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	font-size: 40px;\n}\n\n.preview-content {\n	padding: 16px;\n}\n\n.preview-category-tag {\n	display: inline-block;\n	font-size: 11px;\n	color: var(--color-primary);\n	font-weight: 500;\n	margin-bottom: 8px;\n}\n\n.preview-title {\n	font-size: 16px;\n	font-weight: 600;\n	margin: 0 0 8px;\n	color: var(--color-foreground);\n}\n\n.preview-description {\n	font-size: 13px;\n	color: var(--color-muted-foreground);\n	line-height: 1.5;\n	margin: 0 0 12px;\n}\n\n.preview-meta {\n	display: flex;\n	gap: 8px;\n	font-size: 12px;\n}\n\n.meta-rating {\n	color: #ffc24a;\n}\n\n.meta-reviews {\n	color: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n	display: flex;\n	justify-content: center;\n	gap: 24px;\n	padding: 16px;\n	border-top: 1px solid var(--color-border);\n}\n\n.indicator {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	background: none;\n	border: none;\n	cursor: pointer;\n	padding: 6px 12px;\n	border-radius: 20px;\n	transition: all 0.2s ease;\n}\n\n.indicator:hover {\n	background: var(--color-accent);\n}\n\n.indicator--active {\n	background: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n	width: 8px;\n	height: 8px;\n	border-radius: 50%;\n	background: var(--color-muted-foreground);\n	transition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n	background: var(--color-primary);\n	box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n	font-size: 12px;\n	color: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n	color: var(--color-foreground);\n	font-weight: 500;\n}\n\n/* ========================================\n   LOGO BANNER STYLES\n   ======================================== */\n\n.logo-scroll-container {\n	overflow: hidden;\n	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n	display: flex;\n	animation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n	animation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n	0% {\n		transform: translateX(0);\n	}\n	100% {\n		transform: translateX(-50%);\n	}\n}\n\n.logo-item {\n	flex-shrink: 0;\n	min-width: 150px;\n}\n\n/* ========================================\n   RESPONSIVE ADJUSTMENTS\n   ======================================== */\n\n@media (max-width: 768px) {\n	.mockup-content {\n		flex-direction: column;\n	}\n\n	.mockup-sidebar {\n		width: 100%;\n		border-right: none;\n		border-bottom: 1px solid var(--color-border);\n	}\n\n	.sidebar-nav {\n		display: flex;\n		overflow-x: auto;\n		padding: 8px;\n		gap: 4px;\n	}\n\n	.sidebar-item {\n		white-space: nowrap;\n	}\n\n	.main-split {\n		flex-direction: column;\n	}\n\n	.editor-panel {\n		border-right: none;\n		border-bottom: 1px solid var(--color-border);\n	}\n\n	.preview-panel {\n		width: 100%;\n	}\n\n	.mockup-indicators {\n		flex-wrap: wrap;\n		gap: 12px;\n	}\n\n	.indicator-label {\n		display: none;\n	}\n}\n\n/* ========================================\n   ANIMATION STYLES\n   ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n	animation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n	from {\n		opacity: 0;\n		transform: translateY(10px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n	from {\n		opacity: 0;\n		transform: translateX(-20px);\n	}\n	to {\n		opacity: 1;\n		transform: translateX(0);\n	}\n}\n\n.feature-showcase-content {\n	animation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n	transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n	transform: translateY(-4px);\n	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n	from {\n		opacity: 0;\n		transform: translateY(20px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n.stat-number {\n	animation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n	transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n	transform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n	0%,\n	100% {\n		transform: translateY(0);\n	}\n	50% {\n		transform: translateY(-10px);\n	}\n}\n\n.cta-decorative {\n	animation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n	from {\n		opacity: 0;\n		transform: translateY(20px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n.feature-card {\n	animation: card-entrance 0.4s ease-out;\n	animation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n	animation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n	animation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n	animation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n	animation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n	animation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n	animation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n	scroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n	position: relative;\n	overflow: hidden;\n}\n\n.cta-button::after {\n	content: "";\n	position: absolute;\n	inset: 0;\n	background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n	opacity: 0;\n	transition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n	opacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n	position: relative;\n	border-radius: 12px;\n	overflow: hidden;\n	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n	transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n	transform: translateY(-4px);\n	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n',
   "marketing/astro/tsconfig.json.hbs": '{\n  "extends": "astro/tsconfigs/strict",\n  "compilerOptions": {\n    "baseUrl": ".",\n    "paths": {\n      "@/*": ["./src/*"]\n    }\n  },\n  "include": ["src/**/*", ".astro/types.d.ts"],\n  "exclude": ["node_modules", "dist"]\n}\n',
+  "marketing/nextjs/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 if (eq shadcn.style "maia")}}\n  "style": "new-york",\n{{else if (eq shadcn.style "lyra")}}\n  "style": "new-york",\n{{else if (eq shadcn.style "mira")}}\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{{#if (eq shadcn.iconLibrary "lucide")}}\n  "iconLibrary": "lucide",\n{{else if (eq shadcn.iconLibrary "hugeicons")}}\n  "iconLibrary": "lucide",\n{{else if (eq shadcn.iconLibrary "tabler")}}\n  "iconLibrary": "lucide",\n{{else if (eq shadcn.iconLibrary "phosphor")}}\n  "iconLibrary": "lucide",\n{{else}}\n  "iconLibrary": "lucide",\n{{/if}}\n  "aliases": {\n    "components": "@/components",\n    "utils": "@/lib/utils",\n    "ui": "@/components/ui",\n    "lib": "@/lib",\n    "hooks": "@/hooks"\n  },\n  "registries": {}\n}\n',
   "marketing/nextjs/next.config.ts.hbs": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  transpilePackages: ['@repo/ui'],\n}\n\nexport default nextConfig\n",
-  "marketing/nextjs/package.json.hbs": '{\n  "name": "@repo/marketing",\n  "version": "0.1.0",\n  "private": true,\n  "scripts": {\n    "dev": "next dev --turbopack --port 3000",\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    "next": "^16.0.0",\n    "react": "^19.0.0",\n    "react-dom": "^19.0.0",\n    "@repo/ui": "workspace:*",\n    "lucide-react": "^0.468.0",\n    "next-themes": "^0.4.4",\n    "clsx": "^2.1.1",\n    "tailwind-merge": "^2.6.0",\n    "class-variance-authority": "^0.7.1"\n  },\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',
+  "marketing/nextjs/package.json.hbs": '{\n  "name": "@repo/marketing",\n  "version": "0.1.0",\n  "private": true,\n  "scripts": {\n    "dev": "next dev --turbopack --port 3000",\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    "next": "^16.0.0",\n    "react": "^19.0.0",\n    "react-dom": "^19.0.0",\n    "@repo/ui": "workspace:*",\n    "lucide-react": "^0.468.0",\n    "next-themes": "^0.4.4",\n    "clsx": "^2.1.1",\n    "tailwind-merge": "^2.6.0",\n    "class-variance-authority": "^0.7.1",\n    "tw-animate-css": "^1.3.0"\n  },\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',
   "marketing/nextjs/postcss.config.mjs.hbs": "export default {\n  plugins: {\n    '@tailwindcss/postcss': {},\n  },\n}\n",
+  "marketing/nextjs/src/app/about/page.tsx": `import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { LogoBanner, FinalCTA } from "@/components/blocks"
+import { Users, Target, Heart, Zap } from "lucide-react"
+
+const values = [
+  {
+    icon: <Users className="h-6 w-6" />,
+    title: "Customer First",
+    description:
+      "Every decision we make starts with our customers. Their success is our success.",
+  },
+  {
+    icon: <Target className="h-6 w-6" />,
+    title: "Simplicity Wins",
+    description:
+      "We believe powerful software doesn't have to be complicated. We obsess over making things simple.",
+  },
+  {
+    icon: <Heart className="h-6 w-6" />,
+    title: "Built with Care",
+    description:
+      "We sweat the details because we know they matter. Quality is never an accident.",
+  },
+  {
+    icon: <Zap className="h-6 w-6" />,
+    title: "Move Fast",
+    description:
+      "We ship early and often. Progress beats perfection when you're learning from real users.",
+  },
+]
+
+const stats = [
+  { value: "50K+", label: "Teams worldwide" },
+  { value: "180+", label: "Countries" },
+  { value: "99.9%", label: "Uptime" },
+  { value: "4.8/5", label: "Customer rating" },
+]
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                We're on a mission to help teams work better together
+              </h1>
+              <p className="text-xl text-muted-foreground">
+                SaaSify was founded in 2020 with a simple belief: work doesn't have to be
+                complicated. We're building the tools that help teams focus on what matters.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Stats */}
+        <section className="py-12 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+              {stats.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-4xl md:text-5xl font-bold text-primary mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-muted-foreground">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Story */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-8 text-center">
+                Our story
+              </h2>
+              <div className="prose prose-lg max-w-none text-muted-foreground">
+                <p className="mb-6">
+                  It all started with a frustration we've all felt: too many tools, too many
+                  tabs, too much time wasted switching between them. We knew there had to be
+                  a better way.
+                </p>
+                <p className="mb-6">
+                  So we set out to build a platform that brings everything together\u2014tasks,
+                  documents, communication, and automation\u2014in one seamless experience. No more
+                  context switching. No more lost information. Just focused, productive work.
+                </p>
+                <p>
+                  Today, SaaSify is used by over 50,000 teams worldwide, from two-person
+                  startups to Fortune 500 companies. And we're just getting started.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Values */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Our values
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                These principles guide everything we do, from product decisions to how we
+                treat each other.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+              {values.map((value) => (
+                <div
+                  key={value.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {value.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{value.title}</h3>
+                  <p className="text-muted-foreground text-sm">{value.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Trusted By */}
+        <LogoBanner
+          heading="Trusted by teams at companies of all sizes"
+          style="scroll"
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Join us on our mission"
+          subheading="Start your free trial today and see why thousands of teams trust SaaSify."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Contact us", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}
+`,
+  "marketing/nextjs/src/app/blog/[slug]/page.tsx": `import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { FinalCTA } from "@/components/blocks"
+import Link from "next/link"
+import { ArrowLeft, Calendar, Clock, User } from "lucide-react"
+
+// This is sample data - in a real app, you would fetch this from a CMS or MDX files
+const blogPosts: Record<string, {
+  title: string
+  description: string
+  content: string
+  date: string
+  author: string
+  readTime: string
+  category: string
+}> = {
+  "boost-team-productivity": {
+    title: "10 Ways to Boost Your Team's Productivity",
+    description: "Discover proven strategies to help your team work smarter, not harder.",
+    date: "January 15, 2025",
+    author: "Sarah Johnson",
+    readTime: "8 min read",
+    category: "Productivity",
+    content: \`
+      <p>In today's fast-paced business environment, productivity isn't just about working harder\u2014it's about working smarter. Here are 10 proven strategies to help your team achieve more while maintaining a healthy work-life balance.</p>
+
+      <h2>1. Set Clear Goals and Priorities</h2>
+      <p>Without clear direction, teams can easily get lost in busywork. Start each week by defining the top 3-5 priorities that will move the needle for your organization.</p>
+
+      <h2>2. Embrace Asynchronous Communication</h2>
+      <p>Not every message needs an immediate response. By embracing async communication, you give your team members uninterrupted blocks of time to focus on deep work.</p>
+
+      <h2>3. Automate Repetitive Tasks</h2>
+      <p>If your team is doing the same task more than twice, it's time to automate it. Modern tools make it easy to create workflows that handle routine work automatically.</p>
+
+      <h2>4. Hold Fewer, Better Meetings</h2>
+      <p>Before scheduling a meeting, ask yourself: "Could this be an email?" When meetings are necessary, have a clear agenda and stick to the allotted time.</p>
+
+      <h2>5. Invest in the Right Tools</h2>
+      <p>The right tools can multiply your team's effectiveness. Look for platforms that integrate well with each other to reduce context switching.</p>
+
+      <h2>6. Create a Culture of Documentation</h2>
+      <p>When knowledge lives only in people's heads, it creates bottlenecks. Document processes, decisions, and learnings so everyone can move faster independently.</p>
+
+      <h2>7. Encourage Regular Breaks</h2>
+      <p>Counterintuitive as it may seem, taking breaks actually improves productivity. The human brain needs rest to perform at its best.</p>
+
+      <h2>8. Provide Feedback Continuously</h2>
+      <p>Don't wait for annual reviews to give feedback. Regular, constructive feedback helps team members course-correct and grow continuously.</p>
+
+      <h2>9. Eliminate Unnecessary Approvals</h2>
+      <p>Too many approval steps slow teams down. Trust your people to make good decisions and only require sign-off when truly necessary.</p>
+
+      <h2>10. Celebrate Wins (Big and Small)</h2>
+      <p>Recognition fuels motivation. Take time to acknowledge achievements, whether it's closing a big deal or simply shipping a feature on time.</p>
+
+      <h2>Conclusion</h2>
+      <p>Improving productivity is an ongoing journey, not a destination. Start with one or two of these strategies, measure the impact, and keep iterating. Your team will thank you for it.</p>
+    \`,
+  },
+}
+
+// Generate static params for static generation
+export function generateStaticParams() {
+  return Object.keys(blogPosts).map((slug) => ({
+    slug,
+  }))
+}
+
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+  const post = blogPosts[slug]
+
+  // If post doesn't exist, show a placeholder
+  if (!post) {
+    return (
+      <div className="min-h-screen flex flex-col">
+        <Header />
+        <main className="flex-1">
+          <section className="py-16 md:py-24">
+            <div className="container mx-auto px-4 text-center">
+              <h1 className="text-4xl font-bold mb-4">Post Not Found</h1>
+              <p className="text-muted-foreground mb-8">
+                This blog post doesn&apos;t exist or has been removed.
+              </p>
+              <Link
+                href="/blog"
+                className="inline-flex items-center text-primary hover:underline"
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Back to blog
+              </Link>
+            </div>
+          </section>
+        </main>
+        <Footer />
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Back Link */}
+        <section className="pt-8">
+          <div className="container mx-auto px-4">
+            <Link
+              href="/blog"
+              className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to blog
+            </Link>
+          </div>
+        </section>
+
+        {/* Header */}
+        <section className="py-12 md:py-16">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto">
+              <div className="mb-6">
+                <span className="inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
+                  {post.category}
+                </span>
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                {post.title}
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                {post.description}
+              </p>
+              <div className="flex flex-wrap items-center gap-6 text-sm text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <User className="h-4 w-4" />
+                  {post.author}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4" />
+                  {post.date}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Clock className="h-4 w-4" />
+                  {post.readTime}
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Content */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div
+              className="max-w-3xl mx-auto prose prose-lg prose-gray dark:prose-invert"
+              dangerouslySetInnerHTML={{ __html: post.content }}
+            />
+          </div>
+        </section>
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to transform how your team works?"
+          subheading="Start your free trial and see the difference SaaSify can make."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "View pricing", href: "/pricing", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}
+`,
   "marketing/nextjs/src/app/blog/page.tsx": `import { Header } from "@/components/Header"
 import { Footer } from "@/components/Footer"
 import Link from "next/link"
@@ -2737,30 +3076,360 @@ export default function BlogPage() {
           </div>
         </section>
 
-        {/* Blog Grid */}
-        <section className="pb-24">
+        {/* Blog Grid */}
+        <section className="pb-24">
+          <div className="container mx-auto px-4">
+            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+              {blogPosts.map((post) => (
+                <article
+                  key={post.title}
+                  className="group rounded-lg border border-border bg-card p-6 transition-all hover:shadow-lg"
+                >
+                  <div className="mb-4">
+                    <span className="inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
+                      {post.category}
+                    </span>
+                  </div>
+                  <h2 className="text-xl font-semibold mb-2 group-hover:text-primary transition-colors">
+                    <Link href={post.slug}>{post.title}</Link>
+                  </h2>
+                  <p className="text-muted-foreground mb-4">{post.description}</p>
+                  <time className="text-sm text-muted-foreground">{post.date}</time>
+                </article>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  )
+}
+`,
+  "marketing/nextjs/src/app/features/analytics/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\nimport { FinalCTA } from "@/components/blocks"\nimport { BarChart3, TrendingUp, LineChart, PieChart, Target, Bell } from "lucide-react"\n\nconst features = [\n  {\n    icon: <BarChart3 className="h-6 w-6" />,\n    title: "Real-Time Dashboards",\n    description:\n      "See your metrics update live. No more waiting for reports to refresh.",\n  },\n  {\n    icon: <TrendingUp className="h-6 w-6" />,\n    title: "Trend Analysis",\n    description:\n      "Spot patterns and trends before they become obvious. Make proactive decisions.",\n  },\n  {\n    icon: <LineChart className="h-6 w-6" />,\n    title: "Custom Reports",\n    description:\n      "Build reports that matter to your business. Export to PDF, Excel, or share live links.",\n  },\n  {\n    icon: <PieChart className="h-6 w-6" />,\n    title: "Team Performance",\n    description:\n      "Track productivity metrics across your team. Identify bottlenecks and opportunities.",\n  },\n  {\n    icon: <Target className="h-6 w-6" />,\n    title: "Goal Tracking",\n    description:\n      "Set targets and track progress in real-time. Keep your team focused on what matters.",\n  },\n  {\n    icon: <Bell className="h-6 w-6" />,\n    title: "Smart Alerts",\n    description:\n      "Get notified when metrics cross thresholds. Never miss an important change.",\n  },\n]\n\nexport default function AnalyticsPage() {\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                Analytics\n              </div>\n              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n                Make decisions backed by real-time data\n              </h1>\n              <p className="text-xl text-muted-foreground mb-8">\n                Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.\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        {/* Dashboard 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                  <BarChart3 className="h-16 w-16 mx-auto mb-4 opacity-50" />\n                  <p>Dashboard 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                Analytics that drive action\n              </h2>\n              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">\n                Everything you need to understand your data and make better decisions.\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 unlock insights?"\n          subheading="Start your free trial and see your data come to life."\n          style="dark"\n          links={[\n            { label: "Start free trial", href: "/sign-up", variant: "outline" },\n            { label: "Book a demo", href: "/demo", variant: "default" },\n          ]}\n        />\n      </main>\n\n      <Footer />\n    </div>\n  )\n}\n',
+  "marketing/nextjs/src/app/features/automation/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\nimport { FinalCTA } from "@/components/blocks"\nimport { Zap, GitBranch, Clock, Repeat, Mail, Bell } from "lucide-react"\n\nconst features = [\n  {\n    icon: <Zap className="h-6 w-6" />,\n    title: "Visual Workflow Builder",\n    description:\n      "Build powerful automations with our drag-and-drop builder. No coding required.",\n  },\n  {\n    icon: <GitBranch className="h-6 w-6" />,\n    title: "Conditional Logic",\n    description:\n      "Create smart workflows with if/then rules, filters, and branching paths.",\n  },\n  {\n    icon: <Clock className="h-6 w-6" />,\n    title: "Scheduled Triggers",\n    description:\n      "Run automations on a schedule. Daily reports, weekly syncs, monthly reviews.",\n  },\n  {\n    icon: <Repeat className="h-6 w-6" />,\n    title: "Cross-App Actions",\n    description:\n      "Trigger actions across all your connected tools. True end-to-end automation.",\n  },\n  {\n    icon: <Mail className="h-6 w-6" />,\n    title: "Email Automation",\n    description:\n      "Send automated emails based on triggers. Follow-ups, reminders, notifications.",\n  },\n  {\n    icon: <Bell className="h-6 w-6" />,\n    title: "Smart Notifications",\n    description:\n      "Route notifications intelligently. Right message, right person, right time.",\n  },\n]\n\nconst useCases = [\n  {\n    title: "Lead Assignment",\n    description: "Automatically assign new leads to sales reps based on territory or round-robin.",\n  },\n  {\n    title: "Approval Workflows",\n    description: "Route documents for approval with multi-step workflows and escalation.",\n  },\n  {\n    title: "Onboarding",\n    description: "Create welcome sequences for new customers or team members automatically.",\n  },\n  {\n    title: "Status Updates",\n    description: "Sync status changes across tools and notify stakeholders automatically.",\n  },\n]\n\nexport default function AutomationPage() {\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                Automation\n              </div>\n              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n                Eliminate busywork with smart automation\n              </h1>\n              <p className="text-xl text-muted-foreground mb-8">\n                Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.\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                  See it in action\n                </a>\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                Automation that scales with you\n              </h2>\n              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">\n                From simple triggers to complex workflows, automate anything.\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        {/* Use Cases */}\n        <section className="py-16 md:py-24">\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                Popular automation recipes\n              </h2>\n              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">\n                Get started quickly with pre-built templates for common workflows.\n              </p>\n            </div>\n\n            <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">\n              {useCases.map((useCase) => (\n                <div\n                  key={useCase.title}\n                  className="p-6 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors"\n                >\n                  <h3 className="font-semibold mb-2">{useCase.title}</h3>\n                  <p className="text-muted-foreground text-sm">{useCase.description}</p>\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* Final CTA */}\n        <FinalCTA\n          headline="Ready to automate your workflow?"\n          subheading="Start your free trial and build your first automation in minutes."\n          style="dark"\n          links={[\n            { label: "Start free trial", href: "/sign-up", variant: "outline" },\n            { label: "View templates", href: "#", variant: "default" },\n          ]}\n        />\n      </main>\n\n      <Footer />\n    </div>\n  )\n}\n',
+  "marketing/nextjs/src/app/features/dashboard/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\nimport { FinalCTA } from "@/components/blocks"\nimport { LayoutDashboard, Layers, Palette, Monitor, Smartphone, Share2 } from "lucide-react"\n\nconst features = [\n  {\n    icon: <LayoutDashboard className="h-6 w-6" />,\n    title: "Customizable Layouts",\n    description:\n      "Drag and drop widgets to create the perfect view for your workflow.",\n  },\n  {\n    icon: <Layers className="h-6 w-6" />,\n    title: "Multiple Views",\n    description:\n      "Switch between board, list, timeline, and calendar views instantly.",\n  },\n  {\n    icon: <Palette className="h-6 w-6" />,\n    title: "Personalized Themes",\n    description:\n      "Choose from light, dark, or system themes. Make it yours.",\n  },\n  {\n    icon: <Monitor className="h-6 w-6" />,\n    title: "Desktop App",\n    description:\n      "Native apps for Mac and Windows. Full offline support included.",\n  },\n  {\n    icon: <Smartphone className="h-6 w-6" />,\n    title: "Mobile Ready",\n    description:\n      "Full-featured iOS and Android apps. Stay productive on the go.",\n  },\n  {\n    icon: <Share2 className="h-6 w-6" />,\n    title: "Shareable Dashboards",\n    description:\n      "Share views with stakeholders. Public links or password-protected.",\n  },\n]\n\nexport default function DashboardPage() {\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                Dashboard\n              </div>\n              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n                Your command center for everything\n              </h1>\n              <p className="text-xl text-muted-foreground mb-8">\n                A beautiful, customizable dashboard that puts everything you need at your fingertips. Multiple views, drag-and-drop widgets, and full mobile support.\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        {/* Dashboard 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                  <LayoutDashboard className="h-16 w-16 mx-auto mb-4 opacity-50" />\n                  <p>Dashboard 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                A dashboard that works for you\n              </h2>\n              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">\n                Customize every aspect of your workspace to match how you work best.\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 build your perfect workspace?"\n          subheading="Start your free trial and customize your dashboard in minutes."\n          style="dark"\n          links={[\n            { label: "Start free trial", href: "/sign-up", variant: "outline" },\n            { label: "Watch demo", href: "/demo", variant: "default" },\n          ]}\n        />\n      </main>\n\n      <Footer />\n    </div>\n  )\n}\n',
+  "marketing/nextjs/src/app/features/integrations/page.tsx": `import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { LogoBanner, FinalCTA } from "@/components/blocks"
+import { Link2, RefreshCw, Code2, Zap, ArrowRight, Check } from "lucide-react"
+
+const features = [
+  {
+    icon: <Link2 className="h-6 w-6" />,
+    title: "100+ Native Integrations",
+    description:
+      "Connect with the tools your team already uses. From CRMs to project management, we've got you covered.",
+  },
+  {
+    icon: <RefreshCw className="h-6 w-6" />,
+    title: "Two-Way Sync",
+    description:
+      "Changes flow automatically between apps. Update in one place, see it everywhere.",
+  },
+  {
+    icon: <Code2 className="h-6 w-6" />,
+    title: "Developer API",
+    description:
+      "Build custom integrations with our comprehensive REST API and webhooks.",
+  },
+  {
+    icon: <Zap className="h-6 w-6" />,
+    title: "Real-Time Updates",
+    description:
+      "Data syncs instantly, not in batches. Always work with the latest information.",
+  },
+]
+
+const integrationCategories = [
+  {
+    name: "CRM & Sales",
+    tools: ["Salesforce", "HubSpot", "Pipedrive", "Close"],
+  },
+  {
+    name: "Communication",
+    tools: ["Slack", "Microsoft Teams", "Discord", "Email"],
+  },
+  {
+    name: "Project Management",
+    tools: ["Jira", "Asana", "Linear", "Notion"],
+  },
+  {
+    name: "Productivity",
+    tools: ["Google Workspace", "Microsoft 365", "Dropbox", "Box"],
+  },
+]
+
+export default function IntegrationsPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                Integrations
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Connect everything your team uses
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Integrate with 100+ popular tools. Two-way sync keeps everything up to date automatically.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <a
+                  href="/sign-up"
+                  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"
+                >
+                  Start free trial
+                </a>
+                <a
+                  href="/contact"
+                  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"
+                >
+                  Request integration
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+              {features.map((feature) => (
+                <div
+                  key={feature.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {feature.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+                  <p className="text-muted-foreground text-sm">{feature.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Integration Categories */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Integrations for every workflow
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Connect the tools you already use to streamline your work.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+              {integrationCategories.map((category) => (
+                <div key={category.name} className="bg-card rounded-lg border border-border p-6">
+                  <h3 className="font-semibold mb-4">{category.name}</h3>
+                  <ul className="space-y-3">
+                    {category.tools.map((tool) => (
+                      <li key={tool} className="flex items-center text-sm text-muted-foreground">
+                        <Check className="h-4 w-4 text-primary mr-2 shrink-0" />
+                        {tool}
+                      </li>
+                    ))}
+                  </ul>
+                  <a
+                    href="#"
+                    className="inline-flex items-center text-sm text-primary hover:underline mt-4"
+                  >
+                    See all <ArrowRight className="h-4 w-4 ml-1" />
+                  </a>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Logo Banner */}
+        <LogoBanner
+          heading="Integrates with your favorite tools"
+          style="grid"
+          logos={[
+            { name: "Slack", initials: "SL" },
+            { name: "Salesforce", initials: "SF" },
+            { name: "HubSpot", initials: "HS" },
+            { name: "Google Workspace", initials: "GW" },
+            { name: "Zapier", initials: "ZP" },
+            { name: "Jira", initials: "JI" },
+          ]}
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to connect your tools?"
+          subheading="Start your free trial and integrate with your favorite apps in minutes."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "View all integrations", href: "#", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}
+`,
+  "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',
+  "marketing/nextjs/src/app/features/security/page.tsx": `import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { FinalCTA } from "@/components/blocks"
+import { Shield, Lock, Key, Eye, Server, FileCheck } from "lucide-react"
+
+const features = [
+  {
+    icon: <Shield className="h-6 w-6" />,
+    title: "SOC 2 Type II Certified",
+    description:
+      "We've passed rigorous third-party audits to verify our security controls and practices.",
+  },
+  {
+    icon: <Lock className="h-6 w-6" />,
+    title: "AES-256 Encryption",
+    description:
+      "All data is encrypted at rest and in transit using industry-standard encryption.",
+  },
+  {
+    icon: <Key className="h-6 w-6" />,
+    title: "Single Sign-On (SSO)",
+    description:
+      "Connect with your identity provider. Support for SAML 2.0, OIDC, and OAuth.",
+  },
+  {
+    icon: <Eye className="h-6 w-6" />,
+    title: "Audit Logs",
+    description:
+      "Track every action in your workspace. Full audit trails for compliance and security.",
+  },
+  {
+    icon: <Server className="h-6 w-6" />,
+    title: "99.9% Uptime SLA",
+    description:
+      "We guarantee availability with redundant infrastructure across multiple regions.",
+  },
+  {
+    icon: <FileCheck className="h-6 w-6" />,
+    title: "GDPR Compliant",
+    description:
+      "Full compliance with GDPR, CCPA, and other privacy regulations. Your data, your control.",
+  },
+]
+
+const certifications = [
+  { name: "SOC 2 Type II", description: "Audited security controls" },
+  { name: "GDPR", description: "EU data protection" },
+  { name: "CCPA", description: "California privacy" },
+  { name: "ISO 27001", description: "Information security" },
+]
+
+export default function SecurityPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                Security
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Enterprise-grade security for every team
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Your data is protected by industry-leading security practices. SOC 2 certified, GDPR compliant, and built for enterprise.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <a
+                  href="/sign-up"
+                  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"
+                >
+                  Start free trial
+                </a>
+                <a
+                  href="/contact"
+                  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"
+                >
+                  Contact security team
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Certifications */}
+        <section className="pb-16 md:pb-24">
           <div className="container mx-auto px-4">
-            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-              {blogPosts.map((post) => (
-                <article
-                  key={post.title}
-                  className="group rounded-lg border border-border bg-card p-6 transition-all hover:shadow-lg"
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
+              {certifications.map((cert) => (
+                <div
+                  key={cert.name}
+                  className="text-center p-6 rounded-lg border border-border bg-card"
                 >
-                  <div className="mb-4">
-                    <span className="inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
-                      {post.category}
-                    </span>
+                  <div className="font-semibold mb-1">{cert.name}</div>
+                  <div className="text-sm text-muted-foreground">{cert.description}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Security you can trust
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                We take security seriously at every layer of our platform.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {features.map((feature) => (
+                <div
+                  key={feature.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {feature.icon}
                   </div>
-                  <h2 className="text-xl font-semibold mb-2 group-hover:text-primary transition-colors">
-                    <Link href={post.slug}>{post.title}</Link>
-                  </h2>
-                  <p className="text-muted-foreground mb-4">{post.description}</p>
-                  <time className="text-sm text-muted-foreground">{post.date}</time>
-                </article>
+                  <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+                  <p className="text-muted-foreground text-sm">{feature.description}</p>
+                </div>
               ))}
             </div>
           </div>
         </section>
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to secure your workflow?"
+          subheading="Start your free trial with enterprise-grade security from day one."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "View security docs", href: "#", variant: "default" },
+          ]}
+        />
       </main>
 
       <Footer />
@@ -2768,7 +3437,7 @@ export default function BlogPage() {
   )
 }
 `,
-  "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',
+  "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',
   "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	/* Colors */\n	--color-background: var(--background);\n	--color-foreground: var(--foreground);\n\n	--color-card: var(--card);\n	--color-card-foreground: var(--card-foreground);\n\n	--color-popover: var(--popover);\n	--color-popover-foreground: var(--popover-foreground);\n\n	--color-primary: var(--primary);\n	--color-primary-foreground: var(--primary-foreground);\n\n	--color-secondary: var(--secondary);\n	--color-secondary-foreground: var(--secondary-foreground);\n\n	--color-muted: var(--muted);\n	--color-muted-foreground: var(--muted-foreground);\n\n	--color-accent: var(--accent);\n	--color-accent-foreground: var(--accent-foreground);\n\n	--color-destructive: var(--destructive);\n\n	--color-border: var(--border);\n	--color-input: var(--input);\n	--color-ring: var(--ring);\n\n	--color-chart-1: var(--chart-1);\n	--color-chart-2: var(--chart-2);\n	--color-chart-3: var(--chart-3);\n	--color-chart-4: var(--chart-4);\n	--color-chart-5: var(--chart-5);\n\n	/* Border radius */\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	/* Fonts */\n	--font-sans: var(--font-geist-sans), system-ui, sans-serif;\n	--font-mono: var(--font-geist-mono), monospace;\n\n	/* Container */\n	--container-sm: 40rem;\n	--container-md: 48rem;\n	--container-lg: 64rem;\n	--container-xl: 80rem;\n	--container-2xl: 96rem;\n\n	/* Animations */\n	--animate-accordion-down: accordion-down 0.2s ease-out;\n	--animate-accordion-up: accordion-up 0.2s ease-out;\n}\n\n@keyframes accordion-down {\n	from {\n		height: 0;\n	}\n	to {\n		height: var(--radix-accordion-content-height);\n	}\n}\n\n@keyframes accordion-up {\n	from {\n		height: var(--radix-accordion-content-height);\n	}\n	to {\n		height: 0;\n	}\n}\n\n/* ========================================\n   THEME COLOR VARIABLES\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\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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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.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.269 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.371 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\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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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	--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/* ========================================\n   BASE STYLES\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\n/* Container utility */\n.container {\n	width: 100%;\n	margin-left: auto;\n	margin-right: auto;\n	padding-left: 1rem;\n	padding-right: 1rem;\n	max-width: 96rem;\n}\n\n@media (min-width: 640px) {\n	.container {\n		padding-left: 1.5rem;\n		padding-right: 1.5rem;\n	}\n}\n\n@media (min-width: 1024px) {\n	.container {\n		padding-left: 2rem;\n		padding-right: 2rem;\n	}\n}\n\n/* ========================================\n   HERO TYPOGRAPHY\n   ======================================== */\n\n.hero-content h1 {\n	font-size: 2.25rem !important;\n	line-height: 2.5rem !important;\n	font-weight: 700 !important;\n	letter-spacing: -0.025em !important;\n	margin-bottom: 1.5rem !important;\n	color: var(--color-foreground) !important;\n}\n\n.hero-content p {\n	font-size: 1.25rem !important;\n	line-height: 1.75rem !important;\n	color: var(--color-muted-foreground) !important;\n	max-width: 42rem;\n	margin-left: auto;\n	margin-right: auto;\n	margin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n	color: white !important;\n}\n\n.hero-content--dark p {\n	color: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n	.hero-content h1 {\n		font-size: 3.75rem !important;\n		line-height: 1 !important;\n	}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n	text-align: left !important;\n	margin-left: 0 !important;\n	margin-right: 0 !important;\n}\n\n.hero-content--left p {\n	text-align: left !important;\n	margin-left: 0 !important;\n	margin-right: 0 !important;\n}\n\n/* ========================================\n   PRODUCT SHOWCASE HERO STYLES\n   ======================================== */\n\n.hero-showcase {\n	position: relative;\n	border-radius: 1rem;\n	overflow: hidden;\n	height: 25rem;\n	width: 100%;\n	background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n	.hero-showcase {\n		height: 31.25rem;\n	}\n}\n\n@media (min-width: 1024px) {\n	.hero-showcase {\n		height: 37.5rem;\n	}\n}\n\n.hero-bg-image {\n	position: absolute;\n	inset: 0;\n	z-index: 0;\n	opacity: 0.1;\n}\n\n.hero-bg-image img {\n	width: 100%;\n	height: 100%;\n	object-fit: cover;\n	object-position: center;\n}\n\n.hero-mockup-centered {\n	position: relative;\n	z-index: 10;\n	padding: 2rem;\n	display: flex;\n	justify-content: center;\n	align-items: center;\n	height: 100%;\n}\n\n@media (min-width: 768px) {\n	.hero-mockup-centered {\n		padding: 3rem;\n	}\n}\n\n.mockup-wrapper {\n	background: var(--color-background);\n	border-radius: 12px;\n	box-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	overflow: hidden;\n	animation: mockup-entrance 0.8s ease-out;\n	width: 100%;\n}\n\n.mockup-wrapper img {\n	width: 100%;\n	height: auto;\n	display: block;\n}\n\n@keyframes mockup-entrance {\n	from {\n		opacity: 0;\n		transform: translateY(30px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n	display: flex;\n	align-items: center;\n	padding: 12px 16px;\n	background: var(--color-muted);\n	border-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n	display: flex;\n	gap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n	width: 12px;\n	height: 12px;\n	border-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n	background: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n	background: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n	background: #27ca40;\n}\n\n.mockup-chrome-title {\n	flex: 1;\n	text-align: center;\n	font-size: 13px;\n	font-weight: 500;\n	color: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n	width: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n	display: flex;\n	min-height: 400px;\n}\n\n.mockup-sidebar {\n	width: 220px;\n	background: var(--color-card);\n	border-right: 1px solid var(--color-border);\n	flex-shrink: 0;\n}\n\n.sidebar-header {\n	padding: 16px;\n	border-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n	display: flex;\n	align-items: center;\n	gap: 10px;\n}\n\n.logo-icon {\n	width: 28px;\n	height: 28px;\n	background: var(--color-primary);\n	color: white;\n	border-radius: 6px;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	font-weight: 700;\n	font-size: 14px;\n}\n\n.logo-text {\n	font-weight: 600;\n	font-size: 14px;\n	color: var(--color-foreground);\n}\n\n.sidebar-nav {\n	padding: 8px;\n}\n\n.sidebar-item {\n	display: flex;\n	align-items: center;\n	gap: 10px;\n	padding: 10px 12px;\n	border-radius: 6px;\n	font-size: 13px;\n	color: var(--color-muted-foreground);\n	transition: all 0.15s ease;\n	cursor: pointer;\n}\n\n.sidebar-item:hover {\n	background: var(--color-accent);\n	color: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n	background: oklch(from var(--color-primary) l c h / 0.12);\n	color: var(--color-primary);\n}\n\n.sidebar-icon {\n	font-size: 16px;\n}\n\n.sidebar-label {\n	flex: 1;\n}\n\n.sidebar-badge {\n	background: var(--color-primary);\n	color: var(--color-primary-foreground);\n	font-size: 11px;\n	padding: 2px 6px;\n	border-radius: 10px;\n	font-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n	flex: 1;\n	display: flex;\n	flex-direction: column;\n	background: var(--color-background);\n}\n\n.main-header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 16px 20px;\n	border-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n	display: flex;\n	flex-direction: column;\n	gap: 2px;\n}\n\n.header-title h2 {\n	font-size: 16px;\n	font-weight: 600;\n	margin: 0;\n	color: var(--color-foreground);\n}\n\n.header-breadcrumb {\n	font-size: 12px;\n	color: var(--color-muted-foreground);\n}\n\n.header-actions {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n}\n\n.action-btn {\n	padding: 8px 16px;\n	background: var(--color-primary);\n	color: var(--color-primary-foreground);\n	border: none;\n	border-radius: 6px;\n	font-size: 13px;\n	font-weight: 500;\n	cursor: pointer;\n	transition: all 0.3s ease;\n}\n\n.action-btn--success {\n	background: #27ca40;\n}\n\n.action-btn--featured {\n	background: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n	display: flex;\n	flex: 1;\n}\n\n.editor-panel {\n	flex: 1;\n	padding: 20px;\n	border-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n	margin-bottom: 20px;\n}\n\n.editor-label {\n	display: block;\n	font-size: 12px;\n	font-weight: 500;\n	color: var(--color-muted-foreground);\n	margin-bottom: 6px;\n}\n\n.editor-input {\n	background: var(--color-muted);\n	border: 1px solid var(--color-border);\n	border-radius: 6px;\n	padding: 10px 12px;\n	font-size: 14px;\n	color: var(--color-foreground);\n	display: flex;\n	align-items: center;\n}\n\n.input-text {\n	flex: 1;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n.input-cursor {\n	width: 2px;\n	height: 18px;\n	background: var(--color-primary);\n	animation: blink 1s infinite;\n	margin-left: 2px;\n}\n\n@keyframes blink {\n	0%,\n	50% {\n		opacity: 1;\n	}\n	51%,\n	100% {\n		opacity: 0;\n	}\n}\n\n.editor-select {\n	background: var(--color-muted);\n	border: 1px solid var(--color-border);\n	border-radius: 6px;\n	padding: 10px 12px;\n	font-size: 14px;\n	color: var(--color-foreground);\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n}\n\n.select-arrow {\n	font-size: 10px;\n	color: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n	background: var(--color-muted);\n	border: 1px solid var(--color-border);\n	border-radius: 6px;\n	padding: 10px 12px;\n	font-size: 14px;\n	color: var(--color-foreground);\n	min-height: 80px;\n}\n\n.textarea-text {\n	transition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n	color: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n	width: 320px;\n	padding: 20px;\n	background: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	margin-bottom: 16px;\n}\n\n.preview-label {\n	font-size: 12px;\n	font-weight: 500;\n	color: var(--color-muted-foreground);\n}\n\n.preview-url {\n	font-size: 11px;\n	color: var(--color-muted-foreground);\n	font-family: monospace;\n}\n\n.preview-card {\n	background: var(--color-card);\n	border: 1px solid var(--color-border);\n	border-radius: 10px;\n	overflow: hidden;\n	position: relative;\n	transition: all 0.3s ease;\n}\n\n.preview-badge {\n	position: absolute;\n	top: 10px;\n	right: 10px;\n	background: var(--color-primary);\n	color: white;\n	font-size: 11px;\n	padding: 4px 8px;\n	border-radius: 4px;\n	font-weight: 500;\n	animation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n	from {\n		transform: scale(0);\n		opacity: 0;\n	}\n	to {\n		transform: scale(1);\n		opacity: 1;\n	}\n}\n\n.preview-image {\n	height: 120px;\n	background: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n	width: 100%;\n	height: 100%;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	font-size: 40px;\n}\n\n.preview-content {\n	padding: 16px;\n}\n\n.preview-category-tag {\n	display: inline-block;\n	font-size: 11px;\n	color: var(--color-primary);\n	font-weight: 500;\n	margin-bottom: 8px;\n}\n\n.preview-title {\n	font-size: 16px;\n	font-weight: 600;\n	margin: 0 0 8px;\n	color: var(--color-foreground);\n}\n\n.preview-description {\n	font-size: 13px;\n	color: var(--color-muted-foreground);\n	line-height: 1.5;\n	margin: 0 0 12px;\n}\n\n.preview-meta {\n	display: flex;\n	gap: 8px;\n	font-size: 12px;\n}\n\n.meta-rating {\n	color: #ffc24a;\n}\n\n.meta-reviews {\n	color: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n	display: flex;\n	justify-content: center;\n	gap: 24px;\n	padding: 16px;\n	border-top: 1px solid var(--color-border);\n}\n\n.indicator {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	background: none;\n	border: none;\n	cursor: pointer;\n	padding: 6px 12px;\n	border-radius: 20px;\n	transition: all 0.2s ease;\n}\n\n.indicator:hover {\n	background: var(--color-accent);\n}\n\n.indicator--active {\n	background: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n	width: 8px;\n	height: 8px;\n	border-radius: 50%;\n	background: var(--color-muted-foreground);\n	transition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n	background: var(--color-primary);\n	box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n	font-size: 12px;\n	color: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n	color: var(--color-foreground);\n	font-weight: 500;\n}\n\n/* ========================================\n   LOGO BANNER STYLES\n   ======================================== */\n\n.logo-scroll-container {\n	overflow: hidden;\n	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n	display: flex;\n	animation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n	animation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n	0% {\n		transform: translateX(0);\n	}\n	100% {\n		transform: translateX(-50%);\n	}\n}\n\n.logo-item {\n	flex-shrink: 0;\n	min-width: 150px;\n}\n\n/* ========================================\n   RESPONSIVE ADJUSTMENTS\n   ======================================== */\n\n@media (max-width: 768px) {\n	.mockup-content {\n		flex-direction: column;\n	}\n\n	.mockup-sidebar {\n		width: 100%;\n		border-right: none;\n		border-bottom: 1px solid var(--color-border);\n	}\n\n	.sidebar-nav {\n		display: flex;\n		overflow-x: auto;\n		padding: 8px;\n		gap: 4px;\n	}\n\n	.sidebar-item {\n		white-space: nowrap;\n	}\n\n	.main-split {\n		flex-direction: column;\n	}\n\n	.editor-panel {\n		border-right: none;\n		border-bottom: 1px solid var(--color-border);\n	}\n\n	.preview-panel {\n		width: 100%;\n	}\n\n	.mockup-indicators {\n		flex-wrap: wrap;\n		gap: 12px;\n	}\n\n	.indicator-label {\n		display: none;\n	}\n}\n\n/* ========================================\n   ANIMATION STYLES\n   ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n	animation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n	from {\n		opacity: 0;\n		transform: translateY(10px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n	from {\n		opacity: 0;\n		transform: translateX(-20px);\n	}\n	to {\n		opacity: 1;\n		transform: translateX(0);\n	}\n}\n\n.feature-showcase-content {\n	animation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n	transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n	transform: translateY(-4px);\n	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n	from {\n		opacity: 0;\n		transform: translateY(20px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n.stat-number {\n	animation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n	transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n	transform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n	0%,\n	100% {\n		transform: translateY(0);\n	}\n	50% {\n		transform: translateY(-10px);\n	}\n}\n\n.cta-decorative {\n	animation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n	from {\n		opacity: 0;\n		transform: translateY(20px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n.feature-card {\n	animation: card-entrance 0.4s ease-out;\n	animation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n	animation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n	animation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n	animation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n	animation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n	animation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n	animation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n	scroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n	position: relative;\n	overflow: hidden;\n}\n\n.cta-button::after {\n	content: "";\n	position: absolute;\n	inset: 0;\n	background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n	opacity: 0;\n	transition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n	opacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n	position: relative;\n	border-radius: 12px;\n	overflow: hidden;\n	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n	transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n	transform: translateY(-4px);\n	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n',
   "marketing/nextjs/src/app/layout.tsx.hbs": `import type { Metadata } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'
@@ -2985,16 +3654,449 @@ export default function HomePage() {
   "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',
   "marketing/nextjs/src/app/privacy/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\n\nexport default function PrivacyPage() {\n  return (\n    <div className="min-h-screen flex flex-col">\n      <Header />\n\n      <main className="flex-1">\n        <article className="py-16 md:py-24">\n          <div className="container mx-auto px-4 max-w-3xl">\n            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n              Privacy Policy\n            </h1>\n            <p className="text-muted-foreground mb-8">\n              Last updated: January 1, 2025\n            </p>\n\n            <div className="prose prose-neutral dark:prose-invert max-w-none">\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Introduction</h2>\n              <p className="text-muted-foreground mb-4">\n                At SaaSify, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our service.\n              </p>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Information We Collect</h2>\n              <p className="text-muted-foreground mb-4">\n                We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us for support.\n              </p>\n              <ul className="list-disc pl-6 text-muted-foreground mb-4 space-y-2">\n                <li>Account information (name, email, password)</li>\n                <li>Payment information (processed securely by our payment providers)</li>\n                <li>Usage data and analytics</li>\n                <li>Communications with our support team</li>\n              </ul>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">How We Use Your Information</h2>\n              <p className="text-muted-foreground mb-4">\n                We use the information we collect to:\n              </p>\n              <ul className="list-disc pl-6 text-muted-foreground mb-4 space-y-2">\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send you technical notices, updates, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n              </ul>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Data Security</h2>\n              <p className="text-muted-foreground mb-4">\n                We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.\n              </p>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Contact Us</h2>\n              <p className="text-muted-foreground mb-4">\n                If you have any questions about this Privacy Policy, please contact us at privacy@saasify.com.\n              </p>\n            </div>\n          </div>\n        </article>\n      </main>\n\n      <Footer />\n    </div>\n  )\n}\n',
   "marketing/nextjs/src/app/terms/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\n\nexport default function TermsPage() {\n  return (\n    <div className="min-h-screen flex flex-col">\n      <Header />\n\n      <main className="flex-1">\n        <article className="py-16 md:py-24">\n          <div className="container mx-auto px-4 max-w-3xl">\n            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n              Terms of Service\n            </h1>\n            <p className="text-muted-foreground mb-8">\n              Last updated: January 1, 2025\n            </p>\n\n            <div className="prose prose-neutral dark:prose-invert max-w-none">\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Agreement to Terms</h2>\n              <p className="text-muted-foreground mb-4">\n                By accessing or using SaaSify, you agree to be bound by these Terms of Service. If you disagree with any part of the terms, you may not access the service.\n              </p>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Use License</h2>\n              <p className="text-muted-foreground mb-4">\n                Subject to your compliance with these Terms, we grant you a limited, non-exclusive, non-transferable license to access and use our service for your internal business purposes.\n              </p>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">User Accounts</h2>\n              <p className="text-muted-foreground mb-4">\n                When you create an account with us, you must provide accurate, complete, and current information. You are responsible for safeguarding your account credentials and for all activities that occur under your account.\n              </p>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Prohibited Uses</h2>\n              <p className="text-muted-foreground mb-4">\n                You may not use our service:\n              </p>\n              <ul className="list-disc pl-6 text-muted-foreground mb-4 space-y-2">\n                <li>For any unlawful purpose or to promote illegal activities</li>\n                <li>To violate any applicable laws or regulations</li>\n                <li>To infringe upon the rights of others</li>\n                <li>To interfere with or disrupt the service or servers</li>\n              </ul>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Payment Terms</h2>\n              <p className="text-muted-foreground mb-4">\n                Paid subscriptions are billed in advance on a monthly or annual basis. You agree to pay all fees associated with your subscription plan.\n              </p>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Limitation of Liability</h2>\n              <p className="text-muted-foreground mb-4">\n                In no event shall SaaSify be liable for any indirect, incidental, special, consequential, or punitive damages arising out of or related to your use of the service.\n              </p>\n\n              <h2 className="text-2xl font-semibold mt-8 mb-4">Contact Us</h2>\n              <p className="text-muted-foreground mb-4">\n                If you have any questions about these Terms, please contact us at legal@saasify.com.\n              </p>\n            </div>\n          </div>\n        </article>\n      </main>\n\n      <Footer />\n    </div>\n  )\n}\n',
+  "marketing/nextjs/src/app/use-cases/marketing/page.tsx": `import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { TestimonialsGrid, FinalCTA } from "@/components/blocks"
+import { Megaphone, BarChart3, Calendar, Users, Sparkles, Target } from "lucide-react"
+
+const benefits = [
+  {
+    icon: <Megaphone className="h-6 w-6" />,
+    title: "Campaign Management",
+    description:
+      "Plan, execute, and track campaigns across channels. Everything in one place.",
+  },
+  {
+    icon: <BarChart3 className="h-6 w-6" />,
+    title: "Performance Analytics",
+    description:
+      "See what's working with real-time dashboards. ROI tracking for every campaign.",
+  },
+  {
+    icon: <Calendar className="h-6 w-6" />,
+    title: "Content Calendar",
+    description:
+      "Plan your content pipeline visually. Collaborate on drafts and approvals.",
+  },
+  {
+    icon: <Users className="h-6 w-6" />,
+    title: "Team Collaboration",
+    description:
+      "Creative briefs, feedback, and approvals in one workflow. No more email chains.",
+  },
+  {
+    icon: <Sparkles className="h-6 w-6" />,
+    title: "AI-Powered Insights",
+    description:
+      "Get recommendations for improving campaign performance based on your data.",
+  },
+  {
+    icon: <Target className="h-6 w-6" />,
+    title: "Audience Segmentation",
+    description:
+      "Build and manage audience segments. Personalize at scale.",
+  },
+]
+
+const stats = [
+  { value: "40%", label: "More campaigns shipped" },
+  { value: "2.5x", label: "Faster time to launch" },
+  { value: "25%", label: "Better campaign ROI" },
+]
+
+export default function MarketingPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                For Marketing Teams
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Launch campaigns that drive results
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Plan, execute, and measure marketing campaigns with a platform built for modern marketing teams.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <a
+                  href="/sign-up"
+                  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"
+                >
+                  Start free trial
+                </a>
+                <a
+                  href="/demo"
+                  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"
+                >
+                  See it in action
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Stats */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">
+              {stats.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-3xl md:text-4xl font-bold text-primary mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Benefits Grid */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Built for modern marketing
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Everything you need to plan, execute, and measure your marketing efforts.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {benefits.map((benefit) => (
+                <div
+                  key={benefit.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {benefit.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
+                  <p className="text-muted-foreground text-sm">{benefit.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Testimonials */}
+        <TestimonialsGrid
+          heading="Trusted by marketing teams everywhere"
+          subheading="See how teams like yours are driving results with SaaSify."
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to level up your marketing?"
+          subheading="Start your free trial and see why top marketing teams choose SaaSify."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Talk to us", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}
+`,
+  "marketing/nextjs/src/app/use-cases/operations/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\nimport { TestimonialsGrid, FinalCTA } from "@/components/blocks"\nimport { Settings, Workflow, Clock, Shield, BarChart3, Users } from "lucide-react"\n\nconst benefits = [\n  {\n    icon: <Workflow className="h-6 w-6" />,\n    title: "Process Automation",\n    description:\n      "Automate repetitive tasks and approvals. Free your team to focus on strategic work.",\n  },\n  {\n    icon: <Settings className="h-6 w-6" />,\n    title: "Resource Management",\n    description:\n      "Track and allocate resources across projects. Optimize utilization and reduce waste.",\n  },\n  {\n    icon: <Clock className="h-6 w-6" />,\n    title: "Time Tracking",\n    description:\n      "Track time across projects and clients. Automated timesheets and billing integration.",\n  },\n  {\n    icon: <Shield className="h-6 w-6" />,\n    title: "Compliance Management",\n    description:\n      "Track compliance requirements and deadlines. Audit trails for everything.",\n  },\n  {\n    icon: <BarChart3 className="h-6 w-6" />,\n    title: "Operational Analytics",\n    description:\n      "Real-time dashboards for operational metrics. Identify bottlenecks and optimize.",\n  },\n  {\n    icon: <Users className="h-6 w-6" />,\n    title: "Vendor Management",\n    description:\n      "Track vendors, contracts, and renewals. Never miss a deadline.",\n  },\n]\n\nconst stats = [\n  { value: "50%", label: "Less manual work" },\n  { value: "35%", label: "Cost reduction" },\n  { value: "99%", label: "Compliance rate" },\n]\n\nexport default function OperationsPage() {\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                For Operations Teams\n              </div>\n              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n                Run operations like a well-oiled machine\n              </h1>\n              <p className="text-xl text-muted-foreground mb-8">\n                Automate processes, manage resources, and ensure compliance. The operations platform that scales with you.\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                  See it in action\n                </a>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        {/* Stats */}\n        <section className="pb-16 md:pb-24">\n          <div className="container mx-auto px-4">\n            <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">\n              {stats.map((stat) => (\n                <div key={stat.label} className="text-center">\n                  <div className="text-3xl md:text-4xl font-bold text-primary mb-2">\n                    {stat.value}\n                  </div>\n                  <div className="text-sm text-muted-foreground">{stat.label}</div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* Benefits 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                Built for operational excellence\n              </h2>\n              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">\n                Everything you need to run efficient, compliant operations.\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              {benefits.map((benefit) => (\n                <div\n                  key={benefit.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                    {benefit.icon}\n                  </div>\n                  <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>\n                  <p className="text-muted-foreground text-sm">{benefit.description}</p>\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* Testimonials */}\n        <TestimonialsGrid\n          heading="Trusted by operations teams everywhere"\n          subheading="See how teams like yours are optimizing operations with SaaSify."\n        />\n\n        {/* Final CTA */}\n        <FinalCTA\n          headline="Ready to optimize your operations?"\n          subheading="Start your free trial and see why top operations teams choose SaaSify."\n          style="dark"\n          links={[\n            { label: "Start free trial", href: "/sign-up", variant: "outline" },\n            { label: "Talk to us", href: "/contact", variant: "default" },\n          ]}\n        />\n      </main>\n\n      <Footer />\n    </div>\n  )\n}\n',
+  "marketing/nextjs/src/app/use-cases/product/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\nimport { TestimonialsGrid, FinalCTA } from "@/components/blocks"\nimport { Lightbulb, GitBranch, MessageSquare, BarChart3, Users, Rocket } from "lucide-react"\n\nconst benefits = [\n  {\n    icon: <Lightbulb className="h-6 w-6" />,\n    title: "Idea Management",\n    description:\n      "Capture and prioritize ideas from your team and customers. Never lose a great idea.",\n  },\n  {\n    icon: <GitBranch className="h-6 w-6" />,\n    title: "Roadmap Planning",\n    description:\n      "Build visual roadmaps that keep stakeholders aligned. Easy drag-and-drop planning.",\n  },\n  {\n    icon: <MessageSquare className="h-6 w-6" />,\n    title: "User Feedback",\n    description:\n      "Collect and organize user feedback. Close the loop with customers automatically.",\n  },\n  {\n    icon: <BarChart3 className="h-6 w-6" />,\n    title: "Product Analytics",\n    description:\n      "Track feature adoption and usage patterns. Make data-driven product decisions.",\n  },\n  {\n    icon: <Users className="h-6 w-6" />,\n    title: "Cross-Team Collaboration",\n    description:\n      "Connect product, engineering, and design. Everyone works from the same source of truth.",\n  },\n  {\n    icon: <Rocket className="h-6 w-6" />,\n    title: "Release Management",\n    description:\n      "Plan releases, coordinate launches, and communicate changes across the organization.",\n  },\n]\n\nconst stats = [\n  { value: "45%", label: "Faster time to market" },\n  { value: "3x", label: "More features shipped" },\n  { value: "60%", label: "Better stakeholder alignment" },\n]\n\nexport default function ProductPage() {\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                For Product Teams\n              </div>\n              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n                Ship better products, faster\n              </h1>\n              <p className="text-xl text-muted-foreground mb-8">\n                From idea to launch, manage your entire product lifecycle. Roadmaps, feedback, and collaboration in one platform.\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                  See it in action\n                </a>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        {/* Stats */}\n        <section className="pb-16 md:pb-24">\n          <div className="container mx-auto px-4">\n            <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">\n              {stats.map((stat) => (\n                <div key={stat.label} className="text-center">\n                  <div className="text-3xl md:text-4xl font-bold text-primary mb-2">\n                    {stat.value}\n                  </div>\n                  <div className="text-sm text-muted-foreground">{stat.label}</div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* Benefits 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                Built for product-led teams\n              </h2>\n              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">\n                Everything you need to build products users love.\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              {benefits.map((benefit) => (\n                <div\n                  key={benefit.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                    {benefit.icon}\n                  </div>\n                  <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>\n                  <p className="text-muted-foreground text-sm">{benefit.description}</p>\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* Testimonials */}\n        <TestimonialsGrid\n          heading="Trusted by product teams everywhere"\n          subheading="See how teams like yours are shipping better products with SaaSify."\n        />\n\n        {/* Final CTA */}\n        <FinalCTA\n          headline="Ready to build better products?"\n          subheading="Start your free trial and see why top product teams choose SaaSify."\n          style="dark"\n          links={[\n            { label: "Start free trial", href: "/sign-up", variant: "outline" },\n            { label: "Talk to us", href: "/contact", variant: "default" },\n          ]}\n        />\n      </main>\n\n      <Footer />\n    </div>\n  )\n}\n',
+  "marketing/nextjs/src/app/use-cases/sales/page.tsx": `import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { TestimonialsGrid, FinalCTA } from "@/components/blocks"
+import { Target, TrendingUp, Users, Zap, BarChart3, Clock } from "lucide-react"
+
+const benefits = [
+  {
+    icon: <Target className="h-6 w-6" />,
+    title: "Close More Deals",
+    description:
+      "Track every opportunity from first contact to close. Never let a deal slip through the cracks.",
+  },
+  {
+    icon: <TrendingUp className="h-6 w-6" />,
+    title: "Forecast Accurately",
+    description:
+      "AI-powered forecasting gives you confidence in your pipeline. Know what's coming.",
+  },
+  {
+    icon: <Users className="h-6 w-6" />,
+    title: "Align Your Team",
+    description:
+      "Keep everyone on the same page with shared visibility into accounts and deals.",
+  },
+  {
+    icon: <Zap className="h-6 w-6" />,
+    title: "Automate Follow-ups",
+    description:
+      "Never forget a follow-up. Automated reminders and sequences keep deals moving.",
+  },
+  {
+    icon: <BarChart3 className="h-6 w-6" />,
+    title: "Track Performance",
+    description:
+      "Real-time dashboards show rep performance, pipeline health, and revenue metrics.",
+  },
+  {
+    icon: <Clock className="h-6 w-6" />,
+    title: "Save Hours Weekly",
+    description:
+      "Reduce data entry with automatic logging. Spend more time selling.",
+  },
+]
+
+const stats = [
+  { value: "32%", label: "Faster deal cycles" },
+  { value: "28%", label: "Higher win rates" },
+  { value: "5hrs", label: "Saved per week" },
+]
+
+export default function SalesPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                For Sales Teams
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Close more deals, faster
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Give your sales team the tools they need to hit quota. Track deals, automate follow-ups, and forecast with confidence.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <a
+                  href="/sign-up"
+                  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"
+                >
+                  Start free trial
+                </a>
+                <a
+                  href="/demo"
+                  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"
+                >
+                  See it in action
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Stats */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">
+              {stats.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-3xl md:text-4xl font-bold text-primary mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Benefits Grid */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Built for modern sales teams
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Everything you need to manage your pipeline and close more deals.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {benefits.map((benefit) => (
+                <div
+                  key={benefit.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {benefit.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
+                  <p className="text-muted-foreground text-sm">{benefit.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Testimonials */}
+        <TestimonialsGrid
+          heading="Trusted by sales teams everywhere"
+          subheading="See how teams like yours are crushing their quotas with SaaSify."
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to accelerate your sales?"
+          subheading="Start your free trial and see why top sales teams choose SaaSify."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Talk to sales", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}
+`,
   "marketing/nextjs/src/components/Footer/index.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Logo } from "@/components/Logo"\nimport { ThemeSelector } from "@/components/ThemeSelector"\n\n// Footer navigation structure\nconst footerColumns = [\n  {\n    title: "Product",\n    links: [\n      { label: "Home", href: "/" },\n      { label: "Features", href: "/features" },\n      { label: "Pricing", href: "/pricing" },\n    ],\n  },\n  {\n    title: "Resources",\n    links: [\n      { label: "Blog", href: "/blog" },\n    ],\n  },\n  {\n    title: "Legal",\n    links: [\n      { label: "Privacy", href: "/privacy" },\n      { label: "Terms", href: "/terms" },\n    ],\n  },\n]\n\nconst socialLinks = {\n  twitter: "https://x.com/saasify",\n  linkedin: "https://linkedin.com/company/saasify",\n  github: "https://github.com/saasify",\n}\n\n// Social icons as inline SVGs\nconst SocialIcons = {\n  twitter: (\n    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">\n      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />\n    </svg>\n  ),\n  linkedin: (\n    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">\n      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />\n    </svg>\n  ),\n  github: (\n    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">\n      <path\n        fillRule="evenodd"\n        d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"\n        clipRule="evenodd"\n      />\n    </svg>\n  ),\n}\n\nexport function Footer() {\n  const currentYear = new Date().getFullYear()\n\n  return (\n    <footer className="mt-auto border-t border-border bg-background">\n      {/* Main Footer Content */}\n      <div className="container mx-auto px-4 py-12 lg:py-16">\n        <div className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">\n          {/* Link Columns */}\n          {footerColumns.map((column) => (\n            <div key={column.title} className="col-span-1">\n              <h3 className="mb-4 text-sm font-medium text-foreground">\n                {column.title}\n              </h3>\n              <ul className="space-y-3">\n                {column.links.map((link) => (\n                  <li key={link.label}>\n                    <Link\n                      href={link.href}\n                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"\n                    >\n                      {link.label}\n                    </Link>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n\n          {/* Newsletter Column */}\n          <div className="col-span-2">\n            <h3 className="mb-4 text-sm font-medium text-foreground">\n              Newsletter\n            </h3>\n            <p className="mb-4 text-sm text-muted-foreground">\n              Get product updates, tips, and insights delivered weekly.\n            </p>\n            <form className="flex gap-2">\n              <input\n                type="email"\n                placeholder="Enter your email"\n                className="flex-1 px-3 py-2 text-sm rounded-md border border-input bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"\n              />\n              <button\n                type="submit"\n                className="px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"\n              >\n                Subscribe\n              </button>\n            </form>\n          </div>\n        </div>\n\n        {/* Social Links */}\n        <div className="mt-10 flex items-center gap-4 border-t border-border pt-8">\n          <a\n            href={socialLinks.twitter}\n            target="_blank"\n            rel="noopener noreferrer"\n            className="text-muted-foreground transition-colors hover:text-foreground"\n            aria-label="X (Twitter)"\n          >\n            {SocialIcons.twitter}\n          </a>\n          <a\n            href={socialLinks.linkedin}\n            target="_blank"\n            rel="noopener noreferrer"\n            className="text-muted-foreground transition-colors hover:text-foreground"\n            aria-label="LinkedIn"\n          >\n            {SocialIcons.linkedin}\n          </a>\n          <a\n            href={socialLinks.github}\n            target="_blank"\n            rel="noopener noreferrer"\n            className="text-muted-foreground transition-colors hover:text-foreground"\n            aria-label="GitHub"\n          >\n            {SocialIcons.github}\n          </a>\n        </div>\n      </div>\n\n      {/* Bottom Bar */}\n      <div className="border-t border-border">\n        <div className="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-6 sm:flex-row">\n          {/* Logo and Copyright */}\n          <div className="flex items-center gap-4">\n            <Link href="/" className="flex items-center">\n              <Logo className="h-6 w-6" />\n            </Link>\n            <p className="text-sm text-muted-foreground">\n              \xA9 {currentYear} SaaSify\n            </p>\n          </div>\n\n          {/* Theme Selector */}\n          <div className="flex items-center gap-6">\n            <ThemeSelector />\n          </div>\n        </div>\n      </div>\n    </footer>\n  )\n}\n',
   "marketing/nextjs/src/components/Header/MegaMenu.tsx": '"use client"\n\nimport { useState } from "react"\nimport Link from "next/link"\nimport { ChevronDown, Layout, BarChart3, Shield, Zap, Layers, Target, Rocket, Settings } from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface MenuItem {\n  label: string\n  description: string\n  href: string\n  icon: string\n}\n\ninterface MenuColumn {\n  title: string\n  items: MenuItem[]\n}\n\ninterface MegaMenuProps {\n  menu: {\n    label: string\n    columns: MenuColumn[]\n  }\n}\n\nconst iconMap: Record<string, React.ComponentType<{ className?: string }>> = {\n  layout: Layout,\n  barChart: BarChart3,\n  shield: Shield,\n  zap: Zap,\n  layers: Layers,\n  target: Target,\n  rocket: Rocket,\n  settings: Settings,\n}\n\nexport function MegaMenu({ menu }: MegaMenuProps) {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    <div\n      className="relative"\n      onMouseEnter={() => setIsOpen(true)}\n      onMouseLeave={() => setIsOpen(false)}\n    >\n      <button\n        type="button"\n        className={cn(\n          "flex items-center gap-1 px-4 py-2 text-sm font-medium transition-colors",\n          isOpen ? "text-foreground" : "text-muted-foreground hover:text-foreground"\n        )}\n        onClick={() => setIsOpen(!isOpen)}\n        aria-expanded={isOpen}\n      >\n        {menu.label}\n        <ChevronDown\n          className={cn(\n            "h-4 w-4 transition-transform",\n            isOpen && "rotate-180"\n          )}\n        />\n      </button>\n\n      {/* Dropdown */}\n      <div\n        className={cn(\n          "absolute left-0 top-full pt-2 transition-all",\n          isOpen\n            ? "opacity-100 translate-y-0 pointer-events-auto"\n            : "opacity-0 -translate-y-2 pointer-events-none"\n        )}\n      >\n        <div className="bg-background border border-border rounded-lg shadow-lg p-6 min-w-[480px]">\n          <div className={cn(\n            "grid gap-8",\n            menu.columns.length === 1 ? "grid-cols-1" : "grid-cols-2"\n          )}>\n            {menu.columns.map((column) => (\n              <div key={column.title}>\n                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4">\n                  {column.title}\n                </h3>\n                <ul className="space-y-1">\n                  {column.items.map((item) => {\n                    const Icon = iconMap[item.icon] || Layout\n                    return (\n                      <li key={item.href}>\n                        <Link\n                          href={item.href}\n                          className="flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group"\n                          onClick={() => setIsOpen(false)}\n                        >\n                          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background">\n                            <Icon className="h-5 w-5 text-primary" />\n                          </div>\n                          <div>\n                            <div className="text-sm font-medium text-foreground">\n                              {item.label}\n                            </div>\n                            <div className="text-xs text-muted-foreground mt-0.5">\n                              {item.description}\n                            </div>\n                          </div>\n                        </Link>\n                      </li>\n                    )\n                  })}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n',
   "marketing/nextjs/src/components/Header/MobileMenu.tsx": '"use client"\n\nimport { useState } from "react"\nimport Link from "next/link"\nimport { Menu, X } from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface MobileMenuProps {\n  navLinks: { label: string; href: string }[]\n  ctaLinks: { label: string; href: string; variant: "default" | "ghost" }[]\n}\n\nexport function MobileMenu({ navLinks, ctaLinks }: MobileMenuProps) {\n  const [isOpen, setIsOpen] = useState(false)\n\n  const handleClose = () => {\n    setIsOpen(false)\n  }\n\n  return (\n    <div className="lg:hidden">\n      <button\n        type="button"\n        className="p-2 text-muted-foreground hover:text-foreground"\n        onClick={() => setIsOpen(!isOpen)}\n        aria-label={isOpen ? "Close menu" : "Open menu"}\n      >\n        {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}\n      </button>\n\n      {/* Mobile menu overlay */}\n      {isOpen && (\n        <div className="fixed inset-0 top-16 z-50 bg-background">\n          <nav className="overflow-y-auto max-h-[calc(100vh-4rem)]">\n            {/* Navigation links */}\n            {navLinks.map((link) => (\n              <Link\n                key={link.href}\n                href={link.href}\n                className="flex items-center px-4 py-3 text-sm font-medium border-b border-border hover:bg-muted"\n                onClick={handleClose}\n              >\n                {link.label}\n              </Link>\n            ))}\n\n            {/* CTA links */}\n            <div className="p-4 space-y-2">\n              {ctaLinks.map((link) => (\n                <Link\n                  key={link.label}\n                  href={link.href}\n                  className={cn(\n                    "flex items-center justify-center w-full px-4 py-3 text-sm font-medium rounded-md transition-colors",\n                    link.variant === "default"\n                      ? "bg-primary text-primary-foreground hover:bg-primary/90"\n                      : "border border-border hover:bg-muted"\n                  )}\n                  onClick={handleClose}\n                >\n                  {link.label}\n                </Link>\n              ))}\n            </div>\n          </nav>\n        </div>\n      )}\n    </div>\n  )\n}\n',
-  "marketing/nextjs/src/components/Header/index.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Logo } from "@/components/Logo"\nimport { MobileMenu } from "./MobileMenu"\nimport { cn } from "@/lib/utils"\n\n// Navigation for landing page\nconst navLinks = [\n  { label: "Features", href: "/features" },\n  { label: "Pricing", href: "/pricing" },\n  { label: "Blog", href: "/blog" },\n]\n\nconst ctaLinks = [\n  { label: "Sign In", href: "/sign-in", variant: "ghost" as const },\n  { label: "Get Started", href: "/pricing", variant: "default" as const },\n]\n\nexport function Header() {\n  return (\n    <header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">\n      <div className="container mx-auto px-4 h-16 flex justify-between items-center">\n        {/* Left section: Logo + Nav */}\n        <div className="flex items-center gap-8">\n          <Link href="/" className="flex items-center gap-2">\n            <Logo />\n            <span className="text-xl font-semibold hidden sm:inline">SaaSify</span>\n          </Link>\n\n          {/* Desktop navigation */}\n          <nav className="hidden lg:flex items-center gap-1">\n            {navLinks.map((link) => (\n              <Link\n                key={link.href}\n                href={link.href}\n                className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"\n              >\n                {link.label}\n              </Link>\n            ))}\n          </nav>\n        </div>\n\n        {/* Right section: CTAs */}\n        <div className="flex items-center gap-3">\n          {/* Desktop CTAs */}\n          <div className="hidden lg:flex items-center gap-3">\n            {ctaLinks.map((link) => (\n              <Link\n                key={link.href}\n                href={link.href}\n                className={cn(\n                  "px-4 py-2 text-sm font-medium rounded-md transition-colors",\n                  link.variant === "default"\n                    ? "bg-primary text-primary-foreground hover:bg-primary/90"\n                    : "text-muted-foreground hover:text-foreground"\n                )}\n              >\n                {link.label}\n              </Link>\n            ))}\n          </div>\n\n          {/* Mobile: Primary CTA + Hamburger */}\n          <Link\n            href="/pricing"\n            className="lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"\n          >\n            Get Started\n          </Link>\n\n          <MobileMenu\n            navLinks={navLinks}\n            ctaLinks={ctaLinks}\n          />\n        </div>\n      </div>\n    </header>\n  )\n}\n',
+  "marketing/nextjs/src/components/Header/index.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Logo } from "@/components/Logo"\nimport { MobileMenu } from "./MobileMenu"\nimport { MegaMenu } from "./MegaMenu"\nimport { cn } from "@/lib/utils"\n\n// Features mega menu configuration\nconst featuresMenu = {\n  label: "Features",\n  columns: [\n    {\n      title: "Platform",\n      items: [\n        { label: "Dashboard", description: "Your command center", href: "/features/dashboard", icon: "layout" },\n        { label: "Analytics", description: "Real-time insights", href: "/features/analytics", icon: "barChart" },\n        { label: "Integrations", description: "Connect your tools", href: "/features/integrations", icon: "layers" },\n      ],\n    },\n    {\n      title: "Capabilities",\n      items: [\n        { label: "Automation", description: "Eliminate busywork", href: "/features/automation", icon: "zap" },\n        { label: "Workflows", description: "Custom processes", href: "/features/workflows", icon: "settings" },\n        { label: "Security", description: "Enterprise-grade", href: "/features/security", icon: "shield" },\n      ],\n    },\n  ],\n}\n\n// Solutions mega menu configuration\nconst solutionsMenu = {\n  label: "Solutions",\n  columns: [\n    {\n      title: "By Team",\n      items: [\n        { label: "Sales Teams", description: "Close more deals", href: "/use-cases/sales", icon: "target" },\n        { label: "Marketing Teams", description: "Launch campaigns", href: "/use-cases/marketing", icon: "rocket" },\n        { label: "Product Teams", description: "Ship faster", href: "/use-cases/product", icon: "layers" },\n        { label: "Operations", description: "Run efficiently", href: "/use-cases/operations", icon: "settings" },\n      ],\n    },\n  ],\n}\n\n// Simple navigation links\nconst navLinks = [\n  { label: "Pricing", href: "/pricing" },\n  { label: "Blog", href: "/blog" },\n  { label: "About", href: "/about" },\n]\n\n// For mobile menu - flat list of all links\nconst mobileNavLinks = [\n  { label: "Features", href: "/features" },\n  { label: "Pricing", href: "/pricing" },\n  { label: "Blog", href: "/blog" },\n  { label: "About", href: "/about" },\n]\n\nconst ctaLinks = [\n  { label: "Sign In", href: "/sign-in", variant: "ghost" as const },\n  { label: "Get Started", href: "/pricing", variant: "default" as const },\n]\n\nexport function Header() {\n  return (\n    <header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">\n      <div className="container mx-auto px-4 h-16 flex justify-between items-center">\n        {/* Left section: Logo + Nav */}\n        <div className="flex items-center gap-8">\n          <Link href="/" className="flex items-center gap-2">\n            <Logo />\n            <span className="text-xl font-semibold hidden sm:inline">SaaSify</span>\n          </Link>\n\n          {/* Desktop navigation */}\n          <nav className="hidden lg:flex items-center gap-1">\n            <MegaMenu menu={featuresMenu} />\n            <MegaMenu menu={solutionsMenu} />\n            {navLinks.map((link) => (\n              <Link\n                key={link.href}\n                href={link.href}\n                className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"\n              >\n                {link.label}\n              </Link>\n            ))}\n          </nav>\n        </div>\n\n        {/* Right section: CTAs */}\n        <div className="flex items-center gap-3">\n          {/* Desktop CTAs */}\n          <div className="hidden lg:flex items-center gap-3">\n            {ctaLinks.map((link) => (\n              <Link\n                key={link.href}\n                href={link.href}\n                className={cn(\n                  "px-4 py-2 text-sm font-medium rounded-md transition-colors",\n                  link.variant === "default"\n                    ? "bg-primary text-primary-foreground hover:bg-primary/90"\n                    : "text-muted-foreground hover:text-foreground"\n                )}\n              >\n                {link.label}\n              </Link>\n            ))}\n          </div>\n\n          {/* Mobile: Primary CTA + Hamburger */}\n          <Link\n            href="/pricing"\n            className="lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"\n          >\n            Get Started\n          </Link>\n\n          <MobileMenu\n            navLinks={mobileNavLinks}\n            ctaLinks={ctaLinks}\n          />\n        </div>\n      </div>\n    </header>\n  )\n}\n',
   "marketing/nextjs/src/components/Logo.tsx": '"use client"\n\nimport { useTheme } from "next-themes"\nimport { useEffect, useState } from "react"\nimport { cn } from "@/lib/utils"\n\ninterface LogoProps {\n  className?: string\n  variant?: "light" | "dark" | "auto"\n}\n\nexport function Logo({ className, variant = "auto" }: LogoProps) {\n  const { resolvedTheme } = useTheme()\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  // Determine which variant to show\n  const showDark =\n    variant === "dark" ||\n    (variant === "auto" && mounted && resolvedTheme === "dark")\n\n  return (\n    <div\n      className={cn(\n        "flex h-8 w-8 items-center justify-center rounded-lg",\n        showDark ? "bg-white" : "bg-foreground",\n        className\n      )}\n    >\n      <svg\n        className={cn("h-5 w-5", showDark ? "text-gray-900" : "text-background")}\n        viewBox="0 0 24 24"\n        fill="none"\n        stroke="currentColor"\n        strokeWidth={2}\n        strokeLinecap="round"\n        strokeLinejoin="round"\n      >\n        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />\n      </svg>\n    </div>\n  )\n}\n',
   "marketing/nextjs/src/components/ThemeProvider.tsx": '"use client"\n\nimport { ThemeProvider as NextThemesProvider } from "next-themes"\nimport type { ThemeProviderProps } from "next-themes"\n\nexport function ThemeProvider({ children, ...props }: ThemeProviderProps) {\n  return <NextThemesProvider {...props}>{children}</NextThemesProvider>\n}\n',
   "marketing/nextjs/src/components/ThemeSelector.tsx": '"use client"\n\nimport { Moon, Sun, Monitor } from "lucide-react"\nimport { useTheme } from "next-themes"\nimport { useEffect, useState } from "react"\nimport { cn } from "@/lib/utils"\n\nexport function ThemeSelector() {\n  const { theme, setTheme } = useTheme()\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  if (!mounted) {\n    return (\n      <div className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1">\n        <div className="h-7 w-7 rounded-full" />\n        <div className="h-7 w-7 rounded-full" />\n        <div className="h-7 w-7 rounded-full" />\n      </div>\n    )\n  }\n\n  return (\n    <div className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1">\n      <button\n        type="button"\n        onClick={() => setTheme("light")}\n        className={cn(\n          "flex h-7 w-7 items-center justify-center rounded-full transition-colors",\n          theme === "light"\n            ? "bg-foreground text-background"\n            : "text-muted-foreground hover:text-foreground"\n        )}\n        aria-label="Light mode"\n      >\n        <Sun className="h-4 w-4" />\n      </button>\n      <button\n        type="button"\n        onClick={() => setTheme("dark")}\n        className={cn(\n          "flex h-7 w-7 items-center justify-center rounded-full transition-colors",\n          theme === "dark"\n            ? "bg-foreground text-background"\n            : "text-muted-foreground hover:text-foreground"\n        )}\n        aria-label="Dark mode"\n      >\n        <Moon className="h-4 w-4" />\n      </button>\n      <button\n        type="button"\n        onClick={() => setTheme("system")}\n        className={cn(\n          "flex h-7 w-7 items-center justify-center rounded-full transition-colors",\n          theme === "system"\n            ? "bg-foreground text-background"\n            : "text-muted-foreground hover:text-foreground"\n        )}\n        aria-label="System theme"\n      >\n        <Monitor className="h-4 w-4" />\n      </button>\n    </div>\n  )\n}\n',
   "marketing/nextjs/src/components/blocks/BentoFeatures.tsx": '"use client"\n\nimport {\n  BarChart3,\n  Globe,\n  Layers,\n  type LucideIcon,\n  Rocket,\n  Settings,\n  Shield,\n  Zap,\n} from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface Feature {\n  size?: "small" | "tall"\n  style?: "default" | "primary" | "accent" | "gradient"\n  icon?: string\n  stat?: string\n  title: string\n  description: string\n}\n\ninterface BentoFeaturesProps {\n  heading?: string\n  subheading?: string\n  features?: Feature[]\n}\n\nconst iconMap: Record<string, LucideIcon> = {\n  rocket: Rocket,\n  zap: Zap,\n  layers: Layers,\n  shield: Shield,\n  globe: Globe,\n  settings: Settings,\n  barChart: BarChart3,\n}\n\nconst gridPositions = [\n  "md:col-span-1 md:row-span-1",\n  "md:col-span-1 md:row-span-1",\n  "md:col-span-1 md:row-span-1",\n  "md:col-span-1 md:row-span-2",\n  "md:col-span-1 md:row-span-1",\n  "md:col-span-1 md:row-span-1",\n  "md:col-span-1 md:row-span-1",\n  "md:col-span-1 md:row-span-1",\n]\n\nconst styleClasses: Record<string, { bg: string; text: string; icon: string; statText: string }> = {\n  default: {\n    bg: "bg-card border border-border/50 hover:border-border",\n    text: "text-foreground",\n    icon: "bg-primary/10 text-primary",\n    statText: "text-primary",\n  },\n  primary: {\n    bg: "bg-primary hover:bg-primary/95",\n    text: "text-primary-foreground",\n    icon: "bg-white/20 text-white",\n    statText: "text-white",\n  },\n  accent: {\n    bg: "bg-gradient-to-br from-teal-500 to-teal-600 hover:from-teal-500/95 hover:to-teal-600/95",\n    text: "text-white",\n    icon: "bg-white/20 text-white",\n    statText: "text-white",\n  },\n  gradient: {\n    bg: "bg-gradient-to-br from-primary via-primary/90 to-secondary hover:from-primary/95",\n    text: "text-white",\n    icon: "bg-white/20 text-white",\n    statText: "text-white",\n  },\n}\n\nconst defaultFeatures: Feature[] = [\n  {\n    size: "small",\n    style: "gradient",\n    icon: "zap",\n    stat: "5x",\n    title: "Faster onboarding",\n    description: "Get your team up and running in hours, not weeks.",\n  },\n  {\n    size: "small",\n    style: "accent",\n    icon: "rocket",\n    title: "Quick setup",\n    description: "Configure your workspace, invite your team, and start collaborating.",\n  },\n  {\n    size: "small",\n    style: "default",\n    icon: "layers",\n    title: "Powerful integrations",\n    description: "Connect with 100+ tools you already use.",\n  },\n  {\n    size: "tall",\n    style: "primary",\n    icon: "shield",\n    title: "Enterprise security",\n    description: "SOC 2 compliant with end-to-end encryption and complete audit trails for peace of mind.",\n  },\n  {\n    size: "small",\n    style: "default",\n    icon: "globe",\n    stat: "99.9%",\n    title: "Uptime",\n    description: "Reliable infrastructure you can count on.",\n  },\n  {\n    size: "small",\n    style: "default",\n    icon: "globe",\n    title: "Global scale",\n    description: "Multi-region with custom domains.",\n  },\n  {\n    size: "small",\n    style: "default",\n    icon: "settings",\n    title: "Smart automation",\n    description: "Automate repetitive tasks and workflows.",\n  },\n  {\n    size: "small",\n    style: "default",\n    icon: "layers",\n    title: "Flexible workflows",\n    description: "Build custom processes for any use case.",\n  },\n]\n\nexport function BentoFeatures({\n  heading = "Discover what SaaSify can do",\n  subheading = "Everything you need to work smarter and scale faster",\n  features = defaultFeatures,\n}: BentoFeaturesProps) {\n  const displayFeatures = features.length > 0 ? features : defaultFeatures\n\n  return (\n    <section className="py-16 md:py-24">\n      <div className="container mx-auto px-4">\n        {/* Header */}\n        {(heading || subheading) && (\n          <div className="text-center mb-12 md:mb-16 max-w-3xl mx-auto">\n            {heading && (\n              <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6">\n                {heading}\n              </h2>\n            )}\n            {subheading && (\n              <p className="text-xl md:text-2xl text-muted-foreground">{subheading}</p>\n            )}\n          </div>\n        )}\n\n        {/* Bento Grid */}\n        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5 md:grid-rows-[repeat(3,minmax(140px,160px))]">\n          {displayFeatures.map((feature, index) => {\n            const style = feature.style || "default"\n            const iconKey = feature.icon\n            const Icon = iconKey && iconKey in iconMap ? iconMap[iconKey] : null\n            const styleConfig = styleClasses[style] || styleClasses.default\n            const gridPosition = gridPositions[index] || "md:col-span-1 md:row-span-1"\n            const isLarge =\n              gridPosition.includes("col-span-2") && gridPosition.includes("row-span-2")\n\n            return (\n              <div\n                key={feature.title}\n                className={cn(\n                  "relative rounded-2xl overflow-hidden p-5 md:p-6 flex flex-col transition-all duration-300 group",\n                  "hover:shadow-lg hover:-translate-y-0.5",\n                  "col-span-1 row-span-1",\n                  gridPosition,\n                  styleConfig.bg\n                )}\n              >\n                {/* Decorative elements */}\n                {!isLarge && feature.size === "tall" && (\n                  <div className="absolute -right-6 -bottom-6 w-24 h-24 md:w-32 md:h-32 rounded-full bg-white/10 blur-xl" />\n                )}\n\n                {/* Content */}\n                <div className="relative z-10 flex flex-col h-full">\n                  {/* Icon */}\n                  {Icon && (\n                    <div\n                      className={cn(\n                        "w-10 h-10 md:w-11 md:h-11 rounded-xl flex items-center justify-center mb-auto",\n                        styleConfig.icon\n                      )}\n                    >\n                      <Icon className="w-5 h-5 md:w-5 md:h-5" />\n                    </div>\n                  )}\n\n                  {/* Spacer */}\n                  <div className="flex-1 min-h-2" />\n\n                  {/* Stat */}\n                  {feature.stat && (\n                    <div\n                      className={cn(\n                        "font-bold mb-0.5 leading-none",\n                        isLarge ? "text-5xl md:text-6xl" : "text-3xl md:text-4xl",\n                        styleConfig.statText\n                      )}\n                    >\n                      {feature.stat}\n                    </div>\n                  )}\n\n                  {/* Title */}\n                  <h3\n                    className={cn(\n                      "font-semibold mb-1",\n                      isLarge ? "text-lg md:text-xl" : "text-base md:text-lg",\n                      styleConfig.text\n                    )}\n                  >\n                    {feature.title}\n                  </h3>\n\n                  {/* Description */}\n                  <p\n                    className={cn(\n                      "leading-snug",\n                      isLarge ? "text-sm md:text-base" : "text-xs md:text-sm",\n                      style === "default" ? "text-muted-foreground" : "text-white/80"\n                    )}\n                  >\n                    {feature.description}\n                  </p>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </section>\n  )\n}\n',
+  "marketing/nextjs/src/components/blocks/FAQAccordion.tsx": `"use client"
+
+import { useState } from "react"
+import { ChevronDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface FAQItem {
+  question: string
+  answer: string
+}
+
+interface FAQAccordionProps {
+  heading?: string
+  subheading?: string
+  items?: FAQItem[]
+}
+
+const defaultFAQs: FAQItem[] = [
+  {
+    question: "How does the free trial work?",
+    answer:
+      "Our 14-day free trial gives you full access to all features with no credit card required. At the end of your trial, you can choose the plan that best fits your needs.",
+  },
+  {
+    question: "Can I change plans at any time?",
+    answer:
+      "Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any billing differences.",
+  },
+  {
+    question: "What payment methods do you accept?",
+    answer:
+      "We accept all major credit cards (Visa, Mastercard, American Express) as well as PayPal. For Enterprise plans, we also offer invoicing.",
+  },
+  {
+    question: "Is my data secure?",
+    answer:
+      "Absolutely. We use industry-standard encryption (AES-256) for all data at rest and in transit. We're SOC 2 Type II certified and GDPR compliant.",
+  },
+  {
+    question: "Do you offer discounts for nonprofits or educational institutions?",
+    answer:
+      "Yes! We offer 50% off for qualified nonprofits and educational institutions. Contact our sales team to learn more about our discount programs.",
+  },
+  {
+    question: "What kind of support do you offer?",
+    answer:
+      "All plans include email support with 24-hour response time. Professional plans get priority support, and Enterprise plans include a dedicated success manager.",
+  },
+]
+
+export function FAQAccordion({
+  heading = "Frequently asked questions",
+  subheading = "Everything you need to know about SaaSify",
+  items = defaultFAQs,
+}: FAQAccordionProps) {
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        <div className="text-center mb-12 md:mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+            {heading}
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            {subheading}
+          </p>
+        </div>
+
+        {/* Accordion */}
+        <div className="max-w-3xl mx-auto">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              className="border-b border-border"
+            >
+              <button
+                onClick={() => setOpenIndex(openIndex === index ? null : index)}
+                className="flex items-center justify-between w-full py-5 text-left"
+              >
+                <span className="font-medium text-foreground pr-4">
+                  {item.question}
+                </span>
+                <ChevronDown
+                  className={cn(
+                    "h-5 w-5 text-muted-foreground transition-transform shrink-0",
+                    openIndex === index && "rotate-180"
+                  )}
+                />
+              </button>
+              <div
+                className={cn(
+                  "overflow-hidden transition-all",
+                  openIndex === index ? "max-h-96 pb-5" : "max-h-0"
+                )}
+              >
+                <p className="text-muted-foreground">{item.answer}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Contact CTA */}
+        <div className="text-center mt-12">
+          <p className="text-muted-foreground mb-4">
+            Still have questions?
+          </p>
+          <a
+            href="/contact"
+            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"
+          >
+            Contact support
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}
+`,
   "marketing/nextjs/src/components/blocks/FeatureShowcase.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Check } from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface FeatureShowcaseProps {\n  label?: string\n  headline: string\n  description: string\n  features?: { text: string }[]\n  link?: {\n    label: string\n    href: string\n  }\n  imagePosition?: "left" | "right"\n}\n\nexport function FeatureShowcase({\n  label,\n  headline,\n  description,\n  features = [],\n  link,\n  imagePosition = "right",\n}: FeatureShowcaseProps) {\n  return (\n    <section className="py-16 md:py-24">\n      <div className="container mx-auto px-4">\n        <div\n          className={cn(\n            "grid md:grid-cols-2 gap-12 lg:gap-16 items-center",\n            imagePosition === "left" && "md:grid-flow-dense"\n          )}\n        >\n          {/* Content */}\n          <div className={cn(imagePosition === "left" && "md:col-start-2")}>\n            {label && (\n              <span className="inline-block text-sm font-medium text-primary mb-4">\n                {label}\n              </span>\n            )}\n            <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">\n              {headline}\n            </h2>\n            <p className="text-lg text-muted-foreground mb-6">\n              {description}\n            </p>\n\n            {features.length > 0 && (\n              <ul className="space-y-3 mb-8">\n                {features.map((feature) => (\n                  <li key={feature.text} className="flex items-center gap-3">\n                    <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10">\n                      <Check className="h-3 w-3 text-primary" />\n                    </div>\n                    <span className="text-sm text-muted-foreground">\n                      {feature.text}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            )}\n\n            {link && (\n              <Link\n                href={link.href}\n                className="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"\n              >\n                {link.label}\n                <span aria-hidden="true">\u2192</span>\n              </Link>\n            )}\n          </div>\n\n          {/* Image Placeholder */}\n          <div\n            className={cn(\n              "relative aspect-[4/3] rounded-2xl bg-muted overflow-hidden",\n              imagePosition === "left" && "md:col-start-1 md:row-start-1"\n            )}\n          >\n            <div className="absolute inset-0 flex items-center justify-center">\n              <div className="text-center">\n                <div className="w-16 h-16 mx-auto mb-4 rounded-xl bg-primary/10 flex items-center justify-center">\n                  <svg\n                    className="w-8 h-8 text-primary"\n                    fill="none"\n                    stroke="currentColor"\n                    viewBox="0 0 24 24"\n                  >\n                    <path\n                      strokeLinecap="round"\n                      strokeLinejoin="round"\n                      strokeWidth={1.5}\n                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"\n                    />\n                  </svg>\n                </div>\n                <p className="text-sm text-muted-foreground">\n                  Feature illustration\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n',
   "marketing/nextjs/src/components/blocks/FinalCTA.tsx": '"use client"\n\nimport Link from "next/link"\nimport { cn } from "@/lib/utils"\n\ninterface FinalCTALink {\n  label: string\n  href: string\n  variant: "default" | "outline"\n}\n\ninterface FinalCTAProps {\n  headline?: string\n  subheading?: string\n  links?: FinalCTALink[]\n  style?: "dark" | "light" | "gradient"\n}\n\nexport function 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  links = [\n    { label: "Start free trial", href: "/sign-up", variant: "outline" },\n    { label: "Book a demo", href: "/contact", variant: "default" },\n  ],\n  style = "dark",\n}: FinalCTAProps) {\n  const bgClasses = {\n    dark: "bg-primary text-primary-foreground",\n    light: "bg-muted text-foreground",\n    gradient: "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground",\n  }\n\n  const buttonClasses = {\n    dark: {\n      default: "bg-primary-foreground text-primary hover:bg-primary-foreground/90",\n      outline: "border border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10",\n    },\n    light: {\n      default: "bg-primary text-primary-foreground hover:bg-primary/90",\n      outline: "border border-border hover:bg-background",\n    },\n    gradient: {\n      default: "bg-background text-foreground hover:bg-background/90",\n      outline: "border border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10",\n    },\n  }\n\n  return (\n    <section className={cn("py-16 md:py-24", bgClasses[style])}>\n      <div className="container mx-auto px-4">\n        <div className="max-w-3xl mx-auto text-center">\n          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">\n            {headline}\n          </h2>\n          {subheading && (\n            <p\n              className={cn(\n                "text-lg md:text-xl mb-8",\n                style === "dark"\n                  ? "text-primary-foreground/80"\n                  : style === "gradient"\n                    ? "text-primary-foreground/80"\n                    : "text-muted-foreground"\n              )}\n            >\n              {subheading}\n            </p>\n          )}\n\n          {links && links.length > 0 && (\n            <div className="flex flex-wrap gap-4 justify-center">\n              {links.map((link) => (\n                <Link\n                  key={link.href}\n                  href={link.href}\n                  className={cn(\n                    "inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",\n                    buttonClasses[style][link.variant]\n                  )}\n                >\n                  {link.label}\n                </Link>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  )\n}\n',
+  "marketing/nextjs/src/components/blocks/HowItWorks.tsx": 'import { UserPlus, Settings, Zap } from "lucide-react"\n\ninterface Step {\n  icon: React.ReactNode\n  title: string\n  description: string\n}\n\ninterface HowItWorksProps {\n  heading?: string\n  subheading?: string\n  steps?: Step[]\n}\n\nconst defaultSteps: Step[] = [\n  {\n    icon: <UserPlus className="h-8 w-8" />,\n    title: "Sign up in seconds",\n    description:\n      "Create your account with just an email. No credit card required to get started.",\n  },\n  {\n    icon: <Settings className="h-8 w-8" />,\n    title: "Configure your workspace",\n    description:\n      "Set up your team, invite members, and customize your workspace to fit your workflow.",\n  },\n  {\n    icon: <Zap className="h-8 w-8" />,\n    title: "Start collaborating",\n    description:\n      "Hit the ground running with templates, integrations, and automation built right in.",\n  },\n]\n\nexport function HowItWorks({\n  heading = "Get started in minutes",\n  subheading = "Three simple steps to transform how your team works",\n  steps = defaultSteps,\n}: HowItWorksProps) {\n  return (\n    <section className="py-16 md:py-24 bg-muted/30">\n      <div className="container mx-auto px-4">\n        {/* Header */}\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            {heading}\n          </h2>\n          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">\n            {subheading}\n          </p>\n        </div>\n\n        {/* Steps */}\n        <div className="max-w-5xl mx-auto">\n          <div className="grid md:grid-cols-3 gap-8 md:gap-12">\n            {steps.map((step, index) => (\n              <div key={index} className="relative">\n                {/* Connector line (hidden on mobile, shown between items on desktop) */}\n                {index < steps.length - 1 && (\n                  <div className="hidden md:block absolute top-10 left-[calc(50%+3rem)] w-[calc(100%-6rem)] h-px bg-border" />\n                )}\n\n                <div className="flex flex-col items-center text-center">\n                  {/* Step number badge */}\n                  <div className="relative mb-6">\n                    <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center text-primary">\n                      {step.icon}\n                    </div>\n                    <span className="absolute -top-2 -right-2 w-8 h-8 rounded-full bg-primary text-primary-foreground text-sm font-bold flex items-center justify-center">\n                      {index + 1}\n                    </span>\n                  </div>\n\n                  <h3 className="text-xl font-semibold mb-3">{step.title}</h3>\n                  <p className="text-muted-foreground">{step.description}</p>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* CTA */}\n        <div className="text-center mt-12 md:mt-16">\n          <a\n            href="/sign-up"\n            className="inline-flex items-center justify-center px-8 py-4 text-base font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"\n          >\n            Get started for free\n          </a>\n        </div>\n      </div>\n    </section>\n  )\n}\n',
   "marketing/nextjs/src/components/blocks/IndustryTabs.tsx": `"use client"
 
 import { useState } from "react"
@@ -3138,7 +4240,7 @@ export function IndustryTabs({
   "marketing/nextjs/src/components/blocks/ProofBanner.tsx": '"use client"\n\nimport Link from "next/link"\nimport { cn } from "@/lib/utils"\n\ninterface ProofBannerLink {\n  label: string\n  href: string\n  variant: "default" | "outline"\n}\n\ninterface ProofBannerProps {\n  headline?: string\n  subtext?: string\n  links?: ProofBannerLink[]\n  style?: "centered" | "left"\n}\n\nexport function 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  style = "centered",\n}: ProofBannerProps) {\n  return (\n    <section className="py-16 md:py-24">\n      <div className="container mx-auto px-4">\n        <div\n          className={cn(\n            "max-w-4xl",\n            style === "centered" ? "mx-auto text-center" : ""\n          )}\n        >\n          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">\n            {headline}\n          </h2>\n          {subtext && (\n            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">\n              {subtext}\n            </p>\n          )}\n          {links && links.length > 0 && (\n            <div\n              className={cn(\n                "flex flex-wrap gap-4",\n                style === "centered" ? "justify-center" : ""\n              )}\n            >\n              {links.map((link) => (\n                <Link\n                  key={link.href}\n                  href={link.href}\n                  className={cn(\n                    "inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",\n                    link.variant === "default"\n                      ? "bg-primary text-primary-foreground hover:bg-primary/90"\n                      : "border border-border bg-background hover:bg-muted"\n                  )}\n                >\n                  {link.label}\n                </Link>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  )\n}\n',
   "marketing/nextjs/src/components/blocks/TestimonialsGrid.tsx": '"use client"\n\nimport { cn } from "@/lib/utils"\n\ninterface Testimonial {\n  stat: string\n  statLabel: string\n  quote: string\n  author: string\n  company: string\n}\n\ninterface TestimonialsGridProps {\n  heading?: string\n  subheading?: string\n  testimonials?: Testimonial[]\n}\n\nconst defaultTestimonials: Testimonial[] = [\n  {\n    stat: "94%",\n    statLabel: "Faster onboarding",\n    quote:\n      "We got our entire team onboarded in under a day. The intuitive interface and powerful integrations saved us weeks of setup time.",\n    author: "Sarah Chen",\n    company: "TechFlow Inc",\n  },\n  {\n    stat: "3x",\n    statLabel: "Productivity",\n    quote:\n      "Our team is shipping features faster than ever. The automation tools eliminated hours of manual work every week.",\n    author: "Marcus Rivera",\n    company: "Beacon Digital",\n  },\n  {\n    stat: "40%",\n    statLabel: "Cost reduction",\n    quote:\n      "We consolidated five different tools into SaaSify. The ROI was immediate and our team loves having everything in one place.",\n    author: "David Kim",\n    company: "Cascade Systems",\n  },\n]\n\nexport function 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  testimonials = defaultTestimonials,\n}: TestimonialsGridProps) {\n  const displayTestimonials = testimonials.length > 0 ? testimonials : defaultTestimonials\n\n  return (\n    <section className="py-16 md:py-24">\n      <div className="container mx-auto px-4">\n        {/* Header */}\n        {(heading || subheading) && (\n          <div className="text-center mb-12 md:mb-16 max-w-3xl mx-auto">\n            {heading && (\n              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">\n                {heading}\n              </h2>\n            )}\n            {subheading && (\n              <p className="text-lg md:text-xl text-muted-foreground">\n                {subheading}\n              </p>\n            )}\n          </div>\n        )}\n\n        {/* Testimonials Grid */}\n        <div className="grid md:grid-cols-3 gap-6 lg:gap-8">\n          {displayTestimonials.map((testimonial) => (\n            <div\n              key={testimonial.author}\n              className="relative bg-card border border-border rounded-2xl p-6 md:p-8"\n            >\n              {/* Stat */}\n              <div className="mb-6">\n                <div className="text-4xl md:text-5xl font-bold text-primary mb-1">\n                  {testimonial.stat}\n                </div>\n                <p className="text-sm font-medium text-muted-foreground">\n                  {testimonial.statLabel}\n                </p>\n              </div>\n\n              {/* Quote */}\n              <blockquote className="text-foreground mb-6">\n                "{testimonial.quote}"\n              </blockquote>\n\n              {/* Author */}\n              <div className="flex items-center gap-3">\n                <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">\n                  <span className="text-sm font-medium">\n                    {testimonial.author\n                      .split(" ")\n                      .map((n) => n[0])\n                      .join("")}\n                  </span>\n                </div>\n                <div>\n                  <p className="text-sm font-medium text-foreground">\n                    {testimonial.author}\n                  </p>\n                  <p className="text-sm text-muted-foreground">\n                    {testimonial.company}\n                  </p>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n',
   "marketing/nextjs/src/components/blocks/TrustColumns.tsx": '"use client"\n\nimport {\n  Award,\n  Cloud,\n  Database,\n  Globe,\n  Lock,\n  Plug,\n  Shield,\n  Zap,\n  type LucideIcon,\n} from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface TrustItem {\n  icon: string\n  text: string\n}\n\ninterface TrustColumn {\n  label: string\n  heading: string\n  description: string\n  items: TrustItem[]\n}\n\ninterface TrustColumnsProps {\n  columns?: TrustColumn[]\n}\n\nconst iconMap: Record<string, LucideIcon> = {\n  zap: Zap,\n  plug: Plug,\n  database: Database,\n  cloud: Cloud,\n  shield: Shield,\n  lock: Lock,\n  award: Award,\n  globe: Globe,\n}\n\nconst defaultColumns: TrustColumn[] = [\n  {\n    label: "Integrations",\n    heading: "Connect anywhere",\n    description:\n      "Plug in and get started immediately with pre-built connectors for every major platform.",\n    items: [\n      { icon: "zap", text: "Go live in minutes" },\n      { icon: "plug", text: "Pre-built connectors" },\n      { icon: "database", text: "Complete data sync" },\n      { icon: "cloud", text: "Cloud-native infrastructure" },\n    ],\n  },\n  {\n    label: "Security & Compliance",\n    heading: "Enterprise-level security",\n    description:\n      "Keep your data safe with encryption, granular access control, and compliance-ready infrastructure.",\n    items: [\n      { icon: "shield", text: "SOC 2 Type II certified" },\n      { icon: "lock", text: "End-to-end encryption" },\n      { icon: "award", text: "Complete audit trails" },\n      { icon: "globe", text: "GDPR compliant" },\n    ],\n  },\n]\n\nexport function TrustColumns({ columns = defaultColumns }: TrustColumnsProps) {\n  const displayColumns = columns.length > 0 ? columns : defaultColumns\n\n  return (\n    <section className="py-16 md:py-24">\n      <div className="container mx-auto px-4">\n        <div className="grid md:grid-cols-2 gap-12 lg:gap-16">\n          {displayColumns.map((column) => (\n            <div key={column.label}>\n              <span className="inline-block text-sm font-medium text-primary mb-4">\n                {column.label}\n              </span>\n              <h2 className="text-2xl md:text-3xl font-bold tracking-tight mb-4">\n                {column.heading}\n              </h2>\n              <p className="text-muted-foreground mb-8">\n                {column.description}\n              </p>\n\n              <ul className="space-y-4">\n                {column.items.map((item) => {\n                  const Icon = iconMap[item.icon] || Shield\n                  return (\n                    <li key={item.text} className="flex items-center gap-3">\n                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">\n                        <Icon className="h-4 w-4 text-primary" />\n                      </div>\n                      <span className="text-sm font-medium">\n                        {item.text}\n                      </span>\n                    </li>\n                  )\n                })}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n',
-  "marketing/nextjs/src/components/blocks/index.ts": 'export { LogoBanner } from "./LogoBanner"\nexport { ProofBanner } from "./ProofBanner"\nexport { BentoFeatures } from "./BentoFeatures"\nexport { FeatureShowcase } from "./FeatureShowcase"\nexport { IndustryTabs } from "./IndustryTabs"\nexport { TestimonialsGrid } from "./TestimonialsGrid"\nexport { TrustColumns } from "./TrustColumns"\nexport { PricingTable } from "./PricingTable"\nexport { FinalCTA } from "./FinalCTA"\n',
+  "marketing/nextjs/src/components/blocks/index.ts": 'export { LogoBanner } from "./LogoBanner"\nexport { ProofBanner } from "./ProofBanner"\nexport { BentoFeatures } from "./BentoFeatures"\nexport { FeatureShowcase } from "./FeatureShowcase"\nexport { IndustryTabs } from "./IndustryTabs"\nexport { TestimonialsGrid } from "./TestimonialsGrid"\nexport { TrustColumns } from "./TrustColumns"\nexport { PricingTable } from "./PricingTable"\nexport { FinalCTA } from "./FinalCTA"\nexport { FAQAccordion } from "./FAQAccordion"\nexport { HowItWorks } from "./HowItWorks"\n',
   "marketing/nextjs/src/components/heros/AnimatedMockup.tsx": '"use client"\n\nimport { useEffect, useState } from "react"\nimport { cn } from "@/lib/utils"\n\ninterface MockupState {\n  id: number\n  label: string\n  sidebarActive: string\n  previewTitle: string\n  previewDescription: string\n  previewCategory: string\n  previewStatus: "draft" | "published" | "featured"\n  previewUrl?: string\n}\n\nconst mockupStates: MockupState[] = [\n  {\n    id: 1,\n    label: "Setup & styling",\n    sidebarActive: "templates",\n    previewTitle: "Atlas Directory",\n    previewDescription: "Apply your brand, typography, and layout in minutes.",\n    previewCategory: "Design systems",\n    previewStatus: "draft",\n    previewUrl: "atlas.directory/home",\n  },\n  {\n    id: 2,\n    label: "Plans & pricing",\n    sidebarActive: "billing",\n    previewTitle: "Pro Listing Plan",\n    previewDescription: "Recurring billing, featured placements, and add-ons configured.",\n    previewCategory: "Monetization",\n    previewStatus: "draft",\n    previewUrl: "atlas.directory/billing",\n  },\n  {\n    id: 3,\n    label: "SEO & publishing",\n    sidebarActive: "seo",\n    previewTitle: "Atlas Directory",\n    previewDescription: "Schema, sitemap, and custom domain are ready to publish.",\n    previewCategory: "SEO & domains",\n    previewStatus: "published",\n    previewUrl: "atlas.directory/launch",\n  },\n  {\n    id: 4,\n    label: "Payouts live",\n    sidebarActive: "overview",\n    previewTitle: "Atlas Directory",\n    previewDescription: "Subscribers active, payouts scheduled to Stripe, featured slots sold.",\n    previewCategory: "Revenue",\n    previewStatus: "featured",\n    previewUrl: "atlas.directory/analytics",\n  },\n]\n\ninterface SidebarItemProps {\n  icon: string\n  label: string\n  active?: boolean\n  badge?: number\n}\n\nfunction SidebarItem({ icon, label, active, badge }: SidebarItemProps) {\n  return (\n    <div className={cn("sidebar-item", active && "sidebar-item--active")}>\n      <span className="sidebar-icon">{icon}</span>\n      <span className="sidebar-label">{label}</span>\n      {badge && <span className="sidebar-badge">{badge}</span>}\n    </div>\n  )\n}\n\nexport function AnimatedMockup() {\n  const [currentState, setCurrentState] = useState(0)\n  const [isPaused, setIsPaused] = useState(false)\n\n  useEffect(() => {\n    if (isPaused) return\n\n    const interval = setInterval(() => {\n      setCurrentState((prev) => (prev + 1) % mockupStates.length)\n    }, 3000)\n\n    return () => clearInterval(interval)\n  }, [isPaused])\n\n  const state = mockupStates[currentState]\n\n  return (\n    <div\n      className="mockup-wrapper"\n      onMouseEnter={() => setIsPaused(true)}\n      onMouseLeave={() => setIsPaused(false)}\n    >\n      {/* Browser Chrome */}\n      <div className="mockup-chrome">\n        <div className="mockup-chrome-dots">\n          <span className="dot dot-red" />\n          <span className="dot dot-yellow" />\n          <span className="dot dot-green" />\n        </div>\n        <div className="mockup-chrome-title">SaaSify</div>\n        <div className="mockup-chrome-actions" />\n      </div>\n\n      {/* App Content */}\n      <div className="mockup-content">\n        {/* Sidebar */}\n        <div className="mockup-sidebar">\n          <div className="sidebar-header">\n            <div className="sidebar-logo">\n              <span className="logo-icon">D</span>\n              <span className="logo-text">My Directory</span>\n            </div>\n          </div>\n          <nav className="sidebar-nav">\n            <SidebarItem icon="\u{1F4CA}" label="Overview" active={state.sidebarActive === "overview"} />\n            <SidebarItem icon="\u{1F5BC}\uFE0F" label="Templates" active={state.sidebarActive === "templates"} />\n            <SidebarItem\n              icon="\u{1F4CB}"\n              label="Listings"\n              active={state.sidebarActive === "listings"}\n              badge={24}\n            />\n            <SidebarItem\n              icon="\u{1F4B3}"\n              label="Plans & Billing"\n              active={state.sidebarActive === "billing"}\n            />\n            <SidebarItem\n              icon="\u26A1"\n              label="Automations"\n              active={state.sidebarActive === "automations"}\n            />\n            <SidebarItem icon="\u{1F50E}" label="SEO" active={state.sidebarActive === "seo"} />\n            <SidebarItem icon="\u2699\uFE0F" label="Settings" active={state.sidebarActive === "settings"} />\n          </nav>\n        </div>\n\n        {/* Main Content Area */}\n        <div className="mockup-main">\n          {/* Header */}\n          <div className="main-header">\n            <div className="header-title">\n              <h2>{state.label}</h2>\n              <span className="header-breadcrumb">SaaSify / {state.previewTitle}</span>\n            </div>\n            <div className="header-actions">\n              <button\n                type="button"\n                className={cn(\n                  "action-btn",\n                  state.previewStatus === "published" && "action-btn--success",\n                  state.previewStatus === "featured" && "action-btn--featured"\n                )}\n              >\n                {state.previewStatus === "draft" && "Save Draft"}\n                {state.previewStatus === "published" && "\u2713 Published"}\n                {state.previewStatus === "featured" && "\u2B50 Featured"}\n              </button>\n            </div>\n          </div>\n\n          {/* Split View: Editor + Preview */}\n          <div className="main-split">\n            {/* Editor Panel */}\n            <div className="editor-panel">\n              <div className="editor-section">\n                <span className="editor-label">Listing Name</span>\n                <div className="editor-input">\n                  <span className="input-text">{state.previewTitle}</span>\n                  <span className="input-cursor" />\n                </div>\n              </div>\n              <div className="editor-section">\n                <span className="editor-label">Category</span>\n                <div className="editor-select">\n                  <span>{state.previewCategory}</span>\n                  <span className="select-arrow">\u25BC</span>\n                </div>\n              </div>\n              <div className="editor-section">\n                <span className="editor-label">Description</span>\n                <div className="editor-textarea">\n                  <span className={cn("textarea-text", state.id >= 2 && "textarea-text--complete")}>\n                    {state.previewDescription}\n                  </span>\n                </div>\n              </div>\n            </div>\n\n            {/* Preview Panel */}\n            <div className="preview-panel">\n              <div className="preview-header">\n                <span className="preview-label">Live Preview</span>\n                <span className="preview-url">{state.previewUrl ?? "saasify.app/live"}</span>\n              </div>\n              <div className="preview-card">\n                {state.previewStatus === "featured" && (\n                  <div className="preview-badge">\u2B50 Featured</div>\n                )}\n                <div className="preview-image">\n                  <div className="preview-image-placeholder">\n                    <span>\u{1F3E2}</span>\n                  </div>\n                </div>\n                <div className="preview-content">\n                  <span className="preview-category-tag">{state.previewCategory}</span>\n                  <h3 className="preview-title">{state.previewTitle}</h3>\n                  <p className="preview-description">{state.previewDescription}</p>\n                  <div className="preview-meta">\n                    <span className="meta-rating">\u2605\u2605\u2605\u2605\u2605</span>\n                    <span className="meta-reviews">24 reviews</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* State Indicator */}\n      <div className="mockup-indicators">\n        {mockupStates.map((s, i) => (\n          <button\n            type="button"\n            key={s.id}\n            onClick={() => setCurrentState(i)}\n            className={cn("indicator", i === currentState && "indicator--active")}\n          >\n            <span className="indicator-dot" />\n            <span className="indicator-label">{s.label}</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n',
   "marketing/nextjs/src/components/heros/ProductShowcaseHero.tsx": '"use client"\n\nimport Link from "next/link"\nimport Image from "next/image"\nimport { AnimatedMockup } from "./AnimatedMockup"\nimport { cn } from "@/lib/utils"\n\ninterface HeroLink {\n  label: string\n  href: string\n  variant: "default" | "outline"\n}\n\ninterface ProductShowcaseHeroProps {\n  headline: string\n  description: string\n  links?: HeroLink[]\n}\n\nexport function 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}: ProductShowcaseHeroProps) {\n  return (\n    <div className="relative overflow-hidden">\n      {/* Hero Content - Left Aligned */}\n      <div className="container mx-auto px-4 pt-8 pb-16 md:pt-16 md:pb-24">\n        <div className="max-w-2xl">\n          <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl">\n            {headline}\n          </h1>\n          <p className="mt-6 text-lg text-muted-foreground md:text-xl">\n            {description}\n          </p>\n          {links && links.length > 0 && (\n            <div className="mt-8 flex flex-wrap gap-4">\n              {links.map((link) => (\n                <Link\n                  key={link.href}\n                  href={link.href}\n                  className={cn(\n                    "inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",\n                    link.variant === "default"\n                      ? "bg-primary text-primary-foreground hover:bg-primary/90"\n                      : "border border-border bg-background hover:bg-muted"\n                  )}\n                >\n                  {link.label}\n                </Link>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Product Mockup Section */}\n      <div className="container mx-auto px-4">\n        <div className="hero-showcase">\n          {/* Background Image */}\n          <div className="hero-bg-image">\n            <Image\n              src="/media/hero-bg.png"\n              alt=""\n              fill\n              sizes="(max-width: 1280px) 100vw, 1280px"\n              className="object-cover"\n              priority\n              quality={75}\n            />\n          </div>\n\n          {/* Mockup - centered within background */}\n          <div className="hero-mockup-centered">\n            <AnimatedMockup />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n',
   "marketing/nextjs/src/components/heros/index.ts": 'export { ProductShowcaseHero } from "./ProductShowcaseHero"\nexport { AnimatedMockup } from "./AnimatedMockup"\n',
@@ -3192,6 +4294,7 @@ GCS_CREDENTIALS="{}"  # JSON service account key
 {{/if}}
 `,
   "marketing/payload/_env.local.hbs": "# Database (Supabase PostgreSQL)\nDATABASE_URL=\n\n# Payload CMS\nPAYLOAD_SECRET=\n\n# Scheduled Jobs\nCRON_SECRET=\n\n# Draft Previews\nPREVIEW_SECRET=\n\n# Email (Resend)\nRESEND_API_KEY=\nRESEND_FROM_EMAIL=\n\n{{#if (eq integrations.payloadStorage 's3')}}\n# S3 Storage\nS3_BUCKET=media\nS3_ACCESS_KEY_ID=\nS3_SECRET_ACCESS_KEY=\nS3_REGION=us-east-1\nS3_ENDPOINT=\n{{/if}}\n{{#if (eq integrations.payloadStorage 'r2')}}\n# Cloudflare R2 Storage\nR2_BUCKET=\nR2_ACCESS_KEY_ID=\nR2_SECRET_ACCESS_KEY=\nR2_ENDPOINT=\n{{/if}}\n{{#if (eq integrations.payloadStorage 'vercel-blob')}}\n# Vercel Blob Storage\nBLOB_READ_WRITE_TOKEN=\n{{/if}}\n{{#if (eq integrations.payloadStorage 'gcs')}}\n# Google Cloud Storage\nGCS_BUCKET=\nGCS_PROJECT_ID=\nGCS_CREDENTIALS=\n{{/if}}\n",
+  "marketing/payload/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 if (eq shadcn.style "maia")}}\n  "style": "new-york",\n{{else if (eq shadcn.style "lyra")}}\n  "style": "new-york",\n{{else if (eq shadcn.style "mira")}}\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/(frontend)/globals.css",\n    "baseColor": "{{shadcn.baseColor}}",\n    "cssVariables": true,\n    "prefix": ""\n  },\n{{#if (eq shadcn.iconLibrary "lucide")}}\n  "iconLibrary": "lucide",\n{{else if (eq shadcn.iconLibrary "hugeicons")}}\n  "iconLibrary": "lucide",\n{{else if (eq shadcn.iconLibrary "tabler")}}\n  "iconLibrary": "lucide",\n{{else if (eq shadcn.iconLibrary "phosphor")}}\n  "iconLibrary": "lucide",\n{{else}}\n  "iconLibrary": "lucide",\n{{/if}}\n  "aliases": {\n    "components": "@/components",\n    "utils": "@/utilities",\n    "ui": "@/components/ui",\n    "lib": "@/lib",\n    "hooks": "@/hooks"\n  },\n  "registries": {}\n}\n',
   "marketing/payload/next.config.ts.hbs": "import { withPayload } from '@payloadcms/next/withPayload'\nimport type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  transpilePackages: ['@repo/ui'],\n}\n\nexport default withPayload(nextConfig)\n",
   "marketing/payload/package.json.hbs": '{\n  "name": "@repo/marketing",\n  "version": "0.1.0",\n  "private": true,\n  "type": "module",\n  "scripts": {\n    "build": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap && next build",\n    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev --port 3000",\n    "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",\n    "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",\n    "lint": "biome check .",\n    "lint:fix": "biome check --write .",\n    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",\n    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",\n    "typecheck": "tsc --noEmit",\n    "db:push": "payload migrate",\n    "db:seed": "tsx src/seed.ts"\n  },\n  "dependencies": {\n    "@payloadcms/admin-bar": "^3.0.0",\n    "@payloadcms/db-postgres": "^3.0.0",\n    "@payloadcms/email-resend": "^3.0.0",\n    "@payloadcms/live-preview-react": "^3.0.0",\n    "@payloadcms/next": "^3.0.0",\n    "@payloadcms/plugin-form-builder": "^3.0.0",\n    "@payloadcms/plugin-nested-docs": "^3.0.0",\n    "@payloadcms/plugin-redirects": "^3.0.0",\n    "@payloadcms/plugin-search": "^3.0.0",\n    "@payloadcms/plugin-seo": "^3.0.0",\n    "@payloadcms/richtext-lexical": "^3.0.0",\n    "@payloadcms/storage-vercel-blob": "^3.0.0",\n    "@payloadcms/ui": "^3.0.0",\n    "@radix-ui/react-accordion": "^1.2.0",\n    "@radix-ui/react-checkbox": "^1.0.4",\n    "@radix-ui/react-label": "^2.0.2",\n    "@radix-ui/react-select": "^2.0.0",\n    "@radix-ui/react-slot": "^1.0.2",\n    "@repo/ui": "workspace:*",\n    "class-variance-authority": "^0.7.1",\n    "clsx": "^2.1.1",\n    "cross-env": "^7.0.3",\n    "geist": "^1.3.0",\n    "lucide-react": "^0.562.0",\n    "next": "^15.4.10",\n    "payload": "^3.70.0",\n    "posthog-js": "^1.200.0",\n    "prism-react-renderer": "^2.4.1",\n    "react": "^19.0.0",\n    "react-dom": "^19.0.0",\n    "react-hook-form": "^7.71.1",\n    "sharp": "^0.34.0",\n    "stripe": "^17.7.0",\n    "tailwind-merge": "^3.4.0"\n  },\n  "devDependencies": {\n    "@repo/config-typescript": "workspace:*",\n    "@tailwindcss/postcss": "^4.0.0",\n    "@tailwindcss/typography": "^0.5.19",\n    "@types/node": "^20.0.0",\n    "@types/react": "^19.0.0",\n    "@types/react-dom": "^19.0.0",\n    "postcss": "^8.4.0",\n    "sass": "^1.86.0",\n    "tailwindcss": "^4.0.0",\n    "tsx": "^4.0.0",\n    "tw-animate-css": "^1.4.0",\n    "typescript": "^5.0.0"\n  }\n}\n',
   "marketing/payload/postcss.config.mjs.hbs": "export default {\n  plugins: {\n    '@tailwindcss/postcss': {},\n  },\n}\n",
@@ -11603,7 +12706,7 @@ export default function Index() {
   "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',
   "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',
   "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",
-  "web/components.json.hbs": '{\n  "$schema": "https://ui.shadcn.com/schema.json",\n  "style": "new-york",\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',
+  "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',
   "web/next.config.ts.hbs": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n{{#if (eq structure 'monorepo')}}\n  transpilePackages: ['@repo/ui', '@repo/backend'],\n{{/if}}\n}\n\nexport default nextConfig\n",
   "web/package.json.hbs": `{
   "name": "{{#if (eq structure 'monorepo')}}@repo/web{{else}}{{projectName}}{{/if}}",
@@ -11678,7 +12781,7 @@ export default function Index() {
   "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",
   "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",
   "web/src/app/api/auth/[...all]/route.ts.hbs": "import { handler } from '@/lib/auth-server'\n\nexport const { GET, POST } = handler\n",
-  "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: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',
+  "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',
   "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",
   "web/src/app/page.tsx.hbs": `'use client'