Interaktion & Entwicklung
Mai. 2026
ClinIQ
ClinIQ ist eine vertrauensorientierte Marketing-Landingpage für ein B2C-Gesundheitsprodukt — verständliche Laborauswertungen und Visit-Vorbereitung, keine medizinische Diagnose. Ich habe die Seite als eine durchgehende Story gestaltet und entwickelt: Intro-Preloader, Hero, gepinntes How it works, Szenario-Stories, Pricing, Kontakt und ein Upload-Block als Abschluss der Conversion-Strecke.
Motion trägt die Erzählung, ohne die Lesbarkeit zu überlagern. Lenis sorgt für Smooth Scroll; GSAP ScrollTrigger steuert Section Reveals, Desktop-Pin bei How it works (Upload → Understand → Prepare) und Magnetic Hover auf Story-Karten. Intro und Hash-Navigation nutzen Curtain-Preloader — Sprünge zu Pricing oder Stories ohne Pop-in. Das Layout respektiert prefers-reduced-motion.
Hero-Fold — selbstbewusste Headline zu Health Clarity, Marquee-Rhythmus, gut sichtbarer CTA Richtung Upload; ruhiges Layout vor tieferer Argumentation.
How it works — Desktop-Pin-Scroll durch Upload, Understand, Prepare; Text und Visuals cross-faden beim Scrollen.
Stories — Szenario-Karten mit CSS-Visuals; Magnetic Hover auf Mock-UI; Caregiver- und Labs-Narrative für Vertrauen.
Pricing — Free- und Plus-Karten mit Scroll Reveal; ruhiger Copy und Disclaimer; Conversion ohne Enterprise-Ton.
Contact — Say-hello-Panel neben E-Mail-CTA; responsiver Halbkreis-Bogen führt in den dunklen Upload-Bereich darunter.
Upload-Funnel — gestapelte Datei-Karten, Line-Style-Felder, Success-State; Footer im Preloader-Ton mit Compliance-Disclaimer.
Nav-Menü — Sidebar mit großen Sektionslinks, gedimmtes Overlay, gebogene Panel-Kante; FAB öffnet dieselben Routen, sobald der Hero wegscrollt.