Landing Event
Лендинг конференции — первый событийный архетип: обратный отсчёт тикает в баннере, северное сияние в сокете hero, программа — schedule-grid (настоящее расписание сеткой по дням, с перерывами), спикеры — team-grid, билеты — pricing-tiers, подписка с лид-магнитом для тех, кто не успел.
Установка
npx shadcn@latest add https://motiva.pages.dev/r/landing-event.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 { 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>
);
}