Landing Realty
Жилой дом — архетип «недвижимость»: хребет из проверяемых фактов. Планировки таблицей (первое применение comparison-table на странице), путь сделки шагами с названными сроками, баннер второй очереди, честные ответы про отделку и УК; запись на показ формой.
Установка
npx shadcn@latest add https://motiva.pages.dev/r/landing-realty.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 { BannerSticky } from "@/components/banner-sticky";
import { NavSticky } from "@/components/nav-sticky";
import { HeroSplit } from "@/components/hero-split";
import { StatsBand } from "@/components/stats-band";
import { ShowcaseGallery } from "@/components/showcase-gallery";
import { ComparisonTable } from "@/components/comparison-table";
import { StepsFlow } from "@/components/steps-flow";
import { FaqAccordion } from "@/components/faq-accordion";
import { ContactSplit } from "@/components/contact-split";
import { FooterMinimal } from "@/components/footer-minimal";
/**
* Жилой дом — архетип «недвижимость»: самая дорогая покупка в жизни читателя,
* поэтому тон сдержанный, а хребет страницы — ФАКТЫ, поддающиеся проверке:
* цифры дома сразу после hero, планировки ТАБЛИЦЕЙ (первое применение
* comparison-table на странице: сравнивают квартиры точно так же, как тарифы),
* путь сделки шагами с называнием сроков, вопросы — про ипотеку и отделку,
* а не «почему мы лучшие». Запись на показ — форма: квартиру покупают ногами.
*
* Живых фонов нет: дом продают виды из окон, а не шейдеры. Акцент —
* благородный графит с тёплым камнем (--ds-accent-h: 65).
*/
export function LandingRealty() {
return (
<div
className="lrl ds-scope"
style={{
textAlign: "start",
["--ds-accent-h" as string]: "65",
["--ds-section-y" as string]: "clamp(48px, 7vw, 96px)",
background: "var(--ds-bg, oklch(0.14 0.02 275))",
}}
>
<BannerSticky
label="старт продаж"
text="Открыта вторая очередь: этажи 9–16, виды на парк"
ctaLabel="К планировкам"
storageKey="lrl-queue2"
/>
<NavSticky brand="дом у рощи" links={["О доме", "Планировки", "Как купить", "Показ"]} cta="Выбрать квартиру" />
<HeroSplit
eyebrow="жилой дом · сдача в 2027"
lines={["Дом, из которого"]}
accentLine="не хочется уезжать"
sub="Шестнадцать этажей у берёзовой рощи: двор без машин, потолки три метра, окна в пол. До метро — восемь минут пешком, и это меряли ногами, а не рекламой."
primary="Смотреть планировки"
secondary="Записаться на показ"
/>
<StatsBand
items={[
{ value: 16, label: "этажей, лифты без ожидания" },
{ value: 3, suffix: " м", label: "потолки во всех квартирах" },
{ value: 8, suffix: " мин", label: "до метро — мерили ногами" },
{ value: 2027, label: "год сдачи, без переносов в истории" },
]}
/>
<ShowcaseGallery
eyebrow="дом и место"
title="Что видно из окон и с чем живёшь"
items={[
{ src: "https://motiva.pages.dev/img/1029-600x750.jpg", title: "Парк под окнами", tag: "восточная сторона", wide: true },
{ src: "https://motiva.pages.dev/img/1043-900x675.jpg", title: "Роща и река", tag: "маршрут выходного дня" },
{ src: "https://motiva.pages.dev/img/221-900x700.jpg", title: "Город рядом", tag: "но не под окнами" },
{ src: "https://motiva.pages.dev/img/1057-900x675.jpg", title: "Закаты с верхних", tag: "этажи 12–16", wide: true },
{ src: "https://motiva.pages.dev/img/1018-600x750.jpg", title: "Дорога из города", tag: "двадцать минут на машине" },
{ src: "https://motiva.pages.dev/img/1019-600x750.jpg", title: "Вечер у воды", tag: "набережная в квартале" },
]}
/>
<ComparisonTable
eyebrow="планировки"
title="Квартиры без риэлторского тумана"
sub="Цены финальные, за квадратный метр доплат нет. Отделка — во всех вариантах."
columns={[
{ name: "Студия", note: "28 м²" },
{ name: "Двушка", note: "54 м²", featured: true },
{ name: "Трёшка", note: "78 м²" },
]}
rows={[
{ label: "Цена с отделкой", cells: ["6,4 млн ₽", "11,8 млн ₽", "16,9 млн ₽"] },
{ label: "Этажи в продаже", cells: ["2–8", "3–16", "9–16"] },
{ label: "Окна в пол", cells: [true, true, true] },
{ label: "Вид на рощу", cells: [false, true, true] },
{ label: "Гардеробная", cells: [false, true, true] },
{ label: "Осталось квартир", cells: ["11", "23", "6"] },
]}
note="Цены действительны на текущую очередь; бронь фиксирует цену на 10 дней."
/>
<StepsFlow
eyebrow="как купить"
title="Четыре шага и ключи"
sub="Каждый шаг — с названным сроком. Затягивать сделку невыгодно и нам."
items={[
{ title: "Показ", text: "Смотрим шоурум и вид с вашего этажа. Без «сегодня последний день акции».", note: "1 час" },
{ title: "Бронь", text: "Фиксируем квартиру и цену. Передумали за десять дней — возвращаем всё.", note: "50 000 ₽" },
{ title: "Ипотека или сразу", text: "Наши банки одобряют по двум документам; ставку сравниваем при вас.", note: "3–5 дней" },
{ title: "Сделка и ключи", text: "Электронная регистрация, ключи — в день сдачи дома. Приёмка с инженером — наша.", note: "2027" },
]}
/>
<FaqAccordion
eyebrow="частые вопросы"
title="Что спрашивают до показа"
items={[
{ q: "Что входит в отделку?", a: "Полы, стены, санузлы под ключ, разводка электрики и сантехника. Кухонного гарнитура нет — по опыту, его всё равно меняют под себя." },
{ q: "Двор правда без машин?", a: "Да, паркинг подземный и гостевой снаружи. Во дворе — площадки, роща и никаких шлагбаумов посреди газона." },
{ q: "Какая управляющая компания?", a: "Своя, тариф опубликован до покупки. Первый год — по себестоимости, дальше решает совет дома." },
{ q: "Можно ли смотреть квартиру на своём этаже?", a: "Да, с 9-го по 16-й возим на строительном лифте в каске — вид оцениваете лично, а не по рендеру." },
]}
/>
<ContactSplit
eyebrow="показ"
title="Приезжайте посмотреть своими глазами"
sub="Показы ежедневно с 10 до 20. Напишите удобное время — подтвердим за час."
/>
<FooterMinimal
brand="дом у рощи"
tagline="Жилой дом у берёзовой рощи. Сдача — 2027, без переносов в истории."
columns={[
{ title: "Дом", links: ["О доме", "Планировки", "Ход стройки", "Документы"] },
{ title: "Связь", links: ["+7 900 000-00-00", "sale@dom-roscha.ru", "Офис продаж на карте"] },
]}
note="Проектная декларация — на сайте"
/>
</div>
);
}