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

Landing Charity

Приют/фонд — архетип «нонпрофит»: страница просит доверия, а не денег. Цифры за годы сразу после hero, подопечные с именами, три способа помочь без иерархии, путь «забрать домой» шагами; донат-CTA один и после историй — сначала показать работу.

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

Установка

npx shadcn@latest add https://motiva.pages.dev/r/landing-charity.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 { HeroCentered } from "@/components/hero-centered";
import { StatsBand } from "@/components/stats-band";
import { ShowcaseGallery } from "@/components/showcase-gallery";
import { FeaturesColumns } from "@/components/features-columns";
import { StepsFlow } from "@/components/steps-flow";
import { TestimonialsGrid } from "@/components/testimonials-grid";
import { CtaGlow } from "@/components/cta-glow";
import { FaqAccordion } from "@/components/faq-accordion";
import { FooterMinimal } from "@/components/footer-minimal";

/**
 * Приют/фонд — архетип «нонпрофит»: страница не продаёт, а просит доверия,
 * поэтому строится на ФАКТАХ и ЛИЦАХ: цифры за годы сразу после hero (доверие —
 * это счётчики, которые можно проверить), подопечные С ИМЕНАМИ в витрине
 * (жертвуют не «фонду», а Барсику), три способа помочь БЕЗ иерархии «деньги
 * важнее рук», путь «как забрать домой» шагами и истории с хорошим концом.
 * Донат-CTA один и после историй, не до: сначала показать работу, потом просить.
 *
 * Живых фонов нет — у приюта каждая копейка на виду, и страница выглядит так же.
 * Акцент тёплый рыжий (--ds-accent-h: 35): цвет шерсти, не пожарной тревоги.
 */
