update: added adaptability for pages #10

Merged
adilovcode merged 6 commits from add-pages into dev 2025-05-01 22:17:06 +05:00
10 changed files with 68 additions and 67 deletions
Showing only changes of commit 2dfcdd096e - Show all commits

View File

@ -110,7 +110,7 @@ export function CorporateDashboard() {
<div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
{/* Company Card */}
<Card className='md:col-span-2'>
<Card data-aos='zoom-in' data-aos-mirror="true" className='md:col-span-2'>
<CardHeader className='pb-2'>
<CardTitle className='flex items-center gap-2'>
<Building2 className='h-5 w-5 text-red-600' />
@ -166,7 +166,7 @@ export function CorporateDashboard() {
</Card>
{/* Fund Card */}
<Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
<Card data-aos='zoom-in' data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
<CardHeader>
<CardTitle className='flex items-center gap-2'>
<Wallet className='h-5 w-5' />

View File

@ -34,7 +34,7 @@ export function CustomerDashboard() {
</div>
<div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
<Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
<Card data-aos="zoom-in" data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
{!data || isLoading ? (
// TODO: Bunyod please add loader here
<>Loader here</>
@ -73,7 +73,7 @@ export function CustomerDashboard() {
{/* Bonus Card */}
{/* Customer Card */}
<Card className='md:col-span-2'>
<Card data-aos="zoom-in" data-aos-mirror="true" className='md:col-span-2'>
<CardHeader className='pb-2'>
<CardTitle className='flex items-center gap-2'>
<User className='h-5 w-5 text-red-600' />

View File

@ -38,7 +38,7 @@ export default function AboutPage() {
priority
/>
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30 px-2'>
<div className='container mx-auto'>
<div data-aos='fade-down' data-aos-duration="1000" className='container mx-auto'>
<div className='max-w-2xl space-y-4 text-white'>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
{t('about.hero.title')}
@ -57,7 +57,7 @@ export default function AboutPage() {
<section className='py-16'>
<div className='container mx-auto'>
<div className='grid items-center gap-12 md:grid-cols-2'>
<div>
<div data-aos='fade-right'>
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
<Fuel className='h-6 w-6 text-red-600' />
</div>
@ -92,7 +92,7 @@ export default function AboutPage() {
))}
</div>
</div>
<div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
<div data-aos="zoom-out-right" className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
<Image
src='/placeholder.svg?height=500&width=600&text=Главный+офис'
alt={t('about.overview.imageAlt')}
@ -210,7 +210,7 @@ export default function AboutPage() {
</p>
</div>
<div className='grid gap-8 md:grid-cols-3'>
<div data-aos='flip-up' data-aos-duration='600' className='grid gap-8 md:grid-cols-3'>
{[0, 1, 2].map((index) => (
<Card
key={index}
@ -250,7 +250,7 @@ export default function AboutPage() {
</p>
</div>
<div className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
<div data-aos='flip-down' data-aos-duration='600' className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
{[0, 1, 2, 3].map((index) => (
<div
key={index}
@ -296,7 +296,7 @@ export default function AboutPage() {
</p>
</div>
<div className='grid gap-8 md:grid-cols-3'>
<div data-aos="zoom-out-right" className='grid gap-8 md:grid-cols-3'>
{[0, 1, 2].map((index) => (
<Card
key={index}

View File

@ -48,7 +48,7 @@ export function CharityPage() {
/>
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
<Container>
<div className='container mx-auto'>
<div data-aos='fade-down' data-aos-duration='800' className='container mx-auto'>
<div className='max-w-2xl space-y-6 text-white'>
<div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
<Heart className='size-6 text-red-500' />

View File

@ -77,6 +77,7 @@ export function CertificatesPage() {
<div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
{certificates.map((certificate) => (
<Card
data-aos='zoom-in'
key={certificate.id}
className='overflow-hidden transition-all duration-300 hover:shadow-lg'
>

View File

@ -34,7 +34,7 @@ export function ClientsPage() {
/>
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
<Container>
<div className='container mx-auto'>
<div data-aos='fade-down' data-aos-duration="1000" className='container mx-auto'>
<div className='max-w-2xl space-y-4 text-white'>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
{t('clients.title')}

View File

@ -34,7 +34,7 @@ export function LoyaltyPage() {
/>
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
<Container>
<div className='container mx-auto'>
<div data-aos='fade-down' data-aos-duration="800" className='container mx-auto'>
<div className='max-w-2xl space-y-4 text-white'>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
{t('clients.loyalty.title')}
@ -54,7 +54,7 @@ export function LoyaltyPage() {
<section className='py-16'>
<div className='container mx-auto'>
<div className='grid items-center gap-12 md:grid-cols-2'>
<div>
<div data-aos='fade-right'>
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
<Percent className='h-6 w-6 text-red-600' />
</div>
@ -110,7 +110,7 @@ export function LoyaltyPage() {
</div>
</div>
</div>
<div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
<div data-aos='fade-up' className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
<Image
src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
alt='Программа лояльности'
@ -134,7 +134,7 @@ export function LoyaltyPage() {
</p>
</div>
<div className='grid gap-8 md:grid-cols-4'>
<div data-aos='zoom-in-right' className='grid gap-8 md:grid-cols-4'>
<div className='text-center'>
<div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
1
@ -195,7 +195,7 @@ export function LoyaltyPage() {
</p>
</div>
<div className='grid gap-8 md:grid-cols-3'>
<div data-aos='flip-down' className='grid gap-8 md:grid-cols-3'>
<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'>
@ -274,53 +274,53 @@ export function LoyaltyPage() {
</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')}
<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>
</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>
<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>
</section>

View File

@ -66,7 +66,7 @@ export default function LoginPage() {
<p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
</div>
<div className='mx-auto max-w-lg'>
<div data-aos='zoom-in' className='mx-auto max-w-lg'>
<Tabs
defaultValue={defaultTab}
value={defaultTab}

View File

@ -38,7 +38,7 @@ export const BenefitsSection = () => {
<section className='bg-gray-50 py-16'>
<div className='container mx-auto'>
<div className='grid items-center gap-12 md:grid-cols-2'>
<div className='order-2 md:order-1'>
<div data-aos='fade-right' data-aos-duration='4000' className='order-2 md:order-1'>
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
<Percent className='h-6 w-6 text-red-600' />
</div>
@ -65,7 +65,7 @@ export const BenefitsSection = () => {
})}
</div>
</div>
<div className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
<div data-aos='fade-up' className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
<Image
src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
alt='Преимущества для клиентов'

View File

@ -62,7 +62,7 @@ export const ServicesOverviewSection = () => {
</p>
</div>
<div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
<div data-aos='flip-up' data-aos-duration='600' className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
{servicesOverview.map(({ description, Icon, contentText, title }) => {
return (
<Card