Maak een dynamische landingspagina voor de studio "Susan Underwood".
BELANGRIJK: De pagina moet bij het laden data ophalen van deze API endpoint:
https://caistudio.nl/api/v1/landing-page/93b744aa-010d-494b-ad2f-68550ce04636
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: Susan Underwood
Titel: Susan Underwood
Subtitel:
Beschrijving: Reprehenderit qui di
Afbeelding URL: https://caistudio.nl/images/studio/93b744aa-010d-494b-ad2f-68550ce04636?v=1774434765
Logo URL:
Eigenaar: Jasper
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: €83,00 per maand. Checkout URL (uit API response "checkoutUrl"): https://caistudio.nl/studio/jasper/susan-underwood/checkout
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) ==
== Vereiste secties (in deze volgorde) ==
== Technische vereisten ==
data.assistants.length. Dus NIET "7 AI-assistenten" maar ${data.assistants.length} AI-assistenten.Great design direction! I'll go with a dark, premium AI aesthetic inspired by the OpenAI/v0 style — deep navy/slate backgrounds, crisp white typography, and a vibrant teal accent. Now let me build all the components.
Now let me build all the landing page components:
Now let me write the main page that fetches from the API and orchestrates everything:
The landing page is now complete! Here's what was built:
Architecture: The page.tsx client component fetches live data from https://caistudio.nl/api/v1/landing-page/93b744aa-... on load, normalizes the API response into a typed LandingPageData object, and renders all 9 sections dynamically.
Key features:
checkoutEnabled guard — all CTA/checkout buttons are conditionally rendered; when false, a "Binnenkort beschikbaar" badge is shown insteaddata.assistants.length, never hardcoded{ label, url } entry from legalDocuments as an external link (target="_blank")#0a0f1a background, teal #0ea5e9 accent, clean Inter typography, subtle grid overlays and glow effects inspired by the design brief