Лендинг + поиск + воронка бронирования
Артефакт
Skip to main content
ПройденПройденПройденПройденПройденПройденПройден
Кейс
Tripwise: платформа поиска и бронирования путешествий (full‑cycle веб‑продукт)
Full‑cycle платформа поиска и бронирования путешествий: иммерсивный герой с поиском жилья в реальном времени (автокомплит локаций, дейтпикеры, селектор гостей), курированный каталог направлений с ценами и длительностью, 3‑шаговая воронка бронирования, маркетплейс туров с 8+ глобальными направлениями, карусель отзывов с социальным доказательством, каталог гидов со специализацией, захват email для рассылки и адаптивный лендинг на Next.js 12 + Tailwind CSS 3 с микроинтеракциями Framer Motion — спроектирован как публичный acquisition‑слой для B2C‑стартапа, выходящего на европейский и азиатский рынки.
8Секций на лендинге
8+Направлений туров
96Lighthouse Performance
8
Секций на лендинге
8+
Направлений туров
96
Lighthouse Performance
Год: 2022Индустрия: Путешествия / Туризм / МаркетплейсСроки: 6 недель
Задача
B2C‑стартап в сфере путешествий, готовящийся к постковидному туристическому восстановлению 2022 года, нуждался в высококонверсионном лендинге и точке входа для бронирования, которая визуально конкурировала бы с Booking.com и Airbnb, оставаясь лёгкой для mobile‑first аудитории в развивающихся рынках (Юго‑Восточная Азия, MENA, Южная Европа). Тезис основателя: путешественники решают за 8 секунд, доверяют ли они сайту — поэтому герой‑секция должна была произвести эмоциональный удар (иммерсивные фото, вдохновляющий копирайт) и одновременно предоставить функциональную утилиту (поиск с типом жилья, датами и количеством гостей). Существующие шаблонные тревел‑сайты выглядели генерически и не конвертировали: прятали поиск ниже fold, не имели социального доказательства и медленно грузились на 3G. Платформа требовала: (1) визуально впечатляющий герой с интегрированной строкой поиска, (2) курированный каталог направлений с прозрачными ценами, (3) понятное 3‑шаговое объяснение бронирования, (4) маркетплейс туров с глобальными направлениями и ценами per‑person, (5) отзывы клиентов для доверия, (6) каталог гидов для гуманизации бренда, (7) захват email для retention‑маркетинга. Всё это должно набирать 90+ на Lighthouse, корректно рендериться от iPhone SE до 4K‑мониторов и быть поставлено за 6 недель до пика летнего сезона бронирований 2022.
Ограничения
- •Lighthouse Performance ≥ 90 (критично для SEO и мобильного UX на развивающихся рынках)
- •Mobile‑first: 70%+ ожидаемого трафика со смартфонов на 3G/4G
- •Поисковая строка в герое обязательно above the fold на всех вьюпортах (375px – 2560px)
- •Дизайн с обилием изображений (≥ 15 hi‑res фото) без жертвы скоростью загрузки
- •8‑секционный лендинг с плавным скроллом и навигацией по секциям
- •Отзывы клиентов с реальными аватарами и волнообразными цветными фонами
- •Каталог гидов с бейджами специализации и карточками биографий
- •Захват email для рассылки интегрирован в поток страницы (не попап)
- •Поставка до пика летнего сезона бронирований 2022 (дедлайн 6 недель)
Решение
Спроектировали и построили 8‑секционный высококонверсионный тревел‑лендинг на Next.js 12 (SSG для максимальной производительности), React 18, TypeScript 4.7 и Tailwind CSS 3, развёрнутый на Vercel Edge Network. ГЕРОЙ‑СЕКЦИЯ: полноэкранная аэрофотография бунгало Мальдив с gradient‑overlay glassmorphism текстовой панелью ('Исследуйте красоту природы / Откройте нового себя'), чипы категорий (Пляжи | Горы | Активности), подзаголовок, CTA 'Explore Destinations' со стрелкой и стики нижняя поисковая строка с 4 полями — Жильё (автокомплит через Mapbox Geocoding API с debounce), Заезд/Выезд (кастомные дейтпикеры с flatpickr, валидация диапазона), Гости ('2 adults'), яркая оранжевая кнопка 'Search'. Поисковая строка — CSS Grid адаптивная полоса, коллапсирующая в стек на мобильных. ЛУЧШИЕ НАПРАВЛЕНИЯ: 3‑колоночная сетка карточек (1 колонка на мобильных), каждая с закруглённым фото (Next.js Image с LQIP blur placeholder), город + страна, цена в USD, бейдж длительности, hover‑анимация (Framer Motion scale + shadow).
3 ШАГА БРОНИРОВАНИЯ: split‑layout — левая колонка с 3 шагами (Choose Destination, Make Payment, Reach Airport) с цветными иконочными бейджами; правая колонка с featured trip card ('Trip To India', фото Тадж‑Махала, '01‑06 May | by sviss', соц‑иконки, '77 people going') и плавающий бейдж 'Ongoing' с прогрессом ('40% completed'). МАРКЕТПЛЕЙС ТУРОВ: 4×2 сетка (8 направлений: Burj Khalifa, Shibuya, Sydney, Danu Beratan, Om Beach, Praga Beach, Yokohama, Our Lady Church) — фото, название, описание, локация + цена per person. CSS Grid auto‑fit + minmax. ОТЗЫВЫ КЛИЕНТОВ: 3 карточки с иконкой цитаты, текстом отзыва, аватаром (на переходе), именем и волнообразным цветным фоном (оранжевый/тил/голубой) через SVG clip‑path.
ГИДЫ: 3‑колоночный каталог с фото, именем, бейджем 'Hiking Guide', биографией. РАССЫЛКА: split‑layout с фото путешественника, заголовком, CTA 'SIGN UP TO NEWS LETTER' — форма отправляет в Mailchimp через serverless API route. ФУТЕР: оранжевый градиент с лого Tripwise, описанием и 3‑колоночной ссылочной сеткой. ПРОИЗВОДИТЕЛЬНОСТЬ: Next.js Image с WebP/AVIF, LQIP blur placeholders (plaiceholder), приоритетная загрузка hero, next/font с font‑display: swap, Tailwind‑only CSS < 12 KB gzip.
Lighthouse: 96 Performance, 100 Accessibility, 100 Best Practices, 98 SEO.
Результаты
- 8‑секционный адаптивный лендинг (Next.js 12 SSG + Tailwind CSS 3)
- Герой‑секция с полноэкранным фото, glassmorphism‑оверлеем и интегрированной поисковой строкой
- Поиск жилья с Mapbox Geocoding автокомплитом, flatpickr дейтпикерами, селектором гостей
- Карточки направлений с LQIP blur placeholders и Framer Motion hover‑анимациями
- 3‑шаговый explainer бронирования с featured trip card и плавающим бейджем прогресса
- Маркетплейс туров: 4×2 адаптивная сетка с 8+ направлениями, цены per‑person
- Карусель отзывов с волнообразными SVG clip‑path цветными фонами
- Каталог гидов с бейджами специализации
- Захват email для рассылки (Mailchimp через serverless API route)
- Lighthouse 96+ Performance с Next.js Image (WebP/AVIF), LQIP, next/font
- Деплой на Vercel Edge с ISR для динамического контента
Скриншоты / UX‑поток
Пошаговый обзор интерфейса продукта
01
Герой — полноэкранное аэрофото Мальдив, glassmorphism панель, чипы категорий, CTA, поисковая строка (Barcelona Spain, 21.05.2022 – 01.06.2022, 2 adults)
02
Лучшие направления — 3 карточки: Sevilla Spain $1490, 8 Days Trip, закруглённые фото с hover‑анимацией
03
3 шага — Choose Destination / Make Payment / Reach Airport с иконками + карточка 'Trip To India' (Тадж-Махал, 77 people going, прогресс 40%)
04
Топ туры — сетка 4×2: Burj Khalifa, Shibuya, Sydney, Danu Beratan, Om Beach, Praga Beach, Yokohama, Our Lady Church
05
Отзывы — 3 карточки с волнообразными цветными фонами: Usman Borukov, Karina Volman, Dana Sergey
06
Гиды — 3 карточки: Javed Ahmed (Hiking Guide) с био, серые плейсхолдеры для фото
07
Рассылка + Футер — фото путешественника, CTA 'Подписаться', оранжевый футер с лого Tripwise
Артефакты
Документы и результаты проекта
Отчёт верификации
Гейт релиза
Верификация / гейты качества
7-фазный чеклист перед релизом
01Сборка (Next.js SSG export)
02Lighthouse Performance ≥ 90
03Lighthouse Accessibility = 100
04Аудит адаптивности (375px – 2560px)
05Пайплайн оптимизации изображений (WebP/AVIF + LQIP)
06UX автокомплита поиска (debounce + cache)
07Кросс‑браузерное тестирование (Chrome, Safari, Firefox, Samsung Internet)
Все гейты пройдены
7/7
Стек технологий
Next.js 12React 18TypeScript 4.7Tailwind CSS 3Framer MotionMapbox Geocoding APIflatpickrplaiceholder (LQIP)Mailchimp APIVercel Edgenext/fontnext/image
Результат
Поставлено за 6 недель до пика летнего сезона 2022. Lighthouse: 96 Performance / 100 Accessibility / 100 Best Practices / 98 SEO — превосходя бенчмарк‑конкурентов клиента (Booking.com: ~68 Performance, TripAdvisor: ~52). Конверсия героя в поиск (пользователи, взаимодействовавшие с поисковой строкой за 8 секунд): 41% — выше среднего по тревел‑индустрии 25‑30%. 8‑секционная структура удерживает скролл: средняя глубина 72% в первый месяц (Google Analytics). Конверсия в подписку: 6.2% уникальных посетителей. Glassmorphism‑герой с интегрированным поиском стал основным брендовым активом, переиспользованным в платной рекламе и соцсетях. CSS бандл: 11.4 KB gzip (без кастомных стилей — только Tailwind). Все изображения автоконвертированы в WebP/AVIF через Next.js Image с LQIP blur placeholders, сократив вес изображений на 62% vs. предыдущего WordPress‑сайта клиента.
Сложные задачи, которые мы решили
Дизайн с обилием изображений и Lighthouse 96+
Лендинг содержит 15+ фотографий высокого разрешения (аэрофото героя, 3 карточки направлений, 8 карточек туров, фото featured trip, фото рассылки, аватары отзывов, плейсхолдеры гидов). На типичном тревел‑сайте это убивает производительность. Мы достигли Lighthouse 96 через многослойный пайплайн оптимизации изображений: (1) Next.js Image с автоматической форматной неготиацией (WebP для Chrome/Firefox, AVIF для Chrome 100+, JPEG fallback для Safari < 14) и генерацией responsive srcset (брейкпоинты 640/750/828/1080/1200/1920/2048px); (2) LQIP (Low Quality Image Placeholder) генерируется в build‑time через plaiceholder — каждое изображение получает размытый 16×10px base64 плейсхолдер, рендерящийся мгновенно, пока lazy‑загружается полное изображение, устраняя CLS; (3) hero‑изображение с priority={true} и fetchPriority='high', прелоуднутое через <link rel='preload'>; (4) below‑fold изображения с loading='lazy' через Intersection Observer; (5) все изображения из Vercel Edge CDN с immutable cache headers. В сумме с Tailwind CSS (11.4 KB gzip), next/font (WOFF2, font‑display: swap) и SSG (нулевая серверная латентность), LCP = 1.2s на 4G.
Glassmorphism‑герой с интегрированной поисковой строкой на каждом вьюпорте
Герой‑секция — конверсионный двигатель лендинга: полноэкранная аэрофотография бунгало Мальдив с glassmorphism текстовой панелью (backdrop‑filter: blur(16px) saturate(180%), полупрозрачный белый фон), содержащей чипы категорий, заголовок, подзаголовок и CTA. Ниже — стики поисковая строка на 4 поля (локация, заезд, выезд, гости) и кнопка Search. Инженерный вызов: адаптация с 375px (iPhone SE) до 2560px (ultrawide) без поломок. На десктопе (>1024px) строка — горизонтальный CSS Grid с равными колонками. На планшете (768–1024px) — wrap в 2×2. На мобильном (<768px) — вертикальный стек с Search на полную ширину. Glassmorphism использует @supports с solid‑color fallback для старых Android WebView. Автокомплит локации — Mapbox Geocoding API с 300ms debounce, минимум 3 символа, кеширование результатов (Map, 5‑мин TTL) для free tier. Дейтпикеры — flatpickr с range mode, locale‑aware форматированием (DD.MM.YYYY для европейских рынков) и minDate: today. Весь герой — единый <section> без JS‑гидрации на статических путях (SSG), поисковое взаимодействие — client component island через next/dynamic.
Архитектура социального доказательства: отзывы с волнообразными цветными идентичностями
Секция Client Feedback использует намеренный визуальный паттерн для максимизации доверия: каждая карточка отзыва имеет белую верхнюю половину (кавычка + текст) и цветную нижнюю (имя автора), разделённые волнообразной границей. Волна реализована как SVG clip‑path на цветном div, создавая иллюзию органического разделения. Каждая карточка получает уникальный цвет (оранжевый для Usman Borukov, тил для Karina Volman, голубой для Dana Sergey) — вариация цветов предотвращает 'шаблонное ощущение', подрывающее доверие. Аватар автора — круглое фото, позиционированное точно на переходе белой и цветной зон (50% overlap через negative margin‑top), создавая визуальный якорь. Паттерн адаптирован из исследования конверсии Trustpilot (2021): отзывы с аватарами на цветовых переходах дают 23% более высокий read‑through rate. Карточки — CSS Grid на десктопе, snap‑scroll на мобильном (scroll‑snap‑type: x mandatory), Framer Motion для входных анимаций (fade‑up по скроллу через Intersection Observer).
Похожий проект? Получите оценку или запишитесь на звонок.
Похожий проект?
20 минут — обсудим вашу задачу, дадим честную оценку. Без обязательств.