Nieuwe website Storybooks & Insights — plan (IA + content-toewijzing)

Status 2026-07-22. Besloten: nieuwe site vanaf leeg vel (oude Astro-site in site/ blijft alleen referentie), meerdere pagina’s, hosting op Cloudflare Pages. Stack besloten (2026-07-23): Astro (shell + content) + React-islands (Tailwind + Framer Motion) voor de interactieve/visuele stukken — snel & leesbaar waar het verhaal telt (Systeem-1), rijk waar het indruk moet maken (rollen-explorer). Nog open: branding-tokens (accentkleur). Scaffolden pas op Marks expliciete go. Noot: de visuele lat is een kwestie van design-doel + preview-loop, niet van de stack.

Dit document is de brug tussen de denklaag (de *.md in de root) en de te bouwen site: het zegt per pagina wélk verhaal erop komt en uit welk brondocument dat komt. Bouwen = deze IA vullen met de bestaande teksten, niet opnieuw bedenken.

Domeinen & redirects

• Primair: storybooksandinsights.com (matcht de merknaam letterlijk).
• 301-redirect → primair: storybooks-and-insights.com, insights-and-storybooks.com, insightsandstorybooks.com.
• Koppelen via Cloudflare zodra de eerste build live kan; auto-deploy vanaf main.

Informatiearchitectuur (v1 — 4 pagina’s)

Volgorde volgt de Golden-Circle-regel uit het positioneringsdoc: open met why, demonstreer how, bewaar what voor de doorvragers (visie-commercieel-positionering.md §6).

Vertelstructuur — de zoom-ladder (simpel → diep)

Principe: de site vertelt SI zoals SI een cijfer vertelt — één moeiteloze boodschap eerst, diepte één klik weg, grondslag voor wie graaft. Dat is het product-zoommodel (Insight → Storybook, met de grondslag/verdieping ín het Storybook) toegepast op het verhaal, en het is zelf-bewijzend: een site die moeiteloos binnenkomt demonstreert precies wat we verkopen (theoretisch-fundament-systeem1.md §8). Elk niveau is af op zichzelf (je mag stoppen) én nodigt uit naar het volgende (je mag doorklikken) — de empowerment/engagement-balans, nu in de IA zelf.

Wireframe — Home (Z0 → Z1 → instap Z2)

┌──────────────────────────────────────────────────────────┐
│  [eyebrow mono]  STORYBOOKS & INSIGHTS                     │
│                                                            │
│   Cijfers overtuigen niemand. Verhalen wel.        ← Z0    │
│   Iedereen die beslist, verdient het om écht              │
│   geïnformeerd te zijn.        [ Werkgesprek van 1 uur → ] │
├──────────────────────────────────────────────────────────┤
│   Van cijfers → boodschap, in twee stappen:        ← Z1    │
│   [ Insight ]  →  [ Storybook ]                            │
│    signaal         onderzoek + grondslag (erin)            │
├──────────────────────────────────────────────────────────┤
│   Voor twee mensen:                                ← Z1    │
│   • wie beslist (ontvanger): "ik snap 't en beslis zelf"  │
│   • wie de cijfers maakt (expert): "mijn boodschap landt" │
├──────────────────────────────────────────────────────────┤
│   Ontmoet de assistent → [ naar de rollen-explorer ]  ← instap Z2 │
└──────────────────────────────────────────────────────────┘

Wireframe — “Hoe het samenhangt” (Z3 — nieuw t.o.v. de bestaande IA)

Het architectuurbeeld dat recent is gebouwd (noordster + twee pijlers + IT) ontbrak nog in dit plan. Toon het als één beeld met progressive disclosure — instap simpel, “toon grondslag” voor de spanning eronder:

        ▲  EMPOWERMENT  (noordster — de mens sterker, nooit vervangen)
        │   ontvanger · expert · organisatie · IT
   ┌────┴─────────────────────┐
   │  GOVERNANCE  ×  ENGAGEMENT│              [ toon grondslag ▾ ]
   │  veilig        levend      │
   │  verdedigbaar  (boodschap = hart)        → "waarom niet naast maar
   └───────────────────────────┘                boven?" manipulatie vs kooi (Z4)

Bron: financiele-analyse/verkenning/positioneringsfundament-hero-en-empowerment.md (“De structuur”) + engagement-als-kernpijler.md.

Mapping zoom → pagina

