Toon leesbare slug in plaats van GUID-ID op pakketkaarten

Nu de pakketten dynamisch uit de API komen is het id een GUID, wat
niet leesbaar is op de pagina. Voeg een slug-veld toe aan
PackageCardData en toon dat op de kaart; id blijft ongewijzigd
gebruikt als React key en data-testid.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/features/landing/components/PackageCard.tsx

@@ -16,7 +16,7 @@ export function PackageCard({ pkg }: { pkg: PackageCardData }) {
           Meest gekozen
         </span>
       )}
-      <span className="font-mono mb-3.5 text-[0.78rem] text-accent">{pkg.id}</span>
+      <span className="font-mono mb-3.5 text-[0.78rem] text-accent">{pkg.slug}</span>
       <h3 className="mb-2.5 text-xl font-bold">{pkg.title}</h3>
       <p className="mb-6 text-[0.95rem] text-muted">{pkg.description}</p>
       <div className="font-mono mb-1 text-3xl font-bold">

src/features/landing/data/content.ts

@@ -27,6 +27,7 @@ export interface HeroContent {
 
 export interface PackageCardData {
   id: string;
+  slug: string;
   title: string;
   description: string;
   price: string;
@@ -76,6 +77,7 @@ export const heroContent: HeroContent = {
 export const packages: PackageCardData[] = [
   {
     id: 'pakket_01',
+    slug: 'landingspagina',
     title: 'Landingspagina',
     description: 'Eén overtuigende pagina die je product of dienst helder neerzet.',
     price: '€ 300',
@@ -90,6 +92,7 @@ export const packages: PackageCardData[] = [
   },
   {
     id: 'pakket_02',
+    slug: 'website',
     title: 'Website',
     description: "Een complete website met meerdere pagina's, klaar om te groeien.",
     price: '€ 750',
@@ -105,6 +108,7 @@ export const packages: PackageCardData[] = [
   },
   {
     id: 'pakket_03',
+    slug: 'maatwerk',
     title: 'Maatwerk',
     description: 'Grotere websites, een eigen back-end of andere .NET-projecten.',
     price: 'Op maat',