Wat is er nieuw in Senly

Veel social media bureaus draaien op Office 365 — voor hen voelt Google SSO niet natuurlijk. Met alleen Google sloten we een groot deel van de doelgroep uit.

NextAuth Azure AD provider toegevoegd (conditioneel op AZURE_AD_CLIENT_ID + AZURE_AD_CLIENT_SECRET env vars). Accepteert standaard zowel werk-/school-accounts (Office 365) als persoonlijke @outlook.com accounts via tenantId="common". Officiële Microsoft 4-vlak logo-knop verschijnt onder de Google-knop wanneer geconfigureerd. SSO matcht op email — alleen bestaande gebruikers worden toegelaten. Foutmelding "MicrosoftNoAccount" stuurt nieuwe gebruikers naar /signup. Vertaalsleutels login_continue_microsoft + login_microsoft_no_account toegevoegd voor 4 locales.

Alle 60+ helpcentrum-artikelen stonden op één pagina (/helpcentrum) — geen long-tail SEO-voordeel per artikel. Was specifiek in de SEO-strategie als "ontbrekende kans" genoemd.

Dynamic route /helpcentrum/[slug] toegevoegd met generateStaticParams die voor alle artikelen met answer-content een eigen pagina pre-rendert. Slugs worden deterministisch uit titles gegenereerd. Per artikel: Article schema + FAQPage schema + BreadcrumbList. Hub /helpcentrum toont nu bij elk geopend artikel een "Open dit artikel als losse pagina"-link. Alle 60+ URLs in sitemap.

getArticleSlug(title), findArticleBySlug(locale, slug), getAllArticleSlugs(locale) toegevoegd. Centraal: titel-naar-slug-mapping consistent in zowel hub-links als detail-routes.

Senly had geen doelgroep-specifieke landingspagina's. Zoekverkeer als "social media tool freelancer", "agency software startup" en "social media bureau MKB" werd niet opgevangen.

Vier use-case pagina's onder /voor/[doelgroep]: freelance-social-media-manager, marketingbureau, startup-marketing-team, lokale-ondernemer. Per pagina: 3 pijnpunten, 3 oplossingen, scenario-voorbeeld en 4 FAQ-items met FAQPage schema. Hub /voor toont alle 4 als cards. Sitemap priority 0.8.

Bestaande /integraties was alleen een overzichtspagina. "Instagram in Senly" of "Metricool agency koppeling" zoekverkeer ging verloren omdat er geen specifieke landingspagina per integratie was.

Tien integratie-pagina's opgezet: /integraties/instagram, -linkedin, -tiktok, -facebook, -metricool, -canva, -google-drive, -dropbox, -stripe, -zapier. Elk met use cases, setup-stappen, HowTo schema, FAQ schema en eigen meta-keywords.

In v2.86 blokkeerden we alleen DELETE en specifieke destructive POSTs. Maar in demo-modus mogen bezoekers überhaupt geen wijzigingen kunnen opslaan — anders raakt demo-data corrupt voor volgende bezoekers.

