Brochure Site Q2 Redesign

The current brochure site was positioned for security buyers (c11). The product story has evolved — Qpoint is now squarely about visibility and control for AI agents. The Q2 design (from Illustrator) reframes the entire landing page around this narrative: the agent gap, qcontrol as the answer, three verbs (discover/observe/enforce), and maximum surface area coverage.

Implement the Q2 2026 brochure site design as a live page in www.qpoint.io, faithfully translating the Illustrator comp into Vue + Tailwind using shared layer components.

In scope

• Section 1 — Hero: "Visibility and control for the agents in your environment." Two CTAs (Install Qcontrol, Talk to Us). Right side: terminal/code illustration with Claude Code + qcontrol snippets.
• Section 2 — The Gap: "No layer of your stack was built for the agent." Left: narrative text. Right: diagram showing Security Layer vs Limitations, Claude Desktop stats bar (1.2s, 97+, 276+).
• Section 3 — The Agent Itself: "The AI Agent Itself" with robot/tentacle illustration. "Every file it reads, every tool call it makes, every outbound connection — captured by the agent and piped at the source."
• Section 4 — Three Verbs: "Three verbs in one binary" — qcontrol run. Three columns: Discover (find every agent), Observe (see what they're doing), Enforce (decide what happens next). Each column has sub-cards (Flow Discovered, Skills & Tools Used, HTTP Requests, Access Blocked, Mutate/Validate Content as Signal).
• Section 5 — Maximum Surface Area: "Every file, agent, binary, exec, tool call, network connection…" Four categories: File Activity, Network Behavior, Tool Calls, Process Execution. Right side: file tree illustration with category icons.
• Existing navigation, footer, and shared layer components carry over as-is
• New section-level components where the design calls for patterns not yet in the layer
• Responsive behavior (the comp is desktop-only — mobile breakpoints need design decisions)
• Dark mode variant if c46 deliverables are ready; otherwise light-only first pass

Out of scope

• Pricing, docs, or secondary pages
• Backend/API changes
• Illustrations as final vector assets (use placeholder compositions initially, swap in finals later)

Phase 1 — Scaffold & Hero

1. Audit existing index.vue to understand current structure
2. Create section scaffold with all five sections as empty containers
3. Build Hero section: headline, subtext, two CTA buttons, right-side terminal illustration
4. Get typography scale right — the design uses very large display type

Phase 2 — The Gap + The Agent

5. Build "The Gap" section: two-column layout, Security Layer vs Limitations diagram, Claude Desktop stats bar
6. Build "The Agent Itself" section: illustration placeholder + narrative text
7. Decide illustration strategy: inline SVG compositions vs image assets vs mixed

Phase 3 — Three Verbs

8. Build the three-column Discover/Observe/Enforce layout
9. Build the sub-cards within each column (Flow Discovered, Skills & Tools, HTTP Requests, Access Blocked, etc.)
10. Wire up the qcontrol run command display at the top of the section

Phase 4 — Maximum Surface Area

11. Build the four-category grid (File Activity, Network Behavior, Tool Calls, Process Execution)
12. Build the right-side file tree illustration
13. Category icon treatment

Phase 5 — Polish & Responsive

14. Responsive breakpoints — make mobile decisions where the comp doesn't specify
15. Animation/transition passes if desired
16. Dark mode application (pending c46)
17. Cross-browser check, Lighthouse pass

A live, deployed brochure page at www.qpoint.io that matches the Q2 Illustrator design — telling the AI agent visibility story through five clear sections, built on the shared layer, ready for dark mode when the color system lands.

Branch: qcontrol-initial (off design-integration) Page route: /products/qcontrol (dedicated Vue SFC, not content-driven) Progress: Phase 1–4 complete, Phase 5 in progress

Completed

• Nav integration via content/products/qcontrol.md (auto-appears in products dropdown)
• Page composer: app/pages/products/qcontrol.vue with SEO + schema.org
• Section 1 — Hero: headline, CTAs, agents SVG illustration
• Section 2 — The Gap: security layer table (QcontrolGapLayerTr), SVG icons per layer
• Section 3 — The Agent: robot illustration, dossier SVG, stats card (1.2s / 97+ / 276+)
• Section 4 — Three Verbs: VerbsItem sub-component, arrow connectors, blinking cursor, verb detail SVGs
• Section 5 — Surface Area: SurfaceAreaItem sub-component, surface-area SVG, 2x2 category grid
• Body background override (bg-grey-100)
• Eyebrow utility class
• Responsive breakpoints (custom min-[800px], min-[1040px], etc.)

Remaining

• Responsive polish pass (mobile edge cases)
• Animation/transition passes
• Dark mode (pending c46)
• Cross-browser check, Lighthouse
• Final copy review
• Deploy to production