Compare commits
No commits in common. "41f012be330af839ad1a2c194c7414b540746860" and "fa527957385bb4f86a07aeb3a5f71566495cdd3c" have entirely different histories.
41f012be33
...
fa52795738
Binary file not shown.
|
Before Width: | Height: | Size: 419 KiB |
@ -1,14 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import { Percent } from 'lucide-react';
|
||||
import { Check, Percent } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
|
||||
// import LoyaltyLevels from '@/widgets/clients/loyalty/ui/loyalty-levels';
|
||||
import { CtaSection } from '@/widgets/cta-section';
|
||||
|
||||
import ProgrammImg from '../../../../public/clients/loyatly/03a771e7-5d76-4111-a516-801aa925659f.jpg';
|
||||
|
||||
export function LoyaltyPage() {
|
||||
const { t } = useTextController();
|
||||
|
||||
@ -102,10 +104,10 @@ export function LoyaltyPage() {
|
||||
</div>
|
||||
<div
|
||||
data-aos='fade-up'
|
||||
className='relative h-[400px] md:h-full overflow-hidden rounded-xl'
|
||||
className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
|
||||
>
|
||||
<Image
|
||||
src={'/clients/loyatly/oriyo-price-board.png'}
|
||||
src={ProgrammImg}
|
||||
alt='Программа лояльности'
|
||||
fill
|
||||
className='w-full object-contain p-2.5'
|
||||
@ -175,7 +177,157 @@ export function LoyaltyPage() {
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* <LoyaltyLevels /> */}
|
||||
{/* Loyalty Levels */}
|
||||
<Container>
|
||||
<div className='mb-12 text-center'>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
{t('clients.loyalty.works.levels.title')}
|
||||
</h2>
|
||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||
{t('clients.loyalty.works.levels.description')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-8 md:grid-cols-3'>
|
||||
<Card
|
||||
data-aos='flip-left'
|
||||
data-aos-duration='500'
|
||||
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'>
|
||||
{t('clients.loyalty.works.levels.card-1.title')}
|
||||
</h3>
|
||||
<div className='mb-6 text-center'>
|
||||
<span className='text-4xl font-bold'>
|
||||
{t('clients.loyalty.works.levels.card-1.percent')}
|
||||
</span>
|
||||
<p className='text-sm text-gray-600'>
|
||||
{t('clients.loyalty.works.levels.card.mark')}
|
||||
</p>
|
||||
</div>
|
||||
<ul className='space-y-2'>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-1.bonus-1')}
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-1.bonus-2')}
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-1.bonus-3')}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
data-aos='flip-left'
|
||||
data-aos-duration='500'
|
||||
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'>
|
||||
{t('clients.loyalty.works.levels.card-2.title')}
|
||||
</h3>
|
||||
<div className='mb-6 text-center'>
|
||||
<span className='text-4xl font-bold'>
|
||||
{t('clients.loyalty.works.levels.card-2.percent')}
|
||||
</span>
|
||||
<p className='text-sm text-gray-600'>
|
||||
{t('clients.loyalty.works.levels.card.mark')}
|
||||
</p>
|
||||
</div>
|
||||
<ul className='space-y-2'>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-2.bonus-1')}
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-2.bonus-2')}
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-2.bonus-3')}
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-2.bonus-4')}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
data-aos='flip-left'
|
||||
data-aos-duration='500'
|
||||
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'>
|
||||
{t('clients.loyalty.works.levels.card-3.title')}
|
||||
</h3>
|
||||
<div className='mb-6 text-center'>
|
||||
<span className='text-4xl font-bold'>
|
||||
{t('clients.loyalty.works.levels.card-3.percent')}
|
||||
</span>
|
||||
<p className='text-sm text-gray-600'>
|
||||
{t('clients.loyalty.works.levels.card.mark')}
|
||||
</p>
|
||||
</div>
|
||||
<ul className='space-y-2'>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-3.bonus-1')}
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-3.bonus-2')}
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-3.bonus-3')}
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-3.bonus-4')}
|
||||
</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>
|
||||
{t('clients.loyalty.works.levels.card-3.bonus-5')}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<CtaSection />
|
||||
</main>
|
||||
|
||||
@ -1,99 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Check } from 'lucide-react';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language';
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
|
||||
const loyaltyLevels = [
|
||||
{
|
||||
id: 'card-1',
|
||||
borderColor: 'gray-400',
|
||||
title: 'clients.loyalty.works.levels.card-1.title',
|
||||
percent: 'clients.loyalty.works.levels.card-1.percent',
|
||||
bonuses: [
|
||||
'clients.loyalty.works.levels.card-1.bonus-1',
|
||||
'clients.loyalty.works.levels.card-1.bonus-2',
|
||||
'clients.loyalty.works.levels.card-1.bonus-3',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'card-2',
|
||||
borderColor: 'yellow-500',
|
||||
title: 'clients.loyalty.works.levels.card-2.title',
|
||||
percent: 'clients.loyalty.works.levels.card-2.percent',
|
||||
bonuses: [
|
||||
'clients.loyalty.works.levels.card-2.bonus-1',
|
||||
'clients.loyalty.works.levels.card-2.bonus-2',
|
||||
'clients.loyalty.works.levels.card-2.bonus-3',
|
||||
'clients.loyalty.works.levels.card-2.bonus-4',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'card-3',
|
||||
borderColor: 'red-600',
|
||||
title: 'clients.loyalty.works.levels.card-3.title',
|
||||
percent: 'clients.loyalty.works.levels.card-3.percent',
|
||||
bonuses: [
|
||||
'clients.loyalty.works.levels.card-3.bonus-1',
|
||||
'clients.loyalty.works.levels.card-3.bonus-2',
|
||||
'clients.loyalty.works.levels.card-3.bonus-3',
|
||||
'clients.loyalty.works.levels.card-3.bonus-4',
|
||||
'clients.loyalty.works.levels.card-3.bonus-5',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const LoyaltyLevels = () => {
|
||||
const { t } = useTextController();
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div className='mb-12 text-center'>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
{t('clients.loyalty.works.levels.title')}
|
||||
</h2>
|
||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||
{t('clients.loyalty.works.levels.description')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-8 md:grid-cols-3'>
|
||||
{loyaltyLevels.map((level) => (
|
||||
<Card
|
||||
key={level.id}
|
||||
data-aos='flip-left'
|
||||
data-aos-duration='500'
|
||||
className={`overflow-hidden border-t-4 border-t-${level.borderColor} transition-all hover:shadow-lg`}
|
||||
>
|
||||
<CardContent className='p-6'>
|
||||
<h3 className='mb-4 text-center text-2xl font-bold'>
|
||||
{t(level.title)}
|
||||
</h3>
|
||||
<div className='mb-6 text-center'>
|
||||
<span className='text-4xl font-bold'>{t(level.percent)}</span>
|
||||
<p className='text-sm text-gray-600'>
|
||||
{t('clients.loyalty.works.levels.card.mark')}
|
||||
</p>
|
||||
</div>
|
||||
<ul className='space-y-2'>
|
||||
{level.bonuses.map((bonus, index) => (
|
||||
<li
|
||||
key={`${level.id}-bonus-${index}`}
|
||||
className='flex items-center'
|
||||
>
|
||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||
<span>{t(bonus)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoyaltyLevels;
|
||||
Loading…
x
Reference in New Issue
Block a user