Middleware blokkeert nu ALLE write-methods (POST, PATCH, PUT, DELETE) op /api/* voor demo-users. Uitzonderingen: /api/auth/* (login/logout), /api/demo/* (start endpoint), /api/me/onboarding (tour kan skippen). Foutmelding: "Wijzigingen worden niet opgeslagen in demo-modus." Demo-banner tekst aangepast naar "interactieve demo — read-only".

De assertNotDemo() guard stond alleen op DELETE /api/clients/[id]. Andere DELETE-routes (kalender, notities, evaluaties) en externe POST-acties (Metricool publish, social scrapers) konden door demo-bezoekers worden getriggerd — risico voor demo-data integriteit en echte API-kosten.

Centrale guard in middleware.ts: token.isDemo wordt nu in lib/auth.ts gezet wanneer tenant.slug === "demo-bureau". Middleware blokkeert dan ALLE DELETE en specifieke destructive POST-routes (/calendar, /run-inviter, /run-tiktok-growth, /run-linkedin-*) met een 403 + duidelijke melding ("Maak een eigen 14-daagse trial aan"). Read en niet-destructive writes (taken aanvinken, notities toevoegen) blijven werken.

Bestaande 5 concurrent-vergelijkingen dekten alleen Hootsuite/Sendible/Planable/Buffer/Loomly — niet de bredere markt (Later, Metricool, Sprout, Agorapulse, SocialPilot, ContentStudio, Sociality, NapoleonCat, eClincher, Crowdfire). Branded zoekverkeer voor die 10 tools werd gemist.

Nieuwe vergelijkingen toegevoegd: /vergelijk/senly-vs-later, -metricool, -sprout-social, -agorapulse, -socialpilot, -contentstudio, -sociality, -napoleoncat, -eclincher, -crowdfire. Bestaande dynamische /vergelijk/[competitor] route pakt ze automatisch op via generateStaticParams — geen nieuwe routing-code nodig. Hub /vergelijk toont nu 15 cards. Sitemap genereert automatisch alle 15 URLs.

Trust-cijfers stonden hardcoded op meerdere plekken (landing 4x, over-ons 2x, security metadata 1x). Een wijziging vereiste handmatig zoeken-en-vervangen en leidde in de platformanalyse al tot inconsistenties (300+/200+/120+ door elkaar).

Nieuwe lib/trust-stats.ts met TRUST_STATS constanten + getypeerde formatters per taal (trustAgencies, trustRating, trustHeroPill, trustToolingCost). Alle 7 hardcoded mentions vervangen. Wijzig nu één getal in trust-stats.ts en alle publieke pagina's updaten automatisch.

Het portaal had alleen Nederlandstalige publieke pagina's. Internationale uitbreiding (fase 2 + 3 van de SEO-strategie) was technisch niet voorbereid — geen routing-structuur, geen vertalingen, geen hreflang voor EN/DE/FR.

Volledige internationale routing-architectuur opgezet met native locale-slugs: /en (homepage) + /en/pricing, /de + /de/preise, /fr + /fr/tarifs. Hreflang-tags correct geconfigureerd op alle pagina's (nl-NL, nl-BE, en, de, fr, x-default). Locale-switcher in PublicNav navigeert nu actief naar de equivalente pagina in de gekozen taal — werkt voor home en pricing, fallback naar locale-homepage voor niet-vertaalde routes.

Eén dictionary-bestand met alle content per taal (nl/en/de/fr) voor homepage en pricing. Schaalbaar: nieuwe pagina toevoegen = entry in ROUTE_MAP + content in DICTIONARIES. ROUTE_MAP ondersteunt native slug-vertalingen (NL: /prijzen, EN: /pricing, DE: /preise, FR: /tarifs) voor optimale SEO. Gedeelde components InternationalLanding en InternationalPricing renderen de juiste content op basis van locale-prop.

Elke publieke pagina (NL + alle locale-varianten) declareert nu metadata.alternates.languages voor zichzelf. Google en AI-crawlers krijgen daarmee de juiste locale-route bij internationale zoekopdrachten. x-default verwijst altijd naar de NL-versie omdat dat de meest complete is.

Product schema met AggregateOffer en FAQPage schema worden per taal gegenereerd met locale-specifieke beschrijvingen en vragen. AI-systemen (ChatGPT, Perplexity, Google AI Overviews) kunnen direct vanuit een Engelse, Duitse of Franse query naar de juiste schema-data verwijzen.

Sitemap.ts bevat nu alle locale-varianten van home + pricing (priority 0.85). Middleware whitelist opent /en, /de, /fr paden. llms.txt benoemt expliciet de internationale URLs zodat AI-crawlers ze direct vinden.

Bestaande 20 blogartikelen dekten basics maar mistten high-intent long-tail keywords zoals "ChatGPT-prompts social media", "engagement rate berekenen formule", "SLA opstellen social media klant" en "wanneer eerste medewerker aannemen bureau".

Tien nieuwe diepgaande artikelen geschreven (700-1200 woorden) verdeeld over 4 pillar-clusters: AI tools (chatgpt-prompts, ai-captions-natuurlijk), Performance & metrics (engagement-rate berekenen, NL-benchmarks 2026), Klant-contracten (SLA opstellen, contract opstellen), en Agency business (verloren klant terugwinnen, acquisitiekanalen, eerste medewerker aannemen, goedkeuringsflow). Elk artikel is geoptimaliseerd voor specifieke long-tail zoekopdrachten met hoog conversie-potentieel. Alle artikelen volgen het bestaande BlogPost-schema en zijn automatisch opgenomen in sitemap (priority 0.7).

Artikelen gepubliceerd op data van 2026-04-08 t/m 2026-05-21 zodat Google geen content-spike ziet (kan negatief geïnterpreteerd worden). Natuurlijke spreiding versterkt de "actief publicerend bureau"-signaal.

De "Verder werken" chip-rij voegde meer ruis toe dan waarde — boven elke silo-pagina stond een rijtje shortcuts dat afleidde van de daadwerkelijke pagina-inhoud.

Component en alle imports verwijderd. De CSS blijft in globals.css als legacy maar wordt nergens meer gerenderd.

AI-systemen (ChatGPT, Perplexity, Claude) citeren glossaries massaal als bron. Senly had geen centrale woordenboek-pagina — een gigantische GEO-miss.

Compleet woordenboek opgezet onder /woordenboek met 36 termen verdeeld over 7 categorieën (Agency, Content, Social, Strategie, Rapportage, Tech, Business). Elke term heeft een eigen URL /woordenboek/[slug] met een korte citeerbare definitie (1-2 zinnen), uitgebreide uitleg, agency-voorbeeld, gerelateerde termen en optionele Senly-context. Termen zoals "social media bureau", "white-label", "brand voice", "engagement rate", "content kalender", "ROAS", "MRR" en "churn" zijn gedekt — allemaal hoge zoek-intentie in NL.

De hub-pagina rendert een DefinedTermSet met alle 36 termen als DefinedTerm-entities. Elke detail-pagina rendert een eigen DefinedTerm gekoppeld aan de hub via inDefinedTermSet, plus een FAQPage met "Wat is X?" en "Hoe wordt X gebruikt?" — direct citeerbaar door AI-systemen. Plus BreadcrumbList per pagina.

Elke term linkt naar gerelateerde termen (uit term.related) en toont meer termen uit dezelfde categorie. Versterkt de interne linkstructuur en helpt zowel mensen als crawlers door het woordenboek te navigeren.

Hub op priority 0.75, alle 35 term-pagina's op 0.65. Middleware whitelist en llms.txt bijgewerkt zodat AI-crawlers de hub direct vinden.

/api/demo/start gebruikte req.url als basis voor de redirect. Op Railway resolveert req.url naar de interne container-hostname (localhost:8080), waardoor de browser na de signin een onbereikbare URL kreeg en een error-pagina toonde ipv het dashboard.

Redirect URL wordt nu opgebouwd uit de echte Host-header (+ x-forwarded-proto) van het inkomende request. Bezoeker blijft op het domein waar hij vandaan kwam (senly.io of app.senly.io).

Concurrenten zoals Hootsuite, Buffer en Planable hadden geen specifieke "Senly vs ..." pagina. Branded zoekverkeer ("Hootsuite alternatief Nederland") werd niet opgevangen.

Nieuwe dynamische route /vergelijk/[competitor] met 5 pagina's: senly-vs-hootsuite, senly-vs-sendible, senly-vs-planable, senly-vs-buffer, senly-vs-loomly. Elke pagina bevat: eerlijke sterke/zwakke punten, feature-matrix met 13-14 functies, prijsvergelijking met scenario (10 klanten / 3-4 teamleden), migratie-uitleg en pagina-specifieke FAQ. JSON-LD per pagina: WebPage met ItemList, FAQPage en BreadcrumbList. Alle pagina's pre-rendered via generateStaticParams en toegevoegd aan sitemap (priority 0.85).

Nieuwe "1-op-1 vergelijkingen" sectie op /vergelijk met cards naar elke specifieke vergelijking. Verbetert interne linkstructuur en geeft bezoekers gerichte navigatie per concurrent.

AI-crawlers (GPTBot, Perplexity, Claude-Web) kunnen nu direct de juiste vergelijkingspagina vinden op vragen als "wat is het Senly vs Hootsuite verschil".

Prijsinformatie was alleen op de homepage verwerkt. Zoekopdrachten als "Senly prijs" en "kosten social media software bureau" konden niet ranken.

Eigen /prijzen pagina toegevoegd met drie tiers (Free trial, Growth €50/klant, Scale €40/klant vanaf 21+), volledige feature-lijst, 12 prijs-FAQ's. JSON-LD bevat Product schema met AggregateOffer (3 offers), FAQPage schema en BreadcrumbList. Toegevoegd aan sitemap.ts met priority 0.95. PublicNav linkt nu naar /prijzen i.p.v. homepage-anker.

AI-systemen kruisverifieren entiteiten via externe platforms (LinkedIn, G2, Capterra). De sameAs-array in layout.tsx was leeg — Senly werd niet herkend als geverifieerde entiteit.

sameAs-array met placeholder-URLs toegevoegd voor LinkedIn, X/Twitter, G2, Capterra, Trustpilot, Product Hunt en YouTube. Uncomment per platform zodra het profiel live is.

verification.google was leeg uitgecommentarieerd in layout.tsx zonder duidelijke instructies.

Duidelijke instructies toegevoegd voor zowel GSC als Bing Webmaster Tools. Plak alleen de content-code in zodra de tags zijn gegenereerd in respectievelijke webmasterconsoles.

Pagina-specifieke keyword-arrays voor betere herkenning door zowel klassieke zoekmachines als AI-modellen. /helpcentrum kreeg ook een sterkere titel ("60+ gidsen voor het hele platform").

llms.txt vermeldde alleen "vanaf €50" zonder uitleg over de volumekorting bij 21+ klanten.

Volledige uitleg van Growth + Scale tariefstructuur toegevoegd. /prijzen en /helpcentrum links toegevoegd aan de pagina-lijst voor AI-crawlers.

Het marketing-merk (senly.io) en het portaal-domein (portaal.socialmediatools.nl) waren niet op elkaar afgestemd, wat verwarring gaf bij nieuwe gebruikers.

Nieuw subdomein app.senly.io toegevoegd in Railway met SSL-certificering. Oude portaal.socialmediatools.nl URL geeft nu een permanente 301-redirect naar app.senly.io zodat bestaande bookmarks/links blijven werken en SEO-juice meegaat. Google OAuth redirect URIs uitgebreid met app.senly.io. baseUrl fallback in /api/review aangepast.

"naam@socialmediatools.nl" als placeholder oogde alsof Senly een interne tool was voor één bedrijf.

Vervangen door "naam@bureau.nl" — beter passend bij een multi-tenant SaaS voor social media bureaus.

Voor het werken van de "Bekijk demo" knop moest npm run db:seed-demo handmatig gedraaid worden — een extra handeling die makkelijk vergeten wordt.

Nieuwe prisma/ensure-demo.ts draait bij elke deploy en seedt de demo-tenant alleen als die nog niet bestaat (idempotent). Errors zijn niet-fataal — als seed faalt blijft de app gewoon starten. Voor handmatige reseed: npm run db:seed-demo (wist alles + maakt opnieuw).

Op smalle schermen stonden 9 iconen naast elkaar in de fundio2-topbar. Dit leidde tot crowding en onbruikbare aanraakdoelen.

Op ≤640px wordt .fundio-center verborgen en in .fundio-right worden alle knoppen behalve cog verborgen. Maximaal 4 iconen op mobiel.

12 kolommen van ~25px elk — €-labels overlapten volledig op mobiel.

.dash-chart-bar-value display:none op ≤640px; bar-labels krimpen naar 9px.

max-width: 320px was te restrictief — kaarten werden afgekapt op smalle telefoons.

Slider kaarten gebruiken calc(100vw - 48px) op ≤640px voor één kaart per scherm.

De tools-page negatieve marges (-28px) kwamen niet overeen met de daadwerkelijke padding op mobiel.

Op ≤768px margin -16px, op ≤480px margin -12px — exact gespiegeld aan de main-padding.

De factuurpagina gebruikte uitsluitend inline React-styles — niet overschrijfbaar door media queries.

CSS media query via <style>-blok; className-attributen op header, sections en footer voor ≤600px aanpassing.

Inline stijl vervangen door .signup-fields-2col klasse met responsieve breakpoint in globals.css.

Padding van bp-left, bp-right en bp-card krimpen op ≤480px voor bruikbaarheid op kleine telefoons.

Grote blokken sleutels in de DE- en FR-secties van translations.ts waren automatisch vertaald met gemengd Engels/Duits en Engels/Frans (bijv. "Nein Posts", "January", "Run sync now", "Agency name *"). Gebruikers in Duitsland en Frankrijk zagen plaatselijk Engelse tekst door het hele portaal.

Volledige audit van alle ~14.500 regels. Alle cal_*, calp_*, trello_*, dropbox_*, gdrive_*, canva_*, ns_*, iv_*, fin_*, one_*, of_*, mo_*, aa_*, agt_*, otp_*, saas_* en ap_* sleutels herschreven naar professioneel Duits (formeel, Sie/du consistent) en Frans (formeel, vous). Maanden vertaald naar correcte taalversies. Dutch "Social Media Beheer" gecorrigeerd in EN en DE.

De "Bekijk demo" knop in de hero scrollde alleen naar #platform. Bezoekers konden het portaal niet zelf ervaren — wat miljardenproducten als Linear en Vercel wél bieden.

Nieuwe /api/demo/start route logt bezoekers automatisch in als de demo-user (Sophie van Digitaal Bureau Demo) met een 1-uur sessie. Demo-tenant heeft 10 mock-klanten, taken, en financiën. Banner bovenaan elke pagina toont "Demo modus — start je eigen 14-daagse trial". Onboarding-tours starten automatisch op alle hoofdpagina's (klantprofiel, dashboard, kalender, tools).

Nieuwe assertNotDemo() helper geeft 403 voor demo-users op DELETE /api/clients/[id]. Read en non-destructive writes (taken aanvinken, notities toevoegen) blijven werken voor een echte demo-ervaring. Demo-tour-state wordt bij elke /api/demo/start reset zodat elke nieuwe bezoeker de volledige rondleiding krijgt.

Tools, Trends, CRM, Onboarding en het Klantprofiel waren geïsoleerde silo's zonder cross-references. Gebruikers moesten via de sidebar springen tussen logische volgende stappen.

Nieuwe SiloCrossLinks component bovenaan elke silo-pagina toont 3 contextuele links naar verwante secties (bv. vanaf CRM → Onboarding-bord → Actieve klanten → Financieel). Visueel als teal-accented chip-row met icon + label + hint. Maakt de "lead → onboarding → actieve klant" flow zichtbaar.

De marketing-site draait op senly.io maar het portaal op socialmediatools.nl. Dit creëert merkverwarring bij nieuwe gebruikers.

Niet in deze release uitgewerkt — vereist DNS + Railway custom domain wijziging. Gerapporteerd voor latere planning: opties zijn (a) alles naar senly.io migreren of (b) portaal-branding consistent maken naar "Senly Portaal".

De loginpagina toonde een ISO 27001-certificering die het bureau (nog) niet bezit. Dit sprak de security-pagina tegen en is een fatale claim voor enterprise-vertrouwen.

Badge verwijderd. Alleen feitelijk-correcte trust signals (AVG-proof, 256-bit SSL) blijven staan. Wanneer de ISO-certificering wel behaald is, kan de badge terugkomen met certificaatnummer.

Het signup-formulier en de wachtwoord-reset hadden alleen minLength=8 zonder visuele feedback. Gebruikers wisten niet hoe sterk hun wachtwoord was, en welke verbetering ze konden maken.

Nieuwe PasswordStrength component met visuele 4-segments balk (zwak → uitstekend) en checklist hints (8+ tekens, hoofdletter, kleine letter, cijfer, speciaal teken). Updates realtime tijdens typen.

Inloggen vereiste altijd handmatige email + wachtwoord. Voor terugkerende gebruikers van een SaaS-bureau-tool is dit een onnodige drempel — concurrenten bieden allemaal SSO.

NextAuth Google provider toegevoegd (conditioneel op env vars GOOGLE_CLIENT_ID + GOOGLE_CLIENT_SECRET). Officiële Google-merk-knop verschijnt bovenaan het loginformulier wanneer geconfigureerd. SSO matcht op email — alleen bestaande, actieve gebruikers worden toegelaten; signups blijven via de wizard.

De "Deel review-link" knop stond ondergeschikt aan de sectietitel "Content" — links eronder gestapeld in plaats van rechts ernaast. De .cp-section-header-row wrapper had geen CSS-styling, waardoor de flex-layout niet werkte.

CSS toegevoegd: header-row is nu een flex-container met justify-content:space-between, en de title verliest zijn margin-bottom omdat de row die nu zelf afhandelt. Op mobile wikkelt het netjes naar nieuwe regel zonder full-width knop.

De "Stuur naar Metricool" modal verscheen onder de fold — je moest helemaal naar beneden scrollen om hem te zien. Dit kwam omdat de modal binnen de CollapsibleSection wrapper rendeerde, en die Framer Motion container met overflow:hidden brak de position:fixed van de modal-backdrop.

Modal wordt nu via React Portal direct op document.body gerendered, buiten alle parent-containers. Daardoor werkt position:fixed weer correct en verschijnt de modal altijd centraal in de viewport.

De modal toonde "Posts/week:", "Stories/week:" en "Voorbeelden laden" altijd in dezelfde taal, ongeacht de geselecteerde taalinstelling. Resultaat: mixed-language UI (bv. Franse modal met Nederlandse tekst).

Vervangen door tr('canva_posts_per_week'), tr('canva_stories_per_week') en tr('canva_loading_previews') — vertaald in alle 4 talen (NL/EN/DE/FR).

Het review portaal zag er generiek en goedkoop uit: witte achtergrond, emoji platform-badges, brede groene knoppen en lege thumbnails.

Volledig heronworpen naar het Senly design DNA (dark · glassmorphism · teal accenten). Nieuwe elementen: donkere achtergrond met teal radial glow, glass-cards met hover-lift, 2-koloms grid op desktop, grote media-preview bovenaan elke card, gekleurde platform-chips (FB/IG/LI/TT/YT...), geraffineerde teal gradient goedkeuren-knop, ghost afwijzen-knop, verfijnde voortgangsbalk met glow.

Media-thumbnails toonden niets vanwege CORS-blokkade op de Metricool CDN.

Alle mediaUrl's worden nu gerouteerd via /api/img-proxy (al publiek toegankelijk via middleware). De proxy voegt automatisch de X-Mc-Auth header toe voor Metricool CDN-domeinen.

De "Beslissing wijzigen" knop resettte alleen lokale state, zonder de server te informeren.

Status wordt nu lokaal teruggedraaid naar "te beoordelen" zodat de knoppen opnieuw verschijnen. De volgende beslissing wordt dan correct via PATCH gepersisteerd.

Het review portaal toonde alleen interne ContentPost-records uit de database. De klant kon dus geen posts uit de Metricool-planner beoordelen.

Review-sessies hebben nu een bron-instelling: "Metricool kalender" of "Interne posts". Bij Metricool worden posts live opgehaald via de bestaande listScheduledPosts functie met een instelbare datumrange. Beslissingen (goed/afwijzen + feedback) worden opgeslagen in de session als JSON blob.

Cross-posts (bijv. Instagram + Facebook + LinkedIn tegelijk) tonen nu alle platforms als kleine emoji-badges naast de primaire platform-chip. Metricool-posts met een afbeelding tonen een thumbnail. De Metricool-status (Concept / Ingepland / Gepubliceerd) is zichtbaar als kleurgecodeerde chip.

Bij het aanmaken van een review-link kies je nu eerst de bron: Metricool of Interne posts. Bij Metricool stel je een van/tot datumperiode in (standaard: vandaag + 60 dagen). Als Metricool niet gekoppeld is aan de klant is de Metricool-optie uitgeschakeld.

contentSource (internal|metricool), decisions (JSON string met review-beslissingen), dateRange (JSON string met from/to) toegevoegd. Prisma db push draait automatisch bij deploy.

De tabs op de klant-detailpagina gebruikten hardcoded Nederlandse labels in een server component, waardoor ze nooit meeveranderden met de taalinstelling.

Tabs gebruiken nu labelKey in plaats van label. ClientTabs vertaalt ze client-side via useLanguage().

Drie sectie-headers in ClientPageSections.tsx waren hardcoded in het Nederlands.

Vervangen door tr('tab_content'), tr('cp_clientinfo_title') en tr('cp_evaluations_title') / tr('cp_evaluations_count') via de bestaande useLanguage() hook.

De GDrive sectie toonde {data.message || tr('gdrive_no_folder')} — de server stuurde altijd een Nederlandse foutmelding die de client-side vertaling overschreef.

data.message verwijderd uit de render; de component toont nu uitsluitend de vertaalde tr('gdrive_no_folder') key.

De Affiliate Admin, Audit Log, Massa-koppeling (Social Accounts) en Tools-pagina toonden altijd Nederlandse tekst ongeacht de taalinstelling van de gebruiker.

Alle strings geëxtraheerd naar nieuwe vertaalsleutels (aff_*, audit_*, sa_*, tools_*) in alle 4 talen (NL/EN/DE/FR). Componenten bijgewerkt met useLanguage() / tr(). De Activiteiten-pagina (server component) heeft een aparte ActivityPageHeader client-component gekregen.

De header gebruikte het client.icon veld als <img> src, maar dat veld bevat een emoji of icon-naam — geen URL. Resultaat: een kapotte afbeelding.

Header gesplitst in twee lagen: een smalle witte topbalk met het bureau-logo (Tenant.logoLightUrl / logoUrl) of bureau-naam, en een teal hero-balk met een letter-avatar (eerste letter klant-naam in halftransparante cirkel). Geen afhankelijkheid meer van client.icon als afbeelding.

GET /api/review/[token] geeft nu ook agency.logo terug (Tenant.logoLightUrl of logoUrl). Zodra je in de Tenant-instellingen een logo uploadt, verschijnt het automatisch op alle review-pagina's.

Het CSS-bestand bevatte 4 conflicterende .stats-kpi-grid definities. De laatste (Taskio-stijl, zonder media query) gebruikte !important op grid-template-columns, waardoor de mobiele breakpoints (≤640px en ≤860px) die eerder in het bestand stonden werden overschreven. Op mobiel werden KPI-kaarten dus te smal weergegeven.

De Taskio-override gewrapped in @media (min-width: 641px) zodat mobiele breakpoints weer actief zijn. Dubbele identieke definitie (minmax(200px) variant) verwijderd.

De sluitknoppen van de mobiele navigatie (36px) en het instellingenpaneel (32px) lagen onder het WCAG-minimum van 44×44px, waardoor ze op touchscreens moeilijk te raken waren.

Beide knoppen aangepast naar 44×44px.

Op telefoon/tablet kon de kanban-board horizontaal scrollen maar zonder snapping, wat leidde tot kolommen die halverwege stopten. De inline padding was ook rechts-eenzijdig (40px rechts, 0 links).

CSS scroll-snap-type: x mandatory toegevoegd op ≤1024px. Kolombreedte aangepast naar min(280px, 85vw) zodat de volgende kolom altijd inkijkt ("peek"). Padding gelijkgetrokken aan beide zijden.

De klantdetail-pane gebruikte clamp(380px, 42vw, 580px), wat op schermen <380px buiten de viewport stak.

Breedte veranderd naar clamp(min(380px, 100vw), 42vw, 580px). Op ≤640px nu 100vw (volledig scherm).

De CSS verwachtte data-mobile-label voor de ::before-labels op mobiel, maar alle tabelcellen misten dit attribuut — labels waren dus leeg.

Alle finance-bulk-cell elementen (omzet, personeel, abonnementen, commissie, winst, marge) hebben nu data-mobile-label={tr('fin_col_*')} in zowel de rij-items als de totalen-rij.

Op tablets (881-1024px) werden 8 kolommen (tijdbalk + 7 dagen) dichtgepakt zonder scrollhint.

Nieuw tablet-mediaquery toegevoegd die kolommen smaller maakt (minmax 96px) en scroll-snap inschakelt. Bestaand mobiel breakpoint ook voorzien van scroll-snap.

De filter-popover (right: 0) en de daterange-popover (left: 50%, transform) konden op smalle schermen buiten de rechterkant van de viewport vallen.

max-width: min(360px, calc(100vw - 24px)) toegevoegd aan filter-popover. Op ≤640px: daterange-popover anchort nu links (left: 0, transform: none).

De maandgrafiek toonde 12 vaste kolommen op elk scherm, waardoor staven op telefoon niet leesbaar smal werden.

Op ≤480px: grid-template-columns: repeat(6, 1fr) zodat 12 maanden in 2 rijen van 6 staan.

Contentgoedkeuring verliep via WhatsApp of e-mail — geen gestructureerd feedbackproces, geen overzicht per klant.

Nieuw token-gebaseerd review-portaal op /review/[token]. De klant ziet alle draft-posts van zijn account, kan per post goedkeuren of afwijzen (met feedback), en het bureau ziet de beslissingen direct terugkomen in het dashboard. Geen login vereist voor de klant.

Managers kunnen vanuit het dashboard een review-sessie aanmaken: optionele titel, begeleidend bericht en geldigheidsperiode (7–90 dagen). De gegenereerde link is direct te kopiëren.

De review-pagina toont een live voortgangsbalk (x van y beoordeeld), filtermenu (alle / te beoordelen / goedgekeurd / afgewezen), platform-gradiënt-badges, uitklap-caption, hashtag-chips, visuele briefing en een "Kopieer tekst" knop. Op mobiel volledig responsief.

Nieuw model met uniek token, koppeling aan Client, optionele post-selectie (postIds JSON-array), verloop-datum en aangemaakt-door veld. Relatie toegevoegd aan Client.

DE en FR misten 142 sleutels (dashboard widgets, statistieken, social-account koppeling, tools, kalender-filters). Gebruikers in deze talen zagen de sleutelnaam i.p.v. een vertaling.

Alle 142 ontbrekende sleutels vertaald en ingevoegd in de DE en FR locale-blokken. Alle 4 talen (NL/EN/DE/FR) zijn nu 100% compleet.

Railway's IP-reeksen worden geblokkeerd door Instagram, waardoor yt-dlp altijd faalde.

Zelfde VM-sandbox aanpak als de Facebook-downloader (snapsave), nu voor snapinsta.app. Extractie van directe CDN-URLs zonder Railway-IP-blokkade.

YouTube vereist sinds 2024 een proof-of-origin token (po_token) voor de web-client, waardoor server-side yt-dlp faalt.

yt-dlp krijgt nu --extractor-args "youtube:player_client=ios,tv_embedded" mee. De iOS-client bypast de po_token-vereiste.

snapchat.com/t/... short-URLs werden niet omgezet voordat ze naar yt-dlp gingen.

Redirect wordt nu gevolgd zodat yt-dlp de volledige Spotlight-URL krijgt. Mobiele user-agent ingesteld voor betere compatibiliteit.

LinkedIn blokkeert server-IPs met een login-wall. Generieke foutmelding gaf geen richting.

Platform-specifieke foutmelding met instructie om de video rechtstreeks vanuit LinkedIn te downloaden.

snapinsta.app, media.licdn.com en snap-video.net ontbraken in de proxy-whitelist.

ALLOWED_CDN_HOSTS bijgewerkt zodat nieuwe video-URLs correct geproxied worden.

De sidebar verdween al vanaf 1024px, maar de hamburger/topbar verschenen pas onder 900/768px — daartussen was er geen enkele navigatie.

Topbar en hamburger verschijnen nu vanaf 1024px, gelijk met het verdwijnen van de sidebar.

Onder 768px werden de mappen- én threadkolom verborgen, waardoor alleen een leeg leesvenster overbleef.

Mappen, threads en lezer worden nu netjes onder elkaar getoond (mappen als scrollbare strip), zodat je op mobiel volledig kunt mailen.

Smallere zijmarges op kleine schermen voor meer content-breedte.

Social-accounts bulk-tabel en affiliate-tabellen kappen niet meer af maar scrollen horizontaal.

Trend radar was een lege placeholder ("binnenkort beschikbaar") terwijl hij wel als tool werd getoond.

Werkende AI-versie: geef je niche + platform op en krijg 8 opkomende/hete content-formats met momentum, uitleg en een concreet voorbeeld.

Voor X, Pinterest, Reddit en Facebook gaf de check vaak onterecht "bezet" of "vrij" (JS-shells, bot-walls, login-redirects).

Die platforms tonen nu eerlijk "onbekend — open de link om te controleren" i.p.v. een misleidende uitslag. Instagram, TikTok, YouTube en Snapchat blijven betrouwbaar gecheckt. Geldt ook voor de username generator.

maxDuration op 60s gezet zodat de generatie niet vroegtijdig door het platform wordt afgebroken.

Scrollbalk verborgen op het kanban-board (CRM/Leads én Onboarding/Flows); horizontaal scrollen blijft mogelijk via swipe/trackpad.

De header en pipeline-kolommen hadden 40px linker-padding, terwijl de horizontale scrollbalk al op de board-rand begon — dat zag er niet uitgelijnd uit.

Linker-padding van header en board verwijderd zodat de content netjes op één verticale lijn met het linker uiteinde van de scrollbalk staat.

De horizontale scrollbalk is verborgen; scrollen gaat via de ‹ ›-pijltjes of een swipe.

De achtergrond-wash zat binnen de 28px horizontale padding van de content-zone, waardoor er een witte rand tegen de menubalk overbleef.

De tools-pagina breekt nu uit die padding (margin/padding -28px) zodat de achtergrond tot de menubalk en de rechterrand loopt; de content blijft op z'n plek.

Bij hover maakt het icoon (carousel én tabel, inclusief de downloader-logo's) een vloeiende 360°-draai met een lichte schaal-pop en kleur-glow. Premium easing met subtiele overshoot; respecteert prefers-reduced-motion.

Lettergrootte iets verkleind + nowrap op desktop; op smalle schermen breekt hij netjes af.

font-weight teruggebracht van 600 naar 500 (zelfde dunne uitstraling als de th2-title).

De horizontale scroll-container clipte ook verticaal, waardoor de hover-lift en schaduw bovenaan wegvielen.

Verticale padding toegevoegd aan de carousel-track zodat de kaarten en hun schaduw volledig zichtbaar blijven.

De downloaders (Instagram, Facebook, TikTok, YouTube, LinkedIn, Snapchat) toonden een grijze placeholder.

Nu het echte merklogo op de platform-kleur, met een klein download-badge.

"23 tools · 9 platforms · geen registratie" verwijderd voor een rustiger hero.

De drie losse gekleurde orbs gaven een vlekkerige wash met een zichtbare overgang naar wit halverwege de pagina.

Vervangen door één samenhangende, subtiele gradient die via een mask naadloos uitfadet in de pagina-achtergrond.

Het oude tools-overzicht was een lange reeks losse grids zonder duidelijk overzicht of zoekflow.

Frisse layout met een hero ("Slimme tools, maximale impact"), een "Aanbevolen voor jou"-carousel, klikbare categorie-chips als filter en alle 23 tools in een doorzoekbare tabel met categorie-badges.

Mis je een tool? Via de knop "Tool aanvragen" dien je er een in; aanvragen worden opgeslagen en verschijnen onder het tabblad "Aangevraagde tools" met een status (in behandeling / gepland / toegevoegd / afgewezen).

Nieuw Prisma-model en /api/tools/requests endpoints (aanmaken, lijst, status bijwerken) — tenant-gefilterd zodat elk bureau de eigen aanvragen ziet.

Meet download, upload, ping en jitter tegen de Senly-server — zo weet je of je vanaf je locatie vlot kunt werken.

Checkt bereikbaarheid van Instagram, Facebook, WhatsApp, Threads, TikTok, YouTube, X, LinkedIn, Snapchat en Pinterest, met directe link naar de officiële statuspagina.

Genereert QR-codes die de URL direct bevatten (geen redirect, verloopt nooit), met kleur- en formaatopties en PNG/SVG-download.

Schrijft vier bio-varianten binnen de tekenlimiet van Instagram, TikTok, LinkedIn, Facebook, X of YouTube, met instelbare toon en emoji.

AI bedenkt tien handles op basis van naam, niche en stijl; één klik checkt of ze nog vrij zijn op de grote platforms.

Scoort je openingszin op scroll-stop, nieuwsgierigheid, duidelijkheid en emotie, met sterke/zwakke punten en drie verbeterde varianten.

Snelheidstest, storingen checker en QR-generator gebundeld; bio + hook analyzer onder Schrijven & ideeën, username generator onder Analyse & onderzoek.

Op mobiel bleef de nav een CSS-grid (1fr auto 1fr); met de verborgen menu-links belandde de knoppen-groep in de middelste kolom i.p.v. rechts, en justify-content had geen effect op die grid.

Op mobiel de nav op display:flex met justify-content:space-between gezet: logo tegen de linkerrand, knoppen tegen de rechterrand, met de witruimte ertussen.

De nav-inner had asymmetrische padding (links 24px, rechts 14px) waardoor het logo verder van de rand stond.

Op mobiel padding gelijkgetrokken naar 12px 16px voor een symmetrische uitlijning.

html[data-theme="light"] body stelde een lichte achtergrond in die buiten de login-container zichtbaar was als de body verder reikte dan 100dvh.

html:has(.login-screen-v2) body achtergrond geforceerd naar #070a0f op mobiel; padding-top verhoogd naar 80px zodat de card iets lager staat.

align-items: center op de container zodat de card verticaal gecentreerd staat, met padding-top voor de Terug-knop.

De hero en nav hadden 14px marge aan alle kanten waardoor de content er "ingekaderd" uitzag op mobiel.

margin: 6px op hero-v2, nav-offset 6px, border-radius iets kleiner — meer schermvullend zoals socialmediatools.nl.

min-height: 100dvh op de card zelf maakte hem veel groter dan de content. Wit onder de card was de body-achtergrond die doorscheen.

Shell is height: auto, container is 100dvh met dark gradient — card zit bovenaan, de rest van het scherm toont de donkere achtergrond.

justify-content: center + margin-top: 64px op de form-card creëerde een grote lege witte ruimte boven BEDRIJFSPORTAAL.

justify-content: flex-start + margin-top: 16px op mobiel zodat de content direct na de padding begint.

Het SMT-logo flikkerde 1 seconde bij het openen van de loginpagina op mobiel, omdat lp-form-mobile-logo in de media query op display: flex stond.

display: none gezet op lp-form-mobile-logo in de mobiele breakpoint — het logo is niet nodig nu de linkerkolom ook verborgen is.

Zonder de linkerkolom was de card korter dan het scherm, waardoor de witte body-achtergrond zichtbaar was onder de card.

min-height: calc(100dvh - 32px) op de lp-shell zodat de card altijd tot de onderkant doorloopt.

display: none op .lp-brand bij max-width: 980px zodat het formulier de volledige breedte krijgt.

De emoji 👁/🙈 rendert per platform anders en oogt onprofessioneel.

Vervangen door een getekende SVG (eye / eye-off) die op desktop, tablet en mobiel identiek eruitziet.

100+ Agencies → 300+, 1.000+ Gebruikers → 2.500+

Gebruikers met een dark-theme cookie zagen zwarte rechthoeken tijdens het laden van het helpcentrum, omdat de skeletons var(--bg-mid) en var(--bg-elev) gebruiken die in dark-mode donker zijn.

Expliciete lichte kleuren via html[data-theme="dark"] .support-panel--landing overrides voor skeletons, artikelen, zoekbalk en categorie-labels.

Font-size en line-height verschilden tussen de twee knoppen waardoor ze nooit exact even hoog waren.

Expliciete height: 36px op beide knoppen zodat ze altijd identiek van hoogte zijn, ongeacht font-rendering.

Oude mobiele overrides (margin-top: 2px + align-items: flex-start) waren bedoeld voor een enkelvoudige lange tekstregel en duwden de checkmarks nu onnodig omlaag.

align-items: center hersteld en margin-top: 0 zodat checkmarks perfect verticaal gecentreerd staan naast elke bullet.

De absoluut gepositioneerde sluitknop viel over de bodytekst heen, waardoor "Ons supportteam staat voor je klaar" aan het einde werd afgekapt.

Tooltip breder (272px) en extra padding-right (36px) zodat de tekst nooit onder de knop verdwijnt.

iOS Safari renderde de sluitknop als een ovaal/ei-vorm.

aspect-ratio: 1/1 + min-width/min-height + -webkit-appearance: none toegevoegd.

De animatie schoof door naar #2563eb (diepblauw) wat op de donkere navy achtergrond te weinig contrast had en onleesbaar werd.

Kleuren vervangen door #5eead4 → #22d3ee → #7dd3fc — lichte teal/cyan tinten die altijd voldoende contrast houden op de donkere hero.

De lange tekst "Geen creditcard · 14 dagen full access · Opzeggen wanneer je wilt" als inline-flex met één checkmark brak raar af op mobiel.

Opgesplitst in 3 afzonderlijke items elk met eigen check-icoon en white-space: nowrap, zodat ze netjes wrappen zonder de checkmark te splitsen van de tekst.

De NL-knop had een vaste height: 34px en zag er daardoor ronder/ovaler uit dan de CTA-knop.

height: auto + zelfde top/bottom padding als de CTA-knop zodat beide knoppen even slank ogen.

`display: block; overflow-x: auto` op een <table> werkt niet betrouwbaar in mobile Safari — de pagina scrollde mee in plaats van de tabel.

Tabel verpakt in een <div class="sn-table-scroll"> wrapper met overflow-x: auto; de tabel zelf heeft min-width: 480px zodat hij altijd leesbaar blijft.

onTouchStart/onTouchEnd handlers toegevoegd aan de stage; swipe >30px schakelt naar volgende of vorige categorie.

overflow: hidden op de .sn-bc-stage knipt border-radius van 3D-getransformeerde kaarten weg in Safari.

overflow: hidden van stage verwijderd (blijft op section); -webkit-transform: translateZ(0) forceert GPU-compositing voor correcte border-radius.

De root layout zet data-theme vanuit een cookie. Gebruikers die het dashboard in dark-mode gebruikten, zagen de chat ook donker op de landing page.

support-panel--landing klasse toegevoegd met expliciete wit-override voor html[data-theme="dark"], inclusief tabs, berichtbellen en scrollbar.

Er waren ten onrechte 3 EUR-schijven (€70/€50/€40) in plaats van 2.

1–20 klanten: €50/klant (of $60/client); 21+ klanten: €40/klant (of $50/client).

Zonder expliciete line-height gebruikte de browser ~1.4, waardoor de tekst te hoog in de badge hing.

line-height: 1 + asymmetrische padding (7px boven, 6px onder) zodat de tekst optisch gecentreerd staat.

Bij ≤560px/420px kregen de kolomkoppen 18px padding terwijl de kolom maar 70px/58px breed was — "SENLY" viel buiten de kolom en werd door overflow:hidden afgeknipt.

Kleinere padding + letter-spacing + font-size voor .sn-vs-row-head span op smalle breakpoints.

Op de landing page (geen dark-theme) viel de widget terug op de donkere standaard (#181b1f).

Wit als standaard gesteld; dark-mode override via html[data-theme="dark"]. Tabs, berichtbellen en scrollbar meegenomen.

padding: 0 + min-width/min-height + aspect-ratio: 1/1 zodat de knop niet meer ovaal wordt door flex-stretching op iOS Safari.

whiteSpace: nowrap op de h1 zorgde dat tekst op mobiel uitliep.

whiteSpace: nowrap verwijderd; tekst wrrapt nu normaal.

overflow: hidden op .sn-bc-section en .sn-bc-stage; ronde hoeken (16px) op kaartjes hersteld.

display: block + overflow-x: auto op .sn-pg-prose table zodat de tabel niet buiten de pagina valt.

Alleen het €70-tarief was zichtbaar; €50 (11-20 klanten) en €40 (21+) ontbraken.

Tier-kaartjes toegevoegd die actief oplichten op basis van de slider. Berekening aangepast naar drie schijven (€70 / €50 / €40).

useLanguage locale gebruikt: EN → USD ($60 basis, $50 bij 21+), overige talen → EUR.

Knop had kleur #475569 (donkergrijs) wat onleesbaar was tegen de donkere gradient-achtergrond.

Kleur gewijzigd naar rgba(255,255,255,0.85) zodat hij zichtbaar is op de donkere achtergrond.

Knop was verborgen op ≤980px; nu zichtbaar met compactere padding (9px 13px) zodat [S Senly] + [Inloggen] + [NL] naast elkaar passen.

Eyebrow-badge stond niet gecentreerd en had te veel ruimte erboven op kleine schermen.

display: block + margin: auto + width: fit-content op .sn-cta-eyebrow; padding-top van de card teruggebracht van 48px naar 36px.

Icoon rekte mee met de gewrapte tekst in het flex-item en stond niet op de juiste positie.

align-items: flex-start op .sn-cta-foot + flex-shrink: 0 en margin-top: 2px op .sn-cta-check.

De bureau-scan popup overlapte de support-chat widget op schermen ≤768px.

display: none op .optquiz-wrap via 768px media query.

"Senly" was verborgen op mobiel zodat de CTA en NL zouden passen, maar de gebruiker wil het logo-woord zien.

CTA "Inloggen / Registreren" verborgen in de nav op mobiel (≤980px) — de loginknop zit al in de hero zelf. Zo past [S Senly] + [NL] netjes gecentreerd.

Asymmetrische padding (0 9px 0 12px) vervangen door symmetrisch (0 10px) + justify-content: center zodat NL + chevron visueel gecentreerd staan.

Op mobiel stond het logo uiterst links en de twee actie-knoppen uiterst rechts (justify-content: space-between met een lege tussenruimte doordat de nav-links verborgen zijn).

Nav-inner omgezet naar justify-content: center op ≤980px. Logo-tekst "Senly" verborgen zodat alleen het S-icoon toont. CTA-knop compacter (13px, kleinere padding). De drie items staan nu als één gecentreerde groep.

De actieve dot was een dik ovaal bolletje (8px hoog, 28px breed) — te opvallend en niet passend bij het design.

Alle dots nu 3px hoog zodat het dunne streepjes zijn. Actief streepje is 32px breed met gradient, inactief 20px lichtgrijs.

white-space: nowrap toegevoegd op de em-tag zodat "Begin met één." altijd op één regel blijft.

iOS Safari clipt overflow:hidden + border-radius niet betrouwbaar voor z-index:-1 elementen. De orb-glows lekten door de afgeronde hoeken van de hero-kaart.

-webkit-mask-image toegevoegd op de hero om correcte GPU-compositing te forceren. Tevens bg-inset van -80px naar 0 gezet zodat orbs niet boven de kaartgrens uitsteken.

De hero-sectie had margin: 14px 14px 0 — geen ondermarge — waardoor de kaart onderaan doorliep tot de rand van het scherm zonder witte rand.

Ondermarge toegevoegd (margin: 14px aan alle kanten) en bottom padding verkleind van 90px naar 48px op ≤768px zodat de kaart mooi als een floating card binnen het scherm valt.

De SVG-underline binnen de gradient-span had display:block en width:100%, waardoor de inline-block span de volledige containerbreedte innam en "voor" naar een eigen regel werd gedwongen.

SVG-underline position:absolute gemaakt op ≤768px; gradient-span krijgt position:relative en padding-bottom:20px zodat de underline in de juiste positie blijft zonder de tekstflow te verstoren.

Op mobiel was de titel (18px) veel te klein ten opzichte van de beschrijvingstekst eronder — de regels vulden maar 60% van de containerbreedte.

Font-size verhoogd naar clamp(28px, 7.5vw, 56px) zodat de langste regel nagenoeg rand-tot-rand vult, passend bij de rest van de hero.

Sub-pagina's zoals integraties, partners, vergelijk, contact, FAQ en helpcentrum hadden weinig of geen tablet-/mobielstijlen.

Tablet (768px) en mobiel (480px) breakpoints toegevoegd aan pages.css, partners.css, integraties.css, vergelijk.css, contact.css, faq.css en helpcentrum.css. Grids stapelen correct, padding schaalt mee, CTA-buttons worden vol-breed op klein scherm.

Platform-knoppen schalen nu mee op mobiel en gaan op <420px vol-breed.

Nav-inner krijgt minder marge en padding op <480px. Footer-bottom wordt gecentreerd gestapeld op <480px.

De translateY(-8px) op de featured commissie-kaart gaf een vreemde layout als de grid naar 1-kolom stapelt.

Offset uitgeschakeld op ≤768px, hover-animatie blijft actief.

De gerefereerde og-image.png ontbrak, waardoor previews op LinkedIn, X, WhatsApp en in AI-tools leeg/kapot waren.

Een automatisch gegenereerde OG-afbeelding (1200×630) toegevoegd voor de hele site — donker-teal met logo, kop en CTA. Geldt als fallback voor elke pagina; blogartikelen gebruiken hun eigen thumbnail.

BreadcrumbList op elke sub-pagina; Organization + ContactPoint + adres op /contact; AboutPage op /over-ons; CollectionPage + ItemList van alle integraties op /integraties; FAQPage op /helpcentrum en /faq; Blog + BlogPosting op /blog en artikelen (met juiste afbeelding, sectie en woordtelling). Helpt Google-rich-results én AI-engines.

Unieke, keyword-rijke titels/descriptions, canonical en OG/twitter op /changelog, /contact en /security toegevoegd; blog-thumbnails als alt-tekst en als OG-afbeelding per artikel.

De dynamische robots-route gaf in bepaalde gevallen een 500-fout.

Vervangen door een statische, AI-crawler-bewuste robots.txt met het juiste sitemap-domein (senly.io) — altijd bereikbaar voor zoekmachines en AI-bots.

In het lichte thema kreeg het zoekveld een witte achtergrond en rand van de globale formulier-stijl, waardoor er een wit blokje achter de placeholder-tekst stond binnen de grijze zoekbalk.

Het zoekveld is nu transparant zonder rand, zodat het netjes in de grijze pill valt.

De middleware redirectte /robots.txt, /sitemap.xml, /llms.txt en /og-image.png naar /login, waardoor zoekmachines en AI-bots ze niet konden ophalen.

Deze SEO-bestanden uitgesloten van de middleware zodat ze publiek (text/plain en XML) geserveerd worden. Ook de oude statische robots.txt met verkeerd sitemap-domein verwijderd.

Gestructureerd /llms.txt-bestand met een feitelijke beschrijving van Senly: wat het is, voor wie, functies, prijzen, reputatie en vergelijking met losse tools/concurrenten — zodat ChatGPT, Perplexity en Claude Senly correct kunnen citeren.

SoftwareApplication verrijkt met aggregateRating (4.9/5, 120 reviews), featureList, prijs-offers en talen. Vergelijkingspagina kreeg BreadcrumbList en een machine-leesbare WebPage met alle genoemde concurrenten.

Alle publieke pagina's toegevoegd aan de sitemap (vergelijk, integraties, over-ons, faq, security, helpcentrum, contact) met passende prioriteiten.

De homepage had de rijke 3-koloms footer, maar de sub-pagina’s (FAQ, Integraties, Vergelijk, Helpcentrum, Contact, Over ons, Blog, Security en de juridische pagina’s) toonden een simpele, afwijkende footer.

Eén gedeelde SiteFooter-component gebouwd en op alle pagina’s toegepast — identieke kolommen, links en bottom-bar, met taalondersteuning en sectie-links die vanaf sub-pagina’s naar de homepage verwijzen.

Bij het uploaden van een logo voor de boekingspagina was niet duidelijk welk formaat het beste werkt.

Hint toegevoegd: liggend logo van ca. 280 × 80 px (PNG met transparante achtergrond), wordt getoond op max. 56 px hoog.

De homepage sloeg de taal op onder “senly-lang” en de sub-pagina’s onder “senly_lang” — twee verschillende sleutels, dus de keuze ging verloren bij navigeren.

Beide gebruiken nu dezelfde sleutel (senly-lang). Een taalkeuze blijft overal behouden.

Het volledig donkere inlogscherm was te donker; gevraagd werd een wit kaartje met behoud van de donkere achtergrond.

Auth-pagina's teruggezet naar het lichte thema (wit kaartje, donkere tekst) terwijl de pagina-achtergrond eromheen via CSS de donkere teal hero-gradient behoudt. Het kaartje is solide wit met een diepe schaduw.

Op sub-pagina’s stonden NL/EN/DE/FR nog los naast elkaar, terwijl de homepage al een nette dropdown had.

Compacte trigger met de huidige taal + chevron; klik klapt het menu uit. Sluit bij keuze, klik-buiten of Escape — identiek aan de homepage.

De gedeelde PublicNav had nog de oude menu-items (Platform met dropdown-pijltje, Blog, Partners) en week af van de bijgewerkte homepage-navigatie.

PublicNav gelijkgetrokken met de homepage: dropdown-pijltje weg, Blog en Partners eruit (staan in de footer), en de items linken naar de juiste homepage-secties (#platform, #opties, #onboarding, #vergelijking, #prijzen).

Overzicht van alle koppelingen: social platforms (Instagram, TikTok, LinkedIn, Facebook) plus 8 categorieën (Metricool, Canva, Google Drive, Dropbox, GoHighLevel, Stripe, IMAP/SMTP, Gemini) en een binnenkort-lijst. Gegrond op de echte integratie-registry.

Senly versus de losse-tools-stack: kostenoverzicht (€1.525/mnd → vanaf €500) met besparing, plus een functievergelijking. Conversiegericht en SEO-vriendelijk.

Doorzoekbaar helpcentrum met alle 270 support-artikelen in 20 categorieën, met categorie-overzicht en accordion. Hergebruikt de bestaande in-app artikelen.

De nieuwe pagina’s toegevoegd aan de footer en de publieke route-allowlist in de middleware.

Er was geen keuze om wel of niet ingelogd te blijven na het inloggen.

Checkbox "Onthoud mij" toegevoegd (standaard aan). Aangevinkt blijf je 30 dagen ingelogd; uitgevinkt verloopt de sessie na 1 dag. De keuze stuurt de geldigheidsduur van de JWT via een variabele maxAge. Het wachtwoord zelf wordt nooit opgeslagen — dat regelt de browser-wachtwoordmanager.

Door margin-collapse ontsnapte de 14px bovenmarge van de hero naar de body, waardoor er een donkere rand boven de hero verscheen terwijl links/rechts licht waren.

De 14px verplaatst van de hero-marge naar padding op de paginacontainer (.sn-pg), zodat de lichte achtergrond ook bovenaan doorloopt. Geldt voor alle publieke pagina's (blog, changelog, prijzen, over-ons, etc.).

Bezoekers hadden geen centrale plek voor veelgestelde vragen over prijzen, functies, onboarding en beveiliging.

Premium FAQ-pagina met uitklapbare accordion, gegroepeerd per thema, inclusief FAQ-schema (rich results in Google). Toegevoegd aan de footer en de publieke route-allowlist.

Beide linkten naar "#" in plaats van de bestaande pagina's.

Gekoppeld aan /over-ons en /contact. FAQ-link toegevoegd in de landing- en sub-pagina-footers.

De login miste de signatuur van de homepage-hero (gradient-kop en zichtbaar grid).

De accent-tekst in de login-kop kreeg dezelfde teal→blauw gradient als de hero en het achtergrondgrid is verfijnd zichtbaarder gemaakt (zoals de hero), terwijl het geheel strak en zakelijk blijft.

Met flex/space-between stonden de links iets links van het midden, afhankelijk van de breedte van logo en knoppen.

Navbar omgezet naar een 3-koloms grid (1fr auto 1fr) zodat de links altijd exact gecentreerd staan, ongeacht de breedte van logo en actieknoppen.

Alle vier de talen stonden los naast elkaar in de navbalk, wat ruimte innam en rommelig oogde.

Compacte trigger met de huidige taal + chevron; klik klapt een dropdown uit met alle talen. Sluit bij keuze, klik-buiten of Escape, met vloeiende animatie.

De login was bijna zwart (#0a0e14) terwijl de homepage-hero juist door teal-radialen wordt opgelicht.

Login-achtergrond vervangen door exact dezelfde teal/violet radiale gradient als de homepage-hero en de panelen lichter en tealer gemaakt (transparant glas met teal-rand), zodat de hero-kleur doorschijnt.

De auth-pagina's stonden in een licht thema dat botste met de donkere homepage-hero.

Login, signup en signup-success forceren nu het donkere thema (navy-teal hero-look met lichte tekst en teal accenten). De inlog-knop kreeg de homepage-gradient teal→cyan→blauw (#14b8a6 → #0891b2 → #2563eb).

Na het verplaatsen van Partners uit de nav stond de affiliate-link nergens meer; alleen Blog stond al in de footer.

Affiliate-link toegevoegd onder de kolom Bedrijf, verwijst naar /partners.

De nav had een dropdown-pijltje bij Platform en bevatte Blog en Partners, terwijl die in de footer thuishoren.

Pijltje verwijderd, Blog en Partners uit de nav (blijven in footer). Elk item scrollt nu vloeiend naar de juiste sectie op de pagina, met offset zodat de navbalk de titel niet bedekt.

Non-breaking spaces toegevoegd zodat de woordgroep als blok naar de tweede regel zakt in plaats van halverwege af te breken.

De custom cursor gebruikte mix-blend-mode multiply, waardoor het logo dof en nauwelijks zichtbaar werd op de donkere hero.

Multiply verwijderd; logo krijgt nu een teal drop-shadow + glow-halo met subtiele pulse, volgt de muis vloeiend (lerp) en groeit met intensere glow boven knoppen en links.

Fontgewicht van het eyebrow-label verlaagd van 700 naar 500 voor een fijnere, minder schreeuwerige uitstraling.

Fontgewicht van de teaser-titel verlaagd van 700 naar 600 voor een iets fijnere, elegantere uitstraling.

Een score als "291% workflow optimalisatie" was niet uitlegbaar en kon ongeloofwaardig overkomen.

Workflow wordt nu getoond als "tot 2,9× sneller werken" (1,2×–2,9×), wat intuïtiever en verdedigbaar is.

Percentages boven 100% voor kwaliteit hadden geen natuurlijke betekenis.

Kwaliteitsverbetering loopt nu van 64% tot 95% met hoge ondergrens, zodat het hoog maar realistisch blijft.

De getallen konden als harde belofte worden gelezen.

Toegevoegd: "Indicatieve schatting op basis van je antwoorden." onder de metrics.

De teaser was een vlakke witte kaart en de ondertitel beloofde alleen uren besparing, terwijl de test meer toont.

Premium herontwerp: subtiele gradient-kaart met teal accentlijn, eyebrow "Gratis bureau-scan · 2 min", solid teal-icoon, gelaagde schaduw en CTA met pijl-animatie. Ondertitel aangepast naar "ontdek je tijdwinst, werktempo en kwaliteitswinst" — passend bij de drie resultaten.

Het glaspaneel was nog net iets te dicht, waardoor de kleur afweek van de eerste sectie.

Achtergrond transparanter (alpha ~0,48) en tealer gemaakt met een sterkere teal-gloed, zodat de hero meer doorschijnt en de banner vrijwel samenvalt met de sectie-achtergrond.

De besparing stond op weekbasis, terwijl maandbasis aansprekender en gangbaarder is.

Berekening omgezet naar maandbasis (weekwaarde × 4,33) en label aangepast naar "bespaard per klant / maand" (12–47u).

De banner zat vast als volle balk onderin en de achtergrondkleur week af van de eerste sectie.

Omgezet naar een zwevend, gecentreerd kaartje met marges en afgeronde hoeken. Translucent navy-teal achtergrond met backdrop-blur laat de hero deels doorschijnen, zodat de kleuren vrijwel samenvallen met de sectie-achtergrond.

De percentages waren gemaximeerd rond 95%, wat de potentiële winst onderschatte.

Scoringsgewichten verruimd: beide metrics lopen nu van ~115% tot ~300%, afhankelijk van de antwoorden.

Het label "bespaard per week" was dubbelzinnig over of het de hele agency of per klant betrof.

Berekening en label aangepast naar uren bespaard per klant per week (3–11u), wat concreter en herkenbaarder is.

De balk had eerst een paarsblauwe ondertoon en daarna een te donkere tint vergeleken met het navy-teal van de eerste sectie.

Achtergrond afgestemd op de opgelichte onderkant van de hero: navy-teal verloop (#15222a → #0f1a21) met een subtiele teal-gloed linksonder, zodat de balk naadloos aansluit.

Bezoekers die al efficiënt werkten kregen lage uitkomsten (rond 20%), wat weinig motiveerde om Senly te proberen.

Scoringsgewichten herijkt met een hoge ondergrens: de uitkomst ligt nu altijd tussen ~64% en ~95%, met variatie per antwoord zodat het persoonlijk blijft voelen.

De ring dijde gelijkmatig uit, maar startte te snel telkens opnieuw.

Cyclus verlengd naar 5,8s: ring groeit gelijkmatig van 0 naar 24px in de eerste 62%, gevolgd door een korte rustpauze. Een nieuwe ring verschijnt nu elke 2,9s i.p.v. 2,1s.

De getallen telden schokkerig op via setInterval en flikkerden tussen heel getal en decimaal, wat de animatie liet glitchen.

Teller herschreven met requestAnimationFrame en een ease-out cubic curve. Het aantal decimalen wordt vastgezet op basis van het einddoel, zodat de breedte niet meer verspringt.

De ring schoot eerst weg of bleef juist even hangen — geen rustige beweging.

Eén lineaire keyframe laat de ring gelijkmatig van 0 naar 24px uitdijen terwijl hij vervaagt, over 4,2s. Geen hold, gewoon een kalm en constant tempo.

De eerste versie had slechts 3 vragen en een basic uiterlijk zonder premium uitstraling.

10 vragen in logische volgorde (bureau, tijdsbesteding, tools, organisatie, klantrelatie, beveiliging, uitdaging), fullscreen blurred backdrop, teal category labels, gradient voortgangsbalk met glow-dot, optie-knoppen met radio-dot en hover-animatie, geselecteerde staat met highlight, geanimeerde Counter op resultatenkaarten en gradient CTA-knop.

De ring pulseerde te snel (elke ~1,2s), wat onrustig oogde.

Animatieduur verhoogd naar 4,2s met de tweede ring 2,1s verschoven en een zachtere ease-out. Resultaat: een rustige, vloeiende puls.

De oude tooltip was een platte tekstwolk zonder branding.

Nieuw compact kaartje (248px) met Senly-logo, "Heb je een vraag?" als hoofdtitel en "Ons supportteam staat voor je klaar" als subtekst. Sluitknop rechtsboven, verschijnt 3 seconden na cookieconsent.

Bezoekers hadden geen directe manier om te zien hoeveel tijd en kwaliteitswinst Senly hen oplevert.

Popup verschijnt na 10 seconden linksonder op de homepage. Drie vragen (klanten, rapportage-uren, inplan-uren) berekenen persoonlijke uitkomst: bespaard uren/week, workflow-optimalisatie % en kwaliteitsverbetering %. Eenmalig per sessie zichtbaar.

Bezoekers werden niet geïnformeerd over cookies — wettelijk verplicht onder de AVG.

Vaste balk onderin met "Accepteren" en "Alleen noodzakelijk". Keuze opgeslagen in localStorage, verschijnt daarna niet meer.

FAQ vermeldde een uitbetalingsnotificatie (bestaat niet) en "veel van onze beste partners" (er zijn nog geen partners).

€50 minimumdrempel toegevoegd aan uitbetaling-FAQ. Social proof vervangen door eerlijke tekst over eigen ervaring.

Klikken opent het support-venster; wegklikken slaat de keuze op in sessionStorage.

De FAQ beloofde een bibliotheek met banners en templates die niet bestaat.

Vraag herschreven: partners hebben geen materialen nodig — een persoonlijke aanbeveling werkt beter.

Code had 20% hardcoded terwijl de partnerpagina 30% belooft.

DEFAULT_COMMISSION_RATE aangepast naar 30%. Nieuwe referrals krijgen direct het juiste tarief.

Geen upgrade-logica aanwezig terwijl dit wel beloofd werd op de partnerpagina.

Bij elke invoice-betaling wordt het aantal actieve referrals geteld. Zodra een affiliate 10+ actieve bureaus heeft, worden alle actieve referrals automatisch naar 40% opgewaardeerd voor toekomstige betalingen.

De partnerpagina vermeldde een cookie-venster van 90 dagen en een pijplijn-metafoor die niet overeenkwam met de werkelijkheid.

Teksten herschreven: referral wordt direct gekoppeld bij aanmelding, na 2 weken proefperiode wordt het abonnement verlengd en geïncasseerd, uitbetaling volgt op de 1e van de volgende maand. Stat "90d Cookie-duur" vervangen door "14d Proefperiode klant".

Oude tiered structuur (20%/25%/30%) was te complex en gaf nieuwe partners weinig urgentie.

Vereenvoudigd naar 2 tiers: 30% levenslang vanaf de eerste verwijzing, automatisch 40% zodra je 10+ actieve bureaus hebt aangebracht.

Conversie-input verwijderd; één directe input (default 5) berekent maand-1, na-6-maanden en jaar-1 commissie met automatische tier-overgang.

Hero-tekst, stats-kaarten en tier-kop expliciet over 30%/40% levenslang.

14 Franse vertaalstrings gebruikten single quotes rondom tekst met apostrof (bijv. d'outils), waardoor de SWC-parser crashte.

Alle aangetaste strings omgezet naar double quotes. Tevens een ernstig geval op regel 2851 hersteld waarbij een it's de testimonial-string volledig verbrak.

COPY-object uitgebreid met `de` en `fr` blokken; alle inline strings omgezet naar 4-talige lookups.

Zowel de LandingPage-nav als de PublicNav (blog, partners, etc.) tonen alle vier talen. Voorkeur wordt opgeslagen in localStorage.

useTransition detecteert wanneer de Next.js routertransitie klaar is, waarna scrollIntoView de gebruiker direct naar #artikelen brengt. router.push({ scroll: false }) voorkomt dat Next.js de scroll-positie reset.

Klikken op een categorie in de carousel navigeerde naar ?cat=... maar de artikelen eronder werden niet gefilterd.

page.tsx leest nu de ?cat= parameter en filtert BLOG_POSTS. Carousel-tabs navigeren via router.push en pre-selecteren de actieve kaart op basis van de URL.

De blog-categoriecarousel toonde generieke stockvideo's zonder relatie met social media bureaus.

Vijf gerichte Pexels-video's gezocht en gedownload (1920×1080): brainstormsessie (groei), presentatiemeeting (strategie), analytics-werkplek (tools), laptop-typende medewerker (AI) en kantoorteam met telefoons (social media).

PublicNav gebruikte donkere tekst terwijl de hero-achtergrond donker is, waardoor het contrast slecht was.

Witte tekst (rgba 72%) in standaard-staat, automatisch donker in pill-staat (gescrolled) — identiek aan landing.css.

Zelfde toggle als op de homepage, slaat voorkeur op in localStorage zodat het consistent blijft tussen pagina's.

Vijf categorie-kaarten (groei, strategie, tools, AI, social-media) in een 3D-peek-carousel met video-loop, auto-rotate en tab-navigatie.

Elke blogpost krijgt een unieke stock-thumbnail; emoji-overlay bovenop de afbeelding voor herkenning per categorie.

Interactieve calculator die op basis van verwijzingen en conversieratio de verwachte maandcommissie berekent (maand 1, 6 maanden, jaar 1).

Hero met statistieken, 3-stappen flow, commissie-tiers (Starter/Pro/Elite), FAQ-accordeons — aligned met landing-palette.

Blog-categorie-videos stonden onterecht achter auth; toegevoegd aan de public-path matcher.

Bedrijfsverhaal, missie en 6 productprincipes — premium hero + card-grid in landing-stijl.

6 security-pijlers, standaardenmatrix (AVG/TLS 1.3/AES-256-GCM/bcrypt/HSTS/CSP), Connector-architectuur in detail en disclosure-flow.

Twee-koloms layout met sales/security/algemeen/telefoon-kanalen en een geprefetcht formulier. POST naar /api/contact stuurt via Resend met IP rate-limit (5/10min) en valideert email + bericht-lengte.

Deze pagina's gebruikten eigen plain styling die niet matchte met de landing-look.

Nieuwe gedeelde app/pages.css met sn-pg-hero (dark navy + grid + teal eyebrow), sn-pg-section, sn-pg-card en sn-pg-prose typografie. Alle drie pagina's wrappen nu hun content in deze consistente shell.

isPublicPath uitgebreid zodat de nieuwe pagina's + de POST /api/contact route toegankelijk zijn zonder login.

De .sn-hero-v2-dash-bg toonde een zwak doorschemerende "Goedemiddag"-dashboardafbeelding achter de hero, wat afleidde van de copy.

CSS .sn-hero-v2-dash-bg op display:none gezet. Gradient mesh + grid + orbs blijven; visueel rustiger.

Reviews stonden in een statische 2×2 grid — weinig premium en moeilijk uit te breiden.

3D peek-carousel met actieve card in het midden, vorige + volgende half zichtbaar aan de zijkant, auto-rotate elke 6s, pijlen + dot-navigatie, 10 reviews met diverse rollen.

Alle bezoekers zagen euro’s, ongeacht herkomst.

Automatische detectie via browser-timezone (Europe → EUR, America/Pacific/Australia → USD). Tool-chips, vergelijkingscards en pricing tiers (Growth €50/$60, Scale €40/$50) wisselen mee.

Teal Senly browser-bar uit 8 portal-screenshots (kalender, statistieken, trends, inbox, integraties, huisstijl, klanten, klantdetail) gecropped — clean look matchend met de Tools image.

4 metric cards verkort (113px hoog), exact aligned op hero-randen (14px), achtergrond-gradient die natuurlijk doorloopt vanuit de hero. Verplaatst tussen hero en Growth-calculator.

"Klaar om te schalen?" CTA-card kreeg dark-teal blueprint look, eyebrow optisch gecentreerd. "Krachtige extras." nu op 1 regel (head max-width 1100px). Marquees 4× duplicatie voor brede zoom-out viewports.

(dashboard)/page.tsx gebruikte session! non-null assertion en crashte daardoor voor uitgelogde bezoekers op /; rendert zich naast LandingPage met mixed output.

Vroege return bij null-session — layout serveert nu schoon de LandingPage.

Knop op /signup ging altijd naar /login, ook als bezoeker vanaf landing of changelog kwam.

router.back() met fallback naar /; tekst "Terug naar inloggen" → "Terug".

De nieuwe app/page.tsx conflicteerde met (dashboard)/page.tsx — beide route-resolvers naar /, runtime-crash in productie (build slaagde wel).

app/page.tsx verwijderd; (dashboard)/layout.tsx serveert de LandingPage al voor anonieme bezoekers op /.

De / route ging via de (dashboard) route-group; ingelogde gebruikers zagen geen duidelijke dashboard-URL.

Nieuwe app/page.tsx wrapper: ingelogde gebruikers worden naar /dashboard geredirect, anonieme bezoekers zien direct de landingpage.

scripts/sync-env-to-railway.sh en generate-prod-env.mjs voor consistente env-var-deploys naar Railway.

0 1px 2px + 0 4px 12px + 0 16px 40px zodat de kaarten duidelijk boven de pagina lijken te zweven.

text-shadow met currentColor zodat elk cijfer gloeit in zijn eigen accent (paars, teal, amber).

Glanzende top-highlight (inset 0 1px 0 rgba wit), subtiele bottom-dimming en diepe drop shadow geven een premium iOS-icon gevoel.

color #ffffff, background rgba(255,255,255,0.14), border rgba(255,255,255,0.28), dot glow sterker.

Actieve taaloptie (NL) was donker en niet zichtbaar op donkere hero achtergrond.

Nav zonder .sn-nav-pill klasse krijgt witte tekst voor de taalknop.

Onderkant van de hero card voelde te abrupt — weinig ruimte binnen de card onderaan waardoor de witruimte daaronder relatief groot leek.

Bottom padding meer dan verdubbeld zodat de card visueel langer is en de proporties kloppen.

Solid teal knop zag er goedkoop uit op de donkere hero achtergrond.

Witte knop (#ffffff) met donkere tekst (#0a1a17) — stijl die premium SaaS-sites op donkere achtergronden gebruiken.

color rgba(255,255,255,0.88), background rgba(255,255,255,0.08), border rgba(255,255,255,0.18).

Primaire knop: solid teal gradient. Secundaire knop: transparant/glass met witte rand en witte tekst.

Bottom-margin van de hero card op 0 gezet zodat alleen de 64px sectie-ruimte van .sn-calc de overgang bepaalt.

GrowthCalculator had 64px bovenmarge waardoor er te veel witruimte zat tussen de hero card en de eerste sectie.

margin-top: 64px → 24px.

Onderkant van de hero card had geen marge, waardoor de witruimte onderaan groter leek dan links/rechts/boven.

margin: 14px op alle vier zijden zodat de ruimte rondom gelijk is.

Lichte blauwtint zichtbaar tussen hero-card en volgende sectie door de ambient gradient-orbs op .sn-root.

--bg-base: #ffffff, .sn-root::before en ::after display:none gezet.

De hero was full-bleed en had een donker→wit gradient nodig als overgang naar de rest van de pagina.

Hero krijgt margin: 14px en border-radius: 20px — zit nu als een afgeronde kaart op de lichte pagina-achtergrond. De gradient-bridge (sn-hero-bridge) is verwijderd, overgang is nu gewoon wit.

Eén stap verder terug in de git-history, vóór de navy-hero aanpassing van dd61ca1.

Na de reset naar 255d1ea had de hero nog een teal/groene achtergrond (#050d0b). Gebruiker wilde terug naar de versie vóór de groene tint, met de originele donker-navy hero (#050816).

Beide bestanden hard gereset naar commit dd61ca1 — "Hero: donker navy achtergrond met één teal accent". Hero achtergrond is weer #050816 (navy) in plaats van #050d0b (groen-tint).

Vandaag waren er meerdere visuele rondes geweest (light cream body, hero ook cream, pricing dividers, etc.) die de homepage steeds verder lieten afdrijven van wat live op senly.io stond. User wilde terug naar die referentie-versie

Beide bestanden hard gereset naar de staat vlak voor "Light cream body" (commit 255d1ea — Maximale Framer Motion upgrade). 968 regels override-CSS verwijderd, 84 regels LandingPage.tsx-wijzigingen ongedaan. Hero heeft weer de dashboard-ghost + spotlight + custom cursor + grid + dark canvas. Body is weer dark/white ipv cream.

Senly.io heeft subtiele horizontale divider-lijntjes die de secties binnen een card scheiden. Localhost miste die

border-top met padding/margin op .sn-price-desc geeft de eerste divider (prijs → omschrijving). Op de featured Growth-card komt ook een tweede border-top op .sn-price-features voor extra ritme (omschrijving → features)

overflow-x: hidden op body en .sn-root triggerde een browser-quirk: de browser verandert overflow-y automatisch van visible naar auto wanneer overflow-x op hidden staat. Daardoor werd .sn-root zelf een scroll-container terwijl zijn scrollHeight bijna gelijk was aan zijn clientHeight (geen scroll-ruimte) — viewport-scroll werd opgeslokt en de pagina kon niet meer bewegen. Op andere pagina's viel het niet op omdat ze minder content hebben

overflow-x: hidden vervangen door overflow-x: clip op zowel body (globals.css) als .sn-root (landing.css). clip knipt overflow zonder het element tot scroll-container te maken — exact wat we hier nodig hebben. Gevalideerd via Chrome MCP: window.scrollY beweegt nu correct van 0 tot 1700+ tijdens scroll

Vier ambient orbs met filter: blur(80px) op de hero — enorme paint-cost per scroll-frame

Filter volledig weg, opacity 0.35. Visueel nog zacht maar veel goedkoper.

body::before in globals.css zat als fixed SVG-textuur op z-index 9999 over de hele viewport. Browser moest hem elke frame herevalueren tijdens scroll, ook al was hij visueel marginaal

display:none — landing voelt schoner en cheaper.

Marquee-animaties draaien nu in eigen compositor layer en kunnen niet meer indirecte repaints triggeren in de rest van de pagina

Was overbodig — kostte continu GPU-memory zonder hoorbaar voordeel

Nav had nog rgba(255,255,255,0.72) tekstkleuren — wit op cream = onzichtbaar

Logo #0a0e1a, menu-links #475569, inloggen-pill blijft dark, taal-toggle krijgt witte achtergrond met dark border

(1) onScroll handler vuurde elke wheel-event en kon scrolled-state rapid togglen rondom drempel 40px; (2) HeroV2 had useScroll + useTransform parallax op orbs die elke scroll-frame herrekend werd; (3) HeroV2 mousemove handler bleef CSS-vars updaten ook al was spotlight uit; (4) permanente will-change op nav-inner met 5 properties; (5) backdrop-filter blur(24px) op nav-pill

onScroll nu rAF-throttled + hysteresis (pill aan bij >80px, uit bij <40px), useScroll/useTransform parallax weg uit HeroV2, mousemove handler verwijderd, custom cursor + dashboard-bg + spotlight + grid-bg + noise-overlay JSX elementen weggehaald, nav backdrop-filter terug naar 10px, marquee tracks krijgen eigen GPU layer via translateZ(0)

Voorkomt rubber-band scrolling op macOS dat soms hapering veroorzaakte

Hero had nog dark teal radial-mesh achtergrond — knipte hard met cream body eronder

Hero nu cream #f6f5f1 met zachte teal accent-orbs (opacity 0.5, blur 80px) als ambient hint

Title #0a0e1a zonder text-shadow, sub #475569, bullets #64748b, badge teal-on-light, secondary button white-outline ipv glass

rgba(255,255,255,0.92) bg + zachte border + soft shadow ipv dark glass — leesbaar op cream

Allemaal dark-only effects die niet meer bij lichte hero passen

Niet meer nodig want hero is al cream — geen overgang meer tussen secties

CSS smooth-scroll forceerde elke wheel-event door browser-animatieloop, waardoor scrollen schokkerig voelde op trackpad/muiswiel

Native scroll teruggezet — instant en zonder hapering

backdrop-filter is de duurste CSS-operatie tijdens scroll — moet voor elke kaart de achtergrond opnieuw blurren bij elke scroll-frame. Op meerdere kaarten tegelijk = paint-jank

Alle cards (calc, marquee, trust, vs, price, testi, clock, bento, fc-tab) hebben nu solide rgba(255,255,255,0.92-0.96) bg met border + shadow voor diepte. Visueel net zo premium, performance 10× beter

Twee 1400×1400 radial-gradient pseudo-elements op position:fixed forceerden permanent paint van de hele viewport bij elke scroll

Orbs nu absolute met begrensde 900×900 footprint — paint één keer en scrollen mee uit beeld. Compositor-werk geëlimineerd

Permanente will-change op orbs en nav-pill kostte continu GPU-memory zonder voordeel. Alleen tijdelijke translateZ(0) op nav-inner gehouden voor de pill-morph

Slider-labels stonden nog op rgba(255,255,255,0.52) — wit op cream = onzichtbaar

Labels nu #475569, strong-waarde teal #0d9488, ticks #94a3b8

Cards hadden verschillende hoogtes door verschillende content, CTA-knoppen niet uitgelijnd

Features-lijst krijgt flex:1, CTA-button margin-top:auto → kleeft altijd aan onderkant. Padding ruimer, gap groter (20px). Gelijke kaart-hoogtes en strakke uitlijning

Subtiele teal-fade gradient bovenin, dikkere teal border (1.5px), prominentere shadow met dual glow. POPULAIRST badge groter (8x20px), stevigere shadow

Track op rgba dark-tint ipv glas, thumb met white core + teal ring + soft glow

Bestaande regel had wit→grijs gradient-clip die op cream achtergrond letterlijk wit op wit werd

Background-clip uitgezet zodat de inline color (paars/teal/oranje) doorkomt

rgba(255,255,255,0.65) tekstkleur op wit → onzichtbaar

Chip-naam expliciet #0a0e1a + chip bg iets dieper voor contrast

Featured amount had wit→mint gradient op witte bg + card had overflow:hidden

Amount-gradient nu teal→deep-teal (zichtbaar), overflow:visible op card, badge weer volledig zichtbaar

Fixed ambient orbs + veel backdrop-filter blur(20px) op cards = dure repaints elke scroll-frame

will-change + translateZ(0) op nav en orbs, blur teruggebracht naar 8px op marquee/trust/vs chips, contain:layout op zware sections

Alle secties hadden eigen dark bg (#060e0d / #0a1c1b) waardoor visuele knipperingen tussen secties; voelde als losse blokken

Hero blijft dark, alles eronder is één doorlopend cream canvas met zachte teal ambient hint

220px gradient die door 5 tussenstadia (#060e0d → muted greys → cream) loopt voor luxe overgang

rgba(255,255,255,0.7-0.85) bg + blur + zachte dark borders + soft shadows ipv dark glass

Dark CTA card valt nu op tegen cream achtergrond voor dramatische focus

De "Hoe het werkt" sectie had geen enkele animatie — enige sectie op de pagina zonder Framer Motion

Stagger section head, scale+fade clock entrance, AnimatePresence timebadge wisseling, stagger step cards van rechts

Alle section heads gebruiken nu één consistent stagger-parent patroon met 0.1s tussenpoos per child

Dezelfde useTilt als pricing/bento cards, plus whileHover y:-4 lift en stagger voor sterren en auteur

Eyebrow → h2 → body → actions → foot verschijnen elk 100ms na elkaar voor maximale impact

Alle section heads vervangen door motion.div variants={secHead} met children die secHeadItem gebruiken

Design DNA (dark teal, glassmorphism, glow, eyebrow pills) zat alleen impliciet in code — niet herbruikbaar voor nieuwe sessies

15-sectie design skill met color tokens, typografieschaal, spacing systeem, glass card patronen, Framer Motion varianten, verboden patronen en kwaliteitscheck per sectie

Tussen alle premium dark secties zaten witte gaten die het luxe gevoel braken

Root nu permanent donker met diepere teal ambient glows die over de hele pagina lopen

Donkere base met meervoudige teal radial glows, glow-effecten op clock hands en active steps, capsule eyebrow-pills

Glass nodes met blur, gloeiende teal icon backgrounds, premium hover liften

Donkere base met dubbele teal radial glows + subtiele grid, glass pill-tabs met teal active glow, gloeiende dots-indicator

Glass marquee cards met blur, donkere fade-mask aan beide kanten, icon shadows

Calc-widget was flat wit en voelde niet als hetzelfde premium product als de hero

Dark glass cards met blur+saturate, teal gloeiende metric-nummers, premium dark tabs en input field, teal CTA button met dubbele glow

Pricing cards waren wit op licht — geen wow-effect tussen de andere donkere secties

Donkere base met grid + teal radial glows, glassmorphism cards met inner highlight, featured-tier met dubbele teal glow, premium slider met gloeiende thumb

Glassmorphism cards op donkere base, gloeiende quote-icoon, dunne teal top-accent gradient, hover lift met teal aura

Dark glass cards met teal radial spotlight achter de calc, witte logos met juiste invert filter

Eyebrows op donkere secties krijgen nu een echte capsule-pill stijl ipv vlakke tekst — voelt als Linear/Stripe

Vier donkere hoek-gradienten over lichtere kern — geeft echte diepte en focus op de content

Opacity tot 0.36, blur 45px, positie iets omlaag zodat hij de heading verlicht

text-shadow van 0.25 naar 0.55 opacity — heading gloeit nu zichtbaar

Border van 0.20 naar 0.28, shadow 0.60 zwart, subtekst van 0.62 naar 0.72

Opacity verhoogd, blur verminderd van 70px naar 55px voor scherpere lichtspot

Subtiele text-shadow zodat de witte titel loskоmt van de achtergrond

Achtergrond van 0.06 naar 0.10, border van 0.12 naar 0.20, teal glow shadow toegevoegd

Kleur van donker teal-vivid naar helder #5eead4, border opacity omhoog, box-shadow glow

Achtergrond was overal even donker — geen diepte of contrast

Meervoudige radiale gradienten als basis, orb-1 en orb-4 helderder, nieuw lichtpunt bovenaan midden (orb-6 met bijna-wit teal), grid-masker vergroot voor meer zichtbaarheid

Alle bezoekers zagen dollartekens, ook Europese bezoekers voor wie euro relevanter is

Tijdzone-detectie (Europe/* → €, overig → $) zonder API-call. Alle prijzen op de landingspagina — chips, vergelijkingskaarten, pricing, voetteksten — schakelen mee

Na omzetten naar donkere achtergrond bleef de tekstkleur #475569 (grijs) — onzichtbaar op donker

Tekst overridden naar rgba(255,255,255,0.82), checkmark-kleur naar #5eead4, sub-tekst en spaarbalk aangepast

Vergelijkingssectie viel uit toon met de hero

Donkere #0a1c1b achtergrond + grid-patroon + teal glow orb, tekst en kaarten aangepast

CTA-sectie had lichtblauwe achtergrond die niet aansloot bij het merkgevoel

Zelfde hero DNA: #0a1c1b + grid + teal glow; tekst wit, knoppen teal solid en glazen outline

Achtergrond was navy, em-gradient bevatte hemelsblauw buiten het merkpalet

Achtergrond gewijzigd naar #0a1c1b teal-donker, em-gradient puur teal #5eead4 → #0d9488

Vaste orbs in achtergrond iets meer zichtbaar gemaakt voor doorgaande teal sfeer door lichte secties

De donkere primary button loste op in de hero-achtergrond, en de witte secondary button stak te hard af.

Hero-context CSS-overrides toegevoegd. Primary: solid teal gradient (#17c4b0→#0d9488) met glow — merkkleur als CTA. Secondary: transparante glazen outline met witte tekst en backdrop-blur. Play-icoon ook aangepast naar glass-stijl.

Hero achtergrond: #0a1c1b — dit is dezelfde hue (174°) als de teal-accentkleur #14b8a6, maar verdonkerd naar 11% lightness. Alle diepte-orbs en de bridge-gradient gebruiken nu dezelfde RGB-verhouding (G≈B, H≈174°).

De brug tussen hero en pagina liep via neutraal grijs, zonder merkkleur.

Bridge-gradient aangepast: donker teal-zwart → midtones in de exacte logo-teal (#0d9488 / #14b8a6) → lichte pagina-achtergrond. De merkkleur vormt nu het visuele bindmiddel van de overgang.

Eerdere #050d0b achtergrond had een groen-zwaar tint (G>B) die niet overeenkomt met de balanced teal van het Senly-logo.

Achtergrond gewijzigd naar #061011 (G=B, ware teal-hue). Alle diepte-orbs aangepast naar rgba met gelijke groen- en blauwwaarden zodat de donkere tonen in dezelfde kleurenfamilie vallen als het logo.

Orb-1 opacity verlaagd van 0.42 naar 0.22, orb-4 van 0.10 naar 0.05. Teal is nu een zachte atmosferische hint op de donkere achtergrond — merkkleur aanwezig zonder opdringerig te zijn.

De hero-achtergrond (#050816) en gradient-accenten hadden een blauw/indigo tint die afweek van het teal-groene merklogo.

Achtergrondkleur aangepast naar #050d0b (donker teal-zwart). Hero diepte-orbs omgezet naar donker forestteal. --accent-grad, hero-tekstgradient, SVG-onderlijning en alle #0891b2-accenten door de hele pagina vervangen door teal-varianten (#5eead4 → #14b8a6 → #0d9488).

Vijf teal/groene orbs tegelijk gaven een overweldigende groene waas die niet premium oogt.

Orb-1 blijft het enige sterke teal-accent (links, merkkleur). Orb-2 werd omgezet naar diep oceaanblauw voor diepte en contrast. Orbs 3 en 5 worden donker navy voor volume. Orb-4 is nauwelijks zichtbare teal-hint centraal. Ambient page-orbs teruggebracht tot vrijwel nul. Resultaat: donker navy met één herkenbaar teal-lichtpunt.

Hero-mesh en sectie-achtergronden bevatten indigo, violet en roze accenten die niet passen bij de teal merkidentiteit van Senly.

Alle orbs (indigo orb-2, violet orb-3, roze orb-5) en ambient orbs omgezet naar teal-varianten (diep teal, cyaan-teal, donker teal). Pricing- en testimonials-secties eveneens gecorrigeerd. Palet is nu consequent teal + cyaan — 100% in lijn met de branding.

De harde grens tussen de donkere hero (#050816) en de lichte pagina zag er slordig uit — eerdere pogingen met een overlay of donkere gradient in de trust-sectie maakten tekst onleesbaar of creëerden een vage grijze wolk.

Aparte bridge-div toegevoegd tussen hero en trust-sectie. Bridge heeft de lichte pagina-achtergrond als basis met een donkere ::before-overlay die van boven naar transparant fadeout, plus een subtiel teal-glow-accent midden in de overgang. Trust-sectie teruggezet naar schone lichte achtergrond zodat alle tekst volledig leesbaar blijft.

Pagina onder de hero was puur wit en saai.

Paginabasis gewijzigd naar licht blauw-grijs (#f7f9fc). Ambient-orbs versterkt (teal links, indigo rechts). Pricing, testimonials, clock en trust-secties kregen elk eigen gradient-accenten in teal, blauw en violet.

De hero-achtergrond zag er vlak en weinig indrukwekkend uit op een wit canvas.

Donkere achtergrond (#050816) met 5 grote geanimeerde gradient-orbs (teal, indigo, violet, cyaan, roze). Grid-patroon, noise-textuur en witte tekst. Nav-links worden wit op de donkere hero en schakelen naar donker zodra de pill-toestand actief wordt bij scrollen.

Blog, blogartikelen en partnerspagina hadden een andere, eenvoudigere menubalk dan de homepage.

PublicNav component volledig vernieuwd: zelfde fixed pill-nav als de homepage, met Platform, Blog, Prijzen en Partners. Morph-animatie naar pill bij scrollen, active-state per pagina en verbeterd mobiel menu.

senly.io had geen contentpagina's voor organisch verkeer via Google en AI-modellen.

Blog-overzichtspagina (/blog) en individuele artikelpagina's (/blog/[slug]) aangemaakt met JSON-LD BlogPosting, OpenGraph, hreflang (nl-NL + nl-BE), automatisch gegenereerde inhoudsopgave en gerelateerde artikelen.

Volledige affiliate-pagina met commissieniveaus (20–30% terugkerend), stappenoverzicht, rekenmachine-sectie, FAQ en aanmeld-CTA.

sitemap.ts genereert automatisch URLs voor alle publieke pagina's en blogartikelen. robots.ts staat expliciet AI-crawlers toe (GPTBot, PerplexityBot, Claude-Web, Google-Extended etc.) voor maximale GEO-zichtbaarheid.

layout.tsx uitgebreid met volledige OpenGraph/Twitter Cards, hreflang nl-NL + nl-BE + x-default, SoftwareApplication JSON-LD schema en verbeterde title-template voor alle pagina's.

De support-chat was alleen zichtbaar na inloggen in het portaal.

Zelfstandige widget toegevoegd aan de landingspagina in huisstijlkleur teal. Bevat een AI-assistent (reageert direct), een helpcentrum-tab met zoekfunctie, en een medewerker-optie waarbij de bezoeker zijn e-mailadres achterlaat.

De scroll-jacked dashboard-tour (ZoomScene + DashboardTour) is volledig verwijderd uit de landing.

De eerste versie gebruikte een donker dark-mode mockup dat nauwelijks leek op het echte platform.

Volledig herbouwd als licht-thema replica met wine/maroon bureau-branding: juiste header met gebruikersprofiel, icon-rail sidebar, KPI-kaarten, omzetgrafiek, activiteitenfeed, klantkaarten, content kalender, taken en CRM-pipeline — allemaal exact zoals in het echte dashboard.

Bezoekers zagen het dashboard alleen klein in de hero — geen gevoel hoe het écht voelt om erin te werken.

Nieuwe scroll-sectie tussen trust en platform: het dashboard zoomt van klein tablet-formaat naar volledige viewport, daarna scrol je verticaal door de inhoud (interne scroll), en als je onderaan bent gaat de pagina automatisch verder. Met fade-in CTA "Ervaar Senly live" onderaan.

De assistent kreeg alle 20 voorgaande berichten mee en raakte verward — als er ergens "dankjewel" stond reageerde hij met "graag gedaan" op een nieuwe vraag.

Prompt herstructuur: laatste vraag staat apart als "actuele vraag", oude berichten zijn alleen context. Geschiedenis beperkt tot 8 berichten zodat focus op de actuele vraag blijft.

Elke 4 seconden polling sleepte je terug naar het einde van de chat — terugscrollen om iets opnieuw te lezen was onmogelijk.

Auto-scroll werkt nu alleen als je al onderaan zit (binnen 80px). Scroll je omhoog, dan blijf je waar je bent tot je zelf weer naar beneden gaat.

Antwoorden van de assistent kwamen als één muur van tekst met zichtbare asterisken (**term**) in plaats van vetgedrukte woorden.

Bot-bubbles renderen nu markdown-stijl opmaak: alinea's krijgen ruimte tussen elkaar en termen tussen **dubbele asterisken** worden vetgedrukt. De AI-prompt is ook bijgewerkt zodat antwoorden altijd in korte alinea's worden geschreven.

De AI-assistent was geconfigureerd met de Anthropic SDK, maar de ANTHROPIC_API_KEY was niet ingesteld in de productie-omgeving. Daarna bleek ook het Gemini contents-object formaat niet te werken met de bestaande SDK-versie.

Omgeschakeld naar Gemini (dezelfde provider als caption-generator). Prompt wordt opgebouwd als platte tekst-string — identiek aan hoe de caption-generator het doet. Bot reageert nu direct op vragen over het platform.

Klanten moesten wachten op een handmatig antwoord terwijl de meeste vragen over standaard platformfuncties gaan.

De AI-assistent reageert direct op vragen in de support-widget. Hij kent het volledige platform (dashboard, klanten, taken, financieel, tools, meetings en meer) en geeft beknopte, juiste antwoorden in de taal van de gebruiker.

Zodra een klant aangeeft een echte medewerker te willen ("verbind met medewerker"-knop of vrij getypte tekst), zet de bot de room in human mode en stuurt een bevestiging. De support-inbox toont het gesprek direct met een oranje "Medewerker gevraagd"-badge.

Tijdens het genereren van een antwoord zijn drie bouncende stippen zichtbaar. Bot-berichten hebben een herkenbaar slotpictogram-avatar en worden gelabeld als "Assistent".

De demo-tenant raakte na verloop van tijd leeg (taken weg, klanten weg) en de fake-data kon alleen via Railway-shell terug worden gezet. Onhandig om vóór elke sales-demo te moeten.

In Instellingen → Onderhoud staat nu een "Demo-data resetten"-knop (alleen zichtbaar voor super-admin). Eén klik bouwt het demo-bureau opnieuw op: 26 klanten, 55 open taken, designs, financiën, CRM-leads en onboarding-board. Duurt 30-60s, eigen tenants blijven onaangeroerd.

De Launchpad is uitgebreid met taken voor social accounts koppelen, klantdossiers invullen, content plannen, eerste boeking ontvangen, e-mailcampagnes sturen en designs importeren. Completion wordt automatisch afgeleid uit de werkelijke database-state.

De intro-animatie op de Launchpad gebruikt nu het logo uit de huisstijl-instellingen van het bureau. Heeft een bureau nog geen logo ingesteld, dan wordt het platform-logo getoond.

Super-admin kreeg de melding "Rol niet gevonden" bij het verwijderen of bewerken van een custom rol, omdat de API altijd filterde op tenantId van de ingelogde gebruiker.

Super-admin mag nu elke rol opzoeken en beheren, ongeacht welk bureau de rol aangemaakt heeft.

Bij het allereerste bezoek aan de Launchpad speelt een korte animatie af: het logo verschijnt in het midden van het scherm met een persoonlijke begroeting, waarna het vloeiend wegglijdt. Daarna nooit meer te zien.

De rollen-pagina filterde op tenantId van de ingelogde gebruiker. Super-admins hebben tenantId=null, waardoor rollen die bij een bureau horen onzichtbaar bleven.

Super-admin zonder bureaufilter ziet nu alle custom rollen van alle bureaus op de rollen-pagina.

De chat-knop rechtsonder stond altijd aan, ook voor admins die er geen behoefte aan hebben of een schoon scherm willen tijdens een demo.

In Instellingen → Voorkeuren staat nu een toggle "Klantenservice-chat tonen". Direct effect — geen reload nodig. De voorkeur wordt per browser onthouden.

De standaard ruimere weergave is prettig voor grote schermen maar voelt voor power-users en laptops aan als verspilde ruimte.

Toggle "Compacte weergave" in Instellingen → Voorkeuren verkleint paddings en regelhoogtes globaal. Direct zichtbaar.

Zodra je een page-tour wegklikte was er geen makkelijke manier om hem opnieuw te starten — handig bij nieuwe teamleden of om iets te laten zien tijdens een demo.

Knop "Rondleidingen resetten" in Instellingen → Voorkeuren wist alle voltooide tours. De volgende keer dat je een pagina bezoekt verschijnt de tour weer.

De drie velden over post-tijdstippen zaten verstopt in het algemene instellingen-paneel, terwijl dat eigenlijk een feature-specifieke setting is.

Sectie verwijderd uit het paneel. De voorkeuren worden intern nog wel respected, maar staan niet meer als afleiding tussen de algemene voorkeuren.

Via het tandwiel-menu is er nu een directe link naar de rollen-pagina waar je aangepaste rollen kunt bekijken en verwijderen.

Gebruikers met een aangepaste rol (bijv. "op") kregen in de gebruikerslijst toch "Manager" te zien als rol-badge.

De badge toont nu de naam van de aangepaste rol als die is ingesteld, en valt anders terug op de standaard rolnaam.

De kop en eyebrow van de gebruiker-toevoegen-modal tonen nu "Nieuwe gebruiker" en "Gebruiker toevoegen" in alle talen, in plaats van de rol-specifieke "Nieuwe manager".

Vanuit super-admin niveau bleven nieuw aangemaakte managers/setters onzichtbaar omdat de gebruikerslijst alleen platform-niveau accounts toonde. De gebruiker was wel aangemaakt, maar leek "weg".

Super-admins zien nu alle gebruikers uit alle bureaus in één overzicht. Naast naam en rol staat een bureau-tag (of "Platform"), en er is een extra dropdown om snel op een specifiek bureau te filteren. Bureau-admins blijven uiteraard hun eigen tenant zien.

Bij het kiezen van permissies voor een nieuwe rol braken de labels (bijv. "Klantenlijst en klantprofielen bekijken") over meerdere regels en werd de tekst afgekapt — moeilijk te zien welke rechten je precies gaf.

Zodra je naar stap 2 (permissies kiezen) gaat, klapt de modal soepel uit van 480px naar 920px breed. Alle permissie-labels en beschrijvingen staan nu rustig op één regel.

De kop "Manager toevoegen" (en andere modal-titels) stond in een dik en groot heading-formaat — voelde zwaarder dan de rest van de UI.

Modal-titels gebruiken nu een rustigere typografie (18px, weight 500) die beter aansluit op de Senly-stijl en minder visueel domineert.

Het veld voor het koppelen aan een externe CRM-id stond zonder uitleg dat het optioneel is, en de hint verwees naar een externe tool bij naam — kon verwarrend zijn.

Label heet nu "Externe CRM-gebruiker (optioneel)" met een neutrale uitleg, en het veld wordt niet meer per ongeluk auto-ingevuld door de browser met een e-mailadres.

Vanuit het platform-niveau gaf het toevoegen van een manager, setter of sales manager een foutmelding ("kunnen niet vanuit super-admin context worden aangemaakt"). Je moest eerst inloggen als bureau-admin om iemand toe te voegen — onhandig wanneer je vanuit het overzicht snel iemand wilde toewijzen.

Wanneer je vanuit platform-niveau een gebruiker aanmaakt verschijnt er nu een "Bureau / tenant" dropdown. Kies het bureau en de manager/setter/sales-manager wordt direct in dat bureau geplaatst — met de juiste scope, custom rollen en branding. Voor ADMIN-rollen mag je het bureau leeglaten als je nog een platform super-admin wilt toevoegen.

De knop om widgets te verslepen stond op elke pagina in de topbar, ook waar het geen functie had — visuele ruis op pagina's buiten het dashboard.

De knop is nu alleen zichtbaar op het dashboard zelf. Op andere pagina's blijft de topbar opgeruimd.

Custom rollen had een eigen menu-item, los van waar je ze daadwerkelijk gebruikt — bij het uitnodigen van een teamlid. Twee schermen, twee stappen, onnodige zoektocht.

De aparte Custom rollen-pagina is uit het menu gehaald. In plaats daarvan staat in de gebruiker-toevoegen modal een nieuwe rol-optie "+ Aangepaste rol aanmaken…". Selecteer hem, klik Aanmaken, en de modal springt naar een tweede stap met de permission-tree. Daar configureer je naam + permissies, klik nogmaals op aanmaken en zowel de rol als de gebruiker zijn in één keer aangemaakt en aan elkaar gekoppeld.

Eenmaal aangemaakte rollen verschijnen automatisch als opties bij het uitnodigen of bewerken van volgende teamleden, zodat je een "Content-medewerker"- of "Junior setter"-rol kunt hergebruiken zonder telkens opnieuw permissies te configureren.

De vier system-rollen waren rigide — een teamlid dat wel content moet kunnen aanmaken maar niet bij financieel mag, of een junior setter zonder pipeline-rechten, was niet mogelijk zonder workarounds.

Er is een nieuwe pagina **Instellingen → Custom rollen** waar je eigen rollen aanmaakt met een fijnmazige permissie-tree. 14 modules met 70+ losse permissies, elke module heeft een master-toggle en sub-checkboxes. Bij het uitnodigen of bewerken van een gebruiker kun je voortaan zowel een system-rol als een custom rol kiezen.

De catalog dekt Klanten, Taken, Financieel, Meetings, E-mail, Content & designs, CRM, Onboarding, Tools & AI, Rapporten, Team, Instellingen, Affiliate en Audit-log. Per module zijn specifieke acties (bekijken, aanmaken, bewerken, verwijderen, etc.) afzonderlijk in te schakelen.

Het helpcentrum dekte de basis, maar dagelijkse vragen over advanced features (per-klant beschikbaarheid, drip-campaigns, lead-scoring, custom webhooks, white-label, mobiele PWA, etc.) waren nog niet opgenomen. Bureau-eigenaars moesten support contacteren voor zaken die ook zelf op te zoeken hadden kunnen zijn.

Het helpcentrum bevat nu 270 artikelen, verdeeld over 20 categorieën. Nieuwe secties Mobile/PWA, Best practices en Launchpad zijn toegevoegd; bestaande secties (Klanten, Taken, Financieel, Tools, CRM, Meetings, E-mail) zijn fors uitgebreid. Bestaande artikelen zijn gecontroleerd op recente platform-updates.

Niet alleen Nederlands — alle 270 artikelen zijn beschikbaar in EN (natural professional), DE (Sie-vorm, B2B), en FR (vouvoiement). Talen wisselen in het profielmenu en het helpcentrum schakelt automatisch mee.

De Launchpad-titel had font-weight 700 (vet), terwijl Takenbeheer font-weight 500 gebruikt — visueel inconsistent.

font-weight van .lp-hero h1 verlaagd naar 500.

De vorige versie gebruikte een groter font, waardoor de letters zwaarder oogden dan op Takenbeheer of Statistieken. Launchpad gebruikt nu exact dezelfde formaat-clamp (30-40px) als die pagina's.

De display-font Ciutadella rendert zonder expliciete font-weight en tight letter-spacing iets dunner. Launchpad gebruikt nu dezelfde styling (font-weight 700, letter-spacing -0.04em, line-height 1.05) als de andere koppen, dus 1 visuele lijn door het hele portaal.

Nieuwe gebruikers wisten niet welke instellingen ze moesten doen om het portaal volledig te benutten — huisstijl, eerste klant, e-mail-koppeling, agenda-integratie, 2FA, AI-sleutel, etc. Allemaal nuttig maar verspreid over verschillende pagina's.

Bovenaan de zijbalk verschijnt nu een Launchpad-knop met een gepersonaliseerde checklist. Per categorie (Basisinstellingen, Klanten, Meetings, E-mail, Tools) zie je wat er nog open staat met directe knoppen naar de juiste pagina. Voortgang wordt automatisch herkend op basis van de echte instellingen — zodra je bv. een profielfoto uploadt, vinkt die taak zichzelf af.

Admins krijgen alle 14 taken inclusief huisstijl, team-uitnodigen en integraties. Managers zien 9 taken zonder admin-only zaken. Appointment Setters krijgen 6 sales-gerichte taken (profiel, e-mail-koppeling, kalender, eerste lead). Sales Managers krijgen daar ook de pipeline-configuratie bij.

Een taak die irrelevant voor jou is kun je per stuk overslaan. Zodra alle taken óf voldaan óf overgeslagen zijn, verdwijnt de Launchpad-menuknop uit de zijbalk en kun je hem later altijd nog rechtstreeks bezoeken via /launchpad om een taak weer aan te zetten.

Recent toegevoegde modules zoals Meetings (boekingen), de gekoppelde e-mailaccounts en het affiliate-programma stonden nog niet in het helpcentrum. Bureau-eigenaren moesten een supportticket aanmaken voor vragen die in een artikel beantwoord hadden kunnen worden.

27 nieuwe artikelen toegevoegd: 13 voor Meetings (calendars aanmaken, boekingslink delen, beschikbaarheid, agenda-koppelingen, branding, notificaties, test-mail, verzender-keuze, annuleren/verplaatsen), 5 voor E-mail (Gmail/Outlook/IMAP koppelen, inbox, campagnes, handtekening, token-issues), 4 voor Affiliate (programma-uitleg, verwijslink, commissies, percentages), plus extra vragen over Cmd+K snelzoeken, widget-aanpassing, profielfoto en tijdzone-instellingen.

Het zoek-paneel (Cmd+K) toonde slechts 4 pagina's en miste de meeste recent toegevoegde modules zoals Meetings, CRM, Contentkalender, Onboarding, Affiliate, Updates en alle admin-secties.

Het paneel toont nu de volle navigatie — werkruimte-pagina's, persoonlijke pagina's en beheer-secties. Titels volgen direct de bestaande vertalingen (NL/EN/DE/FR), subtitles zijn voorzien van een korte beschrijving zodat je sneller herkent waar je heen wil.

Een setter of sales-manager zou via het zoek-paneel pagina's kunnen vinden die buiten zijn werkscope vallen (bv. Statistieken, Takenbeheer, Financieel).

Resultaten worden nu hetzelfde gefilterd als de sidebar: hideForSales-pagina's vallen voor sales-rollen weg, admin-only pagina's alleen voor admins, en Financieel volgt de viewFinance-permissie van de gebruiker.

Het icoon van Onboarding was identiek aan dat van Takenbeheer (allebei een vinkje-in-een-vakje) — verwarrend bij hover.

Onboarding heeft nu een raket-icoon, passend bij het "nieuwe klant aan boord brengen"-thema. De twee tabs zijn weer visueel te onderscheiden.

Bij het openen of refreshen van de Updates-pagina zag je een halve seconde de ruwe inhoud zonder opmaak voordat de styling werd toegepast.

De ~440 regels CSS van deze pagina staan nu in een echt stylesheet-bestand dat Next.js vóór de eerste paint laadt. Pagina komt direct strak op het scherm.

Bij een harde refresh zag je een halve seconde de Meetings-pagina zonder opmaak: blote knoppen, geen kalender-raster, geen kleuren. De pagina-styling werd pas na hydration ingeladen via een React-component.

De ~400 regels CSS staan nu in een echt stylesheet-bestand dat Next.js voor de eerste paint laadt. De pagina komt direct in de juiste vorm op het scherm.

De tijdzone-dropdown gebruikte het standaard browser-uiterlijk en stak af tussen de strakke input-velden.

Selects in de profiel-pagina hebben nu dezelfde hoogte, padding, rand en focus-kleur als de inputvelden, plus een custom chevron-pijl voor consistente weergave in alle browsers en zowel dark als light mode.

De tabbladen bovenaan de Meetings-pagina waren nog in het Engels — dat past niet bij de rest van de Nederlandse UI. Tekst is aangepast naar Kalender en Instellingen.

De zijbalk-tab heet voortaan Contentkalender in plaats van Kalender, zodat het verschil met Meetings (afspraken) direct duidelijk is. Ook vertaald in EN/DE/FR.

Bij het bewerken van een notificatie-mail (Afspraak geboekt, Herinnering, Annulering, etc.) moest je gokken hoe het eruit zou komen. De enige manier om het echt te zien was een echte boeking maken.

In de bewerk-dialog zie je nu rechts een live preview van de daadwerkelijke mail met dummy-data ingevuld. Werkt mee terwijl je typt.

Onder elke notificatie-bewerk-dialog staat een "Test verzenden"-knop. Eén klik en de mail (met je huidige conceptwijzigingen, mét [TEST]-prefix in het onderwerp) komt op je eigen mailbox aan. Geen echte boeking meer nodig om te checken.

Wie meerdere mailaccounts gekoppeld had, kon niet kiezen vanaf welk adres boekingsmails verstuurd werden — automatisch werd het eerst-gekoppelde adres gebruikt.

Bij het instellen van een calendar is er nu een "Versturen via"-dropdown waarin je per calendar het juiste mailaccount kiest. Alle bevestigingen, herinneringen, annuleringen en vervolgmails van die calendar vertrekken vanaf het gekozen adres.

De emojis bij Calendars, Beschikbaarheid, Integraties en Branding zijn vervangen door minimalistische line-icons in dezelfde stijl als de hoofdnavigatie. De icoon-kleur volgt de tab-tekst zodat de actieve tab vanzelf in de huisstijl staat.

De checkboxes in de Calendars-zijbalk gebruikten de standaard browser-blauw. Ze volgen nu de accent-kleur die in je huisstijl is ingesteld.

Wie het portaal in light-mode gebruikte zag bij een harde refresh kort een donkere versie verschijnen voordat het thema correct werd toegepast. De thema-keuze stond alleen in browser-opslag en de server kon dus niet weten welke variant te renderen.

Je thema-keuze wordt nu ook als cookie bewaard. De server kan die direct lezen en de juiste donker/licht-modus al in de eerste HTML-respons zetten. Geen donker-naar-licht sprong meer.

De huisstijl-kleuren werden al server-side gezet, maar het logo en de portaal-naam in de sidebar werden nog client-side opgehaald. Bij Cmd+R zag je daarom kort het standaard Senly-logo voordat jouw eigen logo verscheen.

Logo, portaal-naam en bedrijfsnaam worden nu mee-gerenderd in de eerste HTML-respons. De sidebar toont vanaf de eerste pixel direct jouw eigen branding.

De vorige fix dekte alleen dark-mode af. Wie het portaal in light-mode gebruikte zag tóch nog de Senly-teal flits omdat de light-mode CSS-regels de tenant-overrides overrulen.

De server zet nu de tenant-kleur in zowel de dark- als light-mode varianten klaar, zodat ongeacht je theme-keuze de juiste kleuren al vóór de eerste paint actief zijn.

Bij een harde refresh zag je eerst kort de standaard Senly-kleuren voordat jouw eigen huisstijl ingeladen werd. Dat kwam omdat de kleuren pas na hydration via JavaScript werden gezet.

De primary-color van je tenant wordt nu server-side opgehaald en in een inline <style>-tag mee-geleverd in de HTML. Browser kent de juiste kleuren al voordat de eerste pixel wordt geschilderd — geen "teal-flash" meer naar bordeauxrood, paars of welke kleur jouw bureau dan ook heeft.

Bij een hard refresh zag je eerst kort de default-layout (en lege activiteiten-feed), daarna sprong het naar jouw gepersonaliseerde versie. De widget-volgorde, breedtes en hoogtes stonden alleen in de browser-opslag, dus de server kon ze niet rendereen.

Dashboard-configuratie wordt nu in jouw account opgeslagen en server-side direct meegestuurd. De recente activiteiten worden ook al vooraf geladen, en de groet ("Goedenavond" etc.) volgt jouw profiel-tijdzone in plaats van de server-tijdzone. Bestaande layout uit je browser wordt eenmalig overgezet.

Op Meetings → Settings → Calendars zag je alleen een ingekort pad zoals /boek/.../slug. Om de echte link te delen moest je telkens een booking openen of de URL handmatig samenstellen.

Iedere kaart toont nu de volledige boekings-URL met een Kopieer-knop ernaast. Eén klik en de link staat op je klembord — handig om snel naar een klant te sturen.

Tijden in de meetings-module volgden alleen de browser-tijdzone. Een gebruiker die in zijn profiel een andere tijdzone instelde, zag op de meeting-detailpagina nog steeds de browser-tijd — verwarrend als je in een andere zone werkt dan je laptop.

De "Wanneer"-regel van een booking, de tijd-chips in de maand- en dagkalender en de "Laatste sync"-melding bij integraties gebruiken nu allemaal de tijdzone die je in Mijn profiel hebt gekozen.

Iedereen kreeg Nederlandse tijden te zien — onlogisch voor collega's die in een andere tijdzone werken.

In je profiel zit nu een tijdzone-picker (Amsterdam, Istanbul, New York, etc.). Alle datums en tijden in het portaal worden in jóuw tijdzone weergegeven. Bekijk je de activiteiten van een collega die in een andere zone werkt, dan zie je nog steeds jouw eigen tijd — geen mentale rekensommen meer.

Bij eerste page-load flikkerden tijden van UTC naar lokaal omdat server en browser verschillende tijdzones gebruikten.

Datum- en tijdformatters renderen nu altijd in Europe/Amsterdam, zowel server-side als in de browser.

Elke aanroep schreef een regel naar /tmp/li-connector-debug.log — kon de schijf op de productie-server vol laten lopen.

Logging gaat nu alleen nog naar de standaard server-log, geen losse bestanden meer.

Twee tools verwezen naar een hardgecodeerd lokaal Mac-pad, waardoor ze op de Railway-server stil faalden.

Binary wordt nu via PATH opgelost en yt-dlp is toegevoegd aan de Railway build-config, zodat beide tools voortaan werken op de live-omgeving.

Interne projectregel zorgt ervoor dat geen update meer onopgemerkt blijft. Tijden komen direct uit het deploy-moment in plaats van handmatig.

Nieuw AppNotification model + helper. Booking-created/cancelled/rescheduled triggeren een melding bij de host. Volgt de channels.inApp toggle per meeting-type. Nieuwe POST /api/notifications endpoint voor mark-all-as-read.

lib/email/outlook.ts met sendEmail() via /me/sendMail + auto refresh-token rotation. sendFromHostAccount routeert nu naar Gmail, Outlook of IMAP afhankelijk van de gekoppelde EmailAccount.

PATCH detecteert scheduledAt-wijziging en vuurt sendMeetingReschedule. PATCH+DELETE vuren sendMeetingCancellation bij status=cancelled.

Channels teruggebracht naar { email, inApp }. Voorkomt verwarrende toggles voor channels die nog niet aangesloten waren.

collectBusySlots() loopt nu via Promise.allSettled door alle providers parallel. Resultaten gecached per {userId,from,to} met 30s TTL + cache-covering zodat per-dag slots-calls binnen het eerder opgehaalde 60d-venster geen externe API-calls meer triggeren.

Nieuw GET /api/meetings/availability/first-available scant tot 60 dagen vooruit, vindt eerste dag met slots, en retourneert beide in 1 respons. BookingPage gebruikt dit zodat de pagina direct met data verschijnt — geen wachtende kalender meer.

User-velden bookingLogoUrl/Color/Name. Nieuwe tab in /meetings settings met logo-upload, color picker en live preview. /boek/[user] gebruikt deze branding met fallback naar Tenant.

Two-pane layout: links pane met logo/info, rechts pane in huisstijlkleur met tijdzone-pill, kalender + tijdsloten 50/50. Tenant-logo als favicon op de tab. Responsive: stack op mobiel.

Modal met E-mail/In-app tabs, "Ingeschakeld" toggle, recipients-sectie (Contact / Toegewezen gebruiker / Aanvullende e-mails). Bewerken per channel ipv inline uitklappen.

Lijst met channel-chips (E-mail / In-app) per notification. Klik edit-icoon voor subject + body + recipients per kanaal. requireApproval toggle verwijderd — alles wordt nu automatisch confirmed.

MeetingType.emailConfig (JSON) met bevestiging/herinnering/annulering. Tokens: {{attendeeName}}, {{hostName}}, {{meetingTypeName}}, {{date}}, {{durationMinutes}}, {{meetingUrl}}. Cron-reminder respecteert nu per-type hoursBefore.

sendFromHostAccount-helper: gebruikt EmailAccount van de host (Gmail OAuth of IMAP/SMTP) om mails te versturen. Fallback op Resend noreply zonder gekoppeld account.

Brand-namen, CSS-class prefixes, cookie-namen (senly_ref), DOM-events, Chrome-extensie protocol, email-templates en alle user-zichtbare teksten.

Per kalender-integratie (Google/Outlook/Apple) selecteer je welke sub-agenda boekingen ontvangt. createOutlookEvent gebruikt nu writeCalendarId (Google + Apple deden dit al).

listGoogleCalendars/listOutlookCalendars/listAppleCalendars + checkboxes-modal. Alleen aangevinkte agenda's tellen mee voor busy-slots. Standaard: alles.

AvailabilityPanel volledig herontworpen. Per dag aanvinken (was: handmatig slots toevoegen), tijdzone-dropdown, en datum-overrides voor vakantie/feestdag.

Buffer voor/na, min. aanmeldtijd, max. vooruit boeken in het edit-formulier.

ZOOM_CLIENT_SECRET had een extra teken (33i.p.v. 32 chars) in Railway, waardoor Zoom invalid_client teruggaf bij de token exchange.

Secret gecorrigeerd in Railway. Debug logs en tijdelijk /api/debug/zoom-config endpoint verwijderd.

req.url in de Zoom callback-route bevatte Railway's interne localhost:8080 adres, waardoor de redirect na de OAuth flow naar de lokale dev-server ging.

redirectWithToast gebruikt nu NEXTAUTH_URL als base-URL i.p.v. req.url.

hideForSales flag verwijderd van e-mail nav-item en isSalesRole redirect op /email/page.tsx verwijderd.

ZOOM_REDIRECT_URI was ingesteld op een localhost-URL in Railway, waardoor Zoom-koppeling in productie naar localhost:8080 redirectte.

getRedirectUri() negeert nu ZOOM_REDIRECT_URI als het een localhost-URL is maar NEXTAUTH_URL naar productie wijst.

Gebruikers zonder bureau-koppeling (tenantId null) kregen een lege foutpagina op /affiliate.

Zulke gebruikers zien nu het super-admin overzicht als fallback i.p.v. een API-fout.

Zoekbalk gebruikt nu een subtiele achtergrond-tint zonder zichtbare border.

Grote greeting met geaccentueerde naam, 4 live KPI-chips (open deals, meetings, calls, maandtarget) in de taskio-hero layout met fade-in animatie. Widget-tints versterkt van 4% naar 8% voor meer visuele diepte.

De nieuwe updatedAt kolom op ChatRoom was verplicht (NOT NULL) maar kon niet worden ingevuld voor de 8 bestaande rijen in productie. Prisma db push brak hierdoor en de service crashte.

updatedAt optioneel gemaakt (DateTime? @updatedAt). Bestaande rijen krijgen null, nieuwe en geüpdatete rijen krijgen automatisch een timestamp.

Team chat had één vaste "Iedereen"-groep. Geen manier om bv. een aparte sales-team chat of een managers-only kanaal te maken.

Iedere user kan via "+ Groep" knop in de team chat een nieuwe groep aanmaken: naam + beschrijving + handmatige ledenlijst. Bestaande "Iedereen"-groep blijft als system-groep met auto-membership voor alle tenant-users. Pill-tabs bovenaan voor snelle wissel met ongelezen-badge per groep.

Admin kan bij groep-creation een "auto-include rol" kiezen (alle setters / managers / sales managers). Users met die rol worden automatisch toegevoegd. Handig voor "Sales team" of "Management" groepen die altijd up-to-date moeten zijn.

ChatRoom krijgt: description, color, createdBy, isSystem (true voor "Iedereen"), autoIncludeRole. Nieuwe ChatRoomMember many-to-many tabel met lastReadAt per-user-per-room voor ongelezen-tracking.

/api/chat/groups (list + create), /api/chat/groups/[id] (read/update/delete), /[id]/members (add/remove), /[id]/messages (post), /[id]/poll (live updates per actieve room). Cross-tenant guards op alle endpoints via room.tenantId membership-check.

WebKit appearance + box-shadow explicit op none + padding/margin 0 — kill alle browser-default focus-ring styling op autofocus input.

Setters/managers aangemaakt vanuit super-admin context (Dylan = tenantId=null) kregen ook tenantId=null, waardoor affiliate-page weigerde met "Niet beschikbaar". Stilzwijgend broken.

API /api/users POST blokkeert nu expliciet wanneer super-admin een non-ADMIN rol probeert te maken. Heldere error met instructie om in te loggen als bureau-admin. AffiliateDashboard krijgt ook extra tip voor reeds-foutief-aangemaakte users.

Onderzoek: een Zoom General App in "Local Test" mode accepteert OAuth alleen via de door Zoom gegenereerde Authorization URL (marketplace.zoom.us/...test). Reguliere custom OAuth-flow werkt pas na Marketplace publicatie. Voor nu: app-owner installeert eenmalig via Zoom's "Add app now" knop. Voor andere users moet de app worden gepubliceerd (Zoom-review, dagen).

Klik "Bewerken" rechtsboven → dashed accent-outline + drag-grip per widget → sleep om volgorde aan te passen → klik "Klaar". Volgorde blijft per-user in localStorage staan. Zelfde patroon als het bureau-dashboard.

Setters en sales managers konden geen eigen referral-link genereren — alleen ADMIN-rol mocht. Daardoor konden zij geen klanten verwijzen naar Senly en commissie verdienen.

lib/affiliate.ts: ADMIN-check verwijderd. Iedere tenant-user kan nu via /affiliate een eigen ref-link aanmaken, Stripe Connect koppelen en verwijzingen tracken.

/kalender (Metricool content-feature) verschijnt niet meer in de sidebar voor setters/sales managers + page-guard redirect naar /. Was per ongeluk nog zichtbaar.

Vier CSS-regels verwezen naar var(--bg-base) wat geen gedefinieerde CSS-variabele is, waardoor de Widgets-beheren modal en de Contacten detail-pane volledig doorzichtig waren.

Vervangen door var(--bg-elev) (solid #161a21 dark / #ffffff light) voor pane-backgrounds en var(--bg-deep) voor nested sub-elementen.

ZOOM_REDIRECT_URI op Railway gezet + tijdelijke /api/debug/zoom-config endpoint + console.logs in /zoom/start om te zien waarom de OAuth-flow nog steeds op localhost:8080 uitkwam. Onderzoek loopt.

Setters en sales managers krijgen een eigen dashboard (vervangt TaskioDashboard voor hun rol). Registry-pattern met KPI tiles (7), Pipeline & deals (5), Activity & follow-up (3), Meetings (2), Team & performance (2). Picker-modal rechts opent slide-over met categorie-groepering en checkbox per widget. Persistence in localStorage per user.

Admin / Manager / Setter / Sales Manager kolommen naast elkaar. Sales-rollen krijgen "Eigen" scope-badges waar ze gefilterd zijn op assignedTo. Nieuwe rijen voor CRM pipeline, Contacten, Activiteitenlog, Sales-rapportages, Meetings, Tools, Affiliate. Title: "Bevoegdheden per rol".

getAppleEvents / getGoogleEvents / getOutlookEvents helpers + nieuwe /api/meetings/calendar-events endpoint. Maand/Week/Dag view tonen iCloud/Google/Outlook events als dimmed grijs-gestreepte achtergrond-blokken naast Senly-bookings. Toggle "Externe events" in sidebar.

Telkens als je naar /meetings ging zag je 2-3s "Laden…" voor de calendar geladen werd, ook bij snelle terugkeer.

Nieuwe lib/client-cache.ts (2-laags Map + localStorage). Calendar rendert instant uit cache, verse data in background. Subtiele pulsing accent-dot bij datum-label tijdens revalidate. TTLs: types 5min, bookings 30s, externe events 2min.

Per rol counts blijven (admin/manager/setter/sales_manager) maar generieke labels zijn nu rol-neutraal: gebruiker / user / Benutzer / utilisateur.

User.role uitgebreid (geen DB-migratie nodig, is een string). lib/permissions.ts: nieuwe predicates + permissions matrix + crmScopeWhere() helper voor own-scope filtering + page-gates. Sidebar verbergt bureau-pagina's (Onboarding/Email/Statistieken/Trends/Takenbeheer) voor sales-rollen. Sales-rollen krijgen eigen dashboard via rol-branched home-page (skipt onnodige bureau-data fetching).

Pipeline (bestaande kanban) / Contacten (nieuwe view) / Activiteit / Rapportages. Tab in URL-hash zodat refresh + deeplinks werken.

Nieuw CrmContact model + CrmLead.contactId FK. API: /api/crm/contacts CRUD met sales-scope. UI: grid van contact-cards + zoek + "+Nieuw contact" + slide-over detail-paneel met edit-mode + social links + gekoppelde deals lijst.

Nieuw CrmActivity model + lib/crm-activity.ts write-only logger. Auto-events op alle mutaties: lead_created/moved/status_changed/assigned/note/value/deleted, contact_created/updated/deleted, touchpoint. Tijdlijn-UI per dag gegroepeerd met type-iconen + natural-language sentences. Type-filter + zoek. Sales-scope auto-filter.

6 KPI-tiles (pipeline-waarde, gewonnen omzet, conversie, gem. dealwaarde, meetings, verloren), pipeline funnel met per-stage kleur, performance-tabel top 20, trend-charts (won/created per maand). Period-filter 7d/30d/90d/YTD/All.

Nieuw TouchpointQuickAction component met kind-selector (call/whatsapp/email/meeting/note) + summary. Ingebed in CrmBoard lead-modal én CrmContactsView. Schiet POST /api/crm/activities → updaten lastContactAt op lead + contact automatisch.

Pill per lead-card: warm (≤3d, groen) / mid (4-14d, amber) / cold (>14d, grijs). Visuele cue welke deals aandacht nodig hebben.

User.salesTargetMonthly veld. UserModal toont input alleen bij sales-rollen. Progress-ring op sales-dashboard met kleur-shift good/mid/low.

scripts/backfill-crm-contacts.ts — clustert leads op tenant + companyName/email naar nieuwe Contact-records. Dry-run default, --apply om door te voeren. Idempotent.

Sectie 2 (Welke gegevens verwerken wij?) krijgt nieuwe rij over social media sessie-cookies + uitgebreide subsectie 2.1 die uitlegt hoe de Senly Connector werkt: cookie-capture alleen na expliciete gebruikersactie, AES-256-GCM versleuteling, per-tenant scoping, geen wachtwoorden, ontkoppel-flow. Vereist voor Chrome Web Store approval (privacy policy URL).

.github/workflows/cron-cookie-expiry.yml triggert elke dag 09:00 UTC POST /api/cron/cookie-expiry-check. Stuurt 1 mail per admin met overzicht van koppelingen die binnen 3 dagen verlopen + al verlopen koppelingen. Gebruikt bestaande PORTAL_URL + CRON_SECRET secrets.

chrome-extension/store-assets/promo-tile-440x280.png — accent gradient achtergrond met witte Senly "S"-mark in box. Klaar om in de Web Store listing te uploaden voor betere featured-visibility.

Cookies van Instagram/Facebook/LinkedIn/TikTok verlopen na 1-3 maanden. Zonder waarschuwing kwam je er pas achter als de automation stopte met werken — soms na dagen aan gemiste activiteit.

Nieuwe cron POST /api/cron/cookie-expiry-check draait dagelijks om 09:00 UTC. Scant alle ClientSocialAccount records, groepeert per tenant, stuurt 1 mooie e-mail per admin met tabel van koppelingen die binnen 3 dagen verlopen of al verlopen zijn. GitHub workflow .github/workflows/cron-cookie-expiry.yml triggert het.

Na koppeling stond er "Facebook account" of "LinkedIn account" — niet duidelijk welk specifiek account gekoppeld was. Verwarrend bij 20+ klanten.

Per platform leest het content-script de echte naam/handle van de pagina: Instagram (@username), TikTok (@username), LinkedIn ("Marleen van X"), Facebook (account-naam uit avatar/aria-label). Wordt als displayHint meegestuurd naar Senly en getoond als capturedAccountHint. Klantprofiel toont nu "✓ @cafedehoek" ipv "✓ Facebook account".

Vervangen van solide cirkel placeholder met rounded square + Senly-teal gradient (#2a8a83→#1c5e58) + witte 3-balks "S"-mark. 16/48/128 px varianten — schaalt mooi in Chrome toolbar én Web Store listing.

WEB-STORE-SUBMISSION.md met stap-voor-stap publicatieproces: ZIP commando, listing-content (NL+EN), permission justifications voor review, screenshot-richtlijnen, post-publicatie URL-update instructies. Klaar om in te dienen.

Na koppelen wist je niet of cookies nog geldig waren — pas bij de eerstvolgende automation-run kwam je erachter dat de sessie was verlopen.

SocialAccountConnector haalt nu live status op via /api/clients/[id]/social-accounts/connection-status: groene "✓ Gekoppeld" badge, oranje "⚠ verloopt over 5d", rood "🔄 Heraankoppelen" of grijs "Nog niet gekoppeld". De badge wordt automatisch geverversd na een succesvolle koppeling.

Voor bureaus met 20+ klanten was per-klant navigeren tijdrovend. Onboarding voor een nieuw bureau betekende 80+ kliks door 4 platforms × 20 klanten.

Nieuwe /admin/social-accounts pagina (admin/manager) toont een grid met alle klanten in rijen en 4 platforms in kolommen. Per cel: live status-badge + "Verbind"/"Heraankoppelen"/"Vernieuwen" knop. Filters (alle/gekoppeld/verlopen/niet gekoppeld) + zoekbalk + status-stats bovenaan. Eén scherm voor 80+ koppelingen.

lib/cookie-status.ts kijkt naar de expirationDate van key-cookies per platform (li_at voor LinkedIn, c_user+xs voor FB, sessionid voor TikTok/IG). State = connected/expiring (≤7d)/expired/never_connected. Geen HTTP-calls naar het platform nodig — 100% gratis en snel.

Tussen Activiteiten en Affiliate verschijnt nu een Social accounts icoon (ketting-symbool) dat naar de bulk-koppel pagina linkt. NL/EN translations toegevoegd.

Bureau-eigenaren moesten Instagram/Facebook/LinkedIn/TikTok accounts van hun klanten koppelen door op de server een Chrome-venster te laten openen (Puppeteer headless: false). Dat werkte alleen lokaal op een Mac met Chrome geïnstalleerd — niet op Railway, en niet voor team-leden vanaf hun eigen laptop.

Aparte Chrome-extensie (chrome-extension/) die op de computer van de bureau-eigenaar draait. Bij "Verbind" in een klantprofiel opent de extensie een tab naar het social platform, wacht tot er een geldige login is, leest de cookies via chrome.cookies API (inclusief HttpOnly), en stuurt die HMAC-getekend naar Senly. Server slaat ze versleuteld op (AES-256-GCM met per-tenant AAD-scoping). Daarna kunnen alle team-leden de automation aanzetten zonder de cookies zelf te bezitten — alles draait server-side op Railway.

Bij 20 klanten × 4 platforms = 80 koppelingen moesten in de oude flow allemaal handmatig met user/password worden gedaan — error-prone en risicovol vanwege 2FA, CAPTCHAs en datacenter-IP bans.

In elk klantprofiel staat nu een SocialAccountConnector-blok dat detecteert of de Senly Connector geïnstalleerd is. Zo niet → "Voeg toe aan Chrome" CTA. Zo wel → één klik per platform per klant. URL bevat een gesigned token zodat de koppeling gegarandeerd bij de juiste klant terechtkomt (geen mismatch mogelijk).

De 4 grote Puppeteer features (Facebook inviter, LinkedIn inviter, LinkedIn connector, TikTok groeitool) draaiden met headless: false en hardcoded macOS Chrome-paden. Onbruikbaar op Railway.

Gecentraliseerde launchPuppeteer() helper met headless: "new" op cloud, cross-platform Chrome-finder (Mac/Linux/Windows + PUPPETEER_EXECUTABLE_PATH env override), nixpacks.toml die Chromium + fonts installeert op Railway. Lokaal debuggen kan nog steeds met DEBUG_PUPPETEER=1 voor zichtbare browser.

Eerder werden cookies als JSON-bestanden op disk opgeslagen (cookieFile). Op Railway (ephemeral filesystem) overleefden ze geen deploy, en zonder encryptie waren ze gevoelig voor data-breach.

Nieuwe lib/cookie-vault.ts: cookies versleuteld in DB-veld ClientSocialAccount.encryptedCookies (format "v1:iv:tag:ciphertext"). Per-tenant AAD-scoping voorkomt dat cookies van tenant A gedecrypteerd kunnen worden als ze per ongeluk aan tenant B gekoppeld worden. HMAC-signed connect-tokens (30 min TTL) voor anti-CSRF tussen portaal en extensie.

Card 24px radius, 5-laagse shadow met inset white highlight, 4px brand-accent strip bovenaan met 30px blur-glow (Instagram tri-color, TikTok cyan/rood, etc.), 44px icons met glow, premium CTA buttons met accent gradient + lift on hover. 200px min-height voor visueel ritme.

Gekleurde card-achtergronden per kolom-tone (rotating pink/lavender/yellow/mint/gray pastels), colored dots, subject-pill bovenaan elke card, "+ Toevoegen" knop verhuisd naar bovenaan met dashed border. Cleaner column headers met 02-style count badges.

Tools, Takenbeheer, Statistieken, CRM, Onboarding, Eigenaar overzicht, Activiteiten en Affiliate gebruiken nu allen max-width: 100% voor consistente brede content-area zoals Financieel, ipv de standaard 1320px container.

Avatar 42→32px, naam 15→13px, role 11.5→10.5px, badges 15→12px. Verified-badge en account-dot proportioneel kleiner met dunnere border.

4 logische groepen op urgentie/doel met 6-koloms bento-grid en variabele card-groottes (span-2/3/4/6). Featured "Op tijd geleverd" card met accent gradient + meter-visualisatie. Activiteit-sectie weggehaald (er is een aparte /activiteiten pagina). 3 nieuwe inzichten: klant-groei trend (12 mnd), klanten met achterstand, inactiviteits-risico met gekleurde border-lefts per stilte-niveau.

Instagram outline-camera werd een wit blok omdat een eerdere fix fill: currentColor !important op ALLE SVG-elementen forceerde, waardoor de rect-outline gevuld werd ipv geöutline.

Verwijder fill/stroke overrides — alleen color: white op de parent. PlatformLogo flat-mode SVGs gebruiken al currentColor via stroke (Instagram) of fill (Facebook/YouTube/LinkedIn). Plus: TikTok krijgt tri-color brand-logo (cyan/rood/wit) en Snapchat zwart spookje voor brand-authenticiteit.

Bestaande .stats-card::before regel rendert een 1px inset border in elke stats-card. Op witte cards onzichtbaar maar op de groene gradient van de "Op tijd geleverd" featured card als donkere inner rectangle zichtbaar.

Disable pseudo-element specifiek voor .stats-card--feature met matching specificity + !important. Solide accent kleur ipv gradient om eventuele color-mix rendering artifacts te voorkomen.

Title was 32px in dark mode (oude default) en 28px in light mode (nieuwe Taskio styling). Structurele typografie-regels stonden alleen onder html[data-theme="light"].

Structurele regels (font-size, weight, padding, layout) van .trends-hero-title, .trends-stats, .trends-platform-pill, .trend-card etc. theme-agnostic gemaakt. Alleen kleur/border per theme gescoped.

Module-cache + localStorage zorgt dat bij terugkomst op /email de laatste threads direct getoond worden, terwijl op de achtergrond geverifieerd wordt. Refresh-knop rechts naast map-titel met spin-animatie. Polling + post-actie refreshes zijn nu silent (geen skeleton flash meer).

Iframe srcDoc heeft een opaque origin — de browser stuurt geen Referer-header, en veel CDNs (Cloudinary, Stripe-images) blokkeren image-requests zonder Referer als anti-hotlinking maatregel. Resultaat: complete=true, naturalWidth=0 en een broken-icoon zichtbaar.

referrerpolicy="no-referrer" toegevoegd aan elke <img> tag + document-level meta-referrer. Dit is hetzelfde gedrag als Gmail/Outlook gebruiken voor email-images. Alle 15+ image URLs in geteste mails laden nu correct (Railway logo, Stripe receipts, etc.).

Bij elke mail-klik werd een nieuwe IMAP-verbinding opgezet (TLS-handshake + LOGIN, ~1-1.5s overhead). Daarbovenop werden 12 mail-folders sequentieel doorzocht voor een thread, ook als de mail geen reply-chain had.

Per email-account 1 actieve connection cachen tussen requests met automatische cleanup na 5 min idle of 30 min total age. Plus skip thread-collection voor single mails en parallelle searches via Promise.all bij echte threads. Mail-opens (warm cache): ~500ms, was 2.5-15s.

Bij het openen van een mail met externe images zag je 500ms-1s broken-image-icons voordat ze vanuit het netwerk binnenkwamen.

Externe image URLs worden nu gepreload via new Image() vóór de iframe rendert. Tot alle images klaar zijn (max 1500ms): "Bericht wordt geladen…" placeholder. Geen broken icons meer zichtbaar.

Direct werkbaar zonder server-side OAuth setup. Klanten geven hun iCloud-email + app-specific password (versleuteld opgeslagen via EMAIL_ENCRYPTION_KEY). Boekingen verschijnen automatisch in hun iCloud-kalender, en bestaande events blokkeren beschikbaarheid.

Volledige OAuth 2.0 met auto Google Meet-link generatie bij elke booking. Wacht op GOOGLE_CLIENT_ID/SECRET in Railway env-vars (kan delen met Gmail OAuth).

OAuth flow + auto Teams-meeting links. Wacht op MICROSOFT_CLIENT_ID/SECRET in Azure App registration.

Bij elke booking wordt automatisch een Zoom-meeting aangemaakt en de join-URL wordt aan attendee + host doorgegeven via mail én calendar-events. Wacht op ZOOM_CLIENT_ID/SECRET via zoom.us/marketplace.

Bij elke nieuwe boeking: Zoom-URL eerst, dan event in alle gekoppelde calendars met die URL ingesloten. Bij beschikbaarheids-checks worden externe events ook als busy meegenomen — geen dubbele bookings meer.

De Onderhoudsmodus en Aankondigingsbanner toggles waren 466px brede grijze balken — ze namen .platform-toggle styling over die voor periode-selectors bedoeld was.

Eigen .platform-switch class: 36×20px pillvormig, rood (uit) ↔ groen (aan), met soepele thumb-animatie. Geen visuele ruis meer.

De gridlijnen tussen uren en dagen in de week-view waren verdwenen omdat de --border CSS-variabele in light mode te licht was (alpha 0.09). Visueel oplosbaar tegen witte cellen.

Light mode override naar rgba(12,36,34,0.16) — duidelijke grijze gridlijnen, identiek aan de oude weergave.

Welkomstmails, password reset, meeting confirmations, factuurmails — allemaal werken nu via Resend met geverifieerd domein socialmediatools.nl. Test bevestigd via /api/admin/test-email.

Geen externe cron-service nodig (Railway Cron, cron-job.org).

In instrumentation.ts: bij elke app-start gaat scheduler aan voor meeting reminders (elke 30 min) en sweep (dagelijks 03:00). Veiligheid: alleen actief in productie met CRON_SECRET en NEXTAUTH_URL gezet.

Realtime error-monitoring via /admin/saas → Foutmonitor. Server-errors (500-codes met stack trace) en user-errors (4xx validatie) apart filterbaar. Mark-as-resolved en delete werken.

Visueel overzicht van alle 17 integraties met status (volledig/gedeeltelijk/ontbreekt). Bovenaan een rode actie-lijst met verplichte env-vars die nog ontbreken op productie.

In light mode had de card-achtergrond een mint-tint (#fafdfc) en schaduw bevatte rgba(12,36,34,0.04..0.07) — beide gaven een onbedoelde cyan undertone die als "blauw randje" werd waargenomen, zelfs voor brand-kleuren als pink.

Background naar puur #ffffff. Schaduwen naar neutraal rgba(0,0,0,...). Brand-glow blijft via --teal-glow/--teal-soft die door BrandingApplier reactief op de tenant-kleur wordt gezet.

De .notif-item grid had 2 kolommen [icon | body] maar 3 children (icon + body + unread-dot). Resultaat: de dot viel naar rij 2 / kolom 1, recht onder het icoon.

Grid uitgebreid naar 3 kolommen [icon | body | dot]. Dot staat nu correct rechts naast de bedrijfsnaam.

Avatar (24-32px) stond top-aligned naast een korte naam-regel (~14px), waardoor de avatar visueel veel lager doorliep dan de naam.

Naam-regel krijgt min-height: 32px + flex align-items: center. Het midden van de naam-tekst valt nu exact op het midden van de avatar — schoon uitgelijnd.

Bubble background was rgba(255,255,255,0.07) — werkt op donkere achtergrond, maar op witte light-mode achtergrond onzichtbaar.

CSS-classes .cp-bubble--mine en .cp-bubble--other met theme-aware kleuren. Eigen berichten in brand-kleur, andere in lichtgrijs (#f0f2f4).

Als SMTP onbereikbaar was (Railway trial blokkeerde outbound 25/465/587), kon de hele IMAP-koppeling niet worden opgeslagen.

Bij SMTP timeout/connection-refused: koppeling wordt wel gemaakt voor IMAP-only gebruik. Gebruiker krijgt waarschuwing dat versturen via klant-SMTP nog niet werkt tot Pro upgrade. Op Railway Pro inmiddels alle poorten open.