Maak een dynamische landingspagina voor de studio "CAI Founders Suite".
BELANGRIJK: De pagina moet bij het laden data ophalen van deze API endpoint:
https://caistudio.nl/api/v1/landing-page/st_030732e8fa8c91ce4af51cfa0a87463e
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: CAI Founders Suite
Titel: CAI Founders Suite
Subtitel: Ga van idee naar verkoopbare AI-studio met je eerste betalende klanten.
Beschrijving: Tussen een goed idee en een verkopende AI-studio zitten vier stappen: Bouwen -> Testen -> Vermarkten -> Verkopen. Voor elke stap heb je een AI-assistent die precies weet wat je moet doen, zodat je tijd bespaart, minder fouten maakt en niet in je eentje hoeft te zwemmen. Stel je vraag, krijg de juiste strategie, bouw verder. 24/7 beschikbaar. Gebouwd door Joep. Gevoed met bewezen frameworks, echte cases en jarenlange ervaring.
Afbeelding URL: https://caistudio.nl/storage/studios/images/RfNN0VkODPcYTadWfDLUUkTgpw9GwXjeuDOyJfGK.jpg
Logo URL:
Eigenaar: Joep Scheele
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/9f0b5250-2240-463d-903f-0998e6a8ca9e/st_030732e8fa8c91ce4af51cfa0a87463e/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.Now I have the design inspiration and codebase context. I'll build the full landing page with a dark, sophisticated AI/tech aesthetic — inspired by the OpenAI/Vercel dark style with clean white text on black.
Now let me create all the component files:
Now let's write the main page that ties everything together:
The landing page is now complete. Here's a summary of what was built:
Architecture:
page.tsx — client component that fetches live data from the API on load, with loading/error statesHeroSection, AssistantsSection, MakerSection, ProblemTransformationSection, BenefitsSection, SocialProofSection, FaqSection, CtaSection, FooterCtaButton component that conditionally renders the checkout button or a "Binnenkort beschikbaar" badge based on checkoutEnabledKey behaviors:
data.assistants.length, never hardcodedcheckoutEnabled gates every CTA button — if false, a disabled "Binnenkort beschikbaar" badge is shown insteaddata.legalDocuments, each opening in a new tabPas de landingspagina aan. Haal de emoji's weg bij de AI-agents. Zorg ervoor dat die AI-agents onder elkaar staan.
Nu heb je een rij van drie en dan in de eerste rij en daaronder eentje. De tweede rij vind ik nergens op slaan; dat moet mooier en beter.
Bovendien kunnen we de teksten hiernaar aanpassen. De call to action onderaan gewoon behouden:
"CAI Founders Suite
Zet je idee om naar een schaalbare AI-inkomstenstroom.
Tussen een goed idee en een verkopende AI-studio zitten vier stappen: bouwen, testen, vermarkten, verkopen. Voor elke stap een AI-assistent die precies weet wat je moet doen. Gebouwd door Joep. Gevoed met bewezen frameworks, echte cases en jarenlange ervaring. 24/7 beschikbaar. Op jouw tempo.
De vier assistenten
De wegwijzer
Beantwoordt direct elke vraag over je studio, het platform of je strategie. Alle kennis uit het hele traject in je broekzak: masterclasses, frameworks, FAQ's, strategieën.
De testpiloot
Helpt je een studio bouwen waar je klanten niet meer uit willen. Test je flow, vindt de gaten, verbetert tot het een product is dat zichzelf verkoopt.
De AI marketeer
Maakt je studio vindbaar en onweerstaanbaar aantrekkelijk. Positionering, content, landingspagina. Zodat mensen niet om je heen kunnen.
De closer
Zet interesse om in betalende klanten. Aanbod, pricing, gespreksstrategie. Zodat je niet alleen likes krijgt maar ook betalingen.
Hoe het werkt
Stap 1: Bouw je studio met de wegwijzer
Zet je expertise om in een werkende AI-studio. Elke vraag beantwoord, elke stap begeleid.
Stap 2: Valideer met de testpiloot
Test je studio met echte feedback. Verbeter tot je weet dat het werkt.
Stap 3: Word zichtbaar met de AI marketeer
Positioneer je studio, schrijf je content, zet je landingspagina neer.
Stap 4: Verkoop met de closer
Zet je aanbod neer, bepaal je prijs, voer het gesprek. Eerste klant binnen.
Veelgestelde vragen
Moet ik technisch zijn om dit te gebruiken?
Nee. CAI Studio is gebouwd voor ondernemers die geen code schrijven. Je beantwoordt vragen, het systeem bouwt je studio.
Hoeveel tijd kost dit per week?
Dat bepaal je zelf. De assistenten zijn 24/7 beschikbaar en werken op jouw tempo. De live masterclasses zijn wekelijks en duren ongeveer een uur.
Wat als ik nog geen helder idee heb?
Daarvoor is de Co-Founder. Die helpt je voordat je aan de suite begint om je expertise, doelgroep en concept scherp te krijgen.
Kan ik de assistenten onbeperkt gebruiken?
Ja. Zo vaak als je wilt, wanneer je wilt.
Wat als ik vastloop?
Start met de wegwijzer. Die kent het hele traject en geeft je direct het antwoord dat je nodig hebt. Daarnaast heb je de wekelijkse live building en coaching sessies.
"
Now let me read the remaining components I need to update:
Good. Now I have a clear picture. Here's my plan:
Let me now make all the changes:
Now rewrite the AssistantsSection — remove all emojis, stack cards vertically full-width, use the new copy:
Now replace ProblemTransformationSection with the "Hoe het werkt" steps section:
Now update the FAQ with the exact questions and answers from the brief:
De drie wijzigingen zijn doorgevoerd. De assistenten worden nu weergegeven als volledige breedte-kaarten gestapeld onder elkaar, elk met een genummerde stap-badge, kleurgecodeerd accent per fase, en de juiste beschrijvingsteksten uit de briefing — zonder emoji's. De "Hoe het werkt" sectie vervangt de vorige Probleem/Transformatie sectie met vier duidelijke genummerde stappen met verbindingspijlen. De FAQ is bijgewerkt met exact de vijf vragen en antwoorden uit de briefing, aangevuld met een vraag over het maandelijkse abonnement.