update: make charity page
This commit is contained in:
BunyodL
parent
e2e13129ed
commit
de963c45ff
615
src/app/charity/page.tsx
Normal file
615
src/app/charity/page.tsx
Normal file
@ -0,0 +1,615 @@
|
||||
import {
|
||||
ArrowRight,
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Heart,
|
||||
Landmark,
|
||||
MapPin,
|
||||
Users,
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/shared/shadcn-ui/card';
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from '@/shared/shadcn-ui/tabs';
|
||||
|
||||
import { CtaSection } from '@/widgets/cta-section';
|
||||
|
||||
export const metadata = {
|
||||
title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
|
||||
description:
|
||||
'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
|
||||
};
|
||||
|
||||
export default function CharityPage() {
|
||||
return (
|
||||
<div className='flex min-h-screen flex-col'>
|
||||
<main className='flex-1'>
|
||||
{/* Hero Section */}
|
||||
<section className='relative'>
|
||||
<div className='relative h-[500px] w-full overflow-hidden'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=500&width=1920&text=Благотворительный+фонд+GasNetwork'
|
||||
alt='Благотворительный фонд GasNetwork'
|
||||
width={1920}
|
||||
height={500}
|
||||
className='object-cover'
|
||||
priority
|
||||
/>
|
||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='max-w-2xl space-y-6 text-white'>
|
||||
<div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
|
||||
<Heart className='h-6 w-6 text-red-500' />
|
||||
</div>
|
||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||
Благотворительный фонд GasNetwork
|
||||
</h1>
|
||||
<p className='text-xl text-gray-200'>
|
||||
Мы верим, что бизнес должен быть социально ответственным.
|
||||
Наш фонд поддерживает образование, здравоохранение и
|
||||
экологические инициативы в Таджикистане.
|
||||
</p>
|
||||
<div className='flex flex-wrap gap-4'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Поддержать проект
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
className='border-white text-white hover:bg-white/10'
|
||||
>
|
||||
Узнать больше
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mission Section */}
|
||||
<section className='py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||
<div>
|
||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||
<Heart className='h-6 w-6 text-red-600' />
|
||||
</div>
|
||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
Наша миссия
|
||||
</h2>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
Благотворительный фонд GasNetwork был создан в 2020 году с
|
||||
целью поддержки социально значимых проектов в Таджикистане. Мы
|
||||
стремимся внести свой вклад в развитие общества и помочь тем,
|
||||
кто в этом нуждается.
|
||||
</p>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
Наша миссия — создавать возможности для улучшения жизни людей
|
||||
через образование, здравоохранение, экологические инициативы и
|
||||
поддержку уязвимых групп населения.
|
||||
</p>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<div className='flex items-start'>
|
||||
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
||||
<div>
|
||||
<h3 className='text-lg font-medium'>Прозрачность</h3>
|
||||
<p className='text-gray-600'>
|
||||
Мы публикуем ежегодные отчеты о всех наших проектах и
|
||||
расходах, обеспечивая полную прозрачность нашей
|
||||
деятельности.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start'>
|
||||
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
||||
<div>
|
||||
<h3 className='text-lg font-medium'>Эффективность</h3>
|
||||
<p className='text-gray-600'>
|
||||
Мы тщательно выбираем проекты, которые могут принести
|
||||
максимальную пользу обществу и имеют долгосрочное
|
||||
влияние.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-start'>
|
||||
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
||||
<div>
|
||||
<h3 className='text-lg font-medium'>Сотрудничество</h3>
|
||||
<p className='text-gray-600'>
|
||||
Мы сотрудничаем с местными и международными
|
||||
организациями для достижения наибольшего эффекта от
|
||||
наших инициатив.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
|
||||
alt='Наша миссия'
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Key Figures */}
|
||||
<section className='bg-red-600 py-16 text-white'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='mb-12 text-center'>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
Наш вклад в цифрах
|
||||
</h2>
|
||||
<p className='mx-auto max-w-2xl text-white/80'>
|
||||
За время существования нашего фонда мы достигли значительных
|
||||
результатов
|
||||
</p>
|
||||
</div>
|
||||
<div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-4xl font-bold'>15+</h3>
|
||||
<p className='text-white/80'>Реализованных проектов</p>
|
||||
</div>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-4xl font-bold'>1.2M</h3>
|
||||
<p className='text-white/80'>Сомони пожертвований</p>
|
||||
</div>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-4xl font-bold'>5000+</h3>
|
||||
<p className='text-white/80'>Людей получили помощь</p>
|
||||
</div>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-4xl font-bold'>20+</h3>
|
||||
<p className='text-white/80'>Партнерских организаций</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Our Projects */}
|
||||
<section className='py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='mb-12 text-center'>
|
||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||
<Landmark className='h-6 w-6 text-red-600' />
|
||||
</div>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
Наши проекты
|
||||
</h2>
|
||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||
Мы поддерживаем различные инициативы, направленные на улучшение
|
||||
жизни людей в Таджикистане
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue='education' className='w-full'>
|
||||
<TabsList className='mb-8 grid w-full grid-cols-4'>
|
||||
<TabsTrigger value='education'>Образование</TabsTrigger>
|
||||
<TabsTrigger value='healthcare'>Здравоохранение</TabsTrigger>
|
||||
<TabsTrigger value='environment'>Экология</TabsTrigger>
|
||||
<TabsTrigger value='social'>Социальная помощь</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value='education' className='space-y-8'>
|
||||
<div className='grid gap-6 md:grid-cols-3'>
|
||||
{[
|
||||
{
|
||||
title: 'Школьные библиотеки',
|
||||
description:
|
||||
'Мы оборудовали 10 школьных библиотек в сельских районах Таджикистана, предоставив более 5000 книг.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Школьные+библиотеки',
|
||||
date: '2022-2023',
|
||||
},
|
||||
{
|
||||
title: 'Стипендиальная программа',
|
||||
description:
|
||||
'Ежегодно мы предоставляем стипендии 20 талантливым студентам из малообеспеченных семей.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Стипендии',
|
||||
date: '2021-настоящее время',
|
||||
},
|
||||
{
|
||||
title: 'Компьютерные классы',
|
||||
description:
|
||||
'Мы оборудовали 5 компьютерных классов в школах Душанбе и других городов Таджикистана.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Компьютерные+классы',
|
||||
date: '2022',
|
||||
},
|
||||
].map((project, index) => (
|
||||
<Card key={index} className='overflow-hidden'>
|
||||
<div className='relative h-48 w-full'>
|
||||
<Image
|
||||
src={project.image || '/placeholder.svg'}
|
||||
alt={project.title}
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className='flex items-center justify-between'>
|
||||
<CardTitle>{project.title}</CardTitle>
|
||||
<div className='flex items-center text-sm text-gray-500'>
|
||||
<Clock className='mr-1 h-4 w-4' />
|
||||
{project.date}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className='text-gray-600'>{project.description}</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button variant='outline' className='w-full'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<div className='text-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Все образовательные проекты{' '}
|
||||
<ArrowRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value='healthcare' className='space-y-8'>
|
||||
<div className='grid gap-6 md:grid-cols-3'>
|
||||
{[
|
||||
{
|
||||
title: 'Медицинское оборудование',
|
||||
description:
|
||||
'Мы закупили современное медицинское оборудование для 3 районных больниц в Таджикистане.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Медицинское+оборудование',
|
||||
date: '2022',
|
||||
},
|
||||
{
|
||||
title: 'Мобильная клиника',
|
||||
description:
|
||||
'Наша мобильная клиника предоставляет базовую медицинскую помощь в отдаленных районах страны.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Мобильная+клиника',
|
||||
date: '2021-настоящее время',
|
||||
},
|
||||
{
|
||||
title: 'Вакцинация детей',
|
||||
description:
|
||||
'Мы финансируем программу вакцинации детей в сельских районах Таджикистана.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Вакцинация',
|
||||
date: '2023',
|
||||
},
|
||||
].map((project, index) => (
|
||||
<Card key={index} className='overflow-hidden'>
|
||||
<div className='relative h-48 w-full'>
|
||||
<Image
|
||||
src={project.image || '/placeholder.svg'}
|
||||
alt={project.title}
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className='flex items-center justify-between'>
|
||||
<CardTitle>{project.title}</CardTitle>
|
||||
<div className='flex items-center text-sm text-gray-500'>
|
||||
<Clock className='mr-1 h-4 w-4' />
|
||||
{project.date}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className='text-gray-600'>{project.description}</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button variant='outline' className='w-full'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<div className='text-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Все проекты здравоохранения{' '}
|
||||
<ArrowRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value='environment' className='space-y-8'>
|
||||
<div className='grid gap-6 md:grid-cols-3'>
|
||||
{[
|
||||
{
|
||||
title: 'Посадка деревьев',
|
||||
description:
|
||||
'Мы организовали посадку более 10,000 деревьев в различных регионах Таджикистана.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Посадка+деревьев',
|
||||
date: '2021-настоящее время',
|
||||
},
|
||||
{
|
||||
title: 'Чистые реки',
|
||||
description:
|
||||
'Проект по очистке рек и водоемов от мусора и загрязнений в сотрудничестве с местными сообществами.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Чистые+реки',
|
||||
date: '2022-2023',
|
||||
},
|
||||
{
|
||||
title: 'Экологическое образование',
|
||||
description:
|
||||
'Мы проводим образовательные программы по экологии для школьников и студентов.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Экологическое+образование',
|
||||
date: '2023',
|
||||
},
|
||||
].map((project, index) => (
|
||||
<Card key={index} className='overflow-hidden'>
|
||||
<div className='relative h-48 w-full'>
|
||||
<Image
|
||||
src={project.image || '/placeholder.svg'}
|
||||
alt={project.title}
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className='flex items-center justify-between'>
|
||||
<CardTitle>{project.title}</CardTitle>
|
||||
<div className='flex items-center text-sm text-gray-500'>
|
||||
<Clock className='mr-1 h-4 w-4' />
|
||||
{project.date}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className='text-gray-600'>{project.description}</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button variant='outline' className='w-full'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<div className='text-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Все экологические проекты{' '}
|
||||
<ArrowRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value='social' className='space-y-8'>
|
||||
<div className='grid gap-6 md:grid-cols-3'>
|
||||
{[
|
||||
{
|
||||
title: 'Помощь детским домам',
|
||||
description:
|
||||
'Мы регулярно оказываем материальную помощь детским домам в Таджикистане.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Детские+дома',
|
||||
date: '2020-настоящее время',
|
||||
},
|
||||
{
|
||||
title: 'Поддержка пожилых людей',
|
||||
description:
|
||||
'Программа поддержки одиноких пожилых людей, включающая доставку продуктов и медикаментов.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Пожилые+люди',
|
||||
date: '2021-настоящее время',
|
||||
},
|
||||
{
|
||||
title: 'Инклюзивное образование',
|
||||
description:
|
||||
'Мы поддерживаем программы инклюзивного образования для детей с особыми потребностями.',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Инклюзивное+образование',
|
||||
date: '2022-2023',
|
||||
},
|
||||
].map((project, index) => (
|
||||
<Card key={index} className='overflow-hidden'>
|
||||
<div className='relative h-48 w-full'>
|
||||
<Image
|
||||
src={project.image || '/placeholder.svg'}
|
||||
alt={project.title}
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className='flex items-center justify-between'>
|
||||
<CardTitle>{project.title}</CardTitle>
|
||||
<div className='flex items-center text-sm text-gray-500'>
|
||||
<Clock className='mr-1 h-4 w-4' />
|
||||
{project.date}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className='text-gray-600'>{project.description}</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button variant='outline' className='w-full'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<div className='text-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Все социальные проекты{' '}
|
||||
<ArrowRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<section className='bg-gray-50 py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='mb-12 text-center'>
|
||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||
<Calendar className='h-6 w-6 text-red-600' />
|
||||
</div>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
Предстоящие мероприятия
|
||||
</h2>
|
||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||
Присоединяйтесь к нашим благотворительным мероприятиям и внесите
|
||||
свой вклад в общее дело
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-6 md:grid-cols-3'>
|
||||
{[
|
||||
{
|
||||
title: 'Благотворительный марафон',
|
||||
description:
|
||||
'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
|
||||
date: '15 июня 2023',
|
||||
location: 'Парк Рудаки, Душанбе',
|
||||
image: '/placeholder.svg?height=200&width=300&text=Марафон',
|
||||
},
|
||||
{
|
||||
title: 'Экологическая акция',
|
||||
description:
|
||||
'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
|
||||
date: '22 июля 2023',
|
||||
location: 'Река Варзоб, Душанбе',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Экологическая+акция',
|
||||
},
|
||||
{
|
||||
title: 'Сбор школьных принадлежностей',
|
||||
description:
|
||||
'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
|
||||
date: '1-20 августа 2023',
|
||||
location: 'Все заправки GasNetwork',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
|
||||
},
|
||||
].map((event, index) => (
|
||||
<Card key={index} className='overflow-hidden'>
|
||||
<div className='relative h-48 w-full'>
|
||||
<Image
|
||||
src={event.image || '/placeholder.svg'}
|
||||
alt={event.title}
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<CardTitle>{event.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-4'>
|
||||
<p className='text-gray-600'>{event.description}</p>
|
||||
<div className='flex items-center text-sm text-gray-500'>
|
||||
<Calendar className='mr-2 h-4 w-4' />
|
||||
{event.date}
|
||||
</div>
|
||||
<div className='flex items-center text-sm text-gray-500'>
|
||||
<MapPin className='mr-2 h-4 w-4' />
|
||||
{event.location}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
||||
Принять участие
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How to Help */}
|
||||
<section className='py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='mb-12 text-center'>
|
||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||
<Users className='h-6 w-6 text-red-600' />
|
||||
</div>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
Как вы можете помочь
|
||||
</h2>
|
||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||
Есть много способов внести свой вклад в наши благотворительные
|
||||
инициативы
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-6 md:grid-cols-4'>
|
||||
{[
|
||||
{
|
||||
title: 'Сделать пожертвование',
|
||||
description:
|
||||
'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
|
||||
icon: <Landmark className='h-10 w-10 text-red-600' />,
|
||||
},
|
||||
{
|
||||
title: 'Стать волонтером',
|
||||
description:
|
||||
'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
|
||||
icon: <Users className='h-10 w-10 text-red-600' />,
|
||||
},
|
||||
{
|
||||
title: 'Участвовать в мероприятиях',
|
||||
description:
|
||||
'Принимайте участие в наших благотворительных мероприятиях и акциях.',
|
||||
icon: <Calendar className='h-10 w-10 text-red-600' />,
|
||||
},
|
||||
{
|
||||
title: 'Распространять информацию',
|
||||
description:
|
||||
'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
|
||||
icon: <Heart className='h-10 w-10 text-red-600' />,
|
||||
},
|
||||
].map((item, index) => (
|
||||
<Card key={index} className='text-center'>
|
||||
<CardHeader>
|
||||
<div className='mb-4 flex justify-center'>{item.icon}</div>
|
||||
<CardTitle>{item.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className='text-gray-600'>{item.description}</p>
|
||||
</CardContent>
|
||||
<CardFooter className='flex justify-center'>
|
||||
<Button variant='outline'>Подробнее</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CtaSection />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user