fix: add page

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

@@ -73,55 +73,40 @@ opencode
 Check dat je in Plan mode zit (📋 icoon).
 
 ```
-Analyseer dit project. Welke componenten zijn er?
+Analyseer dit project. Hoe werkt de routing?
-Waar zou ik een testimonials sectie kunnen toevoegen?
+Hoe maak ik een nieuwe pagina in Next.js?
 ```
 
-### Fase 2: Bouw (Build Mode)
+### Fase 2: Maak een nieuwe pagina (Build Mode)
 
 Druk `Tab` om naar Build mode (🔨) te gaan.
 
-**Kies minimaal 2 van deze opdrachten:**
+**Opdracht: Maak een nieuwe pagina met componenten**
 
-#### Optie A: Testimonials Sectie
+#### 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 aan
 ```
-@src/components/
+Maak een nieuwe pagina /about (of /services of /contact).
-Maak een Testimonials component met:
+De pagina moet minimaal 2 componenten bevatten:
-- 3 testimonial cards naast elkaar
+- Een hero sectie met titel en beschrijving
-- Foto placeholder, quote, naam, functie
+- Een content sectie (bijv. team cards, diensten lijst, of contact info)
-- Responsive: onder elkaar op mobile
+Gebruik Tailwind CSS voor styling.
-- Voeg toe aan de homepage onder de hero
 ```
 
-#### Optie B: Pricing Sectie
+#### Stap 3: Voeg navigatie toe
 ```
-@src/components/
+@app/page.tsx
-Maak een Pricing component met:
+Voeg een link toe naar de nieuwe pagina.
-- 3 pricing tiers (Basic, Pro, Enterprise)
+De link moet zichtbaar zijn in de hero of header.
-- Features lijst per tier
+Gebruik Next.js Link component.
-- CTA button per tier
-- Highlight de middelste (Pro)
 ```
 
-#### Optie C: FAQ Sectie
+**Checkpoint:** ✅ Nieuwe pagina gemaakt + link op homepage
-```
-@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
 
 ---
 
@@ -193,7 +178,8 @@ Maak de heading groter en gebruik een gradient
 
 Aan het einde van de les:
 - [ ] Website draait lokaal
-- [ ] Minimaal 1 nieuwe sectie toegevoegd
+- [ ] Nieuwe pagina aangemaakt (bijv. /about)
+- [ ] Link op homepage naar nieuwe pagina
 - [ ] Minimaal 2x gepusht naar Vercel
 - [ ] Wijzigingen zijn live
 
@@ -201,7 +187,7 @@ Aan het einde van de les:
 
 ## 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 navigatie
+- [ ] Implementeer smooth scroll animaties
-- [ ] Voeg contact formulier toe
-- [ ] Maak een aparte pagina (About, Contact)

Les02-OpenCode/Les02-Docenttekst-Notes.md

@@ -105,14 +105,14 @@ npm run dev
 
 ### Slide 12: Demo - Plan Mode
 - **DEMO:**
-- "Analyseer dit project. Waar kan ik testimonials toevoegen?"
+- "Analyseer dit project. Hoe werkt de routing?"
 - AI leest alleen, verandert niets
 
 ---
 
 ### Slide 13: Demo - Build Mode
 - Tab → 🔨
-- **DEMO:** "Maak Testimonials component"
+- **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage"
 - Toon resultaat in browser
 
 ---
@@ -125,7 +125,7 @@ npm run dev
 - **DEMO:**
 ```bash
 git add .
