Dynamic landing page - v0 by Vercel

Maak een dynamische landingspagina voor de studio "MKTG FLOW AI-studio".

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

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: MKTG FLOW AI-studio
Titel: MKTG FLOW
Subtitel: Humans lead - AI runs - Space for growth
Beschrijving: Welkom in de MKTG FLOW AI-studio. Een team van AI-agents dat marketingwerk versnelt en structureert. Humans bepalen de richting. AI voert uit. Zo ontstaat controle, flow en ruimte voor groei.
Afbeelding URL: https://caistudio.nl/images/studio/st_0131a0d3338bbe10cb0780f0ceeda04e?v=1773307512
Logo URL: https://caistudio.nl/images/studio-logo/st_0131a0d3338bbe10cb0780f0ceeda04e?v=1773307512
Eigenaar: Sylvia Weiler
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/sylvia-weiler/untitled-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) ==

Content Creator: Genereert razendsnel creatieve hooks en doelgroepgerichte content voor alle kanalen: social media, blogs, e-mails en whitepapers.
Strategie Specialist: Beantwoordt iedere strategische vraag — van marketing tot positionering, klantsegmentatie en groei — en vertaalt die naar concrete acties.
Meeting Manager: Maakt van iedere meeting een gestructureerd overleg: van agenda en input ophalen tot samenvatting en opvolging.
Data Deepdiver: Ontcijfert complexe marketingdata en vertaalt analyses naar direct bruikbare inzichten en verbeteradviezen.
Presentatie Pro: Bouwt in no-time overtuigende presentaties voor klantpitches, interne sessies of trainingen.
Website Wizard: Creëert complete websiteteksten en beeldsuggesties voor nieuwe of bestaande sites, altijd in lijn met je merk en doelgroep.
Offerte Optimizer: Maakt in recordtempo overtuigende, op maat gemaakte offertes die aansluiten bij de klantbehoefte en positionering van het bureau.

== 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_0131a0d3338bbe10cb0780f0ceeda04e") 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

31d ago

Now let me read the existing files before building the landing page.

Now I have everything I need. Let me build the full landing page with all required sections.

Now let me also update globals.css to add the Space Grotesk font variable and then build all the components:

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

Now let me write the main page that fetches from the API:

De landingspagina is volledig gebouwd. Hier is een overzicht van wat er gemaakt is:

Alle 9 vereiste secties zijn aanwezig:

Hero — Studio-afbeelding, logo, titel, subtitel, stats (aantal assistenten dynamisch via data.assistants.length), en een conditionele CTA-knop op basis van checkoutEnabled
Assistenten — Dynamisch gerenderde kaarten vanuit de assistants array met iconen per specialiteit
De Maker — Persoonlijk verhaal over de eigenaar (ownerName) met avatar-initialen
Probleem → Transformatie — Twee-koloms layout die het probleem en de transformatie naast elkaar toont
Voordelen — 6-kaarten grid met concrete voordelen afgeleid uit de studio
Social Proof — Stats-balk + 3 testimonial-placeholders (duidelijk gemarkeerd als placeholder)
FAQ — Accordion met dynamisch gegenereerde vragen op basis van API-data
CTA — Prominente checkout-sectie met prijsweergave ("per maand") en conditionele knoppen
Footer — Dynamisch gegenereerde juridische links uit legalDocuments array, openen in nieuw tabblad

Technisch: De pagina haalt live data op via fetch() bij page load, toont een loading skeleton tijdens het laden, en heeft een nette foutpagina met "Probeer opnieuw"-knop. Alle aantallen en prijzen zijn 100% dynamisch — nooit hardcoded.

31d ago

Maak een dynamische landingspagina voor de studio "MKTG FLOW AI-studio".

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

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

Prijs: €0,00 per maand. Checkout URL (uit API response "checkoutUrl"): https://caistudio.nl/studio/sylvia-weiler/untitled-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) ==

Content Creator: Genereert razendsnel creatieve hooks en doelgroepgerichte content voor alle kanalen: social media, blogs, e-mails en whitepapers.
Strategie Specialist: Beantwoordt iedere strategische vraag — van marketing tot positionering, klantsegmentatie en groei — en vertaalt die naar concrete acties.
Meeting Manager: Maakt van iedere meeting een gestructureerd overleg: van agenda en input ophalen tot samenvatting en opvolging.
Data Deepdiver: Ontcijfert complexe marketingdata en vertaalt analyses naar direct bruikbare inzichten en verbeteradviezen.
Presentatie Pro: Bouwt in no-time overtuigende presentaties voor klantpitches, interne sessies of trainingen.
Website Wizard: Creëert complete websiteteksten en beeldsuggesties voor nieuwe of bestaande sites, altijd in lijn met je merk en doelgroep.
Offerte Optimizer: Maakt in recordtempo overtuigende, op maat gemaakte offertes die aansluiten bij de klantbehoefte en positionering van het bureau.

== 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_0131a0d3338bbe10cb0780f0ceeda04e") 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 before building the landing page.

Now I have everything I need. Let me build the full landing page with all required sections.

Now let me also update globals.css to add the Space Grotesk font variable and then build all the components:

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

Now let me write the main page that fetches from the API:

De landingspagina is volledig gebouwd. Hier is een overzicht van wat er gemaakt is:

Alle 9 vereiste secties zijn aanwezig:

Hero — Studio-afbeelding, logo, titel, subtitel, stats (aantal assistenten dynamisch via data.assistants.length), en een conditionele CTA-knop op basis van checkoutEnabled
Assistenten — Dynamisch gerenderde kaarten vanuit de assistants array met iconen per specialiteit
De Maker — Persoonlijk verhaal over de eigenaar (ownerName) met avatar-initialen
Probleem → Transformatie — Twee-koloms layout die het probleem en de transformatie naast elkaar toont
Voordelen — 6-kaarten grid met concrete voordelen afgeleid uit de studio
Social Proof — Stats-balk + 3 testimonial-placeholders (duidelijk gemarkeerd als placeholder)
FAQ — Accordion met dynamisch gegenereerde vragen op basis van API-data
CTA — Prominente checkout-sectie met prijsweergave ("per maand") en conditionele knoppen
Footer — Dynamisch gegenereerde juridische links uit legalDocuments array, openen in nieuw tabblad

31d ago