Landing Travel
Экспедиции выходного дня — архетип «путешествия» и первая страница с hero-video: атмосферу природы продаёт движущийся кадр. Маршруты галереей, выезд шагами «от электрички до электрички», три формата ценами, честные ответы про дождь и связь; внизу — первое применение cookie-notice.
Установка
npx shadcn@latest add https://motiva.pages.dev/r/landing-travel.jsonЧто нужно в проекте до установки
Файл
components.jsonв корнеИз него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:
"aliases": { "components": "@/components", "lib": "@/lib" }Нет файла — установка не начнётся вовсе.
Алиас
@объявлен дваждыВ корневом
tsconfig.jsonи в конфиге сборщика. В Vite корневой tsconfig часто содержит толькоreferences— этого мало."paths": { "@/*": ["./src/*"] } // tsconfig.json resolve.alias = { "@": "/src" } // vite.config.tsБез
pathsCLI молча создаёт папку с именем@.Токены подключены один раз на приложение
Они приезжают вместе с записью — достаточно импортировать их в точке входа:
import "@/styles/motiva-tokens.css";Без них блок потеряет цвета, ритм и тему.
Своя типографика не спорит с блоком
Наследуемые свойства протекают внутрь:
text-align: centerна обёртке отцентрует содержимое секции. То же касаетсяfont-familyиline-height.Проект без TypeScript? всё равно нужен tsconfig
CLI грузит
tsconfig.jsonбезусловно, а при"tsx": falseидёт заjsconfig.jsonи падает так же. Минимум — файл сpathsи"tsx": trueвcomponents.json.Приехавший рядом
.tsxможно не трогать — вам нужен.vanilla.js.
Экспорт
Код
import { NavMinimal } from "@/components/nav-minimal";
import { HeroVideo } from "@/components/hero-video";
import { StatsBand } from "@/components/stats-band";
import { ShowcaseGallery } from "@/components/showcase-gallery";
import { StepsFlow } from "@/components/steps-flow";
import { PricingTiers } from "@/components/pricing-tiers";
import { TestimonialsGrid } from "@/components/testimonials-grid";
import { FaqColumns } from "@/components/faq-columns";
import { CtaGlow } from "@/components/cta-glow";
import { FooterMinimal } from "@/components/footer-minimal";
import { CookieNotice } from "@/components/cookie-notice";
/**
* Экспедиции выходного дня — архетип «путешествия» и ПЕРВАЯ страница
* с hero-video: у природы нет скриншотов, атмосферу продаёт движущийся кадр,
* и фоновое видео здесь ровно на своём месте (постер мгновенно, ролик — только
* когда виден, под reduced-motion — вовсе не грузится). Дальше — маршруты
* галереей, «как проходит выезд» шагами, три формата ценами и вопросы
* с честными ответами про подготовку и погоду.
*
* Внизу — первое применение cookie-notice на странице: у турфирмы есть
* аналитика, и спросить согласие — часть архетипа, а не украшение.
* Акцент — мох и хвоя (--ds-accent-h: 140).
*/
export function LandingTravel() {
return (
<div
className="ltr ds-scope"
style={{
textAlign: "start",
["--ds-accent-h" as string]: "140",
["--ds-section-y" as string]: "clamp(44px, 6.5vw, 88px)",
background: "var(--ds-bg, oklch(0.14 0.02 275))",
}}
>
<NavMinimal brand="за грань" links={["Маршруты", "Как это устроено", "Вопросы"]} cta="Выбрать выезд" />
<HeroVideo
badge="экспедиции выходного дня"
title="Уехать туда, где не ловит"
sub="Собираем маршруты на два дня без толп и связи: заброска, ночёвка, обратный поезд. Вы берёте рюкзак — остальное уже собрано."
primary="Выбрать маршрут"
secondary="Как это устроено"
note="ближайший выезд — в субботу · осталось 4 места"
/>
<StatsBand
items={[
{ value: 34, label: "маршрута в каталоге" },
{ value: 212, label: "выездов провели" },
{ value: 9, label: "человек — максимум группы" },
{ value: 96, suffix: "%", label: "возвращаются за вторым" },
]}
/>
<ShowcaseGallery
eyebrow="маршруты"
title="Куда едем этой осенью"
items={[
{ src: "https://motiva.pages.dev/img/1015-800x600.jpg", title: "Каменные гряды", tag: "2 дня · пешком 18 км", wide: true },
{ src: "https://motiva.pages.dev/img/1043-900x675.jpg", title: "Озёрный траверс", tag: "2 дня · байдарки" },
{ src: "https://motiva.pages.dev/img/1018-600x750.jpg", title: "Старая узкоколейка", tag: "1 день · вело" },
{ src: "https://motiva.pages.dev/img/1035-600x750.jpg", title: "Водопадный каньон", tag: "2 дня · радуги в комплекте" },
{ src: "https://motiva.pages.dev/img/1057-900x675.jpg", title: "Берег на закате", tag: "2 дня · море", wide: true },
{ src: "https://motiva.pages.dev/img/1022-600x750.jpg", title: "Ночь на вышке", tag: "1 ночь · астро и сияние" },
]}
/>
<StepsFlow
eyebrow="как проходит выезд"
title="От электрички до электрички"
sub="Никакого героизма — только продуманная логистика и запас чая."
items={[
{ title: "Сбор и заброска", text: "Утренняя электричка или наш микроавтобус. Снаряжение под рост и погоду уже в багажнике.", note: "суббота 7:40" },
{ title: "Маршрут", text: "Идём без спешки: гид знает, где вид, где родник и где сушить ботинки.", note: "12–18 км" },
{ title: "Лагерь", text: "Палатки стоят к вашему приходу, ужин на огне, разговор — по желанию, тишина — по умолчанию.", note: "ночёвка" },
{ title: "Возвращение", text: "К вечернему поезду — с запасом. В понедельник вы на работе, но уже другой.", note: "воскресенье 21:00" },
]}
/>
<PricingTiers
eyebrow="форматы"
title="Три способа уехать"
sub="Цена за человека, снаряжение и еда включены. Дорога — электричкой, билет ваш."
plans={[
{
name: "Однодневка",
price: "3 900 ₽",
period: "за выезд",
note: "вело или пешком, без ночёвки",
features: ["Гид и логистика", "Обед на огне", "Снаряжение по погоде", "Группа до 9 человек"],
cta: "Выбрать день",
},
{
name: "Выходные",
price: "8 400 ₽",
period: "за два дня",
note: "суббота — воскресенье, с ночёвкой",
features: ["Всё из «Однодневки»", "Палатка и спальник", "Три приёма пищи", "Баня, если маршрут позволяет"],
cta: "Выбрать выходные",
featured: true,
},
{
name: "Своя группа",
price: "договорная",
note: "от 5 человек, дата ваша",
features: ["Маршрут под запрос", "Свой темп и меню", "Фотограф — опционально"],
cta: "Обсудить",
},
]}
/>
<TestimonialsGrid
eyebrow="из отчётов"
title="Что пишут в понедельник"
items={[
{ text: "Телефон умер в субботу в 9 утра — лучшая поломка за год. Вернулась с обгоревшим носом и чистой головой.", name: "Катя М.", featured: true },
{ text: "Боялся, что «поход» значит «страдать». Оказалось — значит «идти и смотреть», страдал только будильник.", name: "Игорь В.", role: "первый выезд" },
{ text: "Байдарочный траверс — лучший тимбилдинг, который случился с нашим отделом. Едем четвёртый раз.", name: "Отдел аналитики", role: "своя группа" },
{ text: "Гид заметил, что я выдохлась, раньше меня самой. Темп поменяли так, что никто не заметил.", name: "Лена П." },
]}
/>
<FaqColumns
eyebrow="вопросы"
title="Что спрашивают до первого выезда"
items={[
{ q: "Я никогда не ходил(а) в походы — потяну?", a: "Маршруты «выходных» рассчитаны на обычную офисную форму: 12–18 км в день без рюкзака-дома — палатки и еду везёт логистика." },
{ q: "Что взять с собой?", a: "Ботинки, дождевик и личные вещи — список приходит после брони. Палатки, спальники и коврики — наши." },
{ q: "А если дождь?", a: "Идём: у нас тенты, у вас дождевики, у природы — лучший свет для фотографий. Отменяем только по штормовому предупреждению — с полным возвратом." },
{ q: "Связи правда нет?", a: "На большинстве маршрутов — почти нет, и это фича. У гида спутниковый мессенджер для экстренной связи." },
]}
contact="Остальное спросите в чате"
contactHref="#"
/>
<CtaGlow
title="Суббота ближе, чем кажется"
sub="Четыре места на ближайший выезд. Бронь — тысяча рублей, остальное после встречи на вокзале."
cta="Забронировать место"
note="возврат брони — без вопросов до четверга"
/>
<FooterMinimal
brand="за грань"
tagline="Экспедиции выходного дня. 34 маршрута там, где не ловит."
columns={[
{ title: "Выезды", links: ["Маршруты", "Календарь", "Своя группа"] },
{ title: "Связь", links: ["Чат участников", "go@zagran.trip", "+7 900 000-00-00"] },
]}
/>
<CookieNotice storageKey="ltr:cookie" />
</div>
);
}