93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { Users } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
import AboutCounter from '@/shared/components/about-counter';
|
|
import { Container } from '@/shared/components/container';
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
|
|
export const AboutSection = () => {
|
|
const { t } = useTextController();
|
|
|
|
return (
|
|
<section id='about'>
|
|
<Container>
|
|
<div className='text-justify'>
|
|
<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-3 text-gray-600 sm:mb-6'>
|
|
{t('home.about.description1')}
|
|
</p>
|
|
<p className='mb-3 text-gray-600 sm:mb-6'>
|
|
{t('home.about.description2')}
|
|
</p>
|
|
</div>
|
|
<div className='my-4 grid items-center gap-6 sm:my-8 md:grid-cols-2 md:gap-12'>
|
|
<div>
|
|
<AboutCounter />
|
|
<Features />
|
|
</div>
|
|
<div
|
|
className='relative h-[400px] overflow-hidden rounded-xl md:h-full'
|
|
data-aos='zoom-in-down'
|
|
>
|
|
<Image
|
|
src='/clients/loyatly/oriyo-price-board.png'
|
|
alt='About our company'
|
|
fill
|
|
className='w-full object-contain p-2.5'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</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 } = useTextController();
|
|
|
|
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>
|
|
);
|
|
};
|