-git commit -m "Add testimonials"
+git commit -m "Add about page"
 git push
 ```
 - Of: GitHub Desktop
@@ -152,11 +152,11 @@ git push
 ---
 
 ### Slide 17: Opdracht (09:50-09:55)
-- **Breid je v0 website uit:**
+- **Maak nieuwe pagina in je v0 project:**
   1. Clone/pull repo
   2. npm install + npm run dev
-  3. Voeg secties toe met OpenCode
+  3. Maak nieuwe pagina (/about, /services, /contact)
-  4. Push → live op Vercel
+  4. Voeg link op homepage + push → live op Vercel
 - **Doel:** minimaal 2x deployen
 - "Kwart over 10 pauze!"
 

Les02-OpenCode/Les02-Docenttekst.md

@@ -146,7 +146,7 @@ _[LIVE DEMO]_
 
 "Nu start ik OpenCode in dit project. Ik zit in Plan mode - zie het klembord."
 
-"Ik vraag: 'Analyseer dit project. Welke componenten zijn er en waar zou ik een testimonials sectie kunnen toevoegen?'"
+"Ik vraag: 'Analyseer dit project. Hoe werkt de routing? Hoe maak ik een nieuwe pagina?'"
 
 _[Wacht op response]_
 
@@ -162,11 +162,11 @@ _[LIVE DEMO]_
 
 "Tab om naar Build mode te gaan. Nu vraag ik:"
 
-"@src/components/ Maak een Testimonials component met 3 cards, responsive, en voeg toe aan de homepage."
+"Maak een nieuwe pagina /about met een hero sectie en een team sectie. Voeg ook een link toe op de homepage naar /about."
 
 _[Wacht op generatie]_
 
-"Het maakt bestanden aan, past imports aan. Kijk in de browser - refresh - daar is de nieuwe sectie!"
+"Het maakt de pagina aan, de componenten, past de homepage aan. Kijk in de browser - refresh - daar is de link! En als ik klik... de nieuwe pagina!"
 
 ---
 
@@ -228,11 +228,11 @@ _[Toon Vercel dashboard]_
 
 **[09:50 - 09:55]** _(5 minuten uitleg)_
 
-"Jullie gaan nu jullie eigen v0 website uitbreiden."
+"Jullie gaan nu een nieuwe pagina toevoegen aan jullie v0 website."
 
-"Stap 1: Clone je repo of pull latest. Stap 2: npm install, npm run dev. Stap 3: Voeg nieuwe secties toe met OpenCode. Stap 4: Push naar GitHub, bekijk live op Vercel."
+"Stap 1: Clone je repo of pull latest. Stap 2: npm install, npm run dev. Stap 3: Maak een nieuwe pagina met OpenCode - about, services, of contact. Voeg componenten toe en een link op de homepage. Stap 4: Push naar GitHub, bekijk live op Vercel."
 
-"Doel: minimaal 2 keer deployen. Je mag kiezen wat je toevoegt - testimonials, pricing, FAQ, of verbeteringen aan bestaande componenten."
+"Doel: minimaal 2 keer deployen. Je leert hoe routing werkt in Next.js én hoe je navigatie toevoegt."
 
 "Kwart over 10 hebben we een korte pauze van 15 minuten. Begin!"
 

Les02-OpenCode/Les02-Lesplan.md

@@ -102,14 +102,14 @@ Na deze les kan de student:
 | 10:15-10:30 | ☕ **PAUZE** | - |
 | 10:30-11:30 | Studenten werken (60 min) | - |
 
-**Opdracht:** Breid je v0 website uit met OpenCode
+**Opdracht:** Maak een nieuwe pagina in je v0 project
 
 1. Clone je v0 repo (of gebruik GitHub Desktop)
 2. Run lokaal met `npm install` + `npm run dev`
-3. Voeg toe met OpenCode:
+3. Met OpenCode:
-   - Nieuwe sectie (Testimonials, Pricing, FAQ)
+   - Maak nieuwe pagina (/about, /services, of /contact)
-   - Verbeteringen aan bestaande componenten
+   - Voeg minimaal 2 componenten toe aan de pagina
-   - Mobile responsiveness fixes
+   - Voeg link op homepage toe naar de nieuwe pagina
 4. Push naar GitHub → bekijk live op Vercel
 
 **Tijdens het werken:**
@@ -120,9 +120,10 @@ Na deze les kan de student:
 
 **Tussentijdse check (10:45):**
 - "Wie heeft lokaal draaien?"
-- "Wie heeft al gepusht naar Vercel?"
+- "Wie heeft een nieuwe pagina aangemaakt?"
 
 **Check (11:15):**
+- "Wie heeft de link op de homepage?"
 - "Wie heeft 2x gepusht?"
 
 ---

Les02-OpenCode/Les02-Slide-Overzicht.md

@@ -221,14 +221,15 @@ Of gebruik GitHub Desktop!
 
 ### Slide 17: Aan de slag!
 
-**Opdracht:** Breid je v0 website uit met OpenCode
+**Opdracht:** Maak een nieuwe pagina in je v0 project
 
 **Stappen:**
 1. Clone je repo (of pull latest)
 2. `npm install` + `npm run dev`
-3. Voeg toe met OpenCode:
+3. Met OpenCode:
-   - Nieuwe sectie (Testimonials, Pricing, of FAQ)
+   - Maak nieuwe pagina (/about, /services, of /contact)
-   - Verbeteringen aan bestaande componenten
+   - Voeg minimaal 2 componenten toe aan de pagina
+   - Voeg link op homepage toe naar de nieuwe pagina
 4. Push naar GitHub → bekijk live!
 
 **Doel:** Minimaal 2 keer deployen naar Vercel

Samenvattingen/Les02-Samenvatting.md

@@ -99,7 +99,7 @@ Voor nieuwe projecten (niet gekoppeld via v0):
 ## Lesopdracht (85 min hands-on)
 
 ### Doel
-Breid je v0 website uit met OpenCode. Leer de volledige workflow: lokaal draaien, uitbreiden met AI, deployen via git push.
+Maak een nieuwe pagina in je v0 project. Leer de volledige workflow: lokaal draaien, pagina maken met AI, deployen via git push.
 
 ### Stap 1: Project Lokaal Draaien (15 min)
 
@@ -123,27 +123,26 @@ Selecteer gratis AI model:
 2. Kies "OpenCode Zen"
 3. Selecteer "GLM 4.7"
 
-### Stap 3: Uitbreiden met OpenCode (45 min)
+### Stap 3: Nieuwe Pagina Maken (45 min)
 
 **Fase 1 - Plan mode (📋):**
 ```
