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/components/PackagesSection.tsx

@@ -2,7 +2,7 @@ import { usePackagesQuery } from '../hooks/usePackagesQuery';
 import { PackageCard } from './PackageCard';
 
 export function PackagesSection() {
-  const { data: packages, isLoading } = usePackagesQuery();
+  const { data: packages, isLoading, isError } = usePackagesQuery();
 
   return (
     <section
@@ -23,9 +23,13 @@ export function PackagesSection() {
           </p>
         </div>
         <div className="grid grid-cols-1 gap-[22px] sm:grid-cols-3" data-testid="packages-grid">
-          {isLoading || !packages
-            ? null
-            : packages.map((pkg) => <PackageCard key={pkg.id} pkg={pkg} />)}
+          {isError ? (
+            <p className="col-span-full text-center text-muted" data-testid="packages-error">
+              Pakketten konden niet worden geladen. Probeer het later opnieuw.
+            </p>
+          ) : isLoading || !packages ? null : (
+            packages.map((pkg) => <PackageCard key={pkg.id} pkg={pkg} />)
+          )}
         </div>
       </div>
     </section>