Z0-1 → Home · Z2 → Product (rollen-explorer) · Z3 → Werkwijze / Product-verdieping (de architectuur) · Z4 → denklaag-links (voor wie doorklikt). De rollen-explorer hieronder is dus zoom 2.

De rollen-explorer — interactief hart (rollen + “voor wie”)

Beslissing 2026-07-22 (Mark). De rollen van de AI-assistent én voor wie elke rol is moeten duidelijk op de site staan, als interactieve bollen die groter worden bij aanklikken en de bezoeker meenemen in die rol. Dit wordt het herkenbare, deelbare centerpiece.

Bron van waarheid: financiele-analyse/verkenning/ai-rollen-profielen-en-taken.md — 8 rollen (5 kern + 3 enablement), elk met precies de velden die een bol nodig heeft: naam · voor wie · pitch · taken · grens. Signaleren is bewust géén rol maar een mechanisme (aparte, kleinere visuele behandeling — geen bol).

Plaatsing: centerpiece van de Product-pagina. Groeit door tot een eigen pagina (“De assistent” / “Rollen”) als het te groot wordt voor Product.

De acht bollen, gegroepeerd op held (zo komt “voor wie” vanzelf naar voren):

Interactie (concept, stack-onafhankelijk):

1. Rust: acht cirkels, gegroepeerd/gekleurd per held; grootte ~ prominentie (De Gids en De Bouwer het grootst — dat zijn de held-rollen). Elke bol toont naam + één-regel voor wie.
2. Aanklikken → groeien: de bol schaalt op en “neemt over” (andere bollen dimmen/wijken). In de vergrote staat verschijnt de rol-kaart: pitch → wat ‘ie voor je doet (taken) → de grens (bewust tonen: kaders = vertrouwen, visie-commercieel-positionering.md §7/§8).
3. “Meenemen in de rol”: korte, gescripte mini-flow per rol — bv. De Gids laat een Insight binnenkomen → doorvraag → grondslag-op-verzoek; De Bouwer toont vraag → query → verifiëren → aansluiten. Kan v1 statisch (stappen/slides), later een echte demo-tegel.
4. Sluiten/andere bol: terug naar de constellatie.

Toon-regels (uit de denklaag): open met de uitkomst/pitch, niet met techniek; de grens is een feature, geen disclaimer (ai-rollen-profielen-en-taken.md “twee assen / vangrails”). Op de publieke site tonen we de klant-facing rollen het sterkst (De Gids, De Bouwer, De Redacteur, De Archivaris); enablement mag kleiner/secundair.

Toegankelijkheid & fallback: de bollen zijn progressive enhancement — zonder JS moet de inhoud van elke rol gewoon als tekstsectie leesbaar zijn (SEO + a11y). Klikbaar = ook toetsenbord-focusbaar; respecteer prefers-reduced-motion (geen dwingende animaties).

Content-toewijzing (denklaag → pagina)

Home

• Manifest-why + hero-zin → verhaal-storybrand-strategie.md (§6 manifest-arc), hero-zinnen-bank.md
• Insight → Storybook → verdieping (het drie-zoom-model) → visie-commercieel-positionering.md §2
• Teaser 4-vs-50 + CTA “werkgesprek van een uur, één concrete vraag” → §3 / §8
• Golden-Circle-frame bepaalt de paginavolgorde → §6

Product

• De drie zoomniveaus uitgelegd (Insight/Storybook/verdieping) → §2
• De rollen-explorer (interactieve bollen, zie eigen sectie) → ai-rollen-profielen-en-taken.md
• De bedrijfsscan (10–15 analyses installatiemarkt, bundeling) → §2 (let op: beachhead, geen identiteit)
• Geloofwaardigheidslaag “maar klopt het ook?” — RGS, BW2/RJ, IBCS, aansluiting op grootboek, restpost, auditfiles → §7 (batterij: alleen tonen wie doorvraagt)

Werkwijze

