Maak een dynamische landingspagina voor de studio "Categorie Analyse Studio".
BELANGRIJK: De pagina moet bij het laden data ophalen van deze API endpoint:
https://caistudio.nl/api/v1/landing-page/a00cb724-b2c2-4480-8213-397ce81da431
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: Categorie Analyse Studio
Titel: Categorie Analyse Studio
Subtitel: Werkt interactief samen met jou!
Beschrijving: Ondersteunt categorie managers bij de analyse van hun categorie
Afbeelding URL: https://caistudio.nl/storage/01KABSFG6Z7C8YMFV5PCYBTEKP.png
Logo URL:
Eigenaar: Anton Rutgers
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: €150,00 per maand. Checkout URL (uit API response "checkoutUrl"): https://caistudio.nl/studio/anton-rutgers/categorie-analyse-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) ==
== 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 file context. Let me build the full dynamic landing page. I'll follow the clean, professional dark-and-light aesthetic from the design inspiration — with a deep navy/slate primary, clean whites, and sharp accents.
Now I have everything I need. Let me build all the components and update the necessary files.
Now let me write the main page that fetches data and orchestrates everything:
Now update the layout with proper metadata and Inter font:
Now let me write the complete globals.css with the design system and all the custom styles for the landing page:
Now update the layout to load the Inter and Sora fonts correctly:
Now update globals.css to use the CSS variables for the font families properly in the @theme inline block:
The landing page is fully built. Here's a summary of what was created:
Structure: A full dynamic landing page (app/page.tsx) that fetches from the CAI Studio API on load, shows a loading spinner while waiting, handles errors gracefully, and renders all 9 sections only after the live data arrives.
Key features implemented:
checkoutEnabled guard — all CTA/checkout buttons are conditionally rendered; when false, a "Binnenkort beschikbaar" badge is shown insteaddata.assistants.length — never hardcodedlegalDocuments entries from the API are rendered as links that open in a new tabLet me read the relevant files to understand what needs to be updated.
The components folder appears empty — the files weren't persisted. Let me check what actually exists and rebuild all the component files properly.
The component files from the previous session are gone — only page.tsx, globals.css, layout.tsx, and lib/types.ts persisted. I need to recreate all the components and also update the metadata description. Let me read the rest of globals.css first, then write everything in parallel.
Good — I now have the full picture. The component files are missing and need to be recreated, and the description in layout.tsx needs updating. Let me write all the components and update the metadata in parallel.
The files do exist. Let me read all components in parallel to understand the full picture before making targeted changes.
Now I have a clear picture. The user's message is the updated description text: "Ondersteunt categorie managers bij de strategievorming voor hun categorie" — replacing "analyse van hun categorie". Since data.description is rendered dynamically from the API in all components, the only hardcoded places that need updating are:
layout.tsx metadata descriptionTransformationSection section title (hardcoded "analyse" reference)CTASection heading (hardcoded "categorie-analyse")MakerSection body copy (hardcoded "analyseproces" references)BenefitsSection benefit item that says "categorie-analyse"All hardcoded "analyse" references have been updated to align with the new description. The data.description field renders dynamically from the API in the Hero, Transformation, and Footer sections, so those will automatically reflect whatever the API returns. The six hardcoded copy instances across layout.tsx, TransformationSection, CTASection, MakerSection, and BenefitsSection now consistently use "strategievorming" and "categoriestrategie" language throughout.