kofi-stack-template-generator 2.1.51 → 2.1.52

package/dist/index.js

@@ -1192,179 +1192,379 @@ export function ColorPalette() {
   "design-system/tsconfig.json.hbs": '{\n  "extends": "@repo/config-typescript/nextjs.json",\n  "compilerOptions": {\n    "baseUrl": ".",\n    "paths": {\n      "@/*": ["./src/*"],\n      "@repo/ui": ["../../packages/ui/src"],\n      "@repo/ui/*": ["../../packages/ui/src/*"]\n    }\n  },\n  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],\n  "exclude": ["node_modules"]\n}\n',
   "integrations/posthog/src/components/providers/posthog-provider.tsx.hbs": "'use client'\n\nimport posthog from 'posthog-js'\nimport { PostHogProvider as PHProvider } from 'posthog-js/react'\nimport { useEffect } from 'react'\n\nexport function PostHogProvider({ children }: { children: React.ReactNode }) {\n  useEffect(() => {\n    const key = process.env.NEXT_PUBLIC_POSTHOG_KEY\n    if (!key) return\n\n    posthog.init(key, {\n      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',\n      person_profiles: 'identified_only',\n      capture_pageview: false, // We capture pageviews manually\n    })\n  }, [])\n\n  return <PHProvider client={posthog}>{children}</PHProvider>\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  },\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  },\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/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',
-  "marketing/nextjs/src/app/layout.tsx.hbs": "import type { Metadata } from 'next'\nimport { Geist, Geist_Mono } from 'next/font/google'\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}} - Marketing',\n  description: 'Marketing site for {{projectName}}',\n}\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <html lang=\"en\">\n      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>\n        {children}\n      </body>\n    </html>\n  )\n}\n",
-  "marketing/nextjs/src/app/page.tsx.hbs": `export default function HomePage() {
+  "marketing/nextjs/src/app/layout.tsx.hbs": `import type { Metadata } from 'next'
+import { Geist, Geist_Mono } from 'next/font/google'
+import { ThemeProvider } from '@/components/ThemeProvider'
+import './globals.css'
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+})
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+})
+
+export const metadata: Metadata = {
+  title: 'SaaSify - The modern platform for growing teams',
+  description: 'Transform your workflow with our all-in-one platform. Streamline operations, boost productivity, and scale your business with powerful tools designed for modern teams.',
+  keywords: ['SaaS', 'productivity', 'workflow', 'automation', 'team collaboration'],
+  openGraph: {
+    title: 'SaaSify - The modern platform for growing teams',
+    description: 'Transform your workflow with our all-in-one platform.',
+    type: 'website',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   return (
-    <main className="min-h-screen">
-      {/* Navigation */}
-      <nav className="sticky top-0 z-50 w-full border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm">
-        <div className="container mx-auto px-4">
-          <div className="flex h-16 items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-900 dark:bg-white">
-                <svg className="h-4 w-4 text-white dark:text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
-              </div>
-              <span className="font-semibold text-gray-900 dark:text-white">{{projectName}}</span>
-            </div>
-            <div className="hidden md:flex items-center gap-6">
-              <a href="#features" className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
-                Features
-              </a>
-              <a href="#" className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
-                Pricing
-              </a>
-              <a href="#" className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
-                Docs
-              </a>
-            </div>
-            <div className="flex items-center gap-4">
-              <a
-                href="/sign-in"
-                className="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors"
-              >
-                Sign in
-              </a>
-              <a
-                href="/sign-up"
-                className="rounded-lg bg-gray-900 dark:bg-white px-4 py-2 text-sm font-medium text-white dark:text-gray-900 hover:opacity-90 transition-opacity"
-              >
-                Get Started
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
+    <html lang="en" suppressHydrationWarning>
+      <body className={\`\${geistSans.variable} \${geistMono.variable} font-sans antialiased\`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+`,
+  "marketing/nextjs/src/app/page.tsx.hbs": `import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { ProductShowcaseHero } from "@/components/heros"
+import {
+  LogoBanner,
+  ProofBanner,
+  BentoFeatures,
+  FeatureShowcase,
+  IndustryTabs,
+  TestimonialsGrid,
+  TrustColumns,
+  PricingTable,
+  FinalCTA,
+} from "@/components/blocks"
 
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
-        <div className="container mx-auto px-4 py-24 sm:py-32">
-          <div className="text-center">
-            <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">
-              Welcome to {{projectName}}
-            </h1>
-            <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-              A modern full-stack application built with Next.js, Convex, and Better-Auth.
-            </p>
-            <div className="mt-10 flex items-center justify-center gap-x-6">
-              <a
-                href="/app"
-                className="rounded-lg bg-gray-900 dark:bg-white px-6 py-3 text-sm font-semibold text-white dark:text-gray-900 shadow-sm hover:opacity-90 transition-opacity"
-              >
-                Get Started
-              </a>
-              <a
-                href="#features"
-                className="text-sm font-semibold leading-6 text-gray-900 dark:text-white"
-              >
-                Learn more <span aria-hidden="true">\u2192</span>
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
+export default function HomePage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero Section */}
+        <ProductShowcaseHero
+          headline="The modern platform for growing teams"
+          description="Streamline workflows, boost productivity, and scale your business with one powerful platform."
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "default" },
+            { label: "Watch demo", href: "/demo", variant: "outline" },
+          ]}
+        />
+
+        {/* Logo Banner - Social proof */}
+        <LogoBanner
+          heading="Trusted by fast-growing companies everywhere"
+          style="scroll"
+        />
+
+        {/* Value Proposition */}
+        <ProofBanner
+          headline="Transform how your team works, collaborates, and grows"
+          subtext="Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint."
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "default" },
+            { label: "Book a demo", href: "/contact", variant: "outline" },
+          ]}
+        />
+
+        {/* Bento Features */}
+        <BentoFeatures
+          heading="Discover what SaaSify can do"
+          subheading="Everything you need to work smarter and scale faster"
+        />
+
+        {/* Feature Showcase: Integrations */}
+        <FeatureShowcase
+          label="Seamless Integrations"
+          headline="Connect everything your team uses in one place"
+          description="Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically."
+          features={[
+            { text: "100+ native integrations" },
+            { text: "Two-way data sync" },
+            { text: "Custom webhooks" },
+            { text: "API access included" },
+          ]}
+          link={{ label: "Explore integrations", href: "/features/integrations" }}
+          imagePosition="right"
+        />
+
+        {/* Feature Showcase: Analytics */}
+        <FeatureShowcase
+          label="Actionable Analytics"
+          headline="Make decisions backed by real-time data"
+          description="Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth."
+          features={[
+            { text: "Real-time dashboards" },
+            { text: "Custom reports" },
+            { text: "Team performance metrics" },
+            { text: "Automated insights" },
+          ]}
+          link={{ label: "Learn about analytics", href: "/features/analytics" }}
+          imagePosition="left"
+        />
+
+        {/* Feature Showcase: Automation */}
+        <FeatureShowcase
+          label="Workflow Automation"
+          headline="Eliminate busywork with smart automation"
+          description="Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters."
+          features={[
+            { text: "Visual workflow builder" },
+            { text: "Conditional logic" },
+            { text: "Scheduled triggers" },
+            { text: "Cross-app automation" },
+          ]}
+          link={{ label: "See automation features", href: "/features/automation" }}
+          imagePosition="right"
+        />
+
+        {/* Feature Showcase: Collaboration */}
+        <FeatureShowcase
+          label="Team Collaboration"
+          headline="Work together seamlessly, from anywhere"
+          description="Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team."
+          features={[
+            { text: "Real-time collaboration" },
+            { text: "Shared workspaces" },
+            { text: "Comments and mentions" },
+            { text: "Activity tracking" },
+          ]}
+          link={{ label: "Explore collaboration", href: "/features" }}
+          imagePosition="left"
+        />
+
+        {/* Industry Tabs */}
+        <IndustryTabs
+          heading="Solutions that deliver real results"
+          subheading="Whether you're in sales, marketing, or product, SaaSify adapts to how your team works."
+        />
+
+        {/* Testimonials */}
+        <TestimonialsGrid
+          heading="Loved by teams at companies of all sizes"
+          subheading="See how leading teams use SaaSify to drive growth and productivity."
+        />
+
+        {/* Trust Columns */}
+        <TrustColumns />
+
+        {/* Second Logo Banner - Integrations */}
+        <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" },
+          ]}
+        />
+
+        {/* Pricing */}
+        <PricingTable
+          heading="Simple, transparent pricing"
+          subheading="Start free, upgrade as your team grows. No hidden fees."
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to transform how your team works?"
+          subheading="Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Book a demo", 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"\nimport { cn } from "@/lib/utils"\n\n// Footer navigation structure matching SaaSify\nconst footerColumns = [\n  {\n    title: "Product",\n    links: [\n      { label: "Home", href: "/" },\n      { label: "Pricing", href: "/pricing" },\n      { label: "Integrations", href: "/features/integrations" },\n    ],\n  },\n  {\n    title: "Resources",\n    links: [\n      { label: "Blog", href: "/blog" },\n      { label: "Documentation", href: "/docs" },\n    ],\n  },\n  {\n    title: "Company",\n    links: [\n      { label: "About", href: "/about" },\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\nconst bottomLinks = [\n  { label: "Contact Support", href: "/support" },\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-6">\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.href}>\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 md:col-span-3 lg: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          {/* Bottom Links and Theme Selector */}\n          <div className="flex items-center gap-6">\n            {bottomLinks.map((link) => (\n              <Link\n                key={link.href}\n                href={link.href}\n                className="text-sm text-muted-foreground transition-colors hover:text-foreground"\n              >\n                {link.label}\n              </Link>\n            ))}\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, 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 MobileMenuProps {\n  productMenu: {\n    label: string\n    columns: MenuColumn[]\n  }\n  solutionsMenu: {\n    label: string\n    columns: MenuColumn[]\n  }\n  navLinks: { label: string; href: string }[]\n  ctaLinks: { label: string; href: string; variant: "default" | "ghost" }[]\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\nfunction MobileMenuSection({\n  menu,\n  isOpen,\n  onToggle,\n  onClose,\n}: {\n  menu: { label: string; columns: MenuColumn[] }\n  isOpen: boolean\n  onToggle: () => void\n  onClose: () => void\n}) {\n  return (\n    <div className="border-b border-border">\n      <button\n        type="button"\n        className="flex items-center justify-between w-full px-4 py-3 text-sm font-medium"\n        onClick={onToggle}\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      {isOpen && (\n        <div className="px-4 pb-4 space-y-4">\n          {menu.columns.map((column) => (\n            <div key={column.title}>\n              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">\n                {column.title}\n              </h4>\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-center gap-3 p-2 rounded-lg hover:bg-muted"\n                        onClick={onClose}\n                      >\n                        <Icon className="h-4 w-4 text-primary" />\n                        <span className="text-sm">{item.label}</span>\n                      </Link>\n                    </li>\n                  )\n                })}\n              </ul>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport function MobileMenu({ productMenu, solutionsMenu, navLinks, ctaLinks }: MobileMenuProps) {\n  const [isOpen, setIsOpen] = useState(false)\n  const [openSection, setOpenSection] = useState<string | null>(null)\n\n  const handleClose = () => {\n    setIsOpen(false)\n    setOpenSection(null)\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            <MobileMenuSection\n              menu={productMenu}\n              isOpen={openSection === "product"}\n              onToggle={() =>\n                setOpenSection(openSection === "product" ? null : "product")\n              }\n              onClose={handleClose}\n            />\n            <MobileMenuSection\n              menu={solutionsMenu}\n              isOpen={openSection === "solutions"}\n              onToggle={() =>\n                setOpenSection(openSection === "solutions" ? null : "solutions")\n              }\n              onClose={handleClose}\n            />\n\n            {/* Simple nav 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.href}\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 { MegaMenu } from "./MegaMenu"\nimport { MobileMenu } from "./MobileMenu"\nimport { cn } from "@/lib/utils"\n\n// Navigation data structure matching SaaSify\nconst productMenu = {\n  label: "Product",\n  columns: [\n    {\n      title: "Core Features",\n      items: [\n        {\n          label: "Integrations",\n          description: "Connect with 100+ tools you already use",\n          href: "/features/integrations",\n          icon: "layout",\n        },\n        {\n          label: "Analytics",\n          description: "Real-time insights and reporting dashboards",\n          href: "/features/analytics",\n          icon: "barChart",\n        },\n        {\n          label: "Security",\n          description: "Enterprise-grade protection and compliance",\n          href: "/features/security",\n          icon: "shield",\n        },\n      ],\n    },\n    {\n      title: "Productivity",\n      items: [\n        {\n          label: "Dashboard",\n          description: "Unified command center for your team",\n          href: "/features/dashboard",\n          icon: "layout",\n        },\n        {\n          label: "Automation",\n          description: "Streamline repetitive tasks instantly",\n          href: "/features/automation",\n          icon: "zap",\n        },\n        {\n          label: "Workflows",\n          description: "Build custom processes without code",\n          href: "/features/workflows",\n          icon: "layers",\n        },\n      ],\n    },\n  ],\n}\n\nconst solutionsMenu = {\n  label: "Solutions",\n  columns: [\n    {\n      title: "By Team",\n      items: [\n        {\n          label: "Sales Teams",\n          description: "Close deals faster with smart tools",\n          href: "/use-cases/sales",\n          icon: "target",\n        },\n        {\n          label: "Marketing Teams",\n          description: "Launch campaigns that convert",\n          href: "/use-cases/marketing",\n          icon: "rocket",\n        },\n        {\n          label: "Product Teams",\n          description: "Ship features users love",\n          href: "/use-cases/product",\n          icon: "layers",\n        },\n        {\n          label: "Operations",\n          description: "Scale without the growing pains",\n          href: "/use-cases/operations",\n          icon: "settings",\n        },\n      ],\n    },\n  ],\n}\n\nconst navLinks = [\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: "/sign-up", 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={productMenu} />\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="/sign-up"\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            productMenu={productMenu}\n            solutionsMenu={solutionsMenu}\n            navLinks={navLinks}\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/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-foreground text-background",\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-background text-foreground hover:bg-background/90",\n      outline: "border border-background/30 text-background hover:bg-background/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-background/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/IndustryTabs.tsx": `"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+
+interface Tab {
+  name: string
+  stat: string
+  statLabel: string
+  description: string
+  link?: {
+    label: string
+    href: string
+  }
+}
 
-      {/* Features Section */}
-      <section id="features" className="py-24 sm:py-32">
-        <div className="container mx-auto px-4">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-              Everything you need
-            </h2>
-            <p className="mt-4 text-lg text-gray-600 dark:text-gray-300">
-              Built with the best tools for modern web development
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="p-6 rounded-xl border border-gray-200 dark:border-gray-700">
-              <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Lightning Fast
-              </h3>
-              <p className="text-gray-600 dark:text-gray-300">
-                Built on Next.js with Turbopack for instant hot reload and optimized production builds.
-              </p>
-            </div>
-            <div className="p-6 rounded-xl border border-gray-200 dark:border-gray-700">
-              <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Real-time Database
-              </h3>
-              <p className="text-gray-600 dark:text-gray-300">
-                Powered by Convex for automatic real-time sync and type-safe queries.
-              </p>
-            </div>
-            <div className="p-6 rounded-xl border border-gray-200 dark:border-gray-700">
-              <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Secure Auth
-              </h3>
-              <p className="text-gray-600 dark:text-gray-300">
-                Better-Auth provides secure, flexible authentication with social login support.
+interface IndustryTabsProps {
+  heading?: string
+  subheading?: string
+  tabs?: Tab[]
+}
+
+const defaultTabs: Tab[] = [
+  {
+    name: "Sales Teams",
+    stat: "40%",
+    statLabel: "Faster deal cycles with smart pipeline tools",
+    description:
+      "Close deals faster with intelligent pipeline management, automated follow-ups, and real-time insights that help your team hit quota every quarter.",
+    link: { label: "Solutions for sales", href: "/use-cases/sales" },
+  },
+  {
+    name: "Marketing Teams",
+    stat: "3x",
+    statLabel: "Campaign velocity with streamlined workflows",
+    description:
+      "Launch campaigns that convert with collaborative planning, asset management, and performance analytics all in one place.",
+    link: { label: "Solutions for marketing", href: "/use-cases/marketing" },
+  },
+  {
+    name: "Product Teams",
+    stat: "50%",
+    statLabel: "Faster shipping with better prioritization",
+    description:
+      "Ship features users love with roadmap planning, feedback collection, and release management that keeps everyone aligned.",
+    link: { label: "Solutions for product", href: "/use-cases/product" },
+  },
+  {
+    name: "Operations",
+    stat: "60%",
+    statLabel: "Time saved with process automation",
+    description:
+      "Scale your operations without the chaos. Automate processes, manage resources, and get visibility across your entire organization.",
+    link: { label: "Solutions for ops", href: "/use-cases/operations" },
+  },
+]
+
+export function IndustryTabs({
+  heading = "Solutions that deliver real results",
+  subheading = "Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.",
+  tabs = defaultTabs,
+}: IndustryTabsProps) {
+  const [activeTab, setActiveTab] = useState(0)
+  const displayTabs = tabs.length > 0 ? tabs : defaultTabs
+  const activeContent = displayTabs[activeTab]
+
+  return (
+    <section className="py-16 md:py-24 bg-muted/30">
+      <div className="container mx-auto px-4">
+        {/* Header */}
+        {(heading || subheading) && (
+          <div className="text-center mb-12 md:mb-16 max-w-3xl mx-auto">
+            {heading && (
+              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">
+                {heading}
+              </h2>
+            )}
+            {subheading && (
+              <p className="text-lg md:text-xl text-muted-foreground">
+                {subheading}
               </p>
-            </div>
+            )}
           </div>
-        </div>
-      </section>
+        )}
 
-      {/* CTA Section */}
-      <section className="py-24 sm:py-32 bg-gray-900 dark:bg-gray-800">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-            Ready to get started?
-          </h2>
-          <p className="mt-4 text-lg text-gray-300 max-w-2xl mx-auto">
-            Start building your next project with our full-stack template.
-          </p>
-          <div className="mt-10">
-            <a
-              href="/app"
-              className="rounded-lg bg-white px-6 py-3 text-sm font-semibold text-gray-900 shadow-sm hover:opacity-90 transition-opacity"
+        {/* Tabs */}
+        <div className="flex flex-wrap justify-center gap-2 mb-12">
+          {displayTabs.map((tab, index) => (
+            <button
+              key={tab.name}
+              type="button"
+              onClick={() => setActiveTab(index)}
+              className={cn(
+                "px-4 py-2 text-sm font-medium rounded-full transition-colors",
+                activeTab === index
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-background border border-border hover:bg-muted"
+              )}
             >
-              Launch App
-            </a>
-          </div>
+              {tab.name}
+            </button>
+          ))}
         </div>
-      </section>
 
-      {/* Footer */}
-      <footer className="border-t border-gray-200 dark:border-gray-700">
-        <div className="container mx-auto px-4 py-12">
-          <div className="text-center text-gray-600 dark:text-gray-300">
-            <p>
-              Built with{' '}
-              <a
-                href="https://github.com/theodenanyoh11/create-kofi-stack"
-                className="text-gray-900 dark:text-white hover:underline"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                create-kofi-stack
-              </a>
+        {/* Content */}
+        <div className="grid md:grid-cols-2 gap-12 lg:gap-16 items-center max-w-5xl mx-auto">
+          {/* Stats side */}
+          <div className="text-center md:text-left">
+            <div className="text-7xl md:text-8xl lg:text-9xl font-bold text-primary mb-2">
+              {activeContent.stat}
+            </div>
+            <p className="text-xl md:text-2xl font-medium text-foreground">
+              {activeContent.statLabel}
             </p>
           </div>
+
+          {/* Description side */}
+          <div>
+            <p className="text-lg text-muted-foreground mb-6">
+              {activeContent.description}
+            </p>
+            {activeContent.link && (
+              <Link
+                href={activeContent.link.href}
+                className="inline-flex items-center gap-2 px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+              >
+                {activeContent.link.label}
+                <span aria-hidden="true">\u2192</span>
+              </Link>
+            )}
+          </div>
         </div>
-      </footer>
-    </main>
+      </div>
+    </section>
   )
 }
 `,
+  "marketing/nextjs/src/components/blocks/LogoBanner.tsx": '"use client"\n\nimport { cn } from "@/lib/utils"\n\ninterface Logo {\n  name: string\n  initials?: string\n}\n\ninterface LogoBannerProps {\n  heading?: string\n  logos?: Logo[]\n  style?: "scroll" | "grid"\n}\n\nconst defaultLogos: Logo[] = [\n  { name: "TechFlow Inc", initials: "TF" },\n  { name: "Acme Corp", initials: "AC" },\n  { name: "Evergreen HQ", initials: "EH" },\n  { name: "Atlas Network", initials: "AN" },\n  { name: "Beacon Digital", initials: "BD" },\n  { name: "Cascade Systems", initials: "CS" },\n]\n\nfunction LogoItem({ logo }: { logo: Logo }) {\n  return (\n    <div\n      className={cn(\n        "logo-item flex items-center justify-center px-6 md:px-8",\n        "grayscale hover:grayscale-0 transition-all duration-300"\n      )}\n    >\n      <div className="flex items-center gap-2">\n        <span className="w-8 h-8 rounded bg-muted flex items-center justify-center text-xs font-bold text-foreground">\n          {logo.initials || logo.name.slice(0, 2).toUpperCase()}\n        </span>\n        <span className="text-sm font-medium text-muted-foreground hidden md:block">\n          {logo.name}\n        </span>\n      </div>\n    </div>\n  )\n}\n\nexport function LogoBanner({\n  heading = "Trusted by fast-growing companies everywhere",\n  logos = defaultLogos,\n  style = "scroll",\n}: LogoBannerProps) {\n  const displayLogos = logos.length > 0 ? logos : defaultLogos\n\n  return (\n    <section className="py-12 md:py-16 border-y border-border/50">\n      <div className="container mx-auto px-4">\n        {heading && (\n          <p className="text-center text-sm text-muted-foreground mb-8 uppercase tracking-wider">\n            {heading}\n          </p>\n        )}\n\n        {style === "scroll" ? (\n          <div className="logo-scroll-container">\n            <div className="logo-scroll-track">\n              {/* Double the logos for seamless loop */}\n              {[...displayLogos, ...displayLogos].map((logo, index) => (\n                <LogoItem key={`${logo.name}-${index}`} logo={logo} />\n              ))}\n            </div>\n          </div>\n        ) : (\n          <div className="grid grid-cols-3 md:grid-cols-6 gap-8 items-center justify-items-center">\n            {displayLogos.map((logo) => (\n              <LogoItem key={logo.name} logo={logo} />\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n',
+  "marketing/nextjs/src/components/blocks/PricingTable.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Check, X } from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface PricingFeature {\n  feature: string\n  included: boolean\n}\n\ninterface PricingPlan {\n  name: string\n  price: string\n  description: string\n  featured?: boolean\n  features: PricingFeature[]\n  link: {\n    label: string\n    href: string\n    variant: "default" | "outline"\n  }\n}\n\ninterface PricingTableProps {\n  heading?: string\n  subheading?: string\n  plans?: PricingPlan[]\n}\n\nconst defaultPlans: PricingPlan[] = [\n  {\n    name: "Free",\n    price: "$0/mo",\n    description: "Perfect for trying SaaSify.",\n    features: [\n      { feature: "Up to 3 users", included: true },\n      { feature: "Basic features", included: true },\n      { feature: "Community support", included: true },\n    ],\n    link: { label: "Get started free", href: "/sign-up", variant: "outline" },\n  },\n  {\n    name: "Pro",\n    price: "$29/mo",\n    description: "For small teams getting started.",\n    featured: true,\n    features: [\n      { feature: "Up to 10 users", included: true },\n      { feature: "Advanced features", included: true },\n      { feature: "Integrations", included: true },\n      { feature: "Priority support", included: true },\n    ],\n    link: { label: "Get Pro", href: "/sign-up", variant: "default" },\n  },\n  {\n    name: "Business",\n    price: "$99/mo",\n    description: "For teams ready to scale.",\n    features: [\n      { feature: "Unlimited users", included: true },\n      { feature: "All features", included: true },\n      { feature: "API access", included: true },\n      { feature: "Dedicated support", included: true },\n    ],\n    link: { label: "Get Business", href: "/sign-up", variant: "outline" },\n  },\n]\n\nexport function PricingTable({\n  heading = "Simple, transparent pricing",\n  subheading = "Start free, upgrade as your team grows. No hidden fees.",\n  plans = defaultPlans,\n}: PricingTableProps) {\n  const displayPlans = plans.length > 0 ? plans : defaultPlans\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        {/* Pricing Cards */}\n        <div className="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto">\n          {displayPlans.map((plan) => (\n            <div\n              key={plan.name}\n              className={cn(\n                "relative rounded-2xl p-6 md:p-8 flex flex-col",\n                plan.featured\n                  ? "bg-primary text-primary-foreground border-2 border-primary"\n                  : "bg-card border border-border"\n              )}\n            >\n              {plan.featured && (\n                <span className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 text-xs font-medium rounded-full bg-background text-foreground">\n                  Most Popular\n                </span>\n              )}\n\n              {/* Plan header */}\n              <div className="mb-6">\n                <h3\n                  className={cn(\n                    "text-lg font-semibold mb-2",\n                    plan.featured ? "text-primary-foreground" : "text-foreground"\n                  )}\n                >\n                  {plan.name}\n                </h3>\n                <div\n                  className={cn(\n                    "text-4xl font-bold mb-2",\n                    plan.featured ? "text-primary-foreground" : "text-foreground"\n                  )}\n                >\n                  {plan.price}\n                </div>\n                <p\n                  className={cn(\n                    "text-sm",\n                    plan.featured ? "text-primary-foreground/80" : "text-muted-foreground"\n                  )}\n                >\n                  {plan.description}\n                </p>\n              </div>\n\n              {/* Features */}\n              <ul className="space-y-3 mb-8 flex-1">\n                {plan.features.map((feature) => (\n                  <li key={feature.feature} className="flex items-center gap-3">\n                    {feature.included ? (\n                      <Check\n                        className={cn(\n                          "h-4 w-4",\n                          plan.featured ? "text-primary-foreground" : "text-primary"\n                        )}\n                      />\n                    ) : (\n                      <X\n                        className={cn(\n                          "h-4 w-4",\n                          plan.featured ? "text-primary-foreground/50" : "text-muted-foreground"\n                        )}\n                      />\n                    )}\n                    <span\n                      className={cn(\n                        "text-sm",\n                        plan.featured\n                          ? feature.included\n                            ? "text-primary-foreground"\n                            : "text-primary-foreground/50"\n                          : feature.included\n                            ? "text-foreground"\n                            : "text-muted-foreground"\n                      )}\n                    >\n                      {feature.feature}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n\n              {/* CTA */}\n              <Link\n                href={plan.link.href}\n                className={cn(\n                  "w-full inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",\n                  plan.featured\n                    ? "bg-background text-foreground hover:bg-background/90"\n                    : plan.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                {plan.link.label}\n              </Link>\n            </div>\n          ))}\n        </div>\n\n        {/* View all link */}\n        <div className="text-center mt-8">\n          <Link\n            href="/pricing"\n            className="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"\n          >\n            View full comparison\n            <span aria-hidden="true">\u2192</span>\n          </Link>\n        </div>\n      </div>\n    </section>\n  )\n}\n',
+  "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/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',
+  "marketing/nextjs/src/lib/utils.ts": 'import { type ClassValue, clsx } from "clsx"\nimport { twMerge } from "tailwind-merge"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n',
   "marketing/nextjs/tsconfig.json.hbs": '{\n  "compilerOptions": {\n    "target": "ES2017",\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    "plugins": [{ "name": "next" }],\n    "paths": {\n      "@/*": ["./src/*"]\n    }\n  },\n  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],\n  "exclude": ["node_modules"]\n}\n',
   "marketing/payload/_env.example.hbs": `# Database (Supabase PostgreSQL)
 DATABASE_URL="postgresql://postgres:[PASSWORD]@db.[PROJECT].supabase.co:5432/postgres"