Halcyon es una plantilla premium de una sola página para una app de enfoque, meditación o productividad serena: el tipo de producto que tiene que transmitir calma y confianza antes de que nadie lo instale. Fondo cálido tipo papel, un acento coral seguro y mosaicos «sticker» pulsables con sombras desplazadas duras: un aspecto táctil, de software físico, que no encontrarás en los típicos paquetes SaaS con degradados.

Creada con HTML estático + Tailwind CSS v4. Sin React, sin Vue, sin paso de compilación: el CSS compilado viene en el paquete, así que abres index.html y ya estás en línea en GitHub Pages, Netlify, Vercel, Cloudflare o en tu propio servidor.

SIN RECURSOS DE IMAGEN, Y ESE ES EL PUNTO

La maqueta del teléfono, las pantallas de la app (temporizador de enfoque, sesión completada, estadísticas semanales, cuadrícula de rachas, ajustes), las insignias de App Store / Google Play y el código QR están dibujados en CSS/SVG puro. Nada que licenciar, nada que comprimir, nada que se rompa al cambiar la marca, y toda la plantilla sigue pesando casi nada.

QUÉ HAY DENTRO (11 secciones)

• Navegación fija + menú móvil accesible

• Hero con un teléfono CSS en vivo + anillo de enfoque animado

• Franja de prueba social «Visto en»

• Trío de funciones con mosaicos táctiles y pulsables

• Función estrella destacada con una pantalla de la app en vivo

• «Cómo funciona» en tres pasos (sin presión de rachas)

• Galería de capturas con desplazamiento por anclaje

• Métricas KPI animadas con números que cuentan hacia arriba

• Testimonios con mosaicos de avatares de iniciales (sin fotos de stock)

• Precios honestos Free / Pro

• Acordeón de preguntas frecuentes + CTA final (insignias de tienda en CSS + QR) + pie de página completo

POR QUÉ ES DIFERENTE

• Basada en tokens: edita UN solo bloque @theme en src/input.css y toda la página cambia de estilo

• Serena por diseño: sin temporizadores de FOMO, sin cuentas atrás falsas, sin patrones oscuros

• Totalmente responsive, mobile-first, tipografía fluida: sin desplazamiento horizontal en ningún dispositivo

• Contraste WCAG AA, HTML semántico, estados de foco visibles

• Fuentes autoalojadas (Bricolage Grotesque + Hanken Grotesk, woff2): sin CDN de Google, sin saltos de diseño

• Lighthouse: Rendimiento 98 · Accesibilidad 100 · Buenas prácticas 100 · SEO 100

QUÉ OBTIENES

index.html · Tailwind CSS compilado + fuente · unos pocos KB de JS vanilla · fuentes autoalojadas · favicon · documentación completa · registro de cambios · notas de licencia.

Demo en vivo (versión Lite gratuita): https://mcmxcixx.github.io/halcyon-app/