Атмосферный лендинг для коктейль-бара Velvet Pour, построенный на React 19 и Tailwind CSS v4, с киношными анимациями на GSAP: разбитый на буквы заголовок, эффекты по скроллу, параллакс и кастомная карусель рецептов.
🔗 Демо: cocktails-mojito.vercel.app
Hero-секция — крупный заголовок "MOJITO" с зернистой текстурой, тропическими листьями по краям и слоганом "Sip the Spirit Summer"
Галерея и статистика — "Where every Detail Matters — from muddle to garnish", рейтинг 4.5/5 и более 12 000 довольных клиентов
Секция "Made with Craft, Poured with Passion" — крупный кадр бармена за работой
Карусель рецептов — переключение между Classic Mojito, Raspberry Mojito, Violet Breeze и Curacao Mojito с описанием ингредиентов
- Split-text анимация заголовка "MOJITO" при загрузке страницы
- Скролл-триггеры (GSAP ScrollTrigger) для последовательного появления секций и фото
- Параллакс-эффекты и зернистая (grain) текстура фона в стиле премиум-бренда
- Навигация: Cocktails, About Us, The Art, Contact
- Блок с отзывами/статистикой (рейтинг, число клиентов)
- Кастомная анимированная карусель с рецептами коктейлей (переключение по клику/свайпу)
- Полностью адаптивная верстка на Tailwind CSS
- React 19
- Vite
- Tailwind CSS v4
- GSAP +
@gsap/react - react-responsive
- ESLint
# Клонировать репозиторий
git clone https://github.com/MeshBMW/mojito-cocktails.git
cd mojito-cocktails
# Установить зависимости
npm install
# Запустить в режиме разработки
npm run devПроект будет доступен по адресу http://localhost:5173.
npm run build # Сборка для продакшена
npm run preview # Просмотр production-сборки локально
npm run lint # Проверка кода линтеромmojito-cocktails/
├── constants/ # Константы и статические данные (тексты, списки коктейлей и т.д.)
├── public/ # Медиа файлы(картинки, видео, иконки)
├── src/ # Исходный код приложения (компоненты)
├── index.html
├── package.json
└── vite.config.js
Проект создан в учебных/портфолио-целях.