-Analyseer dit project. Welke componenten zijn er?
+Analyseer dit project. Hoe werkt de routing?
-Waar zou ik een testimonials sectie kunnen toevoegen?
+Hoe maak ik een nieuwe pagina in Next.js?
 ```
 
 **Fase 2 - Build mode (🔨):**
 
-Kies minimaal 2 van deze opdrachten:
+Maak een nieuwe pagina:
-- **Testimonials sectie** - 3 cards, responsive
+- Kies: **/about**, **/services**, of **/contact**
-- **Pricing sectie** - 3 tiers, highlight middelste
+- Voeg minimaal 2 componenten toe (hero + content)
-- **FAQ sectie** - accordion style, animaties
+- Voeg link op homepage toe naar de nieuwe pagina
-- **Verbeter bestaande componenten** - hover effecten, scroll animaties
 
 ### Stap 4: Deploy naar Vercel (10 min)
 
 ```bash
 git add .
-git commit -m "Add testimonials section"
+git commit -m "Add about page"
 git push
 ```
 

readme.md

@@ -103,10 +103,10 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
 - Korte terugblik op Les 1 (v0 workflow)
 - OpenCode installeren en OpenCode Zen configureren
 - Bestaand v0 project clonen en lokaal draaien
-- Met OpenCode nieuwe secties toevoegen
+- Met OpenCode een nieuwe pagina maken + link op homepage
 - Deployen via git push → Vercel
 
-**Lesopdracht:** Breid je v0 website uit met OpenCode. Clone je repo, draai lokaal, voeg nieuwe secties toe (testimonials, pricing, FAQ), deploy minimaal 2x naar Vercel.
+**Lesopdracht:** Maak een nieuwe pagina in je v0 project. Clone je repo, draai lokaal, maak een pagina (/about, /services, of /contact) met componenten, voeg link op homepage toe, deploy minimaal 2x naar Vercel.
 
 **Huiswerk:**
 - Maak nieuw project vanaf scratch met `create-next-app`