Haal pakketten-data op via /api/v1/packages i.p.v. hardcoded content

PackagesSection gebruikte tot nu toe statische data via een placeholder
query-hook (FR-5). usePackagesQuery haalt nu echt op bij /api/v1/packages
(relatief pad, zelfde domein op test en productie), met een foutmelding
in de UI als het request faalt.

Voegt ook een hand-off-document toe voor de agent die de CMS/API-kant
gaat bouwen: het endpoint-contract, per veld het type/gebruik, en de
huidige statische content als seed-data.

src/features/landing/hooks/usePackagesQuery.ts

@@ -1,14 +1,18 @@
 import { useQuery } from '@tanstack/react-query';
-import { packages, type PackageCardData } from '../data/content';
+import type { PackageCardData } from '../data/content';
+
+// Relative path so it resolves against whichever domain served the app
+// (test.slpsoftware.nl / slpsoftware.nl) — see aidlc-docs/features/react-frontend/
+// construction/react-frontend-app/functional-design/packages-api-handoff.md
+// for the API contract this endpoint must implement.
+const PACKAGES_ENDPOINT = '/api/v1/packages';
 
-/**
- * Placeholder query hook (requirements FR-5). The queryFn currently just resolves the
- * static package data, wrapped in a Promise so the calling component already consumes
- * it exactly the way it will once a real API exists — only this queryFn's body will
- * need to change in a future iteration.
- */
 async function fetchPackages(): Promise<PackageCardData[]> {
-  return Promise.resolve(packages);
+  const response = await fetch(PACKAGES_ENDPOINT);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch packages: ${response.status} ${response.statusText}`);
+  }
+  return response.json();
 }
 
 export function usePackagesQuery() {