# Les 3 — Lesopdracht
## Bouw je eerste Cursor-componenten

**Vak:** AI-Assisted Development
**Opleiding:** NOVI Hogeschool Utrecht
**Werkvorm:** in-class, na de pauze (±75 minuten)
**Status:** klaar = drie components live op `localhost:3000` + eerste git commit

---

## Doel

Je gebruikt vandaag voor het eerst Cursor's drie hoofdsneltoetsen — Tab, Cmd+K en Cmd+L — om een werkende Next.js homepage te bouwen. Aan het eind heb je een Hero, een styling-tweak en één extra feature in je code, plus een eerste git commit.

---

## Wat je nodig hebt (klaar uit de demo)

- Cursor geïnstalleerd + Pro Student actief
- Skills/Docs voor Next.js, React, Tailwind toegevoegd
- Vers Next.js-project: `mijn-eerste-cursor-app`
- `npm run dev` draait op `localhost:3000`

---

## Stappenplan

### Stap 1 — `.cursorrules` genereren

Open Cursor in je project. Druk **Cmd+L** voor de chat. Plak deze prompt:

```
Maak een .cursorrules voor dit Next.js 16 project. Focus op:
- TypeScript strict mode
- Tailwind CSS voor styling, geen CSS modules
- Server components by default; "use client" alleen waar nodig
- @/ import alias
- Functional components

Geef alleen het bestand terug, geen extra uitleg.
```

Cursor geeft een bestand. Kopieer de inhoud naar een nieuw bestand `.cursorrules` in de root van je project. Save.

### Stap 2 — Taak 1: Hero-component (via Cmd+L)

Open `src/app/page.tsx`. Druk **Cmd+L** voor de chat (nieuwe chat). Plak deze prompt:

```
@file:src/app/page.tsx

Vervang de huidige inhoud met een Hero-component. Specs:
- Gradient achtergrond (subtiele blauwe verloop)
- Grote titel: "Mijn Eerste Cursor App"
- Ondertitel: "Gebouwd in les 3 met Cursor"
- Twee CTA-knoppen: "Aan de slag" (primair) en "Meer info" (secundair)
- Responsive: stack op mobiel, naast elkaar op desktop
- Tailwind only, geen custom CSS
- Inline in app/page.tsx houden (geen aparte component file)
```

Cursor toont een diff. Bekijk de code, klik **Accept all**. Save. Open `http://localhost:3000` in je browser.

✅ **Check:** je ziet je Hero. Responsive: maak browser smaller, knoppen moeten onder elkaar staan.

### Stap 3 — Taak 2: Styling-tweak (via Cmd+K)

Selecteer in `src/app/page.tsx` de twee knoppen (de hele button- of link-blokken). Druk **Cmd+K**. Plak deze prompt in het balkje:

```
Verander de primaire knop naar een paars gradient (purple-600 naar pink-600). Maak de secundaire knop transparant met een paarse border en paarse tekst. Voeg een hover-effect toe aan beide.
```

Cursor toont een inline diff. Druk **Tab** om te accepteren. Save. Refresh browser.

✅ **Check:** knoppen zijn paars, hover werkt.

### Stap 4 — Taak 3: Extra feature (vrije keuze)

Kies één van de drie. Gebruik Cmd+L of Cmd+K naar wat het beste past.

**Optie A — FeatureCards (3 cards onder de Hero)**

```
Voeg onder de Hero in @file:src/app/page.tsx een sectie toe met 3 feature-cards.
Per card: een emoji-icoon, een titel, een korte beschrijving.
Drie features: "Snel", "AI-powered", "Open Source".
Grid layout: 1 kolom mobiel, 3 kolommen desktop.
Tailwind styling, matched de Hero.
```

**Optie B — ContactForm (form onderaan)**

```
Voeg onder de Hero in @file:src/app/page.tsx een contact-form toe.
Velden: naam, e-mail, bericht (textarea).
Een submit-knop in dezelfde paarse stijl als de Hero CTAs.
Form moet er goed uitzien — max-width, padding, ronde hoeken.
"use client" gebruiken, met useState voor de velden (nog geen echte submit-logica).
```

**Optie C — Footer (footer met links + copyright)**

```
Voeg een Footer toe onder de hele page-inhoud in @file:src/app/page.tsx.
Drie kolommen: "Product" (3 links), "Resources" (3 links), "Contact" (e-mail + locatie).
Copyright-regel onderaan: "© 2026 Mijn Eerste Cursor App".
Matched de Hero-stijl, donkere achtergrond voor contrast.
```

Cursor toont diff → Accept → save → refresh.

✅ **Check:** je extra feature staat in de pagina, matched de Hero-stijl.

### Stap 5 — Git commit

Open een terminal in Cursor (Ctrl+ ` of Terminal → New Terminal).

```bash
git init
git add .
git commit -m "first cursor build: hero + tweaks + extra feature"
```

Optioneel: push naar GitHub.

```bash
gh repo create mijn-eerste-cursor-app --public --source=. --push
```

(Vereist `gh auth login`.)

---

## Op te leveren

In de chat (Teams):

1. Screenshot van je `localhost:3000` met Hero + extra feature zichtbaar
2. Korte tekst: welke optie (A/B/C) heb je gekozen voor taak 3?
3. Optioneel: GitHub-URL als je hebt gepushed

---

## Bonus — als je tijd over hebt

- Vraag Cursor om een dark/light mode toggle toe te voegen
- Probeer `@docs:Tailwind` om een geavanceerde animatie te toevoegen
- Voeg een tweede pagina toe (`src/app/about/page.tsx`) en link ernaar vanuit de Hero
- Genereer favicon + metadata via Cursor

---

## Vastgelopen?

| Probleem | Snelle fix |
|----------|-----------|
| Cursor reageert niet bij Cmd+L | Settings → Account: nog Pro Student? Anders opnieuw activeren |
| Tab-completion komt niet | Settings → Features → Cursor Tab → check enabled |
| Tailwind classes worden niet toegepast | Check `globals.css` op `@tailwind base/components/utilities` |
| Diff is verkeerd | Esc om te rejecten, herformuleer prompt specifieker |
| `@file` werkt niet | Wacht 5 sec na file aanmaken (Cursor moet indexeren) |
| Geen requests meer | Wacht op nieuwe maand, of plug je eigen OpenAI/Claude key in via Settings |

Tim loopt rond — vragen gewoon stellen.

---

## Reflectie (na afloop)

Denk na voor jezelf:
- Hoeveel requests heb je gebruikt? (Settings → Account toont saldo)
- Welke sneltoets voelde het meest natuurlijk?
- Wanneer zou je liever zelf typen dan Cursor laten genereren?

Dat zijn de gewoontes die je deze opleiding gaat ontwikkelen.

Veel succes!