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

Landing Cafe

Кофейня-пекарня — архетип «локальный бизнес»: страница зовёт дойти ногами, а не купить по кнопке. Меню с ценами (menu-list) сразу после hero, «как печём» шагами, хозяйка крупным планом, отзывы соседей лентой и контакты с копированием вместо формы.

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

Установка

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