255 lines
12 KiB
TypeScript
255 lines
12 KiB
TypeScript
import { ArrowRight, CreditCard, Gift, Percent, Wallet } from 'lucide-react';
|
||
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 { CtaSection } from '@/widgets/cta-section';
|
||
|
||
export const metadata = {
|
||
title: 'Клиентам | GasNetwork - Сеть заправок в Таджикистане',
|
||
description:
|
||
'Информация для клиентов: программа лояльности, топливные карты, сертификаты и способы оплаты.',
|
||
};
|
||
|
||
export default function ClientsPage() {
|
||
return (
|
||
<div className='flex min-h-screen flex-col'>
|
||
<main className='flex-1'>
|
||
{/* Hero Section */}
|
||
<section className='relative'>
|
||
<div className='relative h-[400px] w-full overflow-hidden'>
|
||
<Image
|
||
src='/placeholder.svg?height=400&width=1920&text=Для+наших+клиентов'
|
||
alt='Для наших клиентов'
|
||
width={1920}
|
||
height={400}
|
||
className='object-cover'
|
||
priority
|
||
/>
|
||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||
<div className='container mx-auto'>
|
||
<div className='max-w-2xl space-y-4 text-white'>
|
||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||
Для наших клиентов
|
||
</h1>
|
||
<p className='text-lg text-gray-200'>
|
||
Специальные предложения, программы лояльности и удобные
|
||
способы оплаты для наших клиентов
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Services Overview */}
|
||
<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-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 />
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|