kofi-stack-template-generator 2.1.52 → 2.1.53

package/dist/index.js

@@ -1191,6 +1191,1561 @@ export function ColorPalette() {
 `,
   "design-system/tsconfig.json.hbs": '{\n  "extends": "@repo/config-typescript/nextjs.json",\n  "compilerOptions": {\n    "baseUrl": ".",\n    "paths": {\n      "@/*": ["./src/*"],\n      "@repo/ui": ["../../packages/ui/src"],\n      "@repo/ui/*": ["../../packages/ui/src/*"]\n    }\n  },\n  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],\n  "exclude": ["node_modules"]\n}\n',
   "integrations/posthog/src/components/providers/posthog-provider.tsx.hbs": "'use client'\n\nimport posthog from 'posthog-js'\nimport { PostHogProvider as PHProvider } from 'posthog-js/react'\nimport { useEffect } from 'react'\n\nexport function PostHogProvider({ children }: { children: React.ReactNode }) {\n  useEffect(() => {\n    const key = process.env.NEXT_PUBLIC_POSTHOG_KEY\n    if (!key) return\n\n    posthog.init(key, {\n      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',\n      person_profiles: 'identified_only',\n      capture_pageview: false, // We capture pageviews manually\n    })\n  }, [])\n\n  return <PHProvider client={posthog}>{children}</PHProvider>\n}\n",
+  "marketing/astro/astro.config.ts.hbs": "import { defineConfig } from 'astro/config'\nimport tailwindcss from '@tailwindcss/postcss'\n\nexport default defineConfig({\n  vite: {\n    css: {\n      postcss: {\n        plugins: [tailwindcss()],\n      },\n    },\n  },\n})\n",
+  "marketing/astro/package.json.hbs": '{\n  "name": "@repo/marketing",\n  "version": "0.1.0",\n  "private": true,\n  "type": "module",\n  "scripts": {\n    "dev": "astro dev --port 3000",\n    "build": "astro build",\n    "preview": "astro preview",\n    "astro": "astro",\n    "lint": "biome check .",\n    "lint:fix": "biome check --write .",\n    "typecheck": "astro check && tsc --noEmit"\n  },\n  "dependencies": {\n    "astro": "^5.1.6",\n    "lucide-astro": "^0.468.0",\n    "clsx": "^2.1.1",\n    "tailwind-merge": "^2.6.0"\n  },\n  "devDependencies": {\n    "@astrojs/check": "^0.9.4",\n    "@astrojs/tailwind": "^6.0.2",\n    "@repo/config-typescript": "workspace:*",\n    "@types/node": "^20.0.0",\n    "tailwindcss": "^4.0.0",\n    "@tailwindcss/postcss": "^4.0.0",\n    "postcss": "^8.4.0",\n    "typescript": "^5.0.0"\n  }\n}\n',
+  "marketing/astro/postcss.config.mjs.hbs": "export default {\n  plugins: {\n    '@tailwindcss/postcss': {},\n  },\n}\n",
+  "marketing/astro/public/favicon.svg": "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI2IiBmaWxsPSIjMGEwYTBhIi8+CiAgPHBhdGggZD0iTTE3LjMzIDVMOSAxOC42N2g4TDE2IDI3bDktMTJoLThsMS0xMHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZhZmFmYSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==",
+  "marketing/astro/public/media/hero-bg.png": "cGxhY2Vob2xkZXI=",
+  "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',
+  "marketing/astro/src/components/Header.astro": `---
+import Logo from "./Logo.astro"
+import { ChevronDown, Menu, X, Layout, BarChart3, Shield, Zap, Layers, Target, Rocket, Settings } from "lucide-astro"
+
+// Navigation data structure matching SaaSify
+const productMenu = {
+  label: "Product",
+  columns: [
+    {
+      title: "Core Features",
+      items: [
+        { label: "Integrations", description: "Connect with 100+ tools you already use", href: "/features/integrations", icon: "layout" },
+        { label: "Analytics", description: "Real-time insights and reporting dashboards", href: "/features/analytics", icon: "barChart" },
+        { label: "Security", description: "Enterprise-grade protection and compliance", href: "/features/security", icon: "shield" },
+      ],
+    },
+    {
+      title: "Productivity",
+      items: [
+        { label: "Dashboard", description: "Unified command center for your team", href: "/features/dashboard", icon: "layout" },
+        { label: "Automation", description: "Streamline repetitive tasks instantly", href: "/features/automation", icon: "zap" },
+        { label: "Workflows", description: "Build custom processes without code", href: "/features/workflows", icon: "layers" },
+      ],
+    },
+  ],
+}
+
+const solutionsMenu = {
+  label: "Solutions",
+  columns: [
+    {
+      title: "By Team",
+      items: [
+        { label: "Sales Teams", description: "Close deals faster with smart tools", href: "/use-cases/sales", icon: "target" },
+        { label: "Marketing Teams", description: "Launch campaigns that convert", href: "/use-cases/marketing", icon: "rocket" },
+        { label: "Product Teams", description: "Ship features users love", href: "/use-cases/product", icon: "layers" },
+        { label: "Operations", description: "Scale without the growing pains", href: "/use-cases/operations", icon: "settings" },
+      ],
+    },
+  ],
+}
+
+const navLinks = [
+  { label: "Pricing", href: "/pricing" },
+  { label: "Blog", href: "/blog" },
+]
+
+const ctaLinks = [
+  { label: "Sign In", href: "/sign-in", variant: "ghost" },
+  { label: "Get Started", href: "/sign-up", variant: "default" },
+]
+---
+
+<header class="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+  <div class="container mx-auto px-4 h-16 flex justify-between items-center">
+    <!-- Left section: Logo + Nav -->
+    <div class="flex items-center gap-8">
+      <a href="/" class="flex items-center gap-2">
+        <Logo />
+        <span class="text-xl font-semibold hidden sm:inline">SaaSify</span>
+      </a>
+
+      <!-- Desktop navigation -->
+      <nav class="hidden lg:flex items-center gap-1">
+        <!-- Product Menu -->
+        <div class="mega-menu-trigger relative" data-menu="product">
+          <button
+            type="button"
+            class="flex items-center gap-1 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {productMenu.label}
+            <ChevronDown class="h-4 w-4 transition-transform mega-chevron" />
+          </button>
+          <div class="mega-menu-dropdown absolute left-0 top-full pt-2 opacity-0 -translate-y-2 pointer-events-none transition-all">
+            <div class="bg-background border border-border rounded-lg shadow-lg p-6 min-w-[480px]">
+              <div class="grid gap-8 grid-cols-2">
+                {productMenu.columns.map((column) => (
+                  <div>
+                    <h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4">
+                      {column.title}
+                    </h3>
+                    <ul class="space-y-1">
+                      {column.items.map((item) => (
+                        <li>
+                          <a
+                            href={item.href}
+                            class="flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group"
+                          >
+                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background">
+                              {item.icon === "layout" && <Layout class="h-5 w-5 text-primary" />}
+                              {item.icon === "barChart" && <BarChart3 class="h-5 w-5 text-primary" />}
+                              {item.icon === "shield" && <Shield class="h-5 w-5 text-primary" />}
+                              {item.icon === "zap" && <Zap class="h-5 w-5 text-primary" />}
+                              {item.icon === "layers" && <Layers class="h-5 w-5 text-primary" />}
+                            </div>
+                            <div>
+                              <div class="text-sm font-medium text-foreground">{item.label}</div>
+                              <div class="text-xs text-muted-foreground mt-0.5">{item.description}</div>
+                            </div>
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Solutions Menu -->
+        <div class="mega-menu-trigger relative" data-menu="solutions">
+          <button
+            type="button"
+            class="flex items-center gap-1 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {solutionsMenu.label}
+            <ChevronDown class="h-4 w-4 transition-transform mega-chevron" />
+          </button>
+          <div class="mega-menu-dropdown absolute left-0 top-full pt-2 opacity-0 -translate-y-2 pointer-events-none transition-all">
+            <div class="bg-background border border-border rounded-lg shadow-lg p-6 min-w-[320px]">
+              <div class="grid gap-8 grid-cols-1">
+                {solutionsMenu.columns.map((column) => (
+                  <div>
+                    <h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4">
+                      {column.title}
+                    </h3>
+                    <ul class="space-y-1">
+                      {column.items.map((item) => (
+                        <li>
+                          <a
+                            href={item.href}
+                            class="flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group"
+                          >
+                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background">
+                              {item.icon === "target" && <Target class="h-5 w-5 text-primary" />}
+                              {item.icon === "rocket" && <Rocket class="h-5 w-5 text-primary" />}
+                              {item.icon === "layers" && <Layers class="h-5 w-5 text-primary" />}
+                              {item.icon === "settings" && <Settings class="h-5 w-5 text-primary" />}
+                            </div>
+                            <div>
+                              <div class="text-sm font-medium text-foreground">{item.label}</div>
+                              <div class="text-xs text-muted-foreground mt-0.5">{item.description}</div>
+                            </div>
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {navLinks.map((link) => (
+          <a
+            href={link.href}
+            class="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {link.label}
+          </a>
+        ))}
+      </nav>
+    </div>
+
+    <!-- Right section: CTAs -->
+    <div class="flex items-center gap-3">
+      <!-- Desktop CTAs -->
+      <div class="hidden lg:flex items-center gap-3">
+        {ctaLinks.map((link) => (
+          <a
+            href={link.href}
+            class:list={[
+              "px-4 py-2 text-sm font-medium rounded-md transition-colors",
+              link.variant === "default"
+                ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                : "text-muted-foreground hover:text-foreground"
+            ]}
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+
+      <!-- Mobile: Primary CTA + Hamburger -->
+      <a
+        href="/sign-up"
+        class="lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"
+      >
+        Get Started
+      </a>
+
+      <button
+        type="button"
+        id="mobile-menu-toggle"
+        class="lg:hidden p-2 text-muted-foreground hover:text-foreground"
+        aria-label="Toggle menu"
+      >
+        <Menu class="h-6 w-6 menu-open-icon" />
+        <X class="h-6 w-6 menu-close-icon hidden" />
+      </button>
+    </div>
+  </div>
+</header>
+
+<!-- Mobile Menu Overlay -->
+<div id="mobile-menu" class="fixed inset-0 top-16 z-50 bg-background hidden lg:hidden">
+  <nav class="overflow-y-auto max-h-[calc(100vh-4rem)]">
+    <!-- Product Section -->
+    <div class="mobile-section border-b border-border" data-section="product">
+      <button
+        type="button"
+        class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium"
+      >
+        Product
+        <ChevronDown class="h-4 w-4 transition-transform section-chevron" />
+      </button>
+      <div class="mobile-section-content hidden px-4 pb-4 space-y-4">
+        {productMenu.columns.map((column) => (
+          <div>
+            <h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+              {column.title}
+            </h4>
+            <ul class="space-y-1">
+              {column.items.map((item) => (
+                <li>
+                  <a href={item.href} class="flex items-center gap-3 p-2 rounded-lg hover:bg-muted">
+                    {item.icon === "layout" && <Layout class="h-4 w-4 text-primary" />}
+                    {item.icon === "barChart" && <BarChart3 class="h-4 w-4 text-primary" />}
+                    {item.icon === "shield" && <Shield class="h-4 w-4 text-primary" />}
+                    {item.icon === "zap" && <Zap class="h-4 w-4 text-primary" />}
+                    {item.icon === "layers" && <Layers class="h-4 w-4 text-primary" />}
+                    <span class="text-sm">{item.label}</span>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <!-- Solutions Section -->
+    <div class="mobile-section border-b border-border" data-section="solutions">
+      <button
+        type="button"
+        class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium"
+      >
+        Solutions
+        <ChevronDown class="h-4 w-4 transition-transform section-chevron" />
+      </button>
+      <div class="mobile-section-content hidden px-4 pb-4 space-y-4">
+        {solutionsMenu.columns.map((column) => (
+          <div>
+            <h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+              {column.title}
+            </h4>
+            <ul class="space-y-1">
+              {column.items.map((item) => (
+                <li>
+                  <a href={item.href} class="flex items-center gap-3 p-2 rounded-lg hover:bg-muted">
+                    {item.icon === "target" && <Target class="h-4 w-4 text-primary" />}
+                    {item.icon === "rocket" && <Rocket class="h-4 w-4 text-primary" />}
+                    {item.icon === "layers" && <Layers class="h-4 w-4 text-primary" />}
+                    {item.icon === "settings" && <Settings class="h-4 w-4 text-primary" />}
+                    <span class="text-sm">{item.label}</span>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <!-- Simple nav links -->
+    {navLinks.map((link) => (
+      <a
+        href={link.href}
+        class="flex items-center px-4 py-3 text-sm font-medium border-b border-border hover:bg-muted"
+      >
+        {link.label}
+      </a>
+    ))}
+
+    <!-- CTA links -->
+    <div class="p-4 space-y-2">
+      {ctaLinks.map((link) => (
+        <a
+          href={link.href}
+          class:list={[
+            "flex items-center justify-center w-full px-4 py-3 text-sm font-medium rounded-md transition-colors",
+            link.variant === "default"
+              ? "bg-primary text-primary-foreground hover:bg-primary/90"
+              : "border border-border hover:bg-muted"
+          ]}
+        >
+          {link.label}
+        </a>
+      ))}
+    </div>
+  </nav>
+</div>
+
+<script>
+  function initHeader() {
+    // Desktop mega menu
+    const megaMenuTriggers = document.querySelectorAll('.mega-menu-trigger')
+    megaMenuTriggers.forEach((trigger) => {
+      const dropdown = trigger.querySelector('.mega-menu-dropdown')
+      const chevron = trigger.querySelector('.mega-chevron')
+
+      trigger.addEventListener('mouseenter', () => {
+        dropdown?.classList.remove('opacity-0', '-translate-y-2', 'pointer-events-none')
+        dropdown?.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto')
+        chevron?.classList.add('rotate-180')
+      })
+
+      trigger.addEventListener('mouseleave', () => {
+        dropdown?.classList.add('opacity-0', '-translate-y-2', 'pointer-events-none')
+        dropdown?.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto')
+        chevron?.classList.remove('rotate-180')
+      })
+    })
+
+    // Mobile menu toggle
+    const mobileToggle = document.getElementById('mobile-menu-toggle')
+    const mobileMenu = document.getElementById('mobile-menu')
+    const openIcon = mobileToggle?.querySelector('.menu-open-icon')
+    const closeIcon = mobileToggle?.querySelector('.menu-close-icon')
+
+    mobileToggle?.addEventListener('click', () => {
+      const isOpen = !mobileMenu?.classList.contains('hidden')
+      if (isOpen) {
+        mobileMenu?.classList.add('hidden')
+        openIcon?.classList.remove('hidden')
+        closeIcon?.classList.add('hidden')
+      } else {
+        mobileMenu?.classList.remove('hidden')
+        openIcon?.classList.add('hidden')
+        closeIcon?.classList.remove('hidden')
+      }
+    })
+
+    // Mobile sections toggle
+    const mobileSections = document.querySelectorAll('.mobile-section')
+    mobileSections.forEach((section) => {
+      const button = section.querySelector('button')
+      const content = section.querySelector('.mobile-section-content')
+      const chevron = section.querySelector('.section-chevron')
+
+      button?.addEventListener('click', () => {
+        const isOpen = !content?.classList.contains('hidden')
+        if (isOpen) {
+          content?.classList.add('hidden')
+          chevron?.classList.remove('rotate-180')
+        } else {
+          content?.classList.remove('hidden')
+          chevron?.classList.add('rotate-180')
+        }
+      })
+    })
+
+    // Close mobile menu on link click
+    const mobileLinks = mobileMenu?.querySelectorAll('a')
+    mobileLinks?.forEach((link) => {
+      link.addEventListener('click', () => {
+        mobileMenu?.classList.add('hidden')
+        openIcon?.classList.remove('hidden')
+        closeIcon?.classList.add('hidden')
+      })
+    })
+  }
+
+  initHeader()
+  document.addEventListener('astro:after-swap', initHeader)
+</script>
+`,
+  "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',
+  "marketing/astro/src/components/ThemeSelector.astro": `---
+---
+
+<div class="theme-selector relative">
+  <button
+    type="button"
+    id="theme-toggle"
+    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"
+    aria-label="Toggle theme"
+  >
+    <svg id="sun-icon" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <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>
+    </svg>
+    <svg id="moon-icon" class="h-4 w-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <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>
+    </svg>
+    <span id="theme-label">Light</span>
+  </button>
+</div>
+
+<script>
+  function initTheme() {
+    const toggle = document.getElementById('theme-toggle')
+    const sunIcon = document.getElementById('sun-icon')
+    const moonIcon = document.getElementById('moon-icon')
+    const label = document.getElementById('theme-label')
+
+    function getTheme() {
+      if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+        return localStorage.getItem('theme')
+      }
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    function setTheme(theme: string) {
+      if (theme === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark')
+        sunIcon?.classList.add('hidden')
+        moonIcon?.classList.remove('hidden')
+        if (label) label.textContent = 'Dark'
+      } else {
+        document.documentElement.removeAttribute('data-theme')
+        sunIcon?.classList.remove('hidden')
+        moonIcon?.classList.add('hidden')
+        if (label) label.textContent = 'Light'
+      }
+      localStorage.setItem('theme', theme)
+    }
+
+    // Set initial theme
+    setTheme(getTheme() || 'light')
+
+    toggle?.addEventListener('click', () => {
+      const current = getTheme()
+      setTheme(current === 'dark' ? 'light' : 'dark')
+    })
+  }
+
+  // Run on initial load
+  initTheme()
+
+  // Re-run on page navigation (for View Transitions)
+  document.addEventListener('astro:after-swap', initTheme)
+</script>
+`,
+  "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',
+  "marketing/astro/src/components/blocks/FeatureShowcase.astro": '---\nimport { Check } from "lucide-astro"\n\ninterface Props {\n  label?: string\n  headline: string\n  description: string\n  features?: { text: string }[]\n  link?: {\n    label: string\n    href: string\n  }\n  imagePosition?: "left" | "right"\n}\n\nconst {\n  label,\n  headline,\n  description,\n  features = [],\n  link,\n  imagePosition = "right",\n} = Astro.props\n---\n\n<section class="py-16 md:py-24">\n  <div class="container mx-auto px-4">\n    <div class:list={[\n      "grid md:grid-cols-2 gap-12 lg:gap-16 items-center",\n      imagePosition === "left" && "md:grid-flow-dense"\n    ]}>\n      <!-- Content -->\n      <div class:list={[imagePosition === "left" && "md:col-start-2"]}>\n        {label && (\n          <span class="inline-block text-sm font-medium text-primary mb-4">\n            {label}\n          </span>\n        )}\n        <h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4">\n          {headline}\n        </h2>\n        <p class="text-lg text-muted-foreground mb-6">\n          {description}\n        </p>\n\n        {features.length > 0 && (\n          <ul class="space-y-3 mb-8">\n            {features.map((feature) => (\n              <li class="flex items-center gap-3">\n                <div class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10">\n                  <Check class="h-3 w-3 text-primary" />\n                </div>\n                <span class="text-sm text-muted-foreground">\n                  {feature.text}\n                </span>\n              </li>\n            ))}\n          </ul>\n        )}\n\n        {link && (\n          <a\n            href={link.href}\n            class="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"\n          >\n            {link.label}\n            <span aria-hidden="true">&rarr;</span>\n          </a>\n        )}\n      </div>\n\n      <!-- Image Placeholder -->\n      <div class:list={[\n        "relative aspect-[4/3] rounded-2xl bg-muted overflow-hidden",\n        imagePosition === "left" && "md:col-start-1 md:row-start-1"\n      ]}>\n        <div class="absolute inset-0 flex items-center justify-center">\n          <div class="text-center">\n            <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-primary/10 flex items-center justify-center">\n              <svg\n                class="w-8 h-8 text-primary"\n                fill="none"\n                stroke="currentColor"\n                viewBox="0 0 24 24"\n              >\n                <path\n                  stroke-linecap="round"\n                  stroke-linejoin="round"\n                  stroke-width="1.5"\n                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"\n                />\n              </svg>\n            </div>\n            <p class="text-sm text-muted-foreground">\n              Feature illustration\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n',
+  "marketing/astro/src/components/blocks/FinalCTA.astro": '---\ninterface FinalCTALink {\n  label: string\n  href: string\n  variant: "default" | "outline"\n}\n\ninterface Props {\n  headline?: string\n  subheading?: string\n  links?: FinalCTALink[]\n  style?: "dark" | "light" | "gradient"\n}\n\nconst {\n  headline = "Ready to transform how your team works?",\n  subheading = "Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow.",\n  links = [\n    { label: "Start free trial", href: "/sign-up", variant: "outline" },\n    { label: "Book a demo", href: "/contact", variant: "default" },\n  ],\n  style = "dark",\n} = Astro.props\n\nconst bgClasses = {\n  dark: "bg-foreground text-background",\n  light: "bg-muted text-foreground",\n  gradient: "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground",\n}\n\nconst buttonClasses = {\n  dark: {\n    default: "bg-background text-foreground hover:bg-background/90",\n    outline: "border border-background/30 text-background hover:bg-background/10",\n  },\n  light: {\n    default: "bg-primary text-primary-foreground hover:bg-primary/90",\n    outline: "border border-border hover:bg-background",\n  },\n  gradient: {\n    default: "bg-background text-foreground hover:bg-background/90",\n    outline: "border border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10",\n  },\n}\n\nconst subtextClasses = {\n  dark: "text-background/80",\n  light: "text-muted-foreground",\n  gradient: "text-primary-foreground/80",\n}\n---\n\n<section class:list={["py-16 md:py-24", bgClasses[style]]}>\n  <div class="container mx-auto px-4">\n    <div class="max-w-3xl mx-auto text-center">\n      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">\n        {headline}\n      </h2>\n      {subheading && (\n        <p class:list={["text-lg md:text-xl mb-8", subtextClasses[style]]}>\n          {subheading}\n        </p>\n      )}\n\n      {links && links.length > 0 && (\n        <div class="flex flex-wrap gap-4 justify-center">\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                buttonClasses[style][link.variant]\n              ]}\n            >\n              {link.label}\n            </a>\n          ))}\n        </div>\n      )}\n    </div>\n  </div>\n</section>\n',
+  "marketing/astro/src/components/blocks/IndustryTabs.astro": `---
+interface Tab {
+  name: string
+  stat: string
+  statLabel: string
+  description: string
+  link?: {
+    label: string
+    href: string
+  }
+}
+
+interface Props {
+  heading?: string
+  subheading?: string
+  tabs?: Tab[]
+}
+
+const defaultTabs: Tab[] = [
+  {
+    name: "Sales Teams",
+    stat: "40%",
+    statLabel: "Faster deal cycles with smart pipeline tools",
+    description: "Close deals faster with intelligent pipeline management, automated follow-ups, and real-time insights that help your team hit quota every quarter.",
+    link: { label: "Solutions for sales", href: "/use-cases/sales" },
+  },
+  {
+    name: "Marketing Teams",
+    stat: "3x",
+    statLabel: "Campaign velocity with streamlined workflows",
+    description: "Launch campaigns that convert with collaborative planning, asset management, and performance analytics all in one place.",
+    link: { label: "Solutions for marketing", href: "/use-cases/marketing" },
+  },
+  {
+    name: "Product Teams",
+    stat: "50%",
+    statLabel: "Faster shipping with better prioritization",
+    description: "Ship features users love with roadmap planning, feedback collection, and release management that keeps everyone aligned.",
+    link: { label: "Solutions for product", href: "/use-cases/product" },
+  },
+  {
+    name: "Operations",
+    stat: "60%",
+    statLabel: "Time saved with process automation",
+    description: "Scale your operations without the chaos. Automate processes, manage resources, and get visibility across your entire organization.",
+    link: { label: "Solutions for ops", href: "/use-cases/operations" },
+  },
+]
+
+const {
+  heading = "Solutions that deliver real results",
+  subheading = "Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.",
+  tabs = defaultTabs,
+} = Astro.props
+
+const displayTabs = tabs.length > 0 ? tabs : defaultTabs
+---
+
+<section class="py-16 md:py-24 bg-muted/30">
+  <div class="container mx-auto px-4">
+    <!-- Header -->
+    {(heading || subheading) && (
+      <div class="text-center mb-12 md:mb-16 max-w-3xl mx-auto">
+        {heading && (
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">
+            {heading}
+          </h2>
+        )}
+        {subheading && (
+          <p class="text-lg md:text-xl text-muted-foreground">
+            {subheading}
+          </p>
+        )}
+      </div>
+    )}
+
+    <!-- Tabs -->
+    <div class="flex flex-wrap justify-center gap-2 mb-12" id="industry-tabs">
+      {displayTabs.map((tab, index) => (
+        <button
+          type="button"
+          data-tab-index={index}
+          class:list={[
+            "industry-tab px-4 py-2 text-sm font-medium rounded-full transition-colors",
+            index === 0
+              ? "bg-primary text-primary-foreground"
+              : "bg-background border border-border hover:bg-muted"
+          ]}
+        >
+          {tab.name}
+        </button>
+      ))}
+    </div>
+
+    <!-- Content -->
+    <div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center max-w-5xl mx-auto">
+      {displayTabs.map((tab, index) => (
+        <div
+          data-tab-content={index}
+          class:list={["tab-content text-center md:text-left", index !== 0 && "hidden"]}
+        >
+          <div class="text-7xl md:text-8xl lg:text-9xl font-bold text-primary mb-2">
+            {tab.stat}
+          </div>
+          <p class="text-xl md:text-2xl font-medium text-foreground">
+            {tab.statLabel}
+          </p>
+        </div>
+      ))}
+
+      {displayTabs.map((tab, index) => (
+        <div
+          data-tab-description={index}
+          class:list={["tab-description", index !== 0 && "hidden"]}
+        >
+          <p class="text-lg text-muted-foreground mb-6">
+            {tab.description}
+          </p>
+          {tab.link && (
+            <a
+              href={tab.link.href}
+              class="inline-flex items-center gap-2 px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              {tab.link.label}
+              <span aria-hidden="true">&rarr;</span>
+            </a>
+          )}
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<script>
+  function initIndustryTabs() {
+    const tabsContainer = document.getElementById('industry-tabs')
+    if (!tabsContainer) return
+
+    const tabs = tabsContainer.querySelectorAll('.industry-tab')
+    const contents = document.querySelectorAll('.tab-content')
+    const descriptions = document.querySelectorAll('.tab-description')
+
+    tabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        const index = tab.getAttribute('data-tab-index')
+
+        // Update tab styles
+        tabs.forEach((t) => {
+          t.classList.remove('bg-primary', 'text-primary-foreground')
+          t.classList.add('bg-background', 'border', 'border-border', 'hover:bg-muted')
+        })
+        tab.classList.add('bg-primary', 'text-primary-foreground')
+        tab.classList.remove('bg-background', 'border', 'border-border', 'hover:bg-muted')
+
+        // Update content visibility
+        contents.forEach((content) => {
+          if (content.getAttribute('data-tab-content') === index) {
+            content.classList.remove('hidden')
+          } else {
+            content.classList.add('hidden')
+          }
+        })
+
+        descriptions.forEach((desc) => {
+          if (desc.getAttribute('data-tab-description') === index) {
+            desc.classList.remove('hidden')
+          } else {
+            desc.classList.add('hidden')
+          }
+        })
+      })
+    })
+  }
+
+  initIndustryTabs()
+  document.addEventListener('astro:after-swap', initIndustryTabs)
+</script>
+`,
+  "marketing/astro/src/components/blocks/LogoBanner.astro": '---\ninterface Logo {\n  name: string\n  initials?: string\n}\n\ninterface Props {\n  heading?: string\n  logos?: Logo[]\n  style?: "scroll" | "grid"\n}\n\nconst defaultLogos: Logo[] = [\n  { name: "TechFlow Inc", initials: "TF" },\n  { name: "Acme Corp", initials: "AC" },\n  { name: "Evergreen HQ", initials: "EH" },\n  { name: "Atlas Network", initials: "AN" },\n  { name: "Beacon Digital", initials: "BD" },\n  { name: "Cascade Systems", initials: "CS" },\n]\n\nconst {\n  heading = "Trusted by fast-growing companies everywhere",\n  logos = defaultLogos,\n  style = "scroll",\n} = Astro.props\n\nconst displayLogos = logos.length > 0 ? logos : defaultLogos\n---\n\n<section class="py-12 md:py-16 border-y border-border/50">\n  <div class="container mx-auto px-4">\n    {heading && (\n      <p class="text-center text-sm text-muted-foreground mb-8 uppercase tracking-wider">\n        {heading}\n      </p>\n    )}\n\n    {style === "scroll" ? (\n      <div class="logo-scroll-container">\n        <div class="logo-scroll-track">\n          {[...displayLogos, ...displayLogos].map((logo, index) => (\n            <div class="logo-item flex items-center justify-center px-6 md:px-8 grayscale hover:grayscale-0 transition-all duration-300">\n              <div class="flex items-center gap-2">\n                <span class="w-8 h-8 rounded bg-muted flex items-center justify-center text-xs font-bold text-foreground">\n                  {logo.initials || logo.name.slice(0, 2).toUpperCase()}\n                </span>\n                <span class="text-sm font-medium text-muted-foreground hidden md:block">\n                  {logo.name}\n                </span>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    ) : (\n      <div class="grid grid-cols-3 md:grid-cols-6 gap-8 items-center justify-items-center">\n        {displayLogos.map((logo) => (\n          <div class="logo-item flex items-center justify-center px-6 md:px-8 grayscale hover:grayscale-0 transition-all duration-300">\n            <div class="flex items-center gap-2">\n              <span class="w-8 h-8 rounded bg-muted flex items-center justify-center text-xs font-bold text-foreground">\n                {logo.initials || logo.name.slice(0, 2).toUpperCase()}\n              </span>\n              <span class="text-sm font-medium text-muted-foreground hidden md:block">\n                {logo.name}\n              </span>\n            </div>\n          </div>\n        ))}\n      </div>\n    )}\n  </div>\n</section>\n\n<style>\n  .logo-scroll-container {\n    overflow: hidden;\n    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n  }\n\n  .logo-scroll-track {\n    display: flex;\n    animation: scroll 30s linear infinite;\n    width: max-content;\n  }\n\n  @keyframes scroll {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(-50%); }\n  }\n\n  .logo-scroll-container:hover .logo-scroll-track {\n    animation-play-state: paused;\n  }\n</style>\n',
+  "marketing/astro/src/components/blocks/PricingTable.astro": '---\nimport { Check, X } from "lucide-astro"\n\ninterface PricingFeature {\n  feature: string\n  included: boolean\n}\n\ninterface PricingPlan {\n  name: string\n  price: string\n  description: string\n  featured?: boolean\n  features: PricingFeature[]\n  link: {\n    label: string\n    href: string\n    variant: "default" | "outline"\n  }\n}\n\ninterface Props {\n  heading?: string\n  subheading?: string\n  plans?: PricingPlan[]\n}\n\nconst defaultPlans: PricingPlan[] = [\n  {\n    name: "Free",\n    price: "$0/mo",\n    description: "Perfect for trying SaaSify.",\n    features: [\n      { feature: "Up to 3 users", included: true },\n      { feature: "Basic features", included: true },\n      { feature: "Community support", included: true },\n    ],\n    link: { label: "Get started free", href: "/sign-up", variant: "outline" },\n  },\n  {\n    name: "Pro",\n    price: "$29/mo",\n    description: "For small teams getting started.",\n    featured: true,\n    features: [\n      { feature: "Up to 10 users", included: true },\n      { feature: "Advanced features", included: true },\n      { feature: "Integrations", included: true },\n      { feature: "Priority support", included: true },\n    ],\n    link: { label: "Get Pro", href: "/sign-up", variant: "default" },\n  },\n  {\n    name: "Business",\n    price: "$99/mo",\n    description: "For teams ready to scale.",\n    features: [\n      { feature: "Unlimited users", included: true },\n      { feature: "All features", included: true },\n      { feature: "API access", included: true },\n      { feature: "Dedicated support", included: true },\n    ],\n    link: { label: "Get Business", href: "/sign-up", variant: "outline" },\n  },\n]\n\nconst {\n  heading = "Simple, transparent pricing",\n  subheading = "Start free, upgrade as your team grows. No hidden fees.",\n  plans = defaultPlans,\n} = Astro.props\n\nconst displayPlans = plans.length > 0 ? plans : defaultPlans\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-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">\n            {heading}\n          </h2>\n        )}\n        {subheading && (\n          <p class="text-lg md:text-xl text-muted-foreground">\n            {subheading}\n          </p>\n        )}\n      </div>\n    )}\n\n    <!-- Pricing Cards -->\n    <div class="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto">\n      {displayPlans.map((plan) => (\n        <div\n          class:list={[\n            "relative rounded-2xl p-6 md:p-8 flex flex-col",\n            plan.featured\n              ? "bg-primary text-primary-foreground border-2 border-primary"\n              : "bg-card border border-border"\n          ]}\n        >\n          {plan.featured && (\n            <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 text-xs font-medium rounded-full bg-background text-foreground">\n              Most Popular\n            </span>\n          )}\n\n          <!-- Plan header -->\n          <div class="mb-6">\n            <h3 class:list={["text-lg font-semibold mb-2", plan.featured ? "text-primary-foreground" : "text-foreground"]}>\n              {plan.name}\n            </h3>\n            <div class:list={["text-4xl font-bold mb-2", plan.featured ? "text-primary-foreground" : "text-foreground"]}>\n              {plan.price}\n            </div>\n            <p class:list={["text-sm", plan.featured ? "text-primary-foreground/80" : "text-muted-foreground"]}>\n              {plan.description}\n            </p>\n          </div>\n\n          <!-- Features -->\n          <ul class="space-y-3 mb-8 flex-1">\n            {plan.features.map((feature) => (\n              <li class="flex items-center gap-3">\n                {feature.included ? (\n                  <Check class:list={["h-4 w-4", plan.featured ? "text-primary-foreground" : "text-primary"]} />\n                ) : (\n                  <X class:list={["h-4 w-4", plan.featured ? "text-primary-foreground/50" : "text-muted-foreground"]} />\n                )}\n                <span\n                  class:list={[\n                    "text-sm",\n                    plan.featured\n                      ? feature.included ? "text-primary-foreground" : "text-primary-foreground/50"\n                      : feature.included ? "text-foreground" : "text-muted-foreground"\n                  ]}\n                >\n                  {feature.feature}\n                </span>\n              </li>\n            ))}\n          </ul>\n\n          <!-- CTA -->\n          <a\n            href={plan.link.href}\n            class:list={[\n              "w-full inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",\n              plan.featured\n                ? "bg-background text-foreground hover:bg-background/90"\n                : plan.link.variant === "default"\n                  ? "bg-primary text-primary-foreground hover:bg-primary/90"\n                  : "border border-border bg-background hover:bg-muted"\n            ]}\n          >\n            {plan.link.label}\n          </a>\n        </div>\n      ))}\n    </div>\n\n    <!-- View all link -->\n    <div class="text-center mt-8">\n      <a\n        href="/pricing"\n        class="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"\n      >\n        View full comparison\n        <span aria-hidden="true">&rarr;</span>\n      </a>\n    </div>\n  </div>\n</section>\n',
+  "marketing/astro/src/components/blocks/ProofBanner.astro": '---\ninterface ProofBannerLink {\n  label: string\n  href: string\n  variant: "default" | "outline"\n}\n\ninterface Props {\n  headline?: string\n  subtext?: string\n  links?: ProofBannerLink[]\n  style?: "centered" | "left"\n}\n\nconst {\n  headline = "Transform how your team works, collaborates, and grows",\n  subtext = "Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint.",\n  links = [\n    { label: "Start free trial", href: "/sign-up", variant: "default" },\n    { label: "Book a demo", href: "/contact", variant: "outline" },\n  ],\n  style = "centered",\n} = Astro.props\n---\n\n<section class="py-16 md:py-24">\n  <div class="container mx-auto px-4">\n    <div class:list={["max-w-4xl", style === "centered" ? "mx-auto text-center" : ""]}>\n      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">\n        {headline}\n      </h2>\n      {subtext && (\n        <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">\n          {subtext}\n        </p>\n      )}\n      {links && links.length > 0 && (\n        <div class:list={["flex flex-wrap gap-4", style === "centered" ? "justify-center" : ""]}>\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</section>\n',
+  "marketing/astro/src/components/blocks/TestimonialsGrid.astro": '---\ninterface Testimonial {\n  stat: string\n  statLabel: string\n  quote: string\n  author: string\n  company: string\n}\n\ninterface Props {\n  heading?: string\n  subheading?: string\n  testimonials?: Testimonial[]\n}\n\nconst defaultTestimonials: Testimonial[] = [\n  {\n    stat: "94%",\n    statLabel: "Faster onboarding",\n    quote: "We got our entire team onboarded in under a day. The intuitive interface and powerful integrations saved us weeks of setup time.",\n    author: "Sarah Chen",\n    company: "TechFlow Inc",\n  },\n  {\n    stat: "3x",\n    statLabel: "Productivity",\n    quote: "Our team is shipping features faster than ever. The automation tools eliminated hours of manual work every week.",\n    author: "Marcus Rivera",\n    company: "Beacon Digital",\n  },\n  {\n    stat: "40%",\n    statLabel: "Cost reduction",\n    quote: "We consolidated five different tools into SaaSify. The ROI was immediate and our team loves having everything in one place.",\n    author: "David Kim",\n    company: "Cascade Systems",\n  },\n]\n\nconst {\n  heading = "Loved by teams at companies of all sizes",\n  subheading = "See how leading teams use SaaSify to drive growth and productivity.",\n  testimonials = defaultTestimonials,\n} = Astro.props\n\nconst displayTestimonials = testimonials.length > 0 ? testimonials : defaultTestimonials\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-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">\n            {heading}\n          </h2>\n        )}\n        {subheading && (\n          <p class="text-lg md:text-xl text-muted-foreground">\n            {subheading}\n          </p>\n        )}\n      </div>\n    )}\n\n    <!-- Testimonials Grid -->\n    <div class="grid md:grid-cols-3 gap-6 lg:gap-8">\n      {displayTestimonials.map((testimonial) => (\n        <div class="relative bg-card border border-border rounded-2xl p-6 md:p-8">\n          <!-- Stat -->\n          <div class="mb-6">\n            <div class="text-4xl md:text-5xl font-bold text-primary mb-1">\n              {testimonial.stat}\n            </div>\n            <p class="text-sm font-medium text-muted-foreground">\n              {testimonial.statLabel}\n            </p>\n          </div>\n\n          <!-- Quote -->\n          <blockquote class="text-foreground mb-6">\n            "{testimonial.quote}"\n          </blockquote>\n\n          <!-- Author -->\n          <div class="flex items-center gap-3">\n            <div class="w-10 h-10 rounded-full bg-muted flex items-center justify-center">\n              <span class="text-sm font-medium">\n                {testimonial.author.split(" ").map((n) => n[0]).join("")}\n              </span>\n            </div>\n            <div>\n              <p class="text-sm font-medium text-foreground">\n                {testimonial.author}\n              </p>\n              <p class="text-sm text-muted-foreground">\n                {testimonial.company}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  </div>\n</section>\n',
+  "marketing/astro/src/components/blocks/TrustColumns.astro": '---\nimport { Zap, Plug, Database, Cloud, Shield, Lock, Award, Globe } from "lucide-astro"\n\ninterface TrustItem {\n  icon: string\n  text: string\n}\n\ninterface TrustColumn {\n  label: string\n  heading: string\n  description: string\n  items: TrustItem[]\n}\n\ninterface Props {\n  columns?: TrustColumn[]\n}\n\nconst defaultColumns: TrustColumn[] = [\n  {\n    label: "Integrations",\n    heading: "Connect anywhere",\n    description: "Plug in and get started immediately with pre-built connectors for every major platform.",\n    items: [\n      { icon: "zap", text: "Go live in minutes" },\n      { icon: "plug", text: "Pre-built connectors" },\n      { icon: "database", text: "Complete data sync" },\n      { icon: "cloud", text: "Cloud-native infrastructure" },\n    ],\n  },\n  {\n    label: "Security & Compliance",\n    heading: "Enterprise-level security",\n    description: "Keep your data safe with encryption, granular access control, and compliance-ready infrastructure.",\n    items: [\n      { icon: "shield", text: "SOC 2 Type II certified" },\n      { icon: "lock", text: "End-to-end encryption" },\n      { icon: "award", text: "Complete audit trails" },\n      { icon: "globe", text: "GDPR compliant" },\n    ],\n  },\n]\n\nconst { columns = defaultColumns } = Astro.props\n\nconst displayColumns = columns.length > 0 ? columns : defaultColumns\n---\n\n<section class="py-16 md:py-24">\n  <div class="container mx-auto px-4">\n    <div class="grid md:grid-cols-2 gap-12 lg:gap-16">\n      {displayColumns.map((column) => (\n        <div>\n          <span class="inline-block text-sm font-medium text-primary mb-4">\n            {column.label}\n          </span>\n          <h2 class="text-2xl md:text-3xl font-bold tracking-tight mb-4">\n            {column.heading}\n          </h2>\n          <p class="text-muted-foreground mb-8">\n            {column.description}\n          </p>\n\n          <ul class="space-y-4">\n            {column.items.map((item) => (\n              <li class="flex items-center gap-3">\n                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">\n                  {item.icon === "zap" && <Zap class="h-4 w-4 text-primary" />}\n                  {item.icon === "plug" && <Plug class="h-4 w-4 text-primary" />}\n                  {item.icon === "database" && <Database class="h-4 w-4 text-primary" />}\n                  {item.icon === "cloud" && <Cloud class="h-4 w-4 text-primary" />}\n                  {item.icon === "shield" && <Shield class="h-4 w-4 text-primary" />}\n                  {item.icon === "lock" && <Lock class="h-4 w-4 text-primary" />}\n                  {item.icon === "award" && <Award class="h-4 w-4 text-primary" />}\n                  {item.icon === "globe" && <Globe class="h-4 w-4 text-primary" />}\n                </div>\n                <span class="text-sm font-medium">\n                  {item.text}\n                </span>\n              </li>\n            ))}\n          </ul>\n        </div>\n      ))}\n    </div>\n  </div>\n</section>\n',
+  "marketing/astro/src/components/heros/AnimatedMockup.astro": `---
+interface MockupState {
+  id: number
+  label: string
+  sidebarActive: string
+  previewTitle: string
+  previewDescription: string
+  previewCategory: string
+  previewStatus: "draft" | "published" | "featured"
+  previewUrl?: string
+}
+
+const mockupStates: MockupState[] = [
+  {
+    id: 1,
+    label: "Setup & styling",
+    sidebarActive: "templates",
+    previewTitle: "Atlas Directory",
+    previewDescription: "Apply your brand, typography, and layout in minutes.",
+    previewCategory: "Design systems",
+    previewStatus: "draft",
+    previewUrl: "atlas.directory/home",
+  },
+  {
+    id: 2,
+    label: "Plans & pricing",
+    sidebarActive: "billing",
+    previewTitle: "Pro Listing Plan",
+    previewDescription: "Recurring billing, featured placements, and add-ons configured.",
+    previewCategory: "Monetization",
+    previewStatus: "draft",
+    previewUrl: "atlas.directory/billing",
+  },
+  {
+    id: 3,
+    label: "SEO & publishing",
+    sidebarActive: "seo",
+    previewTitle: "Atlas Directory",
+    previewDescription: "Schema, sitemap, and custom domain are ready to publish.",
+    previewCategory: "SEO & domains",
+    previewStatus: "published",
+    previewUrl: "atlas.directory/launch",
+  },
+  {
+    id: 4,
+    label: "Payouts live",
+    sidebarActive: "overview",
+    previewTitle: "Atlas Directory",
+    previewDescription: "Subscribers active, payouts scheduled to Stripe, featured slots sold.",
+    previewCategory: "Revenue",
+    previewStatus: "featured",
+    previewUrl: "atlas.directory/analytics",
+  },
+]
+
+const initialState = mockupStates[0]
+---
+
+<div class="mockup-wrapper" id="animated-mockup">
+  <!-- Browser Chrome -->
+  <div class="mockup-chrome">
+    <div class="mockup-chrome-dots">
+      <span class="dot dot-red"></span>
+      <span class="dot dot-yellow"></span>
+      <span class="dot dot-green"></span>
+    </div>
+    <div class="mockup-chrome-title">SaaSify</div>
+    <div class="mockup-chrome-actions"></div>
+  </div>
+
+  <!-- App Content -->
+  <div class="mockup-content">
+    <!-- Sidebar -->
+    <div class="mockup-sidebar">
+      <div class="sidebar-header">
+        <div class="sidebar-logo">
+          <span class="logo-icon">D</span>
+          <span class="logo-text">My Directory</span>
+        </div>
+      </div>
+      <nav class="sidebar-nav">
+        <div class="sidebar-item" data-nav="overview">
+          <span class="sidebar-icon">\u{1F4CA}</span>
+          <span class="sidebar-label">Overview</span>
+        </div>
+        <div class="sidebar-item sidebar-item--active" data-nav="templates">
+          <span class="sidebar-icon">\u{1F5BC}\uFE0F</span>
+          <span class="sidebar-label">Templates</span>
+        </div>
+        <div class="sidebar-item" data-nav="listings">
+          <span class="sidebar-icon">\u{1F4CB}</span>
+          <span class="sidebar-label">Listings</span>
+          <span class="sidebar-badge">24</span>
+        </div>
+        <div class="sidebar-item" data-nav="billing">
+          <span class="sidebar-icon">\u{1F4B3}</span>
+          <span class="sidebar-label">Plans & Billing</span>
+        </div>
+        <div class="sidebar-item" data-nav="automations">
+          <span class="sidebar-icon">\u26A1</span>
+          <span class="sidebar-label">Automations</span>
+        </div>
+        <div class="sidebar-item" data-nav="seo">
+          <span class="sidebar-icon">\u{1F50E}</span>
+          <span class="sidebar-label">SEO</span>
+        </div>
+        <div class="sidebar-item" data-nav="settings">
+          <span class="sidebar-icon">\u2699\uFE0F</span>
+          <span class="sidebar-label">Settings</span>
+        </div>
+      </nav>
+    </div>
+
+    <!-- Main Content Area -->
+    <div class="mockup-main">
+      <!-- Header -->
+      <div class="main-header">
+        <div class="header-title">
+          <h2 id="mockup-label">{initialState.label}</h2>
+          <span class="header-breadcrumb">SaaSify / <span id="mockup-breadcrumb">{initialState.previewTitle}</span></span>
+        </div>
+        <div class="header-actions">
+          <button type="button" class="action-btn" id="mockup-action-btn">
+            Save Draft
+          </button>
+        </div>
+      </div>
+
+      <!-- Split View: Editor + Preview -->
+      <div class="main-split">
+        <!-- Editor Panel -->
+        <div class="editor-panel">
+          <div class="editor-section">
+            <span class="editor-label">Listing Name</span>
+            <div class="editor-input">
+              <span class="input-text" id="mockup-title">{initialState.previewTitle}</span>
+              <span class="input-cursor"></span>
+            </div>
+          </div>
+          <div class="editor-section">
+            <span class="editor-label">Category</span>
+            <div class="editor-select">
+              <span id="mockup-category">{initialState.previewCategory}</span>
+              <span class="select-arrow">\u25BC</span>
+            </div>
+          </div>
+          <div class="editor-section">
+            <span class="editor-label">Description</span>
+            <div class="editor-textarea">
+              <span class="textarea-text" id="mockup-description">{initialState.previewDescription}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Preview Panel -->
+        <div class="preview-panel">
+          <div class="preview-header">
+            <span class="preview-label">Live Preview</span>
+            <span class="preview-url" id="mockup-url">{initialState.previewUrl}</span>
+          </div>
+          <div class="preview-card">
+            <div class="preview-badge hidden" id="mockup-badge">\u2B50 Featured</div>
+            <div class="preview-image">
+              <div class="preview-image-placeholder">
+                <span>\u{1F3E2}</span>
+              </div>
+            </div>
+            <div class="preview-content">
+              <span class="preview-category-tag" id="mockup-preview-category">{initialState.previewCategory}</span>
+              <h3 class="preview-title" id="mockup-preview-title">{initialState.previewTitle}</h3>
+              <p class="preview-description" id="mockup-preview-description">{initialState.previewDescription}</p>
+              <div class="preview-meta">
+                <span class="meta-rating">\u2605\u2605\u2605\u2605\u2605</span>
+                <span class="meta-reviews">24 reviews</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- State Indicator -->
+  <div class="mockup-indicators">
+    {mockupStates.map((s, i) => (
+      <button
+        type="button"
+        data-state-index={i}
+        class:list={["indicator", i === 0 && "indicator--active"]}
+      >
+        <span class="indicator-dot"></span>
+        <span class="indicator-label">{s.label}</span>
+      </button>
+    ))}
+  </div>
+</div>
+
+<script define:vars={{ mockupStates }}>
+  function initMockup() {
+    const mockup = document.getElementById('animated-mockup')
+    if (!mockup) return
+
+    let currentState = 0
+    let isPaused = false
+    let interval
+
+    const elements = {
+      label: document.getElementById('mockup-label'),
+      breadcrumb: document.getElementById('mockup-breadcrumb'),
+      title: document.getElementById('mockup-title'),
+      category: document.getElementById('mockup-category'),
+      description: document.getElementById('mockup-description'),
+      url: document.getElementById('mockup-url'),
+      badge: document.getElementById('mockup-badge'),
+      previewCategory: document.getElementById('mockup-preview-category'),
+      previewTitle: document.getElementById('mockup-preview-title'),
+      previewDescription: document.getElementById('mockup-preview-description'),
+      actionBtn: document.getElementById('mockup-action-btn'),
+    }
+
+    function updateMockup(stateIndex) {
+      const state = mockupStates[stateIndex]
+      if (!state) return
+
+      // Update content
+      if (elements.label) elements.label.textContent = state.label
+      if (elements.breadcrumb) elements.breadcrumb.textContent = state.previewTitle
+      if (elements.title) elements.title.textContent = state.previewTitle
+      if (elements.category) elements.category.textContent = state.previewCategory
+      if (elements.description) elements.description.textContent = state.previewDescription
+      if (elements.url) elements.url.textContent = state.previewUrl || 'saasify.app/live'
+      if (elements.previewCategory) elements.previewCategory.textContent = state.previewCategory
+      if (elements.previewTitle) elements.previewTitle.textContent = state.previewTitle
+      if (elements.previewDescription) elements.previewDescription.textContent = state.previewDescription
+
+      // Update badge
+      if (elements.badge) {
+        if (state.previewStatus === 'featured') {
+          elements.badge.classList.remove('hidden')
+        } else {
+          elements.badge.classList.add('hidden')
+        }
+      }
+
+      // Update action button
+      if (elements.actionBtn) {
+        elements.actionBtn.classList.remove('action-btn--success', 'action-btn--featured')
+        if (state.previewStatus === 'draft') {
+          elements.actionBtn.textContent = 'Save Draft'
+        } else if (state.previewStatus === 'published') {
+          elements.actionBtn.textContent = '\u2713 Published'
+          elements.actionBtn.classList.add('action-btn--success')
+        } else if (state.previewStatus === 'featured') {
+          elements.actionBtn.textContent = '\u2B50 Featured'
+          elements.actionBtn.classList.add('action-btn--featured')
+        }
+      }
+
+      // Update sidebar active state
+      const sidebarItems = mockup.querySelectorAll('.sidebar-item')
+      sidebarItems.forEach(item => {
+        item.classList.remove('sidebar-item--active')
+        if (item.getAttribute('data-nav') === state.sidebarActive) {
+          item.classList.add('sidebar-item--active')
+        }
+      })
+
+      // Update indicators
+      const indicators = mockup.querySelectorAll('.indicator')
+      indicators.forEach((ind, i) => {
+        ind.classList.toggle('indicator--active', i === stateIndex)
+      })
+    }
+
+    function nextState() {
+      if (isPaused) return
+      currentState = (currentState + 1) % mockupStates.length
+      updateMockup(currentState)
+    }
+
+    // Auto-advance
+    interval = setInterval(nextState, 3000)
+
+    // Pause on hover
+    mockup.addEventListener('mouseenter', () => {
+      isPaused = true
+    })
+    mockup.addEventListener('mouseleave', () => {
+      isPaused = false
+    })
+
+    // Manual state selection
+    const indicators = mockup.querySelectorAll('.indicator')
+    indicators.forEach((indicator) => {
+      indicator.addEventListener('click', () => {
+        const index = parseInt(indicator.getAttribute('data-state-index') || '0', 10)
+        currentState = index
+        updateMockup(currentState)
+      })
+    })
+  }
+
+  initMockup()
+  document.addEventListener('astro:after-swap', initMockup)
+</script>
+
+<style>
+  .mockup-wrapper {
+    width: 100%;
+    max-width: 900px;
+    margin: 0 auto;
+    background: var(--background);
+    border-radius: 0.75rem;
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  }
+
+  .mockup-chrome {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: var(--muted);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .mockup-chrome-dots {
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+  }
+
+  .dot-red { background: #ff5f56; }
+  .dot-yellow { background: #ffbd2e; }
+  .dot-green { background: #27ca40; }
+
+  .mockup-chrome-title {
+    flex: 1;
+    text-align: center;
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+
+  .mockup-chrome-actions {
+    width: 3rem;
+  }
+
+  .mockup-content {
+    display: flex;
+    min-height: 300px;
+  }
+
+  .mockup-sidebar {
+    width: 180px;
+    background: var(--card);
+    border-right: 1px solid var(--border);
+    padding: 1rem 0;
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .mockup-sidebar {
+      display: block;
+    }
+    .mockup-content {
+      min-height: 350px;
+    }
+  }
+
+  .sidebar-header {
+    padding: 0 1rem 1rem;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 0.5rem;
+  }
+
+  .sidebar-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .logo-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .logo-text {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--foreground);
+  }
+
+  .sidebar-nav {
+    padding: 0 0.5rem;
+  }
+
+  .sidebar-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .sidebar-item:hover {
+    background: var(--muted);
+  }
+
+  .sidebar-item--active {
+    background: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  .sidebar-icon {
+    font-size: 0.875rem;
+  }
+
+  .sidebar-label {
+    font-size: 0.75rem;
+    flex: 1;
+  }
+
+  .sidebar-badge {
+    font-size: 0.625rem;
+    background: var(--muted);
+    padding: 0.125rem 0.375rem;
+    border-radius: 9999px;
+  }
+
+  .sidebar-item--active .sidebar-badge {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .mockup-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .main-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .header-title h2 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--foreground);
+    margin: 0;
+  }
+
+  .header-breadcrumb {
+    font-size: 0.625rem;
+    color: var(--muted-foreground);
+  }
+
+  .action-btn {
+    font-size: 0.625rem;
+    padding: 0.375rem 0.75rem;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+  }
+
+  .action-btn--success {
+    background: #22c55e;
+  }
+
+  .action-btn--featured {
+    background: #f59e0b;
+  }
+
+  .main-split {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .editor-panel {
+    flex: 1;
+    padding: 1rem;
+    border-right: 1px solid var(--border);
+    display: none;
+  }
+
+  @media (min-width: 640px) {
+    .editor-panel {
+      display: block;
+    }
+  }
+
+  .editor-section {
+    margin-bottom: 0.75rem;
+  }
+
+  .editor-label {
+    display: block;
+    font-size: 0.625rem;
+    color: var(--muted-foreground);
+    margin-bottom: 0.25rem;
+  }
+
+  .editor-input,
+  .editor-select,
+  .editor-textarea {
+    background: var(--muted);
+    border: 1px solid var(--border);
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--foreground);
+  }
+
+  .editor-input {
+    display: flex;
+    align-items: center;
+  }
+
+  .input-cursor {
+    width: 1px;
+    height: 1em;
+    background: var(--primary);
+    animation: blink 1s infinite;
+  }
+
+  @keyframes blink {
+    50% { opacity: 0; }
+  }
+
+  .editor-select {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .select-arrow {
+    font-size: 0.5rem;
+    color: var(--muted-foreground);
+  }
+
+  .editor-textarea {
+    min-height: 60px;
+  }
+
+  .preview-panel {
+    flex: 1;
+    padding: 1rem;
+    background: var(--muted);
+  }
+
+  .preview-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+  }
+
+  .preview-label {
+    font-size: 0.625rem;
+    font-weight: 500;
+    color: var(--muted-foreground);
+  }
+
+  .preview-url {
+    font-size: 0.625rem;
+    color: var(--primary);
+  }
+
+  .preview-card {
+    background: var(--background);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    position: relative;
+  }
+
+  .preview-badge {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: #f59e0b;
+    color: white;
+    font-size: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    font-weight: 500;
+  }
+
+  .preview-image {
+    aspect-ratio: 16/9;
+    background: var(--muted);
+  }
+
+  .preview-image-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+  }
+
+  .preview-content {
+    padding: 0.75rem;
+  }
+
+  .preview-category-tag {
+    display: inline-block;
+    font-size: 0.5rem;
+    color: var(--primary);
+    background: color-mix(in oklch, var(--primary) 10%, transparent);
+    padding: 0.125rem 0.375rem;
+    border-radius: 9999px;
+    margin-bottom: 0.25rem;
+  }
+
+  .preview-title {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--foreground);
+    margin: 0 0 0.25rem;
+  }
+
+  .preview-description {
+    font-size: 0.625rem;
+    color: var(--muted-foreground);
+    margin: 0 0 0.5rem;
+    line-height: 1.4;
+  }
+
+  .preview-meta {
+    display: flex;
+    gap: 0.5rem;
+    font-size: 0.5rem;
+    color: var(--muted-foreground);
+  }
+
+  .meta-rating {
+    color: #f59e0b;
+  }
+
+  .mockup-indicators {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: var(--card);
+    border-top: 1px solid var(--border);
+  }
+
+  .indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    background: transparent;
+    border: 1px solid var(--border);
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .indicator:hover {
+    border-color: var(--primary);
+  }
+
+  .indicator--active {
+    background: var(--primary);
+    border-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  .indicator-dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .indicator-label {
+    font-size: 0.625rem;
+    font-weight: 500;
+    display: none;
+  }
+
+  @media (min-width: 640px) {
+    .indicator-label {
+      display: inline;
+    }
+  }
+</style>
+`,
+  "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',
+  "marketing/astro/src/layouts/Layout.astro": `---
+import "../styles/globals.css"
+
+interface Props {
+  title?: string
+  description?: string
+}
+
+const {
+  title = "SaaSify - The modern platform for growing teams",
+  description = "Transform your workflow with our all-in-one platform. Streamline operations, boost productivity, and scale your business with powerful tools designed for modern teams.",
+} = Astro.props
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content={description} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+    <!-- Prevent flash of wrong theme -->
+    <script is:inline>
+      (function() {
+        const theme = localStorage.getItem('theme') ||
+          (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+        if (theme === 'dark') {
+          document.documentElement.setAttribute('data-theme', 'dark')
+        }
+      })()
+    </script>
+  </head>
+  <body class="min-h-screen bg-background text-foreground antialiased">
+    <slot />
+  </body>
+</html>
+`,
+  "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',
+  "marketing/astro/src/pages/index.astro": `---
+import Layout from "../layouts/Layout.astro"
+import Header from "../components/Header.astro"
+import Footer from "../components/Footer.astro"
+import ProductShowcaseHero from "../components/heros/ProductShowcaseHero.astro"
+import LogoBanner from "../components/blocks/LogoBanner.astro"
+import ProofBanner from "../components/blocks/ProofBanner.astro"
+import BentoFeatures from "../components/blocks/BentoFeatures.astro"
+import FeatureShowcase from "../components/blocks/FeatureShowcase.astro"
+import IndustryTabs from "../components/blocks/IndustryTabs.astro"
+import TestimonialsGrid from "../components/blocks/TestimonialsGrid.astro"
+import TrustColumns from "../components/blocks/TrustColumns.astro"
+import PricingTable from "../components/blocks/PricingTable.astro"
+import FinalCTA from "../components/blocks/FinalCTA.astro"
+---
+
+<Layout>
+  <div class="min-h-screen flex flex-col">
+    <Header />
+
+    <main class="flex-1">
+      <!-- Hero Section -->
+      <ProductShowcaseHero
+        headline="The modern platform for growing teams"
+        description="Streamline workflows, boost productivity, and scale your business with one powerful platform."
+        links={[
+          { label: "Start free trial", href: "/sign-up", variant: "default" },
+          { label: "Watch demo", href: "/demo", variant: "outline" },
+        ]}
+      />
+
+      <!-- Logo Banner - Social proof -->
+      <LogoBanner
+        heading="Trusted by fast-growing companies everywhere"
+        style="scroll"
+      />
+
+      <!-- Value Proposition -->
+      <ProofBanner
+        headline="Transform how your team works, collaborates, and grows"
+        subtext="Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint."
+        links={[
+          { label: "Start free trial", href: "/sign-up", variant: "default" },
+          { label: "Book a demo", href: "/contact", variant: "outline" },
+        ]}
+      />
+
+      <!-- Bento Features -->
+      <BentoFeatures
+        heading="Discover what SaaSify can do"
+        subheading="Everything you need to work smarter and scale faster"
+      />
+
+      <!-- Feature Showcase: Integrations -->
+      <FeatureShowcase
+        label="Seamless Integrations"
+        headline="Connect everything your team uses in one place"
+        description="Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically."
+        features={[
+          { text: "100+ native integrations" },
+          { text: "Two-way data sync" },
+          { text: "Custom webhooks" },
+          { text: "API access included" },
+        ]}
+        link={{ label: "Explore integrations", href: "/features/integrations" }}
+        imagePosition="right"
+      />
+
+      <!-- Feature Showcase: Analytics -->
+      <FeatureShowcase
+        label="Actionable Analytics"
+        headline="Make decisions backed by real-time data"
+        description="Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth."
+        features={[
+          { text: "Real-time dashboards" },
+          { text: "Custom reports" },
+          { text: "Team performance metrics" },
+          { text: "Automated insights" },
+        ]}
+        link={{ label: "Learn about analytics", href: "/features/analytics" }}
+        imagePosition="left"
+      />
+
+      <!-- Feature Showcase: Automation -->
+      <FeatureShowcase
+        label="Workflow Automation"
+        headline="Eliminate busywork with smart automation"
+        description="Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters."
+        features={[
+          { text: "Visual workflow builder" },
+          { text: "Conditional logic" },
+          { text: "Scheduled triggers" },
+          { text: "Cross-app automation" },
+        ]}
+        link={{ label: "See automation features", href: "/features/automation" }}
+        imagePosition="right"
+      />
+
+      <!-- Feature Showcase: Collaboration -->
+      <FeatureShowcase
+        label="Team Collaboration"
+        headline="Work together seamlessly, from anywhere"
+        description="Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team."
+        features={[
+          { text: "Real-time collaboration" },
+          { text: "Shared workspaces" },
+          { text: "Comments and mentions" },
+          { text: "Activity tracking" },
+        ]}
+        link={{ label: "Explore collaboration", href: "/features" }}
+        imagePosition="left"
+      />
+
+      <!-- Industry Tabs -->
+      <IndustryTabs
+        heading="Solutions that deliver real results"
+        subheading="Whether you're in sales, marketing, or product, SaaSify adapts to how your team works."
+      />
+
+      <!-- Testimonials -->
+      <TestimonialsGrid
+        heading="Loved by teams at companies of all sizes"
+        subheading="See how leading teams use SaaSify to drive growth and productivity."
+      />
+
+      <!-- Trust Columns -->
+      <TrustColumns />
+
+      <!-- Second Logo Banner - Integrations -->
+      <LogoBanner
+        heading="Integrates with your favorite tools"
+        style="grid"
+        logos={[
+          { name: "Slack", initials: "SL" },
+          { name: "Salesforce", initials: "SF" },
+          { name: "HubSpot", initials: "HS" },
+          { name: "Google Workspace", initials: "GW" },
+          { name: "Zapier", initials: "ZP" },
+          { name: "Jira", initials: "JI" },
+        ]}
+      />
+
+      <!-- Pricing -->
+      <PricingTable
+        heading="Simple, transparent pricing"
+        subheading="Start free, upgrade as your team grows. No hidden fees."
+      />
+
+      <!-- Final CTA -->
+      <FinalCTA
+        headline="Ready to transform how your team works?"
+        subheading="Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow."
+        style="dark"
+        links={[
+          { label: "Start free trial", href: "/sign-up", variant: "outline" },
+          { label: "Book a demo", href: "/contact", variant: "default" },
+        ]}
+      />
+    </main>
+
+    <Footer />
+  </div>
+</Layout>
+`,
+  "marketing/astro/src/styles/globals.css.hbs": '@import "tailwindcss";\n\n@theme inline {\n	--color-background: var(--background);\n	--color-foreground: var(--foreground);\n	--color-card: var(--card);\n	--color-card-foreground: var(--card-foreground);\n	--color-popover: var(--popover);\n	--color-popover-foreground: var(--popover-foreground);\n	--color-primary: var(--primary);\n	--color-primary-foreground: var(--primary-foreground);\n	--color-secondary: var(--secondary);\n	--color-secondary-foreground: var(--secondary-foreground);\n	--color-muted: var(--muted);\n	--color-muted-foreground: var(--muted-foreground);\n	--color-accent: var(--accent);\n	--color-accent-foreground: var(--accent-foreground);\n	--color-destructive: var(--destructive);\n	--color-border: var(--border);\n	--color-input: var(--input);\n	--color-ring: var(--ring);\n	--color-chart-1: var(--chart-1);\n	--color-chart-2: var(--chart-2);\n	--color-chart-3: var(--chart-3);\n	--color-chart-4: var(--chart-4);\n	--color-chart-5: var(--chart-5);\n	--radius-sm: calc(var(--radius) - 4px);\n	--radius-md: calc(var(--radius) - 2px);\n	--radius-lg: var(--radius);\n	--radius-xl: calc(var(--radius) + 4px);\n	--font-sans: system-ui, sans-serif;\n	--font-mono: monospace;\n}\n\n:root {\n	--radius: 0.625rem;\n	--background: oklch(1 0 0);\n	--foreground: oklch(0.145 0 0);\n	--card: oklch(1 0 0);\n	--card-foreground: oklch(0.145 0 0);\n	--popover: oklch(1 0 0);\n	--popover-foreground: oklch(0.145 0 0);\n	--secondary: oklch(0.97 0 0);\n	--secondary-foreground: oklch(0.205 0 0);\n	--muted: oklch(0.97 0 0);\n	--muted-foreground: oklch(0.556 0 0);\n	--accent: oklch(0.97 0 0);\n	--accent-foreground: oklch(0.205 0 0);\n	--destructive: oklch(0.577 0.245 27.325);\n	--border: oklch(0.922 0 0);\n	--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n	--primary: oklch(0.205 0 0);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.708 0 0);\n	--chart-1: oklch(0.646 0.222 41.116);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "blue")}}\n	--primary: oklch(0.546 0.245 262.881);\n	--primary-foreground: oklch(0.985 0.002 247.858);\n	--ring: oklch(0.546 0.245 262.881);\n	--chart-1: oklch(0.546 0.245 262.881);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "green")}}\n	--primary: oklch(0.596 0.145 163.225);\n	--primary-foreground: oklch(0.982 0.018 155.826);\n	--ring: oklch(0.596 0.145 163.225);\n	--chart-1: oklch(0.596 0.145 163.225);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "purple")}}\n	--primary: oklch(0.627 0.265 303.9);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.627 0.265 303.9);\n	--chart-1: oklch(0.627 0.265 303.9);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "red")}}\n	--primary: oklch(0.637 0.237 25.331);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.637 0.237 25.331);\n	--chart-1: oklch(0.637 0.237 25.331);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "orange")}}\n	--primary: oklch(0.705 0.191 47.604);\n	--primary-foreground: oklch(0.216 0.006 56.043);\n	--ring: oklch(0.705 0.191 47.604);\n	--chart-1: oklch(0.705 0.191 47.604);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "amber")}}\n	--primary: oklch(0.769 0.188 70.08);\n	--primary-foreground: oklch(0.216 0.006 56.043);\n	--ring: oklch(0.769 0.188 70.08);\n	--chart-1: oklch(0.769 0.188 70.08);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor "cyan")}}\n	--primary: oklch(0.715 0.143 215.221);\n	--primary-foreground: oklch(0.216 0.006 56.043);\n	--ring: oklch(0.715 0.143 215.221);\n	--chart-1: oklch(0.715 0.143 215.221);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "emerald")}}\n	--primary: oklch(0.696 0.17 162.48);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.696 0.17 162.48);\n	--chart-1: oklch(0.696 0.17 162.48);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n	--primary: oklch(0.667 0.295 322.15);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.667 0.295 322.15);\n	--chart-1: oklch(0.667 0.295 322.15);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "indigo")}}\n	--primary: oklch(0.585 0.233 277.117);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.585 0.233 277.117);\n	--chart-1: oklch(0.585 0.233 277.117);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "lime")}}\n	--primary: oklch(0.768 0.233 130.85);\n	--primary-foreground: oklch(0.216 0.006 56.043);\n	--ring: oklch(0.768 0.233 130.85);\n	--chart-1: oklch(0.768 0.233 130.85);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "pink")}}\n	--primary: oklch(0.718 0.202 349.761);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.718 0.202 349.761);\n	--chart-1: oklch(0.718 0.202 349.761);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "rose")}}\n	--primary: oklch(0.645 0.246 16.439);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.645 0.246 16.439);\n	--chart-1: oklch(0.645 0.246 16.439);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "sky")}}\n	--primary: oklch(0.685 0.169 237.323);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.685 0.169 237.323);\n	--chart-1: oklch(0.685 0.169 237.323);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "teal")}}\n	--primary: oklch(0.704 0.14 182.503);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.704 0.14 182.503);\n	--chart-1: oklch(0.704 0.14 182.503);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "violet")}}\n	--primary: oklch(0.606 0.25 292.717);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.606 0.25 292.717);\n	--chart-1: oklch(0.606 0.25 292.717);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "yellow")}}\n	--primary: oklch(0.795 0.184 86.047);\n	--primary-foreground: oklch(0.216 0.006 56.043);\n	--ring: oklch(0.795 0.184 86.047);\n	--chart-1: oklch(0.795 0.184 86.047);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.646 0.222 41.116);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n	--primary: oklch(0.205 0 0);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.708 0 0);\n	--chart-1: oklch(0.646 0.222 41.116);\n	--chart-2: oklch(0.6 0.118 184.704);\n	--chart-3: oklch(0.398 0.07 227.392);\n	--chart-4: oklch(0.828 0.189 84.429);\n	--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n	--background: oklch(0.145 0 0);\n	--foreground: oklch(0.985 0 0);\n	--card: oklch(0.205 0 0);\n	--card-foreground: oklch(0.985 0 0);\n	--popover: oklch(0.269 0 0);\n	--popover-foreground: oklch(0.985 0 0);\n	--secondary: oklch(0.269 0 0);\n	--secondary-foreground: oklch(0.985 0 0);\n	--muted: oklch(0.269 0 0);\n	--muted-foreground: oklch(0.708 0 0);\n	--accent: oklch(0.371 0 0);\n	--accent-foreground: oklch(0.985 0 0);\n	--destructive: oklch(0.704 0.191 22.216);\n	--border: oklch(1 0 0 / 10%);\n	--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n	--primary: oklch(0.922 0 0);\n	--primary-foreground: oklch(0.205 0 0);\n	--ring: oklch(0.556 0 0);\n{{else if (eq shadcn.themeColor "blue")}}\n	--primary: oklch(0.623 0.214 262.881);\n	--primary-foreground: oklch(0.273 0.033 256.848);\n	--ring: oklch(0.623 0.214 262.881);\n{{else if (eq shadcn.themeColor "green")}}\n	--primary: oklch(0.696 0.17 162.48);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.696 0.17 162.48);\n{{else if (eq shadcn.themeColor "purple")}}\n	--primary: oklch(0.714 0.203 305.504);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.714 0.203 305.504);\n{{else if (eq shadcn.themeColor "red")}}\n	--primary: oklch(0.704 0.191 22.216);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.704 0.191 22.216);\n{{else if (eq shadcn.themeColor "orange")}}\n	--primary: oklch(0.792 0.17 52.615);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.792 0.17 52.615);\n{{else if (eq shadcn.themeColor "amber")}}\n	--primary: oklch(0.828 0.189 84.429);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.828 0.189 84.429);\n{{else if (eq shadcn.themeColor "cyan")}}\n	--primary: oklch(0.789 0.154 211.53);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.789 0.154 211.53);\n{{else if (eq shadcn.themeColor "emerald")}}\n	--primary: oklch(0.765 0.166 160.391);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.765 0.166 160.391);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n	--primary: oklch(0.74 0.238 322.16);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.74 0.238 322.16);\n{{else if (eq shadcn.themeColor "indigo")}}\n	--primary: oklch(0.673 0.182 276.935);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.673 0.182 276.935);\n{{else if (eq shadcn.themeColor "lime")}}\n	--primary: oklch(0.841 0.238 128.85);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.841 0.238 128.85);\n{{else if (eq shadcn.themeColor "pink")}}\n	--primary: oklch(0.775 0.181 349.761);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.775 0.181 349.761);\n{{else if (eq shadcn.themeColor "rose")}}\n	--primary: oklch(0.712 0.194 13.428);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.712 0.194 13.428);\n{{else if (eq shadcn.themeColor "sky")}}\n	--primary: oklch(0.756 0.143 232.661);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.756 0.143 232.661);\n{{else if (eq shadcn.themeColor "teal")}}\n	--primary: oklch(0.777 0.152 181.912);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.777 0.152 181.912);\n{{else if (eq shadcn.themeColor "violet")}}\n	--primary: oklch(0.702 0.183 293.541);\n	--primary-foreground: oklch(0.985 0 0);\n	--ring: oklch(0.702 0.183 293.541);\n{{else if (eq shadcn.themeColor "yellow")}}\n	--primary: oklch(0.852 0.199 91.936);\n	--primary-foreground: oklch(0.15 0 0);\n	--ring: oklch(0.852 0.199 91.936);\n{{else}}\n	--primary: oklch(0.922 0 0);\n	--primary-foreground: oklch(0.205 0 0);\n	--ring: oklch(0.556 0 0);\n{{/if}}\n}\n\n@layer base {\n	* {\n		@apply border-border outline-ring/50;\n	}\n	body {\n		@apply bg-background text-foreground;\n	}\n}\n\n.container {\n	width: 100%;\n	margin-left: auto;\n	margin-right: auto;\n	padding-left: 1rem;\n	padding-right: 1rem;\n	max-width: 96rem;\n}\n\n@media (min-width: 640px) {\n	.container {\n		padding-left: 1.5rem;\n		padding-right: 1.5rem;\n	}\n}\n\n@media (min-width: 1024px) {\n	.container {\n		padding-left: 2rem;\n		padding-right: 2rem;\n	}\n}\n',
+  "marketing/astro/tsconfig.json.hbs": '{\n  "extends": "astro/tsconfigs/strict",\n  "compilerOptions": {\n    "baseUrl": ".",\n    "paths": {\n      "@/*": ["./src/*"]\n    }\n  },\n  "include": ["src/**/*", ".astro/types.d.ts"],\n  "exclude": ["node_modules", "dist"]\n}\n',
   "marketing/nextjs/next.config.ts.hbs": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  transpilePackages: ['@repo/ui'],\n}\n\nexport default nextConfig\n",
   "marketing/nextjs/package.json.hbs": '{\n  "name": "@repo/marketing",\n  "version": "0.1.0",\n  "private": true,\n  "scripts": {\n    "dev": "next dev --turbopack --port 3000",\n    "build": "next build",\n    "start": "next start",\n    "lint": "biome check .",\n    "lint:fix": "biome check --write .",\n    "typecheck": "tsc --noEmit"\n  },\n  "dependencies": {\n    "next": "^16.0.0",\n    "react": "^19.0.0",\n    "react-dom": "^19.0.0",\n    "@repo/ui": "workspace:*",\n    "lucide-react": "^0.468.0",\n    "next-themes": "^0.4.4",\n    "clsx": "^2.1.1",\n    "tailwind-merge": "^2.6.0",\n    "class-variance-authority": "^0.7.1"\n  },\n  "devDependencies": {\n    "@repo/config-typescript": "workspace:*",\n    "@types/node": "^20.0.0",\n    "@types/react": "^19.0.0",\n    "@types/react-dom": "^19.0.0",\n    "tailwindcss": "^4.0.0",\n    "@tailwindcss/postcss": "^4.0.0",\n    "postcss": "^8.4.0",\n    "typescript": "^5.0.0"\n  }\n}\n',
   "marketing/nextjs/postcss.config.mjs.hbs": "export default {\n  plugins: {\n    '@tailwindcss/postcss': {},\n  },\n}\n",
@@ -10734,6 +12289,8 @@ async function generateVirtualProject(config) {
         await processPayloadTemplates(vfs, config);
       } else if (config.marketingSite === "nextjs") {
         await processMarketingTemplates(vfs, config);
+      } else if (config.marketingSite === "astro") {
+        await processAstroMarketingTemplates(vfs, config);
       }
       if (config.optionalApps?.includes("design-system")) {
         await processDesignSystemTemplates(vfs, config);
@@ -10811,6 +12368,9 @@ async function processPayloadTemplates(vfs, config) {
 async function processMarketingTemplates(vfs, config) {
   processTemplatesFromPrefix(vfs, "marketing/nextjs/", "/apps/marketing", config);
 }
+async function processAstroMarketingTemplates(vfs, config) {
+  processTemplatesFromPrefix(vfs, "marketing/astro/", "/apps/marketing", config);
+}
 async function processDesignSystemTemplates(vfs, config) {
   processTemplatesFromPrefix(vfs, "design-system/", "/apps/design-system", config);
 }