Landing Studio
Готовый лендинг креативной студии из семи секций каталога. Сама страница ничего не рисует — задаёт только тон акцента и вертикальный ритм, всё остальное приезжает из дизайн-системы.
Установка
npx shadcn@latest add https://motiva.pages.dev/r/landing-studio.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 { NavSticky } from "@/components/nav-sticky";
import { HeroSplit } from "@/components/hero-split";
import { LogosStrip } from "@/components/logos-strip";
import { FeaturesBento } from "@/components/features-bento";
import { ShowcaseMasonry } from "@/components/showcase-masonry";
import { CtaGlow } from "@/components/cta-glow";
import { FooterMinimal } from "@/components/footer-minimal";
/**
* Лендинг креативной студии — быстрый старт, а не ещё один эффект.
*
* Страница НИЧЕГО не рисует сама: она только расставляет секции и задаёт две вещи —
* вертикальный ритм (`--ds-section-y`) и тон акцента (`--ds-accent-h`). Всё остальное
* приезжает из дизайн-системы, поэтому ре-брендинг — это одно число, а не проход по файлам.
*
* Именно так и задумано разделение: эффект — кирпич, секция — стена, страница — дом.
* Каждая секция объявлена в `registryDependencies`, поэтому
* `npx shadcn add .../r/landing-studio.json` ставит и страницу, и все секции, и эффекты,
* из которых они собраны.
*
* Контент здесь — дефолты секций. Чтобы сделать страницу своей, передай пропсы: у каждой
* секции весь текст и картинки вынесены в типизированный интерфейс, ничего не «зашито».
*/
export function LandingStudio() {
return (
<div
className="lst ds-scope"
style={{
textAlign: "start",
// ds-scope + одно число: внутри контейнера пересчитывается весь набор акцента
["--ds-accent-h" as string]: "300",
// вертикальный ритм страницы — секции сами отступов себе не назначают
["--ds-section-y" as string]: "clamp(48px, 7vw, 96px)",
background: "var(--ds-bg, oklch(0.14 0.02 275))",
}}
>
<NavSticky brand="studio⁄" links={["Работы", "Услуги", "Студия", "Контакты"]} cta="Обсудить" />
<HeroSplit
eyebrow="креативная студия"
lines={["Делаем бренды,"]}
accentLine="которые движутся"
sub="Айдентика, сайты и моушен. Собираем не картинки, а систему, в которой каждая деталь знает, как себя вести."
primary="Обсудить проект"
secondary="Смотреть работы"
/>
<LogosStrip caption="нам доверяют" />
<FeaturesBento />
<ShowcaseMasonry />
<CtaGlow />
<FooterMinimal />
</div>
);
}
