Maak een dynamische landingspagina voor de studio "Impact COMS Lab".
BELANGRIJK: De pagina moet bij het laden data ophalen van deze API endpoint:
https://caistudio.nl/api/v1/landing-page/st_e45b6672e7d79ac38fee843bf08e5960
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: Impact COMS Lab
Titel: Impact COMS Lab
Subtitel:
Beschrijving: Een tailormade AI-werkstudio voor communicatieprofessionals die sneller en praktischer willen werken, als verlengstuk van hun eigen schrijfstijl, aanpak en denkwijze.
Afbeelding URL: https://caistudio.nl/img/CAI-robot.jpg
Logo URL:
Eigenaar: Mirjam Boode
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/mirjam-boode/impact-coms-lab/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 let me read the existing files and build the landing page:
Now I have all the context I need. Let me build the complete landing page:
Now let me create all the component files and then the main page:
Now let me write the main page that ties everything together:
Now let me also update the globals.css to add the custom CSS variables to the @theme inline block so they're accessible:
The globals.css looks correct with the custom --hero-bg, --hero-fg, and --section-alt tokens defined in :root. The landing page is complete. Here's a summary of what was built:
De landingspagina is klaar. Hier is wat er gebouwd is:
data.assistants), De Maker, Probleem→Transformatie, Voordelen, Social Proof, FAQ (accordion), CTA en Footer met juridische links uit de API.checkoutEnabled: bij false wordt "Binnenkort beschikbaar" getoond; de prijs en het aantal assistenten worden altijd dynamisch berekend vanuit de API-response.Good. Now let me read all the existing component files to understand the current code:
Now let me read all remaining components:
Now I have a thorough understanding of the site design at impact-coms.com and all existing components. The site uses a clean, editorial style — warm white backgrounds, earthy/forest green as the brand color, large serif headings, generous white space, and a very calm, professional Dutch communication feel. Let me redesign the entire visual identity to match.
The design inspiration is clear: cream/warm-white background, deep forest green as brand color, large editorial serif headings, generous white space, no dark sections or glowing effects. Let me now rewrite all components completely.
Now also update the layout to use Lora (elegant serif) + Inter:
Now let me completely rewrite all the components with the new editorial, impact-coms.com-inspired design:
The entire design has been rewritten to match the editorial aesthetic of impact-coms.com. Here is a summary of what changed:
Design system overhaul: Replaced the dark navy/teal tech palette with a warm cream (--cream) background, deep forest green (--green) as the brand color, dark charcoal text, and Lora (elegant serif) for headings — directly inspired by impact-coms.com's calm, editorial identity.
Layout language: Removed all dark hero sections, glowing effects, rounded pill badges, and grid-pattern overlays. Every section now uses generous white space, thin divider lines, uppercase tracking labels, and large serif headings — the same typographic rhythm as impact-coms.com.
Component-by-component: Hero is now a full-bleed split layout (text left, image right) with a minimal top nav bar; Assistants are displayed as a clean list with initials and right-aligned descriptions; the CTA section uses a solid forest-green background with white text for contrast; FAQ uses the classic + accordion pattern; the footer is minimal and flat.