refactor: use container component
This commit is contained in:
BunyodL
parent
1e9e2445e6
commit
9fc4b2018e
@ -6,10 +6,9 @@ import Image from 'next/image';
|
|||||||
import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';
|
import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';
|
||||||
|
|
||||||
import AnimatedCounter from '@/shared/components/animated-counter';
|
import AnimatedCounter from '@/shared/components/animated-counter';
|
||||||
|
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 { Button } from '@/shared/shadcn-ui/button';
|
|
||||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||||
import Container from '@/shared/shadcn-ui/conteiner';
|
|
||||||
|
|
||||||
import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
|
import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
|
||||||
import { StationGallery } from '@/widgets/about-page/station-gallery';
|
import { StationGallery } from '@/widgets/about-page/station-gallery';
|
||||||
@ -62,63 +61,59 @@ export default function AboutPage({ content }: AboutPageProps) {
|
|||||||
|
|
||||||
{/* Company Overview */}
|
{/* Company Overview */}
|
||||||
<Container>
|
<Container>
|
||||||
<section className='py-16'>
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
<div className='container mx-auto'>
|
<div data-aos='fade-right'>
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<div data-aos='fade-right'>
|
<Fuel className='h-6 w-6 text-red-600' />
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
</div>
|
||||||
<Fuel className='h-6 w-6 text-red-600' />
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
</div>
|
{t('about.overview.title')}
|
||||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
</h2>
|
||||||
{t('about.overview.title')}
|
<p className='mb-6 text-gray-600'>
|
||||||
</h2>
|
{t('about.overview.description1')}
|
||||||
<p className='mb-6 text-gray-600'>
|
</p>
|
||||||
{t('about.overview.description1')}
|
<p className='mb-6 text-gray-600'>
|
||||||
</p>
|
{t('about.overview.description2')}
|
||||||
<p className='mb-6 text-gray-600'>
|
</p>
|
||||||
{t('about.overview.description2')}
|
<p className='mb-6 text-gray-600'>
|
||||||
</p>
|
{t('about.overview.description3')}
|
||||||
<p className='mb-6 text-gray-600'>
|
</p>
|
||||||
{t('about.overview.description3')}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className='mb-6 grid grid-cols-1 gap-4 md:grid-cols-2'>
|
<div className='mb-6 grid grid-cols-1 gap-4 md:grid-cols-2'>
|
||||||
{[0, 1, 2, 3].map((index) => (
|
{[0, 1, 2, 3].map((index) => (
|
||||||
<div key={index} className='flex items-start'>
|
<div key={index} className='flex items-start'>
|
||||||
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
||||||
<span className='text-xs text-white'>✓</span>
|
<span className='text-xs text-white'>✓</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='ml-3'>
|
<div className='ml-3'>
|
||||||
<h3 className='text-lg font-medium'>
|
<h3 className='text-lg font-medium'>
|
||||||
{t(`about.overview.benefits.${index}.title`)}
|
{t(`about.overview.benefits.${index}.title`)}
|
||||||
</h3>
|
</h3>
|
||||||
<p className='text-gray-600'>
|
<p className='text-gray-600'>
|
||||||
{t(`about.overview.benefits.${index}.description`)}
|
{t(`about.overview.benefits.${index}.description`)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
<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')}
|
|
||||||
fill
|
|
||||||
className='object-cover'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<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')}
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
||||||
{/* Stats Section */}
|
{/* Stats Section */}
|
||||||
<section className='bg-red-600 py-16 text-white'>
|
<section className='bg-red-600 text-white'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<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('about.stats.title')}
|
{t('about.stats.title')}
|
||||||
@ -147,200 +142,176 @@ export default function AboutPage({ content }: AboutPageProps) {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Our History */}
|
{/* Our History */}
|
||||||
<section className='py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||||
<Container>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
<History className='h-6 w-6 text-red-600' />
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
</div>
|
||||||
<History className='h-6 w-6 text-red-600' />
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
</div>
|
{t('about.history.title')}
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
</h2>
|
||||||
{t('about.history.title')}
|
<p className='max-w-2xl text-gray-600'>
|
||||||
</h2>
|
{t('about.history.subtitle')}
|
||||||
<p className='max-w-2xl text-gray-600'>
|
</p>
|
||||||
{t('about.history.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
|
|
||||||
<Container>
|
|
||||||
<CompanyTimeline timeline={content.history} />
|
|
||||||
</Container>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<CompanyTimeline timeline={content.history} />
|
||||||
|
</Container>
|
||||||
|
|
||||||
{/* Our Stations */}
|
{/* Our Stations */}
|
||||||
<Container>
|
<section className='bg-gray-50'>
|
||||||
<section className='bg-gray-50 py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
<MapPin className='h-6 w-6 text-red-600' />
|
||||||
<MapPin className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('about.stations.title')}
|
|
||||||
</h2>
|
|
||||||
<p className='max-w-2xl text-gray-600'>
|
|
||||||
{t('about.stations.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<StationGallery stations={content.stations} />
|
|
||||||
|
|
||||||
<div className='mt-12 text-center'>
|
|
||||||
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
|
||||||
{t('about.stations.description')}
|
|
||||||
</p>
|
|
||||||
<Button className='bg-red-600 hover:bg-red-700'>
|
|
||||||
{t('about.stations.buttonText')}{' '}
|
|
||||||
<MapPin className='ml-2 h-4 w-4' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('about.stations.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='max-w-2xl text-gray-600'>
|
||||||
|
{t('about.stations.subtitle')}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<StationGallery stations={content.stations} />
|
||||||
</Container>
|
<div className='mt-12 text-center'>
|
||||||
|
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
||||||
|
{t('about.stations.description')}
|
||||||
|
</p>
|
||||||
|
{/* <Button className='bg-red-600 hover:bg-red-700'>
|
||||||
|
{t('about.stations.buttonText')}{' '}
|
||||||
|
<MapPin className='ml-2 h-4 w-4' />
|
||||||
|
</Button> */}
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Our Values */}
|
{/* Our Values */}
|
||||||
<Container>
|
<Container>
|
||||||
<section className='py-16'>
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||||
<div className='container mx-auto'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
<Target className='h-6 w-6 text-red-600' />
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
||||||
<Target className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('about.values.title')}
|
|
||||||
</h2>
|
|
||||||
<p className='max-w-2xl text-gray-600'>
|
|
||||||
{t('about.values.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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}
|
|
||||||
className='overflow-hidden transition-all hover:shadow-lg'
|
|
||||||
>
|
|
||||||
<CardContent className='p-6'>
|
|
||||||
<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
|
||||||
<Star className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>
|
|
||||||
{t(`about.values.items.${index}.title`)}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t(`about.values.items.${index}.description`)}
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('about.values.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='max-w-2xl text-gray-600'>
|
||||||
|
{t('about.values.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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}
|
||||||
|
className='overflow-hidden transition-all hover:shadow-lg'
|
||||||
|
>
|
||||||
|
<CardContent className='p-6'>
|
||||||
|
<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
||||||
|
<Star className='h-6 w-6 text-red-600' />
|
||||||
|
</div>
|
||||||
|
<h3 className='mb-2 text-xl font-bold'>
|
||||||
|
{t(`about.values.items.${index}.title`)}
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
{t(`about.values.items.${index}.description`)}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
||||||
{/* Our Team */}
|
{/* Our Team */}
|
||||||
<Container>
|
<section className='bg-gray-50'>
|
||||||
<section className='bg-gray-50 py-16'>
|
<Container>
|
||||||
<div className='container mx-auto px-2'>
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
<Users className='h-6 w-6 text-red-600' />
|
||||||
<Users className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('about.team.title')}
|
|
||||||
</h2>
|
|
||||||
<p className='max-w-2xl text-gray-600'>
|
|
||||||
{t('about.team.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
data-aos='flip-down'
|
|
||||||
data-aos-duration='600'
|
|
||||||
className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'
|
|
||||||
>
|
|
||||||
{content.team.map((member, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className='overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105'
|
|
||||||
>
|
|
||||||
<div className='relative h-64 w-full'>
|
|
||||||
{member.photo && (
|
|
||||||
<Image
|
|
||||||
src={member.photo}
|
|
||||||
alt={t(`about.team.members.${index}.name`)}
|
|
||||||
fill
|
|
||||||
className='object-cover'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className='p-4 text-center'>
|
|
||||||
<h3 className='text-lg font-bold'>{member.name}</h3>
|
|
||||||
<p className='text-gray-600'>{member.profession}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('about.team.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='max-w-2xl text-gray-600'>
|
||||||
|
{t('about.team.subtitle')}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div
|
||||||
</Container>
|
data-aos='flip-down'
|
||||||
|
data-aos-duration='600'
|
||||||
|
className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'
|
||||||
|
>
|
||||||
|
{content.team.map((member, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className='overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105'
|
||||||
|
>
|
||||||
|
<div className='relative h-64 w-full'>
|
||||||
|
{member.photo && (
|
||||||
|
<Image
|
||||||
|
src={member.photo}
|
||||||
|
alt={t(`about.team.members.${index}.name`)}
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className='p-4 text-center'>
|
||||||
|
<h3 className='text-lg font-bold'>{member.name}</h3>
|
||||||
|
<p className='text-gray-600'>{member.profession}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Testimonials */}
|
{/* Testimonials */}
|
||||||
<Container>
|
<Container>
|
||||||
<section className='py-16'>
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||||
<div className='container mx-auto'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
<Star className='h-6 w-6 text-red-600' />
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
||||||
<Star className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('about.testimonials.title')}
|
|
||||||
</h2>
|
|
||||||
<p className='max-w-2xl text-gray-600'>
|
|
||||||
{t('about.testimonials.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
data-aos='zoom-out-right'
|
|
||||||
className='grid gap-8 md:grid-cols-3'
|
|
||||||
>
|
|
||||||
{content.reviews.map((review, index) => (
|
|
||||||
<Card
|
|
||||||
key={index}
|
|
||||||
className='overflow-hidden transition-all hover:shadow-lg'
|
|
||||||
>
|
|
||||||
<CardContent className='p-6'>
|
|
||||||
<div className='mb-4 flex'>
|
|
||||||
{Array(5)
|
|
||||||
.fill(0)
|
|
||||||
.map((_, i) => (
|
|
||||||
<Star
|
|
||||||
key={i}
|
|
||||||
className={`h-5 w-5 ${i < Number(review.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<p className='mb-4 text-gray-600 italic'>
|
|
||||||
"{review.review}"
|
|
||||||
</p>
|
|
||||||
<p className='font-semibold'>{review.fullname}</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('about.testimonials.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='max-w-2xl text-gray-600'>
|
||||||
|
{t('about.testimonials.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-aos='zoom-out-right' className='grid gap-8 md:grid-cols-3'>
|
||||||
|
{content.reviews.map((review, index) => (
|
||||||
|
<Card
|
||||||
|
key={index}
|
||||||
|
className='overflow-hidden transition-all hover:shadow-lg'
|
||||||
|
>
|
||||||
|
<CardContent className='p-6'>
|
||||||
|
<div className='mb-4 flex'>
|
||||||
|
{Array(5)
|
||||||
|
.fill(0)
|
||||||
|
.map((_, i) => (
|
||||||
|
<Star
|
||||||
|
key={i}
|
||||||
|
className={`h-5 w-5 ${i < Number(review.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className='mb-4 text-gray-600 italic'>"{review.review}"</p>
|
||||||
|
<p className='font-semibold'>{review.fullname}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
||||||
<CtaSection />
|
<CtaSection />
|
||||||
|
|||||||
@ -10,16 +10,14 @@ import {
|
|||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
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 { Button } from '@/shared/shadcn-ui/button';
|
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from '@/shared/shadcn-ui/card';
|
} from '@/shared/shadcn-ui/card';
|
||||||
import Container from '@/shared/shadcn-ui/conteiner';
|
|
||||||
|
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
|
||||||
@ -29,6 +27,32 @@ export const metadata = {
|
|||||||
'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
|
'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const events = [
|
||||||
|
{
|
||||||
|
title: 'Благотворительный марафон',
|
||||||
|
description:
|
||||||
|
'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
|
||||||
|
date: '15 июня 2023',
|
||||||
|
location: 'Парк Рудаки, Душанбе',
|
||||||
|
image: '/placeholder.svg?height=200&width=300&text=Марафон',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Экологическая акция',
|
||||||
|
description: 'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
|
||||||
|
date: '22 июля 2023',
|
||||||
|
location: 'Река Варзоб, Душанбе',
|
||||||
|
image: '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Сбор школьных принадлежностей',
|
||||||
|
description:
|
||||||
|
'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
|
||||||
|
date: '1-20 августа 2023',
|
||||||
|
location: 'Все заправки GasNetwork',
|
||||||
|
image: '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export function CharityPage() {
|
export function CharityPage() {
|
||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
@ -47,23 +71,17 @@ export function CharityPage() {
|
|||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||||
<Container>
|
<Container data-aos='fade-down' data-aos-duration='800'>
|
||||||
<div
|
<div className='max-w-2xl space-y-6 text-white'>
|
||||||
data-aos='fade-down'
|
<div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
|
||||||
data-aos-duration='800'
|
<Heart className='size-6 text-red-500' />
|
||||||
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' />
|
|
||||||
</div>
|
|
||||||
<h1 className='text-3xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
|
||||||
{t('charity.hero.title')}
|
|
||||||
</h1>
|
|
||||||
<p className='text-lg text-gray-200 sm:text-xl'>
|
|
||||||
{t('charity.hero.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h1 className='text-3xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||||
|
{t('charity.hero.title')}
|
||||||
|
</h1>
|
||||||
|
<p className='text-lg text-gray-200 sm:text-xl'>
|
||||||
|
{t('charity.hero.subtitle')}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
@ -72,235 +90,190 @@ export function CharityPage() {
|
|||||||
|
|
||||||
{/* Mission Section */}
|
{/* Mission Section */}
|
||||||
<Container>
|
<Container>
|
||||||
<section className='py-16'>
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
<div className='container mx-auto'>
|
<div>
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<div>
|
<Heart className='h-6 w-6 text-red-600' />
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
||||||
<Heart className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('charity.mission.title')}
|
|
||||||
</h2>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
{t('charity.mission.description1')}
|
|
||||||
</p>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
{t('charity.mission.description2')}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className='space-y-4'>
|
|
||||||
{[0, 1, 2].map((index) => (
|
|
||||||
<div
|
|
||||||
data-aos='fade-right'
|
|
||||||
key={index}
|
|
||||||
className='flex items-start'
|
|
||||||
>
|
|
||||||
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
|
||||||
<div>
|
|
||||||
<h3 className='text-lg font-medium'>
|
|
||||||
{t(`charity.mission.principles.${index}.title`)}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t(
|
|
||||||
`charity.mission.principles.${index}.description`,
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
data-aos='fade-right'
|
|
||||||
className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
|
|
||||||
alt={t('charity.mission.imageAlt')}
|
|
||||||
fill
|
|
||||||
className='object-cover'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
</section>
|
{t('charity.mission.title')}
|
||||||
</Container>
|
|
||||||
|
|
||||||
{/* Key Figures */}
|
|
||||||
<section className='bg-red-600 py-16 text-white'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='mb-12 text-center'>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('charity.stats.title')}
|
|
||||||
</h2>
|
</h2>
|
||||||
<p className='mx-auto max-w-2xl text-white/80'>
|
<p className='mb-6 text-gray-600'>
|
||||||
{t('charity.stats.subtitle')}
|
{t('charity.mission.description1')}
|
||||||
|
</p>
|
||||||
|
<p className='mb-6 text-gray-600'>
|
||||||
|
{t('charity.mission.description2')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
<div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
|
|
||||||
{[0, 1, 2].map((index) => (
|
|
||||||
<div key={index} className='space-y-2'>
|
|
||||||
<h3 className='text-4xl font-bold'>
|
|
||||||
{t(`charity.stats.items.${index}.value`)}
|
|
||||||
</h3>
|
|
||||||
<p className='text-white/80'>
|
|
||||||
{t(`charity.stats.items.${index}.label`)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Upcoming Events */}
|
<div className='space-y-4'>
|
||||||
<Container>
|
{[0, 1, 2].map((index) => (
|
||||||
<section className='bg-gray-50 py-16'>
|
<div
|
||||||
<div className='container mx-auto'>
|
data-aos='fade-right'
|
||||||
<div className='mb-12 text-center'>
|
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
||||||
<Calendar className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('charity.events.title')}
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
|
||||||
{t('charity.events.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-6 md:grid-cols-3'>
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
title: 'Благотворительный марафон',
|
|
||||||
description:
|
|
||||||
'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
|
|
||||||
date: '15 июня 2023',
|
|
||||||
location: 'Парк Рудаки, Душанбе',
|
|
||||||
image: '/placeholder.svg?height=200&width=300&text=Марафон',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Экологическая акция',
|
|
||||||
description:
|
|
||||||
'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
|
|
||||||
date: '22 июля 2023',
|
|
||||||
location: 'Река Варзоб, Душанбе',
|
|
||||||
image:
|
|
||||||
'/placeholder.svg?height=200&width=300&text=Экологическая+акция',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Сбор школьных принадлежностей',
|
|
||||||
description:
|
|
||||||
'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
|
|
||||||
date: '1-20 августа 2023',
|
|
||||||
location: 'Все заправки GasNetwork',
|
|
||||||
image:
|
|
||||||
'/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
|
|
||||||
},
|
|
||||||
].map((event, index) => (
|
|
||||||
<Card
|
|
||||||
data-aos='zoom-in-up'
|
|
||||||
key={index}
|
key={index}
|
||||||
className='flex flex-col justify-between overflow-hidden'
|
className='flex items-start'
|
||||||
>
|
>
|
||||||
|
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
||||||
<div>
|
<div>
|
||||||
<div className='relative h-48 w-full'>
|
<h3 className='text-lg font-medium'>
|
||||||
<Image
|
{t(`charity.mission.principles.${index}.title`)}
|
||||||
src={event.image || '/placeholder.svg'}
|
</h3>
|
||||||
alt={event.title}
|
<p className='text-gray-600'>
|
||||||
fill
|
{t(`charity.mission.principles.${index}.description`)}
|
||||||
className='object-cover'
|
</p>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className='text-xl lg:text-2xl'>
|
|
||||||
{event.title}
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className='space-y-4'>
|
|
||||||
<p className='text-gray-600'>{event.description}</p>
|
|
||||||
<div className='flex items-center text-sm text-gray-500'>
|
|
||||||
<Calendar className='mr-2 h-4 w-4' />
|
|
||||||
{event.date}
|
|
||||||
</div>
|
|
||||||
<div className='flex items-center text-sm text-gray-500'>
|
|
||||||
<MapPin className='mr-2 h-4 w-4' />
|
|
||||||
{event.location}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</div>
|
</div>
|
||||||
<CardFooter>
|
</div>
|
||||||
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
|
||||||
{t(`charity.events.button`)}
|
|
||||||
</Button>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div
|
||||||
|
data-aos='fade-right'
|
||||||
|
className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
|
||||||
|
alt={t('charity.mission.imageAlt')}
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
{/* Key Figures */}
|
||||||
|
<Container className='bg-red-600 text-white'>
|
||||||
|
<div className='mb-12 text-center'>
|
||||||
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('charity.stats.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='mx-auto max-w-2xl text-white/80'>
|
||||||
|
{t('charity.stats.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
|
||||||
|
{[0, 1, 2].map((index) => (
|
||||||
|
<div key={index} className='space-y-2'>
|
||||||
|
<h3 className='text-4xl font-bold'>
|
||||||
|
{t(`charity.stats.items.${index}.value`)}
|
||||||
|
</h3>
|
||||||
|
<p className='text-white/80'>
|
||||||
|
{t(`charity.stats.items.${index}.label`)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
{/* Upcoming Events */}
|
||||||
|
<Container className='bg-gray-50'>
|
||||||
|
<div className='mb-12 text-center'>
|
||||||
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
|
<Calendar className='h-6 w-6 text-red-600' />
|
||||||
|
</div>
|
||||||
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('charity.events.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||||
|
{t('charity.events.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid gap-6 md:grid-cols-3'>
|
||||||
|
{events.map((event, index) => (
|
||||||
|
<Card
|
||||||
|
data-aos='zoom-in-up'
|
||||||
|
key={index}
|
||||||
|
className='flex flex-col justify-between overflow-hidden'
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className='relative h-48 w-full'>
|
||||||
|
<Image
|
||||||
|
src={event.image || '/placeholder.svg'}
|
||||||
|
alt={event.title}
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className='text-xl lg:text-2xl'>
|
||||||
|
{event.title}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className='space-y-4'>
|
||||||
|
<p className='text-gray-600'>{event.description}</p>
|
||||||
|
<div className='flex items-center text-sm text-gray-500'>
|
||||||
|
<Calendar className='mr-2 h-4 w-4' />
|
||||||
|
{event.date}
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center text-sm text-gray-500'>
|
||||||
|
<MapPin className='mr-2 h-4 w-4' />
|
||||||
|
{event.location}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</div>
|
||||||
|
{/* <CardFooter>
|
||||||
|
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
||||||
|
{t(`charity.events.button`)}
|
||||||
|
</Button>
|
||||||
|
</CardFooter> */}
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
||||||
{/* How to Help */}
|
{/* How to Help */}
|
||||||
<Container>
|
<Container>
|
||||||
<section className='py-16'>
|
<div className='mb-12 text-center'>
|
||||||
<div className='container mx-auto'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<div className='mb-12 text-center'>
|
<Users className='h-6 w-6 text-red-600' />
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
||||||
<Users className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('charity.help.title')}
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
|
||||||
{t('charity.help.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
title: 'Сделать пожертвование',
|
|
||||||
description:
|
|
||||||
'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
|
|
||||||
icon: <Landmark className='h-10 w-10 text-red-600' />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Стать волонтером',
|
|
||||||
description:
|
|
||||||
'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
|
|
||||||
icon: <Users className='h-10 w-10 text-red-600' />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Участвовать в мероприятиях',
|
|
||||||
description:
|
|
||||||
'Принимайте участие в наших благотворительных мероприятиях и акциях.',
|
|
||||||
icon: <Calendar className='h-10 w-10 text-red-600' />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Распространять информацию',
|
|
||||||
description:
|
|
||||||
'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
|
|
||||||
icon: <Heart className='h-10 w-10 text-red-600' />,
|
|
||||||
},
|
|
||||||
].map((item, index) => (
|
|
||||||
<Card data-aos='zoom-in' key={index} className='text-center'>
|
|
||||||
<CardHeader>
|
|
||||||
<div className='mb-4 flex justify-center'>
|
|
||||||
{item.icon}
|
|
||||||
</div>
|
|
||||||
<CardTitle className='break-words hyphens-auto'>
|
|
||||||
{item.title}
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<p className='text-gray-600'>{item.description}</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('charity.help.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||||
|
{t('charity.help.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: 'Сделать пожертвование',
|
||||||
|
description:
|
||||||
|
'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
|
||||||
|
icon: <Landmark className='h-10 w-10 text-red-600' />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Стать волонтером',
|
||||||
|
description:
|
||||||
|
'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
|
||||||
|
icon: <Users className='h-10 w-10 text-red-600' />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Участвовать в мероприятиях',
|
||||||
|
description:
|
||||||
|
'Принимайте участие в наших благотворительных мероприятиях и акциях.',
|
||||||
|
icon: <Calendar className='h-10 w-10 text-red-600' />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Распространять информацию',
|
||||||
|
description:
|
||||||
|
'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
|
||||||
|
icon: <Heart className='h-10 w-10 text-red-600' />,
|
||||||
|
},
|
||||||
|
].map((item, index) => (
|
||||||
|
<Card data-aos='zoom-in' key={index} className='text-center'>
|
||||||
|
<CardHeader>
|
||||||
|
<div className='mb-4 flex justify-center'>{item.icon}</div>
|
||||||
|
<CardTitle className='break-words hyphens-auto'>
|
||||||
|
{item.title}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className='text-gray-600'>{item.description}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
<CtaSection />
|
<CtaSection />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -3,10 +3,10 @@
|
|||||||
import { Download, Eye } from 'lucide-react';
|
import { Download, Eye } from 'lucide-react';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
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 { Button } from '@/shared/shadcn-ui/button';
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||||
import Container from '@/shared/shadcn-ui/conteiner';
|
|
||||||
|
|
||||||
export function CertificatesPage() {
|
export function CertificatesPage() {
|
||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
@ -67,8 +67,8 @@ export function CertificatesPage() {
|
|||||||
certificates.length = 0;
|
certificates.length = 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<main>
|
||||||
<main className='container mx-auto py-10'>
|
<Container>
|
||||||
<div className='mb-10 text-center'>
|
<div className='mb-10 text-center'>
|
||||||
<h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
|
<h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
|
||||||
<p className='mx-auto max-w-2xl text-lg text-gray-600'>
|
<p className='mx-auto max-w-2xl text-lg text-gray-600'>
|
||||||
@ -125,7 +125,7 @@ export function CertificatesPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</Container>
|
||||||
</Container>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,8 +2,8 @@
|
|||||||
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
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 Container from '@/shared/shadcn-ui/conteiner';
|
|
||||||
|
|
||||||
import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
|
import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
|
||||||
import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
|
import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
|
||||||
@ -33,7 +33,7 @@ export function ClientsPage() {
|
|||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||||
<Container>
|
<Container className='py-0'>
|
||||||
<div
|
<div
|
||||||
data-aos='fade-down'
|
data-aos='fade-down'
|
||||||
data-aos-duration='1000'
|
data-aos-duration='1000'
|
||||||
|
|||||||
@ -3,9 +3,9 @@
|
|||||||
import { Check, 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 { 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 { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||||
import Container from '@/shared/shadcn-ui/conteiner';
|
|
||||||
|
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
|
||||||
@ -35,323 +35,304 @@ export function LoyaltyPage() {
|
|||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||||
<Container>
|
<Container data-aos='fade-down' data-aos-duration='800'>
|
||||||
<div
|
<div className='max-w-2xl space-y-4 text-white'>
|
||||||
data-aos='fade-down'
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||||
data-aos-duration='800'
|
{t('clients.loyalty.title')}
|
||||||
className='container mx-auto'
|
</h1>
|
||||||
>
|
<p className='text-lg text-gray-200'>
|
||||||
<div className='max-w-2xl space-y-4 text-white'>
|
{t('clients.loyalty.description')}
|
||||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
</p>
|
||||||
{t('clients.loyalty.title')}
|
|
||||||
</h1>
|
|
||||||
<p className='text-lg text-gray-200'>
|
|
||||||
{t('clients.loyalty.description')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Program Overview */}
|
||||||
<Container>
|
<Container>
|
||||||
{/* Program Overview */}
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
<section className='py-16'>
|
<div data-aos='fade-right'>
|
||||||
<div className='container mx-auto'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
<Percent className='h-6 w-6 text-red-600' />
|
||||||
<div data-aos='fade-right'>
|
</div>
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
<Percent className='h-6 w-6 text-red-600' />
|
{t('clients.loyalty.programm.about')}
|
||||||
</div>
|
</h2>
|
||||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
<p className='mb-6 text-gray-600'>
|
||||||
{t('clients.loyalty.programm.about')}
|
{t('clients.loyalty.programm.about-description')}
|
||||||
</h2>
|
</p>
|
||||||
<p className='mb-6 text-gray-600'>
|
<p className='mb-6 text-gray-600'>
|
||||||
{t('clients.loyalty.programm.about-description')}
|
{t('clients.loyalty.programm.about-description-2')}
|
||||||
</p>
|
</p>
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
{t('clients.loyalty.programm.about-description-2')}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className='space-y-4'>
|
<div className='space-y-4'>
|
||||||
<div className='flex items-start'>
|
<div className='flex items-start'>
|
||||||
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
||||||
<span className='text-xs text-white'>✓</span>
|
<span className='text-xs text-white'>✓</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='ml-3'>
|
<div className='ml-3'>
|
||||||
<h3 className='text-lg font-medium'>
|
<h3 className='text-lg font-medium'>
|
||||||
{t('clients.loyalty.programm.conditions-1')}
|
{t('clients.loyalty.programm.conditions-1')}
|
||||||
</h3>
|
</h3>
|
||||||
<p className='text-gray-600'>
|
<p className='text-gray-600'>
|
||||||
{t(
|
{t('clients.loyalty.programm.conditions.description-1')}
|
||||||
'clients.loyalty.programm.conditions.description-1',
|
</p>
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex items-start'>
|
|
||||||
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
|
||||||
<span className='text-xs text-white'>✓</span>
|
|
||||||
</div>
|
|
||||||
<div className='ml-3'>
|
|
||||||
<h3 className='text-lg font-medium'>
|
|
||||||
{t('clients.loyalty.programm.conditions-2')}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t(
|
|
||||||
'clients.loyalty.programm.conditions.description-2',
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex items-start'>
|
|
||||||
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
|
||||||
<span className='text-xs text-white'>✓</span>
|
|
||||||
</div>
|
|
||||||
<div className='ml-3'>
|
|
||||||
<h3 className='text-lg font-medium'>
|
|
||||||
{t('clients.loyalty.programm.conditions-3')}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t(
|
|
||||||
'clients.loyalty.programm.conditions.description-3',
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className='flex items-start'>
|
||||||
data-aos='fade-up'
|
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
||||||
className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
|
<span className='text-xs text-white'>✓</span>
|
||||||
>
|
</div>
|
||||||
<Image
|
<div className='ml-3'>
|
||||||
src={ProgrammImg}
|
<h3 className='text-lg font-medium'>
|
||||||
alt='Программа лояльности'
|
{t('clients.loyalty.programm.conditions-2')}
|
||||||
fill
|
</h3>
|
||||||
className='w-full object-contain p-2.5'
|
<p className='text-gray-600'>
|
||||||
priority
|
{t('clients.loyalty.programm.conditions.description-2')}
|
||||||
/>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-start'>
|
||||||
|
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
||||||
|
<span className='text-xs text-white'>✓</span>
|
||||||
|
</div>
|
||||||
|
<div className='ml-3'>
|
||||||
|
<h3 className='text-lg font-medium'>
|
||||||
|
{t('clients.loyalty.programm.conditions-3')}
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
{t('clients.loyalty.programm.conditions.description-3')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div
|
||||||
|
data-aos='fade-up'
|
||||||
|
className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={ProgrammImg}
|
||||||
|
alt='Программа лояльности'
|
||||||
|
fill
|
||||||
|
className='w-full object-contain p-2.5'
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
|
||||||
{/* How It Works */}
|
{/* How It Works */}
|
||||||
<section className='bg-gray-50 px-2 py-16'>
|
<section className='bg-gray-50'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<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.title')}
|
{t('clients.loyalty.works.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.description')}
|
{t('clients.loyalty.works.description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
|
||||||
|
<div data-aos='zoom-in-up' 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
|
||||||
|
</div>
|
||||||
|
<h3 className='mb-2 text-xl font-bold'>
|
||||||
|
{t('clients.loyalty.works.stage-1')}
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
{t('clients.loyalty.works.stage.description-1')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div data-aos='zoom-in-up' className='text-center'>
|
||||||
<div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
|
<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'>
|
||||||
<div data-aos='zoom-in-up' className='text-center'>
|
2
|
||||||
<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
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>
|
|
||||||
{t('clients.loyalty.works.stage-1')}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t('clients.loyalty.works.stage.description-1')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div data-aos='zoom-in-up' className='text-center'>
|
<h3 className='mb-2 text-xl font-bold'>
|
||||||
<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'>
|
{t('clients.loyalty.works.stage-2')}
|
||||||
2
|
</h3>
|
||||||
</div>
|
<p className='text-gray-600'>
|
||||||
<h3 className='mb-2 text-xl font-bold'>
|
{t('clients.loyalty.works.stage.description-2')}
|
||||||
{t('clients.loyalty.works.stage-2')}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t('clients.loyalty.works.stage.description-2')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div data-aos='zoom-in-up' 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'>
|
|
||||||
3
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>
|
|
||||||
{t('clients.loyalty.works.stage-3')}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t('clients.loyalty.works.stage.description-3')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div data-aos='zoom-in-up' 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'>
|
|
||||||
4
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>
|
|
||||||
{t('clients.loyalty.works.stage-4')}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t('clients.loyalty.works.stage.description-4')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Loyalty Levels */}
|
|
||||||
<section className='py-16'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div data-aos='zoom-in-up' className='text-center'>
|
||||||
<div className='grid gap-8 md:grid-cols-3'>
|
<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'>
|
||||||
<Card
|
3
|
||||||
data-aos='flip-left'
|
</div>
|
||||||
data-aos-duration='500'
|
<h3 className='mb-2 text-xl font-bold'>
|
||||||
className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'
|
{t('clients.loyalty.works.stage-3')}
|
||||||
>
|
</h3>
|
||||||
<CardContent className='p-6'>
|
<p className='text-gray-600'>
|
||||||
<h3 className='mb-4 text-center text-2xl font-bold'>
|
{t('clients.loyalty.works.stage.description-3')}
|
||||||
{t('clients.loyalty.works.levels.card-1.title')}
|
</p>
|
||||||
</h3>
|
</div>
|
||||||
<div className='mb-6 text-center'>
|
<div data-aos='zoom-in-up' className='text-center'>
|
||||||
<span className='text-4xl font-bold'>
|
<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'>
|
||||||
{t('clients.loyalty.works.levels.card-1.percent')}
|
4
|
||||||
</span>
|
</div>
|
||||||
<p className='text-sm text-gray-600'>
|
<h3 className='mb-2 text-xl font-bold'>
|
||||||
{t('clients.loyalty.works.levels.card.mark')}
|
{t('clients.loyalty.works.stage-4')}
|
||||||
</p>
|
</h3>
|
||||||
</div>
|
<p className='text-gray-600'>
|
||||||
<ul className='space-y-2'>
|
{t('clients.loyalty.works.stage.description-4')}
|
||||||
<li className='flex items-center'>
|
</p>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</Container>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 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>
|
</Container>
|
||||||
|
|
||||||
<CtaSection />
|
<CtaSection />
|
||||||
|
|||||||
@ -8,6 +8,7 @@ import { Suspense } from 'react';
|
|||||||
|
|
||||||
import { LoginForm } from '@/features/auth/login-form';
|
import { LoginForm } from '@/features/auth/login-form';
|
||||||
|
|
||||||
|
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 { Button } from '@/shared/shadcn-ui/button';
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
import {
|
import {
|
||||||
@ -17,7 +18,6 @@ import {
|
|||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from '@/shared/shadcn-ui/card';
|
} from '@/shared/shadcn-ui/card';
|
||||||
import Container from '@/shared/shadcn-ui/conteiner';
|
|
||||||
import {
|
import {
|
||||||
Tabs,
|
Tabs,
|
||||||
TabsContent,
|
TabsContent,
|
||||||
@ -134,40 +134,35 @@ export default function LoginPage() {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<main className='flex min-h-screen flex-col items-center justify-center'>
|
||||||
<div className='flex min-h-screen flex-col items-center justify-center'>
|
<div className='flex-1'>
|
||||||
<main className='flex-1'>
|
<Container className='max-w-6xl'>
|
||||||
<div className='container max-w-6xl py-16'>
|
<div className='mb-12 flex flex-col items-center text-center'>
|
||||||
<div className='mb-12 flex flex-col items-center text-center'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<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' />
|
||||||
<Fuel className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('auth.title')}
|
|
||||||
</h1>
|
|
||||||
<p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('auth.title')}
|
||||||
|
</h1>
|
||||||
|
<p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div data-aos='zoom-in' className='mx-auto max-w-lg'>
|
<div data-aos='zoom-in' className='mx-auto max-w-lg'>
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<LoginPageTabs />
|
<LoginPageTabs />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|
||||||
<div className='mt-8 text-center text-sm text-gray-500'>
|
<div className='mt-8 text-center text-sm text-gray-500'>
|
||||||
<p>
|
<p>
|
||||||
{t('auth.loginIssues')}{' '}
|
{t('auth.loginIssues')}{' '}
|
||||||
<Link
|
<Link href='/contact' className='text-red-600 hover:underline'>
|
||||||
href='/contact'
|
{t('auth.contactLink')}
|
||||||
className='text-red-600 hover:underline'
|
</Link>
|
||||||
>
|
</p>
|
||||||
{t('auth.contactLink')}
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
18
src/shared/components/container.tsx
Normal file
18
src/shared/components/container.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ComponentProps } from 'react';
|
||||||
|
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
interface ContainerProps extends ComponentProps<'div'> {}
|
||||||
|
|
||||||
|
export function Container({ children, className, ...props }: ContainerProps) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn('container mx-auto px-2.5 py-8 sm:py-16', className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,10 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
interface ContainerProps {
|
|
||||||
children: React.ReactNode
|
|
||||||
}
|
|
||||||
export default function Container({children}: ContainerProps) {
|
|
||||||
return (
|
|
||||||
<div className="container mx-auto px-2.5 py-1">{children}</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -4,14 +4,15 @@ import { Users } from 'lucide-react';
|
|||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
import AboutCounter from '@/shared/components/about-counter';
|
import AboutCounter from '@/shared/components/about-counter';
|
||||||
|
import { Container } from '@/shared/components/container';
|
||||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||||
|
|
||||||
export const AboutSection = () => {
|
export const AboutSection = () => {
|
||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id='about' className='px-2 py-8 sm:py-16'>
|
<section id='about'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
<div>
|
<div>
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
@ -38,7 +39,7 @@ export const AboutSection = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { ChevronRight, Heart } from 'lucide-react';
|
|||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
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 { Button } from '@/shared/shadcn-ui/button';
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
|
|
||||||
@ -11,8 +12,8 @@ export const CharitySection = () => {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id='charity' className='px-2 py-8 sm:py-16'>
|
<section id='charity'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
<div
|
<div
|
||||||
className='relative order-2 h-[400px] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
|
className='relative order-2 h-[400px] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
|
||||||
@ -59,7 +60,7 @@ export const CharitySection = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
import { 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 { useTextController } from '@/shared/language/hooks/use-text-controller';
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||||
import Container from '@/shared/shadcn-ui/conteiner';
|
|
||||||
|
|
||||||
interface Benefit {
|
interface Benefit {
|
||||||
title: string;
|
title: string;
|
||||||
@ -34,55 +34,52 @@ export const BenefitsSection = () => {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<section className='bg-gray-50'>
|
||||||
<section className='bg-gray-50 py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
<div
|
||||||
<div
|
data-aos='fade-right'
|
||||||
data-aos='fade-right'
|
data-aos-duration='4000'
|
||||||
data-aos-duration='4000'
|
className='order-2 md:order-1'
|
||||||
className='order-2 md:order-1'
|
>
|
||||||
>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<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' />
|
||||||
<Percent className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
{t('clients.benefits.title')}
|
|
||||||
</h2>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
{t('clients.benefits.subtitle')}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className='space-y-4'>
|
|
||||||
{benefits.map(({ title, description }) => {
|
|
||||||
return (
|
|
||||||
<div key={title} className='flex items-start'>
|
|
||||||
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
|
||||||
<span className='text-xs text-white'>✓</span>
|
|
||||||
</div>
|
|
||||||
<div className='ml-3'>
|
|
||||||
<h3 className='text-lg font-medium'>{title}</h3>
|
|
||||||
<p className='text-gray-600'>{description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
data-aos='fade-up'
|
{t('clients.benefits.title')}
|
||||||
className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'
|
</h2>
|
||||||
>
|
<p className='mb-6 text-gray-600'>
|
||||||
<Image
|
{t('clients.benefits.subtitle')}
|
||||||
src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
|
</p>
|
||||||
alt='Преимущества для клиентов'
|
<div className='space-y-4'>
|
||||||
fill
|
{benefits.map(({ title, description }) => {
|
||||||
className='object-cover'
|
return (
|
||||||
/>
|
<div key={title} className='flex items-start'>
|
||||||
|
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
||||||
|
<span className='text-xs text-white'>✓</span>
|
||||||
|
</div>
|
||||||
|
<div className='ml-3'>
|
||||||
|
<h3 className='text-lg font-medium'>{title}</h3>
|
||||||
|
<p className='text-gray-600'>{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<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='Преимущества для клиентов'
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</Container>
|
||||||
</Container>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
|
import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
|
||||||
import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
|
import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
|
||||||
|
|
||||||
|
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 {
|
import {
|
||||||
Card,
|
Card,
|
||||||
@ -11,7 +12,6 @@ import {
|
|||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from '@/shared/shadcn-ui/card';
|
} from '@/shared/shadcn-ui/card';
|
||||||
import Container from '@/shared/shadcn-ui/conteiner';
|
|
||||||
|
|
||||||
interface ServiceOverview {
|
interface ServiceOverview {
|
||||||
title: string;
|
title: string;
|
||||||
@ -50,41 +50,42 @@ export const ServicesOverviewSection = () => {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<section>
|
||||||
<section className='py-16'>
|
<Container>
|
||||||
<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.services.title')}
|
||||||
{t('clients.services.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.services.subtitle')}
|
||||||
{t('clients.services.subtitle')}
|
</p>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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
|
|
||||||
key={title}
|
|
||||||
className='overflow-hidden transition-all hover:shadow-lg'
|
|
||||||
>
|
|
||||||
<CardHeader className='pb-3'>
|
|
||||||
<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
|
||||||
<Icon className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<CardTitle>{title}</CardTitle>
|
|
||||||
<CardDescription>{description}</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className='text-sm text-gray-600'>
|
|
||||||
<p>{contentText}</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div
|
||||||
</Container>
|
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
|
||||||
|
key={title}
|
||||||
|
className='overflow-hidden transition-all hover:shadow-lg'
|
||||||
|
>
|
||||||
|
<CardHeader className='pb-3'>
|
||||||
|
<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
||||||
|
<Icon className='h-6 w-6 text-red-600' />
|
||||||
|
</div>
|
||||||
|
<CardTitle>{title}</CardTitle>
|
||||||
|
<CardDescription>{description}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className='text-sm text-gray-600'>
|
||||||
|
<p>{contentText}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
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 { Button } from '@/shared/shadcn-ui/button';
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
|
|
||||||
@ -9,8 +10,8 @@ export const CtaSection = () => {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className='bg-red-600 px-2 py-8 text-white sm:py-16'>
|
<section className='bg-red-600 text-white'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<div className='flex flex-col items-center text-center'>
|
<div className='flex flex-col items-center 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('home.cta.title')}
|
{t('home.cta.title')}
|
||||||
@ -24,7 +25,7 @@ export const CtaSection = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import { Stations } from '@/app/api-utlities/@types';
|
|||||||
|
|
||||||
import { GasStationMap } from '@/features/map';
|
import { GasStationMap } from '@/features/map';
|
||||||
|
|
||||||
|
import { Container } from '@/shared/components/container';
|
||||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||||
|
|
||||||
interface MapSectionProps {
|
interface MapSectionProps {
|
||||||
@ -16,8 +17,8 @@ export const MapSection = ({ stations }: MapSectionProps) => {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id='stations' className='bg-gray-50 px-2 py-8 sm:py-16'>
|
<section id='stations' className='bg-gray-50'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<MapPin className='h-6 w-6 text-red-600' />
|
<MapPin className='h-6 w-6 text-red-600' />
|
||||||
@ -35,7 +36,7 @@ export const MapSection = ({ stations }: MapSectionProps) => {
|
|||||||
>
|
>
|
||||||
<GasStationMap stations={stations} />
|
<GasStationMap stations={stations} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { Gift } from 'lucide-react';
|
|||||||
|
|
||||||
import { Discounts } from '@/app/api-utlities/@types/index';
|
import { Discounts } from '@/app/api-utlities/@types/index';
|
||||||
|
|
||||||
|
import { Container } from '@/shared/components/container';
|
||||||
import PromotionSlider from '@/shared/components/promotion-slider';
|
import PromotionSlider from '@/shared/components/promotion-slider';
|
||||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||||
|
|
||||||
@ -15,8 +16,8 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id='promotions' className='bg-gray-50 px-2 py-8 sm:py-16'>
|
<section id='promotions' className='bg-gray-50'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<Gift className='h-6 w-6 text-red-600' />
|
<Gift className='h-6 w-6 text-red-600' />
|
||||||
@ -29,7 +30,7 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<PromotionSlider discounts={discounts} />
|
<PromotionSlider discounts={discounts} />
|
||||||
</div>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
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 AnimatedCounter from '../shared/components/animated-counter';
|
import AnimatedCounter from '../shared/components/animated-counter';
|
||||||
@ -36,11 +37,8 @@ export function StatsSection() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section ref={sectionRef} className='bg-red-600 text-white'>
|
||||||
ref={sectionRef}
|
<Container>
|
||||||
className='bg-red-600 px-2 py-6 text-white sm:py-12'
|
|
||||||
>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='grid grid-cols-2 gap-4 text-center sm:gap-8 md:grid-cols-4'>
|
<div className='grid grid-cols-2 gap-4 text-center sm:gap-8 md:grid-cols-4'>
|
||||||
<div className='space-y-2'>
|
<div className='space-y-2'>
|
||||||
<h3 className='text-3xl font-bold'>
|
<h3 className='text-3xl font-bold'>
|
||||||
@ -67,7 +65,7 @@ export function StatsSection() {
|
|||||||
<p className='text-sm text-white/80'>{t('home.stats.mode')}</p>
|
<p className='text-sm text-white/80'>{t('home.stats.mode')}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { Briefcase } from 'lucide-react';
|
|||||||
|
|
||||||
import { Jobs } from '@/app/api-utlities/@types/index';
|
import { Jobs } from '@/app/api-utlities/@types/index';
|
||||||
|
|
||||||
|
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 { cn } from '@/shared/lib/utils';
|
import { cn } from '@/shared/lib/utils';
|
||||||
import { Badge } from '@/shared/shadcn-ui/badge';
|
import { Badge } from '@/shared/shadcn-ui/badge';
|
||||||
@ -37,8 +38,8 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
|
|||||||
const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];
|
const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id='vacancies' className='px-2 py-8 sm:py-16'>
|
<section id='vacancies'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
<Briefcase className='h-6 w-6 text-red-600' />
|
<Briefcase className='h-6 w-6 text-red-600' />
|
||||||
@ -88,7 +89,7 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
))}
|
))}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user