kofi-stack-template-generator 2.1.54 → 2.1.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/.turbo/turbo-build.log +5 -5
  2. package/dist/index.js +51 -271
  3. package/package.json +2 -2
  4. package/src/templates.generated.ts +10 -10
  5. package/templates/marketing/astro/src/components/Footer.astro +9 -27
  6. package/templates/marketing/astro/src/components/Header.astro +9 -241
  7. package/templates/marketing/astro/src/pages/index.astro +18 -12
  8. package/templates/marketing/astro/src/styles/globals.css.hbs +824 -0
  9. package/templates/marketing/nextjs/src/app/globals.css.hbs +824 -0
  10. package/templates/marketing/nextjs/src/app/page.tsx.hbs +18 -12
  11. package/templates/marketing/nextjs/src/components/Footer/index.tsx +12 -33
  12. package/templates/marketing/nextjs/src/components/Header/MobileMenu.tsx +8 -117
  13. package/templates/marketing/nextjs/src/components/Header/index.tsx +14 -105
package/src/templates.generated.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  // Auto-generated file. Do not edit manually.
2
2
  // Run 'pnpm prebuild' to regenerate.
3
- // Generated: 2026-01-19T16:31:14.621Z
3
+ // Generated: 2026-01-19T16:45:05.925Z
4
4
  // Template count: 389
5
5
 
