Maak een dynamische landingspagina voor de studio "Ctalents AI studio".

BELANGRIJK: De pagina moet bij het laden data ophalen van deze API endpoint:
https://caistudio.nl/api/v1/landing-page/st_99ad6c26b0a953a6987bbaef2eb9514f

Gebruik fetch() om de data op te halen bij page load en render alle secties dynamisch op basis van de response. Hieronder staat de huidige data als referentie voor de structuur, maar de pagina moet ALTIJD live data ophalen van de API.

== API Response structuur (huidige data als voorbeeld) ==

Studio naam: Ctalents AI studio
Titel: Ctalents AI Studio
Value proposition:
Beschrijving: Digitale AI-medewerkers voor kleine teams die meer maatschappelijke impact willen maken met dezelfde mensen.
Afbeelding URL: https://caistudio.nl/img/CAI-robot.jpg
Logo URL: https://caistudio.nl/storage/studios/images/lQfJnEYAh6tm4IIjM2pGlqzTbCEJPavy27yBg0Zo.png
Eigenaar: Sandra Ballij
Juridische documenten: [array van {label, url} objecten]

BELANGRIJK: De API response bevat een "checkoutEnabled" boolean. Als checkoutEnabled FALSE is, mogen er GEEN checkout/koop/aanmeld knoppen getoond worden. Toon in plaats daarvan "Binnenkort beschikbaar" of "Coming soon" als placeholder. Alle CTA knoppen die naar checkoutUrl linken moeten conditioneel zijn op basis van checkoutEnabled.

Prijs: €50,00 per maand. Checkout URL (uit API response "checkoutUrl"): https://caistudio.nl/studio/1d9981bd-a95a-4289-ad62-86425e50cda5/st_99ad6c26b0a953a6987bbaef2eb9514f/checkout

Er is een gratis proefperiode van 7 dagen.

Het is een maandelijks abonnement. Dit is van groot belang dat het overal correct weergegeven wordt. Er moeten geen referenties van eenmalige betalingen of iets dergelijks in zitten.

== Assistenten (komen uit API response "assistants" array) ==

• Salescoach: Senior B2B sales- en propositiestrateeg die klantgesprekken analyseert en je helpt deals scherper te sturen. Geeft concreet, bewijsgebaseerd advies over positionering, strategie en gespreksvoering met frameworks als Challenger, Voss en Cialdini.
• Perschef: Ervaren content creator die op basis van je website en actueel nieuws journalistieke artikelen schrijft. Levert concrete invalshoeken, volledige artikelen en kant-en-klare pitches inclusief media, journalisten en contactgegevens.
• Projectplanner: Ervaren projectmanagement-expert die je stap voor stap begeleidt bij het maken van een compleet projectplan. Werkt interactief, fase-voor-fase, en levert een gestructureerd plan inclusief Gantt-chart, afgestemd op jouw methode en input.
• Social Media manager: AI-assistent die op basis van je website 10 social media ideeën genereert in jouw tone of voice. Analyseert content en stijl en vertaalt dit naar creatieve invalshoeken met platformadvies, zonder generieke ideeën.

== Vereiste secties (in deze volgorde) ==

1. Hero sectie: Naam, titel, subtitel, studio afbeelding/logo, en een prominente CTA knop naar checkoutUrl
2. Assistenten: Toon alle assistenten als kaarten met naam, beschrijving en afbeelding. Render dynamisch vanuit de "assistants" array in de API response.
3. De Maker: Sectie over de eigenaar (ownerName uit API). Maak dit een persoonlijk, vertrouwenwekkend verhaal.
4. Probleem → Transformatie: Beschrijf het probleem dat de studio oplost en de transformatie die de gebruiker ondergaat. Baseer dit op de beschrijving.
5. Voordelen: Concrete voordelen van het gebruik van de studio, afgeleid uit de beschrijving en assistenten.
6. Social Proof: Placeholders voor testimonials/reviews (met dummy data die later vervangen kan worden).
7. FAQ: Veelgestelde vragen sectie met relevante vragen over de studio, prijs en assistenten.
8. CTA: Afsluitende call-to-action met de checkout knop. Gebruik ALTIJD de "checkoutUrl" uit de API response voor alle koop/aanmeld knoppen.
9. Footer: Een footer met links naar de juridische pagina's. Render dynamisch vanuit de "legalDocuments" array in de API response. Elke entry heeft een "label" en "url". Toon alle labels als links. Open deze links in een nieuw tabblad.

== Kleurthema ==

De studio heeft een custom kleurthema: "slate".
Gebruik deze kleuren als primaire/accent kleur voor de gehele pagina (knoppen, links, highlights, gradients, etc.):

Kleurschaal: 50: #f8fafc, 100: #f1f5f9, 200: #e2e8f0, 300: #cbd5e1, 400: #94a3b8, 500: #64748b, 600: #475569, 700: #334155, 800: #1e293b, 900: #0f172a, 950: #020617
Accent kleur (buttons, links): #64748b
Accent hover: #475569
Accent donker (dark mode buttons): #334155

Gebruik de lichtere tinten (50-200) voor achtergronden en de donkerdere tinten (600-900) voor tekst en accenten. De accent kleur moet gebruikt worden voor alle CTA knoppen en interactieve elementen.

== Technische vereisten ==

• Haal data op met fetch("https://caistudio.nl/api/v1/landing-page/st_99ad6c26b0a953a6987bbaef2eb9514f") bij page load
• Toon een loading state terwijl data wordt opgehaald
• Alle content moet dynamisch gerenderd worden vanuit de API response
• Alle CTA knoppen moeten linken naar de "checkoutUrl" uit de API response, maar ALLEEN als "checkoutEnabled" true is. Anders toon "Binnenkort beschikbaar"
• De pagina moet volledig responsief zijn voor desktop en mobiel
• Gebruik een modern, aantrekkelijk design met overtuigende copy
• BELANGRIJK: Hardcode NOOIT het aantal assistenten of andere aantallen. Wanneer je refereert aan het aantal assistenten (bijv. in de hero, titels, of beschrijvingen), bereken dit ALTIJD dynamisch vanuit de API response met data.assistants.length. Dus NIET "7 AI-assistenten" maar ${data.assistants.length} AI-assistenten.
• IMPORTANT: Do not use shadcn/tailwind.css in global.css. This results in "Failed to load shadcn from /app/globals.css" errors.