popeye-cli 1.4.7 → 1.5.0

package/src/generators/doc-parser.ts

@@ -0,0 +1,372 @@
+/**
+ * Document parsing helpers for extracting structured content from user docs
+ * Used by website-context.ts to populate website templates with project-specific content
+ */
+
+/** Generic AI preamble patterns to skip */
+const GENERIC_PREAMBLES = [
+  "here's a comprehensive",
+  "here is a comprehensive",
+  "here's a detailed",
+  "here is a detailed",
+  "based on your idea",
+  "based on the idea",
+  "here's a software",
+  "here is a software",
+];
+
+/**
+ * Strip markdown code fences that wrap entire doc files (```md ... ```)
+ */
+export function stripCodeFences(text: string): string {
+  return text.replace(/```(?:md|markdown)?\s*\n/g, '').replace(/```\s*$/gm, '');
+}
+
+/**
+ * Extract the real product name from docs or specification
+ * Finds all "# Name — tagline" headings and picks the shortest (most likely the product name)
+ */
+export function extractProductName(docs: string, specification?: string): string | undefined {
+  // Collect all "# Name — tagline" headings, pick the shortest name
+  // Reason: sub-documents like "Gateco UI Color System" are longer than "Gateco"
+  const headingPattern = /^#\s+([A-Z][a-zA-Z0-9]+(?:[ \t]+[A-Z][a-zA-Z0-9]+)*)(?:[ \t]*[—\-–|:][ \t])/gm;
+  const candidates: string[] = [];
+  let match;
+  while ((match = headingPattern.exec(docs)) !== null) {
+    candidates.push(match[1].trim());
+  }
+  if (candidates.length > 0) {
+    // Prefer shortest name (product name is typically 1-2 words)
+    candidates.sort((a, b) => a.length - b.length);
+    return candidates[0];
+  }
+
+  // Pattern: "**Project Name**: ProductName" in specification
+  if (specification) {
+    const nameMatch = specification.match(/\*\*Project\s+Name\*\*:\s*(.+)/i);
+    if (nameMatch) return nameMatch[1].trim();
+  }
+
+  // Pattern: "# ProductName" in spec/product doc sections only
+  const sectionHeading = docs.match(/^---\s+\S*(?:spec|product)\S*\s+---\n#\s+([A-Z][a-zA-Z0-9]+)/im);
+  if (sectionHeading) return sectionHeading[1].trim();
+
+  return undefined;
+}
+
+/**
+ * Extract a tagline from docs (text after em-dash in first heading)
+ * When productName is provided, prefer tagline from the heading containing that name
+ */
+export function extractTagline(docs: string, productName?: string): string | undefined {
+  // Collect all "# Name — Tagline" matches
+  const taglineMatches = [...docs.matchAll(/^#\s+(.+?)[—\-–]\s*(.{10,80})$/gm)];
+
+  if (taglineMatches.length > 0) {
+    // Prefer tagline from the heading that best matches the product name
+    // Reason: "Gateco UI Color System — ..." also includes "Gateco", so prefer exact match
+    if (productName) {
+      const exactMatch = taglineMatches.find((m) => m[1].trim() === productName);
+      if (exactMatch) return exactMatch[2].trim();
+      // Fall back to shortest heading containing the name (closest to just the product name)
+      const nameMatches = taglineMatches.filter((m) => m[1].includes(productName));
+      if (nameMatches.length > 0) {
+        nameMatches.sort((a, b) => a[1].length - b[1].length);
+        return nameMatches[0][2].trim();
+      }
+    }
+    return taglineMatches[0][2].trim();
+  }
+
+  // Bold tagline near the top: "**Secure AI Retrieval. Priced by Use.**"
+  const boldMatch = docs.match(/\*\*([A-Z].{15,80}?)\*\*/);
+  if (boldMatch && !boldMatch[1].includes('Project Name')) return boldMatch[1];
+
+  return undefined;
+}
+
+/**
+ * Extract a meaningful description, skipping generic AI preambles
+ */
+export function extractDescription(docs: string, specification?: string): string | undefined {
+  // Look for "What is [Product]?" or "About [Product]" sections in docs
+  // Collect all matches and prefer the one that looks most like a product description
+  // Reason: "What is a Secured Retrieval?" in pricing doc should not beat "What Is Gateco?" in spec
+  const descPattern = /##\s+(?:\d+\.\s*)?(?:What\s+Is|About(?!\s+(?:This|the)))\b[^\n]*\n+([\s\S]*?)(?=\n##\s|\n---)/gi;
+  const descMatches = [...docs.matchAll(descPattern)];
+  // Sort: prefer matches whose heading has just a product name (no articles like "a/an/the")
+  descMatches.sort((a, b) => {
+    const headingA = a[0].split('\n')[0];
+    const headingB = b[0].split('\n')[0];
+    const hasArticleA = /what\s+is\s+(?:a|an|the)\s/i.test(headingA) ? 1 : 0;
+    const hasArticleB = /what\s+is\s+(?:a|an|the)\s/i.test(headingB) ? 1 : 0;
+    return hasArticleA - hasArticleB;
+  });
+  for (const whatIsMatch of descMatches) {
+    const paragraph = whatIsMatch[1].trim().split('\n\n')[0]
+      .replace(/\*\*/g, '').replace(/\n/g, ' ').trim();
+    if (paragraph.length > 30) return paragraph.slice(0, 300);
+  }
+
+  // Look in specification, skipping generic lines
+  if (specification) {
+    for (const line of specification.split('\n')) {
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith('#') || trimmed.length < 30) continue;
+      const lower = trimmed.toLowerCase();
+      if (GENERIC_PREAMBLES.some((p) => lower.startsWith(p))) continue;
+      if (lower.startsWith('**project name')) continue;
+      return trimmed.replace(/^\*\*(.+?)\*\*:?\s*/, '$1: ').slice(0, 300);
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Extract features from docs and specification
+ * Looks for bullet/numbered lists in sections about features, principles, capabilities
+ */
+export function extractFeatures(
+  docs: string,
+  specification?: string
+): Array<{ title: string; description: string }> {
+  const features: Array<{ title: string; description: string }> = [];
+  const source = docs + '\n' + (specification || '');
+
+  // Split into sections by heading
+  const sectionPattern = /^#{1,3}\s+(.+)$/gm;
+  const sections: Array<{ heading: string; content: string }> = [];
+  let lastIndex = 0;
+  let lastHeading = '';
+  let match;
+
+  while ((match = sectionPattern.exec(source)) !== null) {
+    if (lastIndex > 0) {
+      sections.push({
+        heading: lastHeading,
+        content: source.slice(lastIndex, match.index),
+      });
+    }
+    lastHeading = match[1];
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex > 0) {
+    sections.push({ heading: lastHeading, content: source.slice(lastIndex) });
+  }
+
+  // Find sections about product features, principles, capabilities
+  // Reason: pattern must be specific to avoid matching design docs ("Feature Gating", "Enforcement Colors")
+  // "features" requires plural or "Key/Core Features" prefix to avoid "Feature Gating"
+  const featureKeywords = /(?:key|core|main)?\s*features\b|principle|capabilit|what\s+(?:it|we)\s+do|core\s+design/i;
+
+  for (const section of sections) {
+    if (!featureKeywords.test(section.heading)) continue;
+
+    // Collect bullet points (- or * or +) and numbered items (1. 2. 3.)
+    const items = section.content.match(/^(?:[-*+]|\d+\.)\s+.+/gm);
+    if (!items) continue;
+
+    for (const item of items) {
+      const text = item.replace(/^(?:[-*+]|\d+\.)\s+/, '');
+
+      // Try "**bold title** - description" pattern
+      const boldWithDesc = text.match(/^\*\*(.+?)\*\*\s*[-–:]\s*(.+)/);
+      if (boldWithDesc) {
+        features.push({
+          title: boldWithDesc[1].trim(),
+          description: boldWithDesc[2].trim().slice(0, 150),
+        });
+      } else if (/^\*\*.+\*\*/.test(text)) {
+        // Bold title with no trailing description: "**Vector DB agnostic**"
+        const title = text.replace(/\*\*/g, '').trim();
+        if (title.length > 3 && title.length < 80) {
+          features.push({ title, description: title });
+        }
+      } else {
+        const cleaned = text.replace(/\*\*/g, '');
+        // Split on sentence-level delimiters only; keep hyphens in compound words
+        const titlePart = cleaned.split(/[.,:;—–]/)[0].trim();
+        if (titlePart.length > 3 && titlePart.length < 60) {
+          features.push({
+            title: titlePart,
+            description: cleaned.slice(0, 150),
+          });
+        }
+      }
+
+      if (features.length >= 6) break;
+    }
+
+    if (features.length > 0) break;
+  }
+
+  return features;
+}
+
+/**
+ * Extract pricing tiers from docs
+ * Parses markdown tables and "Plan Positioning" sections
+ */
+export function extractPricing(
+  docs: string
+): Array<{
+  name: string; price: string; period?: string;
+  description: string; features: string[];
+  cta: string; featured?: boolean;
+}> | undefined {
+  const tiers: Array<{
+    name: string; price: string; period?: string;
+    description: string; features: string[];
+    cta: string; featured?: boolean;
+  }> = [];
+
+  // Find the pricing section to avoid matching design token tables
+  // Reason: "Plan-Based Color Usage" matches "Plans?" - require "Pricing" keyword
+  const pricingSection = docs.match(
+    /##\s+(?:[\d.]*\s*)?Pricing\b[^\n]*\n([\s\S]*?)(?=\n##\s(?!.*(?:Plan\s+Positioning|Feature|Comparison))|\n---(?:\s*\n##\s)|$)/i
+  );
+  const searchArea = pricingSection ? pricingSection[0] : docs;
+
+  // Look for pricing overview table rows with plan names and actual prices
+  const priceMap = new Map<string, string>();
+  const tableRows = searchArea.match(/^\|[^|]*(?:Free|Pro|Enterprise|Starter|Growth|Team|Business)[^|]*\|.+\|$/gm);
+  if (tableRows) {
+    for (const row of tableRows) {
+      const cells = row.split('|').map((c) => c.trim()).filter(Boolean);
+      if (cells.length >= 2) {
+        const planName = cells[0].replace(/[🟢🔵🟣⚪🟡🟠🔴]\s*/g, '').replace(/\*\*/g, '').trim();
+        const price = cells[1].replace(/<br>/g, ' / ').replace(/\*\*/g, '').trim();
+        // Require the price to look like an actual price (Free, $amount, Custom, Contact)
+        // Reason: avoids matching design tokens like `plan-free` from color-scheme docs
+        const looksLikePrice = /^free$/i.test(price) || /^\$/.test(price)
+          || /^custom/i.test(price) || /^contact/i.test(price);
+        if (looksLikePrice && !priceMap.has(planName)) {
+          priceMap.set(planName, price);
+        }
+      }
+    }
+  }
+
+  if (priceMap.size === 0) return undefined;
+
+  // Look for plan descriptions
+  const descMap = new Map<string, string>();
+  const positionMatch = docs.match(
+    /##\s+(?:Plan\s+Positioning|Plan\s+Descriptions?)[^\n]*\n([\s\S]*?)(?=\n##\s|\n---)/i
+  );
+  if (positionMatch) {
+    const descPattern = /[-*]\s+\*\*(.+?)\*\*\s*\n\s+\*(.+?)\*/g;
+    let descMatch;
+    while ((descMatch = descPattern.exec(positionMatch[1])) !== null) {
+      descMap.set(descMatch[1].trim(), descMatch[2].trim());
+    }
+  }
+
+  // Build tier objects
+  let index = 0;
+  for (const [name, price] of priceMap) {
+    let displayPrice = price;
+    let period: string | undefined;
+    if (/free/i.test(price)) {
+      displayPrice = 'Free';
+    } else if (/custom|contact/i.test(price)) {
+      displayPrice = 'Custom';
+    } else {
+      // If there's a "minimum" monthly amount (e.g. "$0.40/1K ... $99/month minimum"),
+      // prefer the minimum amount as the display price
+      const minMatch = price.match(/(\$[\d,.]+)\s*\/?\s*month\s*minimum/i);
+      if (minMatch) {
+        displayPrice = minMatch[1];
+        period = '/month';
+      } else {
+        const dollarMatch = price.match(/\$[\d,.]+/);
+        if (dollarMatch) {
+          displayPrice = dollarMatch[0];
+          if (/month/i.test(price)) period = '/month';
+          if (/year|annual/i.test(price)) period = '/year';
+        }
+      }
+    }
+
+    const description = descMap.get(name) || '';
+    const cta = /enterprise|custom/i.test(name) ? 'Contact sales'
+      : /pro/i.test(name) ? 'Start free trial'
+      : 'Get started';
+    const featured = index === 1;
+
+    tiers.push({
+      name: name.replace(/\(.+?\)/, '').trim(),
+      price: displayPrice,
+      period,
+      description,
+      features: [],
+      cta,
+      featured,
+    });
+    index++;
+  }
+
+  // Extract features per plan from comparison table
+  const compTable = docs.match(
+    /\|\s*Feature\s*\/\s*Plan\s*\|(.+)\|[\s\S]*?(?=\n\n|\n##\s|\n---)/i
+  );
+  if (compTable && tiers.length > 0) {
+    const rows = compTable[0].split('\n').filter((r) => r.startsWith('|'));
+    for (const row of rows.slice(2)) {
+      const cells = row.split('|').map((c) => c.trim()).filter(Boolean);
+      if (cells.length < 2) continue;
+      const featureName = cells[0].replace(/\*\*/g, '').trim();
+      if (!featureName || /^[-=]+$/.test(featureName)) continue;
+
+      for (let i = 0; i < tiers.length && i + 1 < cells.length; i++) {
+        const val = cells[i + 1].trim();
+        if (val && val !== '❌') {
+          const display = val === '✅' ? featureName : `${featureName}: ${val}`;
+          tiers[i].features.push(display);
+        }
+      }
+    }
+  }
+
+  for (const tier of tiers) {
+    tier.features = tier.features.slice(0, 6);
+  }
+
+  return tiers.length > 0 ? tiers : undefined;
+}
+
+/**
+ * Extract the primary brand/accent color, not just any hex color
+ * Looks for accent/primary/CTA color tokens, avoids dark backgrounds
+ */
+export function extractPrimaryColor(docs: string): string | undefined {
+  // Look for "accent-primary" or "accent_primary" token with nearby hex
+  const accentMatch = docs.match(/accent[_-]?primary[^#]{0,40}(#[0-9a-fA-F]{6})/i);
+  if (accentMatch) return accentMatch[1];
+
+  // Look for "Primary Brand" or "Primary CTA" color label near a hex value
+  const primaryMatch = docs.match(
+    /(?:primary\s+(?:brand\s+)?(?:accent|color|CTA))[^#]{0,40}(#[0-9a-fA-F]{6})/i
+  );
+  if (primaryMatch) return primaryMatch[1];
+
+  // Look for CTA/link color
+  const ctaMatch = docs.match(/(?:CTA|primary\s+link)[^#]{0,40}(#[0-9a-fA-F]{6})/i);
+  if (ctaMatch) return ctaMatch[1];
+
+  // Fallback: first hex color that isn't very dark or very light
+  const allColors = [...docs.matchAll(/#([0-9a-fA-F]{6})/g)];
+  for (const colorMatch of allColors) {
+    const hex = colorMatch[1];
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    if (brightness > 60 && brightness < 210) {
+      return '#' + hex;
+    }
+  }
+
+  return undefined;
+}

package/src/generators/templates/index.ts

@@ -6,3 +6,7 @@ export * as pythonTemplates from './python.js';
 export * as typescriptTemplates from './typescript.js';
 export * as fullstackTemplates from './fullstack.js';
 export * as websiteTemplates from './website.js';
+export * as websiteConfigTemplates from './website-config.js';
+export * as websiteComponentTemplates from './website-components.js';
+export * as websiteSeoTemplates from './website-seo.js';
+export * as websiteConversionTemplates from './website-conversion.js';

package/src/generators/templates/website-components.ts

@@ -0,0 +1,305 @@
+/**
+ * Shared website component templates
+ * Generates Header, Footer, and Navigation components with
+ * strategy-driven content, logo support, and mobile responsiveness
+ */
+
+import type { WebsiteContentContext } from '../website-context.js';
+import type { WebsiteStrategyDocument, NavItem, FooterSection } from '../../types/website-strategy.js';
+
+/**
+ * Escape a string for safe use inside JSX template literals
+ */
+function escapeJsx(str: string): string {
+  return str
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/`/g, '\\`')
+    .replace(/\$/g, '\\$');
+}
+
+/**
+ * Generate website header component with logo, navigation, and CTA
+ *
+ * @param projectName - Project name for fallback display
+ * @param context - Optional content context
+ * @param strategy - Optional strategy for navigation and CTA
+ * @returns Header component source code
+ */
+export function generateWebsiteHeader(
+  projectName: string,
+  context?: WebsiteContentContext,
+  strategy?: WebsiteStrategyDocument
+): string {
+  const displayName = context?.productName || projectName
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+
+  const hasLogo = !!(context?.brandAssets?.logoOutputPath || context?.brand?.logoPath);
+  const logoPath = context?.brandAssets?.logoOutputPath
+    ? `/${context.brandAssets.logoOutputPath}`
+    : '/logo.svg';
+
+  // Build nav items from strategy or defaults
+  const navItems = strategy?.siteArchitecture.navigation || [
+    { label: 'Features', href: '/#features' },
+    { label: 'Pricing', href: '/pricing' },
+    { label: 'Docs', href: '/docs' },
+    { label: 'Blog', href: '/blog' },
+  ];
+
+  const navItemsStr = navItems
+    .map(item => `  { label: '${escapeJsx(item.label)}', href: '${escapeJsx(item.href)}' }`)
+    .join(',\n');
+
+  // CTA from strategy or default
+  const ctaText = strategy?.conversionStrategy.primaryCta.text || 'Get Started';
+  const ctaHref = strategy?.conversionStrategy.primaryCta.href || '/pricing';
+
+  // Logo rendering
+  const logoBlock = hasLogo
+    ? `<Image src="${logoPath}" alt="${escapeJsx(displayName)}" width={32} height={32} className="h-8 w-auto" />`
+    : `<span className="text-xl font-bold text-primary-600">${escapeJsx(displayName)}</span>`;
+
+  return `'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+${hasLogo ? "import Image from 'next/image';" : ''}
+
+const NAV_ITEMS = [
+${navItemsStr}
+];
+
+/**
+ * Site header with logo, navigation links, mobile menu, and CTA
+ */
+export default function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-gray-200 bg-white/80 backdrop-blur-sm">
+      <nav className="container flex h-16 items-center justify-between">
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2">
+          ${logoBlock}
+        </Link>
+
+        {/* Desktop Navigation */}
+        <div className="hidden items-center gap-8 md:flex">
+          {NAV_ITEMS.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className="text-sm font-medium text-gray-700 hover:text-primary-600 transition-colors"
+            >
+              {item.label}
+            </Link>
+          ))}
+          <Link
+            href="${escapeJsx(ctaHref)}"
+            className="rounded-md bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 transition-colors"
+          >
+            ${escapeJsx(ctaText)}
+          </Link>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <button
+          type="button"
+          className="md:hidden rounded-md p-2 text-gray-700"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+          aria-expanded={mobileMenuOpen}
+        >
+          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+            {mobileMenuOpen ? (
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            ) : (
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            )}
+          </svg>
+        </button>
+      </nav>
+
+      {/* Mobile Menu */}
+      {mobileMenuOpen && (
+        <div className="border-t border-gray-200 bg-white px-4 py-4 md:hidden">
+          <div className="flex flex-col gap-4">
+            {NAV_ITEMS.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="text-sm font-medium text-gray-700 hover:text-primary-600"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                {item.label}
+              </Link>
+            ))}
+            <Link
+              href="${escapeJsx(ctaHref)}"
+              className="rounded-md bg-primary-600 px-4 py-2 text-center text-sm font-semibold text-white"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              ${escapeJsx(ctaText)}
+            </Link>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}
+`;
+}
+
+/**
+ * Generate website footer component with multi-column sections
+ *
+ * @param projectName - Project name for copyright
+ * @param context - Optional content context
+ * @param strategy - Optional strategy for footer sections
+ * @returns Footer component source code
+ */
+export function generateWebsiteFooter(
+  projectName: string,
+  context?: WebsiteContentContext,
+  strategy?: WebsiteStrategyDocument
+): string {
+  const displayName = context?.productName || projectName
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+
+  // Build footer sections from strategy or defaults
+  const sections: FooterSection[] = strategy?.siteArchitecture.footerSections || [
+    {
+      title: 'Product',
+      links: [
+        { label: 'Features', href: '/#features' },
+        { label: 'Pricing', href: '/pricing' },
+        { label: 'Documentation', href: '/docs' },
+      ],
+    },
+    {
+      title: 'Resources',
+      links: [
+        { label: 'Blog', href: '/blog' },
+        { label: 'Support', href: '/contact' },
+      ],
+    },
+    {
+      title: 'Legal',
+      links: [
+        { label: 'Privacy Policy', href: '/privacy' },
+        { label: 'Terms of Service', href: '/terms' },
+      ],
+    },
+  ];
+
+  const sectionsStr = sections
+    .map(section => {
+      const linksStr = section.links
+        .map(link => `      { label: '${escapeJsx(link.label)}', href: '${escapeJsx(link.href)}' }`)
+        .join(',\n');
+      return `  {\n    title: '${escapeJsx(section.title)}',\n    links: [\n${linksStr}\n    ],\n  }`;
+    })
+    .join(',\n');
+
+  return `import Link from 'next/link';
+
+const FOOTER_SECTIONS = [
+${sectionsStr}
+];
+
+/**
+ * Site footer with multi-column link sections and copyright
+ */
+export default function Footer() {
+  return (
+    <footer className="border-t border-gray-200 bg-gray-50">
+      <div className="container py-12">
+        <div className="grid grid-cols-2 gap-8 md:grid-cols-${Math.min(sections.length + 1, 4)}">
+          {/* Brand column */}
+          <div className="col-span-2 md:col-span-1">
+            <Link href="/" className="text-lg font-bold text-gray-900">
+              ${escapeJsx(displayName)}
+            </Link>
+            <p className="mt-2 text-sm text-gray-600">
+              ${context?.tagline ? escapeJsx(context.tagline) : 'Build something amazing.'}
+            </p>
+          </div>
+
+          {/* Link columns */}
+          {FOOTER_SECTIONS.map((section) => (
+            <div key={section.title}>
+              <h3 className="text-sm font-semibold text-gray-900">{section.title}</h3>
+              <ul className="mt-4 space-y-2">
+                {section.links.map((link) => (
+                  <li key={link.href}>
+                    <Link
+                      href={link.href}
+                      className="text-sm text-gray-600 hover:text-primary-600 transition-colors"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-12 border-t border-gray-200 pt-8">
+          <p className="text-center text-sm text-gray-500">
+            &copy; {new Date().getFullYear()} ${escapeJsx(displayName)}. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+`;
+}
+
+/**
+ * Generate navigation config module
+ *
+ * @param strategy - Optional strategy for navigation items
+ * @returns Navigation config source code
+ */
+export function generateWebsiteNavigation(
+  strategy?: WebsiteStrategyDocument
+): string {
+  const navItems: NavItem[] = strategy?.siteArchitecture.navigation || [
+    { label: 'Features', href: '/#features' },
+    { label: 'Pricing', href: '/pricing' },
+    { label: 'Docs', href: '/docs' },
+    { label: 'Blog', href: '/blog' },
+  ];
+
+  const itemsStr = navItems
+    .map(item => {
+      const childrenStr = item.children && item.children.length > 0
+        ? `,\n    children: [\n${item.children.map(c => `      { label: '${escapeJsx(c.label)}', href: '${escapeJsx(c.href)}' }`).join(',\n')}\n    ]`
+        : '';
+      return `  { label: '${escapeJsx(item.label)}', href: '${escapeJsx(item.href)}'${childrenStr} }`;
+    })
+    .join(',\n');
+
+  return `/**
+ * Navigation configuration
+ * Exported for use in Header and mobile navigation components
+ */
+
+export interface NavItem {
+  label: string;
+  href: string;
+  children?: NavItem[];
+}
+
+export const NAV_ITEMS: NavItem[] = [
+${itemsStr}
+];
+`;
+}