Upload 79 files

README.md

@@ -74,8 +74,14 @@ Open http://127.0.0.1:5173 (proxies API to port 8000).
 - `GET /v1/auth/config`
 - `GET /v1/me` (Bearer token when auth enabled)
 - `POST /v1/rewrite` (Bearer token when auth enabled)
+- `POST /v1/grammar`
 - `POST /v1/similarity`
 
+## Products
+
+- **ZuZu Writer** — tone-aware classical NLP rewrite
+- **ZuZu Grammar** — preview grammar / spelling / punctuation checker
+
 ## Docker
 
 ```bash

app/main.py

@@ -26,6 +26,7 @@ from app.billing.quota import (
 )
 from app.bootstrap import ensure_resources
 from app.config import APP_TITLE, AUTH_ENABLED, MAX_CHARS
+from app.pipeline.grammar import check_grammar
 from app.pipeline.nlp import spacy_available
 from app.pipeline.orchestrator import rewrite_text, similarity_check
 from app.pipeline.tones import normalize_tone
@@ -34,7 +35,7 @@ ensure_resources()
 
 STATIC_DIR = ROOT / "frontend" / "dist"
 
-app = FastAPI(title=APP_TITLE, version="2.2.0")
+app = FastAPI(title=APP_TITLE, version="2.3.0")
 
 app.add_middleware(
     CORSMiddleware,
@@ -57,6 +58,10 @@ class SimilarityRequest(BaseModel):
     reference: str
 
 
+class GrammarRequest(BaseModel):
+    text: str = Field(..., min_length=1)
+
+
 def _client_ip(request: Request) -> str:
     forwarded = request.headers.get("x-forwarded-for") or ""
     if forwarded:
@@ -163,6 +168,24 @@ def api_similarity(
     }
 
 
+@app.post("/v1/grammar")
+def api_grammar(
+    body: GrammarRequest,
+    user: AuthUser | None = Depends(optional_user),
+):
+    """ZuZu Grammar — classical rule checks (preview engine)."""
+    _ = user
+    text = (body.text or "").strip()
+    if not text:
+        raise HTTPException(status_code=400, detail="Paste some text to check.")
+    if len(text) > MAX_CHARS:
+        raise HTTPException(
+            status_code=413,
+            detail=f"Text is too long ({len(text):,} chars). Max is {MAX_CHARS:,}.",
+        )
+    return check_grammar(text)
+
+
 def _register_frontend() -> None:
     if not STATIC_DIR.is_dir():
         return
@@ -201,6 +224,13 @@ def _register_frontend() -> None:
             return FileResponse(png, media_type="image/png")
         raise HTTPException(status_code=404)
 
+    @app.get("/zuzu-logo.png")
+    def logo_png():
+        png = STATIC_DIR / "zuzu-logo.png"
+        if png.is_file():
+            return FileResponse(png, media_type="image/png")
+        raise HTTPException(status_code=404)
+
     @app.get("/apple-touch-icon.png")
     def apple_touch_icon():
         png = STATIC_DIR / "apple-touch-icon.png"

app/pipeline/grammar.py

@@ -0,0 +1,181 @@
+"""Lightweight classical grammar / mechanics checker (no LLM)."""
+
+from __future__ import annotations
+
+import re
+from dataclasses import asdict, dataclass
+
+
+@dataclass
+class GrammarIssue:
+    id: str
+    start: int
+    end: int
+    message: str
+    suggestion: str | None
+    category: str  # spelling | grammar | punctuation | style
+
+
+def _word_count(text: str) -> int:
+    return len(text.split()) if text.strip() else 0
+
+
+def check_grammar(text: str) -> dict:
+    """Return issues with offsets into the original text."""
+    issues: list[GrammarIssue] = []
+    if not text or not text.strip():
+        return {"issues": [], "input_words": 0, "engine": "rules"}
+
+    # Double (or more) spaces
+    for m in re.finditer(r" {2,}", text):
+        issues.append(
+            GrammarIssue(
+                id=f"spaces-{m.start()}",
+                start=m.start(),
+                end=m.end(),
+                message="Extra spaces.",
+                suggestion=" ",
+                category="punctuation",
+            )
+        )
+
+    # Space before punctuation
+    for m in re.finditer(r"\s+([,.!?;:])", text):
+        issues.append(
+            GrammarIssue(
+                id=f"space-punct-{m.start()}",
+                start=m.start(),
+                end=m.end(),
+                message="Remove the space before punctuation.",
+                suggestion=m.group(1),
+                category="punctuation",
+            )
+        )
+
+    # Missing space after punctuation (except decimals / ellipsis-ish)
+    for m in re.finditer(r"([,.!?;:])([A-Za-z])", text):
+        issues.append(
+            GrammarIssue(
+                id=f"punct-space-{m.start()}",
+                start=m.start(),
+                end=m.end(),
+                message="Add a space after punctuation.",
+                suggestion=f"{m.group(1)} {m.group(2)}",
+                category="punctuation",
+            )
+        )
+
+    # Repeated consecutive words (case-insensitive)
+    for m in re.finditer(r"\b([A-Za-z']+)\s+\1\b", text, flags=re.IGNORECASE):
+        issues.append(
+            GrammarIssue(
+                id=f"repeat-{m.start()}",
+                start=m.start(),
+                end=m.end(),
+                message="Repeated word.",
+                suggestion=m.group(1),
+                category="grammar",
+            )
+        )
+
+    # Standalone lowercase "i"
+    for m in re.finditer(r"(?<![A-Za-z])i(?![A-Za-z])", text):
+        issues.append(
+            GrammarIssue(
+                id=f"cap-i-{m.start()}",
+                start=m.start(),
+                end=m.end(),
+                message='Capitalize the pronoun "I".',
+                suggestion="I",
+                category="grammar",
+            )
+        )
+
+    # Sentence start should be capitalized (after . ! ? or start of text)
+    for m in re.finditer(r"(?:^|[.!?]\s+)([a-z])", text):
+        issues.append(
+            GrammarIssue(
+                id=f"sent-cap-{m.start(1)}",
+                start=m.start(1),
+                end=m.end(1),
+                message="Sentences usually start with a capital letter.",
+                suggestion=m.group(1).upper(),
+                category="grammar",
+            )
+        )
+
+    # Common confused pairs (simple lexicon)
+    swaps = {
+        r"\bteh\b": ("the", "Possible typo."),
+        r"\badn\b": ("and", "Possible typo."),
+        r"\byoru\b": ("your", "Possible typo."),
+        r"\brecieve\b": ("receive", "Spelling."),
+        r"\bseperate\b": ("separate", "Spelling."),
+        r"\boccurence\b": ("occurrence", "Spelling."),
+        r"\bdefinately\b": ("definitely", "Spelling."),
+        r"\bactully\b": ("actually", "Spelling."),
+        r"\bwether\b": ("whether", "Spelling."),
+        r"\bthier\b": ("their", "Spelling."),
+    }
+    for pattern, (fix, msg) in swaps.items():
+        for m in re.finditer(pattern, text, flags=re.IGNORECASE):
+            # Preserve simple case for first letter
+            repl = fix if m.group(0)[0].islower() else fix[:1].upper() + fix[1:]
+            issues.append(
+                GrammarIssue(
+                    id=f"spell-{m.start()}-{fix}",
+                    start=m.start(),
+                    end=m.end(),
+                    message=msg,
+                    suggestion=repl,
+                    category="spelling",
+                )
+            )
+
+    # a/an before vowel sound (very rough: vowel letter)
+    for m in re.finditer(r"\b([Aa])\s+([aeiouAEIOU]\w*)\b", text):
+        article = "an" if m.group(1).islower() else "An"
+        issues.append(
+            GrammarIssue(
+                id=f"a-an-{m.start()}",
+                start=m.start(),
+                end=m.start() + len(m.group(1)),
+                message='Use "an" before a vowel sound.',
+                suggestion=article,
+                category="grammar",
+            )
+        )
+    for m in re.finditer(r"\b([Aa]n)\s+([bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ]\w*)\b", text):
+        # skip silent-h / vowel-sound exceptions later; keep conservative for consonants
+        word = m.group(2).lower()
+        if word.startswith(("hour", "honest", "honor", "honour", "heir")):
+            continue
+        article = "a" if m.group(1)[0].islower() else "A"
+        issues.append(
+            GrammarIssue(
+                id=f"an-a-{m.start()}",
+                start=m.start(),
+                end=m.start() + len(m.group(1)),
+                message='Use "a" before a consonant sound.',
+                suggestion=article,
+                category="grammar",
+            )
+        )
+
+    # Prefer more specific / longer matches when ranges overlap
+    priority = {"spelling": 0, "grammar": 1, "punctuation": 2, "style": 3}
+    issues.sort(key=lambda i: (i.start, -(i.end - i.start), priority.get(i.category, 9)))
+    filtered: list[GrammarIssue] = []
+    last_end = -1
+    for issue in issues:
+        if issue.start < last_end:
+            continue
+        filtered.append(issue)
+        last_end = issue.end
+
+    return {
+        "issues": [asdict(i) for i in filtered],
+        "input_words": _word_count(text),
+        "engine": "rules",
+        "note": "Preview grammar rules. Fuller LanguageTool-style checks coming next.",
+    }

frontend/dist/assets/index.css

@@ -168,7 +168,234 @@ textarea {
   align-items: flex-end;
   justify-content: space-between;
   gap: 1.5rem;
-  margin-bottom: 1.35rem;
+  margin-bottom: 0.85rem;
+}
+
+.site-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem 1rem;
+  margin-top: 0.85rem;
+  align-items: center;
+}
+
+.site-nav a,
+.site-nav .nav-product {
+  font-family: var(--font-body);
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ink-soft);
+  text-decoration: none;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.site-nav a:hover,
+.site-nav .nav-product:hover {
+  color: var(--accent);
+}
+
+.product-switcher {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-bottom: 1rem;
+  padding: 0.3rem;
+  border-radius: 14px;
+  border: 1px solid var(--panel-edge);
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: 0 6px 18px rgba(15, 36, 28, 0.04);
+}
+
+.product-switcher button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border: none;
+  background: transparent;
+  color: var(--ink-soft);
+  font-family: var(--font-body);
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 0.55rem 0.95rem;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.product-switcher button.active {
+  background: linear-gradient(165deg, #0f7a5f, #0b614c);
+  color: #fff8f0;
+  box-shadow: 0 6px 16px rgba(15, 122, 95, 0.22);
+}
+
+.product-switcher button.active .product-pill {
+  background: rgba(255, 248, 240, 0.2);
+  color: #fff8f0;
+}
+
+.product-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 0.15rem 0.4rem;
+  border-radius: 999px;
+  background: rgba(226, 90, 60, 0.12);
+  color: var(--coral);
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.product-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  padding: 1.25rem 1.2rem;
+  border-radius: 18px;
+  border: 1px solid var(--panel-edge);
+  background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(232, 245, 239, 0.75));
+}
+
+.product-card-grammar {
+  background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(255, 236, 228, 0.8));
+  border-color: rgba(226, 90, 60, 0.22);
+}
+
+.product-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.product-card h3 {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.product-tagline {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+}
+
+.product-card p {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.product-card ul {
+  margin: 0;
+  padding-left: 1.1rem;
+  color: var(--ink-soft);
+  font-size: 0.86rem;
+  line-height: 1.55;
+  flex: 1;
+}
+
+.product-card .btn {
+  align-self: flex-start;
+  margin-top: 0.35rem;
+}
+
+.grammar-lead {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.88rem;
+  max-width: 36rem;
+  line-height: 1.45;
+}
+
+.grammar-issues-pane {
+  min-height: 18rem;
+}
+
+.issue-count {
+  font-size: 0.78rem;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.issue-list {
+  list-style: none;
+  margin: 0;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  overflow: auto;
+  max-height: 22rem;
+}
+
+.issue-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 0.85rem;
+  border-radius: 12px;
+  border: 1px solid var(--panel-edge);
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.issue-cat {
+  display: inline-block;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 0.25rem;
+}
+
+.issue-item.cat-spelling .issue-cat {
+  color: var(--coral);
+}
+
+.issue-item.cat-punctuation .issue-cat {
+  color: #2a6f97;
+}
+
+.issue-main p {
+  margin: 0 0 0.35rem;
+  font-size: 0.88rem;
+  color: var(--ink);
+}
+
+.issue-snippet {
+  display: block;
+  font-size: 0.78rem;
+  color: var(--ink-soft);
+  background: rgba(15, 36, 28, 0.04);
+  padding: 0.25rem 0.4rem;
+  border-radius: 6px;
+  white-space: pre-wrap;
+}
+
+.grammar-empty {
+  margin: 0;
+  padding: 1.25rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+@media (max-width: 820px) {
+  .product-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .brand {

frontend/dist/assets/index.js

@@ -347,6 +347,77 @@ function AuthModal({ open, onClose, initialMode, title }) {
   );
 }
 
+
+const PRODUCTS = [
+  {
+    id: "writer",
+    name: "ZuZu Writer",
+    short: "Writer",
+    tagline: "Turn AI drafts into natural wording.",
+    blurb: "Rewrite ChatGPT, Gemini, and Claude text in Neutral, Casual, Formal, or Academic tone — classical NLP, no LLM.",
+    status: "live",
+  },
+  {
+    id: "grammar",
+    name: "ZuZu Grammar",
+    short: "Grammar",
+    tagline: "Catch grammar and spelling before you publish.",
+    blurb: "Scan drafts for grammar, punctuation, and common spelling issues, then apply fixes with one click.",
+    status: "preview",
+  },
+];
+
+const GRAMMAR_SAMPLE = "teh quick brown fox jump over the lazy dog. i think this sentance is seperate from the other one and it it needs fixing.";
+
+async function checkGrammar(text, accessToken) {
+  const headers = { "Content-Type": "application/json" };
+  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+  const res = await fetch("/v1/grammar", { method: "POST", headers, body: JSON.stringify({ text }) });
+  if (!res.ok) {
+    let detail = "Grammar check failed.";
+    try { const data = await res.json(); detail = data.detail || detail; } catch (_) {}
+    throw new Error(typeof detail === "string" ? detail : "Grammar check failed.");
+  }
+  return res.json();
+}
+
+function applyGrammarFix(text, issue) {
+  if (issue.suggestion == null) return text;
+  return text.slice(0, issue.start) + issue.suggestion + text.slice(issue.end);
+}
+
+function applyAllGrammarFixes(text, issues) {
+  let next = text;
+  const ordered = [...issues].sort((a, b) => b.start - a.start);
+  for (const issue of ordered) {
+    if (issue.suggestion == null) continue;
+    next = applyGrammarFix(next, issue);
+  }
+  return next;
+}
+
+function ProductSwitcher({ product, onChange }) {
+  return h("div", { className: "product-switcher", role: "tablist", "aria-label": "Products" },
+    PRODUCTS.map((p) => h("button", {
+      key: p.id,
+      type: "button",
+      role: "tab",
+      "aria-selected": product === p.id,
+      className: product === p.id ? "active" : "",
+      onClick: () => onChange(p.id),
+    }, p.short, p.status === "preview" ? h("span", { className: "product-pill" }, "Preview") : null)),
+  );
+}
+
+function SiteNav({ product, onSelectProduct }) {
+  return h("nav", { className: "site-nav", "aria-label": "Site" },
+    h("a", { href: "#products" }, "Products"),
+    h("a", { href: "#plans" }, "Plans"),
+    h("button", { type: "button", className: "nav-product", onClick: () => onSelectProduct("writer") }, product === "writer" ? "Open Writer" : "Writer"),
+    h("button", { type: "button", className: "nav-product", onClick: () => onSelectProduct("grammar") }, product === "grammar" ? "Open Grammar" : "Grammar"),
+  );
+}
+
 function UpgradeCard({ account, plans, onSignUp, onSignIn }) {
   const planId = (account && account.plan && account.plan.id) || "guest";
   if (planId === "pro" || planId === "plus") return null;
@@ -398,64 +469,66 @@ function UpgradeCard({ account, plans, onSignUp, onSignIn }) {
   );
 }
 
-function LandingSections({ plans, onSignUp, authEnabled }) {
+function LandingSections({ plans, onSignUp, authEnabled, onSelectProduct }) {
   const free = plans.find((p) => p.id === "free");
   const pro = plans.find((p) => p.id === "pro");
   const plus = plans.find((p) => p.id === "plus");
 
   return h("div", { className: "landing" },
-    h("section", { className: "land-block" },
-      h("h2", null, "How to use ZuZu Writer"),
-      h("p", { className: "land-lead" }, "Three steps from AI draft to natural wording."),
-      h("ol", { className: "steps" },
-        h("li", null,
-          h("span", { className: "step-num" }, "1"),
-          h("div", null,
-            h("strong", null, "Paste your AI text"),
-            h("p", null, "Drop in a ChatGPT, Gemini, or Claude draft on the left."),
-          ),
-        ),
-        h("li", null,
-          h("span", { className: "step-num" }, "2"),
-          h("div", null,
-            h("strong", null, "Pick tone & strength"),
-            h("p", null, "Neutral, Casual, Formal, or Academic — match the voice you need."),
+    h("section", { className: "land-block", id: "products" },
+      h("h2", null, "Our products"),
+      h("p", { className: "land-lead" }, "Two focused tools under ZuZu — pick the job you need today."),
+      h("div", { className: "product-grid" },
+        PRODUCTS.map((p) => h("article", { key: p.id, className: `product-card product-card-${p.id}` },
+          h("div", { className: "product-card-top" },
+            h("h3", null, p.name),
+            p.status === "preview" ? h("span", { className: "product-pill" }, "Preview") : null,
           ),
-        ),
-        h("li", null,
-          h("span", { className: "step-num" }, "3"),
-          h("div", null,
-            h("strong", null, "Rewrite, then unlock more"),
-            h("p", null, "Try a short preview, sign up for Free, go Pro or Plus when you write every day."),
+          h("p", { className: "product-tagline" }, p.tagline),
+          h("p", null, p.blurb),
+          h("ul", null,
+            ...(p.id === "writer"
+              ? [
+                  h("li", { key: "w1" }, "Tone: Neutral, Casual, Formal, Academic"),
+                  h("li", { key: "w2" }, "Offline classical NLP rewrite engine"),
+                  h("li", { key: "w3" }, "Free preview, then Free / Pro / Plus plans"),
+                ]
+              : [
+                  h("li", { key: "g1" }, "Grammar, punctuation & common spelling"),
+                  h("li", { key: "g2" }, "Click to apply suggested fixes"),
+                  h("li", { key: "g3" }, "Works alongside Writer in the same account"),
+                ]),
           ),
-        ),
+          h("button", {
+            type: "button",
+            className: "btn btn-primary",
+            onClick: () => { onSelectProduct(p.id); window.scrollTo({ top: 0, behavior: "smooth" }); },
+          }, `Open ${p.short}`),
+        )),
+      ),
+    ),
+    h("section", { className: "land-block" },
+      h("h2", null, "How ZuZu works"),
+      h("p", { className: "land-lead" }, "Use Writer to humanize AI drafts, then Grammar to polish before you publish."),
+      h("ol", { className: "steps" },
+        h("li", null, h("span", { className: "step-num" }, "1"), h("div", null, h("strong", null, "Choose a product"), h("p", null, "Switch between Writer and Grammar from the top of the page."))),
+        h("li", null, h("span", { className: "step-num" }, "2"), h("div", null, h("strong", null, "Paste your draft"), h("p", null, "Drop in AI or human text and run Rewrite or Check grammar."))),
+        h("li", null, h("span", { className: "step-num" }, "3"), h("div", null, h("strong", null, "Review, then unlock more"), h("p", null, "Try a short preview, sign up for Free, go Pro or Plus when you write every day."))),
       ),
     ),
     h("section", { className: "land-block" },
-      h("h2", null, "Who it’s for"),
+      h("h2", null, "Who it's for"),
       h("p", { className: "land-lead" }, "Built for people who draft with AI and publish as themselves."),
       h("div", { className: "audience-grid" },
-        h("article", null,
-          h("h3", null, "Students & academic writers"),
-          h("p", null, "Refine AI-assisted notes into clearer Academic or Formal wording. Follow your institution’s rules."),
-        ),
-        h("article", null,
-          h("h3", null, "Freelancers & professionals"),
-          h("p", null, "Turn stiff AI emails and reports into confident, natural communication."),
-        ),
-        h("article", null,
-          h("h3", null, "Bloggers & SEO writers"),
-          h("p", null, "Refresh repetitive AI drafts into readable posts that still keep your meaning."),
-        ),
-        h("article", null,
-          h("h3", null, "Social & content teams"),
-          h("p", null, "Humanize captions and scripts so they sound like your brand, not a model."),
-        ),
+        h("article", null, h("h3", null, "Students & academic writers"), h("p", null, "Refine AI-assisted notes into clearer Academic or Formal wording. Follow your institution's rules.")),
+        h("article", null, h("h3", null, "Freelancers & professionals"), h("p", null, "Turn stiff AI emails and reports into confident, natural communication.")),
+        h("article", null, h("h3", null, "Bloggers & SEO writers"), h("p", null, "Refresh repetitive AI drafts into readable posts that still keep your meaning.")),
+        h("article", null, h("h3", null, "Social & content teams"), h("p", null, "Humanize captions and scripts so they sound like your brand, not a model.")),
       ),
     ),
     h("section", { className: "land-block", id: "plans" },
       h("h2", null, "Simple plans"),
-      h("p", { className: "land-lead" }, "Start on Free. Upgrade to Pro or Plus when you need more words every day."),
+      h("p", { className: "land-lead" }, "One account for Writer today — Grammar preview is included. Checkout for Pro/Plus coming soon."),
       h("div", { className: "pricing-grid" },
         h("article", { className: "price-card" },
           h("h3", null, "Free"),
@@ -463,18 +536,13 @@ function LandingSections({ plans, onSignUp, authEnabled }) {
           h("ul", null,
             h("li", null, `${(free && free.max_words_per_request) || 400} words / rewrite`),
             h("li", null, `${(free && free.daily_rewrites) || 5} rewrites / day`),
-            h("li", null, "Google or email signup"),
+            h("li", null, "Grammar preview included"),
           ),
-          authEnabled
-            ? h("button", { type: "button", className: "btn btn-quiet", onClick: onSignUp }, "Create free account")
-            : null,
+          authEnabled ? h("button", { type: "button", className: "btn btn-quiet", onClick: onSignUp }, "Create free account") : null,
         ),
         h("article", { className: "price-card price-card-pro" },
           h("h3", null, "Pro"),
-          h("p", { className: "price-amount" },
-            `₹${(pro && pro.price_inr_monthly) || 199}`,
-            h("span", null, "/mo"),
-          ),
+          h("p", { className: "price-amount" }, `₹${(pro && pro.price_inr_monthly) || 199}`, h("span", null, "/mo")),
           h("ul", null,
             h("li", null, `${((pro && pro.max_words_per_request) || 2000).toLocaleString()} words / rewrite`),
             h("li", null, `${(pro && pro.daily_rewrites) || 50} rewrites / day`),
@@ -484,10 +552,7 @@ function LandingSections({ plans, onSignUp, authEnabled }) {
         ),
         h("article", { className: "price-card price-card-plus" },
           h("h3", null, "Plus"),
-          h("p", { className: "price-amount" },
-            `₹${(plus && plus.price_inr_monthly) || 499}`,
-            h("span", null, "/mo"),
-          ),
+          h("p", { className: "price-amount" }, `₹${(plus && plus.price_inr_monthly) || 499}`, h("span", null, "/mo")),
           h("ul", null,
             h("li", null, `${((plus && plus.max_words_per_request) || 5000).toLocaleString()} words / rewrite`),
             h("li", null, `${(plus && plus.daily_rewrites) || 200} rewrites / day`),
@@ -496,14 +561,11 @@ function LandingSections({ plans, onSignUp, authEnabled }) {
           h("p", { className: "price-soon" }, "Checkout coming soon"),
         ),
       ),
-      h("p", { className: "plans-note" }, "Visitors can try a short free preview on the homepage before signing up."),
+      h("p", { className: "plans-note" }, "Visitors can try a short free Writer preview on the homepage before signing up."),
     ),
     h("footer", { className: "site-footer" },
-      h("p", null, "Review every rewrite before you share or publish. Follow your school or workplace AI policy."),
-      h("p", { className: "footer-brand" },
-        h(BrandLogo, { size: 28 }),
-        h("span", null, "ZuZu Writer"),
-      ),
+      h("p", null, "Review every rewrite and grammar suggestion before you share or publish."),
+      h("p", { className: "footer-brand" }, h(BrandLogo, { size: 28 }), h("span", null, "ZuZu")),
     ),
   );
 }
@@ -527,7 +589,15 @@ function App() {
   const [authOpen, setAuthOpen] = useState(false);
   const [authMode, setAuthMode] = useState("signup");
   const [authTitle, setAuthTitle] = useState(undefined);
-
+  const [product, setProduct] = useState("writer");
+  const [grammarText, setGrammarText] = useState("");
+  const [grammarIssues, setGrammarIssues] = useState([]);
+  const [grammarNote, setGrammarNote] = useState("");
+  const [grammarLoading, setGrammarLoading] = useState(false);
+  const [grammarError, setGrammarError] = useState("");
+  const [grammarMeta, setGrammarMeta] = useState("");
+
+  const activeProduct = PRODUCTS.find((p) => p.id === product) || PRODUCTS[0];
   const isGuest = !!(authEnabled && !session);
   const maxWords = (account && account.plan && account.plan.max_words_per_request) || (isGuest ? guestMaxWords : 50000);
 
@@ -548,7 +618,8 @@ function App() {
     const onKey = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
         e.preventDefault();
-        onRewrite();
+        if (product === "writer") onRewrite();
+        else onGrammarCheck();
       }
     };
     window.addEventListener("keydown", onKey);
@@ -561,6 +632,49 @@ function App() {
     setAuthOpen(true);
   }
 
+  function selectProduct(id) {
+    setProduct(id);
+    setError("");
+    setGrammarError("");
+  }
+
+  async function onGrammarCheck() {
+    const text = grammarText.trim();
+    if (!text) { setGrammarError("Paste some text first — or try the sample."); return; }
+    if (text.length > MAX_CHARS) { setGrammarError(`Text is too long (${text.length.toLocaleString()} chars).`); return; }
+    setGrammarLoading(true);
+    setGrammarError("");
+    setGrammarMeta("Checking…");
+    try {
+      const result = await checkGrammar(text, session && session.access_token);
+      setGrammarIssues(result.issues || []);
+      setGrammarNote(result.note || "");
+      const n = (result.issues || []).length;
+      setGrammarMeta(n ? `${n} issue${n === 1 ? "" : "s"} · ${result.input_words} words` : `No issues found · ${result.input_words} words`);
+    } catch (err) {
+      setGrammarError(err instanceof Error ? err.message : "Grammar check failed.");
+      setGrammarMeta("");
+      setGrammarIssues([]);
+    } finally {
+      setGrammarLoading(false);
+    }
+  }
+
+  function onApplyGrammarIssue(issue) {
+    setGrammarText((prev) => applyGrammarFix(prev, issue));
+    setGrammarIssues([]);
+    setGrammarMeta("Fix applied — run Check grammar again to refresh.");
+    setGrammarNote("");
+  }
+
+  function onApplyAllGrammar() {
+    if (!grammarIssues.length) return;
+    setGrammarText((prev) => applyAllGrammarFixes(prev, grammarIssues));
+    setGrammarIssues([]);
+    setGrammarMeta("All suggested fixes applied — run Check grammar again to refresh.");
+    setGrammarNote("");
+  }
+
   async function onRewrite() {
     const text = input.trim();
     if (!text) { setError("Paste some text first."); return; }
@@ -642,10 +756,11 @@ function App() {
           h(BrandLogo, { size: 56, className: "brand-logo-hero" }),
           h("div", { className: "brand-text" },
             h("p", { className: "brand-mark" }, "ZuZu"),
-            h("h1", null, "ZuZu Writer"),
+            h("h1", null, activeProduct.name),
           ),
         ),
-        h("p", { className: "brand-tag" }, "From AI-generated to plagiarism-safe — rewrite in a voice that feels real."),
+        h("p", { className: "brand-tag" }, activeProduct.tagline),
+        h(SiteNav, { product, onSelectProduct: selectProduct }),
       ),
       h("div", { className: "top-meta" },
         session && account
@@ -669,7 +784,8 @@ function App() {
             : h(Fragment, null, `${tone} · ${strength}`, h("br"), "⌘/Ctrl + Enter"),
       ),
     ),
-    isGuest && !idleSignedOut
+    h(ProductSwitcher, { product, onChange: selectProduct }),
+    isGuest && !idleSignedOut && product === "writer"
       ? h("p", { className: "teaser-banner" },
           "Try a short rewrite free — up to ", h("strong", null, `${maxWords} words`),
           `, ${(account && account.plan && account.plan.daily_rewrites) || 1} per day. Sign up for more length and daily rewrites.`,
@@ -688,7 +804,58 @@ function App() {
           }, "Sign in again"),
         )
       : null,
-    h("div", { className: "stage" },
+    product === "grammar"
+      ? h("div", { className: "stage grammar-stage" },
+          h("div", { className: "toolbar" },
+            h("div", { className: "toolbar-controls" },
+              h("p", { className: "grammar-lead" }, "Preview rule engine — grammar, punctuation, and common spelling. Fuller checks coming next."),
+            ),
+            h("div", { className: "toolbar-actions" },
+              h("button", { type: "button", className: "btn btn-quiet", disabled: grammarLoading, onClick: () => { setGrammarText(""); setGrammarIssues([]); setGrammarMeta(""); setGrammarError(""); setGrammarNote(""); } }, "Clear"),
+              h("button", { type: "button", className: "btn btn-quiet", disabled: grammarLoading, onClick: () => { setGrammarText(GRAMMAR_SAMPLE); setGrammarIssues([]); setGrammarError(""); setGrammarMeta("Sample loaded — hit Check grammar."); setGrammarNote(""); } }, "Try sample"),
+              grammarIssues.length ? h("button", { type: "button", className: "btn btn-quiet", disabled: grammarLoading, onClick: onApplyAllGrammar }, "Apply all") : null,
+              h("button", { type: "button", className: "btn btn-primary btn-rewrite", disabled: grammarLoading, onClick: () => onGrammarCheck() }, grammarLoading ? "Checking…" : "Check grammar"),
+            ),
+          ),
+          h("section", { className: "editors grammar-editors" },
+            h("div", { className: "pane" },
+              h("div", { className: "pane-head" }, h("h2", null, "Your text")),
+              h("textarea", {
+                value: grammarText,
+                onChange: (e) => { setGrammarText(e.target.value); setGrammarIssues([]); },
+                placeholder: "Paste a draft to check grammar and spelling…",
+                spellCheck: true,
+              }),
+            ),
+            h("div", { className: "pane pane-out grammar-issues-pane" },
+              h("div", { className: "pane-head" },
+                h("h2", null, "Issues"),
+                h("span", { className: "issue-count" }, grammarIssues.length ? `${grammarIssues.length} found` : (grammarMeta ? "Clean" : "—")),
+              ),
+              grammarIssues.length
+                ? h("ul", { className: "issue-list" },
+                    grammarIssues.map((issue) => h("li", { key: issue.id, className: `issue-item cat-${issue.category}` },
+                      h("div", { className: "issue-main" },
+                        h("span", { className: "issue-cat" }, issue.category),
+                        h("p", null, issue.message),
+                        h("code", { className: "issue-snippet" },
+                          (grammarText.slice(issue.start, issue.end) || "…") + (issue.suggestion != null ? ` → ${issue.suggestion}` : ""),
+                        ),
+                      ),
+                      issue.suggestion != null
+                        ? h("button", { type: "button", className: "btn btn-quiet btn-tiny", onClick: () => onApplyGrammarIssue(issue) }, "Apply")
+                        : null,
+                    )),
+                  )
+                : h("p", { className: "grammar-empty" }, grammarNote || "Run Check grammar to see suggestions here."),
+            ),
+          ),
+          h("div", { className: "statusbar" },
+            h("div", { className: grammarError ? "error" : grammarLoading ? "loading" : undefined }, grammarError || grammarMeta || "Paste text → Check grammar"),
+            h("div", { className: "counts" }, h("span", null, `${wordCount(grammarText)} words`)),
+          ),
+        )
+      :     h("div", { className: "stage" },
       h("div", { className: "toolbar" },
         h("div", { className: "tool-group" },
           h("span", null, "Tone"),
@@ -756,7 +923,7 @@ function App() {
         ),
       ),
     ),
-    showUpgrade && authEnabled
+    showUpgrade && authEnabled && product === "writer"
       ? h(UpgradeCard, {
           account,
           plans,
@@ -764,11 +931,12 @@ function App() {
           onSignIn: () => openAuth("signin", "Sign in"),
         })
       : null,
-    h("p", { className: "hint" }, "Review the rewrite before you share or publish it."),
+    h("p", { className: "hint" }, product === "grammar" ? "Review every suggestion before you publish." : "Review the rewrite before you share or publish it."),
     h(LandingSections, {
       plans,
       authEnabled,
       onSignUp: () => openAuth("signup", "Create free account"),
+      onSelectProduct: selectProduct,
     }),
     authEnabled
       ? h(AuthModal, {

frontend/dist/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ZuZu Writer</title>
+    <title>ZuZu</title>
     <link rel="icon" href="/zuzu-icon-512.png" type="image/png" sizes="any" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

frontend/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ZuZu Writer</title>
+    <title>ZuZu</title>
     <link rel="icon" href="/zuzu-icon-512.png" type="image/png" sizes="any" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

frontend/src/App.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState, type FormEvent } from "react";
 import { createPortal } from "react-dom";
 import {
+  checkGrammar,
   rewriteText,
   STRENGTH_MAP,
   STRENGTHS,
   TONES,
   type AccountInfo,
   type ApiError,
+  type GrammarIssue,
   type StrengthLabel,
   type Tone,
 } from "./api";
@@ -17,6 +19,36 @@ const LOGO_SRC = "/zuzu-logo.png";
 const LOGO_FALLBACK = "/favicon.svg";
 const MAX_CHARS = 50000;
 
+type ProductId = "writer" | "grammar";
+
+const PRODUCTS: {
+  id: ProductId;
+  name: string;
+  short: string;
+  tagline: string;
+  blurb: string;
+  status: "live" | "preview";
+}[] = [
+  {
+    id: "writer",
+    name: "ZuZu Writer",
+    short: "Writer",
+    tagline: "Turn AI drafts into natural wording.",
+    blurb:
+      "Rewrite ChatGPT, Gemini, and Claude text in Neutral, Casual, Formal, or Academic tone — classical NLP, no LLM.",
+    status: "live",
+  },
+  {
+    id: "grammar",
+    name: "ZuZu Grammar",
+    short: "Grammar",
+    tagline: "Catch grammar and spelling before you publish.",
+    blurb:
+      "Scan drafts for grammar, punctuation, and common spelling issues, then apply fixes with one click.",
+    status: "preview",
+  },
+];
+
 function BrandLogo({ size = 44, className = "" }: { size?: number; className?: string }) {
   return (
     <img
@@ -80,6 +112,71 @@ function wordCount(text: string): number {
   return text.trim() ? text.trim().split(/\s+/).length : 0;
 }
 
+function ProductSwitcher({
+  product,
+  onChange,
+}: {
+  product: ProductId;
+  onChange: (id: ProductId) => void;
+}) {
+  return (
+    <div className="product-switcher" role="tablist" aria-label="Products">
+      {PRODUCTS.map((p) => (
+        <button
+          key={p.id}
+          type="button"
+          role="tab"
+          aria-selected={product === p.id}
+          className={product === p.id ? "active" : ""}
+          onClick={() => onChange(p.id)}
+        >
+          {p.short}
+          {p.status === "preview" ? <span className="product-pill">Preview</span> : null}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function SiteNav({
+  product,
+  onSelectProduct,
+}: {
+  product: ProductId;
+  onSelectProduct: (id: ProductId) => void;
+}) {
+  return (
+    <nav className="site-nav" aria-label="Site">
+      <a href="#products">Products</a>
+      <a href="#plans">Plans</a>
+      <button type="button" className="nav-product" onClick={() => onSelectProduct("writer")}>
+        {product === "writer" ? "Open Writer" : "Writer"}
+      </button>
+      <button type="button" className="nav-product" onClick={() => onSelectProduct("grammar")}>
+        {product === "grammar" ? "Open Grammar" : "Grammar"}
+      </button>
+    </nav>
+  );
+}
+
+function applyGrammarFix(text: string, issue: GrammarIssue): string {
+  if (issue.suggestion == null) return text;
+  return text.slice(0, issue.start) + issue.suggestion + text.slice(issue.end);
+}
+
+function applyAllGrammarFixes(text: string, issues: GrammarIssue[]): string {
+  let next = text;
+  const ordered = [...issues].sort((a, b) => b.start - a.start);
+  for (const issue of ordered) {
+    if (issue.suggestion == null) continue;
+    next = applyGrammarFix(next, issue);
+  }
+  return next;
+}
+
+const GRAMMAR_SAMPLE =
+  "teh quick brown fox jump over the lazy dog. i think this sentance is seperate from the other one and it it needs fixing.";
+
 function AuthModal({
   open,
   onClose,
@@ -312,10 +409,12 @@ function LandingSections({
   plans,
   onSignUp,
   authEnabled,
+  onSelectProduct,
 }: {
   plans: PlanCard[];
   onSignUp: () => void;
   authEnabled: boolean;
+  onSelectProduct: (id: ProductId) => void;
 }) {
   const free = plans.find((p) => p.id === "free");
   const pro = plans.find((p) => p.id === "pro");
@@ -323,28 +422,70 @@ function LandingSections({
 
   return (
     <div className="landing">
+      <section className="land-block" id="products">
+        <h2>Our products</h2>
+        <p className="land-lead">Two focused tools under ZuZu — pick the job you need today.</p>
+        <div className="product-grid">
+          {PRODUCTS.map((p) => (
+            <article key={p.id} className={`product-card product-card-${p.id}`}>
+              <div className="product-card-top">
+                <h3>{p.name}</h3>
+                {p.status === "preview" ? <span className="product-pill">Preview</span> : null}
+              </div>
+              <p className="product-tagline">{p.tagline}</p>
+              <p>{p.blurb}</p>
+              <ul>
+                {p.id === "writer" ? (
+                  <>
+                    <li>Tone: Neutral, Casual, Formal, Academic</li>
+                    <li>Offline classical NLP rewrite engine</li>
+                    <li>Free preview, then Free / Pro / Plus plans</li>
+                  </>
+                ) : (
+                  <>
+                    <li>Grammar, punctuation &amp; common spelling</li>
+                    <li>Click to apply suggested fixes</li>
+                    <li>Works alongside Writer in the same account</li>
+                  </>
+                )}
+              </ul>
+              <button
+                type="button"
+                className="btn btn-primary"
+                onClick={() => {
+                  onSelectProduct(p.id);
+                  window.scrollTo({ top: 0, behavior: "smooth" });
+                }}
+              >
+                Open {p.short}
+              </button>
+            </article>
+          ))}
+        </div>
+      </section>
+
       <section className="land-block">
-        <h2>How to use ZuZu Writer</h2>
-        <p className="land-lead">Three steps from AI draft to natural wording.</p>
+        <h2>How ZuZu works</h2>
+        <p className="land-lead">Use Writer to humanize AI drafts, then Grammar to polish before you publish.</p>
         <ol className="steps">
           <li>
             <span className="step-num">1</span>
             <div>
-              <strong>Paste your AI text</strong>
-              <p>Drop in a ChatGPT, Gemini, or Claude draft on the left.</p>
+              <strong>Choose a product</strong>
+              <p>Switch between Writer and Grammar from the top of the page.</p>
             </div>
           </li>
           <li>
             <span className="step-num">2</span>
             <div>
-              <strong>Pick tone &amp; strength</strong>
-              <p>Neutral, Casual, Formal, or Academic — match the voice you need.</p>
+              <strong>Paste your draft</strong>
+              <p>Drop in AI or human text and run Rewrite or Check grammar.</p>
             </div>
           </li>
           <li>
             <span className="step-num">3</span>
             <div>
-              <strong>Rewrite, then unlock more</strong>
+              <strong>Review, then unlock more</strong>
               <p>Try a short preview, sign up for Free, go Pro or Plus when you write every day.</p>
             </div>
           </li>
@@ -376,7 +517,9 @@ function LandingSections({
 
       <section className="land-block" id="plans">
         <h2>Simple plans</h2>
-        <p className="land-lead">Start on Free. Upgrade to Pro or Plus when you need more words every day.</p>
+        <p className="land-lead">
+          One account for Writer today — Grammar preview is included. Checkout for Pro/Plus coming soon.
+        </p>
         <div className="pricing-grid">
           <article className="price-card">
             <h3>Free</h3>
@@ -384,7 +527,7 @@ function LandingSections({
             <ul>
               <li>{free?.max_words_per_request ?? 400} words / rewrite</li>
               <li>{free?.daily_rewrites ?? 5} rewrites / day</li>
-              <li>Google or email signup</li>
+              <li>Grammar preview included</li>
             </ul>
             {authEnabled ? (
               <button type="button" className="btn btn-quiet" onClick={onSignUp}>
@@ -420,15 +563,15 @@ function LandingSections({
           </article>
         </div>
         <p className="plans-note">
-          Visitors can try a short free preview on the homepage before signing up.
+          Visitors can try a short free Writer preview on the homepage before signing up.
         </p>
       </section>
 
       <footer className="site-footer">
-        <p>Review every rewrite before you share or publish. Follow your school or workplace AI policy.</p>
+        <p>Review every rewrite and grammar suggestion before you share or publish.</p>
         <p className="footer-brand">
           <BrandLogo size={28} />
-          <span>ZuZu Writer</span>
+          <span>ZuZu</span>
         </p>
       </footer>
     </div>
@@ -464,7 +607,15 @@ export default function App() {
   const [authOpen, setAuthOpen] = useState(false);
   const [authMode, setAuthMode] = useState<"signin" | "signup">("signup");
   const [authTitle, setAuthTitle] = useState<string | undefined>();
+  const [product, setProduct] = useState<ProductId>("writer");
+  const [grammarText, setGrammarText] = useState("");
+  const [grammarIssues, setGrammarIssues] = useState<GrammarIssue[]>([]);
+  const [grammarNote, setGrammarNote] = useState("");
+  const [grammarLoading, setGrammarLoading] = useState(false);
+  const [grammarError, setGrammarError] = useState("");
+  const [grammarMeta, setGrammarMeta] = useState("");
 
+  const activeProduct = PRODUCTS.find((p) => p.id === product) ?? PRODUCTS[0];
   const isGuest = Boolean(authEnabled && !session);
   // Guests always use config teaser limit (ignore inflated account payloads / env mistakes)
   const maxWords = isGuest
@@ -492,13 +643,14 @@ export default function App() {
     const onKey = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
         e.preventDefault();
-        void onRewrite();
+        if (product === "writer") void onRewrite();
+        else void onGrammarCheck();
       }
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [input, tone, strength, preserveLength, loading, session]);
+  }, [input, tone, strength, preserveLength, loading, session, product, grammarText, grammarLoading]);
 
   function openAuth(mode: "signin" | "signup", title?: string) {
     setAuthMode(mode);
@@ -506,12 +658,73 @@ export default function App() {
     setAuthOpen(true);
   }
 
+  function selectProduct(id: ProductId) {
+    setProduct(id);
+    setError("");
+    setGrammarError("");
+  }
+
   function loadSample() {
     setInput(SAMPLE_TEXT);
     setError("");
     setMeta("Sample loaded — hit Rewrite to try it.");
   }
 
+  function loadGrammarSample() {
+    setGrammarText(GRAMMAR_SAMPLE);
+    setGrammarIssues([]);
+    setGrammarError("");
+    setGrammarMeta("Sample loaded — hit Check grammar.");
+    setGrammarNote("");
+  }
+
+  async function onGrammarCheck() {
+    const text = grammarText.trim();
+    if (!text) {
+      setGrammarError("Paste some text first — or try the sample.");
+      return;
+    }
+    if (text.length > MAX_CHARS) {
+      setGrammarError(`Text is too long (${text.length.toLocaleString()} chars).`);
+      return;
+    }
+    setGrammarLoading(true);
+    setGrammarError("");
+    setGrammarMeta("Checking…");
+    try {
+      const result = await checkGrammar(text, session?.access_token);
+      setGrammarIssues(result.issues);
+      setGrammarNote(result.note ?? "");
+      setGrammarMeta(
+        result.issues.length
+          ? `${result.issues.length} issue${result.issues.length === 1 ? "" : "s"} · ${result.input_words} words`
+          : `No issues found · ${result.input_words} words`,
+      );
+    } catch (err) {
+      const apiErr = err as ApiError;
+      setGrammarError(apiErr.message || "Grammar check failed.");
+      setGrammarMeta("");
+      setGrammarIssues([]);
+    } finally {
+      setGrammarLoading(false);
+    }
+  }
+
+  function onApplyGrammarIssue(issue: GrammarIssue) {
+    setGrammarText((prev) => applyGrammarFix(prev, issue));
+    setGrammarIssues([]);
+    setGrammarMeta("Fix applied — run Check grammar again to refresh.");
+    setGrammarNote("");
+  }
+
+  function onApplyAllGrammar() {
+    if (!grammarIssues.length) return;
+    setGrammarText((prev) => applyAllGrammarFixes(prev, grammarIssues));
+    setGrammarIssues([]);
+    setGrammarMeta("All suggested fixes applied — run Check grammar again to refresh.");
+    setGrammarNote("");
+  }
+
   async function onRewrite() {
     const text = input.trim();
     if (!text) {
@@ -617,12 +830,11 @@ export default function App() {
             <BrandLogo size={56} className="brand-logo-hero" />
             <div className="brand-text">
               <p className="brand-mark">ZuZu</p>
-              <h1>ZuZu Writer</h1>
+              <h1>{activeProduct.name}</h1>
             </div>
           </div>
-          <p className="brand-tag">
-            From AI-generated to plagiarism-safe — rewrite in a voice that feels real.
-          </p>
+          <p className="brand-tag">{activeProduct.tagline}</p>
+          <SiteNav product={product} onSelectProduct={selectProduct} />
         </header>
         <div className="top-meta">
           {session && account ? (
@@ -668,7 +880,7 @@ export default function App() {
           ) : (
             <div className="account-panel account-panel-quiet">
               <span className="account-quota">
-                {tone} · {strength}
+                {product === "writer" ? `${tone} · ${strength}` : "Grammar preview"}
               </span>
               <span className="kbd-hint">⌘/Ctrl + Enter</span>
             </div>
@@ -676,6 +888,8 @@ export default function App() {
         </div>
       </div>
 
+      <ProductSwitcher product={product} onChange={selectProduct} />
+
       {idleSignedOut ? (
         <div className="teaser-banner idle-banner" role="status">
           <span>Signed out after {sessionIdleMinutes} minutes of inactivity.</span>
@@ -692,7 +906,7 @@ export default function App() {
         </div>
       ) : null}
 
-      {isGuest && !idleSignedOut ? (
+      {isGuest && !idleSignedOut && product === "writer" ? (
         <div className="teaser-banner teaser-cta">
           <div className="teaser-copy">
             <span className="teaser-label">Free Preview</span>
@@ -711,164 +925,286 @@ export default function App() {
         </div>
       ) : null}
 
-      <div className="stage">
-        <div className="toolbar">
-          <div className="toolbar-controls">
-            <div className="tool-group">
-              <span>Tone</span>
-              <div className="segment" role="group" aria-label="Tone">
-                {TONES.map((t) => (
+      {product === "grammar" ? (
+        <div className="stage grammar-stage">
+          <div className="toolbar">
+            <div className="toolbar-controls">
+              <p className="grammar-lead">
+                Preview rule engine — grammar, punctuation, and common spelling. Fuller checks coming
+                next.
+              </p>
+            </div>
+            <div className="toolbar-actions">
+              <button
+                type="button"
+                className="btn btn-quiet"
+                onClick={() => {
+                  setGrammarText("");
+                  setGrammarIssues([]);
+                  setGrammarMeta("");
+                  setGrammarError("");
+                  setGrammarNote("");
+                }}
+                disabled={grammarLoading}
+              >
+                Clear
+              </button>
+              <button
+                type="button"
+                className="btn btn-quiet"
+                onClick={loadGrammarSample}
+                disabled={grammarLoading}
+              >
+                Try sample
+              </button>
+              {grammarIssues.length ? (
+                <button
+                  type="button"
+                  className="btn btn-quiet"
+                  onClick={onApplyAllGrammar}
+                  disabled={grammarLoading}
+                >
+                  Apply all
+                </button>
+              ) : null}
+              <button
+                type="button"
+                className="btn btn-primary btn-rewrite"
+                onClick={() => void onGrammarCheck()}
+                disabled={grammarLoading}
+              >
+                {grammarLoading ? "Checking…" : "Check grammar"}
+              </button>
+            </div>
+          </div>
+
+          <section className="editors grammar-editors">
+            <div className="pane">
+              <div className="pane-head">
+                <h2>Your text</h2>
+              </div>
+              <textarea
+                value={grammarText}
+                onChange={(e) => {
+                  setGrammarText(e.target.value);
+                  setGrammarIssues([]);
+                }}
+                placeholder="Paste a draft to check grammar and spelling…"
+                spellCheck
+              />
+            </div>
+            <div className="pane pane-out grammar-issues-pane">
+              <div className="pane-head">
+                <h2>Issues</h2>
+                <span className="issue-count">
+                  {grammarIssues.length
+                    ? `${grammarIssues.length} found`
+                    : grammarMeta
+                      ? "Clean"
+                      : "—"}
+                </span>
+              </div>
+              {grammarIssues.length ? (
+                <ul className="issue-list">
+                  {grammarIssues.map((issue) => (
+                    <li key={issue.id} className={`issue-item cat-${issue.category}`}>
+                      <div className="issue-main">
+                        <span className="issue-cat">{issue.category}</span>
+                        <p>{issue.message}</p>
+                        <code className="issue-snippet">
+                          {grammarText.slice(issue.start, issue.end) || "…"}
+                          {issue.suggestion != null ? ` → ${issue.suggestion}` : ""}
+                        </code>
+                      </div>
+                      {issue.suggestion != null ? (
+                        <button
+                          type="button"
+                          className="btn btn-quiet btn-tiny"
+                          onClick={() => onApplyGrammarIssue(issue)}
+                        >
+                          Apply
+                        </button>
+                      ) : null}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="grammar-empty">
+                  {grammarNote || "Run Check grammar to see suggestions here."}
+                </p>
+              )}
+            </div>
+          </section>
+
+          <div className="statusbar">
+            <div className={grammarError ? "error" : grammarLoading ? "loading" : undefined}>
+              {grammarError || grammarMeta || "Paste text → Check grammar"}
+            </div>
+            <div className="counts">
+              <span>{wordCount(grammarText)} words</span>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="stage">
+          <div className="toolbar">
+            <div className="toolbar-controls">
+              <div className="tool-group">
+                <span>Tone</span>
+                <div className="segment" role="group" aria-label="Tone">
+                  {TONES.map((t) => (
+                    <button
+                      key={t}
+                      type="button"
+                      title={TONE_HINT[t]}
+                      className={tone === t ? "active" : ""}
+                      onClick={() => setTone(t)}
+                    >
+                      {t}
+                    </button>
+                  ))}
+                </div>
+                <span className="tool-hint">{TONE_HINT[tone]}</span>
+              </div>
+
+              <div className="tool-group">
+                <span>Strength</span>
+                <div className="segment" role="group" aria-label="Strength">
+                  {STRENGTHS.map((s) => (
+                    <button
+                      key={s}
+                      type="button"
+                      className={strength === s ? "active" : ""}
+                      onClick={() => setStrength(s)}
+                    >
+                      {s}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <label className="check">
+                <input
+                  type="checkbox"
+                  checked={preserveLength}
+                  onChange={(e) => setPreserveLength(e.target.checked)}
+                />
+                Match length
+              </label>
+            </div>
+
+            <div className="toolbar-actions">
+              <button
+                type="button"
+                className="btn btn-quiet"
+                onClick={() => {
+                  setInput("");
+                  setOutput("");
+                  setMeta("");
+                  setError("");
+                  setFreshOut(false);
+                }}
+                disabled={loading}
+              >
+                Clear
+              </button>
+              <button
+                type="button"
+                className="btn btn-primary btn-rewrite"
+                onClick={() => void onRewrite()}
+                disabled={loading}
+              >
+                {loading ? "Rewriting…" : "Rewrite"}
+              </button>
+            </div>
+          </div>
+
+          <section className="editors">
+            <div className="pane">
+              <div className="pane-head">
+                <h2>Original</h2>
+                <div className="pane-actions">
                   <button
-                    key={t}
                     type="button"
-                    title={TONE_HINT[t]}
-                    className={tone === t ? "active" : ""}
-                    onClick={() => setTone(t)}
+                    className="btn btn-quiet btn-tiny"
+                    onClick={loadSample}
+                    disabled={loading}
                   >
-                    {t}
+                    Try sample
                   </button>
-                ))}
+                </div>
               </div>
-              <span className="tool-hint">{TONE_HINT[tone]}</span>
+              <textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder={
+                  isGuest
+                    ? `Paste a short AI draft (max ${maxWords} words on Preview)…`
+                    : "Paste your AI draft here…"
+                }
+                spellCheck
+              />
             </div>
 
-            <div className="tool-group">
-              <span>Strength</span>
-              <div className="segment" role="group" aria-label="Strength">
-                {STRENGTHS.map((s) => (
+            <div className={`pane pane-out${freshOut ? " writing" : ""}`}>
+              <div className="pane-head">
+                <h2>Rewrite</h2>
+                <div className="pane-actions">
                   <button
-                    key={s}
                     type="button"
-                    className={strength === s ? "active" : ""}
-                    onClick={() => setStrength(s)}
+                    className="btn btn-quiet btn-tiny"
+                    onClick={() => void onCopy()}
+                    disabled={!output.trim()}
                   >
-                    {s}
+                    {copied ? "Copied" : "Copy"}
                   </button>
-                ))}
+                  <button
+                    type="button"
+                    className="btn btn-quiet btn-tiny"
+                    onClick={onDownload}
+                    disabled={!output.trim()}
+                  >
+                    Download
+                  </button>
+                </div>
               </div>
+              <textarea
+                value={output}
+                onChange={(e) => {
+                  setOutput(e.target.value);
+                  setFreshOut(false);
+                }}
+                placeholder="Your rewrite appears here…"
+                spellCheck
+              />
             </div>
+          </section>
 
-            <label className="check">
-              <input
-                type="checkbox"
-                checked={preserveLength}
-                onChange={(e) => setPreserveLength(e.target.checked)}
+          {authEnabled ? (
+            <div className="word-meter" aria-hidden>
+              <div
+                className={`word-meter-fill${overCap ? " over" : meterPct > 80 ? " hot" : ""}`}
+                style={{ width: `${meterPct}%` }}
               />
-              Match length
-            </label>
-          </div>
-
-          <div className="toolbar-actions">
-            <button
-              type="button"
-              className="btn btn-quiet"
-              onClick={() => {
-                setInput("");
-                setOutput("");
-                setMeta("");
-                setError("");
-                setFreshOut(false);
-              }}
-              disabled={loading}
-            >
-              Clear
-            </button>
-            <button
-              type="button"
-              className="btn btn-primary btn-rewrite"
-              onClick={() => void onRewrite()}
-              disabled={loading}
-            >
-              {loading ? "Rewriting…" : "Rewrite"}
-            </button>
-          </div>
-        </div>
-
-        <section className="editors">
-          <div className="pane">
-            <div className="pane-head">
-              <h2>Original</h2>
-              <div className="pane-actions">
-                <button
-                  type="button"
-                  className="btn btn-quiet btn-tiny"
-                  onClick={loadSample}
-                  disabled={loading}
-                >
-                  Try sample
-                </button>
-              </div>
             </div>
-            <textarea
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder={
-                isGuest
-                  ? `Paste a short AI draft (max ${maxWords} words on Preview)…`
-                  : "Paste your AI draft here…"
-              }
-              spellCheck
-            />
-          </div>
+          ) : null}
 
-          <div className={`pane pane-out${freshOut ? " writing" : ""}`}>
-            <div className="pane-head">
-              <h2>Rewrite</h2>
-              <div className="pane-actions">
-                <button
-                  type="button"
-                  className="btn btn-quiet btn-tiny"
-                  onClick={() => void onCopy()}
-                  disabled={!output.trim()}
-                >
-                  {copied ? "Copied" : "Copy"}
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-quiet btn-tiny"
-                  onClick={onDownload}
-                  disabled={!output.trim()}
-                >
-                  Download
-                </button>
-              </div>
+          <div className="statusbar">
+            <div className={error ? "error" : loading ? "loading" : undefined}>
+              {error || meta || "Paste AI text → pick a tone → Rewrite"}
+            </div>
+            <div className="counts">
+              <span className={overCap ? "over-limit" : undefined}>
+                {inWords}
+                {authEnabled ? ` / ${maxWords}` : ""} words in
+              </span>
+              <span>{outWords} words out</span>
             </div>
-            <textarea
-              value={output}
-              onChange={(e) => {
-                setOutput(e.target.value);
-                setFreshOut(false);
-              }}
-              placeholder="Your rewrite appears here…"
-              spellCheck
-            />
-          </div>
-        </section>
-
-        {authEnabled ? (
-          <div className="word-meter" aria-hidden>
-            <div
-              className={`word-meter-fill${overCap ? " over" : meterPct > 80 ? " hot" : ""}`}
-              style={{ width: `${meterPct}%` }}
-            />
-          </div>
-        ) : null}
-
-        <div className="statusbar">
-          <div className={error ? "error" : loading ? "loading" : undefined}>
-            {error || meta || "Paste AI text → pick a tone → Rewrite"}
-          </div>
-          <div className="counts">
-            <span className={overCap ? "over-limit" : undefined}>
-              {inWords}
-              {authEnabled ? ` / ${maxWords}` : ""} words in
-            </span>
-            <span>{outWords} words out</span>
           </div>
         </div>
-      </div>
+      )}
 
-      {showUpgrade && authEnabled ? (
+      {showUpgrade && authEnabled && product === "writer" ? (
         <UpgradeCard
           account={account}
           plans={plans}
@@ -878,12 +1214,17 @@ export default function App() {
         />
       ) : null}
 
-      <p className="hint">Review the rewrite before you share or publish it.</p>
+      <p className="hint">
+        {product === "grammar"
+          ? "Review every suggestion before you publish."
+          : "Review the rewrite before you share or publish it."}
+      </p>
 
       <LandingSections
         plans={plans}
         authEnabled={authEnabled}
         onSignUp={() => openAuth("signup", "Create free account")}
+        onSelectProduct={selectProduct}
       />
 
       {authEnabled ? (

frontend/src/api.ts

@@ -92,6 +92,49 @@ export async function rewriteText(
   return res.json();
 }
 
+export type GrammarIssue = {
+  id: string;
+  start: number;
+  end: number;
+  message: string;
+  suggestion: string | null;
+  category: string;
+};
+
+export type GrammarResponse = {
+  issues: GrammarIssue[];
+  input_words: number;
+  engine: string;
+  note?: string;
+};
+
+export async function checkGrammar(
+  text: string,
+  accessToken?: string | null,
+): Promise<GrammarResponse> {
+  const headers: Record<string, string> = { "Content-Type": "application/json" };
+  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+
+  const res = await fetch("/v1/grammar", {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ text }),
+  });
+  if (!res.ok) {
+    let detail: unknown = "Grammar check failed.";
+    try {
+      const data = await res.json();
+      detail = data.detail ?? detail;
+    } catch {
+      /* ignore */
+    }
+    const err = new Error(detailMessage(detail, "Grammar check failed.")) as ApiError;
+    err.status = res.status;
+    throw err;
+  }
+  return res.json();
+}
+
 export async function fetchMe(accessToken?: string | null): Promise<{
   auth_enabled: boolean;
   account: AccountInfo | null;

frontend/src/index.css

@@ -168,7 +168,234 @@ textarea {
   align-items: flex-end;
   justify-content: space-between;
   gap: 1.5rem;
-  margin-bottom: 1.35rem;
+  margin-bottom: 0.85rem;
+}
+
+.site-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem 1rem;
+  margin-top: 0.85rem;
+  align-items: center;
+}
+
+.site-nav a,
+.site-nav .nav-product {
+  font-family: var(--font-body);
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ink-soft);
+  text-decoration: none;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.site-nav a:hover,
+.site-nav .nav-product:hover {
+  color: var(--accent);
+}
+
+.product-switcher {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-bottom: 1rem;
+  padding: 0.3rem;
+  border-radius: 14px;
+  border: 1px solid var(--panel-edge);
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: 0 6px 18px rgba(15, 36, 28, 0.04);
+}
+
+.product-switcher button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border: none;
+  background: transparent;
+  color: var(--ink-soft);
+  font-family: var(--font-body);
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 0.55rem 0.95rem;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.product-switcher button.active {
+  background: linear-gradient(165deg, #0f7a5f, #0b614c);
+  color: #fff8f0;
+  box-shadow: 0 6px 16px rgba(15, 122, 95, 0.22);
+}
+
+.product-switcher button.active .product-pill {
+  background: rgba(255, 248, 240, 0.2);
+  color: #fff8f0;
+}
+
+.product-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 0.15rem 0.4rem;
+  border-radius: 999px;
+  background: rgba(226, 90, 60, 0.12);
+  color: var(--coral);
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.product-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  padding: 1.25rem 1.2rem;
+  border-radius: 18px;
+  border: 1px solid var(--panel-edge);
+  background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(232, 245, 239, 0.75));
+}
+
+.product-card-grammar {
+  background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(255, 236, 228, 0.8));
+  border-color: rgba(226, 90, 60, 0.22);
+}
+
+.product-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.product-card h3 {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.product-tagline {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+}
+
+.product-card p {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.product-card ul {
+  margin: 0;
+  padding-left: 1.1rem;
+  color: var(--ink-soft);
+  font-size: 0.86rem;
+  line-height: 1.55;
+  flex: 1;
+}
+
+.product-card .btn {
+  align-self: flex-start;
+  margin-top: 0.35rem;
+}
+
+.grammar-lead {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.88rem;
+  max-width: 36rem;
+  line-height: 1.45;
+}
+
+.grammar-issues-pane {
+  min-height: 18rem;
+}
+
+.issue-count {
+  font-size: 0.78rem;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.issue-list {
+  list-style: none;
+  margin: 0;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  overflow: auto;
+  max-height: 22rem;
+}
+
+.issue-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 0.85rem;
+  border-radius: 12px;
+  border: 1px solid var(--panel-edge);
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.issue-cat {
+  display: inline-block;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 0.25rem;
+}
+
+.issue-item.cat-spelling .issue-cat {
+  color: var(--coral);
+}
+
+.issue-item.cat-punctuation .issue-cat {
+  color: #2a6f97;
+}
+
+.issue-main p {
+  margin: 0 0 0.35rem;
+  font-size: 0.88rem;
+  color: var(--ink);
+}
+
+.issue-snippet {
+  display: block;
+  font-size: 0.78rem;
+  color: var(--ink-soft);
+  background: rgba(15, 36, 28, 0.04);
+  padding: 0.25rem 0.4rem;
+  border-radius: 6px;
+  white-space: pre-wrap;
+}
+
+.grammar-empty {
+  margin: 0;
+  padding: 1.25rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+@media (max-width: 820px) {
+  .product-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .brand {

scripts/patch_dist_products.py

@@ -0,0 +1,377 @@
+"""Patch frontend/dist/assets/index.js with multi-product UI."""
+from pathlib import Path
+
+path = Path(__file__).resolve().parent.parent / "frontend" / "dist" / "assets" / "index.js"
+text = path.read_text(encoding="utf-8")
+
+marker = "function UpgradeCard("
+if "const PRODUCTS =" not in text:
+    insert = r'''
+const PRODUCTS = [
+  {
+    id: "writer",
+    name: "ZuZu Writer",
+    short: "Writer",
+    tagline: "Turn AI drafts into natural wording.",
+    blurb: "Rewrite ChatGPT, Gemini, and Claude text in Neutral, Casual, Formal, or Academic tone — classical NLP, no LLM.",
+    status: "live",
+  },
+  {
+    id: "grammar",
+    name: "ZuZu Grammar",
+    short: "Grammar",
+    tagline: "Catch grammar and spelling before you publish.",
+    blurb: "Scan drafts for grammar, punctuation, and common spelling issues, then apply fixes with one click.",
+    status: "preview",
+  },
+];
+
+const GRAMMAR_SAMPLE = "teh quick brown fox jump over the lazy dog. i think this sentance is seperate from the other one and it it needs fixing.";
+
+async function checkGrammar(text, accessToken) {
+  const headers = { "Content-Type": "application/json" };
+  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+  const res = await fetch("/v1/grammar", { method: "POST", headers, body: JSON.stringify({ text }) });
+  if (!res.ok) {
+    let detail = "Grammar check failed.";
+    try { const data = await res.json(); detail = data.detail || detail; } catch (_) {}
+    throw new Error(typeof detail === "string" ? detail : "Grammar check failed.");
+  }
+  return res.json();
+}
+
+function applyGrammarFix(text, issue) {
+  if (issue.suggestion == null) return text;
+  return text.slice(0, issue.start) + issue.suggestion + text.slice(issue.end);
+}
+
+function applyAllGrammarFixes(text, issues) {
+  let next = text;
+  const ordered = [...issues].sort((a, b) => b.start - a.start);
+  for (const issue of ordered) {
+    if (issue.suggestion == null) continue;
+    next = applyGrammarFix(next, issue);
+  }
+  return next;
+}
+
+function ProductSwitcher({ product, onChange }) {
+  return h("div", { className: "product-switcher", role: "tablist", "aria-label": "Products" },
+    PRODUCTS.map((p) => h("button", {
+      key: p.id,
+      type: "button",
+      role: "tab",
+      "aria-selected": product === p.id,
+      className: product === p.id ? "active" : "",
+      onClick: () => onChange(p.id),
+    }, p.short, p.status === "preview" ? h("span", { className: "product-pill" }, "Preview") : null)),
+  );
+}
+
+function SiteNav({ product, onSelectProduct }) {
+  return h("nav", { className: "site-nav", "aria-label": "Site" },
+    h("a", { href: "#products" }, "Products"),
+    h("a", { href: "#plans" }, "Plans"),
+    h("button", { type: "button", className: "nav-product", onClick: () => onSelectProduct("writer") }, product === "writer" ? "Open Writer" : "Writer"),
+    h("button", { type: "button", className: "nav-product", onClick: () => onSelectProduct("grammar") }, product === "grammar" ? "Open Grammar" : "Grammar"),
+  );
+}
+
+'''
+    text = text.replace(marker, insert + marker, 1)
+
+start = text.index("function LandingSections(")
+end = text.index("function App()")
+landing = r'''function LandingSections({ plans, onSignUp, authEnabled, onSelectProduct }) {
+  const free = plans.find((p) => p.id === "free");
+  const pro = plans.find((p) => p.id === "pro");
+  const plus = plans.find((p) => p.id === "plus");
+
+  return h("div", { className: "landing" },
+    h("section", { className: "land-block", id: "products" },
+      h("h2", null, "Our products"),
+      h("p", { className: "land-lead" }, "Two focused tools under ZuZu — pick the job you need today."),
+      h("div", { className: "product-grid" },
+        PRODUCTS.map((p) => h("article", { key: p.id, className: `product-card product-card-${p.id}` },
+          h("div", { className: "product-card-top" },
+            h("h3", null, p.name),
+            p.status === "preview" ? h("span", { className: "product-pill" }, "Preview") : null,
+          ),
+          h("p", { className: "product-tagline" }, p.tagline),
+          h("p", null, p.blurb),
+          h("ul", null,
+            ...(p.id === "writer"
+              ? [
+                  h("li", { key: "w1" }, "Tone: Neutral, Casual, Formal, Academic"),
+                  h("li", { key: "w2" }, "Offline classical NLP rewrite engine"),
+                  h("li", { key: "w3" }, "Free preview, then Free / Pro / Plus plans"),
+                ]
+              : [
+                  h("li", { key: "g1" }, "Grammar, punctuation & common spelling"),
+                  h("li", { key: "g2" }, "Click to apply suggested fixes"),
+                  h("li", { key: "g3" }, "Works alongside Writer in the same account"),
+                ]),
+          ),
+          h("button", {
+            type: "button",
+            className: "btn btn-primary",
+            onClick: () => { onSelectProduct(p.id); window.scrollTo({ top: 0, behavior: "smooth" }); },
+          }, `Open ${p.short}`),
+        )),
+      ),
+    ),
+    h("section", { className: "land-block" },
+      h("h2", null, "How ZuZu works"),
+      h("p", { className: "land-lead" }, "Use Writer to humanize AI drafts, then Grammar to polish before you publish."),
+      h("ol", { className: "steps" },
+        h("li", null, h("span", { className: "step-num" }, "1"), h("div", null, h("strong", null, "Choose a product"), h("p", null, "Switch between Writer and Grammar from the top of the page."))),
+        h("li", null, h("span", { className: "step-num" }, "2"), h("div", null, h("strong", null, "Paste your draft"), h("p", null, "Drop in AI or human text and run Rewrite or Check grammar."))),
+        h("li", null, h("span", { className: "step-num" }, "3"), h("div", null, h("strong", null, "Review, then unlock more"), h("p", null, "Try a short preview, sign up for Free, go Pro or Plus when you write every day."))),
+      ),
+    ),
+    h("section", { className: "land-block" },
+      h("h2", null, "Who it's for"),
+      h("p", { className: "land-lead" }, "Built for people who draft with AI and publish as themselves."),
+      h("div", { className: "audience-grid" },
+        h("article", null, h("h3", null, "Students & academic writers"), h("p", null, "Refine AI-assisted notes into clearer Academic or Formal wording. Follow your institution's rules.")),
+        h("article", null, h("h3", null, "Freelancers & professionals"), h("p", null, "Turn stiff AI emails and reports into confident, natural communication.")),
+        h("article", null, h("h3", null, "Bloggers & SEO writers"), h("p", null, "Refresh repetitive AI drafts into readable posts that still keep your meaning.")),
+        h("article", null, h("h3", null, "Social & content teams"), h("p", null, "Humanize captions and scripts so they sound like your brand, not a model.")),
+      ),
+    ),
+    h("section", { className: "land-block", id: "plans" },
+      h("h2", null, "Simple plans"),
+      h("p", { className: "land-lead" }, "One account for Writer today — Grammar preview is included. Checkout for Pro/Plus coming soon."),
+      h("div", { className: "pricing-grid" },
+        h("article", { className: "price-card" },
+          h("h3", null, "Free"),
+          h("p", { className: "price-amount" }, "₹0"),
+          h("ul", null,
+            h("li", null, `${(free && free.max_words_per_request) || 400} words / rewrite`),
+            h("li", null, `${(free && free.daily_rewrites) || 5} rewrites / day`),
+            h("li", null, "Grammar preview included"),
+          ),
+          authEnabled ? h("button", { type: "button", className: "btn btn-quiet", onClick: onSignUp }, "Create free account") : null,
+        ),
+        h("article", { className: "price-card price-card-pro" },
+          h("h3", null, "Pro"),
+          h("p", { className: "price-amount" }, `₹${(pro && pro.price_inr_monthly) || 199}`, h("span", null, "/mo")),
+          h("ul", null,
+            h("li", null, `${((pro && pro.max_words_per_request) || 2000).toLocaleString()} words / rewrite`),
+            h("li", null, `${(pro && pro.daily_rewrites) || 50} rewrites / day`),
+            h("li", null, "Best for daily AI drafts"),
+          ),
+          h("p", { className: "price-soon" }, "Checkout coming soon"),
+        ),
+        h("article", { className: "price-card price-card-plus" },
+          h("h3", null, "Plus"),
+          h("p", { className: "price-amount" }, `₹${(plus && plus.price_inr_monthly) || 499}`, h("span", null, "/mo")),
+          h("ul", null,
+            h("li", null, `${((plus && plus.max_words_per_request) || 5000).toLocaleString()} words / rewrite`),
+            h("li", null, `${(plus && plus.daily_rewrites) || 200} rewrites / day`),
+            h("li", null, "Heavy use & longer documents"),
+          ),
+          h("p", { className: "price-soon" }, "Checkout coming soon"),
+        ),
+      ),
+      h("p", { className: "plans-note" }, "Visitors can try a short free Writer preview on the homepage before signing up."),
+    ),
+    h("footer", { className: "site-footer" },
+      h("p", null, "Review every rewrite and grammar suggestion before you share or publish."),
+      h("p", { className: "footer-brand" }, h(BrandLogo, { size: 28 }), h("span", null, "ZuZu")),
+    ),
+  );
+}
+
+'''
+text = text[:start] + landing + text[end:]
+
+needle = "  const [authTitle, setAuthTitle] = useState(undefined);\n\n  const isGuest"
+if "const [product, setProduct]" not in text:
+    text = text.replace(
+        needle,
+        """  const [authTitle, setAuthTitle] = useState(undefined);
+  const [product, setProduct] = useState("writer");
+  const [grammarText, setGrammarText] = useState("");
+  const [grammarIssues, setGrammarIssues] = useState([]);
+  const [grammarNote, setGrammarNote] = useState("");
+  const [grammarLoading, setGrammarLoading] = useState(false);
+  const [grammarError, setGrammarError] = useState("");
+  const [grammarMeta, setGrammarMeta] = useState("");
+
+  const activeProduct = PRODUCTS.find((p) => p.id === product) || PRODUCTS[0];
+  const isGuest""",
+        1,
+    )
+
+if "async function onGrammarCheck" not in text:
+    text = text.replace(
+        "        onRewrite();\n",
+        '        if (product === "writer") onRewrite();\n        else onGrammarCheck();\n',
+        1,
+    )
+    text = text.replace(
+        """  function openAuth(mode, title) {
+    setAuthMode(mode);
+    setAuthTitle(title);
+    setAuthOpen(true);
+  }
+
+  async function onRewrite()""",
+        """  function openAuth(mode, title) {
+    setAuthMode(mode);
+    setAuthTitle(title);
+    setAuthOpen(true);
+  }
+
+  function selectProduct(id) {
+    setProduct(id);
+    setError("");
+    setGrammarError("");
+  }
+
+  async function onGrammarCheck() {
+    const text = grammarText.trim();
+    if (!text) { setGrammarError("Paste some text first — or try the sample."); return; }
+    if (text.length > MAX_CHARS) { setGrammarError(`Text is too long (${text.length.toLocaleString()} chars).`); return; }
+    setGrammarLoading(true);
+    setGrammarError("");
+    setGrammarMeta("Checking…");
+    try {
+      const result = await checkGrammar(text, session && session.access_token);
+      setGrammarIssues(result.issues || []);
+      setGrammarNote(result.note || "");
+      const n = (result.issues || []).length;
+      setGrammarMeta(n ? `${n} issue${n === 1 ? "" : "s"} · ${result.input_words} words` : `No issues found · ${result.input_words} words`);
+    } catch (err) {
+      setGrammarError(err instanceof Error ? err.message : "Grammar check failed.");
+      setGrammarMeta("");
+      setGrammarIssues([]);
+    } finally {
+      setGrammarLoading(false);
+    }
+  }
+
+  function onApplyGrammarIssue(issue) {
+    setGrammarText((prev) => applyGrammarFix(prev, issue));
+    setGrammarIssues([]);
+    setGrammarMeta("Fix applied — run Check grammar again to refresh.");
+    setGrammarNote("");
+  }
+
+  function onApplyAllGrammar() {
+    if (!grammarIssues.length) return;
+    setGrammarText((prev) => applyAllGrammarFixes(prev, grammarIssues));
+    setGrammarIssues([]);
+    setGrammarMeta("All suggested fixes applied — run Check grammar again to refresh.");
+    setGrammarNote("");
+  }
+
+  async function onRewrite()""",
+        1,
+    )
+
+old_header = """        h(\"p\", { className: \"brand-tag\" }, \"From AI-generated to plagiarism-safe — rewrite in a voice that feels real.\"),
+      ),"""
+new_header = """        h(\"p\", { className: \"brand-tag\" }, activeProduct.tagline),
+        h(SiteNav, { product, onSelectProduct: selectProduct }),
+      ),"""
+if "activeProduct.tagline" not in text:
+    text = text.replace(old_header, new_header, 1)
+    text = text.replace('h("h1", null, "ZuZu Writer"),', 'h("h1", null, activeProduct.name),', 1)
+
+if "h(ProductSwitcher" not in text:
+    text = text.replace(
+        "    isGuest && !idleSignedOut\n",
+        '    h(ProductSwitcher, { product, onChange: selectProduct }),\n    isGuest && !idleSignedOut && product === "writer"\n',
+        1,
+    )
+
+text = text.replace(
+    """    h(LandingSections, {
+      plans,
+      authEnabled,
+      onSignUp: () => openAuth("signup", "Create free account"),
+    }),""",
+    """    h(LandingSections, {
+      plans,
+      authEnabled,
+      onSignUp: () => openAuth("signup", "Create free account"),
+      onSelectProduct: selectProduct,
+    }),""",
+    1,
+)
+
+stage_start = text.find('    h("div", { className: "stage" },')
+stage_end = text.find("    showUpgrade && authEnabled")
+if stage_start != -1 and stage_end != -1 and "grammar-stage" not in text:
+    writer_stage = text[stage_start:stage_end]
+    grammar_stage = r'''    product === "grammar"
+      ? h("div", { className: "stage grammar-stage" },
+          h("div", { className: "toolbar" },
+            h("div", { className: "toolbar-controls" },
+              h("p", { className: "grammar-lead" }, "Preview rule engine — grammar, punctuation, and common spelling. Fuller checks coming next."),
+            ),
+            h("div", { className: "toolbar-actions" },
+              h("button", { type: "button", className: "btn btn-quiet", disabled: grammarLoading, onClick: () => { setGrammarText(""); setGrammarIssues([]); setGrammarMeta(""); setGrammarError(""); setGrammarNote(""); } }, "Clear"),
+              h("button", { type: "button", className: "btn btn-quiet", disabled: grammarLoading, onClick: () => { setGrammarText(GRAMMAR_SAMPLE); setGrammarIssues([]); setGrammarError(""); setGrammarMeta("Sample loaded — hit Check grammar."); setGrammarNote(""); } }, "Try sample"),
+              grammarIssues.length ? h("button", { type: "button", className: "btn btn-quiet", disabled: grammarLoading, onClick: onApplyAllGrammar }, "Apply all") : null,
+              h("button", { type: "button", className: "btn btn-primary btn-rewrite", disabled: grammarLoading, onClick: () => onGrammarCheck() }, grammarLoading ? "Checking…" : "Check grammar"),
+            ),
+          ),
+          h("section", { className: "editors grammar-editors" },
+            h("div", { className: "pane" },
+              h("div", { className: "pane-head" }, h("h2", null, "Your text")),
+              h("textarea", {
+                value: grammarText,
+                onChange: (e) => { setGrammarText(e.target.value); setGrammarIssues([]); },
+                placeholder: "Paste a draft to check grammar and spelling…",
+                spellCheck: true,
+              }),
+            ),
+            h("div", { className: "pane pane-out grammar-issues-pane" },
+              h("div", { className: "pane-head" },
+                h("h2", null, "Issues"),
+                h("span", { className: "issue-count" }, grammarIssues.length ? `${grammarIssues.length} found` : (grammarMeta ? "Clean" : "—")),
+              ),
+              grammarIssues.length
+                ? h("ul", { className: "issue-list" },
+                    grammarIssues.map((issue) => h("li", { key: issue.id, className: `issue-item cat-${issue.category}` },
+                      h("div", { className: "issue-main" },
+                        h("span", { className: "issue-cat" }, issue.category),
+                        h("p", null, issue.message),
+                        h("code", { className: "issue-snippet" },
+                          (grammarText.slice(issue.start, issue.end) || "…") + (issue.suggestion != null ? ` → ${issue.suggestion}` : ""),
+                        ),
+                      ),
+                      issue.suggestion != null
+                        ? h("button", { type: "button", className: "btn btn-quiet btn-tiny", onClick: () => onApplyGrammarIssue(issue) }, "Apply")
+                        : null,
+                    )),
+                  )
+                : h("p", { className: "grammar-empty" }, grammarNote || "Run Check grammar to see suggestions here."),
+            ),
+          ),
+          h("div", { className: "statusbar" },
+            h("div", { className: grammarError ? "error" : grammarLoading ? "loading" : undefined }, grammarError || grammarMeta || "Paste text → Check grammar"),
+            h("div", { className: "counts" }, h("span", null, `${wordCount(grammarText)} words`)),
+          ),
+        )
+      : '''
+    text = text[:stage_start] + grammar_stage + writer_stage + text[stage_end:]
+    text = text.replace(
+        "    showUpgrade && authEnabled\n",
+        '    showUpgrade && authEnabled && product === "writer"\n',
+        1,
+    )
+    text = text.replace(
+        '    h("p", { className: "hint" }, "Review the rewrite before you share or publish it."),',
+        '    h("p", { className: "hint" }, product === "grammar" ? "Review every suggestion before you publish." : "Review the rewrite before you share or publish it."),',
+        1,
+    )
+
+path.write_text(text, encoding="utf-8")
+print("patched", path)
+print("PRODUCTS", "const PRODUCTS =" in text)
+print("grammar-stage", "grammar-stage" in text)
+print("ProductSwitcher", "h(ProductSwitcher" in text)