85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { Users } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
import AboutCounter from '@/shared/components/about-counter';
|
|
import { useLanguage } from '@/shared/language';
|
|
|
|
export const AboutSection = () => {
|
|
const { t } = useLanguage();
|
|
|
|
return (
|
|
<section id='about' 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'>
|
|
<Users className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('home.about.title')}
|
|
</h2>
|
|
<p className='mb-6 text-gray-600'>{t('home.about.description1')}</p>
|
|
<p className='mb-6 text-gray-600'>{t('home.about.description2')}</p>
|
|
|
|
<AboutCounter />
|
|
<div className='space-y-4'>
|
|
<div className='flex items-start'>
|
|
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
|
<span className='text-xs text-white'>✓</span>
|
|
</div>
|
|
<div className='ml-3'>
|
|
<h3 className='text-lg font-medium'>
|
|
{t('home.about.features.quality.title')}
|
|
</h3>
|
|
<p className='text-gray-600'>
|
|
{t('home.about.features.quality.description')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='flex items-start'>
|
|
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
|
<span className='text-xs text-white'>✓</span>
|
|
</div>
|
|
<div className='ml-3'>
|
|
<h3 className='text-lg font-medium'>
|
|
{t('home.about.features.equipment.title')}
|
|
</h3>
|
|
<p className='text-gray-600'>
|
|
{t('home.about.features.equipment.description')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='flex items-start'>
|
|
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
|
<span className='text-xs text-white'>✓</span>
|
|
</div>
|
|
<div className='ml-3'>
|
|
<h3 className='text-lg font-medium'>
|
|
{t('home.about.features.staff.title')}
|
|
</h3>
|
|
<p className='text-gray-600'>
|
|
{t('home.about.features.staff.description')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
|
|
data-aos='zoom-in-down'
|
|
>
|
|
<Image
|
|
src='/placeholder.svg?height=400&width=600'
|
|
alt='About our company'
|
|
fill
|
|
className='object-cover'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|