workshopclaudecode/CLAUDE.md

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 | €399 excl. BTW | Max 8 participants

Commands

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

./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)

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