6
6
  export const EMBEDDED_TEMPLATES: Record<string, string> = {
@@ -46,8 +46,8 @@ export const EMBEDDED_TEMPLATES: Record<string, string> = {
46
46
  "marketing/astro/postcss.config.mjs.hbs": "export default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n",
47
47
  "marketing/astro/public/favicon.svg": "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI2IiBmaWxsPSIjMGEwYTBhIi8+CiAgPHBhdGggZD0iTTE3LjMzIDVMOSAxOC42N2g4TDE2IDI3bDktMTJoLThsMS0xMHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZhZmFmYSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==",
48
48
  "marketing/astro/public/media/hero-bg.png": "cGxhY2Vob2xkZXI=",
49
- "marketing/astro/src/components/Footer.astro": "---\nimport Logo from \"./Logo.astro\"\nimport ThemeSelector from \"./ThemeSelector.astro\"\n\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\nconst currentYear = new Date().getFullYear()\n---\n\n<footer class=\"mt-auto border-t border-border bg-background\">\n <!-- Main Footer Content -->\n <div class=\"container mx-auto px-4 py-12 lg:py-16\">\n <div class=\"grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6\">\n <!-- Link Columns -->\n {footerColumns.map((column) => (\n <div class=\"col-span-1\">\n <h3 class=\"mb-4 text-sm font-medium text-foreground\">\n {column.title}\n </h3>\n <ul class=\"space-y-3\">\n {column.links.map((link) => (\n <li>\n <a\n href={link.href}\n class=\"text-sm text-muted-foreground transition-colors hover:text-foreground\"\n >\n {link.label}\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n\n <!-- Newsletter Column -->\n <div class=\"col-span-2 md:col-span-3 lg:col-span-2\">\n <h3 class=\"mb-4 text-sm font-medium text-foreground\">\n Newsletter\n </h3>\n <p class=\"mb-4 text-sm text-muted-foreground\">\n Get product updates, tips, and insights delivered weekly.\n </p>\n <form class=\"flex gap-2\">\n <input\n type=\"email\"\n placeholder=\"Enter your email\"\n class=\"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 class=\"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 class=\"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 class=\"text-muted-foreground transition-colors hover:text-foreground\"\n aria-label=\"X (Twitter)\"\n >\n <svg class=\"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 </a>\n <a\n href={socialLinks.linkedin}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"text-muted-foreground transition-colors hover:text-foreground\"\n aria-label=\"LinkedIn\"\n >\n <svg class=\"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 </a>\n <a\n href={socialLinks.github}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"text-muted-foreground transition-colors hover:text-foreground\"\n aria-label=\"GitHub\"\n >\n <svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path\n fill-rule=\"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 clip-rule=\"evenodd\"\n />\n </svg>\n </a>\n </div>\n </div>\n\n <!-- Bottom Bar -->\n <div class=\"border-t border-border\">\n <div class=\"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 class=\"flex items-center gap-4\">\n <a href=\"/\" class=\"flex items-center\">\n <Logo class=\"h-6 w-6\" />\n </a>\n <p class=\"text-sm text-muted-foreground\">\n &copy; {currentYear} SaaSify\n </p>\n </div>\n\n <!-- Bottom Links and Theme Selector -->\n <div class=\"flex items-center gap-6\">\n {bottomLinks.map((link) => (\n <a\n href={link.href}\n class=\"text-sm text-muted-foreground transition-colors hover:text-foreground\"\n >\n {link.label}\n </a>\n ))}\n <ThemeSelector />\n </div>\n </div>\n </div>\n</footer>\n",
50
- "marketing/astro/src/components/Header.astro": "---\nimport Logo from \"./Logo.astro\"\nimport { ChevronDown, Menu, X, Layout, BarChart3, Shield, Zap, Layers, Target, Rocket, Settings } from \"lucide-astro\"\n\n// Navigation data structure matching SaaSify\nconst productMenu = {\n label: \"Product\",\n columns: [\n {\n title: \"Core Features\",\n items: [\n { label: \"Integrations\", description: \"Connect with 100+ tools you already use\", href: \"/features/integrations\", icon: \"layout\" },\n { label: \"Analytics\", description: \"Real-time insights and reporting dashboards\", href: \"/features/analytics\", icon: \"barChart\" },\n { label: \"Security\", description: \"Enterprise-grade protection and compliance\", href: \"/features/security\", icon: \"shield\" },\n ],\n },\n {\n title: \"Productivity\",\n items: [\n { label: \"Dashboard\", description: \"Unified command center for your team\", href: \"/features/dashboard\", icon: \"layout\" },\n { label: \"Automation\", description: \"Streamline repetitive tasks instantly\", href: \"/features/automation\", icon: \"zap\" },\n { label: \"Workflows\", description: \"Build custom processes without code\", href: \"/features/workflows\", icon: \"layers\" },\n ],\n },\n ],\n}\n\nconst solutionsMenu = {\n label: \"Solutions\",\n columns: [\n {\n title: \"By Team\",\n items: [\n { label: \"Sales Teams\", description: \"Close deals faster with smart tools\", href: \"/use-cases/sales\", icon: \"target\" },\n { label: \"Marketing Teams\", description: \"Launch campaigns that convert\", href: \"/use-cases/marketing\", icon: \"rocket\" },\n { label: \"Product Teams\", description: \"Ship features users love\", href: \"/use-cases/product\", icon: \"layers\" },\n { label: \"Operations\", description: \"Scale without the growing pains\", href: \"/use-cases/operations\", icon: \"settings\" },\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\" },\n { label: \"Get Started\", href: \"/sign-up\", variant: \"default\" },\n]\n---\n\n<header class=\"sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\n <div class=\"container mx-auto px-4 h-16 flex justify-between items-center\">\n <!-- Left section: Logo + Nav -->\n <div class=\"flex items-center gap-8\">\n <a href=\"/\" class=\"flex items-center gap-2\">\n <Logo />\n <span class=\"text-xl font-semibold hidden sm:inline\">SaaSify</span>\n </a>\n\n <!-- Desktop navigation -->\n <nav class=\"hidden lg:flex items-center gap-1\">\n <!-- Product Menu -->\n <div class=\"mega-menu-trigger relative\" data-menu=\"product\">\n <button\n type=\"button\"\n class=\"flex items-center gap-1 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n {productMenu.label}\n <ChevronDown class=\"h-4 w-4 transition-transform mega-chevron\" />\n </button>\n <div class=\"mega-menu-dropdown absolute left-0 top-full pt-2 opacity-0 -translate-y-2 pointer-events-none transition-all\">\n <div class=\"bg-background border border-border rounded-lg shadow-lg p-6 min-w-[480px]\">\n <div class=\"grid gap-8 grid-cols-2\">\n {productMenu.columns.map((column) => (\n <div>\n <h3 class=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4\">\n {column.title}\n </h3>\n <ul class=\"space-y-1\">\n {column.items.map((item) => (\n <li>\n <a\n href={item.href}\n class=\"flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group\"\n >\n <div class=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background\">\n {item.icon === \"layout\" && <Layout class=\"h-5 w-5 text-primary\" />}\n {item.icon === \"barChart\" && <BarChart3 class=\"h-5 w-5 text-primary\" />}\n {item.icon === \"shield\" && <Shield class=\"h-5 w-5 text-primary\" />}\n {item.icon === \"zap\" && <Zap class=\"h-5 w-5 text-primary\" />}\n {item.icon === \"layers\" && <Layers class=\"h-5 w-5 text-primary\" />}\n </div>\n <div>\n <div class=\"text-sm font-medium text-foreground\">{item.label}</div>\n <div class=\"text-xs text-muted-foreground mt-0.5\">{item.description}</div>\n </div>\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n\n <!-- Solutions Menu -->\n <div class=\"mega-menu-trigger relative\" data-menu=\"solutions\">\n <button\n type=\"button\"\n class=\"flex items-center gap-1 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n {solutionsMenu.label}\n <ChevronDown class=\"h-4 w-4 transition-transform mega-chevron\" />\n </button>\n <div class=\"mega-menu-dropdown absolute left-0 top-full pt-2 opacity-0 -translate-y-2 pointer-events-none transition-all\">\n <div class=\"bg-background border border-border rounded-lg shadow-lg p-6 min-w-[320px]\">\n <div class=\"grid gap-8 grid-cols-1\">\n {solutionsMenu.columns.map((column) => (\n <div>\n <h3 class=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4\">\n {column.title}\n </h3>\n <ul class=\"space-y-1\">\n {column.items.map((item) => (\n <li>\n <a\n href={item.href}\n class=\"flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group\"\n >\n <div class=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background\">\n {item.icon === \"target\" && <Target class=\"h-5 w-5 text-primary\" />}\n {item.icon === \"rocket\" && <Rocket class=\"h-5 w-5 text-primary\" />}\n {item.icon === \"layers\" && <Layers class=\"h-5 w-5 text-primary\" />}\n {item.icon === \"settings\" && <Settings class=\"h-5 w-5 text-primary\" />}\n </div>\n <div>\n <div class=\"text-sm font-medium text-foreground\">{item.label}</div>\n <div class=\"text-xs text-muted-foreground mt-0.5\">{item.description}</div>\n </div>\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n\n {navLinks.map((link) => (\n <a\n href={link.href}\n class=\"px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n {link.label}\n </a>\n ))}\n </nav>\n </div>\n\n <!-- Right section: CTAs -->\n <div class=\"flex items-center gap-3\">\n <!-- Desktop CTAs -->\n <div class=\"hidden lg:flex items-center gap-3\">\n {ctaLinks.map((link) => (\n <a\n href={link.href}\n class:list={[\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 </a>\n ))}\n </div>\n\n <!-- Mobile: Primary CTA + Hamburger -->\n <a\n href=\"/sign-up\"\n class=\"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 </a>\n\n <button\n type=\"button\"\n id=\"mobile-menu-toggle\"\n class=\"lg:hidden p-2 text-muted-foreground hover:text-foreground\"\n aria-label=\"Toggle menu\"\n >\n <Menu class=\"h-6 w-6 menu-open-icon\" />\n <X class=\"h-6 w-6 menu-close-icon hidden\" />\n </button>\n </div>\n </div>\n</header>\n\n<!-- Mobile Menu Overlay -->\n<div id=\"mobile-menu\" class=\"fixed inset-0 top-16 z-50 bg-background hidden lg:hidden\">\n <nav class=\"overflow-y-auto max-h-[calc(100vh-4rem)]\">\n <!-- Product Section -->\n <div class=\"mobile-section border-b border-border\" data-section=\"product\">\n <button\n type=\"button\"\n class=\"flex items-center justify-between w-full px-4 py-3 text-sm font-medium\"\n >\n Product\n <ChevronDown class=\"h-4 w-4 transition-transform section-chevron\" />\n </button>\n <div class=\"mobile-section-content hidden px-4 pb-4 space-y-4\">\n {productMenu.columns.map((column) => (\n <div>\n <h4 class=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2\">\n {column.title}\n </h4>\n <ul class=\"space-y-1\">\n {column.items.map((item) => (\n <li>\n <a href={item.href} class=\"flex items-center gap-3 p-2 rounded-lg hover:bg-muted\">\n {item.icon === \"layout\" && <Layout class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"barChart\" && <BarChart3 class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"shield\" && <Shield class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"zap\" && <Zap class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"layers\" && <Layers class=\"h-4 w-4 text-primary\" />}\n <span class=\"text-sm\">{item.label}</span>\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n\n <!-- Solutions Section -->\n <div class=\"mobile-section border-b border-border\" data-section=\"solutions\">\n <button\n type=\"button\"\n class=\"flex items-center justify-between w-full px-4 py-3 text-sm font-medium\"\n >\n Solutions\n <ChevronDown class=\"h-4 w-4 transition-transform section-chevron\" />\n </button>\n <div class=\"mobile-section-content hidden px-4 pb-4 space-y-4\">\n {solutionsMenu.columns.map((column) => (\n <div>\n <h4 class=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2\">\n {column.title}\n </h4>\n <ul class=\"space-y-1\">\n {column.items.map((item) => (\n <li>\n <a href={item.href} class=\"flex items-center gap-3 p-2 rounded-lg hover:bg-muted\">\n {item.icon === \"target\" && <Target class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"rocket\" && <Rocket class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"layers\" && <Layers class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"settings\" && <Settings class=\"h-4 w-4 text-primary\" />}\n <span class=\"text-sm\">{item.label}</span>\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n\n <!-- Simple nav links -->\n {navLinks.map((link) => (\n <a\n href={link.href}\n class=\"flex items-center px-4 py-3 text-sm font-medium border-b border-border hover:bg-muted\"\n >\n {link.label}\n </a>\n ))}\n\n <!-- CTA links -->\n <div class=\"p-4 space-y-2\">\n {ctaLinks.map((link) => (\n <a\n href={link.href}\n class:list={[\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 >\n {link.label}\n </a>\n ))}\n </div>\n </nav>\n</div>\n\n<script>\n function initHeader() {\n // Desktop mega menu\n const megaMenuTriggers = document.querySelectorAll('.mega-menu-trigger')\n megaMenuTriggers.forEach((trigger) => {\n const dropdown = trigger.querySelector('.mega-menu-dropdown')\n const chevron = trigger.querySelector('.mega-chevron')\n\n trigger.addEventListener('mouseenter', () => {\n dropdown?.classList.remove('opacity-0', '-translate-y-2', 'pointer-events-none')\n dropdown?.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto')\n chevron?.classList.add('rotate-180')\n })\n\n trigger.addEventListener('mouseleave', () => {\n dropdown?.classList.add('opacity-0', '-translate-y-2', 'pointer-events-none')\n dropdown?.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto')\n chevron?.classList.remove('rotate-180')\n })\n })\n\n // Mobile menu toggle\n const mobileToggle = document.getElementById('mobile-menu-toggle')\n const mobileMenu = document.getElementById('mobile-menu')\n const openIcon = mobileToggle?.querySelector('.menu-open-icon')\n const closeIcon = mobileToggle?.querySelector('.menu-close-icon')\n\n mobileToggle?.addEventListener('click', () => {\n const isOpen = !mobileMenu?.classList.contains('hidden')\n if (isOpen) {\n mobileMenu?.classList.add('hidden')\n openIcon?.classList.remove('hidden')\n closeIcon?.classList.add('hidden')\n } else {\n mobileMenu?.classList.remove('hidden')\n openIcon?.classList.add('hidden')\n closeIcon?.classList.remove('hidden')\n }\n })\n\n // Mobile sections toggle\n const mobileSections = document.querySelectorAll('.mobile-section')\n mobileSections.forEach((section) => {\n const button = section.querySelector('button')\n const content = section.querySelector('.mobile-section-content')\n const chevron = section.querySelector('.section-chevron')\n\n button?.addEventListener('click', () => {\n const isOpen = !content?.classList.contains('hidden')\n if (isOpen) {\n content?.classList.add('hidden')\n chevron?.classList.remove('rotate-180')\n } else {\n content?.classList.remove('hidden')\n chevron?.classList.add('rotate-180')\n }\n })\n })\n\n // Close mobile menu on link click\n const mobileLinks = mobileMenu?.querySelectorAll('a')\n mobileLinks?.forEach((link) => {\n link.addEventListener('click', () => {\n mobileMenu?.classList.add('hidden')\n openIcon?.classList.remove('hidden')\n closeIcon?.classList.add('hidden')\n })\n })\n }\n\n initHeader()\n document.addEventListener('astro:after-swap', initHeader)\n</script>\n",
49
+ "marketing/astro/src/components/Footer.astro": "---\nimport Logo from \"./Logo.astro\"\nimport ThemeSelector from \"./ThemeSelector.astro\"\n\n// Footer navigation structure - using anchor links for landing page\nconst footerColumns = [\n {\n title: \"Product\",\n links: [\n { label: \"Home\", href: \"/\" },\n { label: \"Features\", href: \"#features\" },\n { label: \"Pricing\", href: \"#pricing\" },\n ],\n },\n {\n title: \"Resources\",\n links: [\n { label: \"Testimonials\", href: \"#testimonials\" },\n ],\n },\n {\n title: \"Legal\",\n links: [\n { label: \"Privacy\", href: \"#\" },\n { label: \"Terms\", href: \"#\" },\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 currentYear = new Date().getFullYear()\n---\n\n<footer class=\"mt-auto border-t border-border bg-background\">\n <!-- Main Footer Content -->\n <div class=\"container mx-auto px-4 py-12 lg:py-16\">\n <div class=\"grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5\">\n <!-- Link Columns -->\n {footerColumns.map((column) => (\n <div class=\"col-span-1\">\n <h3 class=\"mb-4 text-sm font-medium text-foreground\">\n {column.title}\n </h3>\n <ul class=\"space-y-3\">\n {column.links.map((link) => (\n <li>\n <a\n href={link.href}\n class=\"text-sm text-muted-foreground transition-colors hover:text-foreground\"\n >\n {link.label}\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n\n <!-- Newsletter Column -->\n <div class=\"col-span-2\">\n <h3 class=\"mb-4 text-sm font-medium text-foreground\">\n Newsletter\n </h3>\n <p class=\"mb-4 text-sm text-muted-foreground\">\n Get product updates, tips, and insights delivered weekly.\n </p>\n <form class=\"flex gap-2\">\n <input\n type=\"email\"\n placeholder=\"Enter your email\"\n class=\"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 class=\"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 class=\"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 class=\"text-muted-foreground transition-colors hover:text-foreground\"\n aria-label=\"X (Twitter)\"\n >\n <svg class=\"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 </a>\n <a\n href={socialLinks.linkedin}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"text-muted-foreground transition-colors hover:text-foreground\"\n aria-label=\"LinkedIn\"\n >\n <svg class=\"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 </a>\n <a\n href={socialLinks.github}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"text-muted-foreground transition-colors hover:text-foreground\"\n aria-label=\"GitHub\"\n >\n <svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path\n fill-rule=\"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 clip-rule=\"evenodd\"\n />\n </svg>\n </a>\n </div>\n </div>\n\n <!-- Bottom Bar -->\n <div class=\"border-t border-border\">\n <div class=\"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 class=\"flex items-center gap-4\">\n <a href=\"/\" class=\"flex items-center\">\n <Logo class=\"h-6 w-6\" />\n </a>\n <p class=\"text-sm text-muted-foreground\">\n &copy; {currentYear} SaaSify\n </p>\n </div>\n\n <!-- Theme Selector -->\n <div class=\"flex items-center gap-6\">\n <ThemeSelector />\n </div>\n </div>\n </div>\n</footer>\n",
50
+ "marketing/astro/src/components/Header.astro": "---\nimport Logo from \"./Logo.astro\"\nimport { Menu, X } from \"lucide-astro\"\n\n// Simplified navigation for landing page\nconst navLinks = [\n { label: \"Features\", href: \"#features\" },\n { label: \"Testimonials\", href: \"#testimonials\" },\n { label: \"Pricing\", href: \"#pricing\" },\n]\n\nconst ctaLinks = [\n { label: \"Sign In\", href: \"#\", variant: \"ghost\" },\n { label: \"Get Started\", href: \"#pricing\", variant: \"default\" },\n]\n---\n\n<header class=\"sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\n <div class=\"container mx-auto px-4 h-16 flex justify-between items-center\">\n <!-- Left section: Logo + Nav -->\n <div class=\"flex items-center gap-8\">\n <a href=\"/\" class=\"flex items-center gap-2\">\n <Logo />\n <span class=\"text-xl font-semibold hidden sm:inline\">SaaSify</span>\n </a>\n\n <!-- Desktop navigation -->\n <nav class=\"hidden lg:flex items-center gap-1\">\n {navLinks.map((link) => (\n <a\n href={link.href}\n class=\"px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n {link.label}\n </a>\n ))}\n </nav>\n </div>\n\n <!-- Right section: CTAs -->\n <div class=\"flex items-center gap-3\">\n <!-- Desktop CTAs -->\n <div class=\"hidden lg:flex items-center gap-3\">\n {ctaLinks.map((link) => (\n <a\n href={link.href}\n class:list={[\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 </a>\n ))}\n </div>\n\n <!-- Mobile: Primary CTA + Hamburger -->\n <a\n href=\"#pricing\"\n class=\"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 </a>\n\n <button\n type=\"button\"\n id=\"mobile-menu-toggle\"\n class=\"lg:hidden p-2 text-muted-foreground hover:text-foreground\"\n aria-label=\"Toggle menu\"\n >\n <Menu class=\"h-6 w-6 menu-open-icon\" />\n <X class=\"h-6 w-6 menu-close-icon hidden\" />\n </button>\n </div>\n </div>\n</header>\n\n<!-- Mobile Menu Overlay -->\n<div id=\"mobile-menu\" class=\"fixed inset-0 top-16 z-50 bg-background hidden lg:hidden\">\n <nav class=\"overflow-y-auto max-h-[calc(100vh-4rem)]\">\n <!-- Navigation links -->\n {navLinks.map((link) => (\n <a\n href={link.href}\n class=\"flex items-center px-4 py-3 text-sm font-medium border-b border-border hover:bg-muted\"\n >\n {link.label}\n </a>\n ))}\n\n <!-- CTA links -->\n <div class=\"p-4 space-y-2\">\n {ctaLinks.map((link) => (\n <a\n href={link.href}\n class:list={[\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 >\n {link.label}\n </a>\n ))}\n </div>\n </nav>\n</div>\n\n<script>\n function initHeader() {\n // Mobile menu toggle\n const mobileToggle = document.getElementById('mobile-menu-toggle')\n const mobileMenu = document.getElementById('mobile-menu')\n const openIcon = mobileToggle?.querySelector('.menu-open-icon')\n const closeIcon = mobileToggle?.querySelector('.menu-close-icon')\n\n mobileToggle?.addEventListener('click', () => {\n const isOpen = !mobileMenu?.classList.contains('hidden')\n if (isOpen) {\n mobileMenu?.classList.add('hidden')\n openIcon?.classList.remove('hidden')\n closeIcon?.classList.add('hidden')\n } else {\n mobileMenu?.classList.remove('hidden')\n openIcon?.classList.add('hidden')\n closeIcon?.classList.remove('hidden')\n }\n })\n\n // Close mobile menu on link click\n const mobileLinks = mobileMenu?.querySelectorAll('a')\n mobileLinks?.forEach((link) => {\n link.addEventListener('click', () => {\n mobileMenu?.classList.add('hidden')\n openIcon?.classList.remove('hidden')\n closeIcon?.classList.add('hidden')\n })\n })\n }\n\n initHeader()\n document.addEventListener('astro:after-swap', initHeader)\n</script>\n",
51
51
  "marketing/astro/src/components/Logo.astro": "---\ninterface Props {\n class?: string\n}\n\nconst { class: className } = Astro.props\n---\n\n<div class:list={[\"flex h-8 w-8 items-center justify-center rounded-lg bg-foreground logo-container\", className]}>\n <svg\n class=\"h-5 w-5 text-background\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"></path>\n </svg>\n</div>\n\n<style>\n :global([data-theme=\"dark\"]) .logo-container {\n background-color: white;\n }\n :global([data-theme=\"dark\"]) .logo-container svg {\n color: #0a0a0a;\n }\n</style>\n",
52
52
  "marketing/astro/src/components/ThemeSelector.astro": "---\n---\n\n<div class=\"theme-selector relative\">\n <button\n type=\"button\"\n id=\"theme-toggle\"\n class=\"flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border border-border bg-background hover:bg-muted transition-colors\"\n aria-label=\"Toggle theme\"\n >\n <svg id=\"sun-icon\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"></path>\n </svg>\n <svg id=\"moon-icon\" class=\"h-4 w-4 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"></path>\n </svg>\n <span id=\"theme-label\">Light</span>\n </button>\n</div>\n\n<script>\n function initTheme() {\n const toggle = document.getElementById('theme-toggle')\n const sunIcon = document.getElementById('sun-icon')\n const moonIcon = document.getElementById('moon-icon')\n const label = document.getElementById('theme-label')\n\n function getTheme() {\n if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {\n return localStorage.getItem('theme')\n }\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n }\n\n function setTheme(theme: string) {\n if (theme === 'dark') {\n document.documentElement.setAttribute('data-theme', 'dark')\n sunIcon?.classList.add('hidden')\n moonIcon?.classList.remove('hidden')\n if (label) label.textContent = 'Dark'\n } else {\n document.documentElement.removeAttribute('data-theme')\n sunIcon?.classList.remove('hidden')\n moonIcon?.classList.add('hidden')\n if (label) label.textContent = 'Light'\n }\n localStorage.setItem('theme', theme)\n }\n\n // Set initial theme\n setTheme(getTheme() || 'light')\n\n toggle?.addEventListener('click', () => {\n const current = getTheme()\n setTheme(current === 'dark' ? 'light' : 'dark')\n })\n }\n\n // Run on initial load\n initTheme()\n\n // Re-run on page navigation (for View Transitions)\n document.addEventListener('astro:after-swap', initTheme)\n</script>\n",
53
53
  "marketing/astro/src/components/blocks/BentoFeatures.astro": "---\nimport { Rocket, Zap, Layers, Shield, Globe, Settings, BarChart3 } from \"lucide-astro\"\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 Props {\n heading?: string\n subheading?: string\n features?: Feature[]\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\nconst {\n heading = \"Discover what SaaSify can do\",\n subheading = \"Everything you need to work smarter and scale faster\",\n features = defaultFeatures,\n} = Astro.props\n\nconst displayFeatures = features.length > 0 ? features : defaultFeatures\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 = {\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 descText: \"text-muted-foreground\",\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 descText: \"text-white/80\",\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 descText: \"text-white/80\",\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 descText: \"text-white/80\",\n },\n}\n---\n\n<section class=\"py-16 md:py-24\">\n <div class=\"container mx-auto px-4\">\n <!-- Header -->\n {(heading || subheading) && (\n <div class=\"text-center mb-12 md:mb-16 max-w-3xl mx-auto\">\n {heading && (\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6\">\n {heading}\n </h2>\n )}\n {subheading && (\n <p class=\"text-xl md:text-2xl text-muted-foreground\">{subheading}</p>\n )}\n </div>\n )}\n\n <!-- Bento Grid -->\n <div class=\"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 styleConfig = styleClasses[style] || styleClasses.default\n const gridPosition = gridPositions[index] || \"md:col-span-1 md:row-span-1\"\n\n return (\n <div\n class:list={[\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 {feature.size === \"tall\" && (\n <div class=\"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 class=\"relative z-10 flex flex-col h-full\">\n {/* Icon */}\n {feature.icon && (\n <div class:list={[\"w-10 h-10 md:w-11 md:h-11 rounded-xl flex items-center justify-center mb-auto\", styleConfig.icon]}>\n {feature.icon === \"rocket\" && <Rocket class=\"w-5 h-5\" />}\n {feature.icon === \"zap\" && <Zap class=\"w-5 h-5\" />}\n {feature.icon === \"layers\" && <Layers class=\"w-5 h-5\" />}\n {feature.icon === \"shield\" && <Shield class=\"w-5 h-5\" />}\n {feature.icon === \"globe\" && <Globe class=\"w-5 h-5\" />}\n {feature.icon === \"settings\" && <Settings class=\"w-5 h-5\" />}\n {feature.icon === \"barChart\" && <BarChart3 class=\"w-5 h-5\" />}\n </div>\n )}\n\n {/* Spacer */}\n <div class=\"flex-1 min-h-2\" />\n\n {/* Stat */}\n {feature.stat && (\n <div class:list={[\"font-bold mb-0.5 leading-none text-3xl md:text-4xl\", styleConfig.statText]}>\n {feature.stat}\n </div>\n )}\n\n {/* Title */}\n <h3 class:list={[\"font-semibold mb-1 text-base md:text-lg\", styleConfig.text]}>\n {feature.title}\n </h3>\n\n {/* Description */}\n <p class:list={[\"leading-snug text-xs md:text-sm\", styleConfig.descText]}>\n {feature.description}\n </p>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n</section>\n",
@@ -63,19 +63,19 @@ export const EMBEDDED_TEMPLATES: Record<string, string> = {
63
63
  "marketing/astro/src/components/heros/ProductShowcaseHero.astro": "---\nimport AnimatedMockup from \"./AnimatedMockup.astro\"\n\ninterface HeroLink {\n label: string\n href: string\n variant: \"default\" | \"outline\"\n}\n\ninterface Props {\n headline?: string\n description?: string\n links?: HeroLink[]\n}\n\nconst {\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} = Astro.props\n---\n\n<div class=\"relative overflow-hidden\">\n <!-- Hero Content - Left Aligned -->\n <div class=\"container mx-auto px-4 pt-8 pb-16 md:pt-16 md:pb-24\">\n <div class=\"max-w-2xl\">\n <h1 class=\"text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl\">\n {headline}\n </h1>\n <p class=\"mt-6 text-lg text-muted-foreground md:text-xl\">\n {description}\n </p>\n {links && links.length > 0 && (\n <div class=\"mt-8 flex flex-wrap gap-4\">\n {links.map((link) => (\n <a\n href={link.href}\n class:list={[\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 </a>\n ))}\n </div>\n )}\n </div>\n </div>\n\n <!-- Product Mockup Section -->\n <div class=\"container mx-auto px-4\">\n <div class=\"hero-showcase\">\n <!-- Background Image -->\n <div class=\"hero-bg-image\">\n <img\n src=\"/media/hero-bg.png\"\n alt=\"\"\n class=\"w-full h-full object-cover\"\n />\n </div>\n\n <!-- Mockup - centered within background -->\n <div class=\"hero-mockup-centered\">\n <AnimatedMockup />\n </div>\n </div>\n </div>\n</div>\n\n<style>\n .hero-showcase {\n position: relative;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n border-radius: 1rem;\n overflow: hidden;\n background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n min-height: 400px;\n }\n\n .hero-bg-image {\n position: absolute;\n inset: 0;\n opacity: 0.1;\n }\n\n .hero-mockup-centered {\n position: relative;\n z-index: 10;\n padding: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n @media (min-width: 768px) {\n .hero-showcase {\n min-height: 500px;\n }\n .hero-mockup-centered {\n padding: 3rem;\n }\n }\n</style>\n",
64
64
  "marketing/astro/src/layouts/Layout.astro": "---\nimport \"../styles/globals.css\"\n\ninterface Props {\n title?: string\n description?: string\n}\n\nconst {\n title = \"SaaSify - The modern platform for growing teams\",\n description = \"Transform your workflow with our all-in-one platform. Streamline operations, boost productivity, and scale your business with powerful tools designed for modern teams.\",\n} = Astro.props\n---\n\n<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta name=\"description\" content={description} />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n <title>{title}</title>\n <!-- Prevent flash of wrong theme -->\n <script is:inline>\n (function() {\n const theme = localStorage.getItem('theme') ||\n (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n if (theme === 'dark') {\n document.documentElement.setAttribute('data-theme', 'dark')\n }\n })()\n </script>\n </head>\n <body class=\"min-h-screen bg-background text-foreground antialiased\">\n <slot />\n </body>\n</html>\n",
65
65
  "marketing/astro/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",
66
- "marketing/astro/src/pages/index.astro": "---\nimport Layout from \"../layouts/Layout.astro\"\nimport Header from \"../components/Header.astro\"\nimport Footer from \"../components/Footer.astro\"\nimport ProductShowcaseHero from \"../components/heros/ProductShowcaseHero.astro\"\nimport LogoBanner from \"../components/blocks/LogoBanner.astro\"\nimport ProofBanner from \"../components/blocks/ProofBanner.astro\"\nimport BentoFeatures from \"../components/blocks/BentoFeatures.astro\"\nimport FeatureShowcase from \"../components/blocks/FeatureShowcase.astro\"\nimport IndustryTabs from \"../components/blocks/IndustryTabs.astro\"\nimport TestimonialsGrid from \"../components/blocks/TestimonialsGrid.astro\"\nimport TrustColumns from \"../components/blocks/TrustColumns.astro\"\nimport PricingTable from \"../components/blocks/PricingTable.astro\"\nimport FinalCTA from \"../components/blocks/FinalCTA.astro\"\n---\n\n<Layout>\n <div class=\"min-h-screen flex flex-col\">\n <Header />\n\n <main class=\"flex-1\">\n <!-- Hero Section -->\n <ProductShowcaseHero\n headline=\"The modern platform for growing teams\"\n description=\"Streamline workflows, boost productivity, and scale your business with one powerful platform.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Watch demo\", href: \"/demo\", variant: \"outline\" },\n ]}\n />\n\n <!-- Logo Banner - Social proof -->\n <LogoBanner\n heading=\"Trusted by fast-growing companies everywhere\"\n style=\"scroll\"\n />\n\n <!-- Value Proposition -->\n <ProofBanner\n headline=\"Transform how your team works, collaborates, and grows\"\n subtext=\"Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"outline\" },\n ]}\n />\n\n <!-- Bento Features -->\n <BentoFeatures\n heading=\"Discover what SaaSify can do\"\n subheading=\"Everything you need to work smarter and scale faster\"\n />\n\n <!-- Feature Showcase: Integrations -->\n <FeatureShowcase\n label=\"Seamless Integrations\"\n headline=\"Connect everything your team uses in one place\"\n description=\"Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically.\"\n features={[\n { text: \"100+ native integrations\" },\n { text: \"Two-way data sync\" },\n { text: \"Custom webhooks\" },\n { text: \"API access included\" },\n ]}\n link={{ label: \"Explore integrations\", href: \"/features/integrations\" }}\n imagePosition=\"right\"\n />\n\n <!-- Feature Showcase: Analytics -->\n <FeatureShowcase\n label=\"Actionable Analytics\"\n headline=\"Make decisions backed by real-time data\"\n description=\"Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.\"\n features={[\n { text: \"Real-time dashboards\" },\n { text: \"Custom reports\" },\n { text: \"Team performance metrics\" },\n { text: \"Automated insights\" },\n ]}\n link={{ label: \"Learn about analytics\", href: \"/features/analytics\" }}\n imagePosition=\"left\"\n />\n\n <!-- Feature Showcase: Automation -->\n <FeatureShowcase\n label=\"Workflow Automation\"\n headline=\"Eliminate busywork with smart automation\"\n description=\"Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.\"\n features={[\n { text: \"Visual workflow builder\" },\n { text: \"Conditional logic\" },\n { text: \"Scheduled triggers\" },\n { text: \"Cross-app automation\" },\n ]}\n link={{ label: \"See automation features\", href: \"/features/automation\" }}\n imagePosition=\"right\"\n />\n\n <!-- Feature Showcase: Collaboration -->\n <FeatureShowcase\n label=\"Team Collaboration\"\n headline=\"Work together seamlessly, from anywhere\"\n description=\"Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team.\"\n features={[\n { text: \"Real-time collaboration\" },\n { text: \"Shared workspaces\" },\n { text: \"Comments and mentions\" },\n { text: \"Activity tracking\" },\n ]}\n link={{ label: \"Explore collaboration\", href: \"/features\" }}\n imagePosition=\"left\"\n />\n\n <!-- Industry Tabs -->\n <IndustryTabs\n heading=\"Solutions that deliver real results\"\n subheading=\"Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.\"\n />\n\n <!-- Testimonials -->\n <TestimonialsGrid\n heading=\"Loved by teams at companies of all sizes\"\n subheading=\"See how leading teams use SaaSify to drive growth and productivity.\"\n />\n\n <!-- Trust Columns -->\n <TrustColumns />\n\n <!-- Second Logo Banner - Integrations -->\n <LogoBanner\n heading=\"Integrates with your favorite tools\"\n style=\"grid\"\n logos={[\n { name: \"Slack\", initials: \"SL\" },\n { name: \"Salesforce\", initials: \"SF\" },\n { name: \"HubSpot\", initials: \"HS\" },\n { name: \"Google Workspace\", initials: \"GW\" },\n { name: \"Zapier\", initials: \"ZP\" },\n { name: \"Jira\", initials: \"JI\" },\n ]}\n />\n\n <!-- Pricing -->\n <PricingTable\n heading=\"Simple, transparent pricing\"\n subheading=\"Start free, upgrade as your team grows. No hidden fees.\"\n />\n\n <!-- Final CTA -->\n <FinalCTA\n headline=\"Ready to transform how your team works?\"\n subheading=\"Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n</Layout>\n",
67
- "marketing/astro/src/styles/globals.css.hbs": "@import \"tailwindcss\";\n\n@theme inline {\n\t--color-background: var(--background);\n\t--color-foreground: var(--foreground);\n\t--color-card: var(--card);\n\t--color-card-foreground: var(--card-foreground);\n\t--color-popover: var(--popover);\n\t--color-popover-foreground: var(--popover-foreground);\n\t--color-primary: var(--primary);\n\t--color-primary-foreground: var(--primary-foreground);\n\t--color-secondary: var(--secondary);\n\t--color-secondary-foreground: var(--secondary-foreground);\n\t--color-muted: var(--muted);\n\t--color-muted-foreground: var(--muted-foreground);\n\t--color-accent: var(--accent);\n\t--color-accent-foreground: var(--accent-foreground);\n\t--color-destructive: var(--destructive);\n\t--color-border: var(--border);\n\t--color-input: var(--input);\n\t--color-ring: var(--ring);\n\t--color-chart-1: var(--chart-1);\n\t--color-chart-2: var(--chart-2);\n\t--color-chart-3: var(--chart-3);\n\t--color-chart-4: var(--chart-4);\n\t--color-chart-5: var(--chart-5);\n\t--radius-sm: calc(var(--radius) - 4px);\n\t--radius-md: calc(var(--radius) - 2px);\n\t--radius-lg: var(--radius);\n\t--radius-xl: calc(var(--radius) + 4px);\n\t--font-sans: system-ui, sans-serif;\n\t--font-mono: monospace;\n}\n\n:root {\n\t--radius: 0.625rem;\n\t--background: oklch(1 0 0);\n\t--foreground: oklch(0.145 0 0);\n\t--card: oklch(1 0 0);\n\t--card-foreground: oklch(0.145 0 0);\n\t--popover: oklch(1 0 0);\n\t--popover-foreground: oklch(0.145 0 0);\n\t--secondary: oklch(0.97 0 0);\n\t--secondary-foreground: oklch(0.205 0 0);\n\t--muted: oklch(0.97 0 0);\n\t--muted-foreground: oklch(0.556 0 0);\n\t--accent: oklch(0.97 0 0);\n\t--accent-foreground: oklch(0.205 0 0);\n\t--destructive: oklch(0.577 0.245 27.325);\n\t--border: oklch(0.922 0 0);\n\t--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.546 0.245 262.881);\n\t--primary-foreground: oklch(0.985 0.002 247.858);\n\t--ring: oklch(0.546 0.245 262.881);\n\t--chart-1: oklch(0.546 0.245 262.881);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.596 0.145 163.225);\n\t--primary-foreground: oklch(0.982 0.018 155.826);\n\t--ring: oklch(0.596 0.145 163.225);\n\t--chart-1: oklch(0.596 0.145 163.225);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.627 0.265 303.9);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.627 0.265 303.9);\n\t--chart-1: oklch(0.627 0.265 303.9);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.637 0.237 25.331);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.637 0.237 25.331);\n\t--chart-1: oklch(0.637 0.237 25.331);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.705 0.191 47.604);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.705 0.191 47.604);\n\t--chart-1: oklch(0.705 0.191 47.604);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.769 0.188 70.08);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.769 0.188 70.08);\n\t--chart-1: oklch(0.769 0.188 70.08);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.715 0.143 215.221);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.715 0.143 215.221);\n\t--chart-1: oklch(0.715 0.143 215.221);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.667 0.295 322.15);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.667 0.295 322.15);\n\t--chart-1: oklch(0.667 0.295 322.15);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.585 0.233 277.117);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.585 0.233 277.117);\n\t--chart-1: oklch(0.585 0.233 277.117);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.768 0.233 130.85);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.768 0.233 130.85);\n\t--chart-1: oklch(0.768 0.233 130.85);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.718 0.202 349.761);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.718 0.202 349.761);\n\t--chart-1: oklch(0.718 0.202 349.761);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.645 0.246 16.439);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.645 0.246 16.439);\n\t--chart-1: oklch(0.645 0.246 16.439);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.685 0.169 237.323);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.685 0.169 237.323);\n\t--chart-1: oklch(0.685 0.169 237.323);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.704 0.14 182.503);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.704 0.14 182.503);\n\t--chart-1: oklch(0.704 0.14 182.503);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.606 0.25 292.717);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.606 0.25 292.717);\n\t--chart-1: oklch(0.606 0.25 292.717);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.795 0.184 86.047);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.795 0.184 86.047);\n\t--chart-1: oklch(0.795 0.184 86.047);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.646 0.222 41.116);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n\t--background: oklch(0.145 0 0);\n\t--foreground: oklch(0.985 0 0);\n\t--card: oklch(0.205 0 0);\n\t--card-foreground: oklch(0.985 0 0);\n\t--popover: oklch(0.269 0 0);\n\t--popover-foreground: oklch(0.985 0 0);\n\t--secondary: oklch(0.269 0 0);\n\t--secondary-foreground: oklch(0.985 0 0);\n\t--muted: oklch(0.269 0 0);\n\t--muted-foreground: oklch(0.708 0 0);\n\t--accent: oklch(0.371 0 0);\n\t--accent-foreground: oklch(0.985 0 0);\n\t--destructive: oklch(0.704 0.191 22.216);\n\t--border: oklch(1 0 0 / 10%);\n\t--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.623 0.214 262.881);\n\t--primary-foreground: oklch(0.273 0.033 256.848);\n\t--ring: oklch(0.623 0.214 262.881);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.714 0.203 305.504);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.714 0.203 305.504);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.704 0.191 22.216);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.704 0.191 22.216);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.792 0.17 52.615);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.792 0.17 52.615);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.828 0.189 84.429);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.828 0.189 84.429);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.789 0.154 211.53);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.789 0.154 211.53);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.765 0.166 160.391);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.765 0.166 160.391);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.74 0.238 322.16);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.74 0.238 322.16);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.673 0.182 276.935);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.673 0.182 276.935);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.841 0.238 128.85);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.841 0.238 128.85);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.775 0.181 349.761);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.775 0.181 349.761);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.712 0.194 13.428);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.712 0.194 13.428);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.756 0.143 232.661);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.756 0.143 232.661);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.777 0.152 181.912);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.777 0.152 181.912);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.702 0.183 293.541);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.702 0.183 293.541);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.852 0.199 91.936);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.852 0.199 91.936);\n{{else}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n{{/if}}\n}\n\n@layer base {\n\t* {\n\t\t@apply border-border outline-ring/50;\n\t}\n\tbody {\n\t\t@apply bg-background text-foreground;\n\t}\n}\n\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n",
66
+ "marketing/astro/src/pages/index.astro": "---\nimport Layout from \"../layouts/Layout.astro\"\nimport Header from \"../components/Header.astro\"\nimport Footer from \"../components/Footer.astro\"\nimport ProductShowcaseHero from \"../components/heros/ProductShowcaseHero.astro\"\nimport LogoBanner from \"../components/blocks/LogoBanner.astro\"\nimport ProofBanner from \"../components/blocks/ProofBanner.astro\"\nimport BentoFeatures from \"../components/blocks/BentoFeatures.astro\"\nimport FeatureShowcase from \"../components/blocks/FeatureShowcase.astro\"\nimport IndustryTabs from \"../components/blocks/IndustryTabs.astro\"\nimport TestimonialsGrid from \"../components/blocks/TestimonialsGrid.astro\"\nimport TrustColumns from \"../components/blocks/TrustColumns.astro\"\nimport PricingTable from \"../components/blocks/PricingTable.astro\"\nimport FinalCTA from \"../components/blocks/FinalCTA.astro\"\n---\n\n<Layout>\n <div class=\"min-h-screen flex flex-col\">\n <Header />\n\n <main class=\"flex-1\">\n <!-- Hero Section -->\n <ProductShowcaseHero\n headline=\"The modern platform for growing teams\"\n description=\"Streamline workflows, boost productivity, and scale your business with one powerful platform.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Watch demo\", href: \"/demo\", variant: \"outline\" },\n ]}\n />\n\n <!-- Logo Banner - Social proof -->\n <LogoBanner\n heading=\"Trusted by fast-growing companies everywhere\"\n style=\"scroll\"\n />\n\n <!-- Value Proposition -->\n <ProofBanner\n headline=\"Transform how your team works, collaborates, and grows\"\n subtext=\"Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"outline\" },\n ]}\n />\n\n <!-- Bento Features -->\n <section id=\"features\">\n <BentoFeatures\n heading=\"Discover what SaaSify can do\"\n subheading=\"Everything you need to work smarter and scale faster\"\n />\n </section>\n\n <!-- Feature Showcase: Integrations -->\n <FeatureShowcase\n label=\"Seamless Integrations\"\n headline=\"Connect everything your team uses in one place\"\n description=\"Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically.\"\n features={[\n { text: \"100+ native integrations\" },\n { text: \"Two-way data sync\" },\n { text: \"Custom webhooks\" },\n { text: \"API access included\" },\n ]}\n link={{ label: \"Explore integrations\", href: \"/features/integrations\" }}\n imagePosition=\"right\"\n />\n\n <!-- Feature Showcase: Analytics -->\n <FeatureShowcase\n label=\"Actionable Analytics\"\n headline=\"Make decisions backed by real-time data\"\n description=\"Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.\"\n features={[\n { text: \"Real-time dashboards\" },\n { text: \"Custom reports\" },\n { text: \"Team performance metrics\" },\n { text: \"Automated insights\" },\n ]}\n link={{ label: \"Learn about analytics\", href: \"/features/analytics\" }}\n imagePosition=\"left\"\n />\n\n <!-- Feature Showcase: Automation -->\n <FeatureShowcase\n label=\"Workflow Automation\"\n headline=\"Eliminate busywork with smart automation\"\n description=\"Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.\"\n features={[\n { text: \"Visual workflow builder\" },\n { text: \"Conditional logic\" },\n { text: \"Scheduled triggers\" },\n { text: \"Cross-app automation\" },\n ]}\n link={{ label: \"See automation features\", href: \"/features/automation\" }}\n imagePosition=\"right\"\n />\n\n <!-- Feature Showcase: Collaboration -->\n <FeatureShowcase\n label=\"Team Collaboration\"\n headline=\"Work together seamlessly, from anywhere\"\n description=\"Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team.\"\n features={[\n { text: \"Real-time collaboration\" },\n { text: \"Shared workspaces\" },\n { text: \"Comments and mentions\" },\n { text: \"Activity tracking\" },\n ]}\n link={{ label: \"Explore collaboration\", href: \"/features\" }}\n imagePosition=\"left\"\n />\n\n <!-- Industry Tabs -->\n <IndustryTabs\n heading=\"Solutions that deliver real results\"\n subheading=\"Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.\"\n />\n\n <!-- Testimonials -->\n <section id=\"testimonials\">\n <TestimonialsGrid\n heading=\"Loved by teams at companies of all sizes\"\n subheading=\"See how leading teams use SaaSify to drive growth and productivity.\"\n />\n </section>\n\n <!-- Trust Columns -->\n <TrustColumns />\n\n <!-- Second Logo Banner - Integrations -->\n <LogoBanner\n heading=\"Integrates with your favorite tools\"\n style=\"grid\"\n logos={[\n { name: \"Slack\", initials: \"SL\" },\n { name: \"Salesforce\", initials: \"SF\" },\n { name: \"HubSpot\", initials: \"HS\" },\n { name: \"Google Workspace\", initials: \"GW\" },\n { name: \"Zapier\", initials: \"ZP\" },\n { name: \"Jira\", initials: \"JI\" },\n ]}\n />\n\n <!-- Pricing -->\n <section id=\"pricing\">\n <PricingTable\n heading=\"Simple, transparent pricing\"\n subheading=\"Start free, upgrade as your team grows. No hidden fees.\"\n />\n </section>\n\n <!-- Final CTA -->\n <FinalCTA\n headline=\"Ready to transform how your team works?\"\n subheading=\"Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n</Layout>\n",
67
+ "marketing/astro/src/styles/globals.css.hbs": "@import \"tailwindcss\";\n\n@theme inline {\n\t--color-background: var(--background);\n\t--color-foreground: var(--foreground);\n\t--color-card: var(--card);\n\t--color-card-foreground: var(--card-foreground);\n\t--color-popover: var(--popover);\n\t--color-popover-foreground: var(--popover-foreground);\n\t--color-primary: var(--primary);\n\t--color-primary-foreground: var(--primary-foreground);\n\t--color-secondary: var(--secondary);\n\t--color-secondary-foreground: var(--secondary-foreground);\n\t--color-muted: var(--muted);\n\t--color-muted-foreground: var(--muted-foreground);\n\t--color-accent: var(--accent);\n\t--color-accent-foreground: var(--accent-foreground);\n\t--color-destructive: var(--destructive);\n\t--color-border: var(--border);\n\t--color-input: var(--input);\n\t--color-ring: var(--ring);\n\t--color-chart-1: var(--chart-1);\n\t--color-chart-2: var(--chart-2);\n\t--color-chart-3: var(--chart-3);\n\t--color-chart-4: var(--chart-4);\n\t--color-chart-5: var(--chart-5);\n\t--radius-sm: calc(var(--radius) - 4px);\n\t--radius-md: calc(var(--radius) - 2px);\n\t--radius-lg: var(--radius);\n\t--radius-xl: calc(var(--radius) + 4px);\n\t--font-sans: system-ui, sans-serif;\n\t--font-mono: monospace;\n}\n\n:root {\n\t--radius: 0.625rem;\n\t--background: oklch(1 0 0);\n\t--foreground: oklch(0.145 0 0);\n\t--card: oklch(1 0 0);\n\t--card-foreground: oklch(0.145 0 0);\n\t--popover: oklch(1 0 0);\n\t--popover-foreground: oklch(0.145 0 0);\n\t--secondary: oklch(0.97 0 0);\n\t--secondary-foreground: oklch(0.205 0 0);\n\t--muted: oklch(0.97 0 0);\n\t--muted-foreground: oklch(0.556 0 0);\n\t--accent: oklch(0.97 0 0);\n\t--accent-foreground: oklch(0.205 0 0);\n\t--destructive: oklch(0.577 0.245 27.325);\n\t--border: oklch(0.922 0 0);\n\t--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.546 0.245 262.881);\n\t--primary-foreground: oklch(0.985 0.002 247.858);\n\t--ring: oklch(0.546 0.245 262.881);\n\t--chart-1: oklch(0.546 0.245 262.881);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.596 0.145 163.225);\n\t--primary-foreground: oklch(0.982 0.018 155.826);\n\t--ring: oklch(0.596 0.145 163.225);\n\t--chart-1: oklch(0.596 0.145 163.225);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.627 0.265 303.9);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.627 0.265 303.9);\n\t--chart-1: oklch(0.627 0.265 303.9);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.637 0.237 25.331);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.637 0.237 25.331);\n\t--chart-1: oklch(0.637 0.237 25.331);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.705 0.191 47.604);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.705 0.191 47.604);\n\t--chart-1: oklch(0.705 0.191 47.604);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.769 0.188 70.08);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.769 0.188 70.08);\n\t--chart-1: oklch(0.769 0.188 70.08);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.715 0.143 215.221);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.715 0.143 215.221);\n\t--chart-1: oklch(0.715 0.143 215.221);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.667 0.295 322.15);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.667 0.295 322.15);\n\t--chart-1: oklch(0.667 0.295 322.15);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.585 0.233 277.117);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.585 0.233 277.117);\n\t--chart-1: oklch(0.585 0.233 277.117);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.768 0.233 130.85);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.768 0.233 130.85);\n\t--chart-1: oklch(0.768 0.233 130.85);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.718 0.202 349.761);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.718 0.202 349.761);\n\t--chart-1: oklch(0.718 0.202 349.761);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.645 0.246 16.439);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.645 0.246 16.439);\n\t--chart-1: oklch(0.645 0.246 16.439);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.685 0.169 237.323);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.685 0.169 237.323);\n\t--chart-1: oklch(0.685 0.169 237.323);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.704 0.14 182.503);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.704 0.14 182.503);\n\t--chart-1: oklch(0.704 0.14 182.503);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.606 0.25 292.717);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.606 0.25 292.717);\n\t--chart-1: oklch(0.606 0.25 292.717);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.795 0.184 86.047);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.795 0.184 86.047);\n\t--chart-1: oklch(0.795 0.184 86.047);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.646 0.222 41.116);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n\t--background: oklch(0.145 0 0);\n\t--foreground: oklch(0.985 0 0);\n\t--card: oklch(0.205 0 0);\n\t--card-foreground: oklch(0.985 0 0);\n\t--popover: oklch(0.269 0 0);\n\t--popover-foreground: oklch(0.985 0 0);\n\t--secondary: oklch(0.269 0 0);\n\t--secondary-foreground: oklch(0.985 0 0);\n\t--muted: oklch(0.269 0 0);\n\t--muted-foreground: oklch(0.708 0 0);\n\t--accent: oklch(0.371 0 0);\n\t--accent-foreground: oklch(0.985 0 0);\n\t--destructive: oklch(0.704 0.191 22.216);\n\t--border: oklch(1 0 0 / 10%);\n\t--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.623 0.214 262.881);\n\t--primary-foreground: oklch(0.273 0.033 256.848);\n\t--ring: oklch(0.623 0.214 262.881);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.714 0.203 305.504);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.714 0.203 305.504);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.704 0.191 22.216);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.704 0.191 22.216);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.792 0.17 52.615);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.792 0.17 52.615);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.828 0.189 84.429);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.828 0.189 84.429);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.789 0.154 211.53);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.789 0.154 211.53);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.765 0.166 160.391);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.765 0.166 160.391);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.74 0.238 322.16);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.74 0.238 322.16);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.673 0.182 276.935);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.673 0.182 276.935);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.841 0.238 128.85);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.841 0.238 128.85);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.775 0.181 349.761);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.775 0.181 349.761);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.712 0.194 13.428);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.712 0.194 13.428);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.756 0.143 232.661);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.756 0.143 232.661);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.777 0.152 181.912);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.777 0.152 181.912);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.702 0.183 293.541);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.702 0.183 293.541);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.852 0.199 91.936);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.852 0.199 91.936);\n{{else}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n{{/if}}\n}\n\n@layer base {\n\t* {\n\t\t@apply border-border outline-ring/50;\n\t}\n\tbody {\n\t\t@apply bg-background text-foreground;\n\t}\n}\n\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n\tfont-size: 2.25rem !important;\n\tline-height: 2.5rem !important;\n\tfont-weight: 700 !important;\n\tletter-spacing: -0.025em !important;\n\tmargin-bottom: 1.5rem !important;\n\tcolor: var(--color-foreground) !important;\n}\n\n.hero-content p {\n\tfont-size: 1.25rem !important;\n\tline-height: 1.75rem !important;\n\tcolor: var(--color-muted-foreground) !important;\n\tmax-width: 42rem;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmargin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n\tcolor: white !important;\n}\n\n.hero-content--dark p {\n\tcolor: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n\t.hero-content h1 {\n\t\tfont-size: 3.75rem !important;\n\t\tline-height: 1 !important;\n\t}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n.hero-content--left p {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tpadding: 3rem;\n\tmin-height: 500px;\n}\n\n@media (min-width: 768px) {\n\t.hero-showcase {\n\t\tmin-height: 600px;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-showcase {\n\t\tmin-height: 700px;\n\t}\n}\n\n.hero-bg-image {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 0;\n}\n\n.hero-bg-image img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center;\n}\n\n.hero-mockup-centered {\n\tposition: relative;\n\tz-index: 10;\n\tmax-width: 800px;\n\tmargin: 0 auto;\n\twidth: 100%;\n}\n\n@media (min-width: 768px) {\n\t.hero-mockup-centered {\n\t\tmax-width: 900px;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-mockup-centered {\n\t\tmax-width: 1000px;\n\t}\n}\n\n.mockup-wrapper {\n\tbackground: var(--color-background);\n\tborder-radius: 12px;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n\toverflow: hidden;\n\tanimation: mockup-entrance 0.8s ease-out;\n\twidth: 100%;\n}\n\n.mockup-wrapper img {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: block;\n}\n\n@keyframes mockup-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(30px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tbackground: var(--color-muted);\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n\tdisplay: flex;\n\tgap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n\tbackground: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n\tbackground: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n\tbackground: #27ca40;\n}\n\n.mockup-chrome-title {\n\tflex: 1;\n\ttext-align: center;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n\twidth: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n\tdisplay: flex;\n\tmin-height: 400px;\n}\n\n.mockup-sidebar {\n\twidth: 220px;\n\tbackground: var(--color-card);\n\tborder-right: 1px solid var(--color-border);\n\tflex-shrink: 0;\n}\n\n.sidebar-header {\n\tpadding: 16px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.logo-icon {\n\twidth: 28px;\n\theight: 28px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tborder-radius: 6px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 700;\n\tfont-size: 14px;\n}\n\n.logo-text {\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n}\n\n.sidebar-nav {\n\tpadding: 8px;\n}\n\n.sidebar-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 10px 12px;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\ttransition: all 0.15s ease;\n\tcursor: pointer;\n}\n\n.sidebar-item:hover {\n\tbackground: var(--color-accent);\n\tcolor: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n\tcolor: var(--color-primary);\n}\n\n.sidebar-icon {\n\tfont-size: 16px;\n}\n\n.sidebar-label {\n\tflex: 1;\n}\n\n.sidebar-badge {\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tfont-size: 11px;\n\tpadding: 2px 6px;\n\tborder-radius: 10px;\n\tfont-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--color-background);\n}\n\n.main-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 16px 20px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.header-title h2 {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0;\n\tcolor: var(--color-foreground);\n}\n\n.header-breadcrumb {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.header-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.action-btn {\n\tpadding: 8px 16px;\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tborder: none;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n}\n\n.action-btn--success {\n\tbackground: #27ca40;\n}\n\n.action-btn--featured {\n\tbackground: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.editor-panel {\n\tflex: 1;\n\tpadding: 20px;\n\tborder-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n\tmargin-bottom: 20px;\n}\n\n.editor-label {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n\tmargin-bottom: 6px;\n}\n\n.editor-input {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.input-text {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-cursor {\n\twidth: 2px;\n\theight: 18px;\n\tbackground: var(--color-primary);\n\tanimation: blink 1s infinite;\n\tmargin-left: 2px;\n}\n\n@keyframes blink {\n\t0%,\n\t50% {\n\t\topacity: 1;\n\t}\n\t51%,\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.editor-select {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.select-arrow {\n\tfont-size: 10px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tmin-height: 80px;\n}\n\n.textarea-text {\n\ttransition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n\tcolor: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n\twidth: 320px;\n\tpadding: 20px;\n\tbackground: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 16px;\n}\n\n.preview-label {\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.preview-url {\n\tfont-size: 11px;\n\tcolor: var(--color-muted-foreground);\n\tfont-family: monospace;\n}\n\n.preview-card {\n\tbackground: var(--color-card);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition: all 0.3s ease;\n}\n\n.preview-badge {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tfont-size: 11px;\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tanimation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n\tfrom {\n\t\ttransform: scale(0);\n\t\topacity: 0;\n\t}\n\tto {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}\n\n.preview-image {\n\theight: 120px;\n\tbackground: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 40px;\n}\n\n.preview-content {\n\tpadding: 16px;\n}\n\n.preview-category-tag {\n\tdisplay: inline-block;\n\tfont-size: 11px;\n\tcolor: var(--color-primary);\n\tfont-weight: 500;\n\tmargin-bottom: 8px;\n}\n\n.preview-title {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0 0 8px;\n\tcolor: var(--color-foreground);\n}\n\n.preview-description {\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\tline-height: 1.5;\n\tmargin: 0 0 12px;\n}\n\n.preview-meta {\n\tdisplay: flex;\n\tgap: 8px;\n\tfont-size: 12px;\n}\n\n.meta-rating {\n\tcolor: #ffc24a;\n}\n\n.meta-reviews {\n\tcolor: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 24px;\n\tpadding: 16px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.indicator {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: 6px 12px;\n\tborder-radius: 20px;\n\ttransition: all 0.2s ease;\n}\n\n.indicator:hover {\n\tbackground: var(--color-accent);\n}\n\n.indicator--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: var(--color-muted-foreground);\n\ttransition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n\tbackground: var(--color-primary);\n\tbox-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n\tcolor: var(--color-foreground);\n\tfont-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n\toverflow: hidden;\n\tmask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n\tdisplay: flex;\n\tanimation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n\tanimation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n\t0% {\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n.logo-item {\n\tflex-shrink: 0;\n\tmin-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n\t.mockup-content {\n\t\tflex-direction: column;\n\t}\n\n\t.mockup-sidebar {\n\t\twidth: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.sidebar-nav {\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t}\n\n\t.sidebar-item {\n\t\twhite-space: nowrap;\n\t}\n\n\t.main-split {\n\t\tflex-direction: column;\n\t}\n\n\t.editor-panel {\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.preview-panel {\n\t\twidth: 100%;\n\t}\n\n\t.mockup-indicators {\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\t}\n\n\t.indicator-label {\n\t\tdisplay: none;\n\t}\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n\tanimation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(10px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.feature-showcase-content {\n\tanimation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.stat-number {\n\tanimation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n\ttransition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n\ttransform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n\t0%,\n\t100% {\n\t\ttransform: translateY(0);\n\t}\n\t50% {\n\t\ttransform: translateY(-10px);\n\t}\n}\n\n.cta-decorative {\n\tanimation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.feature-card {\n\tanimation: card-entrance 0.4s ease-out;\n\tanimation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n\tanimation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n\tanimation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n\tanimation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n\tanimation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n\tanimation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n\tanimation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n\tscroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.cta-button::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tbackground: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n\topacity: 0;\n\ttransition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n\topacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n",
68
68
  "marketing/astro/tsconfig.json.hbs": "{\n \"extends\": \"astro/tsconfigs/strict\",\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"src/**/*\", \".astro/types.d.ts\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n",
69
69
  "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",
70
70
  "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",
71
71
  "marketing/nextjs/postcss.config.mjs.hbs": "export default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n",
72
- "marketing/nextjs/src/app/globals.css.hbs": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n\t/* Colors */\n\t--color-background: var(--background);\n\t--color-foreground: var(--foreground);\n\n\t--color-card: var(--card);\n\t--color-card-foreground: var(--card-foreground);\n\n\t--color-popover: var(--popover);\n\t--color-popover-foreground: var(--popover-foreground);\n\n\t--color-primary: var(--primary);\n\t--color-primary-foreground: var(--primary-foreground);\n\n\t--color-secondary: var(--secondary);\n\t--color-secondary-foreground: var(--secondary-foreground);\n\n\t--color-muted: var(--muted);\n\t--color-muted-foreground: var(--muted-foreground);\n\n\t--color-accent: var(--accent);\n\t--color-accent-foreground: var(--accent-foreground);\n\n\t--color-destructive: var(--destructive);\n\n\t--color-border: var(--border);\n\t--color-input: var(--input);\n\t--color-ring: var(--ring);\n\n\t--color-chart-1: var(--chart-1);\n\t--color-chart-2: var(--chart-2);\n\t--color-chart-3: var(--chart-3);\n\t--color-chart-4: var(--chart-4);\n\t--color-chart-5: var(--chart-5);\n\n\t/* Border radius */\n\t--radius-sm: calc(var(--radius) - 4px);\n\t--radius-md: calc(var(--radius) - 2px);\n\t--radius-lg: var(--radius);\n\t--radius-xl: calc(var(--radius) + 4px);\n\n\t/* Fonts */\n\t--font-sans: var(--font-geist-sans), system-ui, sans-serif;\n\t--font-mono: var(--font-geist-mono), monospace;\n\n\t/* Container */\n\t--container-sm: 40rem;\n\t--container-md: 48rem;\n\t--container-lg: 64rem;\n\t--container-xl: 80rem;\n\t--container-2xl: 96rem;\n\n\t/* Animations */\n\t--animate-accordion-down: accordion-down 0.2s ease-out;\n\t--animate-accordion-up: accordion-up 0.2s ease-out;\n}\n\n@keyframes accordion-down {\n\tfrom {\n\t\theight: 0;\n\t}\n\tto {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n}\n\n@keyframes accordion-up {\n\tfrom {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n\tto {\n\t\theight: 0;\n\t}\n}\n\n/* ========================================\n THEME COLOR VARIABLES\n ======================================== */\n\n:root {\n\t--radius: 0.625rem;\n\t--background: oklch(1 0 0);\n\t--foreground: oklch(0.145 0 0);\n\t--card: oklch(1 0 0);\n\t--card-foreground: oklch(0.145 0 0);\n\t--popover: oklch(1 0 0);\n\t--popover-foreground: oklch(0.145 0 0);\n\t--secondary: oklch(0.97 0 0);\n\t--secondary-foreground: oklch(0.205 0 0);\n\t--muted: oklch(0.97 0 0);\n\t--muted-foreground: oklch(0.556 0 0);\n\t--accent: oklch(0.97 0 0);\n\t--accent-foreground: oklch(0.205 0 0);\n\t--destructive: oklch(0.577 0.245 27.325);\n\t--border: oklch(0.922 0 0);\n\t--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.546 0.245 262.881);\n\t--primary-foreground: oklch(0.985 0.002 247.858);\n\t--ring: oklch(0.546 0.245 262.881);\n\t--chart-1: oklch(0.546 0.245 262.881);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.596 0.145 163.225);\n\t--primary-foreground: oklch(0.982 0.018 155.826);\n\t--ring: oklch(0.596 0.145 163.225);\n\t--chart-1: oklch(0.596 0.145 163.225);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.627 0.265 303.9);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.627 0.265 303.9);\n\t--chart-1: oklch(0.627 0.265 303.9);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.637 0.237 25.331);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.637 0.237 25.331);\n\t--chart-1: oklch(0.637 0.237 25.331);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.705 0.191 47.604);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.705 0.191 47.604);\n\t--chart-1: oklch(0.705 0.191 47.604);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.769 0.188 70.08);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.769 0.188 70.08);\n\t--chart-1: oklch(0.769 0.188 70.08);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.715 0.143 215.221);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.715 0.143 215.221);\n\t--chart-1: oklch(0.715 0.143 215.221);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.667 0.295 322.15);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.667 0.295 322.15);\n\t--chart-1: oklch(0.667 0.295 322.15);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.585 0.233 277.117);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.585 0.233 277.117);\n\t--chart-1: oklch(0.585 0.233 277.117);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.768 0.233 130.85);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.768 0.233 130.85);\n\t--chart-1: oklch(0.768 0.233 130.85);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.718 0.202 349.761);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.718 0.202 349.761);\n\t--chart-1: oklch(0.718 0.202 349.761);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.645 0.246 16.439);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.645 0.246 16.439);\n\t--chart-1: oklch(0.645 0.246 16.439);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.685 0.169 237.323);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.685 0.169 237.323);\n\t--chart-1: oklch(0.685 0.169 237.323);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.704 0.14 182.503);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.704 0.14 182.503);\n\t--chart-1: oklch(0.704 0.14 182.503);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.606 0.25 292.717);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.606 0.25 292.717);\n\t--chart-1: oklch(0.606 0.25 292.717);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.795 0.184 86.047);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.795 0.184 86.047);\n\t--chart-1: oklch(0.795 0.184 86.047);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.646 0.222 41.116);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n\t--background: oklch(0.145 0 0);\n\t--foreground: oklch(0.985 0 0);\n\t--card: oklch(0.205 0 0);\n\t--card-foreground: oklch(0.985 0 0);\n\t--popover: oklch(0.269 0 0);\n\t--popover-foreground: oklch(0.985 0 0);\n\t--secondary: oklch(0.269 0 0);\n\t--secondary-foreground: oklch(0.985 0 0);\n\t--muted: oklch(0.269 0 0);\n\t--muted-foreground: oklch(0.708 0 0);\n\t--accent: oklch(0.371 0 0);\n\t--accent-foreground: oklch(0.985 0 0);\n\t--destructive: oklch(0.704 0.191 22.216);\n\t--border: oklch(1 0 0 / 10%);\n\t--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.623 0.214 262.881);\n\t--primary-foreground: oklch(0.273 0.033 256.848);\n\t--ring: oklch(0.623 0.214 262.881);\n\t--chart-1: oklch(0.623 0.214 262.881);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.714 0.203 305.504);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.714 0.203 305.504);\n\t--chart-1: oklch(0.714 0.203 305.504);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.704 0.191 22.216);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.704 0.191 22.216);\n\t--chart-1: oklch(0.704 0.191 22.216);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.792 0.17 52.615);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.792 0.17 52.615);\n\t--chart-1: oklch(0.792 0.17 52.615);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.828 0.189 84.429);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.828 0.189 84.429);\n\t--chart-1: oklch(0.828 0.189 84.429);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.789 0.154 211.53);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.789 0.154 211.53);\n\t--chart-1: oklch(0.789 0.154 211.53);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.765 0.166 160.391);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.765 0.166 160.391);\n\t--chart-1: oklch(0.765 0.166 160.391);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.74 0.238 322.16);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.74 0.238 322.16);\n\t--chart-1: oklch(0.74 0.238 322.16);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.673 0.182 276.935);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.673 0.182 276.935);\n\t--chart-1: oklch(0.673 0.182 276.935);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.841 0.238 128.85);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.841 0.238 128.85);\n\t--chart-1: oklch(0.841 0.238 128.85);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.775 0.181 349.761);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.775 0.181 349.761);\n\t--chart-1: oklch(0.775 0.181 349.761);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.712 0.194 13.428);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.712 0.194 13.428);\n\t--chart-1: oklch(0.712 0.194 13.428);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.756 0.143 232.661);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.756 0.143 232.661);\n\t--chart-1: oklch(0.756 0.143 232.661);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.777 0.152 181.912);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.777 0.152 181.912);\n\t--chart-1: oklch(0.777 0.152 181.912);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.702 0.183 293.541);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.702 0.183 293.541);\n\t--chart-1: oklch(0.702 0.183 293.541);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.852 0.199 91.936);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.852 0.199 91.936);\n\t--chart-1: oklch(0.852 0.199 91.936);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n/* ========================================\n BASE STYLES\n ======================================== */\n\n@layer base {\n\t* {\n\t\t@apply border-border outline-ring/50;\n\t}\n\tbody {\n\t\t@apply bg-background text-foreground;\n\t}\n}\n\n/* Container utility */\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n",
72
+ "marketing/nextjs/src/app/globals.css.hbs": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n\t/* Colors */\n\t--color-background: var(--background);\n\t--color-foreground: var(--foreground);\n\n\t--color-card: var(--card);\n\t--color-card-foreground: var(--card-foreground);\n\n\t--color-popover: var(--popover);\n\t--color-popover-foreground: var(--popover-foreground);\n\n\t--color-primary: var(--primary);\n\t--color-primary-foreground: var(--primary-foreground);\n\n\t--color-secondary: var(--secondary);\n\t--color-secondary-foreground: var(--secondary-foreground);\n\n\t--color-muted: var(--muted);\n\t--color-muted-foreground: var(--muted-foreground);\n\n\t--color-accent: var(--accent);\n\t--color-accent-foreground: var(--accent-foreground);\n\n\t--color-destructive: var(--destructive);\n\n\t--color-border: var(--border);\n\t--color-input: var(--input);\n\t--color-ring: var(--ring);\n\n\t--color-chart-1: var(--chart-1);\n\t--color-chart-2: var(--chart-2);\n\t--color-chart-3: var(--chart-3);\n\t--color-chart-4: var(--chart-4);\n\t--color-chart-5: var(--chart-5);\n\n\t/* Border radius */\n\t--radius-sm: calc(var(--radius) - 4px);\n\t--radius-md: calc(var(--radius) - 2px);\n\t--radius-lg: var(--radius);\n\t--radius-xl: calc(var(--radius) + 4px);\n\n\t/* Fonts */\n\t--font-sans: var(--font-geist-sans), system-ui, sans-serif;\n\t--font-mono: var(--font-geist-mono), monospace;\n\n\t/* Container */\n\t--container-sm: 40rem;\n\t--container-md: 48rem;\n\t--container-lg: 64rem;\n\t--container-xl: 80rem;\n\t--container-2xl: 96rem;\n\n\t/* Animations */\n\t--animate-accordion-down: accordion-down 0.2s ease-out;\n\t--animate-accordion-up: accordion-up 0.2s ease-out;\n}\n\n@keyframes accordion-down {\n\tfrom {\n\t\theight: 0;\n\t}\n\tto {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n}\n\n@keyframes accordion-up {\n\tfrom {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n\tto {\n\t\theight: 0;\n\t}\n}\n\n/* ========================================\n THEME COLOR VARIABLES\n ======================================== */\n\n:root {\n\t--radius: 0.625rem;\n\t--background: oklch(1 0 0);\n\t--foreground: oklch(0.145 0 0);\n\t--card: oklch(1 0 0);\n\t--card-foreground: oklch(0.145 0 0);\n\t--popover: oklch(1 0 0);\n\t--popover-foreground: oklch(0.145 0 0);\n\t--secondary: oklch(0.97 0 0);\n\t--secondary-foreground: oklch(0.205 0 0);\n\t--muted: oklch(0.97 0 0);\n\t--muted-foreground: oklch(0.556 0 0);\n\t--accent: oklch(0.97 0 0);\n\t--accent-foreground: oklch(0.205 0 0);\n\t--destructive: oklch(0.577 0.245 27.325);\n\t--border: oklch(0.922 0 0);\n\t--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.546 0.245 262.881);\n\t--primary-foreground: oklch(0.985 0.002 247.858);\n\t--ring: oklch(0.546 0.245 262.881);\n\t--chart-1: oklch(0.546 0.245 262.881);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.596 0.145 163.225);\n\t--primary-foreground: oklch(0.982 0.018 155.826);\n\t--ring: oklch(0.596 0.145 163.225);\n\t--chart-1: oklch(0.596 0.145 163.225);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.627 0.265 303.9);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.627 0.265 303.9);\n\t--chart-1: oklch(0.627 0.265 303.9);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.637 0.237 25.331);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.637 0.237 25.331);\n\t--chart-1: oklch(0.637 0.237 25.331);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.705 0.191 47.604);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.705 0.191 47.604);\n\t--chart-1: oklch(0.705 0.191 47.604);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.769 0.188 70.08);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.769 0.188 70.08);\n\t--chart-1: oklch(0.769 0.188 70.08);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.715 0.143 215.221);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.715 0.143 215.221);\n\t--chart-1: oklch(0.715 0.143 215.221);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.667 0.295 322.15);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.667 0.295 322.15);\n\t--chart-1: oklch(0.667 0.295 322.15);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.585 0.233 277.117);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.585 0.233 277.117);\n\t--chart-1: oklch(0.585 0.233 277.117);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.768 0.233 130.85);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.768 0.233 130.85);\n\t--chart-1: oklch(0.768 0.233 130.85);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.718 0.202 349.761);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.718 0.202 349.761);\n\t--chart-1: oklch(0.718 0.202 349.761);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.645 0.246 16.439);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.645 0.246 16.439);\n\t--chart-1: oklch(0.645 0.246 16.439);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.685 0.169 237.323);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.685 0.169 237.323);\n\t--chart-1: oklch(0.685 0.169 237.323);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.704 0.14 182.503);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.704 0.14 182.503);\n\t--chart-1: oklch(0.704 0.14 182.503);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.606 0.25 292.717);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.606 0.25 292.717);\n\t--chart-1: oklch(0.606 0.25 292.717);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.795 0.184 86.047);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.795 0.184 86.047);\n\t--chart-1: oklch(0.795 0.184 86.047);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.646 0.222 41.116);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n\t--background: oklch(0.145 0 0);\n\t--foreground: oklch(0.985 0 0);\n\t--card: oklch(0.205 0 0);\n\t--card-foreground: oklch(0.985 0 0);\n\t--popover: oklch(0.269 0 0);\n\t--popover-foreground: oklch(0.985 0 0);\n\t--secondary: oklch(0.269 0 0);\n\t--secondary-foreground: oklch(0.985 0 0);\n\t--muted: oklch(0.269 0 0);\n\t--muted-foreground: oklch(0.708 0 0);\n\t--accent: oklch(0.371 0 0);\n\t--accent-foreground: oklch(0.985 0 0);\n\t--destructive: oklch(0.704 0.191 22.216);\n\t--border: oklch(1 0 0 / 10%);\n\t--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.623 0.214 262.881);\n\t--primary-foreground: oklch(0.273 0.033 256.848);\n\t--ring: oklch(0.623 0.214 262.881);\n\t--chart-1: oklch(0.623 0.214 262.881);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.714 0.203 305.504);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.714 0.203 305.504);\n\t--chart-1: oklch(0.714 0.203 305.504);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.704 0.191 22.216);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.704 0.191 22.216);\n\t--chart-1: oklch(0.704 0.191 22.216);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.792 0.17 52.615);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.792 0.17 52.615);\n\t--chart-1: oklch(0.792 0.17 52.615);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.828 0.189 84.429);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.828 0.189 84.429);\n\t--chart-1: oklch(0.828 0.189 84.429);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.789 0.154 211.53);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.789 0.154 211.53);\n\t--chart-1: oklch(0.789 0.154 211.53);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.765 0.166 160.391);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.765 0.166 160.391);\n\t--chart-1: oklch(0.765 0.166 160.391);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.74 0.238 322.16);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.74 0.238 322.16);\n\t--chart-1: oklch(0.74 0.238 322.16);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.673 0.182 276.935);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.673 0.182 276.935);\n\t--chart-1: oklch(0.673 0.182 276.935);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.841 0.238 128.85);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.841 0.238 128.85);\n\t--chart-1: oklch(0.841 0.238 128.85);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.775 0.181 349.761);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.775 0.181 349.761);\n\t--chart-1: oklch(0.775 0.181 349.761);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.712 0.194 13.428);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.712 0.194 13.428);\n\t--chart-1: oklch(0.712 0.194 13.428);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.756 0.143 232.661);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.756 0.143 232.661);\n\t--chart-1: oklch(0.756 0.143 232.661);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.777 0.152 181.912);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.777 0.152 181.912);\n\t--chart-1: oklch(0.777 0.152 181.912);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.702 0.183 293.541);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.702 0.183 293.541);\n\t--chart-1: oklch(0.702 0.183 293.541);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.852 0.199 91.936);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.852 0.199 91.936);\n\t--chart-1: oklch(0.852 0.199 91.936);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n/* ========================================\n BASE STYLES\n ======================================== */\n\n@layer base {\n\t* {\n\t\t@apply border-border outline-ring/50;\n\t}\n\tbody {\n\t\t@apply bg-background text-foreground;\n\t}\n}\n\n/* Container utility */\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n\tfont-size: 2.25rem !important;\n\tline-height: 2.5rem !important;\n\tfont-weight: 700 !important;\n\tletter-spacing: -0.025em !important;\n\tmargin-bottom: 1.5rem !important;\n\tcolor: var(--color-foreground) !important;\n}\n\n.hero-content p {\n\tfont-size: 1.25rem !important;\n\tline-height: 1.75rem !important;\n\tcolor: var(--color-muted-foreground) !important;\n\tmax-width: 42rem;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmargin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n\tcolor: white !important;\n}\n\n.hero-content--dark p {\n\tcolor: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n\t.hero-content h1 {\n\t\tfont-size: 3.75rem !important;\n\t\tline-height: 1 !important;\n\t}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n.hero-content--left p {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tpadding: 3rem;\n\tmin-height: 500px;\n}\n\n@media (min-width: 768px) {\n\t.hero-showcase {\n\t\tmin-height: 600px;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-showcase {\n\t\tmin-height: 700px;\n\t}\n}\n\n.hero-bg-image {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 0;\n}\n\n.hero-bg-image img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center;\n}\n\n.hero-mockup-centered {\n\tposition: relative;\n\tz-index: 10;\n\tmax-width: 800px;\n\tmargin: 0 auto;\n\twidth: 100%;\n}\n\n@media (min-width: 768px) {\n\t.hero-mockup-centered {\n\t\tmax-width: 900px;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-mockup-centered {\n\t\tmax-width: 1000px;\n\t}\n}\n\n.mockup-wrapper {\n\tbackground: var(--color-background);\n\tborder-radius: 12px;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n\toverflow: hidden;\n\tanimation: mockup-entrance 0.8s ease-out;\n\twidth: 100%;\n}\n\n.mockup-wrapper img {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: block;\n}\n\n@keyframes mockup-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(30px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tbackground: var(--color-muted);\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n\tdisplay: flex;\n\tgap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n\tbackground: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n\tbackground: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n\tbackground: #27ca40;\n}\n\n.mockup-chrome-title {\n\tflex: 1;\n\ttext-align: center;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n\twidth: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n\tdisplay: flex;\n\tmin-height: 400px;\n}\n\n.mockup-sidebar {\n\twidth: 220px;\n\tbackground: var(--color-card);\n\tborder-right: 1px solid var(--color-border);\n\tflex-shrink: 0;\n}\n\n.sidebar-header {\n\tpadding: 16px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.logo-icon {\n\twidth: 28px;\n\theight: 28px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tborder-radius: 6px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 700;\n\tfont-size: 14px;\n}\n\n.logo-text {\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n}\n\n.sidebar-nav {\n\tpadding: 8px;\n}\n\n.sidebar-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 10px 12px;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\ttransition: all 0.15s ease;\n\tcursor: pointer;\n}\n\n.sidebar-item:hover {\n\tbackground: var(--color-accent);\n\tcolor: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n\tcolor: var(--color-primary);\n}\n\n.sidebar-icon {\n\tfont-size: 16px;\n}\n\n.sidebar-label {\n\tflex: 1;\n}\n\n.sidebar-badge {\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tfont-size: 11px;\n\tpadding: 2px 6px;\n\tborder-radius: 10px;\n\tfont-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--color-background);\n}\n\n.main-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 16px 20px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.header-title h2 {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0;\n\tcolor: var(--color-foreground);\n}\n\n.header-breadcrumb {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.header-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.action-btn {\n\tpadding: 8px 16px;\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tborder: none;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n}\n\n.action-btn--success {\n\tbackground: #27ca40;\n}\n\n.action-btn--featured {\n\tbackground: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.editor-panel {\n\tflex: 1;\n\tpadding: 20px;\n\tborder-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n\tmargin-bottom: 20px;\n}\n\n.editor-label {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n\tmargin-bottom: 6px;\n}\n\n.editor-input {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.input-text {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-cursor {\n\twidth: 2px;\n\theight: 18px;\n\tbackground: var(--color-primary);\n\tanimation: blink 1s infinite;\n\tmargin-left: 2px;\n}\n\n@keyframes blink {\n\t0%,\n\t50% {\n\t\topacity: 1;\n\t}\n\t51%,\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.editor-select {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.select-arrow {\n\tfont-size: 10px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tmin-height: 80px;\n}\n\n.textarea-text {\n\ttransition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n\tcolor: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n\twidth: 320px;\n\tpadding: 20px;\n\tbackground: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 16px;\n}\n\n.preview-label {\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.preview-url {\n\tfont-size: 11px;\n\tcolor: var(--color-muted-foreground);\n\tfont-family: monospace;\n}\n\n.preview-card {\n\tbackground: var(--color-card);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition: all 0.3s ease;\n}\n\n.preview-badge {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tfont-size: 11px;\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tanimation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n\tfrom {\n\t\ttransform: scale(0);\n\t\topacity: 0;\n\t}\n\tto {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}\n\n.preview-image {\n\theight: 120px;\n\tbackground: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 40px;\n}\n\n.preview-content {\n\tpadding: 16px;\n}\n\n.preview-category-tag {\n\tdisplay: inline-block;\n\tfont-size: 11px;\n\tcolor: var(--color-primary);\n\tfont-weight: 500;\n\tmargin-bottom: 8px;\n}\n\n.preview-title {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0 0 8px;\n\tcolor: var(--color-foreground);\n}\n\n.preview-description {\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\tline-height: 1.5;\n\tmargin: 0 0 12px;\n}\n\n.preview-meta {\n\tdisplay: flex;\n\tgap: 8px;\n\tfont-size: 12px;\n}\n\n.meta-rating {\n\tcolor: #ffc24a;\n}\n\n.meta-reviews {\n\tcolor: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 24px;\n\tpadding: 16px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.indicator {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: 6px 12px;\n\tborder-radius: 20px;\n\ttransition: all 0.2s ease;\n}\n\n.indicator:hover {\n\tbackground: var(--color-accent);\n}\n\n.indicator--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: var(--color-muted-foreground);\n\ttransition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n\tbackground: var(--color-primary);\n\tbox-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n\tcolor: var(--color-foreground);\n\tfont-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n\toverflow: hidden;\n\tmask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n\tdisplay: flex;\n\tanimation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n\tanimation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n\t0% {\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n.logo-item {\n\tflex-shrink: 0;\n\tmin-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n\t.mockup-content {\n\t\tflex-direction: column;\n\t}\n\n\t.mockup-sidebar {\n\t\twidth: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.sidebar-nav {\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t}\n\n\t.sidebar-item {\n\t\twhite-space: nowrap;\n\t}\n\n\t.main-split {\n\t\tflex-direction: column;\n\t}\n\n\t.editor-panel {\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.preview-panel {\n\t\twidth: 100%;\n\t}\n\n\t.mockup-indicators {\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\t}\n\n\t.indicator-label {\n\t\tdisplay: none;\n\t}\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n\tanimation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(10px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.feature-showcase-content {\n\tanimation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.stat-number {\n\tanimation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n\ttransition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n\ttransform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n\t0%,\n\t100% {\n\t\ttransform: translateY(0);\n\t}\n\t50% {\n\t\ttransform: translateY(-10px);\n\t}\n}\n\n.cta-decorative {\n\tanimation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.feature-card {\n\tanimation: card-entrance 0.4s ease-out;\n\tanimation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n\tanimation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n\tanimation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n\tanimation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n\tanimation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n\tanimation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n\tanimation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n\tscroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.cta-button::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tbackground: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n\topacity: 0;\n\ttransition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n\topacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n",
73
73
  "marketing/nextjs/src/app/layout.tsx.hbs": "import type { Metadata } from 'next'\nimport { Geist, Geist_Mono } from 'next/font/google'\nimport { ThemeProvider } from '@/components/ThemeProvider'\nimport './globals.css'\n\nconst geistSans = Geist({\n variable: '--font-geist-sans',\n subsets: ['latin'],\n})\n\nconst geistMono = Geist_Mono({\n variable: '--font-geist-mono',\n subsets: ['latin'],\n})\n\nexport const metadata: Metadata = {\n title: 'SaaSify - The modern platform for growing teams',\n description: 'Transform your workflow with our all-in-one platform. Streamline operations, boost productivity, and scale your business with powerful tools designed for modern teams.',\n keywords: ['SaaS', 'productivity', 'workflow', 'automation', 'team collaboration'],\n openGraph: {\n title: 'SaaSify - The modern platform for growing teams',\n description: 'Transform your workflow with our all-in-one platform.',\n type: 'website',\n },\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <html lang=\"en\" suppressHydrationWarning>\n <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>\n <ThemeProvider\n attribute=\"class\"\n defaultTheme=\"system\"\n enableSystem\n disableTransitionOnChange\n >\n {children}\n </ThemeProvider>\n </body>\n </html>\n )\n}\n",
74
- "marketing/nextjs/src/app/page.tsx.hbs": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport { ProductShowcaseHero } from \"@/components/heros\"\nimport {\n LogoBanner,\n ProofBanner,\n BentoFeatures,\n FeatureShowcase,\n IndustryTabs,\n TestimonialsGrid,\n TrustColumns,\n PricingTable,\n FinalCTA,\n} from \"@/components/blocks\"\n\nexport default function HomePage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero Section */}\n <ProductShowcaseHero\n headline=\"The modern platform for growing teams\"\n description=\"Streamline workflows, boost productivity, and scale your business with one powerful platform.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Watch demo\", href: \"/demo\", variant: \"outline\" },\n ]}\n />\n\n {/* Logo Banner - Social proof */}\n <LogoBanner\n heading=\"Trusted by fast-growing companies everywhere\"\n style=\"scroll\"\n />\n\n {/* Value Proposition */}\n <ProofBanner\n headline=\"Transform how your team works, collaborates, and grows\"\n subtext=\"Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"outline\" },\n ]}\n />\n\n {/* Bento Features */}\n <BentoFeatures\n heading=\"Discover what SaaSify can do\"\n subheading=\"Everything you need to work smarter and scale faster\"\n />\n\n {/* Feature Showcase: Integrations */}\n <FeatureShowcase\n label=\"Seamless Integrations\"\n headline=\"Connect everything your team uses in one place\"\n description=\"Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically.\"\n features={[\n { text: \"100+ native integrations\" },\n { text: \"Two-way data sync\" },\n { text: \"Custom webhooks\" },\n { text: \"API access included\" },\n ]}\n link={{ label: \"Explore integrations\", href: \"/features/integrations\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Analytics */}\n <FeatureShowcase\n label=\"Actionable Analytics\"\n headline=\"Make decisions backed by real-time data\"\n description=\"Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.\"\n features={[\n { text: \"Real-time dashboards\" },\n { text: \"Custom reports\" },\n { text: \"Team performance metrics\" },\n { text: \"Automated insights\" },\n ]}\n link={{ label: \"Learn about analytics\", href: \"/features/analytics\" }}\n imagePosition=\"left\"\n />\n\n {/* Feature Showcase: Automation */}\n <FeatureShowcase\n label=\"Workflow Automation\"\n headline=\"Eliminate busywork with smart automation\"\n description=\"Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.\"\n features={[\n { text: \"Visual workflow builder\" },\n { text: \"Conditional logic\" },\n { text: \"Scheduled triggers\" },\n { text: \"Cross-app automation\" },\n ]}\n link={{ label: \"See automation features\", href: \"/features/automation\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Collaboration */}\n <FeatureShowcase\n label=\"Team Collaboration\"\n headline=\"Work together seamlessly, from anywhere\"\n description=\"Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team.\"\n features={[\n { text: \"Real-time collaboration\" },\n { text: \"Shared workspaces\" },\n { text: \"Comments and mentions\" },\n { text: \"Activity tracking\" },\n ]}\n link={{ label: \"Explore collaboration\", href: \"/features\" }}\n imagePosition=\"left\"\n />\n\n {/* Industry Tabs */}\n <IndustryTabs\n heading=\"Solutions that deliver real results\"\n subheading=\"Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.\"\n />\n\n {/* Testimonials */}\n <TestimonialsGrid\n heading=\"Loved by teams at companies of all sizes\"\n subheading=\"See how leading teams use SaaSify to drive growth and productivity.\"\n />\n\n {/* Trust Columns */}\n <TrustColumns />\n\n {/* Second Logo Banner - Integrations */}\n <LogoBanner\n heading=\"Integrates with your favorite tools\"\n style=\"grid\"\n logos={[\n { name: \"Slack\", initials: \"SL\" },\n { name: \"Salesforce\", initials: \"SF\" },\n { name: \"HubSpot\", initials: \"HS\" },\n { name: \"Google Workspace\", initials: \"GW\" },\n { name: \"Zapier\", initials: \"ZP\" },\n { name: \"Jira\", initials: \"JI\" },\n ]}\n />\n\n {/* Pricing */}\n <PricingTable\n heading=\"Simple, transparent pricing\"\n subheading=\"Start free, upgrade as your team grows. No hidden fees.\"\n />\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to transform how your team works?\"\n subheading=\"Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
75
- "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 © {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",
74
+ "marketing/nextjs/src/app/page.tsx.hbs": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport { ProductShowcaseHero } from \"@/components/heros\"\nimport {\n LogoBanner,\n ProofBanner,\n BentoFeatures,\n FeatureShowcase,\n IndustryTabs,\n TestimonialsGrid,\n TrustColumns,\n PricingTable,\n FinalCTA,\n} from \"@/components/blocks\"\n\nexport default function HomePage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero Section */}\n <ProductShowcaseHero\n headline=\"The modern platform for growing teams\"\n description=\"Streamline workflows, boost productivity, and scale your business with one powerful platform.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Watch demo\", href: \"/demo\", variant: \"outline\" },\n ]}\n />\n\n {/* Logo Banner - Social proof */}\n <LogoBanner\n heading=\"Trusted by fast-growing companies everywhere\"\n style=\"scroll\"\n />\n\n {/* Value Proposition */}\n <ProofBanner\n headline=\"Transform how your team works, collaborates, and grows\"\n subtext=\"Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"outline\" },\n ]}\n />\n\n {/* Bento Features */}\n <section id=\"features\">\n <BentoFeatures\n heading=\"Discover what SaaSify can do\"\n subheading=\"Everything you need to work smarter and scale faster\"\n />\n </section>\n\n {/* Feature Showcase: Integrations */}\n <FeatureShowcase\n label=\"Seamless Integrations\"\n headline=\"Connect everything your team uses in one place\"\n description=\"Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically.\"\n features={[\n { text: \"100+ native integrations\" },\n { text: \"Two-way data sync\" },\n { text: \"Custom webhooks\" },\n { text: \"API access included\" },\n ]}\n link={{ label: \"Explore integrations\", href: \"/features/integrations\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Analytics */}\n <FeatureShowcase\n label=\"Actionable Analytics\"\n headline=\"Make decisions backed by real-time data\"\n description=\"Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.\"\n features={[\n { text: \"Real-time dashboards\" },\n { text: \"Custom reports\" },\n { text: \"Team performance metrics\" },\n { text: \"Automated insights\" },\n ]}\n link={{ label: \"Learn about analytics\", href: \"/features/analytics\" }}\n imagePosition=\"left\"\n />\n\n {/* Feature Showcase: Automation */}\n <FeatureShowcase\n label=\"Workflow Automation\"\n headline=\"Eliminate busywork with smart automation\"\n description=\"Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.\"\n features={[\n { text: \"Visual workflow builder\" },\n { text: \"Conditional logic\" },\n { text: \"Scheduled triggers\" },\n { text: \"Cross-app automation\" },\n ]}\n link={{ label: \"See automation features\", href: \"/features/automation\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Collaboration */}\n <FeatureShowcase\n label=\"Team Collaboration\"\n headline=\"Work together seamlessly, from anywhere\"\n description=\"Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team.\"\n features={[\n { text: \"Real-time collaboration\" },\n { text: \"Shared workspaces\" },\n { text: \"Comments and mentions\" },\n { text: \"Activity tracking\" },\n ]}\n link={{ label: \"Explore collaboration\", href: \"/features\" }}\n imagePosition=\"left\"\n />\n\n {/* Industry Tabs */}\n <IndustryTabs\n heading=\"Solutions that deliver real results\"\n subheading=\"Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.\"\n />\n\n {/* Testimonials */}\n <section id=\"testimonials\">\n <TestimonialsGrid\n heading=\"Loved by teams at companies of all sizes\"\n subheading=\"See how leading teams use SaaSify to drive growth and productivity.\"\n />\n </section>\n\n {/* Trust Columns */}\n <TrustColumns />\n\n {/* Second Logo Banner - Integrations */}\n <LogoBanner\n heading=\"Integrates with your favorite tools\"\n style=\"grid\"\n logos={[\n { name: \"Slack\", initials: \"SL\" },\n { name: \"Salesforce\", initials: \"SF\" },\n { name: \"HubSpot\", initials: \"HS\" },\n { name: \"Google Workspace\", initials: \"GW\" },\n { name: \"Zapier\", initials: \"ZP\" },\n { name: \"Jira\", initials: \"JI\" },\n ]}\n />\n\n {/* Pricing */}\n <section id=\"pricing\">\n <PricingTable\n heading=\"Simple, transparent pricing\"\n subheading=\"Start free, upgrade as your team grows. No hidden fees.\"\n />\n </section>\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to transform how your team works?\"\n subheading=\"Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
75
+ "marketing/nextjs/src/components/Footer/index.tsx": "\"use client\"\n\nimport Link from \"next/link\"\nimport { Logo } from \"@/components/Logo\"\nimport { ThemeSelector } from \"@/components/ThemeSelector\"\n\n// Footer navigation structure - using anchor links for landing page\nconst footerColumns = [\n {\n title: \"Product\",\n links: [\n { label: \"Home\", href: \"/\" },\n { label: \"Features\", href: \"#features\" },\n { label: \"Pricing\", href: \"#pricing\" },\n ],\n },\n {\n title: \"Resources\",\n links: [\n { label: \"Testimonials\", href: \"#testimonials\" },\n ],\n },\n {\n title: \"Legal\",\n links: [\n { label: \"Privacy\", href: \"#\" },\n { label: \"Terms\", href: \"#\" },\n ],\n },\n]\n\nconst socialLinks = {\n twitter: \"https://x.com/saasify\",\n linkedin: \"https://linkedin.com/company/saasify\",\n github: \"https://github.com/saasify\",\n}\n\n// Social icons as inline SVGs\nconst SocialIcons = {\n twitter: (\n <svg className=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n </svg>\n ),\n linkedin: (\n <svg className=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\" />\n </svg>\n ),\n github: (\n <svg className=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path\n fillRule=\"evenodd\"\n d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"\n clipRule=\"evenodd\"\n />\n </svg>\n ),\n}\n\nexport function Footer() {\n const currentYear = new Date().getFullYear()\n\n return (\n <footer className=\"mt-auto border-t border-border bg-background\">\n {/* Main Footer Content */}\n <div className=\"container mx-auto px-4 py-12 lg:py-16\">\n <div className=\"grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5\">\n {/* Link Columns */}\n {footerColumns.map((column) => (\n <div key={column.title} className=\"col-span-1\">\n <h3 className=\"mb-4 text-sm font-medium text-foreground\">\n {column.title}\n </h3>\n <ul className=\"space-y-3\">\n {column.links.map((link) => (\n <li key={link.label}>\n <a\n href={link.href}\n className=\"text-sm text-muted-foreground transition-colors hover:text-foreground\"\n >\n {link.label}\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n\n {/* Newsletter Column */}\n <div className=\"col-span-2\">\n <h3 className=\"mb-4 text-sm font-medium text-foreground\">\n Newsletter\n </h3>\n <p className=\"mb-4 text-sm text-muted-foreground\">\n Get product updates, tips, and insights delivered weekly.\n </p>\n <form className=\"flex gap-2\">\n <input\n type=\"email\"\n placeholder=\"Enter your email\"\n className=\"flex-1 px-3 py-2 text-sm rounded-md border border-input bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n />\n <button\n type=\"submit\"\n className=\"px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90\"\n >\n Subscribe\n </button>\n </form>\n </div>\n </div>\n\n {/* Social Links */}\n <div className=\"mt-10 flex items-center gap-4 border-t border-border pt-8\">\n <a\n href={socialLinks.twitter}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-muted-foreground transition-colors hover:text-foreground\"\n aria-label=\"X (Twitter)\"\n >\n {SocialIcons.twitter}\n </a>\n <a\n href={socialLinks.linkedin}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-muted-foreground transition-colors hover:text-foreground\"\n aria-label=\"LinkedIn\"\n >\n {SocialIcons.linkedin}\n </a>\n <a\n href={socialLinks.github}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-muted-foreground transition-colors hover:text-foreground\"\n aria-label=\"GitHub\"\n >\n {SocialIcons.github}\n </a>\n </div>\n </div>\n\n {/* Bottom Bar */}\n <div className=\"border-t border-border\">\n <div className=\"container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-6 sm:flex-row\">\n {/* Logo and Copyright */}\n <div className=\"flex items-center gap-4\">\n <Link href=\"/\" className=\"flex items-center\">\n <Logo className=\"h-6 w-6\" />\n </Link>\n <p className=\"text-sm text-muted-foreground\">\n © {currentYear} SaaSify\n </p>\n </div>\n\n {/* Theme Selector */}\n <div className=\"flex items-center gap-6\">\n <ThemeSelector />\n </div>\n </div>\n </div>\n </footer>\n )\n}\n",
76
76
  "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",
77
- "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",
78
- "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",
77
+ "marketing/nextjs/src/components/Header/MobileMenu.tsx": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Menu, X } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface MobileMenuProps {\n navLinks: { label: string; href: string }[]\n ctaLinks: { label: string; href: string; variant: \"default\" | \"ghost\" }[]\n}\n\nexport function MobileMenu({ navLinks, ctaLinks }: MobileMenuProps) {\n const [isOpen, setIsOpen] = useState(false)\n\n const handleClose = () => {\n setIsOpen(false)\n }\n\n return (\n <div className=\"lg:hidden\">\n <button\n type=\"button\"\n className=\"p-2 text-muted-foreground hover:text-foreground\"\n onClick={() => setIsOpen(!isOpen)}\n aria-label={isOpen ? \"Close menu\" : \"Open menu\"}\n >\n {isOpen ? <X className=\"h-6 w-6\" /> : <Menu className=\"h-6 w-6\" />}\n </button>\n\n {/* Mobile menu overlay */}\n {isOpen && (\n <div className=\"fixed inset-0 top-16 z-50 bg-background\">\n <nav className=\"overflow-y-auto max-h-[calc(100vh-4rem)]\">\n {/* Navigation links */}\n {navLinks.map((link) => (\n <a\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 </a>\n ))}\n\n {/* CTA links */}\n <div className=\"p-4 space-y-2\">\n {ctaLinks.map((link) => (\n <a\n key={link.label}\n href={link.href}\n className={cn(\n \"flex items-center justify-center w-full px-4 py-3 text-sm font-medium rounded-md transition-colors\",\n link.variant === \"default\"\n ? \"bg-primary text-primary-foreground hover:bg-primary/90\"\n : \"border border-border hover:bg-muted\"\n )}\n onClick={handleClose}\n >\n {link.label}\n </a>\n ))}\n </div>\n </nav>\n </div>\n )}\n </div>\n )\n}\n",
78
+ "marketing/nextjs/src/components/Header/index.tsx": "\"use client\"\n\nimport Link from \"next/link\"\nimport { Logo } from \"@/components/Logo\"\nimport { MobileMenu } from \"./MobileMenu\"\nimport { cn } from \"@/lib/utils\"\n\n// Simplified navigation for landing page\nconst navLinks = [\n { label: \"Features\", href: \"#features\" },\n { label: \"Testimonials\", href: \"#testimonials\" },\n { label: \"Pricing\", href: \"#pricing\" },\n]\n\nconst ctaLinks = [\n { label: \"Sign In\", href: \"#\", variant: \"ghost\" as const },\n { label: \"Get Started\", href: \"#pricing\", variant: \"default\" as const },\n]\n\nexport function Header() {\n return (\n <header className=\"sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\n <div className=\"container mx-auto px-4 h-16 flex justify-between items-center\">\n {/* Left section: Logo + Nav */}\n <div className=\"flex items-center gap-8\">\n <Link href=\"/\" className=\"flex items-center gap-2\">\n <Logo />\n <span className=\"text-xl font-semibold hidden sm:inline\">SaaSify</span>\n </Link>\n\n {/* Desktop navigation */}\n <nav className=\"hidden lg:flex items-center gap-1\">\n {navLinks.map((link) => (\n <a\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 </a>\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 <a\n key={link.label}\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 </a>\n ))}\n </div>\n\n {/* Mobile: Primary CTA + Hamburger */}\n <a\n href=\"#pricing\"\n className=\"lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90\"\n >\n Get Started\n </a>\n\n <MobileMenu\n navLinks={navLinks}\n ctaLinks={ctaLinks}\n />\n </div>\n </div>\n </header>\n )\n}\n",
79
79
  "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",
80
80
  "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",
81
81
  "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",