Emirates Yachting Services
Разработал сайт яхтенной компании из Дубая с нуля и довёл до продакшена: архитектура на Next.js, интерфейс на трёх языках, калькулятор стоимости услуг, портфолио и блог с контентом из админ-панели, деплой.
Контекст
Emirates Yachting Services обслуживает яхты в Dubai Maritime City: ремонт двигателей, покраска, такелаж, тиковые палубы, подъём и перевозка, яхт-агентирование. Компании нужен был сайт, который вызывает доверие у владельцев яхт и приводит их к заявке.
Моя зона ответственности
Отвечал за проект целиком: структура и архитектура, вёрстка и логика интерфейса, интеграции, оптимизация и выкладка на сервер.
Что я сделал
Архитектура
- Спроектировал структуру проекта на Next.js: главная с якорной навигацией, страницы услуг, портфолио, блог, контакты.
- Собрал набор переиспользуемых компонентов: карточки услуг, проектов и статей, формы, блоки команды.
Интерфейс
- Сделал пошаговый калькулятор стоимости: тип судна, размер ползунком в футах и метрах, выбор услуг и сводка запроса.
- Портфолио работ с фотографиями «до и после».
- Адаптивная вёрстка под телефон, планшет и компьютер.
Мультиязычность и интеграции
- Три языковые версии интерфейса: английский, арабский, русский.
- Контент услуг, проектов, команды и блога загружается из админ-панели по API.
- Формы заявки и обратного звонка, ссылки на WhatsApp и соцсети, подключение виджета AI-ассистента.
Производительность и деплой
- Оптимизация изображений средствами Next.js, метаданные и заголовки страниц для поисковиков.
- Выложил проект на сервер и подключил домен.
Сложности и решения
ЗадачаСтоимость обслуживания зависит от типа и размера судна, клиенту трудно понять, с чего начать.
РешениеСделал калькулятор-конструктор: за несколько шагов клиент описывает судно и нужные работы и отправляет готовый структурированный запрос.
ЗадачаАудитория международная: владельцы яхт говорят на разных языках.
РешениеЗаложил мультиязычность в архитектуру с самого начала, чтобы новый контент сразу появлялся во всех языковых версиях.
ЗадачаНа сайте много крупных фотографий яхт, это замедляет загрузку.
РешениеИспользовал оптимизацию изображений Next.js: современные форматы и размеры под конкретный экран.
Результат
- Сайт работает в продакшене: emiratesyachtingservices.com.
- Прошёл весь путь сам: от пустого репозитория до рабочего сайта.
- Компания обновляет услуги, проекты и блог через админ-панель без участия разработчика.