Halcyon — премиальный одностраничный лендинг-шаблон для приложения для фокуса, медитации или спокойной продуктивности — того самого продукта, который должен ощущаться спокойным и заслуживающим доверия ещё до того, как его установят. Тёплый бумажный фон, один уверенный коралловый акцент, «стикерные» плитки с ощутимыми смещёнными тенями: тактильный, «физический» вид софта, которого нет в стандартных градиентных SaaS-паках.

Собрано на статическом HTML + Tailwind CSS v4. Никакого React, никакого Vue, никаких сборок — скомпилированный CSS уже включён в пакет, поэтому вы открываете index.html и всё сразу работает на GitHub Pages, Netlify, Vercel, Cloudflare или на вашем собственном сервере.

НИ ОДНОГО IMAGE ASSETS — И В ЭТОМ СМЫСЛ

Мокап телефона, экраны внутри приложения (таймер фокуса, завершение сессии, недельная статистика, сетка стрика, настройки), бейджи App Store / Google Play и QR-код — всё нарисовано на чистом CSS/SVG. Нечего лицензировать, нечего сжимать, ничего не ломается при ребрендинге — и при этом весь шаблон весит почти ничего.

ЧТО ВНУТРИ (11 секций)

• Липкая навигация + доступное мобильное меню

• Хиро с «живым» CSS-телефоном + анимированным фокус-кольцом

• Блок social-proof «Featured in»

• Три функциональные возможности в виде тактильных нажатий-плиток

• Фирменный спотлайт с «живым» экраном приложения

• Объяснение в три шага «как это работает» (без давления на стрики)

• Галерея скриншотов с scroll-snap

• Анимированные метрики KPI с числами count-up

• Отзывы с аватарами из инициалов (без стоковых фото)

• Честное ценообразование Free / Pro

• FAQ-аккордеон + финальный CTA (CSS-бейджи магазина + QR) + полный футер

ПОЧЕМУ ЭТО ДРУГОЕ

• Основано на токенах — измените ОДИН блок @theme в src/input.css, и вся страница автоматически получит новый стиль

• Спокойствие по дизайну — никаких таймеров FOMO, никаких фейковых обратных отсчётов, никаких тёмных паттернов

• Полная адаптивность, mobile-first, плавная типографика — без горизонтального скролла на любом устройстве

• Контрастность WCAG AA, семантический HTML, видимые состояния фокуса

• Самостоятельно размещаемые шрифты (Bricolage Grotesque + Hanken Grotesk, woff2) — без Google CDN, без layout shift

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

ЧТО ВЫ ПОЛУЧАЕТЕ

index.html · скомпилированный + исходный Tailwind CSS · несколько КБ vanilla JS · шрифты, размещённые вами · favicon · полная документация · changelog · заметки по лицензии.

Демо вживую (бесплатная Lite-версия): https://mcmxcixx.github.io/halcyon-app/