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

Landing Event

Лендинг конференции — первый событийный архетип: обратный отсчёт тикает в баннере, северное сияние в сокете hero, программа — schedule-grid (настоящее расписание сеткой по дням, с перерывами), спикеры — team-grid, билеты — pricing-tiers, подписка с лид-магнитом для тех, кто не успел.

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

Установка

npx shadcn@latest add https://motiva.pages.dev/r/landing-event.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 { BannerCountdown } from "@/components/banner-countdown";
import { NavMinimal } from "@/components/nav-minimal";
import { HeroCentered } from "@/components/hero-centered";
import { AuroraField } from "@/components/aurora-field";
import { StatsBand } from "@/components/stats-band";
import { TeamGrid } from "@/components/team-grid";
import { ScheduleGrid } from "@/components/schedule-grid";
import { PricingTiers } from "@/components/pricing-tiers";
import { FaqAccordion } from "@/components/faq-accordion";
import { NewsletterSplit } from "@/components/newsletter-split";
import { FooterMinimal } from "@/components/footer-minimal";

/**
 * Лендинг конференции — шестая готовая страница и первый «событийный» архетип:
 * дедлайн наверху (banner-countdown тикает у посетителя), северное сияние в сокете
 * hero, программа — schedule-grid (настоящее расписание сеткой), спикеры — team-grid,
 * билеты — pricing-tiers. Десять секций, из них две новые (баннер с отсчётом
 * и подписка с лид-магнитом) встали в страницу в день своего рождения.
 *
 * Характер — глубокий северный: акцент в бирюзу (--ds-accent-h: 200), ритм
 * просторный. Страница по-прежнему не несёт ни строчки своего CSS.
 */
