# Les 2 - Lesopdracht: Website uitbreiden met OpenCode

---

## Doel

Maak een nieuwe pagina in je v0 project met de OpenCode Desktop App. Je leert:
- Werken met de OpenCode Desktop App
- Plan mode en Build mode gebruiken
- 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 Desktop App (10 min)

### Open de Desktop App
1. Start OpenCode Desktop App
2. Open je projectfolder (File → Open Folder)
3. Selecteer je v0 project

### Selecteer gratis AI model
1. Druk `Ctrl+X M` (eerst Ctrl+X, dan M)
2. Kies "OpenCode Zen"
3. Selecteer "Kimi K2.5 Free"

### Start je project (in de ingebouwde terminal)
```bash
npm install
npm run dev
```

**Checkpoint:** ✅ Desktop App draait + localhost:3000 werkt

---

## Stap 3: Uitbreiden met OpenCode (45 min)

### Fase 1: Analyseer (Plan Mode)

Check dat je in Plan mode zit (📋 icoon).

```
Analyseer dit project. Hoe werkt de routing?
Hoe maak ik een nieuwe pagina in Next.js?
```

### Fase 2: Maak een nieuwe pagina (Build Mode)

Druk `Tab` om naar Build mode (🔨) te gaan.

**💡 BELANGRIJK: Eén prompt per taak!**

Splits je werk op in kleine stappen. Niet alles in één prompt!

**Opdracht: Maak een nieuwe pagina met componenten**

#### Stap 1: Kies je pagina
Kies één van deze opties:
- **About** - Over ons pagina
- **Services** - Diensten pagina
- **Contact** - Contact pagina

#### Stap 2: Maak de pagina structuur
**Prompt 1:**
```
Maak een nieuwe pagina /about (of /services of /contact) met een basis layout.
```

#### Stap 3: Voeg componenten toe
**Prompt 2:**
```
Voeg een hero sectie toe aan de /about pagina met titel en beschrijving.
Gebruik Tailwind CSS voor styling.
```

**Prompt 3:**
```
Voeg een content sectie toe onder de hero (bijv. team cards, diensten lijst, of contact info).
```

#### Stap 4: Voeg navigatie toe
**Prompt 4:**
```
@app/page.tsx
Voeg een link toe naar de /about pagina.
De link moet zichtbaar zijn in de hero of header.
Gebruik Next.js Link component.
```

**Checkpoint:** ✅ Nieuwe pagina gemaakt + link op homepage

---

## 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
- [ ] Nieuwe pagina aangemaakt (bijv. /about)
- [ ] Link op homepage naar nieuwe pagina
- [ ] Minimaal 2x gepusht naar Vercel
- [ ] Wijzigingen zijn live

---

## Bonus (als je klaar bent)

- [ ] Voeg een tweede pagina toe
- [ ] Maak een navbar component met links naar alle pagina's
- [ ] Voeg dark mode toggle toe
- [ ] Implementeer smooth scroll animaties