Frank Meeuwsen 40f49db5ac feat: sync sales page content en voeg CLAUDE.md toe

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>

2026-02-10 11:19:21 +01:00

2.5 KiB

Raw Blame History

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

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

2.5 KiB Raw Blame History