Herstructureer src/ naar feature-based folderstructuur

Volgt de aanpak uit het React 2025 folder structure artikel en het
SlpModularCms/frontend referentieproject: components/{layout,ui,shared},
features/landing/{components,data,hooks,pages,__tests__}, en lib/ voor
de query client. routes/index.tsx wordt een dunne wrapper rond de nieuwe
features/landing/pages/LandingPage.tsx.

src/features/landing/components/PackagesSection.tsx

@@ -0,0 +1,33 @@
+import { usePackagesQuery } from '../hooks/usePackagesQuery';
+import { PackageCard } from './PackageCard';
+
+export function PackagesSection() {
+  const { data: packages, isLoading } = usePackagesQuery();
+
+  return (
+    <section
+      id="pakketten"
+      className="bg-gradient-to-b from-transparent via-surface/50 to-transparent py-[88px]"
+    >
+      <div className="mx-auto max-w-[1080px] px-6">
+        <div className="mb-[52px]">
+          <span className="font-mono block text-sm uppercase tracking-wider text-accent">
+            // pakketten
+          </span>
+          <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
+            Drie manieren om te starten
+          </h2>
+          <p className="mt-3 max-w-[56ch] text-muted">
+            Van één sterke pagina tot volledig maatwerk met eigen back-end. Elk pakket heeft een
+            vaste scope en een vaste prijs.
+          </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} />)}
+        </div>
+      </div>
+    </section>
+  );
+}