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>

aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/domain-entities.md

@@ -66,7 +66,8 @@ Text alternative: A ThemePreference selects a set of ThemeTokens; SiteContent ag
 ### PackageCard
 | Field | Type | Required | Description |
 |---|---|---|---|
-| `id` | `string` | Yes | e.g. `pakket_01` |
+| `id` | `string` | Yes | Backend record identifier (GUID). Not shown on the page. |
+| `slug` | `string` | Yes | Readable, URL-safe identifier derived from `title`, e.g. `landingspagina`. Shown on the card instead of `id`. |
 | `title` | `string` | Yes | e.g. "Landingspagina" |
 | `description` | `string` | Yes | Short description |
 | `price` | `string` | Yes | e.g. "€ 300" or "Op maat" |

aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/packages-api-handoff.md

@@ -49,6 +49,7 @@ client-side sorting):
 [
   {
     "id": "pakket_01",
+    "slug": "landingspagina",
     "title": "Landingspagina",
     "description": "Eén overtuigende pagina die je product of dienst helder neerzet.",
     "price": "€ 300",
@@ -73,7 +74,8 @@ for a structured error body.
 
 | Field | Type | Required | Content type / description | Used for |
 |---|---|---|---|---|
-| `id` | `string` | Yes | Stable slug-like identifier, e.g. `pakket_01`. Currently just an ordinal slug, not a business meaning — reuse as the CMS entry's own key/slug. | React list key + `data-testid` on the card, and referenced in tests. Must be unique and stable across edits (don't regenerate on every content change, or it'll be treated as a different card). |
+| `id` | `string` | Yes | Stable record identifier (the CMS entry's own key, a GUID in practice). | React list key + `data-testid` on the card, and referenced in tests. Must be unique and stable across edits (don't regenerate on every content change, or it'll be treated as a different card). Not rendered on the page. |
+| `slug` | `string` | Yes | Readable, URL-safe identifier derived from `title` (lowercase, hyphen-separated), e.g. `landingspagina`. Unique among offerings; regenerate it when `title` changes, keep it otherwise. | Displayed on the card in place of the raw `id`, so visitors see readable text instead of a GUID. |
 | `title` | `string` | Yes | Short package name (e.g. "Landingspagina"). Plain text, no markup. | Card heading. |
 | `description` | `string` | Yes | One-sentence pitch, plain text. | Subheading under the title. |
 | `price` | `string` | Yes | Pre-formatted price display string — e.g. `"€ 300"` or `"Op maat"` for the quote-based package. **Not a number**: it's rendered verbatim, so formatting (currency symbol, spacing, "Op maat") is the CMS editor's responsibility, not computed client-side. | Large price figure on the card. |

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',