• Analyse-eerst, de data volgt — begin bij de vraag die een verhaal vertelt, niet bij de databerg of losse lijstjes; zo ook een nieuwe markt aanvliegen (top-down) → strategie-vs-powerbi-en-ai-vertrouwen.md §6, positioneringsdoc §3
• 4-vs-50-economie, “goed genoeg = budgetuitkomst” → §3
• Tussenpersoon vooruit gecodeerd; data engineer verhuist naar kwaliteitspad (= IT op de achtergrond, hardening) → §3
• De architectuur (zoom 3): empowerment-noordster → governance × engagement → mechanismen; IT/hardening → financiele-analyse/verkenning/positioneringsfundament-hero-en-empowerment.md (“De structuur”, “Waar zit IT”) + engagement-als-kernpijler.md
• Controller wordt belangrijker (van produceren naar verantwoorden) → §2, §5
• Financieel adviseur opgereedschapt, niet vervangen → §4
• Kaders/governance zichtbaar maken (het vertrouwen-argument) → §7, strategie-vs-powerbi-en-ai-vertrouwen.md

Over ons

• Softwarebedrijf, geen consultancy → §4
• Relatie tot BoostIn = scheiden, niet afscheiden → aansluiting-boostin-partnermodel.md, README-herkomst
• OPEN: onder welke entiteit S&I pitcht/factureert (open-punten.md, 2026-07-03 vehikel-vraag heropend)
• Persoonlijke why / Mark → Personal Branding/waarom-ik-dit-doe.html, bio-ankers.md

Mobiel — mobile-first (harde eis)

De site moet op smartphone net zo goed werken als op desktop — sterker: mobiel is waar de zoom-ladder het hardst telt (klein scherm → boodschap eerst, diepte op tap).

• Responsive over alle pagina’s; ontwerp mobile-first, desktop is de uitbreiding (niet andersom).
• Rollen-explorer op touch: geen hover-afhankelijkheid — tap om te groeien; op klein scherm mag de bollen-constellatie inklappen tot een gestapelde lijst / carousel per held. De no-JS tekst-fallback (a11y/SEO) is meteen de mobiel-veilige basis.
• Performance op mobiel = Systeem-1: snelle first paint, grote tik-doelen, hoog contrast, prefers-reduced-motion respecteren. Astro’s lichte JS + islands helpen hier direct (een zware SPA zou mobiel juist straffen — extra reden voor de gekozen stack).

Toon — business voorop, geen tech-show

Over de hele site (en elke uiting): de business staat voorop, niet de techniek. Het ís tech (AI) en we verkopen software — maar we verkopen de uitkomst (de boodschap landt, betere beslissingen, betrokkenheid), niet de tech eronder. Verkoop de auto, niet de batterij (visie-commercieel-positionering.md §6); de business gaat voorop (hardening-visie §1). Praktisch:

• Open met de uitkomst/boodschap, nooit met “AI / model / pipeline”.
• Spreek de taal van de bestuurder/controller, niet van de engineer; jargon = strain (Systeem-1 §7).
• De tech (batterij / governance / hardening) is de geruststelling ónder de belofte — op verzoek (zoom 3-4), niet de kop.
• Geldt ook voor de rollen-explorer: toon wat ‘ie voor je doet, niet hoe geavanceerd ‘ie is.

Branding

• Licht thema; petrol als voorlopig accent; eyebrow-labels in monospace (technischer).
• Logo & merkidentiteit: zie merk-en-logo-brief.md — hoofdboodschap-anker (focus op de boodschap, niet de cijfers), do’s/don’ts, en een plak-klare AI-prompt + Canva-starter (telefoon-vriendelijk).
• ⚠️ Op te lossen inconsistentie: het LinkedIn-marketingplan noemt accent-blauw #0a5cb3; de repo-beslissing noemt petrol. Eén accentkleur kiezen en centraal vastleggen (was in de oude site site/src/styles/tokens.css) vóór de bouw.

Wat blokkeert de bouw

1. Tech-stack → besloten: Astro + React-islands + Tailwind + Framer Motion (2026-07-23). Rijke interactie/visueel = React-island (o.a. rollen-explorer); content statisch in Astro. Visuele lat vraagt een design-doel + preview-loop (niet de stack).
2. Branding-tokens — definitieve accentkleur + type-stack (petrol vs blauw #0a5cb3).
3. Over ons is deels afhankelijk van de entiteit-vraag (heropend) — kan met een neutrale herkomst-tekst live zolang de entiteit niet vast is.

Wat kan vast vooruit (zonder stack)

• Deze IA + de teksten per pagina uit de denklaag destilleren (copy-deck).
• De rollen-explorer als copy-deck uitschrijven: per bol de 5 velden (naam · voor wie · pitch · taken · grens) + de “meenemen”-mini-flow — direct te vullen zodra de stack er is.
• Cloudflare-project + domein/redirect-configuratie voorbereiden (op Marks go).