Frank Meeuwsen
40f49db5ac
Content wijzigingen uit workshop-sales-page.md doorgevoerd naar alle sectie-componenten: herziene intro, prijsaanpassing (€449→€399), max deelnemers (7→8), echte testimonial (Floor van Riet), en diverse tekstaanpassingen in Hero, PainPoints, Benefits, Testimonials, ForWho, Pricing en FinalCTA. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
63 lines
2.5 KiB
Markdown
63 lines
2.5 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
Sales page for the "Claude Code Workshop" - a hands-on workshop for Dutch entrepreneurs (ZZP/MKB). Built as a static React SPA. All content is in Dutch (nl).
|
|
|
|
**Workshop details:** Friday March 6, 2026 | 9:00-14:00 | Utrecht | €449 excl. BTW | Max 7 participants
|
|
|
|
## Commands
|
|
|
|
```bash
|
|
npm run dev # Vite dev server on port 5173
|
|
npm run build # Production build to dist/
|
|
npm run preview # Preview production build
|
|
npm run lint # ESLint
|
|
```
|
|
|
|
## Architecture
|
|
|
|
**React 19 + Vite 7 + Tailwind CSS 3** (dark mode via `class` strategy)
|
|
|
|
### Routing
|
|
- `src/main.jsx` - React Router setup with BrowserRouter
|
|
- `/` - Main sales page (App.jsx orchestrates all section components)
|
|
- `/privacy` - Privacy policy page
|
|
- `/voorwaarden` - Terms & conditions page
|
|
|
|
### Component Structure
|
|
`src/components/` contains the sales page sections, rendered in conversion-optimized order in App.jsx:
|
|
Hero → PainPoints → Testimonials → Benefits → Program → ForWho → Trainer → Pricing → FAQ → FinalCTA → Footer → StickyBar
|
|
|
|
All components are barrel-exported from `src/components/index.js`.
|
|
|
|
`src/pages/` contains standalone route pages (Privacy.jsx, Terms.jsx).
|
|
|
|
### Design System
|
|
|
|
Custom color tokens defined in `tailwind.config.js`:
|
|
- **coral** (primary/CTA): `coral-500` = #F25C3D
|
|
- **teal** (accent): `teal-500` = #14B8A6
|
|
- **warm** (neutrals): brown-gray scale for text and backgrounds
|
|
|
|
Custom fonts loaded via Google Fonts in `index.html`:
|
|
- **Bricolage Grotesque** (`font-display`) - headings
|
|
- **Inter** (`font-sans`) - body text
|
|
|
|
Reusable component classes defined in `src/index.css` using `@layer components`:
|
|
- Headings: `.heading-hero`, `.heading-1`, `.heading-2`, `.heading-3`
|
|
- Buttons: `.btn-primary`, `.btn-secondary`, `.btn-ghost`
|
|
- Cards: `.card`, `.card-feature`
|
|
- Layout: `.section`, `.section-alt`, `.container-page`
|
|
|
|
### Content Source
|
|
`content/workshop-sales-page.md` contains the original copywriting reference. Components contain the actual rendered content (some adjusted from source).
|
|
|
|
## Conventions
|
|
|
|
- Components use static data arrays + `.map()` for list rendering (benefits, FAQ items, timeline)
|
|
- Inline SVG icons (Heroicons-style) rather than an icon library
|
|
- StickyBar has separate mobile (bottom) and desktop (top) layouts triggered by scroll position (600px threshold)
|
|
- Anchor links use `#inschrijven` for CTA scroll targets
|