export function LandingCharity() {
  return (
    <div
      className="lch ds-scope"
      style={{
        textAlign: "start",
        ["--ds-accent-h" as string]: "35",
        ["--ds-section-y" as string]: "clamp(44px, 6.5vw, 88px)",
        background: "var(--ds-bg, oklch(0.14 0.02 275))",
      }}
    >
      <NavMinimal brand="тёплый хвост" links={["Подопечные", "Как помочь", "Отчёты"]} cta="Помочь" />

      <HeroCentered
        badge="приют для собак · работаем с 2018"
        title="Мы находим дом тем, кого оставили"
        accentWords={3}
        sub="Пятьдесят два хвоста живут у нас прямо сейчас. Каждому нужны еда, прививки и человек. С первыми двумя справляемся сами — за третьим пришли к вам."
        primary="Забрать друга"
        secondary="Помочь деньгами"
        note="отчёты о каждом рубле — раз в месяц, публично"
      />

      <StatsBand
        items={[
          { value: 743, label: "собак пристроено за семь лет" },
          { value: 52, label: "живут в приюте сейчас" },
          { value: 118, label: "волонтёров приходят регулярно" },
          { value: 100, suffix: "%", label: "отчётность — публичная" },
        ]}
      />

      <ShowcaseGallery
        eyebrow="жизнь приюта"
        title="Как мы живём — без постановки"
        items={[
          { src: "https://motiva.pages.dev/img/1025-600x750.jpg", title: "Бублик собирается домой", tag: "2 года · дружит со всеми", wide: true },
          { src: "https://motiva.pages.dev/img/1021-600x750.jpg", title: "Субботний выгул", tag: "лес за приютом, туман бесплатно" },
          { src: "https://motiva.pages.dev/img/491-900x700.jpg", title: "Стройка вольеров", tag: "руками волонтёров" },
          { src: "https://motiva.pages.dev/img/1035-600x750.jpg", title: "Волонтёрский выезд", tag: "награда за полгода выгулов", wide: true },
          { src: "https://motiva.pages.dev/img/221-900x700.jpg", title: "Наш квартал", tag: "маршрут вечерней прогулки" },
          { src: "https://motiva.pages.dev/img/1050-600x750.jpg", title: "Вывоз на море", tag: "всем составом, раз в лето" },
        ]}
      />

      <FeaturesColumns
        eyebrow="как помочь"
        title="Три способа — все одинаково важные"
        sub="Не можете забрать — приходите гулять. Не можете приходить — расскажите о нас."
        items={[
          { title: "Деньгами", text: "Регулярные 300 ₽ кормят одного хвоста неделю. Разовые — тоже спасибо: отчёт в любом случае" },
          { title: "Руками", text: "Выгул по выходным, стройка вольеров, фото подопечных для соцсетей — записывайтесь" },
          { title: "Домом", text: "Передержка на месяц или дом навсегда. Поможем с кормом на первое время" },
        ]}
      />

      <StepsFlow
        eyebrow="забрать домой"
        title="Четыре шага до своего хвоста"
        sub="Мы не отдаём собак «в добрые руки по фото» — и вам спокойнее, и им."
        items={[
          { title: "Знакомство", text: "Приезжаете, гуляете, присматриваетесь. Можно несколько раз — торопить не будем.", note: "шаг 1" },
          { title: "Разговор", text: "Куратор расспросит про дом, график и опыт. Это не экзамен, это подбор пары.", note: "шаг 2" },
          { title: "Пробный месяц", text: "Собака едет к вам с кормом и памяткой. Куратор на связи каждый день.", note: "шаг 3" },
          { title: "Дом", text: "Подписываем договор, прививки и чип уже наши. Ждём фото с дивана.", note: "шаг 4" },
        ]}
      />

      <TestimonialsGrid
        eyebrow="истории"
        title="Хвосты, у которых получилось"
        items={[
          { text: "Забрали Марту «на передержку на две недели». Прошло три года, у неё своё кресло и мнение о наших гостях.", name: "Семья Ковалёвых", featured: true },
          { text: "Боялась, что щенок не уживётся с котом. Куратор подобрала спокойную Герду — теперь спят валетом.", name: "Ирина Т.", role: "дом с котом" },
          { text: "Хожу гулять с собаками по субботам уже год. Это дешевле психотерапевта и честнее спортзала.", name: "Максим Д.", role: "волонтёр" },
          { text: "Перевожу 300 ₽ в месяц и читаю отчёты. Видно всё: от мешка корма до счёта за рентген.", name: "Аня С.", role: "донор два года" },
        ]}
      />

      <CtaGlow
        title="Пятьдесят два хвоста ждут"
        sub="Регулярные 300 ₽ — это неделя корма для одного из них. Подписка отменяется в один клик, отчёт приходит раз в месяц."
        cta="Помочь сейчас"
        note="или приезжайте гулять — суббота, 11:00"
      />

      <FaqAccordion
        eyebrow="частые вопросы"
        title="Что спрашивают чаще всего"
        items={[
          { q: "Куда идут деньги?", a: "Корм, ветеринария, стройка и отопление вольеров. Каждый месяц публикуем отчёт со сканами чеков — ссылка в подвале." },
          { q: "Можно приехать посмотреть?", a: "Да, по субботам с 11:00 без записи. В будни — напишите куратору, встретим." },
          { q: "Я из другого города — как помочь?", a: "Деньгами, репостом или «виртуальной опекой»: выбираете хвоста, получаете его фото и новости каждый месяц." },
          { q: "Почему не отдаёте сразу?", a: "Возвраты травмируют собаку сильнее приюта. Пробный месяц снимает 90 % возвратов — проверено на семи годах работы." },
        ]}
      />

      <FooterMinimal
        brand="тёплый хвост"
        tagline="Приют для собак. Работаем с 2018 года, отчитываемся публично."
        columns={[
          { title: "Приют", links: ["Подопечные", "Отчёты", "Договор пристройства"] },
          { title: "Связь", links: ["+7 900 000-00-00", "help@tail.dog", "Мы на карте"] },
        ]}
        note="ИНН и реквизиты — в отчётах"
      />
    </div>
  );
}
лицензия: MITавтор: Motivaисточник: оригинал (Motiva)v1.0.0