310 lines
13 KiB
TypeScript
310 lines
13 KiB
TypeScript
'use client';
|
||
|
||
import {
|
||
Calendar,
|
||
CheckCircle,
|
||
Heart,
|
||
Landmark,
|
||
MapPin,
|
||
Users,
|
||
} from 'lucide-react';
|
||
import Image from 'next/image';
|
||
|
||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||
import { Button } from '@/shared/shadcn-ui/button';
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardFooter,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from '@/shared/shadcn-ui/card';
|
||
import Container from '@/shared/shadcn-ui/conteiner';
|
||
|
||
import { CtaSection } from '@/widgets/cta-section';
|
||
|
||
export const metadata = {
|
||
title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
|
||
description:
|
||
'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
|
||
};
|
||
|
||
export function CharityPage() {
|
||
const { t } = useTextController();
|
||
|
||
return (
|
||
<div className='flex min-h-screen flex-col'>
|
||
<main className='flex-1'>
|
||
{/* Hero Section */}
|
||
<section className='relative'>
|
||
<div className='relative h-[400px] w-full overflow-hidden'>
|
||
<Image
|
||
src='/placeholder.svg?height=500&width=1920&text=Благотворительный+фонд+GasNetwork'
|
||
alt={t('charity.hero.imageAlt')}
|
||
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'>
|
||
<Container>
|
||
<div
|
||
data-aos='fade-down'
|
||
data-aos-duration='800'
|
||
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='size-6 text-red-500' />
|
||
</div>
|
||
<h1 className='text-3xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||
{t('charity.hero.title')}
|
||
</h1>
|
||
<p className='text-lg text-gray-200 sm:text-xl'>
|
||
{t('charity.hero.subtitle')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Mission Section */}
|
||
<Container>
|
||
<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'>
|
||
{t('charity.mission.title')}
|
||
</h2>
|
||
<p className='mb-6 text-gray-600'>
|
||
{t('charity.mission.description1')}
|
||
</p>
|
||
<p className='mb-6 text-gray-600'>
|
||
{t('charity.mission.description2')}
|
||
</p>
|
||
|
||
<div className='space-y-4'>
|
||
{[0, 1, 2].map((index) => (
|
||
<div
|
||
data-aos='fade-right'
|
||
key={index}
|
||
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'>
|
||
{t(`charity.mission.principles.${index}.title`)}
|
||
</h3>
|
||
<p className='text-gray-600'>
|
||
{t(
|
||
`charity.mission.principles.${index}.description`,
|
||
)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div
|
||
data-aos='fade-right'
|
||
className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
|
||
>
|
||
<Image
|
||
src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
|
||
alt={t('charity.mission.imageAlt')}
|
||
fill
|
||
className='object-cover'
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Container>
|
||
|
||
{/* 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'>
|
||
{t('charity.stats.title')}
|
||
</h2>
|
||
<p className='mx-auto max-w-2xl text-white/80'>
|
||
{t('charity.stats.subtitle')}
|
||
</p>
|
||
</div>
|
||
<div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
|
||
{[0, 1, 2].map((index) => (
|
||
<div key={index} className='space-y-2'>
|
||
<h3 className='text-4xl font-bold'>
|
||
{t(`charity.stats.items.${index}.value`)}
|
||
</h3>
|
||
<p className='text-white/80'>
|
||
{t(`charity.stats.items.${index}.label`)}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Upcoming Events */}
|
||
<Container>
|
||
<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'>
|
||
{t('charity.events.title')}
|
||
</h2>
|
||
<p className='mx-auto max-w-2xl text-gray-600'>
|
||
{t('charity.events.subtitle')}
|
||
</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
|
||
data-aos='zoom-in-up'
|
||
key={index}
|
||
className='flex flex-col justify-between overflow-hidden'
|
||
>
|
||
<div>
|
||
<div className='relative h-48 w-full'>
|
||
<Image
|
||
src={event.image || '/placeholder.svg'}
|
||
alt={event.title}
|
||
fill
|
||
className='object-cover'
|
||
/>
|
||
</div>
|
||
<CardHeader>
|
||
<CardTitle className='text-xl lg:text-2xl'>
|
||
{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>
|
||
</div>
|
||
<CardFooter>
|
||
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
||
{t(`charity.events.button`)}
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Container>
|
||
|
||
{/* How to Help */}
|
||
<Container>
|
||
<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'>
|
||
{t('charity.help.title')}
|
||
</h2>
|
||
<p className='mx-auto max-w-2xl text-gray-600'>
|
||
{t('charity.help.subtitle')}
|
||
</p>
|
||
</div>
|
||
|
||
<div className='grid gap-3 md:grid-cols-2 md:gap-6 lg: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 data-aos='zoom-in' key={index} className='text-center'>
|
||
<CardHeader>
|
||
<div className='mb-4 flex justify-center'>
|
||
{item.icon}
|
||
</div>
|
||
<CardTitle className='break-words hyphens-auto'>
|
||
{item.title}
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className='text-gray-600'>{item.description}</p>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Container>
|
||
<CtaSection />
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|