87 lines
2.5 KiB
TypeScript
87 lines
2.5 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='px-2 py-8 sm: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 />
|
|
<Features />
|
|
</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>
|
|
);
|
|
};
|
|
|
|
interface Feature {
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const features: Array<Feature> = [
|
|
{
|
|
title: 'home.about.features.quality.title',
|
|
description: 'home.about.features.quality.description',
|
|
},
|
|
{
|
|
title: 'home.about.features.equipment.title',
|
|
description: 'home.about.features.equipment.description',
|
|
},
|
|
{
|
|
title: 'home.about.features.staff.title',
|
|
description: 'home.about.features.staff.description',
|
|
},
|
|
];
|
|
|
|
const Features = () => {
|
|
const { t } = useLanguage();
|
|
|
|
return (
|
|
<div className='space-y-4'>
|
|
{features.map(({ title, description }) => {
|
|
return (
|
|
<div key={title} 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(title)}</h3>
|
|
<p className='text-gray-600'>{t(description)}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|