update: fix charity page
This commit is contained in:
BunyodL
parent
448856d7b2
commit
374935e538
@ -1,8 +1,6 @@
|
||||
import {
|
||||
ArrowRight,
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Heart,
|
||||
Landmark,
|
||||
MapPin,
|
||||
@ -18,12 +16,6 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/shared/shadcn-ui/card';
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from '@/shared/shadcn-ui/tabs';
|
||||
|
||||
import { CtaSection } from '@/widgets/cta-section';
|
||||
|
||||
@ -39,7 +31,7 @@ export default function CharityPage() {
|
||||
<main className='flex-1'>
|
||||
{/* Hero Section */}
|
||||
<section className='relative'>
|
||||
<div className='relative h-[500px] w-full overflow-hidden'>
|
||||
<div className='relative h-[400px] w-full overflow-hidden'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=500&width=1920&text=Благотворительный+фонд+GasNetwork'
|
||||
alt='Благотворительный фонд GasNetwork'
|
||||
@ -52,7 +44,7 @@ export default function CharityPage() {
|
||||
<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' />
|
||||
<Heart className='size-6 text-red-500' />
|
||||
</div>
|
||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||
Благотворительный фонд GasNetwork
|
||||
@ -62,17 +54,6 @@ export default function CharityPage() {
|
||||
Наш фонд поддерживает образование, здравоохранение и
|
||||
экологические инициативы в Таджикистане.
|
||||
</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>
|
||||
@ -162,7 +143,7 @@ export default function CharityPage() {
|
||||
результатов
|
||||
</p>
|
||||
</div>
|
||||
<div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
|
||||
<div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-4xl font-bold'>15+</h3>
|
||||
<p className='text-white/80'>Реализованных проектов</p>
|
||||
@ -175,301 +156,10 @@ export default function CharityPage() {
|
||||
<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'>
|
||||
@ -565,7 +255,7 @@ export default function CharityPage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-6 md:grid-cols-4'>
|
||||
<div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
|
||||
{[
|
||||
{
|
||||
title: 'Сделать пожертвование',
|
||||
@ -595,14 +285,13 @@ export default function CharityPage() {
|
||||
<Card key={index} className='text-center'>
|
||||
<CardHeader>
|
||||
<div className='mb-4 flex justify-center'>{item.icon}</div>
|
||||
<CardTitle>{item.title}</CardTitle>
|
||||
<CardTitle className='break-words hyphens-auto'>
|
||||
{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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user