Halcyon — Premium Focus / Produktivitäts-App Landingpage-Template (HTML + Tailwind)

Halcyon ist ein hochwertiges One-Page-Landingpage-Template für eine Focus-, Meditation- oder Calm-Produktivitäts-App — also für ein Produkt, das sich beruhigend und vertrauenswürdig anfühlen muss, bevor es überhaupt jemand installiert. Warmer Papierhintergrund, ein selbstbewusster Korallenakzent, „Sticker“-Tiles zum Draufdrücken mit harten Versatz-Schatten: eine haptische, physisch wirkende Software-Optik, die du in den üblichen Gradient-SaaS-Paketen nicht findest.

Erstellt mit statischem HTML + Tailwind CSS v4. Kein React, kein Vue, kein Build-Schritt — das kompilierte CSS wird mitgeliefert, sodass du einfach index.html öffnest und sofort live bist auf GitHub Pages, Netlify, Vercel, Cloudflare oder deinem eigenen Server.

KEINE BILD-ASSETS — UND DAS IST DER PUNKT

Das Phone-Mockup, die In-App-Screens (Focus-Timer, Session-Abschluss, wöchentliche Statistiken, Streak-Gitter, Einstellungen), die App Store / Google Play Badges und der QR-Code sind alle in reinem CSS/SVG gezeichnet. Nichts, das man lizenzieren muss, nichts, das komprimiert werden muss, nichts, das beim Rebranding bricht — und das gesamte Template wiegt trotzdem fast nichts.

DAS STECKT DRIN (11 Abschnitte)

• Sticky Nav + zugängliches Mobile-Menü

• Hero mit einem Live-CSS-Phone + animiertem Focus-Ring

• „Featured in“-Social-Proof-Streifen

• Feature-Trio aus haptischen, drückbaren Tiles

• Signature-Feature-Spotlight mit einem Live-App-Screen

• Drei-Schritte „So funktioniert’s“ (kein Streak-Druck)

• Scroll-Snap-Screenshots-Galerie

• Animierte KPI-Metriken mit Count-up-Zahlen

• Testimonials mit Initialen-Avatar-Tiles (keine Stockfotos)

• Ehrliche Free-/Pro-Preise

• FAQ-Akkordeon + finales CTA (CSS-Store-Badges + QR) + vollständiger Footer

WARUM ES ANDERS IST

• Token-getrieben — bearbeite ONE @theme-Block in src/input.css und die ganze Seite bekommt ein neues Skin-Design

• Calm by design — keine FOMO-Timer, keine Fake-Countdowns, keine Dark Patterns

• Vollständig responsiv, mobile-first, fließende Typografie — kein horizontales Scrollen auf keinem Gerät

• WCAG-AA-Kontrast, semantisches HTML, sichtbare Focus-States

• Self-hosted Fonts (Bricolage Grotesque + Hanken Grotesk, woff2) — kein Google CDN, kein Layout-Shift

• Lighthouse: Performance 98 · Accessibility 100 · Best-Practices 100 · SEO 100

DAS BEKOMMST DU

index.html · kompiliertes + Quell-Tailwind-CSS · ein paar KB Vanilla-JS · self-hosted Fonts · Favicon · vollständige Dokumentation · Changelog · Lizenzhinweise.

Live-Demo (kostenlose Lite-Version): https://mcmxcixx.github.io/halcyon-app/