adilovcode/oriyo_next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: adilovcode:41f012be330af839ad1a2c194c7414b540746860
Branches Tags
adilovcode:dev
adilovcode:feat-get-media
adilovcode:fix-bugs
adilovcode:change-partners-section
adilovcode:add-pages
adilovcode:render-main-page-data
adilovcode:feat/auth
..
compare: adilovcode:fa527957385bb4f86a07aeb3a5f71566495cdd3c
Branches Tags
adilovcode:dev
adilovcode:feat-get-media
adilovcode:fix-bugs
adilovcode:change-partners-section
adilovcode:add-pages
adilovcode:render-main-page-data
adilovcode:feat/auth

No commits in common. "41f012be330af839ad1a2c194c7414b540746860" and "fa527957385bb4f86a07aeb3a5f71566495cdd3c" have entirely different histories.
41f012be33 ... fa52795738

3 changed files with 157 additions and 104 deletions
Show Stats Expand all files Collapse all files

BIN
public/clients/loyatly/oriyo-price-board.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 419 KiB

162
src/pages-templates/clients/loyalty/index.tsx
View File

@ -1,14 +1,16 @@
'use client'; 'use client';
import { Percent } from 'lucide-react'; import { Check, 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();
@ -102,10 +104,10 @@ export function LoyaltyPage() {
</div> </div>
<div <div
data-aos='fade-up' 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 <Image
src={'/clients/loyatly/oriyo-price-board.png'} src={ProgrammImg}
alt='Программа лояльности' alt='Программа лояльности'
fill fill
className='w-full object-contain p-2.5' className='w-full object-contain p-2.5'
@ -175,7 +177,157 @@ export function LoyaltyPage() {
</Container> </Container>
</section> </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 /> <CtaSection />
</main> </main>

99
src/widgets/clients/loyalty/ui/loyalty-levels.tsx
View File

@ -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;