From 6af315ac44edae2fe1b98bd96454cda4b7865258 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Fri, 24 Apr 2026 13:15:15 +0800
Subject: [PATCH] test: add comprehensive landing page unit tests (85 tests)

6 test files covering all landing page components:
- BentoGrid: search filtering, category pills, tool count, empty state
- Navbar: links, mobile menu, GitHub star count formatting, fetch
- HowItWorks: Docker command display, clipboard copy, terminal chrome
- FAQ: accordion expand/collapse, all questions rendered
- Contact: form fields, validation, Formspree submission, error states
- Components: Hero, TypingCursor, WhyChoose, Enterprise, Pricing,
  OpenSource, Footer (rendering, links, content verification)

Also updates vitest.config.ts with landing page aliases and automatic
JSX transform for Next.js components.
---
 tests/unit/landing/bento-grid.test.tsx   | 119 +++++++++++
 tests/unit/landing/components.test.tsx   | 261 +++++++++++++++++++++++
 tests/unit/landing/contact.test.tsx      | 184 ++++++++++++++++
 tests/unit/landing/faq.test.tsx          |  98 +++++++++
 tests/unit/landing/how-it-works.test.tsx |  98 +++++++++
 tests/unit/landing/navbar.test.tsx       | 127 +++++++++++
 vitest.config.ts                         |  16 +-
 7 files changed, 899 insertions(+), 4 deletions(-)
 create mode 100644 tests/unit/landing/bento-grid.test.tsx
 create mode 100644 tests/unit/landing/components.test.tsx
 create mode 100644 tests/unit/landing/contact.test.tsx
 create mode 100644 tests/unit/landing/faq.test.tsx
 create mode 100644 tests/unit/landing/how-it-works.test.tsx
 create mode 100644 tests/unit/landing/navbar.test.tsx

