Маркетинговая страница offplan.online — три направления оформления. Цель: за 8 секунд донести что мы делаем, для кого и почему это работает.
Лендинг — единственная точка входа для холодного трафика и outreach до того, как студия попадает в админку. Должен ответить на четыре вопроса: «что это», «для кого», «почему лучше альтернатив» и «что я получу за деньги».
Hero → USP-strip («Why us») → Features (7 модулей: Exterior, 3D Walkthrough, Floor Plans, Unit List, Amenities, Location, Gallery) → Pricing (3 тарифа: Foundation $390, Advanced $1,200, Enterprise POA — заглушка, цены в обсуждении) → Why us → CTA → Footer.
Killer feature — 3D Walkthrough. Интерактивный обход квартиры до сдачи дома. Главный дифференциатор от типового presentation-софта.
| Параметр | v1 — Split hero | v2 — Full-bleed cinematic | v3 — Demo-led hybrid |
|---|---|---|---|
| Hero | Текст + статичная preview-карточка | Полноэкранное фото 313 Pipis с overlay | Как в v2 + новый мессадж «Click a real project» |
| Под hero | USP-стрип | USP-стрип | Live iframe реального проекта + social-proof stats |
| Walkthrough | Один из 7 одинаковых блоков | Один из 7 одинаковых блоков | Hero-фича №1 с тегом «Killer feature» |
| Остальные модули | Чередование image left/right | Stacked, картинка во всю ширину | Компактный 3+3 grid карточек |
| White-label | Спрятан в Enterprise tier | Спрятан в Enterprise tier | Отдельная dark-секция с URL-стеком |
| Pricing | 3 тарифа | 3 тарифа | 3 тарифа + «Talk to us» bridge между Advanced и Enterprise |
| CTA | «Get started» / «Book a demo» | «Get started» / «Book a demo» | «See a real project» / «Set up your first — 5 min» |
| Длина прокрутки | Короткая | Длинная | Средняя — короче v2 за счёт grid |
| Когда лучше | Outreach к рендер-студиям, B2B | Агентства/брокеры, end-buyer tier | Холодный трафик — wow-эффект до прочтения |
Все три собраны на токенах brandbook v1.1 (navy + gold + stone). HTML отдельный под каждый — структура hero и feature-блоков различается. Контент одинаковый, но в v3 переписан под demo-first нарратив.
Классический B2B SaaS-паттерн. Hero делится на текст и preview-карточку. Feature-блоки чередуются — изображение слева, потом справа. Плотная компоновка, быстро читается.
docs/rendered/landing-v1.html · split hero · alternating layout · короче по высоте
Открыть в новой вкладке ↗
Hero на фотографии проекта 313 Pipis (golden hour) с тёмным overlay. Feature-блоки — картинка во всю ширину, eyebrow и заголовок сверху, описание и теги снизу. Премиальный тон, больше воздуха, лучше работает на full-screen presentation.
docs/rendered/landing-v2.html · beachfront hero · full-width visuals · текст сверху → картинка → описание снизу
Открыть в новой вкладке ↗
Hero как в v2, но мессадж переписан: «Don't read about it. Click a real project.» Сразу под hero — embedded iframe с реальным проектом (Tapestry на VV-продакшене): посетитель кликает Exterior / Walkthrough / Floor Plates / Unit List прямо на лендинге. Walkthrough вынесен hero-фичей с тегом «Killer feature». Остальные 6 модулей — компактный 3+3 grid. Плюс отдельный dark-блок white-label с URL-стеком и «Talk to us» bridge между тарифами. Самый сильный wow-эффект для холодного трафика.
docs/rendered/landing-v3.html · live iframe · walkthrough hero feature · 3+3 grid · white-label section · pricing bridge
Открыть в новой вкладке ↗