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

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      # Build + deploy naar productie (geen passphrase nodig)

Deployment flow: 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