Halcyon — Продаваемый лэндинг Premium Focus / Productivity (HTML + Tailwind)

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-телефоном + анимированным фокус-кольцом

• Блок социального доказательства «Featured in»

• Триада функций — тактильные, «прижимные» плитки

• Фирменный спотлайт ключевой функции с живым экраном приложения

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

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

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

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

• Честные тарифы Free / Pro

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

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

• Токен‑ориентировано — редактируйте ОДИН @theme блок в src/input.css, и вся страница меняет оформление

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

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

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

• Self-hosted шрифты (Bricolage Grotesque + Hanken Grotesk, woff2) — без Google CDN, без сдвига макета

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

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

index.html · скомпилированный + исходники Tailwind CSS · несколько КБ ванильного JavaScript · self-hosted fonts · favicon · полная документация · changelog · заметки по лицензии.

Живой демо (бесплатная Lite-версия): https://mcmxcixx.github.io/halcyon-app/