91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
|
|
import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
|
|
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/shared/shadcn-ui/card';
|
|
import Container from '@/shared/shadcn-ui/conteiner';
|
|
|
|
interface ServiceOverview {
|
|
title: string;
|
|
description: string;
|
|
contentText: string;
|
|
Icon: ForwardRefExoticComponent<
|
|
Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
|
|
>;
|
|
}
|
|
|
|
const servicesOverview: Array<ServiceOverview> = [
|
|
{
|
|
title: 'Программа лояльности',
|
|
description: 'Накапливайте баллы и получайте скидки',
|
|
contentText:
|
|
'Наша программа лояльности позволяет накапливать баллы за каждую покупку и обменивать их на скидки и подарки.',
|
|
Icon: Percent,
|
|
},
|
|
{
|
|
title: 'Топливная карта',
|
|
description: 'Удобный способ оплаты топлива',
|
|
contentText:
|
|
'Топливные карты для физических и юридических лиц. Контролируйте расходы и получайте дополнительные преимущества.',
|
|
Icon: CreditCard,
|
|
},
|
|
{
|
|
title: 'Способы оплаты',
|
|
description: 'Различные способы оплаты на наших заправках',
|
|
contentText:
|
|
'Мы предлагаем различные способы оплаты: наличные, банковские карты, мобильные платежи и топливные карты.',
|
|
Icon: Wallet,
|
|
},
|
|
];
|
|
|
|
export const ServicesOverviewSection = () => {
|
|
const { t } = useTextController();
|
|
|
|
return (
|
|
<Container>
|
|
<section className='py-16'>
|
|
<div className='container mx-auto'>
|
|
<div className='mb-12 text-center'>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('clients.services.title')}
|
|
</h2>
|
|
<p className='mx-auto max-w-2xl text-gray-600'>
|
|
{t('clients.services.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div data-aos='flip-up' data-aos-duration='600' className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
|
|
{servicesOverview.map(({ description, Icon, contentText, title }) => {
|
|
return (
|
|
<Card
|
|
key={title}
|
|
className='overflow-hidden transition-all hover:shadow-lg'
|
|
>
|
|
<CardHeader className='pb-3'>
|
|
<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
|
<Icon className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardDescription>{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className='text-sm text-gray-600'>
|
|
<p>{contentText}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Container>
|
|
);
|
|
};
|