Frank Meeuwsen
539e72aca1
- Alle workshopdetails (datum, tijd, locatie, prijs, email) gecentraliseerd in workshop.js - ThankYou.jsx bijgewerkt: betalingsbevestiging tekst + WORKSHOP_CONFIG variabelen - Signup.jsx open punt opgelost: samenvattingsregel gebruikt nu config-variabelen - TallyForm gedeeld component toegevoegd (fase 3) - deploy.sh post-deploy HTTP-check toegevoegd (fase 4) - PRD.md en workshop materiaal (slides, tips, introtimer) toegevoegd - vite.svg verwijderd (ongebruikt) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
123 lines
5.2 KiB
Markdown
123 lines
5.2 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 April 3, 2026 | 9:00-14:00 | Utrecht | €399 excl. BTW | Max 8 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
|
|
./preflight.sh # Pre-deploy checks (lint + build + asset path validation)
|
|
```
|
|
|
|
## 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 → CookieBanner
|
|
|
|
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).
|
|
|
|
## Deployment
|
|
|
|
```bash
|
|
./deploy.sh # Preflight + build + deploy naar productie (geen passphrase nodig)
|
|
```
|
|
|
|
Deployment flow: `./preflight.sh` → `npm run build` → rsync naar server → `docker cp` naar WordPress container → chown fix
|
|
|
|
- **Server:** Hetzner (37.27.183.46) via SSH alias `coolify-deploy`
|
|
- **Container:** `wordpress-d0wko4gskokosssogcw8040g`
|
|
- **Pad in container:** `/var/www/html/workshopclaudecode`
|
|
- **Live URL:** https://frankmeeuwsen.com/workshopclaudecode/
|
|
- **SSH key:** `~/.ssh/id_rsa_no_pass` (passphrase-loos, specifiek voor automated deploys)
|
|
|
|
## Actief project: Configuratie centraliseren
|
|
|
|
Zie `PRD.md` voor het volledige bouwplan. Korte samenvatting:
|
|
|
|
**Doel:** Alle workshopdetails (datum, tijd, locatie, prijs, e-mail) centraliseren in `src/config/workshop.js` zodat een nieuwe editie een one-stop-change is.
|
|
|
|
| Fase | Beschrijving | Status |
|
|
|------|-------------|--------|
|
|
| Fase 1 | Snelle fixes + config completeren (bug Footer, ongebruikte assets, Tally ID in config, ESLint blokkerend) | Afgerond |
|
|
| Fase 2 | Workshop details centraliseren in workshop.js - 7 componenten bijwerken | Afgerond |
|
|
| Fase 3 | Code deduplicatie - gedeeld TallyForm component | Afgerond |
|
|
| Fase 4 | Deployment en kwaliteit - post-deploy check, valuta-inconsistentie | Afgerond |
|
|
|
|
### Openstaande punten (volgende sessie)
|
|
|
|
- **Signup.jsx workshopsamenvatting:** Regel ~75 bevat hardcoded datum/tijd/locatie ("Vrijdag 3 april 2026 | 9:00 - 14:00 | Utrecht"). Kan naar WORKSHOP_CONFIG als die pagina hergebruikt wordt.
|
|
|
|
---
|
|
|
|
## 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
|
|
|
|
### Verificatie Werkwijze
|
|
|
|
**Voor elke wijziging: check bestaande patronen** in de code voordat je iets nieuws toevoegt. Hoe doen vergelijkbare items het? Gebruik dezelfde aanpak.
|
|
|
|
**Wanneer `./preflight.sh` draaien:**
|
|
- Nieuwe bestanden toevoegen (afbeeldingen, componenten)
|
|
- Nieuwe data-entries met paden of URLs
|
|
- Imports of exports wijzigen
|
|
- Structurele wijzigingen (nieuw component, nieuwe route)
|
|
- Configuratie aanpassen (vite.config, tailwind.config)
|
|
|
|
**Niet nodig bij:**
|
|
- Tekst aanpassen (quote, titel, beschrijving)
|
|
- Getallen wijzigen (bijv. availableSpots)
|
|
- CSS tweaks (kleur, spacing, font-size)
|
|
|
|
Vuistregel: als het kan breken, check het. Als het alleen tekst is, niet.
|
|
|
|
### Static Assets (BELANGRIJK)
|
|
- Statische bestanden (afbeeldingen, etc.) staan in `public/`
|
|
- **Altijd** `${import.meta.env.BASE_URL}` als prefix gebruiken bij verwijzingen vanuit code
|
|
- Reden: productie draait op `/workshopclaudecode/`, niet op `/`
|
|
- Voorbeeld: `` src={`${import.meta.env.BASE_URL}foto.jpg`} ``
|
|
- NOOIT: `src="/foto.jpg"` (werkt lokaal maar breekt op productie)
|
|
- `./preflight.sh` detecteert hardcoded paden automatisch
|