Landing Charity
Приют/фонд — архетип «нонпрофит»: страница просит доверия, а не денег. Цифры за годы сразу после hero, подопечные с именами, три способа помочь без иерархии, путь «забрать домой» шагами; донат-CTA один и после историй — сначала показать работу.
Установка
npx shadcn@latest add https://motiva.pages.dev/r/landing-charity.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 { 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>
);
}