fix: add lesson 2

Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md

@@ -0,0 +1,207 @@
+# Les 2 - Lesopdracht: Website uitbreiden met OpenCode
+
+---
+
+## Doel
+
+Breid je v0 website uit met OpenCode. Je leert:
+- Project lokaal draaien
+- Werken met Plan en Build mode
+- Wijzigingen deployen via git push
+
+---
+
+## Tijd
+
+**85 minuten** (09:50-10:15 + 10:30-11:30)
+
+☕ Pauze: 10:15-10:30
+
+---
+
+## Stap 1: Project Lokaal Draaien (15 min)
+
+### Clone je repository
+
+**Optie A - Terminal:**
+```bash
+git clone https://github.com/jouw-username/jouw-project.git
+cd jouw-project
+```
+
+**Optie B - GitHub Desktop:**
+1. File → Clone Repository
+2. Selecteer je v0 project
+3. Clone
+
+### Installeer dependencies
+```bash
+npm install
+```
+
+### Start development server
+```bash
+npm run dev
+```
+
+Open http://localhost:3000 - je ziet je website!
+
+**Checkpoint:** ✅ Website draait lokaal
+
+---
+
+## Stap 2: OpenCode Configureren (10 min)
+
+### Start OpenCode
+```bash
+opencode
+```
+
+### Selecteer gratis AI model
+1. Druk `Ctrl+O`
+2. Kies "OpenCode Zen"
+3. Selecteer "GLM 4.7"
+
+**Checkpoint:** ✅ OpenCode draait met Zen model
+
+---
+
+## Stap 3: Uitbreiden met OpenCode (45 min)
+
+### Fase 1: Analyseer (Plan Mode)
+
+Check dat je in Plan mode zit (📋 icoon).
+
+```
+Analyseer dit project. Welke componenten zijn er?
+Waar zou ik een testimonials sectie kunnen toevoegen?
+```
+
+### Fase 2: Bouw (Build Mode)
+
+Druk `Tab` om naar Build mode (🔨) te gaan.
+
+**Kies minimaal 2 van deze opdrachten:**
+
+#### Optie A: Testimonials Sectie
+```
+@src/components/
+Maak een Testimonials component met:
+- 3 testimonial cards naast elkaar
+- Foto placeholder, quote, naam, functie
+- Responsive: onder elkaar op mobile
+- Voeg toe aan de homepage onder de hero
+```
+
+#### Optie B: Pricing Sectie
+```
+@src/components/
+Maak een Pricing component met:
+- 3 pricing tiers (Basic, Pro, Enterprise)
+- Features lijst per tier
+- CTA button per tier
+- Highlight de middelste (Pro)
+```
+
+#### Optie C: FAQ Sectie
+```
+@src/components/
+Maak een FAQ component met:
+- Minimaal 5 vragen
+- Accordion style (klik om te openen)
+- Smooth animatie
+```
+
+#### Optie D: Verbeter bestaande componenten
+```
+@src/components/[ComponentNaam].tsx
+Verbeter deze component:
+- Betere mobile responsiveness
+- Hover effecten toevoegen
+- Animaties bij scroll
+```
+
+**Checkpoint:** ✅ Nieuwe sectie(s) toegevoegd
+
+---
+
+## Stap 4: Deploy naar Vercel (10 min)
+
+### Commit je wijzigingen
+
+**Terminal:**
+```bash
+git add .
+git commit -m "Add testimonials section"
+git push
+```
+
+**Of GitHub Desktop:**
+1. Zie changed files links
+2. Schrijf commit message
+3. Commit to main
+4. Push origin
+
+### Check Vercel
+1. Open je Vercel dashboard
+2. Zie "Building..." status
+3. Na ~1 min: bekijk je live site!
+
+**Checkpoint:** ✅ Wijzigingen live op Vercel
+
+---
+
+## Stap 5: Herhaal! (10 min)
+
+Doe minimaal nog één wijziging en push opnieuw.
+
+Het doel is dat je de volledige workflow meerdere keren doorloopt:
+1. Wijzig met OpenCode
+2. Test lokaal
+3. Commit & push
+4. Bekijk live
+
+---
+
+## Tips
+
+### @ Mentions gebruiken
+```
+@src/components/Hero.tsx
+Maak de heading groter en gebruik een gradient
+```
+
+### Plan mode voor vragen
+```
+📋 Hoe kan ik animaties toevoegen aan mijn cards?
+```
+
+### Build mode voor actie
+```
+🔨 Voeg fade-in animatie toe aan de feature cards
+```
+
+### Stuck?
+1. Wees specifieker in je prompt
+2. Verwijs naar het exacte bestand met @
+3. Bekijk de error in terminal
+4. Vraag een klasgenoot of de docent
+
+---
+
+## Inleveren
+
+Aan het einde van de les:
+- [ ] Website draait lokaal
+- [ ] Minimaal 1 nieuwe sectie toegevoegd
+- [ ] Minimaal 2x gepusht naar Vercel
+- [ ] Wijzigingen zijn live
+
+---
+
+## Bonus (als je klaar bent)
+
+- [ ] Voeg dark mode toggle toe
+- [ ] Implementeer smooth scroll navigatie
+- [ ] Voeg contact formulier toe
+- [ ] Maak een aparte pagina (About, Contact)