86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { Percent } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
import { Container } from '@/shared/components/container';
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
|
|
interface Benefit {
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const benefits: Array<Benefit> = [
|
|
{
|
|
title: 'Экономия',
|
|
description: 'Скидки и бонусы для постоянных клиентов',
|
|
},
|
|
{
|
|
title: 'Удобство',
|
|
description: 'Быстрая оплата и обслуживание',
|
|
},
|
|
{
|
|
title: 'Качество',
|
|
description: 'Гарантированно высокое качество топлива',
|
|
},
|
|
{
|
|
title: 'Дополнительные услуги',
|
|
description: 'Кафе, магазины и другие услуги на наших заправках',
|
|
},
|
|
];
|
|
|
|
export const BenefitsSection = () => {
|
|
const { t } = useTextController();
|
|
|
|
return (
|
|
<section className='bg-gray-50'>
|
|
<Container>
|
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
|
<div
|
|
data-aos='fade-right'
|
|
data-aos-duration='4000'
|
|
className='order-2 md:order-1'
|
|
>
|
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
<Percent className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('clients.benefits.title')}
|
|
</h2>
|
|
<p className='mb-6 text-gray-600'>
|
|
{t('clients.benefits.subtitle')}
|
|
</p>
|
|
<div className='space-y-4'>
|
|
{benefits.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'>{title}</h3>
|
|
<p className='text-gray-600'>{description}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-aos='fade-up'
|
|
className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'
|
|
>
|
|
<Image
|
|
src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
|
|
alt='Преимущества для клиентов'
|
|
fill
|
|
className='object-cover'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
};
|