update: add adaptability for pages

This commit is contained in:
khadiatullo 2025-05-01 05:38:29 +03:00
parent e642da34c5
commit 2ed7f07520

View File

@ -181,29 +181,107 @@ export function LoyaltyPage() {
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* Loyalty Levels */} {/* Loyalty Levels */}
<section className='py-16'> <section className='py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 text-center'> <div className='mb-12 text-center'>
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'> <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
{t('clients.loyalty.works.levels.title')} {t('clients.loyalty.works.levels.title')}
</h2> </h2>
<p className='mx-auto max-w-2xl text-gray-600'> <p className='mx-auto max-w-2xl text-gray-600'>
{t('clients.loyalty.works.levels.description')} {t('clients.loyalty.works.levels.description')}
</p> </p>
</div> </div>
<div className='grid gap-8 md:grid-cols-3'> <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'> <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'>
{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 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 className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
<CardContent className='p-6'> <CardContent className='p-6'>
<h3 className='mb-4 text-center text-2xl font-bold'> <h3 className='mb-4 text-center text-2xl font-bold'>
{t('clients.loyalty.works.levels.card-1.title')} {t('clients.loyalty.works.levels.card-3.title')}
</h3> </h3>
<div className='mb-6 text-center'> <div className='mb-6 text-center'>
<span className='text-4xl font-bold'> <span className='text-4xl font-bold'>
{t('clients.loyalty.works.levels.card-1.percent')} {t('clients.loyalty.works.levels.card-3.percent')}
</span> </span>
<p className='text-sm text-gray-600'> <p className='text-sm text-gray-600'>
{t('clients.loyalty.works.levels.card.mark')} {t('clients.loyalty.works.levels.card.mark')}
@ -213,117 +291,40 @@ export function LoyaltyPage() {
<li className='flex items-center'> <li className='flex items-center'>
<Check className='mr-2 h-5 w-5 text-green-500' /> <Check className='mr-2 h-5 w-5 text-green-500' />
<span> <span>
{t('clients.loyalty.works.levels.card-1.bonus-1')} {t('clients.loyalty.works.levels.card-3.bonus-1')}
</span> </span>
</li> </li>
<li className='flex items-center'> <li className='flex items-center'>
<Check className='mr-2 h-5 w-5 text-green-500' /> <Check className='mr-2 h-5 w-5 text-green-500' />
<span> <span>
{t('clients.loyalty.works.levels.card-1.bonus-2')} {t('clients.loyalty.works.levels.card-3.bonus-2')}
</span> </span>
</li> </li>
<li className='flex items-center'> <li className='flex items-center'>
<Check className='mr-2 h-5 w-5 text-green-500' /> <Check className='mr-2 h-5 w-5 text-green-500' />
<span> <span>
{t('clients.loyalty.works.levels.card-1.bonus-3')} {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> </span>
</li> </li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
</div>
<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'>
{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 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> </div>
</div> </section>
</section> </Container>
<CtaSection /> <CtaSection />
</main> </main>