feat: Next.js app + full website (7 pages)

AGENTS.md

@@ -21,7 +21,7 @@ Tone:
 Rules:
 - Every sentence must earn its place
 - Short, punchy lines > long paragraphs
-- Speak to pain → then solution → then output
+- Speak to pain -> then solution -> then output
 - Prioritise clarity over cleverness
 - Avoid clichés and tech-bro language
 - Never over-explain features — focus on what it does for the user
@@ -45,13 +45,6 @@ Brand Direction:
 - Feels powerful but approachable
 - Built in the UK — grounded, no Silicon Valley hype
 
-You must always improve copy to:
-- Increase trust
-- Increase clicks
-- Reduce friction
-- Make the user feel the book is finally possible
-- Make the product feel unfair to ignore
-
 You must always rewrite content using these EXACT words and themes where possible:
 - "SUBMIT YOUR SNIPPETS"
 - "YOUR BOOK, FINISHED"
@@ -68,11 +61,6 @@ Avoid:
 - Fancy wording
 - Anything that sounds like a content mill or ghostwriting service
 
-Always output:
-- Clean, structured sections
-- Clear hierarchy (headline → sub → body → CTA)
-- Minimal but powerful wording
-
 Act like:
 A founder who spent years watching people abandon their book at chapter two — and built the fix.
 
