Landing Cafe
Кофейня-пекарня — архетип «локальный бизнес»: страница зовёт дойти ногами, а не купить по кнопке. Меню с ценами (menu-list) сразу после hero, «как печём» шагами, хозяйка крупным планом, отзывы соседей лентой и контакты с копированием вместо формы.
Установка
npx shadcn@latest add https://motiva.pages.dev/r/landing-cafe.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 { NavMinimal } from "@/components/nav-minimal";
import { HeroSplit } from "@/components/hero-split";
import { MenuList } from "@/components/menu-list";
import { StepsFlow } from "@/components/steps-flow";
import { TeamSpotlight } from "@/components/team-spotlight";
import { TestimonialsMarquee } from "@/components/testimonials-marquee";
import { ContactPanel } from "@/components/contact-panel";
import { FooterMinimal } from "@/components/footer-minimal";
/**
* Кофейня-пекарня — архетип «локальный бизнес»: страница не продаёт по кнопке,
* а зовёт дойти ногами. Отсюда состав: меню с ценами (menu-list, новый третий
* вариант вида pricing) — главная секция сразу после hero, дальше «как печём»
* шагами, хозяйка крупным планом (доверие к месту — это доверие к человеку),
* отзывы соседей лентой и КОНТАКТЫ С КОПИРОВАНИЕМ вместо формы: адрес и телефон
* уносят с собой, а не пишут нам в CRM.
*
* Живого фона нет нигде: локальному месту к лицу бумага и спокойствие, характер
* даёт тёплый пшеничный акцент (--ds-accent-h: 80).
*/
export function LandingCafe() {
return (
<div
className="lcf ds-scope"
style={{
textAlign: "start",
["--ds-accent-h" as string]: "80",
["--ds-section-y" as string]: "clamp(44px, 6.5vw, 88px)",
background: "var(--ds-bg, oklch(0.14 0.02 275))",
}}
>
<NavMinimal brand="корка" links={["Меню", "Как печём", "Где мы"]} cta="Смотреть меню" />
<HeroSplit
eyebrow="пекарня на закваске"
lines={["Хлеб, который"]}
accentLine="пахнет на всю улицу"
sub="Печём каждое утро с половины шестого: тартины, багеты и булочки с кардамоном. К вечеру полки пустеют — это не маркетинг, это размер печи."
primary="Смотреть меню"
secondary="Как мы печём"
/>
<MenuList />
<StepsFlow
eyebrow="как печём"
title="Тридцать восемь часов от муки до полки"
sub="Быстрее не умеем — закваска работает со скоростью закваски."
items={[
{ title: "Закваска", text: "Своей закваске шесть лет, кормим её дважды в день. Никаких дрожжей из пачки.", note: "36 часов" },
{ title: "Тесто и расстойка", text: "Замес руками, холодная расстойка на ночь: вкус собирается медленно.", note: "12 часов" },
{ title: "Под печи", text: "Печём на камне при 250 °C. Корка трещит первые полчаса — послушайте.", note: "5:30 утра" },
]}
/>
<TeamSpotlight
eyebrow="кто печёт"
name="Аня Морозова"
role="пекарь и хозяйка"
bio="Десять лет варила рекламу в офисе, пока не поняла, что хлеб честнее. Училась в Питере и Копенгагене, вернулась в свой район и поставила печь в бывшей аптеке. Знает по имени половину очереди."
facts={[
{ value: "6 лет", label: "нашей закваске" },
{ value: "14", label: "сортов в ротации" },
{ value: "5:30", label: "первая выпечка" },
]}
/>
<TestimonialsMarquee
eyebrow="соседи говорят"
title="За что нас любят в радиусе трёх кварталов"
items={[
{ text: "Прихожу к открытию за тартином — если в 11 его нет, значит, день у района удался, а у меня нет.", name: "Игорь В.", role: "живёт через дорогу" },
{ text: "Булочка с кардамоном лучше, чем в Стокгольме. Проверяла лично, дважды.", name: "Настя О.", role: "переехала из Швеции" },
{ text: "Беру багет и фильтр каждое утро по пути на работу. Очередь — минуты три, всё по-соседски.", name: "Пётр К.", role: "постоянный с открытия" },
{ text: "Заказывали хлеб на свадьбу — привезли тёплым. Гости до сих пор спрашивают адрес.", name: "Лена и Марк", role: "заказ на праздник" },
{ text: "Ребёнок называет это место «дом, где корочка». Точнее не скажешь.", name: "Ольга Д.", role: "мама двоих" },
{ text: "Ржаной с тмином — единственный хлеб, который доживает у меня до утра. Потому что я его прячу.", name: "Андрей С.", role: "сосед по переулку" },
]}
/>
<ContactPanel
eyebrow="где мы"
title="Заходите — печь видно от двери"
sub="Мы в бывшей аптеке за рынком. Столиков немного, хлеб — с собой."
rows={[
{ label: "адрес", value: "Столярный переулок, 4" },
{ label: "часы", value: "ежедневно 8:00–20:00" },
{ label: "телефон", value: "+7 900 000-00-00" },
]}
note="Отложить хлеб можно звонком до 12:00 — держим до вечера"
/>
<FooterMinimal
brand="корка"
tagline="Пекарня на закваске в Столярном переулке"
columns={[
{ title: "Пекарня", links: ["Меню", "Как печём", "Хлеб на заказ"] },
{ title: "Связь", links: ["+7 900 000-00-00", "hleb@korka.cafe", "Мы на карте"] },
]}
/>
</div>
);
}