export function LandingEvent() {
  return (
    <div
      className="lev ds-scope"
      style={{
        textAlign: "start",
        ["--ds-accent-h" as string]: "200",
        ["--ds-section-y" as string]: "clamp(48px, 7vw, 96px)",
        background: "var(--ds-bg, oklch(0.14 0.02 275))",
      }}
    >
      <BannerCountdown
        label="12–14 марта"
        text="«Слой» — конференция об интерфейсах. Ранние билеты до конца месяца"
        ctaLabel="Успеть"
      />
      <NavMinimal brand="слой’27" links={["Программа", "Спикеры", "Билеты", "Место"]} cta="Купить билет" />

      <HeroCentered
        badge="три дня · офлайн + трансляция"
        title="Конференция о том, как интерфейсы живут"
        accentWords={3}
        sub="Не «тренды и вдохновение», а разборы боевых систем: что дёргается, почему падает и как чинится. Хельсинки, 12–14 марта."
        primary="Купить билет"
        secondary="Смотреть программу"
        note="800 мест, в прошлый раз закончились за месяц"
        background={<AuroraField />}
        tone="dark"
      />

      <StatsBand
        items={[
          { value: 3, label: "дня и два трека" },
          { value: 24, label: "доклада без воды" },
          { value: 800, label: "мест в зале" },
          { value: 6, label: "лет проводим" },
        ]}
      />

      <TeamGrid
        eyebrow="спикеры"
        title="Кто выйдет на сцену"
        sub="Люди, которые чинят интерфейсы руками, а не слайдами."
        items={[
          { name: "Jane Doe", role: "дизайн-системы", photo: "https://motiva.pages.dev/img/1027-400x400.jpg", about: "Ведёт систему, на которой живут двенадцать продуктов." },
          { name: "John Roe", role: "перформанс", photo: "https://motiva.pages.dev/img/91-400x400.jpg", about: "Доклад о том, куда на самом деле уходит кадр." },
          { name: "Mary Major", role: "моушен", photo: "https://motiva.pages.dev/img/823-400x400.jpg", about: "Покажет, как анимации объясняют, а не украшают." },
          { name: "Alex Poe", role: "доступность", photo: "https://motiva.pages.dev/img/1005-400x400.jpg", about: "Разбор интерфейсов на слух — вживую, с читалкой." },
        ]}
      />

      <ScheduleGrid
        eyebrow="программа"
        title="Три дня по слоям"
        sub="Утро — доклады, после обеда — разборы у досок. Полная сетка придёт билетом."
        items={[
          { day: "День 1 · данные", time: "10:00", title: "Слой данных", note: "кеши, гонки, честные состояния загрузки" },
          { day: "День 1 · данные", time: "14:00", title: "Обед", kind: "break" },
          { day: "День 1 · данные", time: "15:00", title: "Разборы у досок", note: "приносите свой продукт" },
          { day: "День 2 · движение", time: "10:00", title: "Слой движения", note: "скролл, пружины и производные" },
          { day: "День 2 · движение", time: "14:00", title: "Обед", kind: "break" },
          { day: "День 2 · движение", time: "15:00", title: "Две мастерские", note: "перф-профиль · моушен без библиотек" },
          { day: "День 3 · люди", time: "10:00", title: "Слой людей", note: "доступность, локали, медленные сети" },
          { day: "День 3 · люди", time: "17:00", title: "Закрытие и афтепати", note: "запись всех докладов — участникам" },
        ]}
        note="Программа уточняется; полная сетка с залами придёт вместе с билетом."
      />

      <PricingTiers
        eyebrow="билеты"
        title="Три способа быть с нами"
        sub="Ранняя цена действует до конца месяца или пока есть места."
        plans={[
          {
            name: "Трансляция",
            price: "€49",
            note: "смотреть откуда угодно",
            features: ["Оба трека в прямом эфире", "Запись на год", "Чат с залом"],
            cta: "Взять доступ",
          },
          {
            name: "Зал",
            price: "€290",
            period: "ранняя цена",
            note: "вместо €390 позже",
            features: ["Все доклады и разборы", "Мастерские по записи", "Обеды и кофе", "Афтепати"],
            cta: "Купить билет",
            featured: true,
          },
          {
            name: "Команда",
            price: "€990",
            note: "четыре места",
            features: ["Всё из «Зала» ×4", "Стол для команды", "Закрытая сессия вопросов"],
            cta: "Собрать команду",
          },
        ]}
      />

      <FaqAccordion
        eyebrow="вопросы"
        title="Перед покупкой обычно спрашивают"
        items={[
          { q: "Будет ли запись?", a: "Да, всем купившим любой билет — в течение недели после конференции, доступ на год." },
          { q: "Можно ли вернуть билет?", a: "Полностью — за 14 дней до старта. Позже — передать коллеге, просто напишите нам имя." },
          { q: "На каком языке доклады?", a: "Половина на русском, половина на английском, у всех — живые субтитры на втором языке." },
          { q: "Что с визой?", a: "Пришлём приглашение для визы в день покупки. Обычно хватает трёх недель." },
        ]}
      />

      <NewsletterSplit
        eyebrow="не в этот раз?"
        title="Пришлём главное письмом"
        sub="Одно письмо после конференции: лучшие доклады, слайды и конспекты."
        bullets={["Три доклада, которые обсуждали громче всех", "Все слайды одним архивом", "Даты следующего «Слоя» раньше анонса"]}
        cardTitle="Письмо после конференции"
        buttonLabel="Хочу конспект"
        note="Одно письмо, без серии «прогревов»."
      />

      <FooterMinimal
        brand="слой’27"
        tagline="Конференция о том, как интерфейсы живут"
        columns={[
          { title: "Событие", links: ["Программа", "Спикеры", "Билеты", "Кодекс"] },
          { title: "Место", links: ["Зал и карта", "Отели рядом", "Виза"] },
          { title: "Связь", links: ["hello@sloy.conf", "Телеграм-канал", "Для прессы"] },
        ]}
      />
    </div>
  );
}
лицензия: MITавтор: Motivaисточник: оригинал (Motiva)v1.0.0