refactor: refactor clients page
This commit is contained in:
BunyodL
parent
374935e538
commit
3c33c45a6a
@ -1,17 +1,7 @@
|
|||||||
import { ArrowRight, CreditCard, Gift, Percent, Wallet } from 'lucide-react';
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import Link from 'next/link';
|
|
||||||
|
|
||||||
import { Button } from '@/shared/shadcn-ui/button';
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from '@/shared/shadcn-ui/card';
|
|
||||||
|
|
||||||
|
import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
|
||||||
|
import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
@ -51,202 +41,8 @@ export default function ClientsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Services Overview */}
|
<ServicesOverviewSection />
|
||||||
<section className='py-16'>
|
<BenefitsSection />
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='mb-12 text-center'>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Наши услуги для клиентов
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
|
||||||
Мы стремимся сделать обслуживание на наших заправках максимально
|
|
||||||
удобным и выгодным для вас
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-6 md:grid-cols-2 lg:grid-cols-4'>
|
|
||||||
<Card 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'>
|
|
||||||
<Percent className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<CardTitle>Программа лояльности</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Накапливайте баллы и получайте скидки
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className='text-sm text-gray-600'>
|
|
||||||
<p>
|
|
||||||
Наша программа лояльности позволяет накапливать баллы за
|
|
||||||
каждую покупку и обменивать их на скидки и подарки.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<Link href='/clients/loyalty'>
|
|
||||||
<Button variant='outline' className='w-full'>
|
|
||||||
Подробнее <ArrowRight className='ml-2 h-4 w-4' />
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card 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'>
|
|
||||||
<CreditCard className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<CardTitle>Топливная карта</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Удобный способ оплаты топлива
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className='text-sm text-gray-600'>
|
|
||||||
<p>
|
|
||||||
Топливные карты для физических и юридических лиц.
|
|
||||||
Контролируйте расходы и получайте дополнительные
|
|
||||||
преимущества.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<Link href='/clients/fuel-card'>
|
|
||||||
<Button variant='outline' className='w-full'>
|
|
||||||
Подробнее <ArrowRight className='ml-2 h-4 w-4' />
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card 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'>
|
|
||||||
<Gift className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<CardTitle>Сертификаты</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Подарочные сертификаты на топливо и услуги
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className='text-sm text-gray-600'>
|
|
||||||
<p>
|
|
||||||
Подарите близким или партнерам сертификат на топливо или
|
|
||||||
услуги нашей сети. Идеальный подарок для автовладельцев.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<Link href='/clients/certificates'>
|
|
||||||
<Button variant='outline' className='w-full'>
|
|
||||||
Подробнее <ArrowRight className='ml-2 h-4 w-4' />
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card 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'>
|
|
||||||
<Wallet className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<CardTitle>Способы оплаты</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Различные способы оплаты на наших заправках
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className='text-sm text-gray-600'>
|
|
||||||
<p>
|
|
||||||
Мы предлагаем различные способы оплаты: наличные, банковские
|
|
||||||
карты, мобильные платежи и топливные карты.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<Link href='/clients/payment'>
|
|
||||||
<Button variant='outline' className='w-full'>
|
|
||||||
Подробнее <ArrowRight className='ml-2 h-4 w-4' />
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Benefits Section */}
|
|
||||||
<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'>
|
|
||||||
<div 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'>Экономия</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Скидки и бонусы для постоянных клиентов
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div 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'>Удобство</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Быстрая оплата и обслуживание
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div 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'>Качество</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Гарантированно высокое качество топлива
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div 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'>
|
|
||||||
Дополнительные услуги
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Кафе, магазины и другие услуги на наших заправках
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<CtaSection />
|
<CtaSection />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
74
src/widgets/clients/ui/benefits-section.tsx
Normal file
74
src/widgets/clients/ui/benefits-section.tsx
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
83
src/widgets/clients/ui/services-overview-section.tsx
Normal file
83
src/widgets/clients/ui/services-overview-section.tsx
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
|
||||||
|
import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/shared/shadcn-ui/card';
|
||||||
|
|
||||||
|
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 = () => {
|
||||||
|
return (
|
||||||
|
<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'>
|
||||||
|
Наши услуги для клиентов
|
||||||
|
</h2>
|
||||||
|
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||||
|
Мы стремимся сделать обслуживание на наших заправках максимально
|
||||||
|
удобным и выгодным для вас
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user