diff --git a/tests/unit/landing/bento-grid.test.tsx b/tests/unit/landing/bento-grid.test.tsx
new file mode 100644
index 00000000..a460068d
--- /dev/null
+++ b/tests/unit/landing/bento-grid.test.tsx
@@ -0,0 +1,119 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+  AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+import { BentoGrid } from "@landing/components/bento-grid";
+
+afterEach(cleanup);
+
+function getCountText(): string {
+  const el = screen.getByText(/^Showing/);
+  return el.textContent ?? "";
+}
+
+describe("BentoGrid", () => {
+  it("renders the section heading", () => {
+    render(<BentoGrid />);
+    expect(screen.getByText("40+ tools. Zero cloud dependency.")).toBeDefined();
+  });
+
+  it("renders the search input", () => {
+    render(<BentoGrid />);
+    expect(screen.getByPlaceholderText("Search tools...")).toBeDefined();
+  });
+
+  it("shows all tools by default", () => {
+    render(<BentoGrid />);
+    const text = getCountText();
+    expect(text).toMatch(/Showing 46 of 46 tools/);
+  });
+
+  it("renders category filter pills including All", () => {
+    render(<BentoGrid />);
+    expect(screen.getByText((_, el) => el?.textContent === "All (46)")).toBeDefined();
+    expect(screen.getByText(/Essentials/)).toBeDefined();
+    expect(screen.getByText(/AI Tools/)).toBeDefined();
+    expect(screen.getByText(/Optimization/)).toBeDefined();
+  });
+
+  it("filters tools by search query", () => {
+    render(<BentoGrid />);
+    const input = screen.getByPlaceholderText("Search tools...");
+    fireEvent.change(input, { target: { value: "resize" } });
+    expect(screen.getByText("Resize")).toBeDefined();
+    const text = getCountText();
+    expect(text).toMatch(/Showing \d+ of 46 tools/);
+    expect(screen.queryByText("OCR / Text Extraction")).toBeNull();
+  });
+
+  it("filters tools by category", () => {
+    render(<BentoGrid />);
+    const aiButton = screen.getByText(/AI Tools/);
+    fireEvent.click(aiButton);
+    const text = getCountText();
+    expect(text).toMatch(/Showing 13 of 46 tools/);
+    expect(screen.getByText("Remove Background")).toBeDefined();
+    expect(screen.queryByText("Resize")).toBeNull();
+  });
+
+  it("shows empty state when search matches nothing", () => {
+    render(<BentoGrid />);
+    const input = screen.getByPlaceholderText("Search tools...");
+    fireEvent.change(input, { target: { value: "xyznonexistent" } });
+    expect(screen.getByText("No tools found. Try a different search.")).toBeDefined();
+    const text = getCountText();
+    expect(text).toMatch(/Showing 0 of 46 tools/);
+  });
+
+  it("combines search and category filter", () => {
+    render(<BentoGrid />);
+    const aiButton = screen.getByText(/AI Tools/);
+    fireEvent.click(aiButton);
+    const input = screen.getByPlaceholderText("Search tools...");
+    fireEvent.change(input, { target: { value: "background" } });
+    expect(screen.getByText("Remove Background")).toBeDefined();
+    expect(screen.queryByText("Image Upscaling")).toBeNull();
+  });
+
+  it("clicking All resets category filter", () => {
+    render(<BentoGrid />);
+    fireEvent.click(screen.getByText(/AI Tools/));
+    expect(getCountText()).toMatch(/Showing 13 of 46 tools/);
+    fireEvent.click(screen.getByText((_, el) => el?.textContent === "All (46)"));
+    expect(getCountText()).toMatch(/Showing 46 of 46 tools/);
+  });
+
+  it("renders each tool with name and description", () => {
+    render(<BentoGrid />);
+    expect(screen.getByText("Crop")).toBeDefined();
+    expect(screen.getByText("Freeform crop, aspect ratio presets, shape crop")).toBeDefined();
+  });
+
+  it("renders all 8 category pills", () => {
+    render(<BentoGrid />);
+    const categoryNames = [
+      "Essentials",
+      "Optimization",
+      "Adjustments",
+      "AI Tools",
+      "Watermark & Overlay",
+      "Utilities",
+      "Layout & Composition",
+      "Format & Conversion",
+    ];
+    for (const name of categoryNames) {
+      expect(screen.getByText(new RegExp(name))).toBeDefined();
+    }
+  });
+});
diff --git a/tests/unit/landing/components.test.tsx b/tests/unit/landing/components.test.tsx
new file mode 100644
index 00000000..0aab5bb8
--- /dev/null
+++ b/tests/unit/landing/components.test.tsx
@@ -0,0 +1,261 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <div {...props}>{children}</div>
+    ),
+    span: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <span {...props}>{children}</span>
+    ),
+  },
+  AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+const fetchMock = vi.fn().mockResolvedValue({
+  json: () => Promise.resolve({ stargazers_count: 500 }),
+});
+vi.stubGlobal("fetch", fetchMock);
+
+import { Enterprise } from "@landing/components/enterprise";
+import { Footer } from "@landing/components/footer";
+import { Hero } from "@landing/components/hero";
+import { OpenSource } from "@landing/components/open-source";
+import { Pricing } from "@landing/components/pricing";
+import { TypingCursor } from "@landing/components/typing-cursor";
+import { WhyChoose } from "@landing/components/why-choose";
+
+afterEach(cleanup);
+
+// ── Hero ──────────────────────────────────────────────────────────────
+
+describe("Hero", () => {
+  it("renders the headline", () => {
+    render(<Hero />);
+    expect(screen.getByText("Your images. Stay yours.")).toBeDefined();
+  });
+
+  it("renders the subheadline", () => {
+    render(<Hero />);
+    expect(
+      screen.getByText("The open-source, self-hosted image processing platform."),
+    ).toBeDefined();
+  });
+
+  it("renders the CTA button linking to GitHub", () => {
+    render(<Hero />);
+    const cta = screen.getByText("Get it for free");
+    const link = cta.closest("a");
+    expect(link?.getAttribute("href")).toBe("https://github.com/ashim-hq/ashim");
+    expect(link?.getAttribute("target")).toBe("_blank");
+  });
+
+  it("renders the word cloud (hidden on mobile)", () => {
+    render(<Hero />);
+    expect(screen.getByText("Resize")).toBeDefined();
+    expect(screen.getByText("OCR")).toBeDefined();
+    expect(screen.getByText("Remove BG")).toBeDefined();
+  });
+});
+
+// ── TypingCursor ──────────────────────────────────────────────────────
+
+describe("TypingCursor", () => {
+  it("renders the first phrase", () => {
+    render(<TypingCursor />);
+    expect(screen.getByText("No signups. No accounts.")).toBeDefined();
+  });
+
+  it("uses a 3-second interval for rotation", () => {
+    vi.useFakeTimers();
+    render(<TypingCursor />);
+    const first = screen.getByText("No signups. No accounts.");
+    expect(first).toBeDefined();
+    vi.useRealTimers();
+  });
+});
+
+// ── WhyChoose ─────────────────────────────────────────────────────────
+
+describe("WhyChoose", () => {
+  it("renders the section heading", () => {
+    render(<WhyChoose />);
+    expect(screen.getByText("Built different. On purpose.")).toBeDefined();
+  });
+
+  it("renders all 9 benefit cards", () => {
+    render(<WhyChoose />);
+    const titles = [
+      "No Signup",
+      "No Uploads",
+      "Forever Free",
+      "No Limits",
+      "Batch Processing",
+      "Lightning Fast",
+      "Open Source",
+      "REST API",
+      "Pipeline Automation",
+    ];
+    for (const title of titles) {
+      expect(screen.getByText(title)).toBeDefined();
+    }
+  });
+
+  it("renders descriptions for each card", () => {
+    render(<WhyChoose />);
+    expect(screen.getByText("Start instantly, no accounts or emails required.")).toBeDefined();
+    expect(screen.getByText("Chain tools together. Automate your workflows.")).toBeDefined();
+  });
+});
+
+// ── Enterprise ────────────────────────────────────────────────────────
+
+describe("Enterprise", () => {
+  it("renders the section heading", () => {
+    render(<Enterprise />);
+    expect(screen.getByText("Your data never leaves your network.")).toBeDefined();
+  });
+
+  it("renders all 3 enterprise feature cards", () => {
+    render(<Enterprise />);
+    expect(screen.getByText("Data Sovereignty")).toBeDefined();
+    expect(screen.getByText("Enterprise Controls")).toBeDefined();
+    expect(screen.getByText("Deploy Anywhere")).toBeDefined();
+  });
+
+  it("mentions compliance standards", () => {
+    render(<Enterprise />);
+    expect(screen.getByText(/GDPR, HIPAA, CCPA/)).toBeDefined();
+  });
+});
+
+// ── Pricing ───────────────────────────────────────────────────────────
+
+describe("Pricing", () => {
+  it("renders the section heading", () => {
+    render(<Pricing />);
+    expect(screen.getByText(/Free for everyone/)).toBeDefined();
+  });
+
+  it("renders both plan names", () => {
+    render(<Pricing />);
+    expect(screen.getByText("Open Source")).toBeDefined();
+    expect(screen.getByText("Enterprise")).toBeDefined();
+  });
+
+  it("renders Free price", () => {
+    render(<Pricing />);
+    expect(screen.getByText("Free")).toBeDefined();
+  });
+
+  it("renders Custom price for enterprise", () => {
+    render(<Pricing />);
+    expect(screen.getByText("Custom")).toBeDefined();
+  });
+
+  it("renders free plan features", () => {
+    render(<Pricing />);
+    expect(screen.getByText("All 40+ image processing tools")).toBeDefined();
+    expect(screen.getByText("Unlimited usage, no hidden caps")).toBeDefined();
+    expect(screen.getByText("14 local AI models included")).toBeDefined();
+    expect(screen.getByText("AGPL-3.0 licensed")).toBeDefined();
+  });
+
+  it("renders enterprise features", () => {
+    render(<Pricing />);
+    expect(screen.getByText("Everything in Open Source")).toBeDefined();
+    expect(screen.getByText("Priority email and video support")).toBeDefined();
+    expect(screen.getByText("OEM and white-label options")).toBeDefined();
+  });
+
+  it("links free plan CTA to GitHub", () => {
+    render(<Pricing />);
+    const freeButton = screen.getByText(/Get Started Free/);
+    expect(freeButton.closest("a")?.getAttribute("href")).toBe("https://github.com/ashim-hq/ashim");
+  });
+
+  it("links enterprise CTA to contact page", () => {
+    render(<Pricing />);
+    const contactButton = screen.getByText(/Contact Sales/);
+    expect(contactButton.closest("a")?.getAttribute("href")).toBe("/contact");
+  });
+});
+
+// ── OpenSource ────────────────────────────────────────────────────────
+
+describe("OpenSource", () => {
+  it("renders the heading", () => {
+    render(<OpenSource />);
+    expect(screen.getByText("Open source. Always.")).toBeDefined();
+  });
+
+  it("renders the description mentioning AGPL-3.0", () => {
+    render(<OpenSource />);
+    expect(screen.getByText(/AGPL-3.0 licensed/)).toBeDefined();
+  });
+
+  it("links to GitHub", () => {
+    render(<OpenSource />);
+    const link = screen.getByText("Star on GitHub").closest("a");
+    expect(link?.getAttribute("href")).toBe("https://github.com/ashim-hq/ashim");
+  });
+});
+
+// ── Footer ────────────────────────────────────────────────────────────
+
+describe("Footer", () => {
+  it("renders the brand", () => {
+    render(<Footer />);
+    expect(screen.getByText("SnapOtter")).toBeDefined();
+  });
+
+  it("renders all four column titles", () => {
+    render(<Footer />);
+    expect(screen.getByText("Product")).toBeDefined();
+    expect(screen.getByText("Resources")).toBeDefined();
+    expect(screen.getByText("Community")).toBeDefined();
+    expect(screen.getByText("Legal")).toBeDefined();
+  });
+
+  it("renders product links", () => {
+    render(<Footer />);
+    expect(screen.getByText("Features")).toBeDefined();
+    expect(screen.getByText("Pricing")).toBeDefined();
+  });
+
+  it("renders community links to GitHub", () => {
+    render(<Footer />);
+    const ghLink = screen.getByText("GitHub");
+    expect(ghLink.closest("a")?.getAttribute("href")).toBe("https://github.com/ashim-hq/ashim");
+  });
+
+  it("renders legal links", () => {
+    render(<Footer />);
+    expect(screen.getByText("Terms and Conditions")).toBeDefined();
+    expect(screen.getByText("Privacy Policy")).toBeDefined();
+    expect(screen.getByText("FAQ")).toBeDefined();
+  });
+
+  it("renders the copyright notice with current year", () => {
+    render(<Footer />);
+    const year = new Date().getFullYear();
+    expect(screen.getByText(new RegExp(`${year}`))).toBeDefined();
+  });
+
+  it("opens external links in new tab", () => {
+    render(<Footer />);
+    const docsLink = screen.getByText("Documentation").closest("a");
+    expect(docsLink?.getAttribute("target")).toBe("_blank");
+    expect(docsLink?.getAttribute("rel")).toBe("noopener noreferrer");
+  });
+
+  it("keeps internal links without target=_blank", () => {
+    render(<Footer />);
+    const faqLink = screen.getByText("FAQ").closest("a");
+    expect(faqLink?.getAttribute("target")).toBeNull();
+  });
+});
diff --git a/tests/unit/landing/contact.test.tsx b/tests/unit/landing/contact.test.tsx
new file mode 100644
index 00000000..261d5399
--- /dev/null
+++ b/tests/unit/landing/contact.test.tsx
@@ -0,0 +1,184 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/components/fade-in", () => ({
+  FadeIn: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+}));
+
+vi.mock("@/components/footer", () => ({
+  Footer: () => <footer data-testid="footer" />,
+}));
+
+vi.mock("@/components/navbar", () => ({
+  Navbar: () => <nav data-testid="navbar" />,
+}));
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+  AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+const fetchMock = vi.fn();
+vi.stubGlobal("fetch", fetchMock);
+
+import ContactPage from "@landing/app/contact/page";
+
+beforeEach(() => {
+  fetchMock.mockReset();
+  // Default: GitHub star fetch succeeds (Navbar), form submissions configured per-test
+  fetchMock.mockImplementation((url: string) => {
+    if (url.includes("github.com")) {
+      return Promise.resolve({ json: () => Promise.resolve({ stargazers_count: 100 }) });
+    }
+    return Promise.resolve({ ok: true });
+  });
+});
+
+afterEach(cleanup);
+
+describe("ContactPage", () => {
+  it("renders the page heading", () => {
+    render(<ContactPage />);
+    expect(screen.getByText("Get in touch")).toBeDefined();
+  });
+
+  it("renders all three benefit cards", () => {
+    render(<ContactPage />);
+    expect(screen.getByText("Live Demo")).toBeDefined();
+    expect(screen.getByText("Deployment Support")).toBeDefined();
+    // "Enterprise Licensing" appears as both a card title and a dropdown option
+    expect(screen.getAllByText("Enterprise Licensing").length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("renders all form fields", () => {
+    render(<ContactPage />);
+    expect(screen.getByLabelText(/Name/)).toBeDefined();
+    expect(screen.getByLabelText(/Email/)).toBeDefined();
+    expect(screen.getByLabelText(/Company/)).toBeDefined();
+    expect(screen.getByLabelText(/Subject/)).toBeDefined();
+    expect(screen.getByLabelText(/Message/)).toBeDefined();
+  });
+
+  it("renders the submit button", () => {
+    render(<ContactPage />);
+    expect(screen.getByText("Send Message")).toBeDefined();
+  });
+
+  it("renders subject dropdown with all options", () => {
+    render(<ContactPage />);
+    const select = screen.getByLabelText(/Subject/) as HTMLSelectElement;
+    const options = Array.from(select.options).map((o) => o.value);
+    expect(options).toEqual([
+      "Book a Demo",
+      "Enterprise Licensing",
+      "Deployment Help",
+      "General Inquiry",
+    ]);
+  });
+
+  it("defaults subject to Book a Demo", () => {
+    render(<ContactPage />);
+    const select = screen.getByLabelText(/Subject/) as HTMLSelectElement;
+    expect(select.value).toBe("Book a Demo");
+  });
+
+  it("shows success state after form submission", async () => {
+    render(<ContactPage />);
+    fireEvent.change(screen.getByLabelText(/Name/), { target: { value: "Test User" } });
+    fireEvent.change(screen.getByLabelText(/Email/), { target: { value: "test@example.com" } });
+    fireEvent.change(screen.getByLabelText(/Company/), { target: { value: "TestCo" } });
+    fireEvent.change(screen.getByLabelText(/Message/), { target: { value: "Hello" } });
+    fireEvent.submit(screen.getByText("Send Message").closest("form")!);
+
+    await waitFor(() => {
+      expect(screen.getByText("Message sent!")).toBeDefined();
+    });
+    expect(screen.getByText(/Thanks for reaching out/)).toBeDefined();
+  });
+
+  it("shows error message on failed submission", async () => {
+    fetchMock.mockImplementation((url: string) => {
+      if (url.includes("github.com")) {
+        return Promise.resolve({ json: () => Promise.resolve({ stargazers_count: 100 }) });
+      }
+      return Promise.resolve({ ok: false, status: 500 });
+    });
+
+    render(<ContactPage />);
+    fireEvent.change(screen.getByLabelText(/Name/), { target: { value: "Test User" } });
+    fireEvent.change(screen.getByLabelText(/Email/), { target: { value: "test@example.com" } });
+    fireEvent.change(screen.getByLabelText(/Company/), { target: { value: "TestCo" } });
+    fireEvent.change(screen.getByLabelText(/Message/), { target: { value: "Hello" } });
+    fireEvent.submit(screen.getByText("Send Message").closest("form")!);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Something went wrong/)).toBeDefined();
+    });
+  });
+
+  it("shows error message on network failure", async () => {
+    fetchMock.mockImplementation((url: string) => {
+      if (url.includes("github.com")) {
+        return Promise.resolve({ json: () => Promise.resolve({ stargazers_count: 100 }) });
+      }
+      return Promise.reject(new Error("Network error"));
+    });
+
+    render(<ContactPage />);
+    fireEvent.change(screen.getByLabelText(/Name/), { target: { value: "Test User" } });
+    fireEvent.change(screen.getByLabelText(/Email/), { target: { value: "test@example.com" } });
+    fireEvent.change(screen.getByLabelText(/Company/), { target: { value: "TestCo" } });
+    fireEvent.change(screen.getByLabelText(/Message/), { target: { value: "Hello" } });
+    fireEvent.submit(screen.getByText("Send Message").closest("form")!);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Network error/)).toBeDefined();
+    });
+  });
+
+  it("allows sending another message after success", async () => {
+    render(<ContactPage />);
+    fireEvent.change(screen.getByLabelText(/Name/), { target: { value: "Test" } });
+    fireEvent.change(screen.getByLabelText(/Email/), { target: { value: "t@t.com" } });
+    fireEvent.change(screen.getByLabelText(/Company/), { target: { value: "Co" } });
+    fireEvent.change(screen.getByLabelText(/Message/), { target: { value: "Hi" } });
+    fireEvent.submit(screen.getByText("Send Message").closest("form")!);
+
+    await waitFor(() => {
+      expect(screen.getByText("Message sent!")).toBeDefined();
+    });
+
+    fireEvent.click(screen.getByText("Send another message"));
+    expect(screen.getByText("Send Message")).toBeDefined();
+  });
+
+  it("submits to Formspree URL", async () => {
+    render(<ContactPage />);
+    fireEvent.change(screen.getByLabelText(/Name/), { target: { value: "Test" } });
+    fireEvent.change(screen.getByLabelText(/Email/), { target: { value: "t@t.com" } });
+    fireEvent.change(screen.getByLabelText(/Company/), { target: { value: "Co" } });
+    fireEvent.change(screen.getByLabelText(/Message/), { target: { value: "Hi" } });
+    fireEvent.submit(screen.getByText("Send Message").closest("form")!);
+
+    await waitFor(() => {
+      const formspreeCall = fetchMock.mock.calls.find(
+        (c: string[]) => typeof c[0] === "string" && c[0].includes("formspree.io"),
+      );
+      expect(formspreeCall).toBeDefined();
+      expect(formspreeCall![0]).toBe("https://formspree.io/f/mykllwek");
+    });
+  });
+
+  it("renders the email fallback", () => {
+    render(<ContactPage />);
+    const emailLink = screen.getByText("contact@snapotter.com");
+    expect(emailLink.closest("a")?.getAttribute("href")).toBe("mailto:contact@snapotter.com");
+  });
+});
diff --git a/tests/unit/landing/faq.test.tsx b/tests/unit/landing/faq.test.tsx
new file mode 100644
index 00000000..644e408c
--- /dev/null
+++ b/tests/unit/landing/faq.test.tsx
@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// The FAQ page source imports from @/components/* which vitest resolves through
+// the @ alias to apps/web/src/. These components only exist in the landing app,
+// so we mock them at the resolved path vitest will look for.
+vi.mock("@/components/fade-in", () => ({
+  FadeIn: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+}));
+
+vi.mock("@/components/footer", () => ({
+  Footer: () => <footer data-testid="footer" />,
+}));
+
+vi.mock("@/components/navbar", () => ({
+  Navbar: () => <nav data-testid="navbar" />,
+}));
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+  AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+const fetchMock = vi.fn().mockResolvedValue({
+  json: () => Promise.resolve({ stargazers_count: 100 }),
+});
+vi.stubGlobal("fetch", fetchMock);
+
+import FaqPage from "@landing/app/faq/page";
+
+afterEach(cleanup);
+
+describe("FaqPage", () => {
+  it("renders the page heading", () => {
+    render(<FaqPage />);
+    expect(screen.getByText("Frequently Asked Questions")).toBeDefined();
+  });
+
+  it("renders the subtitle", () => {
+    render(<FaqPage />);
+    expect(screen.getByText("Everything you need to know about SnapOtter.")).toBeDefined();
+  });
+
+  it("renders all 8 FAQ questions", () => {
+    render(<FaqPage />);
+    expect(screen.getByText("Are my files safe and private?")).toBeDefined();
+    expect(screen.getByText("Is SnapOtter really free?")).toBeDefined();
+    expect(screen.getByText("Do I need an internet connection?")).toBeDefined();
+    expect(screen.getByText("Are there any file size or usage limitations?")).toBeDefined();
+    expect(screen.getByText("What AI features are included?")).toBeDefined();
+    expect(screen.getByText("Does SnapOtter collect any analytics?")).toBeDefined();
+    expect(screen.getByText("Can I use SnapOtter in my company?")).toBeDefined();
+    expect(screen.getByText("How do I update SnapOtter?")).toBeDefined();
+  });
+
+  it("does not show answers by default", () => {
+    render(<FaqPage />);
+    expect(screen.queryByText(/All processing happens on your own server/)).toBeNull();
+    expect(screen.queryByText(/open source under AGPL-3.0/)).toBeNull();
+  });
+
+  it("expands an answer when the question is clicked", () => {
+    render(<FaqPage />);
+    const question = screen.getByText("Are my files safe and private?");
+    fireEvent.click(question);
+    expect(screen.getByText(/All processing happens on your own server/)).toBeDefined();
+  });
+
+  it("collapses an answer when the question is clicked again", () => {
+    render(<FaqPage />);
+    const question = screen.getByText("Are my files safe and private?");
+    fireEvent.click(question);
+    expect(screen.getByText(/All processing happens on your own server/)).toBeDefined();
+    fireEvent.click(question);
+    expect(screen.queryByText(/All processing happens on your own server/)).toBeNull();
+  });
+
+  it("can have multiple FAQs open at the same time", () => {
+    render(<FaqPage />);
+    fireEvent.click(screen.getByText("Are my files safe and private?"));
+    fireEvent.click(screen.getByText("Is SnapOtter really free?"));
+    expect(screen.getByText(/All processing happens on your own server/)).toBeDefined();
+    expect(screen.getByText(/open source under AGPL-3.0/)).toBeDefined();
+  });
+
+  it("renders the Navbar and Footer stubs", () => {
+    render(<FaqPage />);
+    expect(screen.getByTestId("navbar")).toBeDefined();
+    expect(screen.getByTestId("footer")).toBeDefined();
+  });
+});
diff --git a/tests/unit/landing/how-it-works.test.tsx b/tests/unit/landing/how-it-works.test.tsx
new file mode 100644
index 00000000..bec84c30
--- /dev/null
+++ b/tests/unit/landing/how-it-works.test.tsx
@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+  AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+const writeTextMock = vi.fn().mockResolvedValue(undefined);
+Object.assign(navigator, {
+  clipboard: { writeText: writeTextMock },
+});
+
+import { HowItWorks } from "@landing/components/how-it-works";
+
+beforeEach(() => {
+  writeTextMock.mockClear();
+});
+
+afterEach(cleanup);
+
+const DOCKER_COMMAND =
+  "docker run -d --name ashim -p 1349:1349 -v ashim-data:/data ghcr.io/ashim-hq/ashim:latest";
+
+describe("HowItWorks", () => {
+  it("renders the section heading", () => {
+    render(<HowItWorks />);
+    expect(screen.getByText(/One command/)).toBeDefined();
+  });
+
+  it("renders the subtitle", () => {
+    render(<HowItWorks />);
+    expect(screen.getByText("Get started in seconds")).toBeDefined();
+  });
+
+  it("displays the Docker command", () => {
+    render(<HowItWorks />);
+    expect(screen.getByText(DOCKER_COMMAND)).toBeDefined();
+  });
+
+  it("displays the dollar sign prompt", () => {
+    render(<HowItWorks />);
+    expect(screen.getByText("$")).toBeDefined();
+  });
+
+  it("shows Copy label before clicking", () => {
+    render(<HowItWorks />);
+    expect(screen.getByText("Copy")).toBeDefined();
+  });
+
+  it("copies command to clipboard on click", async () => {
+    render(<HowItWorks />);
+    const button = screen.getByText(DOCKER_COMMAND).closest("button")!;
+    fireEvent.click(button);
+    expect(writeTextMock).toHaveBeenCalledWith(DOCKER_COMMAND);
+  });
+
+  it("shows Copied! feedback after clicking", async () => {
+    render(<HowItWorks />);
+    const button = screen.getByText(DOCKER_COMMAND).closest("button")!;
+    fireEvent.click(button);
+    expect(screen.getByText("Copied!")).toBeDefined();
+  });
+
+  it("sets a timeout to revert copy state", () => {
+    vi.useFakeTimers();
+    const spy = vi.spyOn(globalThis, "setTimeout");
+    render(<HowItWorks />);
+    const button = screen.getByText(DOCKER_COMMAND).closest("button")!;
+    fireEvent.click(button);
+    expect(spy).toHaveBeenCalledWith(expect.any(Function), 2000);
+    spy.mockRestore();
+    vi.useRealTimers();
+  });
+
+  it("renders the terminal window chrome", () => {
+    render(<HowItWorks />);
+    expect(screen.getByText("Quick Start")).toBeDefined();
+  });
+
+  it("links to documentation", () => {
+    render(<HowItWorks />);
+    const docsLink = screen.getByText("Read the docs");
+    expect(docsLink.closest("a")?.getAttribute("href")).toBe("https://docs.snapotter.com");
+  });
+
+  it("mentions platform support", () => {
+    render(<HowItWorks />);
+    expect(screen.getByText(/Linux, macOS, and Windows/)).toBeDefined();
+  });
+});
diff --git a/tests/unit/landing/navbar.test.tsx b/tests/unit/landing/navbar.test.tsx
new file mode 100644
index 00000000..84811381
--- /dev/null
+++ b/tests/unit/landing/navbar.test.tsx
@@ -0,0 +1,127 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+  AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+const fetchMock = vi.fn();
+vi.stubGlobal("fetch", fetchMock);
+
+import { Navbar } from "@landing/components/navbar";
+
+beforeEach(() => {
+  fetchMock.mockReset();
+  fetchMock.mockResolvedValue({
+    json: () => Promise.resolve({ stargazers_count: 1234 }),
+  });
+});
+
+afterEach(cleanup);
+
+describe("Navbar", () => {
+  it("renders the brand name", () => {
+    render(<Navbar />);
+    expect(screen.getByText("SnapOtter")).toBeDefined();
+  });
+
+  it("renders navigation links", () => {
+    render(<Navbar />);
+    expect(screen.getAllByText("Features").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Pricing").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Docs").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Contact").length).toBeGreaterThan(0);
+  });
+
+  it("renders Book a Demo CTA", () => {
+    render(<Navbar />);
+    const ctas = screen.getAllByText("Book a Demo");
+    expect(ctas.length).toBeGreaterThan(0);
+  });
+
+  it("fetches GitHub star count on mount", async () => {
+    render(<Navbar />);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledWith("https://api.github.com/repos/ashim-hq/ashim");
+    });
+  });
+
+  it("displays formatted star count after fetch", async () => {
+    render(<Navbar />);
+    await waitFor(() => {
+      expect(screen.getByText("1.2k")).toBeDefined();
+    });
+  });
+
+  it("formats star count correctly for exact thousands", async () => {
+    fetchMock.mockResolvedValue({
+      json: () => Promise.resolve({ stargazers_count: 2000 }),
+    });
+    render(<Navbar />);
+    await waitFor(() => {
+      expect(screen.getByText("2k")).toBeDefined();
+    });
+  });
+
+  it("shows raw count for numbers under 1000", async () => {
+    fetchMock.mockResolvedValue({
+      json: () => Promise.resolve({ stargazers_count: 456 }),
+    });
+    render(<Navbar />);
+    await waitFor(() => {
+      expect(screen.getByText("456")).toBeDefined();
+    });
+  });
+
+  it("handles star fetch failure gracefully", async () => {
+    fetchMock.mockRejectedValue(new Error("Network error"));
+    render(<Navbar />);
+    await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+    // Star count should not appear - still shows default "Star" text
+    expect(screen.getAllByText("Star on GitHub").length).toBeGreaterThan(0);
+  });
+
+  it("toggles mobile menu on hamburger click", () => {
+    render(<Navbar />);
+    const toggleButton = screen.getByLabelText("Toggle menu");
+    expect(screen.queryByText("Book a Demo")).toBeDefined();
+    fireEvent.click(toggleButton);
+    const mobileLinks = screen.getAllByText("Features");
+    expect(mobileLinks.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("closes mobile menu when a link is clicked", () => {
+    render(<Navbar />);
+    fireEvent.click(screen.getByLabelText("Toggle menu"));
+    const mobileFeatures = screen.getAllByText("Features");
+    fireEvent.click(mobileFeatures[mobileFeatures.length - 1]);
+    // After clicking, mobile menu should close (we can't easily test DOM removal
+    // without checking state, but the onClick handler calls setOpen(false))
+  });
+
+  it("links Docs to external URL with target=_blank", () => {
+    render(<Navbar />);
+    const docsLinks = screen.getAllByText("Docs");
+    const externalDoc = docsLinks.find(
+      (el) => el.closest("a")?.getAttribute("target") === "_blank",
+    );
+    expect(externalDoc).toBeDefined();
+    expect(externalDoc?.closest("a")?.getAttribute("href")).toBe("https://docs.snapotter.com");
+  });
+
+  it("links GitHub button to correct repo", () => {
+    render(<Navbar />);
+    const githubLinks = screen.getAllByText("Star on GitHub");
+    const link = githubLinks[0].closest("a");
+    expect(link?.getAttribute("href")).toBe("https://github.com/ashim-hq/ashim");
+    expect(link?.getAttribute("target")).toBe("_blank");
+  });
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index 1b2998f2..1d2e2f93 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,10 +9,16 @@ const apiNodeModules = path.resolve(__dirname, "apps/api/node_modules");
 // Resolve web-workspace packages that pnpm only exposes under apps/web/node_modules.
 const webNodeModules = path.resolve(__dirname, "apps/web/node_modules");
 
+// Resolve landing-workspace packages.
+const landingNodeModules = path.resolve(__dirname, "apps/landing/node_modules");
+
 // Temp dir for integration test DB + workspace (set BEFORE any app code loads)
 const testDir = path.join(os.tmpdir(), `ashim-test-${crypto.randomUUID().slice(0, 8)}`);
 
 export default defineConfig({
+  esbuild: {
+    jsx: "automatic",
+  },
   test: {
     globals: true,
     testTimeout: 30_000,
@@ -71,11 +77,15 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      "@landing": path.resolve(__dirname, "apps/landing/src"),
+      // Landing page components that don't exist in web but are imported via @/
+      "@/components/fade-in": path.resolve(__dirname, "apps/landing/src/components/fade-in"),
+      "@/components/footer": path.resolve(__dirname, "apps/landing/src/components/footer"),
+      "@/components/navbar": path.resolve(__dirname, "apps/landing/src/components/navbar"),
       "@": path.resolve(__dirname, "apps/web/src"),
+      "framer-motion": path.join(landingNodeModules, "framer-motion"),
       "@ashim/image-engine": path.resolve(__dirname, "packages/image-engine/src/index.ts"),
       "@ashim/shared": path.resolve(__dirname, "packages/shared/src/index.ts"),
-      // Map api-only dependencies so integration tests (and transitive imports
-      // from apps/api/src) can resolve them from the root vitest runner.
       fastify: path.join(apiNodeModules, "fastify"),
       "@fastify/cors": path.join(apiNodeModules, "@fastify/cors"),
       "@fastify/multipart": path.join(apiNodeModules, "@fastify/multipart"),
@@ -93,8 +103,6 @@ export default defineConfig({
       jsqr: path.join(apiNodeModules, "jsqr"),
       pdfkit: path.join(apiNodeModules, "pdfkit"),
       sharp: path.join(apiNodeModules, "sharp"),
-      // Map web-only dependencies so component tests can resolve them
-      // from the root vitest runner.
       react: path.join(webNodeModules, "react"),
       "react-dom": path.join(webNodeModules, "react-dom"),
       zustand: path.join(webNodeModules, "zustand"),