Motiva
Мои коллекции
← каталог

Landing Travel

Экспедиции выходного дня — архетип «путешествия» и первая страница с hero-video: атмосферу природы продаёт движущийся кадр. Маршруты галереей, выезд шагами «от электрички до электрички», три формата ценами, честные ответы про дождь и связь; внизу — первое применение cookie-notice.

cssloadscrollrevealbasic~15 КБreduced-motion ✓
↗
↕ демо длиннее кадра — прокрутите его

Установка

npx shadcn@latest add https://motiva.pages.dev/r/landing-travel.json
Что нужно в проекте до установки
  1. Файл components.json в корне

    Из него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:

    "aliases": { "components": "@/components", "lib": "@/lib" }

    Нет файла — установка не начнётся вовсе.

  2. Алиас @ объявлен дважды

    В корневом tsconfig.json и в конфиге сборщика. В Vite корневой tsconfig часто содержит только references — этого мало.

    "paths": { "@/*": ["./src/*"] }        // tsconfig.json
    resolve.alias = { "@": "/src" }        // vite.config.ts

    Без paths CLI молча создаёт папку с именем @.

  3. Токены подключены один раз на приложение

    Они приезжают вместе с записью — достаточно импортировать их в точке входа:

    import "@/styles/motiva-tokens.css";

    Без них блок потеряет цвета, ритм и тему.

  4. Своя типографика не спорит с блоком

    Наследуемые свойства протекают внутрь: text-align: center на обёртке отцентрует содержимое секции. То же касается font-familyи line-height.

  5. Проект без TypeScript? всё равно нужен tsconfig

    CLI грузит tsconfig.json безусловно, а при "tsx": false идёт за jsconfig.json и падает так же. Минимум — файл с pathsи "tsx": true в components.json.

    Приехавший рядом .tsx можно не трогать — вам нужен .vanilla.js.

Экспорт

↓ Скачать .zip

Код

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>
  );
}
лицензия: MITавтор: Motivaисточник: оригинал (Motiva)v1.0.0