66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { ChevronRight, Heart } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
import { useLanguage } from '@/shared/language';
|
|
import { Button } from '@/shared/shadcn-ui/button';
|
|
|
|
export const CharitySection = () => {
|
|
const { t } = useLanguage();
|
|
|
|
return (
|
|
<section id='charity' className='py-16'>
|
|
<div className='container mx-auto'>
|
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
|
<div
|
|
className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'
|
|
data-aos='zoom-out-up'
|
|
>
|
|
<Image
|
|
src='/placeholder.svg?height=400&width=600'
|
|
alt='Charity Foundation'
|
|
fill
|
|
className='object-cover'
|
|
/>
|
|
</div>
|
|
<div className='order-1 md:order-2'>
|
|
<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('home.charity.title')}
|
|
</h2>
|
|
<p className='mb-6 text-gray-600'>
|
|
{t('home.charity.description')}
|
|
</p>
|
|
<p className='mb-6 text-gray-600'>{t('home.charity.directions')}</p>
|
|
<ul className='mb-6 space-y-2'>
|
|
<li className='flex items-center'>
|
|
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
|
<span>{t('home.charity.education')}</span>
|
|
</li>
|
|
<li className='flex items-center'>
|
|
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
|
<span>{t('home.charity.children')}</span>
|
|
</li>
|
|
<li className='flex items-center'>
|
|
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
|
<span>{t('home.charity.ecology')}</span>
|
|
</li>
|
|
<li className='flex items-center'>
|
|
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
|
<span>{t('home.charity.sports')}</span>
|
|
</li>
|
|
</ul>
|
|
<Link href={'/charity'}>
|
|
<Button>{t('home.charity.learnMore')}</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|