run-vibes · rupurt · Dec 27, 2025 · Dec 26, 2025 · Dec 26, 2025 · Dec 26, 2025
diff --git a/docs/PROGRESS.md b/docs/PROGRESS.md
@@ -2,7 +2,7 @@
 
 Track the progress of phases, milestones, and tasks for the Vibes website.
 
-**Last Updated:** 2025-12-24
+**Last Updated:** 2025-12-26
 
 ---
 
@@ -12,7 +12,7 @@ Track the progress of phases, milestones, and tasks for the Vibes website.
 |-------|------|--------|----------|
 | 1 | Foundation (MVP) | Complete | 100% |
 | 2 | Brand Identity | Complete | 100% |
-| 3 | Content & Credibility | Not Started | 0% |
+| 3 | Content & Credibility | In Progress | 20% |
 | 4 | Insights & Growth | Not Started | 0% |
 | 5 | Polish & Expand | Not Started | 0% |
 
@@ -160,10 +160,30 @@ Track the progress of phases, milestones, and tasks for the Vibes website.
 
 ## Phase 3: Content & Credibility
 
-**Goal:** Industry pages, case studies, about page, newsletter integration.
+**Goal:** Industry pages, case studies, about page, newsletter integration, and product showcases.
 
 ### Milestones
 
