Maak een dynamische landingspagina voor de studio.

== API endpoint ==
Haal alle content op met fetch("https://caistudio.nl/api/v1/landing-page/st_0192845773a793bbc19c4b7b04f37515") bij page load.
Toon een loading state terwijl de data wordt opgehaald. Render NIETS uit hardcoded waarden — al het zichtbare moet uit deze API komen.

== Response shape ==

{
"name": string,
"title": string | null,
"valueProposition": string | null,
"description": string | null,
"imageUrl": string,
"logoUrl": string | null,

"isFree": boolean,
"price": string | null, // pre-formatted euro amount, e.g. "29.95"
"trialPeriodDays": integer | null,
"recurringInterval": string, // "monthly" | "yearly" | "weekly" | …
"checkoutUrl": string,
"checkoutEnabled": boolean,

"ownerName": string,
"ownerBio": string | null,

"assistants": [
{ "name": string, "description": string | null, "imageUrl": string }
],

"legalDocuments": [
{ "label": string, "url": string }
],

"theme": {
"accent": string, // hex, e.g. "#f43f5e"
"accentHover": string,
"accentDark": string,
"scale": { "50": string, "100": string, …, "900": string, "950": string }
} | null
}

== Vereiste secties (in deze volgorde) ==

1. Hero: data.name, data.title, data.valueProposition, data.imageUrl / data.logoUrl, en een prominente CTA naar data.checkoutUrl.
2. Assistenten: render alle items uit data.assistants als kaarten met name, description, imageUrl. Aantal teksten zoals "X AI-assistenten" gebruiken data.assistants.length — NOOIT een vast getal.
3. De Maker: persoonlijk, vertrouwenwekkend verhaal gebaseerd op data.ownerName (en data.ownerBio indien aanwezig).
4. Probleem → Transformatie: afgeleid van data.description.
5. Voordelen: afgeleid van data.description en data.assistants.
6. Social Proof: placeholder testimonials/reviews (mag dummy data zijn die later vervangen wordt).
7. FAQ: relevante vragen over de studio, prijs en assistenten.
8. CTA: afsluitende call-to-action met data.checkoutUrl.
9. Footer: render alle items uit data.legalDocuments als links (label + url, open in nieuw tabblad).

== Regels ==

• Hardcode NOOIT prijs, namen, aantallen, kleuren, teksten, knoppen, afbeeldingen of URLs in de JSX/HTML. Alle waarden komen uit de API response.
• Aantallen: gebruik data.assistants.length, NOOIT een vast getal. Ook geen "7 AI-assistenten" o.i.d. — altijd dynamisch.
• Prijs / proefperiode: alleen tonen als data.isFree === false. Format: €{data.price} (data.price is al pre-formatted) gevolgd door een label op basis van data.recurringInterval ("monthly" / "yearly" / etc.). Toon proefperiode alleen als data.trialPeriodDays !== null.
• Checkout: alle CTA knoppen linken naar data.checkoutUrl, maar ALLEEN als data.checkoutEnabled === true. Anders toon "Binnenkort beschikbaar" als placeholder.
• Theme: pas data.theme.accent toe op alle CTA / interactieve elementen via CSS variables of inline style. Gebruik data.theme.scale (key/value: shade-naam → hex) voor achtergronden, borders en accenten. data.theme kan null zijn — gebruik dan een neutrale default (slate/zinc).
• Pagina moet volledig responsief zijn voor desktop en mobiel.
• Geen @import 'shadcn/tailwind.css' in globals.css — dit veroorzaakt "Failed to load shadcn from /app/globals.css" errors. Gebruik alleen inline Tailwind CSS classes.
• Taal: schrijf alle statische tekst (placeholder testimonials, FAQ vragen en antwoorden, knoplabels, sectietitels) in het Nederlands.