Voeg loading-skeleton toe voor pakketten-sectie

Toont 3 pulserende placeholder-kaarten (zelfde afmetingen/structuur als
PackageCard) zolang de offerings-fetch nog bezig is, zodat de sectie
niet leeg oogt en de layout niet verspringt zodra de echte data binnenkomt.

src/features/landing/components/PackagesSection.tsx

@@ -1,5 +1,10 @@
 import { usePackagesQuery } from '../hooks/usePackagesQuery';
 import { PackageCard } from './PackageCard';
+import { PackageCardSkeleton } from './PackageCardSkeleton';
+
+// Matches the fixed number of packages (see content.ts) so the skeleton grid has the
+// same shape as the loaded grid — no layout shift once the real cards arrive.
+const SKELETON_COUNT = 3;
 
 export function PackagesSection() {
   const { data: packages, isLoading, isError } = usePackagesQuery();
@@ -27,7 +32,9 @@ export function PackagesSection() {
             <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 : (
+          ) : isLoading || !packages ? (
+            Array.from({ length: SKELETON_COUNT }, (_, i) => <PackageCardSkeleton key={i} />)
+          ) : (
             packages.map((pkg) => <PackageCard key={pkg.id} pkg={pkg} />)
           )}
         </div>