Dynamic landing page - v0 by Vercel

Maak een dynamische landingspagina voor de studio "Focus, Flow & Ritme Studio".

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

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: Focus, Flow & Ritme Studio
Titel: Focus, Flow & Ritme Studio
Subtitel:
Beschrijving:
Afbeelding URL: https://caistudio.nl/img/CAI-robot.jpg
Logo URL:
Eigenaar: Joke Bruggenkamp / Flonker
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: €0,00 per maand. Checkout URL (uit API response "checkoutUrl"): https://caistudio.nl/studio/joke-bruggenkamp-flonker/focus-flow-ritme-studio/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) ==

Patroononderzoeker: Brengt dominante patronen en vluchtstrategieën in kaart en maakt ze bespreekbaar.
Flow & Verlangenonderzoeker: Maakt energiebronnen en drijfveren concreet en vertaalt die naar keuzes.
Ritme & Focusonderzoeker: Bepaalt het optimale werkritme en routines, passend bij rol en ambitie.
Ritme Optimalisator: Zet alle inzichten om in een persoonlijk, werkbaar weekritme met blijvende focus.

== Vereiste secties (in deze volgorde) ==

Hero sectie: Naam, titel, subtitel, studio afbeelding/logo, en een prominente CTA knop naar checkoutUrl
Assistenten: Toon alle assistenten als kaarten met naam, beschrijving en afbeelding. Render dynamisch vanuit de "assistants" array in de API response.
De Maker: Sectie over de eigenaar (ownerName uit API). Maak dit een persoonlijk, vertrouwenwekkend verhaal.
Probleem → Transformatie: Beschrijf het probleem dat de studio oplost en de transformatie die de gebruiker ondergaat. Baseer dit op de beschrijving.
Voordelen: Concrete voordelen van het gebruik van de studio, afgeleid uit de beschrijving en assistenten.
Social Proof: Placeholders voor testimonials/reviews (met dummy data die later vervangen kan worden).
FAQ: Veelgestelde vragen sectie met relevante vragen over de studio, prijs en assistenten.
CTA: Afsluitende call-to-action met de checkout knop. Gebruik ALTIJD de "checkoutUrl" uit de API response voor alle koop/aanmeld knoppen.
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.

== Technische vereisten ==

Haal data op met fetch("https://caistudio.nl/api/v1/landing-page/st_3f5f5fe8955e338fc08bdb29be4ec602") 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.

Show full message

41d ago

Now let me read the existing files and build the landing page:

Now I have everything I need. Let me build the complete landing page:

Now let me create all the component files and the main page:

Now let's write the main page with the data fetching logic:

The landing page is fully built. Here's a summary of what was created:

9 dynamic sections, all driven by live API data fetched from https://caistudio.nl/api/v1/landing-page/st_3f5f5fe895... on page load:

Hero — studio name, title, image, assistant count badge, and conditional CTA button
Assistants — renders all cards dynamically from data.assistants with color-coded accent bars
De Maker — personal owner story using data.ownerName
Probleem → Transformatie — two-column visual comparing pain points vs. outcomes
Voordelen — 6-benefit grid with icons
Social Proof — 3 testimonial cards (placeholder data, marked as such)
FAQ — accordion with 7 questions, dynamically using data.assistants.length and data.price
CTA — full dark hero-style section with checkout button (or "Binnenkort beschikbaar" when checkoutEnabled is false)
Footer — renders all legalDocuments as external links

All CTA buttons are conditionally rendered based on checkoutEnabled, and all counts are always calculated dynamically via data.assistants.length.

41d ago

Maak een dynamische landingspagina voor de studio "Focus, Flow & Ritme Studio".

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

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

Prijs: €0,00 per maand. Checkout URL (uit API response "checkoutUrl"): https://caistudio.nl/studio/joke-bruggenkamp-flonker/focus-flow-ritme-studio/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) ==

Patroononderzoeker: Brengt dominante patronen en vluchtstrategieën in kaart en maakt ze bespreekbaar.
Flow & Verlangenonderzoeker: Maakt energiebronnen en drijfveren concreet en vertaalt die naar keuzes.
Ritme & Focusonderzoeker: Bepaalt het optimale werkritme en routines, passend bij rol en ambitie.
Ritme Optimalisator: Zet alle inzichten om in een persoonlijk, werkbaar weekritme met blijvende focus.

== Vereiste secties (in deze volgorde) ==

Hero sectie: Naam, titel, subtitel, studio afbeelding/logo, en een prominente CTA knop naar checkoutUrl
Assistenten: Toon alle assistenten als kaarten met naam, beschrijving en afbeelding. Render dynamisch vanuit de "assistants" array in de API response.
De Maker: Sectie over de eigenaar (ownerName uit API). Maak dit een persoonlijk, vertrouwenwekkend verhaal.
Probleem → Transformatie: Beschrijf het probleem dat de studio oplost en de transformatie die de gebruiker ondergaat. Baseer dit op de beschrijving.
Voordelen: Concrete voordelen van het gebruik van de studio, afgeleid uit de beschrijving en assistenten.
Social Proof: Placeholders voor testimonials/reviews (met dummy data die later vervangen kan worden).
FAQ: Veelgestelde vragen sectie met relevante vragen over de studio, prijs en assistenten.
CTA: Afsluitende call-to-action met de checkout knop. Gebruik ALTIJD de "checkoutUrl" uit de API response voor alle koop/aanmeld knoppen.
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.

== Technische vereisten ==

Haal data op met fetch("https://caistudio.nl/api/v1/landing-page/st_3f5f5fe8955e338fc08bdb29be4ec602") 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.

Now let me read the existing files and build the landing page:

Now I have everything I need. Let me build the complete landing page:

Now let me create all the component files and the main page:

Now let's write the main page with the data fetching logic:

The landing page is fully built. Here's a summary of what was created:

9 dynamic sections, all driven by live API data fetched from https://caistudio.nl/api/v1/landing-page/st_3f5f5fe895... on page load:

Hero — studio name, title, image, assistant count badge, and conditional CTA button
Assistants — renders all cards dynamically from data.assistants with color-coded accent bars
De Maker — personal owner story using data.ownerName
Probleem → Transformatie — two-column visual comparing pain points vs. outcomes
Voordelen — 6-benefit grid with icons
Social Proof — 3 testimonial cards (placeholder data, marked as such)
FAQ — accordion with 7 questions, dynamically using data.assistants.length and data.price
CTA — full dark hero-style section with checkout button (or "Binnenkort beschikbaar" when checkoutEnabled is false)
Footer — renders all legalDocuments as external links

All CTA buttons are conditionally rendered based on checkoutEnabled, and all counts are always calculated dynamically via data.assistants.length.

41d ago