Задача
Гостю нужно выбрать виллу, понять, как там живут и что входит в отдых, и отправить заявку на нужные даты.
ÉLAN Villas
О проекте
Сайт коллекции из четырёх вилл: Sable и Azur на Сен-Бартелеми, Oliva и Cala на Ибице. Виллы, тексты и фотографии вымышленные — это демонстрационный проект.
Подход
У каждой виллы шесть разделов: знакомство, проживание, wellness, впечатления, сервис и галерея. Меню в два уровня: сначала коллекция, потом разделы выбранной виллы.
Что получилось
Сайт из 31 страницы на Next.js с анимациями на GSAP: 7 общих страниц и по 6 разделов на каждую из четырёх вилл.
Подробнее о проекте
Первый экран — большая фотография без рекламного заголовка: вилла говорит сама за себя. Тексты и фотографии появляются по мере прокрутки.
Спальни собраны в ленту с кнопками, счётчиком и перетаскиванием. В галерее фотографии отфильтрованы по темам и открываются во весь экран.
Заявка считает количество ночей по выбранным датам и проверяет контакты. Настоящие заявки сайт не отправляет.
Как мы собирали
- 01
Основа
Next.js (App Router), TypeScript, CSS Modules, GSAP и ScrollTrigger. Тексты, виллы и маршруты лежат в одном типизированном файле.
- 02
Устройство
Меню в два уровня: сначала коллекция, потом разделы выбранной виллы. Даты заявки считаются по московскому времени, контакты проверяются перед отправкой.
- 03
Как делали
67 оригинальных изображений и 31 страница. Основную переделку выполнили в Claude Code, закончили работу в Codex, итоговую проверку записали в документы проекта.
