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

Landing Realty

Жилой дом — архетип «недвижимость»: хребет из проверяемых фактов. Планировки таблицей (первое применение comparison-table на странице), путь сделки шагами с названными сроками, баннер второй очереди, честные ответы про отделку и УК; запись на показ формой.

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

Установка

npx shadcn@latest add https://motiva.pages.dev/r/landing-realty.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 { 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>
  );
}
лицензия: MITавтор: Motivaисточник: оригинал (Motiva)v1.0.0