Compare commits
2 Commits
fa52795738
...
41f012be33
| Author | SHA1 | Date | |
|---|---|---|---|
|
41f012be33 | ||
|
|
86a3ad9f81 |
BIN
public/clients/loyatly/oriyo-price-board.png
Normal file
BIN
public/clients/loyatly/oriyo-price-board.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 419 KiB |
@ -1,16 +1,14 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { Check, Percent } from 'lucide-react';
|
import { Percent } from 'lucide-react';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
import { Container } from '@/shared/components/container';
|
import { Container } from '@/shared/components/container';
|
||||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
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 { CtaSection } from '@/widgets/cta-section';
|
||||||
|
|
||||||
import ProgrammImg from '../../../../public/clients/loyatly/03a771e7-5d76-4111-a516-801aa925659f.jpg';
|
|
||||||
|
|
||||||
export function LoyaltyPage() {
|
export function LoyaltyPage() {
|
||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
@ -104,10 +102,10 @@ export function LoyaltyPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
data-aos='fade-up'
|
data-aos='fade-up'
|
||||||
className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
|
className='relative h-[400px] md:h-full overflow-hidden rounded-xl'
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src={ProgrammImg}
|
src={'/clients/loyatly/oriyo-price-board.png'}
|
||||||
alt='Программа лояльности'
|
alt='Программа лояльности'
|
||||||
fill
|
fill
|
||||||
className='w-full object-contain p-2.5'
|
className='w-full object-contain p-2.5'
|
||||||
@ -177,157 +175,7 @@ export function LoyaltyPage() {
|
|||||||
</Container>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Loyalty Levels */}
|
{/* <LoyaltyLevels /> */}
|
||||||
<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 />
|
<CtaSection />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
99
src/widgets/clients/loyalty/ui/loyalty-levels.tsx
Normal file
99
src/widgets/clients/loyalty/ui/loyalty-levels.tsx
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
'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