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

Створено на статичному HTML + Tailwind CSS v4. Без React, без Vue, без етапу збирання: скомпільований CSS входить у пакет, тож ви відкриваєте index.html і вже працюєте на GitHub Pages, Netlify, Vercel, Cloudflare або власному сервері.

ЖОДНИХ ЗОБРАЖЕНЬ, І В ЦЬОМУ ВЕСЬ СЕНС

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

ЩО ВСЕРЕДИНІ (11 секцій)

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

• Hero-блок із живим CSS-телефоном + анімованим кільцем фокусу

• Смуга соціального доказу «Про нас пишуть»

• Трійка функцій у вигляді тактильних плиток із ефектом натискання

• Головна функція в центрі уваги з живим екраном застосунку

• Три кроки «як це працює» (без тиску серій)

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

• Анімовані KPI-показники з лічильниками

• Відгуки з плитками-аватарами з ініціалами (без стокових фото)

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

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

ЧИМ ВІН ВІДРІЗНЯЄТЬСЯ

• Керується токенами: відредагуйте ОДИН блок @theme у src/input.css, і вся сторінка отримає новий вигляд

• Спокійний за задумом: жодних FOMO-таймерів, фальшивих зворотних відліків і темних патернів

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

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

• Шрифти на власному хостингу (Bricolage Grotesque + Hanken Grotesk, woff2): без Google CDN, без зсувів макета

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

ЩО ВИ ОТРИМУЄТЕ

index.html · скомпільований + вихідний Tailwind CSS · кілька КБ чистого JS · шрифти на власному хостингу · favicon · повна документація · журнал змін · примітки щодо ліцензії.

Живе демо (безкоштовна Lite-версія): https://mcmxcixx.github.io/halcyon-app/