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