feat: add product showcase pages for Vibes and Volt#27
Conversation
- Move Integrations to top of Phase 3 milestones - Add Products milestone with Vibes and Volt - Vibes: Remote control for Claude Code sessions - Volt: Volatility analysis & trade execution (in progress)
- Use getByRole('heading', { level: 3 }) for product headings instead of getByText
- Add exact: true to Products navbar link to avoid matching 'Product Development'
- Add product page tasks to Phase 3 Products milestone - Update Phase 3 status to In Progress (20%) - Add 2025-12-26 entry to Recent Updates section
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
vibes-website | 14164d1 | Commit Preview URL Branch Preview URL |
Dec 27 2025, 12:28 AM |
There was a problem hiding this comment.
Pull request overview
This PR adds product showcase pages for Vibes and Volt, implementing a dual-purpose strategy of product marketing and demonstrating the studio's development capabilities. The implementation includes a complete waitlist system for email capture, six new reusable product components, and comprehensive test coverage.
Key Changes:
- Added three new product routes: index, Vibes detail page, and Volt teaser page
- Implemented waitlist API endpoint with D1 database integration for email capture
- Created six product-specific components with full test coverage
Reviewed changes
Copilot reviewed 33 out of 36 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| workers/chat-api/migrations/0003_waitlist.sql | Database migration adding waitlist table with email/product tracking |
| workers/chat-api/src/waitlist.ts | Waitlist logic with email validation and database operations |
| workers/chat-api/src/index.ts | Added /waitlist POST endpoint to chat API worker |
| workers/chat-api/wrangler.toml | Added migrations directory configuration |
| src/routes/products/index.tsx | Products landing page displaying both product cards |
| src/routes/products/vibes.tsx | Full Vibes product page with features and install command |
| src/routes/products/volt.tsx | Volt teaser page with waitlist form |
| src/components/products/* | Six new components: StatusBadge, CodeBlock, FeatureGrid, BuiltByVibes, WaitlistForm, ProductCard |
| src/components/navigation/Navbar.tsx | Added Products link to navigation |
| justfile | Updated worker commands to explicitly specify wrangler.toml config |
| e2e/products.spec.ts | E2E tests for all product pages and navigation |
| docs/PROGRESS.md | Updated Phase 3 status to In Progress with product milestone completion |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| export function isValidEmail(email: string): boolean { | ||
| return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) | ||
| } |
There was a problem hiding this comment.
The email validation regex is overly simplistic and may accept invalid email addresses or reject valid ones. Consider using a more robust email validation library or a comprehensive regex pattern that handles edge cases like consecutive dots, special characters in local parts, and international domains.
src/routes/products/volt.tsx
Outdated
| className="relative overflow-hidden" | ||
| style={{ | ||
| backgroundImage: 'url(/images/products/volt-bg.svg)', | ||
| backgroundSize: 'cover', | ||
| backgroundPosition: 'center', | ||
| }} |
There was a problem hiding this comment.
Inline styles bypass Tailwind's optimization and make the styling harder to maintain. Consider moving these background properties to a CSS class or using Tailwind's arbitrary value syntax (e.g., bg-[url(/images/products/volt-bg.svg)]).
| className="relative overflow-hidden" | |
| style={{ | |
| backgroundImage: 'url(/images/products/volt-bg.svg)', | |
| backgroundSize: 'cover', | |
| backgroundPosition: 'center', | |
| }} | |
| className="relative overflow-hidden bg-[url('/images/products/volt-bg.svg')] bg-cover bg-center" |
- Add comment explaining migrations_dir in wrangler.toml - Add try-catch error handling to CodeBlock clipboard copy - Convert volt.tsx inline styles to Tailwind arbitrary values
Summary
Test Plan
pnpm test)just check)just e2e)