feat: add loaylty page
This commit is contained in:
BunyodL
parent
aa47cbbe11
commit
a76b68730b
285
src/app/clients/loyalty/page.tsx
Normal file
285
src/app/clients/loyalty/page.tsx
Normal file
@ -0,0 +1,285 @@
|
|||||||
|
import { Check, Percent } from 'lucide-react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||||
|
|
||||||
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане',
|
||||||
|
description:
|
||||||
|
'Программа лояльности GasNetwork: накапливайте баллы и получайте скидки на топливо и услуги.',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function LoyaltyPage() {
|
||||||
|
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>
|
||||||
|
|
||||||
|
{/* Program Overview */}
|
||||||
|
<section className='py-16'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
<p className='mb-6 text-gray-600'>
|
||||||
|
Участие в программе абсолютно бесплатное. Вам нужно только
|
||||||
|
получить карту лояльности в любой нашей заправочной станции
|
||||||
|
или зарегистрироваться в мобильном приложении.
|
||||||
|
</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'>1 литр = 1 балл</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
За каждый литр топлива вы получаете 1 балл
|
||||||
|
</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 h-[400px] overflow-hidden rounded-xl shadow-xl'>
|
||||||
|
<Image
|
||||||
|
src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
|
||||||
|
alt='Программа лояльности'
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* How It Works */}
|
||||||
|
<section className='bg-gray-50 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'>
|
||||||
|
Простые шаги для участия в программе лояльности GasNetwork
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid gap-8 md:grid-cols-4'>
|
||||||
|
<div className='text-center'>
|
||||||
|
<div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<h3 className='mb-2 text-xl font-bold'>Получите карту</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
Получите карту лояльности на любой заправке GasNetwork или
|
||||||
|
зарегистрируйтесь в мобильном приложении
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='text-center'>
|
||||||
|
<div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<h3 className='mb-2 text-xl font-bold'>Заправляйтесь</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
Используйте карту при каждой заправке и покупке в магазинах на
|
||||||
|
наших АЗС
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='text-center'>
|
||||||
|
<div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<h3 className='mb-2 text-xl font-bold'>Накапливайте баллы</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
Получайте баллы за каждую покупку и следите за их накоплением
|
||||||
|
в приложении
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='text-center'>
|
||||||
|
<div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
|
||||||
|
4
|
||||||
|
</div>
|
||||||
|
<h3 className='mb-2 text-xl font-bold'>Получайте выгоду</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
Обменивайте накопленные баллы на скидки, подарки или
|
||||||
|
дополнительные услуги
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Loyalty Levels */}
|
||||||
|
<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-8 md:grid-cols-3'>
|
||||||
|
<Card className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'>
|
||||||
|
<CardContent className='p-6'>
|
||||||
|
<h3 className='mb-4 text-center text-2xl font-bold'>
|
||||||
|
Стандарт
|
||||||
|
</h3>
|
||||||
|
<div className='mb-6 text-center'>
|
||||||
|
<span className='text-4xl font-bold'>1%</span>
|
||||||
|
<p className='text-sm text-gray-600'>возврат баллами</p>
|
||||||
|
</div>
|
||||||
|
<ul className='space-y-2'>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>1 балл за каждый литр топлива</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>Участие в акциях</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>Доступ к мобильному приложению</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'>
|
||||||
|
<CardContent className='p-6'>
|
||||||
|
<h3 className='mb-4 text-center text-2xl font-bold'>
|
||||||
|
Золотой
|
||||||
|
</h3>
|
||||||
|
<div className='mb-6 text-center'>
|
||||||
|
<span className='text-4xl font-bold'>2%</span>
|
||||||
|
<p className='text-sm text-gray-600'>возврат баллами</p>
|
||||||
|
</div>
|
||||||
|
<ul className='space-y-2'>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>2 балла за каждый литр топлива</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>Скидка 5% в кафе на заправках</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>Приоритетное обслуживание</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>Эксклюзивные акции</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
|
||||||
|
<CardContent className='p-6'>
|
||||||
|
<h3 className='mb-4 text-center text-2xl font-bold'>
|
||||||
|
Платиновый
|
||||||
|
</h3>
|
||||||
|
<div className='mb-6 text-center'>
|
||||||
|
<span className='text-4xl font-bold'>3%</span>
|
||||||
|
<p className='text-sm text-gray-600'>возврат баллами</p>
|
||||||
|
</div>
|
||||||
|
<ul className='space-y-2'>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>3 балла за каждый литр топлива</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>Скидка 10% в кафе на заправках</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>Бесплатная мойка раз в месяц</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>Персональный менеджер</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>VIP-обслуживание</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<CtaSection />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user