Dynamic landing page - v0 by Vercel

Maak een dynamische landingspagina voor de studio "Stroomversnelling 360º".

BELANGRIJK: De pagina moet bij het laden data ophalen van deze API endpoint:
https://caistudio.nl/api/v1/landing-page/11cf1310-ae96-49f1-ba9c-ddbce868a7a4

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: Stroomversnelling 360º
Titel: Stroomversnelling 360º
Subtitel: Versnellers waarmee jouw projecten soepel doorstromen
Beschrijving: Met de producten van Stroomversnelling 360º versnel je de tijdvreters in je transitie werkzaamheden zodat jij je kunt focussen op de inhoud , strategie en mensenwerk.
Afbeelding URL: https://caistudio.nl/images/studio/11cf1310-ae96-49f1-ba9c-ddbce868a7a4?v=1774364446
Logo URL:
Eigenaar: muriel@stroomversnelling360.nl
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/muriel-at-stroomversnelling360nl/stroomversnelling-360/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) ==

Project Start Versneller: De Project Start Versneller van Stroomversnelling 360º vertaalt de eerste gesprekken met de klant tot een duidelijke opdrachtomschrijving, offerte en initieel plan van aanpak en en vervolg projectstart documenten.
Plan van Aanpak Versneller: Creëer snel een plan van aanpak naar aanleiding van je gesprek met de klant. Start met het uploaden van je gesprek verslag, je eventuele eigen schrijfstijl en templates of voorbeelden van je voorkeur PVA document.
Klant Kompas: Met het Klant Kompas van Stroomversnelling 360º identificeer je heel duidelijk je target groep en creëer je de basis voor de juiste content voor je website en je social media en LinkedIn posts.

== 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/11cf1310-ae96-49f1-ba9c-ddbce868a7a4") 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

52d ago

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

Now I have all the context I need. Let me build the full landing page with all components:

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

Now let me write the main page that fetches data and renders all components:

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

Architecture: The page fetches live data from https://caistudio.nl/api/v1/landing-page/... on every load using useEffect + fetch, with a full-screen loading state and error screen with retry button.

All 9 sections are implemented:

Navbar — sticky, dark, with logo and anchor links
Hero — studio image, title, subtitle, assistant count badge (dynamic), CTA conditional on checkoutEnabled
Assistenten — dynamically rendered cards from data.assistants array (count never hardcoded)
De Maker — personal owner story with floating stats card
Probleem → Transformatie — two-column before/after layout derived from the description
Voordelen — 6-benefit grid on dark background
Social Proof — 3 testimonial placeholders with starred ratings and disclaimer
FAQ — accordion with dynamic assistant names/count injected from API data
Footer — legal documents from data.legalDocuments array, all opening in new tab

Key technical details: All CTA buttons (CtaButton component) check checkoutEnabled — if false they render a "Binnenkort beschikbaar" badge instead of a link. The subscription is consistently referred to as maandelijks abonnement throughout.

52d ago

Kun je de kleur opbouw veranderen. ik wil een warmer karakter. Ik houd van forest green en een zachte beige zand kleur

11d ago

Now let me read all the component files to understand all the hardcoded color references:

I now have a full picture of every hardcoded color. The teal/navy palette is used in both CSS variables and inline oklch() values scattered across all components. I'll systematically replace everything with forest green + warm sand/beige.

Now update all the hardcoded oklch color values in every component. Starting with the page.tsx loading/error screens and then each component:

Now update HeroSection — the grid overlay and subtitle colors:

Now update the Navbar:

Now update AssistantsSection card accent colors:

Now update MakerSection:

Now update TransformationSection — the teal background on the right column:

Now update BenefitsSection — the dark hero background cards:

Now update SocialProofSection testimonial avatar colors:

Now update FaqSection background:

Now update CtaSection:

Finally update Footer:

All colors have been updated. The palette is now built around three core values: forest green (oklch(0.42 0.12 145)) as the primary brand color, warm sand/beige (oklch(0.97 0.014 80)) as the background, and terracotta/amber (oklch(0.68 0.14 55)) as the accent. Dark sections (hero, benefits, navbar, footer) now use a deep moss-forest green instead of the previous cold navy-blue, and all inline oklch hue references have been shifted from the cool 195–240 range to the warm 85–145 range throughout every component.

11d ago

Maak een dynamische landingspagina voor de studio "Stroomversnelling 360º".

BELANGRIJK: De pagina moet bij het laden data ophalen van deze API endpoint:
https://caistudio.nl/api/v1/landing-page/11cf1310-ae96-49f1-ba9c-ddbce868a7a4

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

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

Project Start Versneller: De Project Start Versneller van Stroomversnelling 360º vertaalt de eerste gesprekken met de klant tot een duidelijke opdrachtomschrijving, offerte en initieel plan van aanpak en en vervolg projectstart documenten.
Plan van Aanpak Versneller: Creëer snel een plan van aanpak naar aanleiding van je gesprek met de klant. Start met het uploaden van je gesprek verslag, je eventuele eigen schrijfstijl en templates of voorbeelden van je voorkeur PVA document.
Klant Kompas: Met het Klant Kompas van Stroomversnelling 360º identificeer je heel duidelijk je target groep en creëer je de basis voor de juiste content voor je website en je social media en LinkedIn posts.

== 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/11cf1310-ae96-49f1-ba9c-ddbce868a7a4") 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 all the context I need. Let me build the full landing page with all components:

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

Now let me write the main page that fetches data and renders all components:

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

All 9 sections are implemented:

Navbar — sticky, dark, with logo and anchor links
Hero — studio image, title, subtitle, assistant count badge (dynamic), CTA conditional on checkoutEnabled
Assistenten — dynamically rendered cards from data.assistants array (count never hardcoded)
De Maker — personal owner story with floating stats card
Probleem → Transformatie — two-column before/after layout derived from the description
Voordelen — 6-benefit grid on dark background
Social Proof — 3 testimonial placeholders with starred ratings and disclaimer
FAQ — accordion with dynamic assistant names/count injected from API data
Footer — legal documents from data.legalDocuments array, all opening in new tab

52d ago

Kun je de kleur opbouw veranderen. ik wil een warmer karakter. Ik houd van forest green en een zachte beige zand kleur

11d ago

Now let me read all the component files to understand all the hardcoded color references:

Now update all the hardcoded oklch color values in every component. Starting with the page.tsx loading/error screens and then each component:

Now update HeroSection — the grid overlay and subtitle colors:

Now update the Navbar:

Now update AssistantsSection card accent colors:

Now update MakerSection:

Now update TransformationSection — the teal background on the right column:

Now update BenefitsSection — the dark hero background cards:

Now update SocialProofSection testimonial avatar colors:

Now update FaqSection background:

Now update CtaSection:

Finally update Footer:

11d ago