update: add adaptability for pages
This commit is contained in:
parent
e642da34c5
commit
2ed7f07520
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user