Сайт благотворительного фонда
Сайт фонда помощи пожилым «Тёплый дом» — бумага, терракота, антиква Playfair Display и рукописные пометки, тепло без жалости: первый экран со счётчиком сбора и прогрессом с вехами, «что даёт ваша сумма» с карточкой, которая меняется от чипов, истории подопечных письмами, которые открываются из конвертов, отчётность кольцевой диаграммой по годам, карта помощи с зажигающимися точками, команда полароидами, волонтёрство с живым бейджем, партнёры, события-билеты, форма пожертвования с «×12» и подвал с реквизитами. Playfair Display, Golos Text и Caveat.
Сайт фонда, который объясняет помощь конкретно: счётчик показывает, сколько собрано, блок «что даёт ваша сумма» переводит деньги в дела, истории подопечных и отчёты дают доверие, а форма помогает пожертвовать или стать волонтёром. Фонд в демо вымышленный.
Из чего собрано
12 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Шапка благотворительного фонда с рукописной пометкой и «Помочь»navbar-044
Антиква с рукописной пометкой, «Помочь» с бьющимся сердцем, бургер.
2. Первый экран
Хиро сбора: счётчик суммы, прогресс с вехами и магнитная кнопкаhero-044
Сумма сбора докручивается, прогресс с вехами-зазубринами, магнитная кнопка.
3. Что даёт сумма
«Что даёт ваша сумма»: чипы, ползунок и перерисовывающаяся карточкаcharity-001
Чипы и ползунок суммы → карточка меняется, иконка рисуется штрихом.
4. Истории
Истории подопечных: лента конвертов с drag-scroll и печатающимся письмомcharity-002
Лента писем с drag-scroll, конверт открывается, текст печатается.
5. Отчётность
Отчётность фонда: кольцевая диаграмма по годам и штамп «0 % на рекламу»charity-003
Кольцевая диаграмма растёт при появлении, переключатель по годам, «0 % на рекламу».
6. Карта помощи
Карта помощи: точки зажигаются по очереди с числами подопечныхcharity-004
SVG-схема региона, маршрут прорисовывается, точки зажигаются с числами.
7. Команда
Команда полароидами с рукописными подписямиpeople-024
Полароиды с рукописными подписями, «ещё 40 волонтёров».
8. Волонтёрство
«Стать волонтёром»: чипы ролей и дней, живой бейдж и счётчик «сегодня помогли»charity-005
Чипы ролей и дней → живой бейдж, «сегодня помогли N».
9. Партнёры
«Работал с» текстом бегущей строкойlogocloud-007
Бегущая строка партнёров.
10. События
События фонда билетами с перфорацией и шкалой «нужны руки»event-025
Билеты с перфорацией, шкала «нужны руки».
11. Пожертвование
Форма пожертвования: чипы сумм, «разово / ежемесячно» с ×12cta-037
Чипы и своя сумма, «разово / ежемесячно» с ×12, рисующееся сердце.
12. Подвал
Подвал фонда с реквизитами, документами и рукописным «спасибо»footer-043
Реквизиты плашками, документы, контакты, рукописное «спасибо».
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PROЧастые вопросы
- Из чего собрана страница «Сайт благотворительного фонда»?
- Из 12 секций каталога по порядку: Шапка благотворительного фонда с рукописной пометкой и «Помочь», Хиро сбора, «Что даёт ваша сумма», Истории подопечных, Отчётность фонда, Карта помощи, Команда полароидами с рукописными подписями, «Стать волонтёром», «Работал с» текстом бегущей строкой, События фонда билетами с перфорацией и шкалой «нужны руки», Форма пожертвования, Подвал фонда с реквизитами, документами и рукописным «спасибо». Каждая — отдельный item VibeUI.
- Как собрать такую страницу через ИИ-агента?
- Нажмите «Копировать сценарий для ИИ» и вставьте в Cursor или Claude Code: агент получит исходник страницы, общие правила темы и промпты картинок и поставит каждую секцию из реестра через shadcn CLI.
- Сценарий бесплатный?
- Живое демо и список секций открыты всем. Исходник страницы и инструкция для агента — в подписке PRO.