# 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)