Разработка сайта для православного благотворительного фонда
orthodox-charity.vercel.app
Разработка сайта для православного благотворительного фонда
Создан полнофункциональный сайт для православного благотворительного фонда, начиная с дизайна в Figma и заканчивая разработкой. Сайт содержит информацию о фонде, его деятельности, благотворительных программах, новостях и способах помощи. Реализована админ-панель для управления всем контентом: новостями, программами, финансовыми отчетами, информацией о сотрудниках и фонде. Интегрированы платежная система Cloudpayments для приема пожертвований и Яндекс.Карты для отображения контактов.
Решение: комплексная разработка от дизайна до внедрения
Работа включала полный цикл разработки: от создания дизайна до реализации функционального сайта с админ-панелью и интеграцией внешних сервисов. Реализованы ключевые компоненты:
1. Дизайн и пользовательский опыт
- Создан современный дизайн в Figma с акцентом на доверие, прозрачность и открытость благотворительной деятельности.
- Разработана интуитивная навигация с четкой структурой разделов: о фонде, программы, новости, сотрудники, контакты.
- Обеспечена адаптивность для всех устройств — от мобильных телефонов до больших мониторов.
- Использована типографика и цветовая схема, соответствующая тематике благотворительности.
2. Публичная часть сайта
- Главная страница с hero-секцией, призывающей к помощи и рассказывающей о миссии фонда.
- Секция "О фонде" с подробной информацией о целях, задачах и духовном наставнике.
- Раздел "Программы" с каруселью активных программ помощи и возможностью просмотра всех программ.
- Блок новостей для информирования о текущей деятельности и достижениях фонда.
- Секция сотрудников, демонстрирующая команду фонда.
- Контакты с интерактивной картой Яндекс.Карт и формой обратной связи.
3. Админ-панель для управления контентом
- Удобная панель управления с табами для разных типов контента: новости, программы, отчеты, информация о фонде.
- Система управления новостями с возможностью создания, редактирования и удаления записей, загрузки изображений.
- Управление благотворительными программами с настройкой статусов активности и дат публикации.
- Финансовые отчеты с возможностью загрузки документов и настройки периодов отчетности.
- Управление информацией о фонде и сотрудниках с загрузкой фотографий и описаний.
- Интеграция с UploadThing для безопасной загрузки и хранения медиафайлов.
4. Интеграции и платежи
- Интеграция с Cloudpayments для приема пожертвований с поддержкой разовых и регулярных платежей.
- Диалог пожертвований с выбором суммы, типа платежа (разовый/ежемесячный) и вводом контактных данных.
- Интеграция с API Яндекс.Карт для отображения местоположения фонда на интерактивной карте.
- Формы обратной связи с интеграцией Formcarry для обработки заявок и подписки на новости.
5. Техническая реализация
- Разработка на Next.js 15 с использованием App Router и Server Components для оптимизации производительности.
- Типизация с TypeScript для обеспечения надежности кода и удобства разработки.
- База данных PostgreSQL с Drizzle ORM для управления схемой и миграциями.
- Стилизация с Tailwind CSS 4 для создания современного и адаптивного интерфейса.
- Оптимизация производительности: динамические импорты, оптимизация изображений, улучшение Lighthouse показателей.
Результат
Создан полнофункциональный сайт для благотворительного фонда, который обеспечивает прозрачность деятельности, удобство приема пожертвований и простоту управления контентом. Сайт готов к наполнению контентом и дальнейшему развитию функциональности.