+#### Integrations
+| Task | Status | PR |
+|------|--------|-----|
+| Newsletter provider setup | ⬜ Not Started | — |
+| Newsletter signup form | ⬜ Not Started | — |
+
+#### Products
+| Product | Page Status | Product Status | Description |
+|---------|-------------|----------------|-------------|
+| [Vibes](https://github.com/run-vibes/vibes) | ✅ Done | 🔄 In Progress | Remote control for your Claude Code sessions |
+| Volt | ✅ Done | 🔄 In Progress | Volatility analysis, simulation & trade execution system |
+
+| Task | Status | PR |
+|------|--------|-----|
+| Products index route (/products) | ✅ Done | [#27](https://github.com/run-vibes/website/pull/27) |
+| Vibes product page (/products/vibes) | ✅ Done | [#27](https://github.com/run-vibes/website/pull/27) |
+| Volt teaser page (/products/volt) | ✅ Done | [#27](https://github.com/run-vibes/website/pull/27) |
+| Waitlist API endpoint | ✅ Done | [#27](https://github.com/run-vibes/website/pull/27) |
+| Product components (StatusBadge, CodeBlock, WaitlistForm, etc.) | ✅ Done | [#27](https://github.com/run-vibes/website/pull/27) |
+
 #### Industry Pages
 | Page | Status | PR |
 |------|--------|-----|
@@ -187,12 +207,6 @@ Track the progress of phases, milestones, and tasks for the Vibes website.
 | About page | ⬜ Not Started | — |
 | Team section | ⬜ Not Started | — |
 
-#### Integrations
-| Task | Status | PR |
-|------|--------|-----|
-| Newsletter provider setup | ⬜ Not Started | — |
-| Newsletter signup form | ⬜ Not Started | — |
-
 ---
 
 ## Phase 4: Insights & Growth
@@ -239,6 +253,16 @@ Track the progress of phases, milestones, and tasks for the Vibes website.
 
 ## Recent Updates
 
+### 2025-12-26 (Products Pages)
+- Added product showcase pages for Vibes and Volt ([#27](https://github.com/run-vibes/website/pull/27))
+  - Products index page (/products) with product cards
+  - Vibes product page (/products/vibes) with install command, features, and "How It Works"
+  - Volt teaser page (/products/volt) with atmospheric design and waitlist form
+- Added waitlist API endpoint for email capture
+- Created 6 new product components: StatusBadge, CodeBlock, FeatureGrid, BuiltByVibes, WaitlistForm, ProductCard
+- Added Products link to navbar
+- Updated Phase 3 to In Progress
+
 ### 2025-12-24 (CI/CD Automation)
 - Simplified CI workflow - Cloudflare's GitHub integration handles Pages deployment (#19)
 - Added staging environment for chat worker

diff --git a/docs/plans/09-products/design.md b/docs/plans/09-products/design.md
@@ -0,0 +1,249 @@
+# Products Pages Design
+
+## Overview
+
+Add product showcase pages to the Vibes website, serving dual purposes:
+1. **Product marketing** — Treat Vibes and Volt as standalone products
+2. **Lead generation** — Demonstrate Vibes studio's product development capabilities
+
+## Information Architecture
+
+### URL Structure
+
+```
+/products          → Index page (both products)
+/products/vibes    → Full Vibes product page
+/products/volt     → Volt teaser page
+```
+
+### Navigation
+
+Add "Products" to main navbar between "Services" and "Contact".
+
+### Status Model
+
+```typescript
+type ProductStatus = 'available' | 'coming-soon'
+```
+
+Drives badge styling, CTA text, and whether install commands appear.
+
+---
+
+## Products Index Page (`/products`)
+
+### Hero Section
+
+- **Headline:** "What We're Building"
+- **Subhead:** "Open source tools and platforms from the Vibes studio."
+
+### Product Cards
+
+2-column grid on desktop, stacked on mobile. Each card includes:
+
+- Screenshot thumbnail (16:9 ratio)
+- Status badge ("Available" / "Coming Soon")
+- Product name (large heading)
+- One-liner tagline
+- 3 feature bullets
+- "Learn More →" CTA
+
+#### Vibes Card
+
+```
+[Screenshot: terminal with vibes claude command]
+[Available badge]
+
+Vibes
+Remote control for your Claude Code sessions
+
+• Control sessions from any device
+• Native Rust plugin system
+• Real-time session mirroring
+
+[Learn More →]
+```
+
+#### Volt Card
+
+```
+[Screenshot: blurred/cropped prototype dashboard]
+[Coming Soon badge]
+
+Volt
+Volatility analysis & trade execution
+
+• IV surfaces and Greeks analytics
+• 11 options strategies built-in
+• Backtest with synthetic or real data
+
+[Learn More →]
+```
+
+---
+
+## Vibes Product Page (`/products/vibes`)
+
+### Hero Section
+
+- **Headline:** "Vibes"
+- **Tagline:** "Remote control for your Claude Code sessions"
+- **Description:** 1-2 sentences expanding on value prop
+- **Primary CTA:** Copyable install command
+  ```bash
+  curl -sSf https://vibes.run/install | sh
+  ```
+- **Secondary CTA:** "Star on GitHub" with star count badge
+- **Visual:** Terminal screenshot or animated demo
+
+### Features Grid (2x2)
+
+| Feature | Description |
+|---------|-------------|
+| Remote Access | Control sessions from your phone, tablet, or any device via web UI |
+| Session Mirroring | Real-time sync between terminal and remote devices |
+| Plugin System | Extend with native Rust plugins for custom workflows |
+| Cross-Platform | Single binary for Linux, macOS, and Windows |
+
+### How It Works Section
+
+3-step visual flow:
+1. Install vibes CLI
+2. Run `vibes claude "your prompt"`
+3. Access from any device at `localhost:7432`
+
+### Architecture Diagram
+
+Clean SVG recreation of the ASCII architecture from README.
+
+### Built by Vibes Callout
+
+Subtle banner: "Vibes is built by Vibes, the agentic consulting studio. Need custom AI tooling? [Let's talk →]"
+
+---
+
+## Volt Teaser Page (`/products/volt`)
+
+### Atmospheric Background
+
+- Blurred, cropped screenshot of prototype dashboard
+- Dark overlay gradient for text legibility
+- Subtle animated grain or glow effect (matches site aesthetic)
+
+### Hero Section (centered, minimal)
+
+- **Status badge:** "Coming Soon"
+- **Headline:** "Volt"
+- **Tagline:** "Volatility analysis, simulation & trade execution"
+- **Description:** "A comprehensive platform for traders who want to analyze options volatility, backtest strategies, and execute with confidence."
+- No feature list — maintain mystery
+
+### Email Capture Form
+
+```
+[Email input: "Enter your email"]
+[Button: "Get Early Access"]
+```
+
+- Success state: "You're on the list. We'll notify you when Volt launches."
+- Stores to D1 `waitlist` table with `product: 'volt'`
+
+### Screenshot Gallery
+
+Below the fold, 2-3 static screenshots from HTML prototypes:
+- "IV Surface Visualization"
+- "Strategy Builder"
+- "Backtest Results"
+
+Styled as floating cards with subtle shadows.
+
+### Built by Vibes Callout
+
+Same treatment as Vibes page.
+
+---
+
+## Technical Implementation
+
+### New Routes
+
+```
+src/routes/products/index.tsx      → Products index
+src/routes/products/vibes.tsx      → Vibes product page
+src/routes/products/volt.tsx       → Volt teaser page
+```
+
+### New Components
+
+```
+src/components/products/ProductCard.tsx      → Card for index page
+src/components/products/StatusBadge.tsx      → "Available" / "Coming Soon"
+src/components/products/FeatureGrid.tsx      → 2x2 or 3-col feature display
+src/components/products/WaitlistForm.tsx     → Email capture for Volt
+src/components/products/CodeBlock.tsx        → Copyable install command
+src/components/products/BuiltByVibes.tsx     → Lead-gen callout banner
+```
+
+### Backend: Waitlist API
+
+**New endpoint:** `POST /api/waitlist`
+
+```typescript
+// Request
+{ email: string, product: string }
+
+// Response
+{ success: true } | { error: string }
+```
+
+**Validation:**
+- Email format validation
+- Product must be in allowed list (`volt`, `vibes`)
+- Rate limiting (reuse existing session-based approach)
+
+### Database: Waitlist Table
+
+```sql
+-- 0003_waitlist.sql
+CREATE TABLE waitlist (
+  id TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+  email TEXT NOT NULL,
+  product TEXT NOT NULL,  -- 'volt' | 'vibes' | future products
+  created_at TEXT NOT NULL DEFAULT (datetime('now')),
+
+  -- Optional context
+  referrer TEXT,          -- Where they came from
+  user_agent TEXT,        -- Browser info
+
+  UNIQUE(email, product)  -- Prevent duplicate signups per product
+);
+
+CREATE INDEX idx_waitlist_product ON waitlist(product);
+CREATE INDEX idx_waitlist_created ON waitlist(created_at);
+```
+
+---
+
+## Assets Required
+
+### Vibes
+
+- Terminal screenshot showing `vibes claude` command
+- Architecture diagram (SVG, recreated from ASCII)
+- OG image for social sharing
+
+### Volt
+
+- 2-3 prototype screenshots (from HTML prototypes)
+- Blurred hero background image
+- OG image for social sharing
+
+---
+
+## Lead Generation Tie-in
+
+Both product pages include a "Built by Vibes" callout:
+
+> "Vibes is built by Vibes, the agentic consulting studio. Need custom AI tooling? Let's talk →"
+
+Links to `/contact` to drive leads.