whale-igniter 1.4.0 → 1.5.2

package/dist/commands/createLanding.js

@@ -1,21 +1,26 @@
 import path from "node:path";
 import fs from "fs-extra";
+import prompts from "prompts";
 import { resolveTarget } from "../utils/paths.js";
 import { loadConfig } from "../utils/config.js";
 import { upsertComponent } from "../utils/components.js";
 import { generateWiki } from "../generators/wikiGenerator.js";
 import { ui } from "../ui/index.js";
 import { loadUiTheme, DEFAULT_UI_THEME } from "../themes/registry.js";
-const DEFAULT_SECTIONS = ["hero", "features", "proof", "contact"];
+const DEFAULT_SECTIONS = ["header", "hero", "features", "proof", "contact", "footer"];
 const VALID_SECTIONS = new Set(DEFAULT_SECTIONS);
+const DEFAULT_CONTENT_FILE = "landing.json";
 export async function createLandingCommand(options = {}) {
     const target = resolveTarget();
     const config = await loadConfig(target);
-    const sections = parseSections(options.sections);
     const shouldRegister = options.register !== false && !options.noRegister;
     const shouldSync = options.sync !== false && !options.noSync;
+    const projectName = config.projectName ?? "Whale Landing";
+    const fallbackTitle = titleize(projectName);
+    const brief = options.brief ? await runLandingBrief(fallbackTitle) : undefined;
+    const sections = parseSections(options.sections ?? brief?.sections);
     if (sections.length === 0) {
-        console.log(ui.fail("No valid sections selected. Use hero,features,proof,contact."));
+        console.log(ui.fail("No valid sections selected. Use header,hero,features,proof,contact,footer."));
         process.exitCode = 1;
         return;
     }
@@ -24,11 +29,16 @@ export async function createLandingCommand(options = {}) {
     const cssRel = path.join(outDir, "styles.css").replace(/\\/g, "/");
     const htmlAbs = path.join(target, htmlRel);
     const cssAbs = path.join(target, cssRel);
+    const shouldWriteContent = !!options.sampleContent || !!options.brief;
+    const contentRel = (options.content ?? DEFAULT_CONTENT_FILE).replace(/\\/g, "/");
+    const contentAbs = path.isAbsolute(contentRel) ? contentRel : path.join(target, contentRel);
     const existing = [];
     if (await fs.pathExists(htmlAbs))
         existing.push(htmlRel);
     if (await fs.pathExists(cssAbs))
         existing.push(cssRel);
+    if (shouldWriteContent && (await fs.pathExists(contentAbs)))
+        existing.push(contentRel);
     if (existing.length > 0 && !options.force) {
         console.log(ui.fail(`${existing.map((f) => ui.path(f)).join(", ")} already exists. Use --force to overwrite.`));
         process.exitCode = 1;
@@ -38,22 +48,30 @@ export async function createLandingCommand(options = {}) {
         console.log(ui.warn(`Project stack is ${ui.code(config.stack)}; generating portable HTML/CSS anyway.`));
     }
     await fs.ensureDir(path.dirname(htmlAbs));
-    const projectName = config.projectName ?? "Whale Landing";
     // Resolve theme: CLI flag → config.theme → DEFAULT_UI_THEME
-    const themeName = options.theme ?? config.theme ?? DEFAULT_UI_THEME;
+    const themeName = options.theme ?? brief?.theme ?? config.theme ?? DEFAULT_UI_THEME;
     const theme = await loadUiTheme(themeName);
     if (!theme) {
         console.log(ui.fail(`Unknown theme '${themeName}'. Run \`whale themes list\`.`));
         process.exitCode = 1;
         return;
     }
-    await fs.writeFile(htmlAbs, renderHtml(projectName, sections), "utf8");
+    const content = await resolveLandingContent(target, fallbackTitle, sections, options, brief?.content);
+    if (!content)
+        return;
+    if (shouldWriteContent) {
+        await fs.ensureDir(path.dirname(contentAbs));
+        await fs.writeJson(contentAbs, content, { spaces: 2 });
+    }
+    await fs.writeFile(htmlAbs, renderHtml(content, sections), "utf8");
     await fs.writeFile(cssAbs, renderCss(theme, {
         includeProof: sections.includes("proof"),
         includeContact: sections.includes("contact")
     }), "utf8");
     console.log(ui.ok(`Created ${ui.path(htmlRel)}`));
     console.log(ui.ok(`Created ${ui.path(cssRel)}`));
+    if (shouldWriteContent)
+        console.log(ui.ok(`Created ${ui.path(contentRel)}`));
     console.log(`  ${ui.kv("sections", sections.join(", "), { keyWidth: 8 })}`);
     console.log(`  ${ui.kv("theme", theme.label, { keyWidth: 8 })}`);
     console.log(`  ${ui.kv("grid", `${theme.structural.grid}px`, { keyWidth: 8 })}`);
@@ -63,7 +81,7 @@ export async function createLandingCommand(options = {}) {
             await upsertComponent(target, {
                 name: sectionName(section),
                 description: sectionDescription(section),
-                category: section === "contact" ? "form" : section === "hero" ? "layout" : "surface",
+                category: section === "contact" ? "form" : section === "header" || section === "footer" ? "navigation" : section === "hero" ? "layout" : "surface",
                 files: [htmlRel, cssRel],
                 variants: section === "contact" ? ["default"] : undefined,
                 states: section === "contact" ? ["focus", "disabled"] : undefined,
@@ -76,6 +94,7 @@ export async function createLandingCommand(options = {}) {
         await generateWiki(target);
         console.log(ui.muted(`${ui.glyph.check} AI context updated`));
     }
+    printLandingHints({ contentRel, hasContent: !!options.content || shouldWriteContent, sections });
 }
 function parseSections(raw) {
     if (!raw)
@@ -93,19 +112,23 @@ function parseSections(raw) {
 }
 function sectionName(section) {
     const map = {
+        header: "LandingHeader",
         hero: "HeroSection",
         features: "FeatureSection",
         proof: "SocialProofSection",
-        contact: "ContactForm"
+        contact: "ContactForm",
+        footer: "LandingFooter"
     };
     return map[section];
 }
 function sectionDescription(section) {
     const map = {
+        header: "Landing header with brand navigation and primary CTA.",
         hero: "Landing hero with headline, value prop and primary CTA.",
         features: "Feature grid for the landing page offer.",
         proof: "Social proof band with customer quotes and trust signals.",
-        contact: "Contact form with accessible labels and focus states."
+        contact: "Contact form with accessible labels and focus states.",
+        footer: "Landing footer with navigation and ownership notes."
     };
     return map[section];
 }
@@ -116,40 +139,354 @@ function titleize(input) {
         .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
         .join(" ");
 }
-function renderHtml(projectName, sections) {
-    const title = titleize(projectName);
-    const blocks = sections.map((section) => renderSection(section, title, sections)).join("\n\n");
+async function resolveLandingContent(target, fallbackTitle, sections, options, briefContent) {
+    const defaults = defaultLandingContent(fallbackTitle, sections);
+    let content = defaults;
+    if (options.sampleContent) {
+        content = mergeLandingContent(content, sampleLandingContent());
+    }
+    else if (briefContent) {
+        content = mergeLandingContent(content, briefContent);
+    }
+    else if (options.content) {
+        const loaded = await loadLandingContentFile(target, options.content);
+        if (!loaded)
+            return null;
+        content = mergeLandingContent(content, loaded);
+    }
+    const flagContent = {};
+    if (options.title)
+        flagContent.title = options.title;
+    if (options.eyebrow)
+        flagContent.eyebrow = options.eyebrow;
+    if (options.tagline)
+        flagContent.subtitle = options.tagline;
+    if (options.cta || options.ctaHref) {
+        flagContent.cta = {
+            ...(options.cta ? { label: options.cta } : {}),
+            ...(options.ctaHref ? { href: options.ctaHref } : {})
+        };
+    }
+    return mergeLandingContent(content, flagContent);
+}
+async function runLandingBrief(fallbackTitle) {
+    console.log(ui.section("Landing brief"));
+    console.log(ui.muted("Answer a few questions. Whale will generate local HTML/CSS and an editable landing.json."));
+    console.log();
+    const onCancel = () => {
+        console.log();
+        console.log(ui.warn("Landing brief cancelled."));
+        process.exit(130);
+    };
+    const answers = await prompts([
+        {
+            type: "text",
+            name: "brand",
+            message: "What are you launching?",
+            initial: fallbackTitle
+        },
+        {
+            type: "text",
+            name: "audience",
+            message: "Who is it for?",
+            initial: "teams moving fast"
+        },
+        {
+            type: "text",
+            name: "action",
+            message: "What should visitors do?",
+            initial: "start a conversation"
+        },
+        {
+            type: "select",
+            name: "theme",
+            message: "Pick a visual tone:",
+            choices: [
+                { title: "Atlas — neutral, enterprise, dense", value: "atlas" },
+                { title: "Harbor — editorial, brand, confident", value: "harbor" },
+                { title: "Aurora — friendly SaaS, airy", value: "aurora" }
+            ]
+        },
+        {
+            type: "multiselect",
+            name: "sections",
+            message: "Sections to generate:",
+            choices: [
+                { title: "Header", value: "header", selected: true },
+                { title: "Hero", value: "hero", selected: true },
+                { title: "Features", value: "features", selected: true },
+                { title: "Proof", value: "proof", selected: true },
+                { title: "Contact", value: "contact", selected: true },
+                { title: "Footer", value: "footer", selected: true }
+            ],
+            min: 1,
+            hint: "space to toggle, enter to confirm"
+        }
+    ], { onCancel });
+    const brand = normalizeBriefText(answers.brand, fallbackTitle);
+    const audience = normalizeBriefText(answers.audience, "teams moving fast");
+    const action = normalizeBriefText(answers.action, "start a conversation");
+    const sections = Array.isArray(answers.sections) ? answers.sections.join(",") : undefined;
+    const title = `${brand} helps ${audience} ${action}.`;
+    return {
+        theme: typeof answers.theme === "string" ? answers.theme : undefined,
+        sections,
+        content: {
+            brand,
+            eyebrow: `For ${audience}`,
+            title,
+            subtitle: `A focused landing page for ${audience}, built to make the next step obvious.`,
+            cta: {
+                label: toTitleCase(action),
+                href: sections?.includes("contact") ? "#contact" : "#features-title"
+            },
+            features: [
+                {
+                    title: "Clarify the offer",
+                    body: "Replace this with the strongest outcome your visitor gets."
+                },
+                {
+                    title: "Show the workflow",
+                    body: "Explain the before and after in one concrete sentence."
+                },
+                {
+                    title: "Make action easy",
+                    body: "Keep the next step specific, visible, and low-friction."
+                }
+            ],
+            proof: {
+                title: `Built for ${audience}.`,
+                quote: `${brand} gives us a clearer way to explain the offer and move serious visitors forward.`,
+                byline: "First customer or internal team"
+            },
+            contact: {
+                title: "Start with the next step",
+                body: "Tell us what you are building and we will follow up with a focused path forward.",
+                submitLabel: toTitleCase(action)
+            }
+        }
+    };
+}
+function normalizeBriefText(value, fallback) {
+    return typeof value === "string" && value.trim().length > 0 ? value.trim() : fallback;
+}
+function toTitleCase(input) {
+    return input
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(" ");
+}
+async function loadLandingContentFile(target, contentPath) {
+    const abs = path.isAbsolute(contentPath) ? contentPath : path.join(target, contentPath);
+    try {
+        const raw = await fs.readJson(abs);
+        const validated = validateLandingContent(raw);
+        if (!validated.ok) {
+            console.log(ui.fail(`${ui.path(contentPath)} is not valid landing content: ${validated.error}`));
+            process.exitCode = 1;
+            return null;
+        }
+        return validated.value;
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        console.log(ui.fail(`Could not read landing content from ${ui.path(contentPath)}: ${message}`));
+        process.exitCode = 1;
+        return null;
+    }
+}
+function validateLandingContent(value) {
+    if (!isRecord(value))
+        return { ok: false, error: "expected a JSON object" };
+    const input = value;
+    for (const key of ["brand", "eyebrow", "title", "subtitle"]) {
+        if (input[key] !== undefined && typeof input[key] !== "string") {
+            return { ok: false, error: `${key} must be a string` };
+        }
+    }
+    if (input.cta !== undefined) {
+        if (!isRecord(input.cta))
+            return { ok: false, error: "cta must be an object" };
+        if (input.cta.label !== undefined && typeof input.cta.label !== "string")
+            return { ok: false, error: "cta.label must be a string" };
+        if (input.cta.href !== undefined && typeof input.cta.href !== "string")
+            return { ok: false, error: "cta.href must be a string" };
+    }
+    if (input.features !== undefined) {
+        if (!Array.isArray(input.features))
+            return { ok: false, error: "features must be an array" };
+        if (input.features.length < 1 || input.features.length > 6)
+            return { ok: false, error: "features must contain 1 to 6 items" };
+        for (const feature of input.features) {
+            if (!isRecord(feature))
+                return { ok: false, error: "each feature must be an object" };
+            if (typeof feature.title !== "string" || typeof feature.body !== "string") {
+                return { ok: false, error: "each feature needs string title and body" };
+            }
+        }
+    }
+    for (const key of ["proof", "contact"]) {
+        const section = input[key];
+        if (section !== undefined) {
+            if (!isRecord(section))
+                return { ok: false, error: `${key} must be an object` };
+            for (const [field, fieldValue] of Object.entries(section)) {
+                if (fieldValue !== undefined && typeof fieldValue !== "string") {
+                    return { ok: false, error: `${key}.${field} must be a string` };
+                }
+            }
+        }
+    }
+    return { ok: true, value: input };
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function defaultLandingContent(title, sections) {
+    const ctaTarget = sections.includes("contact")
+        ? "#contact"
+        : sections.includes("features")
+            ? "#features-title"
+            : "#";
+    return {
+        brand: title,
+        eyebrow: "Launch-ready landing",
+        title: `${title} turns interest into qualified conversations.`,
+        subtitle: "A focused page with clear benefits, trust signals and a path that is easy to scan.",
+        cta: {
+            label: "Start a conversation",
+            href: ctaTarget
+        },
+        features: [
+            {
+                title: "Clear offer",
+                body: "A direct headline and CTA keep the first screen focused."
+            },
+            {
+                title: "Readable proof",
+                body: "Compact testimonials and metrics make trust easy to evaluate."
+            },
+            {
+                title: "Low-friction contact",
+                body: "The form asks only for the details needed to continue."
+            }
+        ],
+        proof: {
+            eyebrow: "Social proof",
+            title: "Built for teams that need momentum.",
+            quote: "The page gave us a cleaner way to explain the offer and capture serious leads.",
+            byline: "Marina Silva, Growth Lead"
+        },
+        contact: {
+            eyebrow: "Contact",
+            title: "Tell us what you want to launch.",
+            body: "Share a few details and we will follow up with next steps.",
+            submitLabel: "Send message"
+        }
+    };
+}
+function sampleLandingContent() {
+    return {
+        brand: "FuelForge",
+        eyebrow: "Nutrition planning",
+        title: "Meal planning for athletes who train hard.",
+        subtitle: "Build training-aware menus, grocery lists, and coach-ready exports without rebuilding spreadsheets.",
+        cta: {
+            label: "Request early access",
+            href: "#contact"
+        },
+        features: [
+            {
+                title: "Training-aware macros",
+                body: "Adjust calories and macros by phase, intensity, and recovery days."
+            },
+            {
+                title: "Smart grocery lists",
+                body: "Turn a week of meals into a clean shopping plan."
+            },
+            {
+                title: "Coach-ready exports",
+                body: "Share plans with athletes, coaches, or nutritionists."
+            }
+        ],
+        proof: {
+            eyebrow: "Proof",
+            title: "Built for coaches moving fast.",
+            quote: "FuelForge cut weekly meal planning from two hours to twenty minutes.",
+            byline: "Maya R., endurance coach"
+        },
+        contact: {
+            eyebrow: "Early access",
+            title: "Plan your next training block",
+            body: "Tell us what you are building and we will help map the first week.",
+            submitLabel: "Request access"
+        }
+    };
+}
+function mergeLandingContent(base, next) {
+    return {
+        ...base,
+        ...definedPick(next, ["brand", "eyebrow", "title", "subtitle"]),
+        cta: { ...base.cta, ...definedPick(next.cta ?? {}, ["label", "href"]) },
+        features: next.features ?? base.features,
+        proof: { ...base.proof, ...definedPick(next.proof ?? {}, ["eyebrow", "title", "quote", "byline"]) },
+        contact: { ...base.contact, ...definedPick(next.contact ?? {}, ["eyebrow", "title", "body", "submitLabel"]) }
+    };
+}
+function definedPick(source, keys) {
+    const out = {};
+    for (const key of keys) {
+        if (source[key] !== undefined)
+            out[key] = source[key];
+    }
+    return out;
+}
+function renderHtml(content, sections) {
+    const header = sections.includes("header") ? `${indent(renderSection("header", content, sections), 4)}\n` : "";
+    const footer = sections.includes("footer") ? `\n${indent(renderSection("footer", content, sections), 4)}` : "";
+    const mainBlocks = sections
+        .filter((section) => section !== "header" && section !== "footer")
+        .map((section) => renderSection(section, content, sections))
+        .join("\n\n");
     return `<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>${title}</title>
+    <title>${escapeHtml(content.brand)}</title>
     <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
+${header}
     <main>
-${indent(blocks, 6)}
+${indent(mainBlocks, 6)}
     </main>
+${footer}
   </body>
 </html>
 `;
 }
-function renderSection(section, title, sections) {
+function renderSection(section, content, sections) {
     switch (section) {
+        case "header":
+            return `<header class="site-header">
+  <div class="section__inner site-header__inner">
+    <a class="brand-link" href="#hero-title">${escapeHtml(content.brand)}</a>
+    <nav class="site-nav" aria-label="Primary">
+${indent(renderNavLinks(sections), 6)}
+    </nav>
+    <a class="button button--compact" href="${escapeAttr(content.cta.href)}">${escapeHtml(content.cta.label)}</a>
+  </div>
+</header>`;
         case "hero": {
-            const ctaTarget = sections.includes("contact")
-                ? "#contact"
-                : sections.includes("features")
-                    ? "#features-title"
-                    : "#";
             return `<section class="section hero" aria-labelledby="hero-title">
   <div class="section__inner hero__grid">
     <div class="hero__copy">
-      <p class="eyebrow">Launch-ready landing</p>
-      <h1 id="hero-title">${title} turns interest into qualified conversations.</h1>
-      <p class="lede">A focused page with clear benefits, trust signals and a path that is easy to scan.</p>
-      <a class="button" href="${ctaTarget}">Start a conversation</a>
+      <p class="eyebrow">${escapeHtml(content.eyebrow)}</p>
+      <h1 id="hero-title">${escapeHtml(content.title)}</h1>
+      <p class="lede">${escapeHtml(content.subtitle)}</p>
+      <a class="button" href="${escapeAttr(content.cta.href)}">${escapeHtml(content.cta.label)}</a>
     </div>
     <div class="hero__panel" aria-label="Landing page highlights">
       <span>Fast setup</span>
@@ -165,18 +502,7 @@ function renderSection(section, title, sections) {
     <p class="eyebrow">Why it works</p>
     <h2 id="features-title">Everything a simple landing needs.</h2>
     <div class="feature-grid">
-      <article class="card">
-        <h3>Clear offer</h3>
-        <p>A direct headline and CTA keep the first screen focused.</p>
-      </article>
-      <article class="card">
-        <h3>Readable proof</h3>
-        <p>Compact testimonials and metrics make trust easy to evaluate.</p>
-      </article>
-      <article class="card">
-        <h3>Low-friction contact</h3>
-        <p>The form asks only for the details needed to continue.</p>
-      </article>
+${indent(content.features.map(renderFeature).join("\n"), 6)}
     </div>
   </div>
 </section>`;
@@ -184,12 +510,12 @@ function renderSection(section, title, sections) {
             return `<section class="section proof" aria-labelledby="proof-title">
   <div class="section__inner proof__grid">
     <div>
-      <p class="eyebrow">Social proof</p>
-      <h2 id="proof-title">Built for teams that need momentum.</h2>
+      <p class="eyebrow">${escapeHtml(content.proof.eyebrow)}</p>
+      <h2 id="proof-title">${escapeHtml(content.proof.title)}</h2>
     </div>
     <blockquote>
-      <p>"The page gave us a cleaner way to explain the offer and capture serious leads."</p>
-      <cite>Marina Silva, Growth Lead</cite>
+      <p>"${escapeHtml(content.proof.quote)}"</p>
+      <cite>${escapeHtml(content.proof.byline)}</cite>
     </blockquote>
   </div>
 </section>`;
@@ -197,9 +523,9 @@ function renderSection(section, title, sections) {
             return `<section class="section contact" id="contact" aria-labelledby="contact-title">
   <div class="section__inner contact__grid">
     <div>
-      <p class="eyebrow">Contact</p>
-      <h2 id="contact-title">Tell us what you want to launch.</h2>
-      <p class="lede">Share a few details and we will follow up with next steps.</p>
+      <p class="eyebrow">${escapeHtml(content.contact.eyebrow)}</p>
+      <h2 id="contact-title">${escapeHtml(content.contact.title)}</h2>
+      <p class="lede">${escapeHtml(content.contact.body)}</p>
     </div>
     <form class="contact-form">
       <label>
@@ -214,12 +540,64 @@ function renderSection(section, title, sections) {
         Message
         <textarea name="message" rows="4" required></textarea>
       </label>
-      <button class="button" type="submit">Send message</button>
+      <button class="button" type="submit">${escapeHtml(content.contact.submitLabel)}</button>
     </form>
   </div>
 </section>`;
+        case "footer":
+            return `<footer class="site-footer">
+  <div class="section__inner site-footer__inner">
+    <strong>${escapeHtml(content.brand)}</strong>
+    <nav class="site-nav" aria-label="Footer">
+${indent(renderNavLinks(sections), 6)}
+    </nav>
+    <span>Built as local HTML/CSS. Edit landing.json and regenerate anytime.</span>
+  </div>
+</footer>`;
     }
 }
+function renderNavLinks(sections) {
+    const links = [
+        ["features", "#features-title", "Features"],
+        ["proof", "#proof-title", "Proof"],
+        ["contact", "#contact", "Contact"]
+    ];
+    return links
+        .filter(([section]) => sections.includes(section))
+        .map(([, href, label]) => `<a href="${href}">${label}</a>`)
+        .join("\n");
+}
+function renderFeature(feature) {
+    return `<article class="card">
+  <h3>${escapeHtml(feature.title)}</h3>
+  <p>${escapeHtml(feature.body)}</p>
+</article>`;
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+function escapeAttr(value) {
+    return escapeHtml(value).replace(/'/g, "&#39;");
+}
+function printLandingHints(args) {
+    console.log();
+    console.log(ui.section("Next edits"));
+    const contentHint = args.hasContent
+        ? `edit ${args.contentRel}, then rerun with --content ${args.contentRel} --force`
+        : `create landing.json with --sample-content or --brief`;
+    const lines = [
+        `${ui.kv("product", "tighten the headline and CTA around one visitor action", { keyWidth: 8 })}`,
+        `${ui.kv("copy", contentHint, { keyWidth: 8 })}`,
+        `${ui.kv("design", "try --theme atlas | harbor | aurora", { keyWidth: 8 })}`,
+        `${ui.kv("scope", `trim sections with --sections ${args.sections.join(",")}`, { keyWidth: 8 })}`,
+        `${ui.kv("dev", "wire the form action in src/index.html", { keyWidth: 8 })}`
+    ];
+    console.log(ui.indent(lines.join("\n")));
+}
 function renderCss(theme, opts) {
     const { includeProof, includeContact } = opts;
     const { identity, typography, structural, interaction } = theme;
@@ -259,6 +637,13 @@ function renderCss(theme, opts) {
 
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; }
+
+  .button:hover,
+  .card:hover,
+  .hero__panel:hover,
+  blockquote:hover {
+    transform: none !important;
+  }
 }
 
 * {
@@ -270,12 +655,66 @@ body {
   font-family: var(--font-body);
   color: var(--color-text);
   background: var(--color-bg);
+  overflow-x: hidden;
 }
 
 a {
   color: inherit;
 }
 
+.site-header,
+.site-footer {
+  padding: calc(var(--space-grid) * 2) calc(var(--space-grid) * 3);
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
+  backdrop-filter: blur(12px);
+}
+
+.site-header__inner,
+.site-footer__inner {
+  display: flex;
+  gap: calc(var(--space-grid) * 2);
+  align-items: center;
+  justify-content: space-between;
+}
+
+.brand-link {
+  color: var(--color-text);
+  font-weight: 800;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.site-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-grid) calc(var(--space-grid) * 2);
+  align-items: center;
+  justify-content: center;
+}
+
+.site-nav a {
+  color: var(--color-muted);
+  font-weight: 700;
+  text-decoration: none;
+  transition: color var(--motion-duration) var(--motion-ease);
+}
+
+.site-nav a:hover {
+  color: var(--color-accent-strong);
+}
+
+.site-footer {
+  border-top: var(--border-width) solid var(--color-border);
+  color: var(--color-muted);
+}
+
 .section {
   padding: calc(var(--space-grid) * 8) calc(var(--space-grid) * 3);
 }
@@ -284,6 +723,7 @@ a {
   width: 100%;
   max-width: calc(var(--space-grid) * 140);
   margin: 0 auto;
+  min-width: 0;
 }
 
 .hero {
@@ -301,12 +741,21 @@ a {
   align-items: center;
 }
 
+.hero__copy,
+.hero__panel,
+.contact-form,
+.card,
+blockquote {
+  min-width: 0;
+}
+
 .eyebrow {
   margin: 0 0 calc(var(--space-grid) * 2);
   color: var(--color-accent-strong);
   font-size: 0.875rem;
   font-weight: 700;
   text-transform: uppercase;
+  overflow-wrap: anywhere;
 }
 
 h1,
@@ -320,21 +769,24 @@ h1 {
   max-width: calc(var(--space-grid) * 88);
   margin-bottom: calc(var(--space-grid) * 3);
   font-family: var(--font-display);
-  font-size: clamp(2.5rem, 6vw, 4.5rem);
-  line-height: 1;
+  font-size: clamp(2.25rem, 10vw, 4.5rem);
+  line-height: 1.02;
+  overflow-wrap: anywhere;
 }
 
 h2 {
   max-width: calc(var(--space-grid) * 80);
   margin-bottom: calc(var(--space-grid) * 4);
   font-family: var(--font-display);
-  font-size: clamp(2rem, 4vw, 3rem);
+  font-size: clamp(1.75rem, 7vw, 3rem);
   line-height: 1.1;
+  overflow-wrap: anywhere;
 }
 
 h3 {
   margin-bottom: var(--space-grid);
   font-size: 1.125rem;
+  overflow-wrap: anywhere;
 }
 
 .lede {
@@ -343,11 +795,13 @@ h3 {
   color: var(--color-muted);
   font-size: 1.125rem;
   line-height: 1.6;
+  overflow-wrap: anywhere;
 }
 
 .button {
   display: inline-flex;
   min-height: calc(var(--space-grid) * 6);
+  max-width: 100%;
   align-items: center;
   justify-content: center;
   padding: var(--space-grid) calc(var(--space-grid) * 3);
@@ -357,13 +811,25 @@ h3 {
   color: var(--color-on-accent);
   font: inherit;
   font-weight: 700;
+  text-align: center;
   text-decoration: none;
   cursor: pointer;
-  transition: background var(--motion-duration) var(--motion-ease);
+  transition:
+    background var(--motion-duration) var(--motion-ease),
+    box-shadow var(--motion-duration) var(--motion-ease),
+    transform var(--motion-duration) var(--motion-ease);
+  overflow-wrap: anywhere;
+}
+
+.button--compact {
+  min-height: calc(var(--space-grid) * 5);
+  padding: calc(var(--space-grid) * 0.75) calc(var(--space-grid) * 2);
 }
 
 .button:hover {
   background: var(--color-accent-strong);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-accent) 20%, transparent);
 }
 
 .button:focus-visible,
@@ -386,27 +852,50 @@ blockquote,
   display: grid;
   gap: calc(var(--space-grid) * 2);
   padding: calc(var(--space-grid) * 4);
+  overflow-wrap: anywhere;
+  transition:
+    border-color var(--motion-duration) var(--motion-ease),
+    transform var(--motion-duration) var(--motion-ease),
+    box-shadow var(--motion-duration) var(--motion-ease);
+}
+
+.hero__panel:hover,
+.card:hover,
+blockquote:hover {
+  border-color: var(--color-accent);
+  transform: translateY(-2px);
 }
 
 .hero__panel strong {
-  font-size: 2rem;
+  font-size: clamp(1.75rem, 8vw, 2rem);
+  line-height: 1.1;
 }
 
 .feature-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-grid) * 30)), 1fr));
   gap: calc(var(--space-grid) * 3);
 }
 
 .card {
   padding: calc(var(--space-grid) * 3);
+  overflow-wrap: anywhere;
+  transition:
+    border-color var(--motion-duration) var(--motion-ease),
+    transform var(--motion-duration) var(--motion-ease),
+    box-shadow var(--motion-duration) var(--motion-ease);
 }
 ${includeProof ? proofCss() : ""}
 ${includeContact ? contactCss() : ""}
-@media (max-width: calc(var(--space-grid) * 96)) {
+@media (max-width: ${g * 96}px) {
   .hero__grid,
   .contact__grid,
-  .proof__grid,
+  .proof__grid {
+    grid-template-columns: 1fr;
+    gap: calc(var(--space-grid) * 4);
+    align-items: stretch;
+  }
+
   .feature-grid {
     grid-template-columns: 1fr;
   }
@@ -414,6 +903,45 @@ ${includeContact ? contactCss() : ""}
   .section {
     padding: calc(var(--space-grid) * 6) calc(var(--space-grid) * 2);
   }
+
+  .hero {
+    min-height: auto;
+  }
+
+  .button {
+    width: 100%;
+  }
+
+  .contact-form {
+    width: 100%;
+  }
+
+  .site-header {
+    position: static;
+  }
+
+  .site-header__inner,
+  .site-footer__inner {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .site-nav {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: ${g * 56}px) {
+  .section {
+    padding: calc(var(--space-grid) * 5) calc(var(--space-grid) * 1.5);
+  }
+
+  .hero__panel,
+  .card,
+  blockquote,
+  .contact-form {
+    padding: calc(var(--space-grid) * 2);
+  }
 }
 `;
 }
@@ -457,6 +985,7 @@ label {
 input,
 textarea {
   width: 100%;
+  min-width: 0;
   padding: var(--space-grid) calc(var(--space-grid) * 2);
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-control);