```
Create two new pages for my project: a "Journey" page and a "Vibe Code Stats" page.

**Journey Page:**
A storytelling page that explains what this project does. It should have:
- A hero section with the project name, a one-line badge, a short description, and 4 key stats pulled from the app's API (or hardcoded if no API)
- "The Challenge" section: what problem the project solves, with 3 numbered cards showing the scale of the problem
- "The Solution" section: a vertical pipeline showing 4 steps of how the system works (each step has a number, title, and description, connected by arrows)
- A "Tech Stack" section listing the technologies used as small cards
- Clean, modern styling with the app's existing design tokens/variables

**Vibe Code Stats Page:**
A page showcasing how the project was built with AI (Claude Code). It should have:
- Hero section with badge "Vibe Coding with Claude Code", title "Built Entirely by AI", and a description
- Big stats row: number of human prompts, sessions, build time, and key output metric
- An efficiency bar showing: lines of code, files generated, lines typed manually (0), and "100% AI-generated code"
- Code breakdown: horizontal bars showing lines by category (Frontend, Backend, CSS, etc.)
- "What one session produced" grid showing outputs (pages, API routes, DB models, charts, etc.)
- Build timeline: vertical timeline with phases (Planning, Backend, Data, Frontend, Polish) each with title and description
- Tools Used section: cards listing Claude Code, the model used, design system, and any other tools

For both pages:
- Follow my existing project's component patterns and styling approach
- Use my existing CSS variables/design tokens
- Add routes and sidebar/navigation links for both pages
- Make the data easy to customize (use constants/arrays at the top of the script section)
Keep the content specific to MY project (read my codebase to understand what it does, then write accurate content)
```

---