@@ -85,15 +73,13 @@ All agents must also read:
 - `CLAUDE.md` when operating through Claude or Claude-like tools
 - Obsidian vault: `C:\Users\manaz\claude-obsidian\wiki\projects\inkweave\`
 
-Keep Obsidian notes short, linked, and in the right folder.
-
-## DEPLOYMENT RULE — READ THIS
+## DEPLOYMENT RULE
 
 After EVERY change to InkWeave:
 1. `npm run build` — must pass
 2. `npm run lint` — must pass
 3. `git add -A && git commit -m "..."`
 4. `git push origin <branch>`
-5. Vercel deploys from GitHub. Use Vercel production for live deploys after checks pass.
+5. Vercel deploys from GitHub.
 
 Live URL: **inkweave.co.uk** (TBD)

CLAUDE.md

@@ -52,6 +52,6 @@ After EVERY change to InkWeave:
 2. `npm run lint` — must pass
 3. `git add` specific files → `git commit`
 4. `git push origin <branch>`
-5. Create PR → auto-merge via CI
+5. Create PR -> auto-merge via CI
 
-Live URL: **inkweave.co.uk** (TBD — update when domain confirmed)
+Live URL: **inkweave.co.uk** (TBD)

app/about/page.tsx

@@ -0,0 +1,61 @@
+import Link from "next/link";
+
+export default function AboutPage() {
+  return (
+    <main className="min-h-screen" style={{ background: "var(--ink)", color: "var(--text-primary)" }}>
+      <nav className="flex items-center justify-between px-6 py-5 max-w-6xl mx-auto">
+        <Link href="/" className="text-xl tracking-widest uppercase font-sans" style={{ color: "var(--amber)", letterSpacing: "0.2em" }}>
+          InkWeave
+        </Link>
+        <Link href="/start" className="px-4 py-2 font-sans text-sm font-medium" style={{ background: "var(--amber)", color: "var(--ink)", borderRadius: "2px" }}>
+          Start free
+        </Link>
+      </nav>
+
+      <section className="px-6 py-20 max-w-3xl mx-auto">
+        <p className="font-sans text-xs tracking-widest uppercase mb-3" style={{ color: "var(--amber)", letterSpacing: "0.3em" }}>About</p>
+        <h1 className="text-4xl md:text-5xl font-bold mb-10">Built for the book that never got finished.</h1>
+
+        <div className="space-y-6 font-sans leading-relaxed" style={{ color: "var(--text-secondary)" }}>
+          <p>
+            Most people who want to write a book never finish it. Not because they lack ideas —
+            they have plenty. Notes in their phone. Scenes scribbled in notebooks. Half-finished chapters abandoned when life got busy.
+          </p>
+          <p>
+            Existing tools don&apos;t solve this. ChatGPT requires you to know how to prompt it.
+            Sudowrite is a co-pilot — you still have to drive. None of them take what you already have
+            and turn it into a complete book.
+          </p>
+          <p style={{ color: "var(--text-primary)" }}>
+            InkWeave does one thing: it takes your snippets and returns a full manuscript.
+          </p>
+          <p>
+            Built in the UK. Priced in GBP. Designed for first-time authors, experts with stories to tell,
+            and anyone who has said &quot;I&apos;ve always wanted to write a book&quot; and meant it.
+          </p>
+        </div>
+
+        <div className="mt-16 p-8" style={{ background: "var(--ink-soft)", borderLeft: "3px solid var(--amber)" }}>
+          <h2 className="text-xl font-bold mb-3">The pipeline</h2>
+          <p className="font-sans text-sm mb-4 tracking-wider" style={{ color: "var(--amber)" }}>
+            INGEST → ANALYSE → OUTLINE → EXPAND → COMPILE → DELIVER
+          </p>
+          <p className="font-sans text-sm leading-relaxed" style={{ color: "var(--text-secondary)" }}>
+            Your snippets go in. The engine reads them, finds the story, builds a chapter structure,
+            expands every chapter, and compiles a complete DOCX + PDF. You review, redirect if needed, and download.
+          </p>
+        </div>
+
+        <div className="mt-10">
+          <Link
+            href="/start"
+            className="inline-block px-8 py-4 font-sans font-semibold transition-all hover:opacity-90"
+            style={{ background: "var(--amber)", color: "var(--ink)", borderRadius: "2px" }}
+          >
+            Start with a free chapter
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}

app/contact/page.tsx

@@ -0,0 +1,53 @@
+export default function ContactPage() {
+  return (
+    <main className="min-h-screen" style={{ background: "var(--ink)", color: "var(--text-primary)" }}>
+      <nav className="flex items-center justify-between px-6 py-5 max-w-6xl mx-auto">
+        <a href="/" className="text-xl tracking-widest uppercase font-sans" style={{ color: "var(--amber)", letterSpacing: "0.2em" }}>
+          InkWeave
+        </a>
+      </nav>
+
+      <section className="px-6 py-20 max-w-xl mx-auto">
+        <p className="font-sans text-xs tracking-widest uppercase mb-3" style={{ color: "var(--amber)", letterSpacing: "0.3em" }}>Contact</p>
+        <h1 className="text-4xl font-bold mb-4">Get in touch</h1>
+        <p className="font-sans mb-10" style={{ color: "var(--text-secondary)" }}>
+          Questions, feedback, or partnership enquiries. We&apos;ll reply within 24 hours.
+        </p>
+
+        <form className="flex flex-col gap-5">
+          <div>
+            <label className="font-sans text-xs uppercase tracking-widest block mb-2" style={{ color: "var(--text-dim)" }}>Name</label>
+            <input
+              type="text"
+              className="w-full px-4 py-3 font-sans text-sm outline-none"
+              style={{ background: "var(--ink-soft)", border: "1px solid var(--ink-muted)", color: "var(--text-primary)", borderRadius: "2px" }}
+            />
+          </div>
+          <div>
+            <label className="font-sans text-xs uppercase tracking-widest block mb-2" style={{ color: "var(--text-dim)" }}>Email</label>
+            <input
+              type="email"
+              className="w-full px-4 py-3 font-sans text-sm outline-none"
+              style={{ background: "var(--ink-soft)", border: "1px solid var(--ink-muted)", color: "var(--text-primary)", borderRadius: "2px" }}
+            />
+          </div>
+          <div>
+            <label className="font-sans text-xs uppercase tracking-widest block mb-2" style={{ color: "var(--text-dim)" }}>Message</label>
+            <textarea
+              rows={6}
+              className="w-full px-4 py-3 font-sans text-sm outline-none resize-none"
+              style={{ background: "var(--ink-soft)", border: "1px solid var(--ink-muted)", color: "var(--text-primary)", borderRadius: "2px" }}
+            />
+          </div>
+          <button
+            type="submit"
+            className="px-8 py-4 font-sans font-semibold text-sm transition-all hover:opacity-90"
+            style={{ background: "var(--amber)", color: "var(--ink)", borderRadius: "2px" }}
+          >
+            Send message
+          </button>
+        </form>
+      </section>
+    </main>
+  );
+}

app/globals.css

@@ -0,0 +1,36 @@
+@import "tailwindcss";
+
+:root {
+  --ink: #0d0d0d;
+  --ink-soft: #1a1a1a;
+  --ink-muted: #2a2a2a;
+  --paper: #f5f0e8;
+  --paper-soft: #ede8de;
+  --amber: #c9822a;
+  --amber-light: #e8a84a;
+  --text-primary: #f5f0e8;
+  --text-secondary: #9a9486;
+  --text-dim: #5a5650;
+}
+
+@theme inline {
+  --color-background: var(--ink);
+  --color-foreground: var(--text-primary);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--ink);
+  color: var(--text-primary);
+  font-family: Georgia, 'Times New Roman', serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.font-sans {
+  font-family: var(--font-geist-sans), Arial, sans-serif;
+}

app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "InkWeave — Your Book, Finished",
+  description: "Submit your snippets. Get a full manuscript. No blank page. No stalling. One price, full book.",
+  keywords: ["write a book", "AI book writing", "finish my book", "self publishing UK", "manuscript generator"],
+  openGraph: {
+    title: "InkWeave — Your Book, Finished",
+    description: "Turn your snippets into a full manuscript. UK-built, author-first.",
+    type: "website",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}