Dynamic landing page - v0 by Vercel

Maak een dynamische landingspagina voor de studio "Bolly".

BELANGRIJK: De pagina moet bij het laden data ophalen van deze API endpoint:
https://caistudio.nl/api/v1/landing-page/10abce10-8af1-4e46-bf59-fedc768d8e11

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: Bolly
Titel: Bolly
Subtitel:
Beschrijving: Dealer gerichte AV hulp
AV-Studio voor Dealers
Afbeelding URL: https://caistudio.nl/images/studio/10abce10-8af1-4e46-bf59-fedc768d8e11?v=1772181494
Logo URL:
Eigenaar: peter paul Krijnen
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.

De studio is gratis te gebruiken. Checkout URL: https://caistudio.nl/studio/peter-paul-krijnen/bolly/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) ==

AV mannetje: Beantwoordt alle supportvragen, gebruikt handleidingen en eerdere tickets, geeft stapsgewijze oplossingen, biedt 24/7 ondersteuning en helpt bij storingen en installatieproblemen.
Offerte hulp: Genereert snel foutloze offertes, controleert compatibiliteit, maakt tekstblokken, voert foutcontroles uit, stelt alternatieven voor en versnelt het offerteproces.
Spec Check: Beantwoordt technische vragen, geeft accurate specificaties, vergelijkt modellen, houdt data up-to-date en adviseert over compatibiliteit en accessoires.

== 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/10abce10-8af1-4e46-bf59-fedc768d8e11") 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

29d ago

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

Now I have everything I need. Let me build the landing page. I'll update the globals.css with a dark navy/electric blue theme and create all the components:

Now let me update the layout.tsx and create all the components:

Now let me add the heading font variable to globals.css:

Now let me create all the landing page components:

Now let's create the main LandingPage client component and update the page:

Now I need to add the id="faq" to the FaqSection and update the page.tsx:

Now let me also add a smooth scroll behavior and some additional polish to the globals.css:

Let me verify all the files look good:

All 13 landing components are in place. The full landing page is complete. Here's a summary of what was built:

De Bolly landingspagina is een volledig dynamische, op API-data gebaseerde pagina met de volgende structuur:

LandingPage.tsx — Hoofdcomponent die fetch() uitvoert bij mount, een loading/error state toont, en alle secties samenstelt
9 secties: NavBar (sticky, transparant→frosted), Hero (met assistent-count dynamisch), Assistenten-kaarten, De Maker, Probleem→Transformatie, Voordelen, Social Proof + stats, FAQ (accordion), CTA + Footer met juridische links
CtaButton — Centraal checkout-knop component: toont de knop alleen als checkoutEnabled === true, anders "Binnenkort beschikbaar" — dit is consequent toegepast op elke CTA in de pagina
Design: Donker navy/elektrisch blauw kleurenschema met Space Grotesk voor koppen, grid-achtergrond, hover-animaties en accent-lijnen — geïnspireerd op het OpenAI/Vercel design brief

29d ago

Maak een dynamische landingspagina voor de studio "Bolly".

BELANGRIJK: De pagina moet bij het laden data ophalen van deze API endpoint:
https://caistudio.nl/api/v1/landing-page/10abce10-8af1-4e46-bf59-fedc768d8e11

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

De studio is gratis te gebruiken. Checkout URL: https://caistudio.nl/studio/peter-paul-krijnen/bolly/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) ==

AV mannetje: Beantwoordt alle supportvragen, gebruikt handleidingen en eerdere tickets, geeft stapsgewijze oplossingen, biedt 24/7 ondersteuning en helpt bij storingen en installatieproblemen.
Offerte hulp: Genereert snel foutloze offertes, controleert compatibiliteit, maakt tekstblokken, voert foutcontroles uit, stelt alternatieven voor en versnelt het offerteproces.
Spec Check: Beantwoordt technische vragen, geeft accurate specificaties, vergelijkt modellen, houdt data up-to-date en adviseert over compatibiliteit en accessoires.

== 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/10abce10-8af1-4e46-bf59-fedc768d8e11") 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 then build the landing page:

Now I have everything I need. Let me build the landing page. I'll update the globals.css with a dark navy/electric blue theme and create all the components:

Now let me update the layout.tsx and create all the components:

Now let me add the heading font variable to globals.css:

Now let me create all the landing page components:

Now let's create the main LandingPage client component and update the page:

Now I need to add the id="faq" to the FaqSection and update the page.tsx:

Now let me also add a smooth scroll behavior and some additional polish to the globals.css:

Let me verify all the files look good:

All 13 landing components are in place. The full landing page is complete. Here's a summary of what was built:

De Bolly landingspagina is een volledig dynamische, op API-data gebaseerde pagina met de volgende structuur:

LandingPage.tsx — Hoofdcomponent die fetch() uitvoert bij mount, een loading/error state toont, en alle secties samenstelt
9 secties: NavBar (sticky, transparant→frosted), Hero (met assistent-count dynamisch), Assistenten-kaarten, De Maker, Probleem→Transformatie, Voordelen, Social Proof + stats, FAQ (accordion), CTA + Footer met juridische links
CtaButton — Centraal checkout-knop component: toont de knop alleen als checkoutEnabled === true, anders "Binnenkort beschikbaar" — dit is consequent toegepast op elke CTA in de pagina
Design: Donker navy/elektrisch blauw kleurenschema met Space Grotesk voor koppen, grid-achtergrond, hover-animaties en accent-lijnen — geïnspireerd op het OpenAI/Vercel design brief

29d ago