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