Halcyon est un modèle premium d'une seule page pour une application de concentration, de méditation ou de productivité sereine : le genre de produit qui doit inspirer calme et confiance avant même d'être installé. Fond chaleureux façon papier, un accent corail affirmé, des tuiles « sticker » cliquables avec des ombres décalées marquées : un look tactile de logiciel physique que vous ne trouverez pas dans les packs SaaS habituels à dégradés.

Conçu en HTML statique + Tailwind CSS v4. Pas de React, pas de Vue, pas d'étape de build : le CSS compilé est fourni dans le package, il suffit d'ouvrir index.html pour être en ligne sur GitHub Pages, Netlify, Vercel, Cloudflare ou votre propre serveur.

AUCUNE RESSOURCE IMAGE, ET C'EST TOUT L'INTÉRÊT

La maquette du téléphone, les écrans de l'application (minuteur de concentration, session terminée, statistiques hebdomadaires, grille de séries, réglages), les badges App Store / Google Play et le QR code sont tous dessinés en pur CSS/SVG. Rien à licencier, rien à compresser, rien qui casse lorsque vous changez d'identité visuelle, et le modèle entier reste presque sans poids.

CE QUE CONTIENT LE MODÈLE (11 sections)

• Navigation fixe + menu mobile accessible

• Hero avec un téléphone CSS en direct + anneau de concentration animé

• Bandeau de preuve sociale « Vu dans »

• Trio de fonctionnalités en tuiles tactiles et cliquables

• Mise en avant de la fonctionnalité phare avec un écran d'application en direct

• « Comment ça marche » en trois étapes (sans pression des séries)

• Galerie de captures d'écran à défilement par accroche

• Indicateurs KPI animés avec compteurs progressifs

• Témoignages avec tuiles d'avatars à initiales (sans photos de banque d'images)

• Tarifs Free / Pro honnêtes

• FAQ en accordéon + CTA final (badges de stores en CSS + QR) + pied de page complet

POURQUOI IL SE DISTINGUE

• Piloté par tokens : modifiez UN seul bloc @theme dans src/input.css et toute la page change d'apparence

• Serein par conception : pas de minuteurs FOMO, pas de faux comptes à rebours, pas de dark patterns

• Entièrement responsive, mobile-first, typographie fluide : aucun défilement horizontal sur aucun appareil

• Contraste WCAG AA, HTML sémantique, états de focus visibles

• Polices auto-hébergées (Bricolage Grotesque + Hanken Grotesk, woff2) : pas de CDN Google, pas de décalage de mise en page

• Lighthouse : Performance 98 · Accessibilité 100 · Bonnes pratiques 100 · SEO 100

CE QUE VOUS OBTENEZ

index.html · Tailwind CSS compilé + source · quelques Ko de JS vanilla · polices auto-hébergées · favicon · documentation complète · changelog · notes de licence.

Démo en direct (version Lite gratuite) : https://mcmxcixx.github.io/halcyon-app/