75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import { Percent } from 'lucide-react';
|
||
import Image from 'next/image';
|
||
|
||
interface Benefit {
|
||
title: string;
|
||
description: string;
|
||
}
|
||
|
||
const benefits: Array<Benefit> = [
|
||
{
|
||
title: 'Экономия',
|
||
description: 'Скидки и бонусы для постоянных клиентов',
|
||
},
|
||
{
|
||
title: 'Удобство',
|
||
description: 'Быстрая оплата и обслуживание',
|
||
},
|
||
{
|
||
title: 'Качество',
|
||
description: 'Гарантированно высокое качество топлива',
|
||
},
|
||
{
|
||
title: 'Дополнительные услуги',
|
||
description: 'Кафе, магазины и другие услуги на наших заправках',
|
||
},
|
||
];
|
||
|
||
export const BenefitsSection = () => {
|
||
return (
|
||
<section className='bg-gray-50 py-16'>
|
||
<div className='container mx-auto'>
|
||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||
<div 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'>
|
||
Преимущества для клиентов
|
||
</h2>
|
||
<p className='mb-6 text-gray-600'>
|
||
Став клиентом GasNetwork, вы получаете множество преимуществ,
|
||
которые делают заправку вашего автомобиля более выгодной и
|
||
удобной.
|
||
</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 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>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|