- На сайте с
- 2026 года
Специализированной кофейне нужен был сайт, который одновременно передаёт атмосферу третьей волны, удобно показывает меню напитков, продаёт зерновой кофе с доставкой и принимает записи на мастер-классы. Стандартные шаблоны не подходили — для атмосферного бренда нужен был индивидуальный подход с анимациями и продуманным каталогом.
Сверстал single-page сайт на чистом HTML5 + CSS3 + ванильном JavaScript, без фреймворков и сборщиков.
Ключевые модули:
• Меню напитков с фильтрацией по 5 категориям
• Магазин зернового кофе (8 позиций) с фильтрами по стране, обжарке и вкусовому профилю
• Боковая корзина с сохранением в localStorage, бейджем количества и live-итогом
• Квиз из 3 вопросов для подбора кофе под вкусовые предпочтения
• Секция мастер-классов с записью через модалку
• Тёмная и светлая темы, переключаются одной кнопкой
• Избранное и сравнение товаров
• Отдельная админ-страница для просмотра заявок и заказов
Техническая часть: scroll-reveal через IntersectionObserver, count-up на метриках, плавные hover-эффекты, поддержка `prefers-reduced-motion`, accessibility ≥ 95 по Lighthouse, семантические теги, БЭМ-классы. Адаптив pixel-perfect от 360 до 1920 пикселей.
Получился атмосферный лендинг-плюс-магазин в одном файле — посетитель может посмотреть меню, заказать зерно, записаться на мастер-класс или пройти квиз и получить подборку под себя. Корзина и избранное переживают перезагрузку, темы переключаются мгновенно, на мобильных всё работает без багов и горизонтального скролла. Сайт готов к интеграции с любым бэкендом (Laravel, WordPress, headless CMS) — благодаря БЭМ-структуре и семантической вёрстке программисту не придётся переделывать классы и переименовывать блоки.
