Maak een dynamische landingspagina voor de studio.
== API endpoint ==
Haal alle content op met fetch("https://caistudio.nl/api/v1/landing-page/st_50144e14e24476433dfa7593da880d13") bij page load.
Toon een loading state terwijl de data wordt opgehaald. Render NIETS uit hardcoded waarden — al het zichtbare moet uit deze API komen.
== Response shape ==
{
"name": string,
"title": string | null,
"valueProposition": string | null,
"description": string | null,
"imageUrl": string,
"logoUrl": string | null,
"isFree": boolean,
"price": string | null, // pre-formatted euro amount, e.g. "29.95"
"trialPeriodDays": integer | null,
"recurringInterval": string, // "monthly" | "yearly" | "weekly" | …
"checkoutUrl": string,
"checkoutEnabled": boolean,
"ownerName": string,
"ownerBio": string | null,
"assistants": [
{ "name": string, "description": string | null, "imageUrl": string }
],
"legalDocuments": [
{ "label": string, "url": string }
],
"theme": {
"accent": string, // hex, e.g. "#f43f5e"
"accentHover": string,
"accentDark": string,
"scale": { "50": string, "100": string, …, "900": string, "950": string }
} | null
}
== Vereiste secties (in deze volgorde) ==
data.name, data.title, data.valueProposition, data.imageUrl / data.logoUrl, en een prominente CTA naar data.checkoutUrl.data.assistants als kaarten met name, description, imageUrl. Aantal teksten zoals "X AI-assistenten" gebruiken data.assistants.length — NOOIT een vast getal.data.ownerName (en data.ownerBio indien aanwezig).data.description.data.description en data.assistants.data.checkoutUrl.data.legalDocuments als links (label + url, open in nieuw tabblad).== Regels ==
data.assistants.length, NOOIT een vast getal. Ook geen "7 AI-assistenten" o.i.d. — altijd dynamisch.data.isFree === false. Format: €{data.price} (data.price is al pre-formatted) gevolgd door een label op basis van data.recurringInterval ("monthly" / "yearly" / etc.). Toon proefperiode alleen als data.trialPeriodDays !== null.data.checkoutUrl, maar ALLEEN als data.checkoutEnabled === true. Anders toon "Binnenkort beschikbaar" als placeholder.data.theme.accent toe op alle CTA / interactieve elementen via CSS variables of inline style. Gebruik data.theme.scale (key/value: shade-naam → hex) voor achtergronden, borders en accenten. data.theme kan null zijn — gebruik dan een neutrale default (slate/zinc).@import 'shadcn/tailwind.css' in globals.css — dit veroorzaakt "Failed to load shadcn from /app/globals.css" errors. Gebruik alleen inline Tailwind CSS classes.Now let me read the globals.css to understand the current theme setup:
Now I have everything I need. Let me build the full dynamic landing page with all required sections:
Now let me write the main landing page client component and the page:
Now update the layout metadata and globals.css for a dark, modern AI-studio look:
Now update globals.css for the dark AI studio theme:
De dynamische landingspagina is klaar. Hier is een samenvatting van wat er gebouwd is:
9 volledig dynamische secties — alle tekst, kleuren, namen, aantallen en links komen uitsluitend uit de API response. De pagina haalt data op via fetch() bij page load, toont een skelet-loading-state, en handelt fouten op met een retry-knop.
Theming: het data.theme.accent hex-kleur wordt via inline styles doorgegeven aan elk interactief element (CTA-knoppen, badges, borders, hover-states), met de volledige data.theme.scale als achtergrondpalet. Als theme null is, valt de pagina terug op zinc-neutraal.
Regels gehonoreerd: aantallen assistenten zijn altijd data.assistants.length, de prijs wordt alleen getoond als isFree === false, de checkout-knop toont "Binnenkort beschikbaar" als checkoutEnabled === false, en de footer rendert alle legalDocuments dynamisch als links.
# Crisis Kompas — Herschreven landingspagina-tekst Sectie voor sectie te plakken in de builder. In Kitty's stem, gericht op de echte doelgroep (crisis- en communicatiemanagers in zorg, ziekenhuizen en woningcorporaties). Alle generieke AI-marketing eruit. "Crisis Center" en "Chris" overal vervangen door "Crisis Kompas" en "Kyra". Echte doelgroep-pijn in plaats van standaard "te veel AI-tools". --- ## 1. HERO-SECTIE **Eyebrow (klein, boven H1):** CrisisProfs presenteert **H1:** Rust onder druk begint bij voorbereiding. **Subhead:** Crisis Kompas is het complete AI-crisisteam voor zorginstellingen, ziekenhuizen en woningcorporaties. Vijf specialisten die 24/7 met je meedenken. Een gids die je rondleidt, en vier collega's die elk hun vak verstaan. **CTA-knop (oranje):** Maak kennis met je team ↓ **Status-tag:** Binnenkort beschikbaar — vanaf €2.000 per jaar --- ## 2. SECTIE: HET TEAM **Eyebrow:** Crisis Kompas **H2:** Vijf collega's. Eén complete crisispraktijk. **Subhead:** Elke assistent heeft een eigen vakgebied. Samen dekken ze de hele crisiscyclus — van scan tot plan, van training tot evaluatie. Iedereen begint bij Kyra. ### Vijf kaarten in deze volgorde: **Kaart 1 — Kyra jouw Crisis Kompas** Tag onder naam: De gids Tekst: "Kyra is je ingang. Ze beantwoordt je vragen, denkt met je mee, en verwijst je naar de juiste specialist. Begin hier." **Kaart 2 — Sam de Scanner** Tag onder naam: De diagnose Tekst: "Geeft in 15 minuten een eerlijk beeld van hoe crisisgereed jullie organisatie werkelijk is. Bestuursrijp rapport, drie niveaus, geen schijnzekerheid." **Kaart 3 — Pleun de Planmaker** Tag onder naam: Het plan Tekst: "Bouwt jullie integrale crisisplan met governance, mandaat en taakkaarten. Bestuurlijk-toetsend. Levert documenten waar het MT mee verder kan." **Kaart 4 — Tess de Trainer** Tag onder naam: Het oefenen Tekst: "Krijgt het plan in mensen. Trainingen, oefeningen, e-learning en onboarding — op maat van jullie organisatie en sector." **Kaart 5 — Eva de Evaluator** Tag onder naam: De verbetering Tekst: "Zet incidenten en oefeningen om in concrete verbeteracties met eigenaar en deadline. Verbeteringen die ook echt worden opgepakt." --- ## 3. SECTIE: DE MAKER **Eyebrow:** Achter Crisis Kompas **H2:** Gebouwd door CrisisProfs. **Tekst:** CrisisProfs werkt al jaren aan crisismanagement in de zorg, bij ziekenhuizen en woningcorporaties. Op de werkvloer, in de bestuurskamer, en bij audits. De methode achter Crisis Kompas is in die praktijk ontwikkeld — door incidenten, oefeningen, evaluaties, en gesprekken met bestuurders, MT-leden en crisisteams. Crisis Kompas brengt die methode binnen handbereik. 24/7. Op de plek waar jij werkt. **Drie kleine vlakken eronder:** ⚡ Directe toegang na aanmelding 🔒 Veilig en privé — jouw gesprekken blijven van jou 🎯 Vijf specialisten, één samenhangend team --- ## 4. SECTIE: HERKEN JIJ DIT? **Eyebrow:** Van probleem naar oplossing **H2:** Herken jij dit? **Intro-tekst:** Crisis is voor de meeste van jullie een nevenportefeuille. Naast HR, communicatie, kwaliteit, of facilitair. Er ligt te veel op je bord, en crisis krijgt zelden de tijd die het verdient — tot er iets gebeurt. Of tot de RvT erom vraagt. ### Twee kolommen tegenover elkaar: **Kolom links — Zonder Crisis Kompas:** - Ons crisisplan is verouderd. Ik weet niet waar te beginnen. - De RvT vraagt steeds vaker hoe we ervoor staan. Ik moet een antwoord hebben. - Een collega-instelling heeft een incident gehad. De bestuurder kijkt mijn kant op. - Crisis is portefeuille drie van zes. Ik heb geen tijd om dit goed te doen. **Kolom rechts — Met Crisis Kompas:** - Een team van vijf specialisten dat 24/7 met je meedenkt. - Concrete uitkomsten: rapporten, plannen, taakkaarten, evaluaties. - Bestuursrijp werk, niet alleen advies. - Continuïteit. Één plek waar alles samenkomt. --- ## 5. SECTIE: WAAROM CRISIS KOMPAS **Eyebrow:** Waarom Crisis Kompas? **H2:** Geen losse tools. Eén werkende praktijk. **Subhead:** Crisis Kompas is geen verzameling AI-features. Het is een complete crisismanagement-praktijk in de methode van CrisisProfs. ### Zes kaarten: **1. Compleet voor de hele cyclus** Van scan tot plan, van training tot evaluatie. Vijf specialisten die elkaars werk versterken. **2. In de methode van CrisisProfs** Geen generieke AI, wel de aanpak die in de praktijk is ontwikkeld. Met BOB, OTO, en het 7-stappenplan. **3. 24/7 beschikbaar** Niet als meldkamer. Wel als gids die met je meedenkt op de momenten dat jij tijd hebt — woensdagavond, tussen twee meetings, voor je RvT-vergadering. **4. Sector-specifiek** Voor zorginstellingen, ziekenhuizen en woningcorporaties. Met aandacht voor sector-specifieke wetgeving, risico's en taal. **5. Veilig en privé** Jouw gesprekken blijven van jou. Geen verkoop van data, geen delen met derden. **6. Geen tech-drempel** Gewoon chatten in normaal Nederlands. De assistenten passen zich aan jouw stijl aan, niet andersom. --- ## 6. SECTIE: WAT GEBRUIKERS ZEGGEN **OPTIE A (aanbevolen tot er echte testimonials zijn):** Sectie helemaal vervangen door een quote van Kitty. **Eyebrow:** Het verhaal achter Crisis Kompas **H2:** "Het grootste risico is schijnzekerheid." **Quote (in Kitty's stem):** "De meeste organisaties hebben een plan. Maar plannen werken alleen als mensen weten wat ze moeten doen, en als ze het hebben geoefend. Crisis Kompas is gebouwd om die kloof te dichten — niet door een plan op een schap, maar door een werkende praktijk die met je meedenkt." **Ondertekening:** Kitty Legeland — oprichter CrisisProfs **OPTIE B (als er pilots lopen):** Vervang door één of twee echte quotes uit de pilot-fase. Eerlijke namen, eerlijke organisaties, eerlijke woorden. Liever twee echte dan zes fake. --- ## 7. SECTIE: VEELGESTELDE VRAGEN **H2:** Veelgestelde vragen **Intro:** Staat je vraag er niet bij? Stuur een bericht naar CrisisProfs. ### Acht relevante FAQ's: **Wat is Crisis Kompas precies?** Crisis Kompas is een AI-crisismanagementteam dat 24/7 in jouw organisatie aanwezig is. Vijf specialisten: Kyra als gids, Sam voor scan, Pleun voor plan, Tess voor training en oefening, Eva voor evaluatie. Samen vormen ze één werkende praktijk in de methode van CrisisProfs. **Vervangt dit ons bestaande crisismanagement?** Nee. Crisis Kompas versterkt wat er al is. Het brengt jullie plan tot leven, dwingt keuzes af die nu open staan, en zorgt dat verbeteracties ook echt worden opgepakt. Jullie crisisteam blijft van jullie. **Voor welke sectoren werkt dit?** Zorginstellingen, ziekenhuizen en woningcorporaties. Met aandacht voor sector-specifieke wetgeving (Wkkgz, Wlz, Woningwet, Wet Defensiegereedheid) en sector-specifieke risico's. **Hoe lang duurt het voordat ik waarde heb?** Binnen 15 minuten. Sam levert in een kwartier een eerlijke scan van jullie crisisparaatheid. Daarmee weet je waar je staat en wat de eerste stap is. **Wat kost het?** Vanaf €2.000 per jaar voor toegang tot alle vijf de assistenten, met onbeperkt gebruik. Geen verborgen kosten. **Is mijn data veilig?** Ja. Jouw gesprekken blijven van jou. We verkopen geen data en delen niets met derden. **Wat als ik ergens vastloop?** Stel je vraag aan Kyra. Zij denkt mee en verwijst je door waar nodig. Als je daarna nog vastloopt, kun je CrisisProfs direct bereiken. **Wie zit er achter Crisis Kompas?** CrisisProfs heeft Crisis Kompas gebouwd op basis van jaren ervaring in crisismanagement bij zorginstellingen, ziekenhuizen en woningcorporaties. De methode is in de praktijk ontwikkeld — niet aan een tekentafel. --- ## 8. FINAL CTA **Eyebrow:** Klaar om te beginnen? **H2:** Begin bij Kyra. Of bij je vraag. **Subhead:** Crisis Kompas is binnenkort beschikbaar. Schrijf je in en krijg directe toegang zodra het live gaat. **CTA-knop (groot, oranje):** Schrijf me in **Onder de knop, klein:** - €2.000 per jaar — geen verborgen kosten - Altijd opzegbaar - Direct toegang na aanmelding - Privé en veilig --- ## DRIE BESLISPUNTEN VOOR JOEP **1. Testimonials.** De huidige testimonials zijn duidelijk fake (freelance copywriter, marketingmanager, ZZP'er) én niet de doelgroep. Ik adviseer optie A: vervangen door één Kitty-quote tot er echte pilot-feedback is. Mensen die crisis serieus nemen zien fake testimonials direct. Vertrouwensschade. **2. "1000+ tevreden gebruikers" en "4.9/5".** Deze metrics zijn ook fake (Crisis Kompas is binnenkort beschikbaar, kan geen 1000+ gebruikers hebben). Weghalen. Vervangen door eerlijke status: "In ontwikkeling — eerste pilots starten in [maand]" of vergelijkbaar. **3. Prijsformattering.** Huidige notatie "€2,000,00" is foute Nederlandse notatie. Moet zijn: "€2.000" of "€2.000,-" of "€2.000 per jaar". Punt als duizendscheiding, komma voor cent. Voor whole numbers liever zonder cent-notatie. --- ## VISUELE RICHTLIJNEN (uit eerdere Kitty-feedback) - **Achtergrond:** witte basis, geen donkere Bordeaux of bruin - **Accentkleur:** oranje, passend bij CrisisProfs-logo - **Typografie:** minimaal 16-18px body, ruim contrast - **Beelden:** diverse mensen (gemengde etniciteit), dynamisch, professioneel maar menselijk, herkenbare zorgomgeving, gewone dagelijkse kleding met af en toe een verpleegkundige in wit - **Witruimte:** veel. Laat het ademen. - **Afzender overal:** CrisisProfs. Niet Kitty Legeland persoonlijk. --- ## WAT NU CONCREET 1. Plak deze tekst sectie voor sectie in de builder 2. Beslis over testimonials (optie A of B) 3. Verwijder fake metrics 4. Corrigeer prijsformattering naar Nederlandse notatie 5. Vervang visuals volgens richtlijnen (lichte achtergrond, diverse echte beelden) 6. Test de pagina op leesbaarheid en doelgroep-fit voordat hij live gaat
Laat me eerst alle huidige componenten lezen voordat ik wijzigingen maak.
Nu heb ik een volledig beeld. Ik ga alle secties updaten met de nieuwe copy. Laat me beginnen met alle wijzigingen parallel:
Nu de globals.css updaten naar een lichte witte basis en de layout.tsx bijwerken:
Alle secties zijn bijgewerkt. Hier een korte samenvatting van de wijzigingen:
Visuele richting omgedraaid: van donker naar wit/licht, met oranje accent (uit de API) op alle interactieve elementen, zorgvuldige witruimte en lichte kaartachtergronden zoals gevraagd.
Copy sectie voor sectie vervangen: Hero heeft nu eyebrow "presenteert", de juiste subkop en CTA-tekst; Assistenten toont de eerste als uitgelichte "gids"-kaart met de rest als grid met rol-tags (De gids / De diagnose / etc.); Maker-sectie bevat de CrisisProfs-beschrijving en de drie vertrouwens-indicators.
Probleem/Transformatie, Voordelen en FAQ zijn volledig herschreven met de Crisis Kompas-specifieke tekst — inclusief de BOB/OTO/7-stappenplan vermelding, sector-specifieke wetgeving en de acht echte FAQ's.
Social Proof: de zes nep-testimonials en de fake "1000+ gebruikers / 4.9/5" metrics zijn vervangen door de Kitty-quote (optie A) plus een eerlijk "In ontwikkeling"-statusblok. De prijsnotatie is gecorrigeerd naar €{data.price} per jaar zonder centen.