+
+ )
+}
+```
+
+Create `src/components/products/CodeBlock/index.ts`:
+
+```typescript
+export { CodeBlock } from './CodeBlock'
+```
+
+**Step 4: Run test to verify it passes**
+
+```bash
+pnpm test src/components/products/CodeBlock/CodeBlock.test.tsx
+```
+
+Expected: PASS
+
+**Step 5: Commit**
+
+```bash
+git add src/components/products/CodeBlock/
+git commit -m "feat: add CodeBlock component with copy functionality"
+```
+
+---
+
+## Task 5: FeatureGrid Component
+
+**Files:**
+- Create: `src/components/products/FeatureGrid/FeatureGrid.tsx`
+- Create: `src/components/products/FeatureGrid/FeatureGrid.test.tsx`
+- Create: `src/components/products/FeatureGrid/index.ts`
+
+**Step 1: Write the failing test**
+
+Create `src/components/products/FeatureGrid/FeatureGrid.test.tsx`:
+
+```tsx
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { FeatureGrid } from './FeatureGrid'
+
+const features = [
+ { title: 'Remote Access', description: 'Control from anywhere' },
+ { title: 'Plugin System', description: 'Extend with plugins' },
+]
+
+describe('FeatureGrid', () => {
+ it('renders all feature titles', () => {
+ render({code}
+
+
+ {features.map((feature) => (
+
+ )
+}
+```
+
+Create `src/components/products/FeatureGrid/index.ts`:
+
+```typescript
+export { FeatureGrid, type Feature } from './FeatureGrid'
+```
+
+**Step 4: Run test to verify it passes**
+
+```bash
+pnpm test src/components/products/FeatureGrid/FeatureGrid.test.tsx
+```
+
+Expected: PASS
+
+**Step 5: Commit**
+
+```bash
+git add src/components/products/FeatureGrid/
+git commit -m "feat: add FeatureGrid component"
+```
+
+---
+
+## Task 6: BuiltByVibes Component
+
+**Files:**
+- Create: `src/components/products/BuiltByVibes/BuiltByVibes.tsx`
+- Create: `src/components/products/BuiltByVibes/BuiltByVibes.test.tsx`
+- Create: `src/components/products/BuiltByVibes/index.ts`
+
+**Step 1: Write the failing test**
+
+Create `src/components/products/BuiltByVibes/BuiltByVibes.test.tsx`:
+
+```tsx
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { createMemoryHistory, createRootRoute, createRouter, RouterProvider } from '@tanstack/react-router'
+import { BuiltByVibes } from './BuiltByVibes'
+
+function renderWithRouter(component: React.ReactNode) {
+ const rootRoute = createRootRoute({ component: () => component })
+ const router = createRouter({
+ routeTree: rootRoute,
+ history: createMemoryHistory({ initialEntries: ['/'] }),
+ })
+ return render(
+
+ {feature.title}
+
+ {feature.description}
+
+ ))}
+
+
+ Built by{' '}
+ Vibes, the
+ agentic consulting studio.{' '}
+
+ Let's talk →
+
+
+
+ )
+}
+```
+
+Create `src/components/products/BuiltByVibes/index.ts`:
+
+```typescript
+export { BuiltByVibes } from './BuiltByVibes'
+```
+
+**Step 4: Run test to verify it passes**
+
+```bash
+pnpm test src/components/products/BuiltByVibes/BuiltByVibes.test.tsx
+```
+
+Expected: PASS
+
+**Step 5: Commit**
+
+```bash
+git add src/components/products/BuiltByVibes/
+git commit -m "feat: add BuiltByVibes lead-gen callout component"
+```
+
+---
+
+## Task 7: WaitlistForm Component
+
+**Files:**
+- Create: `src/components/products/WaitlistForm/WaitlistForm.tsx`
+- Create: `src/components/products/WaitlistForm/WaitlistForm.test.tsx`
+- Create: `src/components/products/WaitlistForm/index.ts`
+
+**Step 1: Write the failing test**
+
+Create `src/components/products/WaitlistForm/WaitlistForm.test.tsx`:
+
+```tsx
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { WaitlistForm } from './WaitlistForm'
+
+const mockFetch = vi.fn()
+global.fetch = mockFetch
+
+describe('WaitlistForm', () => {
+ beforeEach(() => {
+ mockFetch.mockReset()
+ })
+
+ it('renders email input and submit button', () => {
+ render(
+
+ You're on the list! We'll notify you when {product === 'volt' ? 'Volt' : 'Vibes'} launches.
+
+
+ )
+ }
+
+ return (
+
+ )
+}
+```
+
+Create `src/components/products/WaitlistForm/index.ts`:
+
+```typescript
+export { WaitlistForm } from './WaitlistForm'
+```
+
+**Step 4: Run test to verify it passes**
+
+```bash
+pnpm test src/components/products/WaitlistForm/WaitlistForm.test.tsx
+```
+
+Expected: PASS
+
+**Step 5: Commit**
+
+```bash
+git add src/components/products/WaitlistForm/
+git commit -m "feat: add WaitlistForm component for email capture"
+```
+
+---
+
+## Task 8: ProductCard Component
+
+**Files:**
+- Create: `src/components/products/ProductCard/ProductCard.tsx`
+- Create: `src/components/products/ProductCard/ProductCard.test.tsx`
+- Create: `src/components/products/ProductCard/index.ts`
+
+**Step 1: Write the failing test**
+
+Create `src/components/products/ProductCard/ProductCard.test.tsx`:
+
+```tsx
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { createMemoryHistory, createRootRoute, createRouter, RouterProvider } from '@tanstack/react-router'
+import { ProductCard } from './ProductCard'
+
+function renderWithRouter(component: React.ReactNode) {
+ const rootRoute = createRootRoute({ component: () => component })
+ const router = createRouter({
+ routeTree: rootRoute,
+ history: createMemoryHistory({ initialEntries: ['/'] }),
+ })
+ return render(
+ 
+
+ )}
+
+
+
+
+ {name}
+
+ {tagline}
+
+ -
+ {features.map((feature) => (
+
-
+ •
+
{feature} +
+ ))}
+
+ {products.map((product) => (
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ {steps.map((item) => (
+
+
+
+ {item.title}
+
+ {item.description}
+
+ ))}
+
+ {item.step}
+
+
+ {screenshots.map((screenshot) => (
+
+
+
+ {screenshot.caption}
+
+
+ ))}
+
+ 
+
+
+
+ Products
+
+
+ Services
+
+
+ Let's Talk
+
+
+```
+
+**Step 2: Test navigation**
+
+```bash
+pnpm dev
+# Click Products in navbar, verify navigation works
+```
+
+Expected: Products link appears and navigates to /products
+
+**Step 3: Commit**
+
+```bash
+git add src/components/navigation/Navbar.tsx
+git commit -m "feat: add Products link to navbar"
+```
+
+---
+
+## Task 15: E2E Tests
+
+**Files:**
+- Create: `e2e/products.spec.ts`
+
+**Step 1: Write E2E tests**
+
+Create `e2e/products.spec.ts`:
+
+```typescript
+import { expect, test } from '@playwright/test'
+
+test.describe('Products Pages', () => {
+ test('products index displays both products', async ({ page }) => {
+ await page.goto('/products')
+
+ await expect(page.getByRole('heading', { name: "What We're Building" })).toBeVisible()
+ await expect(page.getByText('Vibes')).toBeVisible()
+ await expect(page.getByText('Volt')).toBeVisible()
+ await expect(page.getByText('Available')).toBeVisible()
+ await expect(page.getByText('Coming Soon')).toBeVisible()
+ })
+
+ test('can navigate to Vibes product page', async ({ page }) => {
+ await page.goto('/products')
+
+ await page.getByRole('link', { name: /learn more/i }).first().click()
+ await expect(page).toHaveURL('/products/vibes')
+ await expect(page.getByRole('heading', { name: 'Vibes', level: 1 })).toBeVisible()
+ })
+
+ test('Vibes page shows install command', async ({ page }) => {
+ await page.goto('/products/vibes')
+
+ await expect(page.getByText('curl -sSf https://vibes.run/install | sh')).toBeVisible()
+ await expect(page.getByRole('link', { name: /star on github/i })).toBeVisible()
+ })
+
+ test('can navigate to Volt teaser page', async ({ page }) => {
+ await page.goto('/products')
+
+ await page.getByRole('link', { name: /learn more/i }).last().click()
+ await expect(page).toHaveURL('/products/volt')
+ await expect(page.getByRole('heading', { name: 'Volt', level: 1 })).toBeVisible()
+ })
+
+ test('Volt page shows waitlist form', async ({ page }) => {
+ await page.goto('/products/volt')
+
+ await expect(page.getByText('Coming Soon')).toBeVisible()
+ await expect(page.getByPlaceholder(/email/i)).toBeVisible()
+ await expect(page.getByRole('button', { name: /get early access/i })).toBeVisible()
+ })
+
+ test('navbar has Products link', async ({ page }) => {
+ await page.goto('/')
+
+ const productsLink = page.getByRole('link', { name: 'Products' })
+ await expect(productsLink).toBeVisible()
+ await productsLink.click()
+ await expect(page).toHaveURL('/products')
+ })
+})
+```
+
+**Step 2: Run E2E tests**
+
+```bash
+just e2e
+```
+
+Expected: All products tests pass
+
+**Step 3: Commit**
+
+```bash
+git add e2e/products.spec.ts
+git commit -m "test: add E2E tests for products pages"
+```
+
+---
+
+## Task 16: Run All Checks
+
+**Step 1: Run full check suite**
+
+```bash
+just check
+```
+
+Expected: All checks pass (typecheck, lint, test, e2e)
+
+**Step 2: Verify dev server**
+
+```bash
+pnpm dev
+# Navigate through all pages, verify everything works
+```
+
+**Step 3: Final commit if any fixes needed**
+
+---
+
+## Task 17: Update Progress Doc
+
+**Files:**
+- Modify: `docs/PROGRESS.md`
+
+**Step 1: Update Products milestone status**
+
+Update the Products section in Phase 3:
+
+```markdown
+#### Products
+| Product | Status | Description |
+|---------|--------|-------------|
+| [Vibes](https://github.com/run-vibes/vibes) | ✅ Done | Remote control for your Claude Code sessions |
+| Volt | ✅ Done | Volatility analysis, simulation & trade execution system |
+```
+
+**Step 2: Add Recent Updates entry**
+
+Add to Recent Updates:
+
+```markdown
+### 2025-12-26 (Products Pages)
+- Added products index page with product cards ([#XX](https://github.com/run-vibes/website/pull/XX))
+- Added Vibes product page with features, how it works, install command
+- Added Volt teaser page with atmospheric background and waitlist form
+- Added waitlist API endpoint for email capture
+- Added Products link to navigation
+```
+
+**Step 3: Commit**
+
+```bash
+git add docs/PROGRESS.md
+git commit -m "docs: update progress with products milestone"
+```
diff --git a/e2e/products.spec.ts b/e2e/products.spec.ts
new file mode 100644
index 0000000..1d921e9
--- /dev/null
+++ b/e2e/products.spec.ts
@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Products Pages', () => {
+ test('products index displays both products', async ({ page }) => {
+ await page.goto('/products')
+
+ await expect(page.getByRole('heading', { name: "What We're Building" })).toBeVisible()
+ await expect(page.getByRole('heading', { name: 'Vibes', level: 3 })).toBeVisible()
+ await expect(page.getByRole('heading', { name: 'Volt', level: 3 })).toBeVisible()
+ await expect(page.getByText('Available')).toBeVisible()
+ await expect(page.getByText('Coming Soon')).toBeVisible()
+ })
+
+ test('can navigate to Vibes product page', async ({ page }) => {
+ await page.goto('/products')
+
+ await page
+ .getByRole('link', { name: /learn more/i })
+ .first()
+ .click()
+ await expect(page).toHaveURL('/products/vibes')
+ await expect(page.getByRole('heading', { name: 'Vibes', level: 1 })).toBeVisible()
+ })
+
+ test('Vibes page shows install command', async ({ page }) => {
+ await page.goto('/products/vibes')
+
+ await expect(page.getByText('curl -sSf https://vibes.run/install | sh')).toBeVisible()
+ await expect(page.getByRole('link', { name: /star on github/i })).toBeVisible()
+ })
+
+ test('can navigate to Volt teaser page', async ({ page }) => {
+ await page.goto('/products')
+
+ await page
+ .getByRole('link', { name: /learn more/i })
+ .last()
+ .click()
+ await expect(page).toHaveURL('/products/volt')
+ await expect(page.getByRole('heading', { name: 'Volt', level: 1 })).toBeVisible()
+ })
+
+ test('Volt page shows waitlist form', async ({ page }) => {
+ await page.goto('/products/volt')
+
+ await expect(page.getByText('Coming Soon')).toBeVisible()
+ await expect(page.getByPlaceholder(/email/i)).toBeVisible()
+ await expect(page.getByRole('button', { name: /get early access/i })).toBeVisible()
+ })
+
+ test('navbar has Products link', async ({ page }) => {
+ await page.goto('/')
+
+ const productsLink = page.getByRole('link', { name: 'Products', exact: true })
+ await expect(productsLink).toBeVisible()
+ await productsLink.click()
+ await expect(page).toHaveURL('/products')
+ })
+})
diff --git a/justfile b/justfile
index c6a6af6..4b0a70c 100644
--- a/justfile
+++ b/justfile
@@ -96,7 +96,7 @@ worker-deploy env:
# Run chat worker locally
worker-dev:
- cd workers/chat-api && wrangler dev
+ cd workers/chat-api && wrangler dev --config wrangler.toml
# Create D1 database for chat worker
worker-db-create:
@@ -110,11 +110,11 @@ worker-db-create-staging:
worker-migrate env:
#!/usr/bin/env bash
if [ "{{env}}" = "production" ]; then
- cd workers/chat-api && wrangler d1 migrations apply vibes-chat --remote
+ cd workers/chat-api && wrangler d1 migrations apply vibes-chat --remote --config wrangler.toml
elif [ "{{env}}" = "staging" ]; then
- cd workers/chat-api && wrangler d1 migrations apply vibes-chat-staging --remote
+ cd workers/chat-api && wrangler d1 migrations apply vibes-chat-staging --remote --config wrangler.toml
elif [ "{{env}}" = "local" ]; then
- cd workers/chat-api && wrangler d1 migrations apply vibes-chat --local
+ cd workers/chat-api && wrangler d1 migrations apply vibes-chat --local --config wrangler.toml
else
echo "Error: env must be 'staging', 'production', or 'local'"
exit 1
diff --git a/public/images/products/vibes-terminal.svg b/public/images/products/vibes-terminal.svg
new file mode 100644
index 0000000..cb1a1b1
--- /dev/null
+++ b/public/images/products/vibes-terminal.svg
@@ -0,0 +1,11 @@
+
diff --git a/public/images/products/volt-bg.svg b/public/images/products/volt-bg.svg
new file mode 100644
index 0000000..c1fadd2
--- /dev/null
+++ b/public/images/products/volt-bg.svg
@@ -0,0 +1,11 @@
+
diff --git a/public/images/products/volt-dashboard.svg b/public/images/products/volt-dashboard.svg
new file mode 100644
index 0000000..9f03f45
--- /dev/null
+++ b/public/images/products/volt-dashboard.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/components/navigation/Navbar.tsx b/src/components/navigation/Navbar.tsx
index f5da945..c92e9cd 100644
--- a/src/components/navigation/Navbar.tsx
+++ b/src/components/navigation/Navbar.tsx
@@ -20,6 +20,12 @@ export function Navbar({ className }: NavbarProps) {
+
+ Products
+
({
+ Link: ({ to, children, ...props }: { to: string; children: React.ReactNode }) => (
+
+ {children}
+
+ ),
+}))
+
+describe('BuiltByVibes', () => {
+ it('renders the callout text', () => {
+ render(
+ {image && (
+
+
+
+ )
+}
diff --git a/src/components/products/ProductCard/index.ts b/src/components/products/ProductCard/index.ts
new file mode 100644
index 0000000..d76f29d
--- /dev/null
+++ b/src/components/products/ProductCard/index.ts
@@ -0,0 +1 @@
+export { ProductCard } from './ProductCard'
diff --git a/src/components/products/StatusBadge/StatusBadge.test.tsx b/src/components/products/StatusBadge/StatusBadge.test.tsx
new file mode 100644
index 0000000..c1d1ef6
--- /dev/null
+++ b/src/components/products/StatusBadge/StatusBadge.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { StatusBadge } from './StatusBadge'
+
+describe('StatusBadge', () => {
+ it('renders available status with green styling', () => {
+ render( {
+ status: ProductStatus
+ className?: string
+}
+
+const statusLabels: Record = {
+ available: 'Available',
+ 'coming-soon': 'Coming Soon',
+}
+
+export function StatusBadge({ status, className }: StatusBadgeProps) {
+ return {statusLabels[status]}
+}
diff --git a/src/components/products/StatusBadge/index.ts b/src/components/products/StatusBadge/index.ts
new file mode 100644
index 0000000..53e8335
--- /dev/null
+++ b/src/components/products/StatusBadge/index.ts
@@ -0,0 +1 @@
+export { StatusBadge, type ProductStatus } from './StatusBadge'
diff --git a/src/components/products/WaitlistForm/WaitlistForm.test.tsx b/src/components/products/WaitlistForm/WaitlistForm.test.tsx
new file mode 100644
index 0000000..79e6ad1
--- /dev/null
+++ b/src/components/products/WaitlistForm/WaitlistForm.test.tsx
@@ -0,0 +1,61 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { WaitlistForm } from './WaitlistForm'
+
+const mockFetch = vi.fn()
+global.fetch = mockFetch
+
+describe('WaitlistForm', () => {
+ beforeEach(() => {
+ mockFetch.mockReset()
+ })
+
+ it('renders email input and submit button', () => {
+ render(
+
+
+ What We're Building
+
+
+ Open source tools and platforms from the Vibes studio.
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/routes/products/vibes.tsx b/src/routes/products/vibes.tsx
new file mode 100644
index 0000000..9e7572d
--- /dev/null
+++ b/src/routes/products/vibes.tsx
@@ -0,0 +1,131 @@
+import { BuiltByVibes, CodeBlock, FeatureGrid } from '@/components/products'
+import { Button, Container, Heading, Section, Text } from '@/components/ui'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/products/vibes')({
+ component: VibesPage,
+})
+
+const features = [
+ {
+ title: 'Remote Access',
+ description: 'Control Claude Code sessions from your phone, tablet, or any device via web UI.',
+ },
+ {
+ title: 'Session Mirroring',
+ description: 'Real-time sync between your terminal and remote devices.',
+ },
+ {
+ title: 'Plugin System',
+ description: 'Extend vibes with native Rust plugins for custom commands and workflows.',
+ },
+ {
+ title: 'Cross-Platform',
+ description: 'Single binary for Linux, macOS, and Windows.',
+ },
+]
+
+const steps = [
+ { step: '1', title: 'Install', description: 'Run the install command' },
+ { step: '2', title: 'Start', description: 'Run vibes claude with your prompt' },
+ { step: '3', title: 'Access', description: 'Open the web UI from any device' },
+]
+
+function VibesPage() {
+ return (
+ <>
+ {/* Hero */}
+
+
+
+ Vibes
+
+
+ Remote control for your Claude Code sessions
+
+
+ Wrap Claude Code with remote access, session management, and a plugin ecosystem —
+ control your AI coding sessions from anywhere.
+
+
+
+
+
+ {/* Screenshot */}
+
+
+
+
+
+ {/* Features */}
+
+
+
+ Features
+
+
+
+
+ {/* How It Works */}
+
+
+
+ How It Works
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ )
+}
diff --git a/src/routes/products/volt.tsx b/src/routes/products/volt.tsx
new file mode 100644
index 0000000..20b6203
--- /dev/null
+++ b/src/routes/products/volt.tsx
@@ -0,0 +1,68 @@
+import { BuiltByVibes, StatusBadge, WaitlistForm } from '@/components/products'
+import { Container, Heading, Section, Text } from '@/components/ui'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/products/volt')({
+ component: VoltPage,
+})
+
+const screenshots = [
+ { src: '/images/products/volt-dashboard.svg', caption: 'IV Surface Visualization' },
+]
+
+function VoltPage() {
+ return (
+ <>
+ {/* Hero with atmospheric background */}
+
+
+
+
+ Volt
+
+
+ Volatility analysis, simulation & trade execution
+
+
+ A comprehensive platform for traders who want to analyze options volatility, backtest
+ strategies, and execute with confidence.
+
+
+
+
+
+ {/* Screenshot Gallery */}
+
+
+
+ Preview
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+ )
+}
diff --git a/workers/chat-api/migrations/0003_waitlist.sql b/workers/chat-api/migrations/0003_waitlist.sql
new file mode 100644
index 0000000..89a251b
--- /dev/null
+++ b/workers/chat-api/migrations/0003_waitlist.sql
@@ -0,0 +1,13 @@
+-- 0003_waitlist.sql
+CREATE TABLE waitlist (
+ id TEXT PRIMARY KEY DEFAULT (lower(hex(randomblob(16)))),
+ email TEXT NOT NULL,
+ product TEXT NOT NULL,
+ created_at TEXT NOT NULL DEFAULT (datetime('now')),
+ referrer TEXT,
+ user_agent TEXT,
+ UNIQUE(email, product)
+);
+
+CREATE INDEX idx_waitlist_product ON waitlist(product);
+CREATE INDEX idx_waitlist_created ON waitlist(created_at);
diff --git a/workers/chat-api/src/index.ts b/workers/chat-api/src/index.ts
index 8c6886a..62be755 100644
--- a/workers/chat-api/src/index.ts
+++ b/workers/chat-api/src/index.ts
@@ -11,6 +11,7 @@ import {
saveMessage,
} from './session'
import type { ChatRequest, ChatResponse, Env, InterviewAnswers, LeadTierValue } from './types'
+import { addToWaitlist } from './waitlist'
// In-memory store for interview answers per session.
// Limited to prevent unbounded growth in long-running isolates.
@@ -227,6 +228,30 @@ export default {
}
}
+ if (url.pathname === '/waitlist' && request.method === 'POST') {
+ try {
+ const body = (await request.json()) as { email: string; product: string }
+ const referrer = request.headers.get('Referer') ?? undefined
+ const userAgent = request.headers.get('User-Agent') ?? undefined
+
+ const result = await addToWaitlist(env.DB, {
+ email: body.email,
+ product: body.product,
+ referrer,
+ userAgent,
+ })
+
+ if (!result.success) {
+ return jsonResponse({ error: result.error }, 400, origin)
+ }
+
+ return jsonResponse({ success: true }, 200, origin)
+ } catch (err) {
+ console.error('Waitlist error:', err)
+ return jsonResponse({ error: 'Invalid request' }, 400, origin)
+ }
+ }
+
return new Response('Not found', { status: 404 })
},
}
diff --git a/workers/chat-api/src/waitlist.ts b/workers/chat-api/src/waitlist.ts
new file mode 100644
index 0000000..abafc89
--- /dev/null
+++ b/workers/chat-api/src/waitlist.ts
@@ -0,0 +1,52 @@
+import type { D1Database } from '@cloudflare/workers-types'
+
+export interface WaitlistEntry {
+ email: string
+ product: string
+ referrer?: string
+ userAgent?: string
+}
+
+const VALID_PRODUCTS = new Set(['volt', 'vibes'])
+
+export function isValidEmail(email: string): boolean {
+ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+}
+
+export function isValidProduct(product: string): boolean {
+ return VALID_PRODUCTS.has(product)
+}
+
+export async function addToWaitlist(
+ db: D1Database,
+ entry: WaitlistEntry,
+): Promise<{ success: boolean; error?: string }> {
+ if (!isValidEmail(entry.email)) {
+ return { success: false, error: 'Invalid email format' }
+ }
+
+ if (!isValidProduct(entry.product)) {
+ return { success: false, error: 'Invalid product' }
+ }
+
+ try {
+ await db
+ .prepare(
+ `INSERT INTO waitlist (email, product, referrer, user_agent)
+ VALUES (?, ?, ?, ?)
+ ON CONFLICT (email, product) DO NOTHING`,
+ )
+ .bind(
+ entry.email.toLowerCase(),
+ entry.product,
+ entry.referrer ?? null,
+ entry.userAgent ?? null,
+ )
+ .run()
+
+ return { success: true }
+ } catch (err) {
+ console.error('Waitlist insert error:', err)
+ return { success: false, error: 'Failed to join waitlist' }
+ }
+}
diff --git a/workers/chat-api/wrangler.toml b/workers/chat-api/wrangler.toml
index d9680e4..cff9d56 100644
--- a/workers/chat-api/wrangler.toml
+++ b/workers/chat-api/wrangler.toml
@@ -1,6 +1,8 @@
name = "vibes-chat-api"
main = "src/index.ts"
compatibility_date = "2024-01-01"
+# Directory where Wrangler looks for D1 database migration files
+migrations_dir = "migrations"
# Production (default)
[vars]
+
+ Built by Vibes, the agentic
+ consulting studio.{' '}
+
+ Let's talk →
+
+
+
+ )
+}
diff --git a/src/components/products/BuiltByVibes/index.ts b/src/components/products/BuiltByVibes/index.ts
new file mode 100644
index 0000000..5a57c38
--- /dev/null
+++ b/src/components/products/BuiltByVibes/index.ts
@@ -0,0 +1 @@
+export { BuiltByVibes } from './BuiltByVibes'
diff --git a/src/components/products/CodeBlock/CodeBlock.test.tsx b/src/components/products/CodeBlock/CodeBlock.test.tsx
new file mode 100644
index 0000000..ffc59d0
--- /dev/null
+++ b/src/components/products/CodeBlock/CodeBlock.test.tsx
@@ -0,0 +1,36 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { CodeBlock } from './CodeBlock'
+
+// Mock clipboard API
+const mockWriteText = vi.fn()
+Object.assign(navigator, {
+ clipboard: { writeText: mockWriteText },
+})
+
+describe('CodeBlock', () => {
+ it('renders the code content', () => {
+ render(
+
+ )
+}
diff --git a/src/components/products/CodeBlock/index.ts b/src/components/products/CodeBlock/index.ts
new file mode 100644
index 0000000..9f4055e
--- /dev/null
+++ b/src/components/products/CodeBlock/index.ts
@@ -0,0 +1 @@
+export { CodeBlock } from './CodeBlock'
diff --git a/src/components/products/FeatureGrid/FeatureGrid.test.tsx b/src/components/products/FeatureGrid/FeatureGrid.test.tsx
new file mode 100644
index 0000000..0d02c12
--- /dev/null
+++ b/src/components/products/FeatureGrid/FeatureGrid.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { FeatureGrid } from './FeatureGrid'
+
+const features = [
+ { title: 'Remote Access', description: 'Control from anywhere' },
+ { title: 'Plugin System', description: 'Extend with plugins' },
+]
+
+describe('FeatureGrid', () => {
+ it('renders all feature titles', () => {
+ render({code}
+
+
+ {features.map((feature) => (
+
+ )
+}
diff --git a/src/components/products/FeatureGrid/index.ts b/src/components/products/FeatureGrid/index.ts
new file mode 100644
index 0000000..23ca2af
--- /dev/null
+++ b/src/components/products/FeatureGrid/index.ts
@@ -0,0 +1 @@
+export { FeatureGrid, type Feature } from './FeatureGrid'
diff --git a/src/components/products/ProductCard/ProductCard.test.tsx b/src/components/products/ProductCard/ProductCard.test.tsx
new file mode 100644
index 0000000..5741c8b
--- /dev/null
+++ b/src/components/products/ProductCard/ProductCard.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { ProductCard } from './ProductCard'
+
+// Mock the Link component from TanStack Router
+vi.mock('@tanstack/react-router', () => ({
+ Link: ({ to, children, ...props }: { to: string; children: React.ReactNode }) => (
+
+ {children}
+
+ ),
+}))
+
+describe('ProductCard', () => {
+ const props = {
+ name: 'Vibes',
+ tagline: 'Remote control for Claude Code',
+ status: 'available' as const,
+ features: ['Feature 1', 'Feature 2'],
+ href: '/products/vibes',
+ }
+
+ it('renders product name and tagline', () => {
+ render(
+
+ {feature.title}
+
+ {feature.description}
+
+ ))}
+
+
+
+ )}
+
+
+
+
+ {name}
+
+ {tagline}
+
+ -
+ {features.map((feature) => (
+
-
+ •
+
{feature} +
+ ))}
+
+
+ You're on the list! We'll notify you when {product === 'volt' ? 'Volt' : 'Vibes'}{' '}
+ launches.
+
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/products/WaitlistForm/index.ts b/src/components/products/WaitlistForm/index.ts
new file mode 100644
index 0000000..ec86616
--- /dev/null
+++ b/src/components/products/WaitlistForm/index.ts
@@ -0,0 +1 @@
+export { WaitlistForm } from './WaitlistForm'
diff --git a/src/components/products/index.ts b/src/components/products/index.ts
new file mode 100644
index 0000000..1556655
--- /dev/null
+++ b/src/components/products/index.ts
@@ -0,0 +1,6 @@
+export { StatusBadge, type ProductStatus } from './StatusBadge'
+export { CodeBlock } from './CodeBlock'
+export { FeatureGrid, type Feature } from './FeatureGrid'
+export { BuiltByVibes } from './BuiltByVibes'
+export { WaitlistForm } from './WaitlistForm'
+export { ProductCard } from './ProductCard'
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index d3f314f..df85b20 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -13,6 +13,9 @@ import { Route as ServicesRouteImport } from './routes/services'
import { Route as ContactRouteImport } from './routes/contact'
import { Route as BrandRouteImport } from './routes/brand'
import { Route as IndexRouteImport } from './routes/index'
+import { Route as ProductsIndexRouteImport } from './routes/products/index'
+import { Route as ProductsVoltRouteImport } from './routes/products/volt'
+import { Route as ProductsVibesRouteImport } from './routes/products/vibes'
const ServicesRoute = ServicesRouteImport.update({
id: '/services',
@@ -34,18 +37,39 @@ const IndexRoute = IndexRouteImport.update({
path: '/',
getParentRoute: () => rootRouteImport,
} as any)
+const ProductsIndexRoute = ProductsIndexRouteImport.update({
+ id: '/products/',
+ path: '/products/',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const ProductsVoltRoute = ProductsVoltRouteImport.update({
+ id: '/products/volt',
+ path: '/products/volt',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const ProductsVibesRoute = ProductsVibesRouteImport.update({
+ id: '/products/vibes',
+ path: '/products/vibes',
+ getParentRoute: () => rootRouteImport,
+} as any)
export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/brand': typeof BrandRoute
'/contact': typeof ContactRoute
'/services': typeof ServicesRoute
+ '/products/vibes': typeof ProductsVibesRoute
+ '/products/volt': typeof ProductsVoltRoute
+ '/products': typeof ProductsIndexRoute
}
export interface FileRoutesByTo {
'/': typeof IndexRoute
'/brand': typeof BrandRoute
'/contact': typeof ContactRoute
'/services': typeof ServicesRoute
+ '/products/vibes': typeof ProductsVibesRoute
+ '/products/volt': typeof ProductsVoltRoute
+ '/products': typeof ProductsIndexRoute
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
@@ -53,13 +77,38 @@ export interface FileRoutesById {
'/brand': typeof BrandRoute
'/contact': typeof ContactRoute
'/services': typeof ServicesRoute
+ '/products/vibes': typeof ProductsVibesRoute
+ '/products/volt': typeof ProductsVoltRoute
+ '/products/': typeof ProductsIndexRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
- fullPaths: '/' | '/brand' | '/contact' | '/services'
+ fullPaths:
+ | '/'
+ | '/brand'
+ | '/contact'
+ | '/services'
+ | '/products/vibes'
+ | '/products/volt'
+ | '/products'
fileRoutesByTo: FileRoutesByTo
- to: '/' | '/brand' | '/contact' | '/services'
- id: '__root__' | '/' | '/brand' | '/contact' | '/services'
+ to:
+ | '/'
+ | '/brand'
+ | '/contact'
+ | '/services'
+ | '/products/vibes'
+ | '/products/volt'
+ | '/products'
+ id:
+ | '__root__'
+ | '/'
+ | '/brand'
+ | '/contact'
+ | '/services'
+ | '/products/vibes'
+ | '/products/volt'
+ | '/products/'
fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
@@ -67,6 +116,9 @@ export interface RootRouteChildren {
BrandRoute: typeof BrandRoute
ContactRoute: typeof ContactRoute
ServicesRoute: typeof ServicesRoute
+ ProductsVibesRoute: typeof ProductsVibesRoute
+ ProductsVoltRoute: typeof ProductsVoltRoute
+ ProductsIndexRoute: typeof ProductsIndexRoute
}
declare module '@tanstack/react-router' {
@@ -99,6 +151,27 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof IndexRouteImport
parentRoute: typeof rootRouteImport
}
+ '/products/': {
+ id: '/products/'
+ path: '/products'
+ fullPath: '/products'
+ preLoaderRoute: typeof ProductsIndexRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/products/volt': {
+ id: '/products/volt'
+ path: '/products/volt'
+ fullPath: '/products/volt'
+ preLoaderRoute: typeof ProductsVoltRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/products/vibes': {
+ id: '/products/vibes'
+ path: '/products/vibes'
+ fullPath: '/products/vibes'
+ preLoaderRoute: typeof ProductsVibesRouteImport
+ parentRoute: typeof rootRouteImport
+ }
}
}
@@ -107,6 +180,9 @@ const rootRouteChildren: RootRouteChildren = {
BrandRoute: BrandRoute,
ContactRoute: ContactRoute,
ServicesRoute: ServicesRoute,
+ ProductsVibesRoute: ProductsVibesRoute,
+ ProductsVoltRoute: ProductsVoltRoute,
+ ProductsIndexRoute: ProductsIndexRoute,
}
export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren)
diff --git a/src/routes/products/index.tsx b/src/routes/products/index.tsx
new file mode 100644
index 0000000..616ad9e
--- /dev/null
+++ b/src/routes/products/index.tsx
@@ -0,0 +1,63 @@
+import { ProductCard } from '@/components/products'
+import { Container } from '@/components/ui/Container'
+import { Section } from '@/components/ui/Section'
+import { Heading, Text } from '@/components/ui/Typography'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/products/')({
+ component: ProductsPage,
+})
+
+const products = [
+ {
+ name: 'Vibes',
+ tagline: 'Remote control for your Claude Code sessions',
+ status: 'available' as const,
+ features: [
+ 'Control sessions from any device',
+ 'Native Rust plugin system',
+ 'Real-time session mirroring',
+ ],
+ href: '/products/vibes',
+ image: '/images/products/vibes-terminal.svg',
+ },
+ {
+ name: 'Volt',
+ tagline: 'Volatility analysis & trade execution',
+ status: 'coming-soon' as const,
+ features: [
+ 'IV surfaces and Greeks analytics',
+ '11 options strategies built-in',
+ 'Backtest with synthetic or real data',
+ ],
+ href: '/products/volt',
+ image: '/images/products/volt-dashboard.svg',
+ },
+]
+
+function ProductsPage() {
+ return (
+ <>
+
+ {products.map((product) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {steps.map((item) => (
+
+
+
+ {item.title}
+
+ {item.description}
+
+ ))}
+
+ {item.step}
+
+
+ {screenshots.map((screenshot) => (
+
+
+
+ {screenshot.caption}
+
+
+ ))}
+
+
+
+