Cycle 2: QControl Product Page — Implementation Plan

Context

QControl is a new product that provides visibility and control for AI agents. The Q2 design comp (design/inbox/QPT.2026.Q2.brochure-site.png) defines a dedicated product page with 5 sections telling the AI agent visibility story. This page will live at /products/qcontrol and appear in the existing products dropdown nav.

All graphics/illustrations are PNGs — placeholder boxes will be used initially, with real assets swapped in later.

Architecture

The existing product pages (QTap, QPlane, DevTools) are content-driven via content/products/*.md rendered by app/pages/products/[slug].vue. The QControl design is too custom for MDC — each section has unique layout and image placement. So we use a hybrid approach:

1. content/products/qcontrol.md — Minimal frontmatter-only file so QControl appears in the nav dropdown (the nav queries the products collection automatically)
2. app/pages/products/qcontrol.vue — Dedicated Vue SFC that takes routing precedence over [slug].vue, composing 5 section components
3. app/components/qcontrol/ — Section components for the page

This way QControl auto-appears in the products dropdown without any nav code changes, while the page itself has full layout control.

File Structure

app/
  pages/
    products/
      qcontrol.vue                    # Dedicated page (overrides [slug].vue)
  components/
    qcontrol/
      QcontrolHero.vue                # Section 1 — Hero
      QcontrolGap.vue                 # Section 2 — The Gap
      QcontrolAgent.vue               # Section 3 — The AI Agent Itself
      QcontrolVerbs.vue               # Section 4 — Three Verbs
      QcontrolSurface.vue             # Section 5 — Maximum Surface Area
content/
  products/
    qcontrol.md                       # Nav listing entry (frontmatter only)
public/
  images/
    2026.Q2/                          # PNG assets (added later)

Implementation Steps

Step 1: Create content/products/qcontrol.md

Minimal content file for nav integration:

---
title: QControl
description: "Visibility and control for the AI agents in your environment"
navigation:
  order: 0
  parent: "products"
tags: ["product", "agents", "visibility", "control"]
listingImage: /images/2026.Q2/qcontrol-listing.png
---

Setting order: 0 puts QControl first in the dropdown (QTap is 1, QPlane is 2). The body can be empty — the dedicated Vue page handles rendering.

Step 2: Create app/pages/products/qcontrol.vue

Nuxt's file-based routing gives qcontrol.vue precedence over [slug].vue for the /products/qcontrol route.

<template>
  <div>
    <QcontrolHero />
    <QcontrolGap />
    <QcontrolAgent />
    <QcontrolVerbs />
    <QcontrolSurface />
  </div>
</template>

<script setup>
definePageMeta({ layout: 'default' })

useSeo({
  title: 'QControl - Visibility and Control for AI Agents',
  description: 'Discover, observe, and enforce agent behavior. Visibility and control for the agents in your environment.',
  ogTitle: 'QControl',
  ogDescription: 'Visibility and control for the agents in your environment.'
})

useSchemaOrg([{
  '@type': 'SoftwareApplication',
  name: 'QControl',
  description: 'Visibility and control for the AI agents in your environment.',
  applicationCategory: 'SecurityApplication',
  operatingSystem: 'Linux, macOS',
  publisher: { '@type': 'Organization', name: 'QPoint', url: 'https://qpoint.io' }
}])
</script>

Step 3: Build Section Components

All in app/components/qcontrol/. Placeholder <div> boxes with dashed borders and labels stand in for PNGs until real assets arrive.

Placeholder Pattern

Each placeholder is a styled <div>:

<div class="bg-grey-100 border-2 border-dashed border-grey-300 rounded-lg 
            flex items-center justify-center text-grey-400 text-14 
            aspect-video w-full">
  {{ label }}
</div>

This makes it visually clear where images belong and easy to find-and-replace with <img> tags later.

QcontrolHero.vue — Section 1

• Layout: Two-column grid (lg:grid-cols-2), stacks on mobile
• Left column:
  • Eyebrow: "QCONTROL · ENDPOINT MONITORING FOR AI AGENTS" — small purple uppercase
  • <h1> "Visibility and control for the agents in your environment."
  • Paragraph: description of qcontrol
  • Two CTAs: "Install Qcontrol" (primary btn-primary) + "Talk to Us" (btn-secondary, links to /contact)
• Right column: Placeholder for terminal/code illustration PNG
• Tailwind: section-padding, text-hero headline, text-body paragraph
• Responsive: Image stacks below text on mobile (order-first lg:order-last)

QcontrolGap.vue — Section 2

• Eyebrow: "THE AGENT IS THE GAP"
• Headline: <h2> "No layer of your stack was built for the agent" — "the agent" highlighted in text-grape-500
• Two-column grid:
  • Left: Narrative paragraph about the security gap
  • Right: Placeholder for Security Layer vs Limitations diagram PNG
• Below: Stats bar — "Claude Desktop" label with metrics (1.2s, 97+, 276+)
  • Build as a flex row with styled spans initially (live text for SEO)
  • Can be swapped to PNG later if preferred
• Tailwind: section-padding, text-heading

QcontrolAgent.vue — Section 3

• Two-column layout:
  • Left: Robot illustration placeholder + "The AI Agent Itself" headline + descriptive text ("Every file it reads, every tool call it makes, every outbound connection")
  • Right: MCP Server architecture diagram placeholder
• Tailwind: section-padding, text-heading

QcontrolVerbs.vue — Section 4

• Centered headline: <h2> "Three verbs in one binary" — "one binary" in purple
• Code display: qcontrol run in mono styled block
• Three-column grid (lg:grid-cols-3):
  • 01 · Discover — "Find every agent on the box" + text + placeholder sub-card images (Flow Discovered, Skills & Tools Used)
  • 02 · Observe — "See what they're doing" + text + placeholder sub-cards (HTTP Requests, Access Blocked)
  • 03 · Enforce — "Decide what happens next" + text + placeholder sub-cards (Mutate/Validate Content, Content as Signal)
• Responsive: Single column on mobile, 3 columns from lg:

QcontrolSurface.vue — Section 5

• Headline: <h2> "Maximum surface area."
• Subtext: Coverage description
• Right side: Placeholder for File Activity categories graphic
• Below: 2x2 grid (md:grid-cols-2) with four categories:
  • File Activity, Network Behavior, Tool Calls, Process Execution
  • Each: <h3> + description paragraph
• Accent: File tree illustration placeholder
• Tailwind: section-padding

Step 4: Responsive Strategy

The comp is desktop-only. Rules:

• All section grids: single column on mobile -> multi-column from lg:
• Hero image: order-first lg:order-last (image below headline on mobile)
• Three Verbs: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
• Surface Area grid: grid-cols-1 md:grid-cols-2
• Images/placeholders: w-full with max-w- constraints
• Typography: existing text-hero/text-heading already have responsive sizing
• page-wrapper handles horizontal padding

Step 5: Typography & Color Details

From the comp:

• Hero headline: text-hero (44px mobile / 56px desktop), font-bold
• Section headlines: text-heading with keywords in text-grape-500
• Eyebrows: text-14 font-bold text-grape-600 uppercase tracking-wider
• Body text: text-body or text-16/text-18
• Code/terminal: font-mono bg-grey-900 text-white rounded-lg p-4
• Stats numbers: Large font-bold with text-grape-500

Files Modified / Created

No existing files are modified. The nav picks up QControl automatically from the content collection.

Build Order

1. content/products/qcontrol.md + app/pages/products/qcontrol.vue — verify route works and product appears in nav
2. QcontrolHero.vue — hero section with placeholder, verify layout
3. QcontrolGap.vue — gap section
4. QcontrolAgent.vue — agent section
5. QcontrolVerbs.vue — three verbs section (most complex layout)
6. QcontrolSurface.vue — surface area section
7. Responsive pass across all sections
8. Swap placeholders for real PNGs when available

Verification

1. npm run dev — page renders at /products/qcontrol
2. "QControl" appears in the products dropdown nav
3. Products index page (/products) lists QControl
4. All 5 sections render with placeholder boxes
5. Responsive: check 320px, 768px, 1024px, 1440px
6. npm run generate — static build succeeds
7. Other product pages (/products/qtap, etc.) still work
8. Blog, homepage, and other routes unaffected

Reference Files

These existing files should be consulted during implementation:

• Design comp: design/inbox/QPT.2026.Q2.brochure-site.png
• Existing product pattern: content/products/qtap.md (frontmatter structure)
• Product page renderer: app/pages/products/[slug].vue (for understanding what qcontrol.vue overrides)
• Nav component: app/components/AppNav.vue (queries products collection — no changes needed)
• Tailwind config: tailwind.config.js (grape colors, typography utilities, custom classes)
• Global CSS: app/assets/css/main.css (btn-primary, section-padding, text-hero, etc.)
• SEO composable: app/composables/useSeo.ts
• Layout: app/layouts/default.vue (AppNav + AppFooterNew + CookieConsent)
• Content schema: content.config.ts (products collection schema)
• Existing hero pattern: app/components/HowItWorksHero.vue (layout reference)