SaaS LandingpageDark modeScroll-animatiesNext.js

FlowState

Een high-end SaaS landingpage voor een fictieve AI-gedreven timemanagement app. Gebouwd als portfolio-demonstratie: dark mode first design, vloeiende scroll-animaties, interactieve UI-elementen en een conversiegerichte structuur.

Type

SaaS Landingpage

Tech stack

Next.js · Tailwind · Motion

Opgeleverd

Concept / Demo

Status

Live demo beschikbaar

Het concept

Een fictieve SaaS-app als canvas voor craftwork

FlowState is een fictieve AI-gedreven productiviteitsapp. Het idee: een tool die je dag automatisch indeelt op basis van je focuspatronen, taken en agenda — zonder dat je er zelf over na hoeft te denken.

Ik heb dit concept gebruikt om te laten zien hoe ik een moderne SaaS-landingpage aanpak: sterke hiërarchie, interactieve elementen die het product voelen laten, en een structuur die van bezoeker naar aanmelding leidt.

Dark mode first design
Interactieve UI-mockups in de page zelf
Vloeiende scroll-animaties met Motion
Conversiegerichte pagina-opbouw
Klik om te wisselen

FlowState

AI-gedreven timemanagement

Focus

Taken

Analyse

Wat er gebouwd is

Elke sectie heeft een doel

Hero met live app-mockup

De hero toont een interactieve mock van de app zelf — inclusief animerende focusscore en taakoverzicht.

Feature-secties met context

Elke feature heeft een eigen visuele uitleg: analytics, kalenderintegratie, notificaties.

Dark/light mode toggle

Een live preview van het interface in dark en light mode, interactief te wisselen in de pagina zelf.

Scroll-animaties

Elementen verschijnen soepel bij scrollen via Motion — nooit druk, altijd passend bij de sfeer.

Interactieve pricing table

Maandelijks vs. jaarlijks met geanimeerde prijsovergangen en visueel verschil tussen tiers.

Conversiegerichte CTA-flow

Elke sectie leidt de bezoeker logisch naar de volgende stap, eindigend bij aanmelden.

Zoiets bouwen voor jouw project?

Dit is wat ik doe voor elke klant — een aanpak die past bij jouw product, jouw merk en jouw doelen.