Compare commits
7 Commits
ff9ac551bf
...
a839f37c27
| Author | SHA1 | Date | |
|---|---|---|---|
| a839f37c27 | |||
|
00257ce07b | ||
|
|
2dfcdd096e | ||
|
|
2ed7f07520 | ||
|
|
e642da34c5 | ||
|
|
cad373568e | ||
|
|
cc5db77494 |
@ -37,7 +37,7 @@ export default async function RootLayout({
|
|||||||
className='scroll-smooth'
|
className='scroll-smooth'
|
||||||
style={{ scrollBehavior: 'smooth' }}
|
style={{ scrollBehavior: 'smooth' }}
|
||||||
>
|
>
|
||||||
<body className={`${inter.className} antialiased`}>
|
<body className={`${inter.className} antialiased min-w-2xs`}>
|
||||||
<Providers textItems={response.data as TextItem[]}>
|
<Providers textItems={response.data as TextItem[]}>
|
||||||
<Header />
|
<Header />
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
@ -97,7 +97,7 @@ export function CorporateDashboard() {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='flex min-h-screen flex-col'>
|
<div className='flex min-h-screen flex-col px-2.5'>
|
||||||
<main className='flex-1 py-10'>
|
<main className='flex-1 py-10'>
|
||||||
<div className='container mx-auto max-w-6xl'>
|
<div className='container mx-auto max-w-6xl'>
|
||||||
<div className='mb-8 flex items-center justify-between'>
|
<div className='mb-8 flex items-center justify-between'>
|
||||||
@ -110,7 +110,7 @@ export function CorporateDashboard() {
|
|||||||
|
|
||||||
<div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
|
<div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
|
||||||
{/* Company Card */}
|
{/* 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'>
|
<CardHeader className='pb-2'>
|
||||||
<CardTitle className='flex items-center gap-2'>
|
<CardTitle className='flex items-center gap-2'>
|
||||||
<Building2 className='h-5 w-5 text-red-600' />
|
<Building2 className='h-5 w-5 text-red-600' />
|
||||||
@ -166,7 +166,7 @@ export function CorporateDashboard() {
|
|||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Fund 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>
|
<CardHeader>
|
||||||
<CardTitle className='flex items-center gap-2'>
|
<CardTitle className='flex items-center gap-2'>
|
||||||
<Wallet className='h-5 w-5' />
|
<Wallet className='h-5 w-5' />
|
||||||
|
|||||||
@ -22,7 +22,7 @@ export function CustomerDashboard() {
|
|||||||
const { data, isLoading } = useFetchMyBonusInfoQuery({});
|
const { data, isLoading } = useFetchMyBonusInfoQuery({});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='flex min-h-screen flex-col'>
|
<div className='flex min-h-screen flex-col px-2.5'>
|
||||||
<main className='flex-1 py-10'>
|
<main className='flex-1 py-10'>
|
||||||
<div className='container mx-auto max-w-6xl'>
|
<div className='container mx-auto max-w-6xl'>
|
||||||
<div className='mb-8 flex items-center justify-between'>
|
<div className='mb-8 flex items-center justify-between'>
|
||||||
@ -34,7 +34,7 @@ export function CustomerDashboard() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
|
<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 ? (
|
{!data || isLoading ? (
|
||||||
// TODO: Bunyod please add loader here
|
// TODO: Bunyod please add loader here
|
||||||
<>Loader here</>
|
<>Loader here</>
|
||||||
@ -73,7 +73,7 @@ export function CustomerDashboard() {
|
|||||||
|
|
||||||
{/* Bonus Card */}
|
{/* Bonus Card */}
|
||||||
{/* Customer 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'>
|
<CardHeader className='pb-2'>
|
||||||
<CardTitle className='flex items-center gap-2'>
|
<CardTitle className='flex items-center gap-2'>
|
||||||
<User className='h-5 w-5 text-red-600' />
|
<User className='h-5 w-5 text-red-600' />
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
|||||||
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';
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
import Container from '@/shared/shadcn-ui/conteiner';
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'about.metadata.title',
|
title: 'about.metadata.title',
|
||||||
@ -36,8 +37,8 @@ export default function AboutPage() {
|
|||||||
className='object-cover'
|
className='object-cover'
|
||||||
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 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'>
|
<div className='max-w-2xl space-y-4 text-white'>
|
||||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||||
{t('about.hero.title')}
|
{t('about.hero.title')}
|
||||||
@ -52,55 +53,57 @@ export default function AboutPage() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Company Overview */}
|
{/* Company Overview */}
|
||||||
<section className='py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<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 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-2 gap-4'>
|
<div className='mb-6 grid md:grid-cols-2 gap-4 grid-cols-1'>
|
||||||
{[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 className='ml-3'>
|
||||||
|
<h3 className='text-lg font-medium'>
|
||||||
|
{t(`about.overview.benefits.${index}.title`)}
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
{t(`about.overview.benefits.${index}.description`)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='ml-3'>
|
))}
|
||||||
<h3 className='text-lg font-medium'>
|
</div>
|
||||||
{t(`about.overview.benefits.${index}.title`)}
|
</div>
|
||||||
</h3>
|
<div data-aos="zoom-out-right" className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
|
||||||
<p className='text-gray-600'>
|
<Image
|
||||||
{t(`about.overview.benefits.${index}.description`)}
|
src='/placeholder.svg?height=500&width=600&text=Главный+офис'
|
||||||
</p>
|
alt={t('about.overview.imageAlt')}
|
||||||
</div>
|
fill
|
||||||
</div>
|
className='object-cover'
|
||||||
))}
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div 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>
|
||||||
</section>
|
</Container>
|
||||||
|
|
||||||
{/* Stats Section */}
|
{/* Stats Section */}
|
||||||
<section className='bg-red-600 py-16 text-white'>
|
<section className='bg-red-600 py-16 text-white'>
|
||||||
@ -113,7 +116,7 @@ export default function AboutPage() {
|
|||||||
{t('about.stats.subtitle')}
|
{t('about.stats.subtitle')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
|
<div className='grid grid-cols-1 sm:grid-cols-2 gap-8 text-center md:grid-cols-4'>
|
||||||
{[0, 1, 2, 3].map((index) => (
|
{[0, 1, 2, 3].map((index) => (
|
||||||
<div key={index} className='space-y-2'>
|
<div key={index} className='space-y-2'>
|
||||||
<h3 className='text-4xl font-bold'>
|
<h3 className='text-4xl font-bold'>
|
||||||
@ -139,176 +142,190 @@ export default function AboutPage() {
|
|||||||
{/* Our History */}
|
{/* Our History */}
|
||||||
<section className='py-16'>
|
<section className='py-16'>
|
||||||
<div className='container mx-auto'>
|
<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'>
|
||||||
|
<History className='h-6 w-6 text-red-600' />
|
||||||
|
</div>
|
||||||
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('about.history.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='max-w-2xl text-gray-600'>
|
||||||
|
{t('about.history.subtitle')}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
</Container>
|
||||||
{t('about.history.title')}
|
|
||||||
</h2>
|
<Container>
|
||||||
<p className='max-w-2xl text-gray-600'>
|
<CompanyTimeline />
|
||||||
{t('about.history.subtitle')}
|
</Container>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CompanyTimeline />
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Our Stations */}
|
{/* Our Stations */}
|
||||||
<section className='bg-gray-50 py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<section className='bg-gray-50 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'>
|
||||||
<MapPin 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'>
|
||||||
|
<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>
|
</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 />
|
<StationGallery />
|
||||||
|
|
||||||
<div className='mt-12 text-center'>
|
<div className='mt-12 text-center'>
|
||||||
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
||||||
{t('about.stations.description')}
|
{t('about.stations.description')}
|
||||||
</p>
|
</p>
|
||||||
<Button className='bg-red-600 hover:bg-red-700'>
|
<Button className='bg-red-600 hover:bg-red-700'>
|
||||||
{t('about.stations.buttonText')}{' '}
|
{t('about.stations.buttonText')}{' '}
|
||||||
<MapPin className='ml-2 h-4 w-4' />
|
<MapPin className='ml-2 h-4 w-4' />
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</Container>
|
||||||
|
|
||||||
{/* Our Values */}
|
{/* Our Values */}
|
||||||
<section className='py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<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>
|
||||||
<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 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) => (
|
{[0, 1, 2].map((index) => (
|
||||||
<Card
|
<Card
|
||||||
key={index}
|
key={index}
|
||||||
className='overflow-hidden transition-all hover:shadow-lg'
|
className='overflow-hidden transition-all hover:shadow-lg'
|
||||||
>
|
>
|
||||||
<CardContent className='p-6'>
|
<CardContent className='p-6'>
|
||||||
<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
<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' />
|
<Star className='h-6 w-6 text-red-600' />
|
||||||
</div>
|
</div>
|
||||||
<h3 className='mb-2 text-xl font-bold'>
|
<h3 className='mb-2 text-xl font-bold'>
|
||||||
{t(`about.values.items.${index}.title`)}
|
{t(`about.values.items.${index}.title`)}
|
||||||
</h3>
|
</h3>
|
||||||
<p className='text-gray-600'>
|
<p className='text-gray-600'>
|
||||||
{t(`about.values.items.${index}.description`)}
|
{t(`about.values.items.${index}.description`)}
|
||||||
</p>
|
</p>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</Container>
|
||||||
|
|
||||||
{/* Our Team */}
|
{/* Our Team */}
|
||||||
<section className='bg-gray-50 py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<section className='bg-gray-50 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'>
|
||||||
<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'>
|
||||||
</div>
|
<Users className='h-6 w-6 text-red-600' />
|
||||||
<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 className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
|
|
||||||
{[0, 1, 2, 3].map((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'>
|
|
||||||
<Image
|
|
||||||
src={`/placeholder.svg?height=300&width=300&text=${t(`about.team.members.${index}.name`)}`}
|
|
||||||
alt={t(`about.team.members.${index}.name`)}
|
|
||||||
fill
|
|
||||||
className='object-cover'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='p-4 text-center'>
|
|
||||||
<h3 className='text-lg font-bold'>
|
|
||||||
{t(`about.team.members.${index}.name`)}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t(`about.team.members.${index}.position`)}
|
|
||||||
</p>
|
|
||||||
</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 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}
|
||||||
|
className='overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105'
|
||||||
|
>
|
||||||
|
<div className='relative h-64 w-full'>
|
||||||
|
<Image
|
||||||
|
src={`/placeholder.svg?height=300&width=300&text=${t(`about.team.members.${index}.name`)}`}
|
||||||
|
alt={t(`about.team.members.${index}.name`)}
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='p-4 text-center'>
|
||||||
|
<h3 className='text-lg font-bold'>
|
||||||
|
{t(`about.team.members.${index}.name`)}
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
{t(`about.team.members.${index}.position`)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</Container>
|
||||||
|
|
||||||
{/* Testimonials */}
|
{/* Testimonials */}
|
||||||
<section className='py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
|
||||||
<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'>
|
|
||||||
<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 className='grid gap-8 md:grid-cols-3'>
|
<section className='py-16'>
|
||||||
{[0, 1, 2].map((index) => (
|
<div className='container mx-auto'>
|
||||||
<Card
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||||
key={index}
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
className='overflow-hidden transition-all hover:shadow-lg'
|
<Star className='h-6 w-6 text-red-600' />
|
||||||
>
|
</div>
|
||||||
<CardContent className='p-6'>
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
<div className='mb-4 flex'>
|
{t('about.testimonials.title')}
|
||||||
{Array(5)
|
</h2>
|
||||||
.fill(0)
|
<p className='max-w-2xl text-gray-600'>
|
||||||
.map((_, i) => (
|
{t('about.testimonials.subtitle')}
|
||||||
<Star
|
</p>
|
||||||
key={i}
|
</div>
|
||||||
className={`h-5 w-5 ${i < Number(t(`about.testimonials.items.${index}.rating`)) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
|
|
||||||
/>
|
<div data-aos="zoom-out-right" className='grid gap-8 md:grid-cols-3'>
|
||||||
))}
|
{[0, 1, 2].map((index) => (
|
||||||
</div>
|
<Card
|
||||||
<p className='mb-4 text-gray-600 italic'>
|
key={index}
|
||||||
"{t(`about.testimonials.items.${index}.text`)}"
|
className='overflow-hidden transition-all hover:shadow-lg'
|
||||||
</p>
|
>
|
||||||
<p className='font-semibold'>
|
<CardContent className='p-6'>
|
||||||
{t(`about.testimonials.items.${index}.name`)}
|
<div className='mb-4 flex'>
|
||||||
</p>
|
{Array(5)
|
||||||
</CardContent>
|
.fill(0)
|
||||||
</Card>
|
.map((_, i) => (
|
||||||
))}
|
<Star
|
||||||
|
key={i}
|
||||||
|
className={`h-5 w-5 ${i < Number(t(`about.testimonials.items.${index}.rating`)) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className='mb-4 text-gray-600 italic'>
|
||||||
|
"{t(`about.testimonials.items.${index}.text`)}"
|
||||||
|
</p>
|
||||||
|
<p className='font-semibold'>
|
||||||
|
{t(`about.testimonials.items.${index}.name`)}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</Container>
|
||||||
|
|
||||||
<CtaSection />
|
<CtaSection />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -21,6 +21,7 @@ import {
|
|||||||
} from '@/shared/shadcn-ui/card';
|
} from '@/shared/shadcn-ui/card';
|
||||||
|
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
import Container from '@/shared/shadcn-ui/conteiner';
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
|
title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
|
||||||
@ -46,68 +47,72 @@ 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'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<div className='max-w-2xl space-y-6 text-white'>
|
<div data-aos='fade-down' data-aos-duration='800' className='container mx-auto'>
|
||||||
<div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
|
<div className='max-w-2xl space-y-6 text-white'>
|
||||||
<Heart className='size-6 text-red-500' />
|
<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 sm:text-xl text-gray-200'>
|
||||||
|
{t('charity.hero.subtitle')}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
|
||||||
{t('charity.hero.title')}
|
|
||||||
</h1>
|
|
||||||
<p className='text-xl text-gray-200'>
|
|
||||||
{t('charity.hero.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Mission Section */}
|
{/* Mission Section */}
|
||||||
<section className='py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<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'>
|
||||||
</div>
|
<Heart className='h-6 w-6 text-red-600' />
|
||||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
</div>
|
||||||
{t('charity.mission.title')}
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
</h2>
|
{t('charity.mission.title')}
|
||||||
<p className='mb-6 text-gray-600'>
|
</h2>
|
||||||
{t('charity.mission.description1')}
|
<p className='mb-6 text-gray-600'>
|
||||||
</p>
|
{t('charity.mission.description1')}
|
||||||
<p className='mb-6 text-gray-600'>
|
</p>
|
||||||
{t('charity.mission.description2')}
|
<p className='mb-6 text-gray-600'>
|
||||||
</p>
|
{t('charity.mission.description2')}
|
||||||
|
</p>
|
||||||
|
|
||||||
<div className='space-y-4'>
|
<div className='space-y-4'>
|
||||||
{[0, 1, 2].map((index) => (
|
{[0, 1, 2].map((index) => (
|
||||||
<div key={index} className='flex items-start'>
|
<div key={index} className='flex items-start'>
|
||||||
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
||||||
<div>
|
<div>
|
||||||
<h3 className='text-lg font-medium'>
|
<h3 className='text-lg font-medium'>
|
||||||
{t(`charity.mission.principles.${index}.title`)}
|
{t(`charity.mission.principles.${index}.title`)}
|
||||||
</h3>
|
</h3>
|
||||||
<p className='text-gray-600'>
|
<p className='text-gray-600'>
|
||||||
{t(`charity.mission.principles.${index}.description`)}
|
{t(`charity.mission.principles.${index}.description`)}
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
|
</div>
|
||||||
|
<div 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 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>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</Container>
|
||||||
|
|
||||||
{/* Key Figures */}
|
{/* Key Figures */}
|
||||||
<section className='bg-red-600 py-16 text-white'>
|
<section className='bg-red-600 py-16 text-white'>
|
||||||
@ -136,140 +141,146 @@ export function CharityPage() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Upcoming Events */}
|
{/* Upcoming Events */}
|
||||||
<section className='bg-gray-50 py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<section className='bg-gray-50 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'>
|
||||||
<Calendar 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'>
|
||||||
|
<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>
|
||||||
<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'>
|
<div className='grid gap-6 md:grid-cols-3'>
|
||||||
{[
|
{[
|
||||||
{
|
{
|
||||||
title: 'Благотворительный марафон',
|
title: 'Благотворительный марафон',
|
||||||
description:
|
description:
|
||||||
'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
|
'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
|
||||||
date: '15 июня 2023',
|
date: '15 июня 2023',
|
||||||
location: 'Парк Рудаки, Душанбе',
|
location: 'Парк Рудаки, Душанбе',
|
||||||
image: '/placeholder.svg?height=200&width=300&text=Марафон',
|
image: '/placeholder.svg?height=200&width=300&text=Марафон',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Экологическая акция',
|
title: 'Экологическая акция',
|
||||||
description:
|
description:
|
||||||
'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
|
'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
|
||||||
date: '22 июля 2023',
|
date: '22 июля 2023',
|
||||||
location: 'Река Варзоб, Душанбе',
|
location: 'Река Варзоб, Душанбе',
|
||||||
image:
|
image:
|
||||||
'/placeholder.svg?height=200&width=300&text=Экологическая+акция',
|
'/placeholder.svg?height=200&width=300&text=Экологическая+акция',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Сбор школьных принадлежностей',
|
title: 'Сбор школьных принадлежностей',
|
||||||
description:
|
description:
|
||||||
'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
|
'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
|
||||||
date: '1-20 августа 2023',
|
date: '1-20 августа 2023',
|
||||||
location: 'Все заправки GasNetwork',
|
location: 'Все заправки GasNetwork',
|
||||||
image:
|
image:
|
||||||
'/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
|
'/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
|
||||||
},
|
},
|
||||||
].map((event, index) => (
|
].map((event, index) => (
|
||||||
<Card key={index} className='overflow-hidden'>
|
<Card key={index} className='overflow-hidden flex flex-col justify-between'>
|
||||||
<div className='relative h-48 w-full'>
|
<div>
|
||||||
<Image
|
<div className='relative h-48 w-full'>
|
||||||
src={event.image || '/placeholder.svg'}
|
<Image
|
||||||
alt={event.title}
|
src={event.image || '/placeholder.svg'}
|
||||||
fill
|
alt={event.title}
|
||||||
className='object-cover'
|
fill
|
||||||
/>
|
className='object-cover'
|
||||||
</div>
|
/>
|
||||||
<CardHeader>
|
</div>
|
||||||
<CardTitle>{event.title}</CardTitle>
|
<CardHeader>
|
||||||
</CardHeader>
|
<CardTitle className='text-xl lg:text-2xl'>{event.title}</CardTitle>
|
||||||
<CardContent className='space-y-4'>
|
</CardHeader>
|
||||||
<p className='text-gray-600'>{event.description}</p>
|
<CardContent className='space-y-4'>
|
||||||
<div className='flex items-center text-sm text-gray-500'>
|
<p className='text-gray-600'>{event.description}</p>
|
||||||
<Calendar className='mr-2 h-4 w-4' />
|
<div className='flex items-center text-sm text-gray-500'>
|
||||||
{event.date}
|
<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>
|
||||||
<div className='flex items-center text-sm text-gray-500'>
|
<CardFooter>
|
||||||
<MapPin className='mr-2 h-4 w-4' />
|
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
||||||
{event.location}
|
{t(`charity.events.button`)}
|
||||||
</div>
|
</Button>
|
||||||
</CardContent>
|
</CardFooter>
|
||||||
<CardFooter>
|
</Card>
|
||||||
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
))}
|
||||||
{t(`charity.events.button`)}
|
</div>
|
||||||
</Button>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</Container>
|
||||||
|
|
||||||
{/* How to Help */}
|
{/* How to Help */}
|
||||||
<section className='py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<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>
|
||||||
<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'>
|
<div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
|
||||||
{[
|
{[
|
||||||
{
|
{
|
||||||
title: 'Сделать пожертвование',
|
title: 'Сделать пожертвование',
|
||||||
description:
|
description:
|
||||||
'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
|
'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
|
||||||
icon: <Landmark className='h-10 w-10 text-red-600' />,
|
icon: <Landmark className='h-10 w-10 text-red-600' />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Стать волонтером',
|
title: 'Стать волонтером',
|
||||||
description:
|
description:
|
||||||
'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
|
'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
|
||||||
icon: <Users className='h-10 w-10 text-red-600' />,
|
icon: <Users className='h-10 w-10 text-red-600' />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Участвовать в мероприятиях',
|
title: 'Участвовать в мероприятиях',
|
||||||
description:
|
description:
|
||||||
'Принимайте участие в наших благотворительных мероприятиях и акциях.',
|
'Принимайте участие в наших благотворительных мероприятиях и акциях.',
|
||||||
icon: <Calendar className='h-10 w-10 text-red-600' />,
|
icon: <Calendar className='h-10 w-10 text-red-600' />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Распространять информацию',
|
title: 'Распространять информацию',
|
||||||
description:
|
description:
|
||||||
'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
|
'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
|
||||||
icon: <Heart className='h-10 w-10 text-red-600' />,
|
icon: <Heart className='h-10 w-10 text-red-600' />,
|
||||||
},
|
},
|
||||||
].map((item, index) => (
|
].map((item, index) => (
|
||||||
<Card key={index} className='text-center'>
|
<Card key={index} className='text-center'>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div className='mb-4 flex justify-center'>{item.icon}</div>
|
<div className='mb-4 flex justify-center'>{item.icon}</div>
|
||||||
<CardTitle className='break-words hyphens-auto'>
|
<CardTitle className='break-words hyphens-auto'>
|
||||||
{item.title}
|
{item.title}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<p className='text-gray-600'>{item.description}</p>
|
<p className='text-gray-600'>{item.description}</p>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</Container>
|
||||||
<CtaSection />
|
<CtaSection />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import Image from 'next/image';
|
|||||||
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();
|
||||||
@ -64,7 +65,7 @@ export function CertificatesPage() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Container>
|
||||||
<main className='container mx-auto py-10'>
|
<main className='container mx-auto py-10'>
|
||||||
<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>
|
||||||
@ -76,6 +77,7 @@ export function CertificatesPage() {
|
|||||||
<div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
|
<div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
|
||||||
{certificates.map((certificate) => (
|
{certificates.map((certificate) => (
|
||||||
<Card
|
<Card
|
||||||
|
data-aos='zoom-in'
|
||||||
key={certificate.id}
|
key={certificate.id}
|
||||||
className='overflow-hidden transition-all duration-300 hover:shadow-lg'
|
className='overflow-hidden transition-all duration-300 hover:shadow-lg'
|
||||||
>
|
>
|
||||||
@ -122,6 +124,6 @@ export function CertificatesPage() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|||||||
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';
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
import Container from '@/shared/shadcn-ui/conteiner';
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'Клиентам | GasNetwork - Сеть заправок в Таджикистане',
|
title: 'Клиентам | GasNetwork - Сеть заправок в Таджикистане',
|
||||||
@ -32,16 +33,18 @@ 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'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<div className='max-w-2xl space-y-4 text-white'>
|
<div data-aos='fade-down' data-aos-duration="1000" className='container mx-auto'>
|
||||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
<div className='max-w-2xl space-y-4 text-white'>
|
||||||
{t('clients.title')}
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||||
</h1>
|
{t('clients.title')}
|
||||||
<p className='text-lg text-gray-200'>
|
</h1>
|
||||||
{t('clients.description')}
|
<p className='text-lg text-gray-200'>
|
||||||
</p>
|
{t('clients.description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -7,6 +7,7 @@ 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 { CtaSection } from '@/widgets/cta-section';
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
import Container from '@/shared/shadcn-ui/conteiner';
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане',
|
title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане',
|
||||||
@ -32,105 +33,108 @@ 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'>
|
||||||
<div className='container mx-auto'>
|
<Container>
|
||||||
<div className='max-w-2xl space-y-4 text-white'>
|
<div data-aos='fade-down' data-aos-duration="800" className='container mx-auto'>
|
||||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
<div className='max-w-2xl space-y-4 text-white'>
|
||||||
{t('clients.loyalty.title')}
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||||
</h1>
|
{t('clients.loyalty.title')}
|
||||||
<p className='text-lg text-gray-200'>
|
</h1>
|
||||||
{t('clients.loyalty.description')}
|
<p className='text-lg text-gray-200'>
|
||||||
|
{t('clients.loyalty.description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
{/* Program Overview */}
|
||||||
|
<section className='py-16'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
|
<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>
|
||||||
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('clients.loyalty.programm.about')}
|
||||||
|
</h2>
|
||||||
|
<p className='mb-6 text-gray-600'>
|
||||||
|
{t('clients.loyalty.programm.about-description')}
|
||||||
</p>
|
</p>
|
||||||
|
<p className='mb-6 text-gray-600'>
|
||||||
|
{t('clients.loyalty.programm.about-description-2')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className='space-y-4'>
|
||||||
|
<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-1')}
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
{t('clients.loyalty.programm.conditions.description-1')}
|
||||||
|
</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 data-aos='fade-up' className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
|
||||||
|
<Image
|
||||||
|
src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
|
||||||
|
alt='Программа лояльности'
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Program Overview */}
|
{/* How It Works */}
|
||||||
<section className='py-16'>
|
<section className='bg-gray-50 py-16'>
|
||||||
<div className='container mx-auto'>
|
<div className='container mx-auto'>
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
<div className='mb-12 text-center'>
|
||||||
<div>
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
{t('clients.loyalty.works.title')}
|
||||||
<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.loyalty.programm.about')}
|
|
||||||
</h2>
|
</h2>
|
||||||
<p className='mb-6 text-gray-600'>
|
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||||
{t('clients.loyalty.programm.about-description')}
|
{t('clients.loyalty.works.description')}
|
||||||
</p>
|
</p>
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
{t('clients.loyalty.programm.about-description-2')}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className='space-y-4'>
|
|
||||||
<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-1')}
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
{t('clients.loyalty.programm.conditions.description-1')}
|
|
||||||
</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 className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
|
|
||||||
<Image
|
|
||||||
src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
|
|
||||||
alt='Программа лояльности'
|
|
||||||
fill
|
|
||||||
className='object-cover'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* How It Works */}
|
<div data-aos='zoom-in-right' className='grid gap-8 md:grid-cols-4'>
|
||||||
<section className='bg-gray-50 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.title')}
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
|
||||||
{t('clients.loyalty.works.description')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-8 md:grid-cols-4'>
|
|
||||||
<div className='text-center'>
|
<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'>
|
<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
|
1
|
||||||
@ -177,149 +181,150 @@ export function LoyaltyPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Loyalty Levels */}
|
{/* Loyalty Levels */}
|
||||||
<section className='py-16'>
|
<section className='py-16'>
|
||||||
<div className='container mx-auto'>
|
<div className='container mx-auto'>
|
||||||
<div className='mb-12 text-center'>
|
<div className='mb-12 text-center'>
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
{t('clients.loyalty.works.levels.title')}
|
{t('clients.loyalty.works.levels.title')}
|
||||||
</h2>
|
</h2>
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||||
{t('clients.loyalty.works.levels.description')}
|
{t('clients.loyalty.works.levels.description')}
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div 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'>
|
||||||
|
{t('clients.loyalty.works.levels.card-1.title')}
|
||||||
|
</h3>
|
||||||
|
<div className='mb-6 text-center'>
|
||||||
|
<span className='text-4xl font-bold'>
|
||||||
|
{t('clients.loyalty.works.levels.card-1.percent')}
|
||||||
|
</span>
|
||||||
|
<p className='text-sm text-gray-600'>
|
||||||
|
{t('clients.loyalty.works.levels.card.mark')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ul className='space-y-2'>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-1.bonus-1')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-1.bonus-2')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-1.bonus-3')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'>
|
||||||
|
<CardContent className='p-6'>
|
||||||
|
<h3 className='mb-4 text-center text-2xl font-bold'>
|
||||||
|
{t('clients.loyalty.works.levels.card-2.title')}
|
||||||
|
</h3>
|
||||||
|
<div className='mb-6 text-center'>
|
||||||
|
<span className='text-4xl font-bold'>
|
||||||
|
{t('clients.loyalty.works.levels.card-2.percent')}
|
||||||
|
</span>
|
||||||
|
<p className='text-sm text-gray-600'>
|
||||||
|
{t('clients.loyalty.works.levels.card.mark')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ul className='space-y-2'>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-2.bonus-1')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-2.bonus-2')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-2.bonus-3')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-2.bonus-4')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
|
||||||
|
<CardContent className='p-6'>
|
||||||
|
<h3 className='mb-4 text-center text-2xl font-bold'>
|
||||||
|
{t('clients.loyalty.works.levels.card-3.title')}
|
||||||
|
</h3>
|
||||||
|
<div className='mb-6 text-center'>
|
||||||
|
<span className='text-4xl font-bold'>
|
||||||
|
{t('clients.loyalty.works.levels.card-3.percent')}
|
||||||
|
</span>
|
||||||
|
<p className='text-sm text-gray-600'>
|
||||||
|
{t('clients.loyalty.works.levels.card.mark')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ul className='space-y-2'>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-3.bonus-1')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-3.bonus-2')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-3.bonus-3')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-3.bonus-4')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className='flex items-center'>
|
||||||
|
<Check className='mr-2 h-5 w-5 text-green-500' />
|
||||||
|
<span>
|
||||||
|
{t('clients.loyalty.works.levels.card-3.bonus-5')}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
<div className='grid gap-8 md:grid-cols-3'>
|
</Container>
|
||||||
<Card className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'>
|
|
||||||
<CardContent className='p-6'>
|
|
||||||
<h3 className='mb-4 text-center text-2xl font-bold'>
|
|
||||||
{t('clients.loyalty.works.levels.card-1.title')}
|
|
||||||
</h3>
|
|
||||||
<div className='mb-6 text-center'>
|
|
||||||
<span className='text-4xl font-bold'>
|
|
||||||
{t('clients.loyalty.works.levels.card-1.percent')}
|
|
||||||
</span>
|
|
||||||
<p className='text-sm text-gray-600'>
|
|
||||||
{t('clients.loyalty.works.levels.card.mark')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<ul className='space-y-2'>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>
|
|
||||||
{t('clients.loyalty.works.levels.card-1.bonus-1')}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>
|
|
||||||
{t('clients.loyalty.works.levels.card-1.bonus-2')}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>
|
|
||||||
{t('clients.loyalty.works.levels.card-1.bonus-3')}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'>
|
|
||||||
<CardContent className='p-6'>
|
|
||||||
<h3 className='mb-4 text-center text-2xl font-bold'>
|
|
||||||
{t('clients.loyalty.works.levels.card-2.title')}
|
|
||||||
</h3>
|
|
||||||
<div className='mb-6 text-center'>
|
|
||||||
<span className='text-4xl font-bold'>
|
|
||||||
{t('clients.loyalty.works.levels.card-2.percent')}
|
|
||||||
</span>
|
|
||||||
<p className='text-sm text-gray-600'>
|
|
||||||
{t('clients.loyalty.works.levels.card.mark')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<ul className='space-y-2'>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>
|
|
||||||
{t('clients.loyalty.works.levels.card-2.bonus-1')}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>
|
|
||||||
{t('clients.loyalty.works.levels.card-2.bonus-2')}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>
|
|
||||||
{t('clients.loyalty.works.levels.card-2.bonus-3')}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>
|
|
||||||
{t('clients.loyalty.works.levels.card-2.bonus-4')}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
|
|
||||||
<CardContent className='p-6'>
|
|
||||||
<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>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<CtaSection />
|
<CtaSection />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -22,6 +22,7 @@ import {
|
|||||||
TabsList,
|
TabsList,
|
||||||
TabsTrigger,
|
TabsTrigger,
|
||||||
} from '@/shared/shadcn-ui/tabs';
|
} from '@/shared/shadcn-ui/tabs';
|
||||||
|
import Container from '@/shared/shadcn-ui/conteiner';
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{
|
{
|
||||||
@ -51,107 +52,109 @@ export default function LoginPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='flex min-h-screen flex-col items-center justify-center'>
|
<Container>
|
||||||
<main className='flex-1'>
|
<div className='flex min-h-screen flex-col items-center justify-center'>
|
||||||
<div className='container max-w-6xl py-16'>
|
<main className='flex-1'>
|
||||||
<div className='mb-12 flex flex-col items-center text-center'>
|
<div className='container max-w-6xl py-16'>
|
||||||
<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 text-center'>
|
||||||
<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'>
|
||||||
|
<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 className='mx-auto max-w-lg'>
|
<div data-aos='zoom-in' className='mx-auto max-w-lg'>
|
||||||
<Tabs
|
<Tabs
|
||||||
defaultValue={defaultTab}
|
defaultValue={defaultTab}
|
||||||
value={defaultTab}
|
value={defaultTab}
|
||||||
onValueChange={handleTabChange}
|
onValueChange={handleTabChange}
|
||||||
className='w-full'
|
className='w-full'
|
||||||
>
|
>
|
||||||
<TabsList className='mb-8 flex h-fit w-full flex-col sm:flex-row'>
|
<TabsList className='mb-8 flex h-fit w-full flex-col sm:flex-row'>
|
||||||
|
{tabs.map((tab) => {
|
||||||
|
return (
|
||||||
|
<TabsTrigger
|
||||||
|
key={tab.label}
|
||||||
|
value={tab.type}
|
||||||
|
className='w-full text-base'
|
||||||
|
>
|
||||||
|
<tab.Icon className='mr-2 h-4 w-4' /> {t(tab.label)}
|
||||||
|
</TabsTrigger>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
{tabs.map((tab) => {
|
{tabs.map((tab) => {
|
||||||
return (
|
const tabCookieName = `${tab.type}__token`;
|
||||||
<TabsTrigger
|
|
||||||
key={tab.label}
|
|
||||||
value={tab.type}
|
|
||||||
className='w-full text-base'
|
|
||||||
>
|
|
||||||
<tab.Icon className='mr-2 h-4 w-4' /> {t(tab.label)}
|
|
||||||
</TabsTrigger>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</TabsList>
|
|
||||||
|
|
||||||
{tabs.map((tab) => {
|
const authenticationCookie = getCookie(tabCookieName);
|
||||||
const tabCookieName = `${tab.type}__token`;
|
|
||||||
|
|
||||||
const authenticationCookie = getCookie(tabCookieName);
|
if (authenticationCookie) {
|
||||||
|
return (
|
||||||
|
<TabsContent key={tab.label} value={tab.type}>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>{t(tab.title)}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className='flex justify-center gap-2 space-y-4'>
|
||||||
|
<Link
|
||||||
|
href={
|
||||||
|
tab.type === 'bonus'
|
||||||
|
? '/customer-dashboard'
|
||||||
|
: '/corporate-dashboard'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button className='flex items-center'>
|
||||||
|
Открыть
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
className='flex items-center gap-2'
|
||||||
|
onClick={() => {
|
||||||
|
deleteCookie(tabCookieName);
|
||||||
|
window.location.reload();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Выйти
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (authenticationCookie) {
|
|
||||||
return (
|
return (
|
||||||
<TabsContent key={tab.label} value={tab.type}>
|
<TabsContent key={tab.label} value={tab.type}>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>{t(tab.title)}</CardTitle>
|
<CardTitle>{t(tab.title)}</CardTitle>
|
||||||
|
<CardDescription>{t(tab.description)}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className='flex justify-center gap-2 space-y-4'>
|
<CardContent className='space-y-4'>
|
||||||
<Link
|
<LoginForm type={tab.type} />
|
||||||
href={
|
|
||||||
tab.type === 'bonus'
|
|
||||||
? '/customer-dashboard'
|
|
||||||
: '/corporate-dashboard'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Button className='flex items-center'>
|
|
||||||
Открыть
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
<Button
|
|
||||||
variant='outline'
|
|
||||||
className='flex items-center gap-2'
|
|
||||||
onClick={() => {
|
|
||||||
deleteCookie(tabCookieName);
|
|
||||||
window.location.reload();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Выйти
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
);
|
);
|
||||||
}
|
})}
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
return (
|
<div className='mt-8 text-center text-sm text-gray-500'>
|
||||||
<TabsContent key={tab.label} value={tab.type}>
|
<p>
|
||||||
<Card>
|
{t('auth.loginIssues')}{' '}
|
||||||
<CardHeader>
|
<Link href='/contact' className='text-red-600 hover:underline'>
|
||||||
<CardTitle>{t(tab.title)}</CardTitle>
|
{t('auth.contactLink')}
|
||||||
<CardDescription>{t(tab.description)}</CardDescription>
|
</Link>
|
||||||
</CardHeader>
|
</p>
|
||||||
<CardContent className='space-y-4'>
|
</div>
|
||||||
<LoginForm type={tab.type} />
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</TabsContent>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
<div className='mt-8 text-center text-sm text-gray-500'>
|
|
||||||
<p>
|
|
||||||
{t('auth.loginIssues')}{' '}
|
|
||||||
<Link href='/contact' className='text-red-600 hover:underline'>
|
|
||||||
{t('auth.contactLink')}
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
</main>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
10
src/shared/shadcn-ui/conteiner.tsx
Normal file
10
src/shared/shadcn-ui/conteiner.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
"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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -76,7 +76,7 @@ export function StationGallery() {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='space-y-8'>
|
<div className='space-y-8 px-2'>
|
||||||
<div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl md:h-[500px]'>
|
<div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl md:h-[500px]'>
|
||||||
<Image
|
<Image
|
||||||
src={stations[currentImage].image || '/placeholder.svg'}
|
src={stations[currentImage].image || '/placeholder.svg'}
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { Percent } from 'lucide-react';
|
|||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
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;
|
||||||
@ -33,46 +34,48 @@ export const BenefitsSection = () => {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className='bg-gray-50 py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<section className='bg-gray-50 py-16'>
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
<div className='container mx-auto'>
|
||||||
<div className='order-2 md:order-1'>
|
<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' data-aos-duration='4000' className='order-2 md:order-1'>
|
||||||
<Percent 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>
|
<Percent className='h-6 w-6 text-red-600' />
|
||||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
</div>
|
||||||
{t('clients.benefits.title')}
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
</h2>
|
{t('clients.benefits.title')}
|
||||||
<p className='mb-6 text-gray-600'>
|
</h2>
|
||||||
{t('clients.benefits.subtitle')}
|
<p className='mb-6 text-gray-600'>
|
||||||
</p>
|
{t('clients.benefits.subtitle')}
|
||||||
|
</p>
|
||||||
|
|
||||||
<div className='space-y-4'>
|
<div className='space-y-4'>
|
||||||
{benefits.map(({ title, description }) => {
|
{benefits.map(({ title, description }) => {
|
||||||
return (
|
return (
|
||||||
<div key={title} className='flex items-start'>
|
<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'>
|
<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 className='ml-3'>
|
||||||
|
<h3 className='text-lg font-medium'>{title}</h3>
|
||||||
|
<p className='text-gray-600'>{description}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</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 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>
|
|
||||||
<div 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>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</Container>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -11,6 +11,7 @@ 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;
|
||||||
@ -49,39 +50,41 @@ export const ServicesOverviewSection = () => {
|
|||||||
const { t } = useTextController();
|
const { t } = useTextController();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className='py-16'>
|
<Container>
|
||||||
<div className='container mx-auto'>
|
<section className='py-16'>
|
||||||
<div className='mb-12 text-center'>
|
<div className='container mx-auto'>
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
<div className='mb-12 text-center'>
|
||||||
{t('clients.services.title')}
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
</h2>
|
{t('clients.services.title')}
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
</h2>
|
||||||
{t('clients.services.subtitle')}
|
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||||
</p>
|
{t('clients.services.subtitle')}
|
||||||
</div>
|
</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 }) => {
|
{servicesOverview.map(({ description, Icon, contentText, title }) => {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
key={title}
|
key={title}
|
||||||
className='overflow-hidden transition-all hover:shadow-lg'
|
className='overflow-hidden transition-all hover:shadow-lg'
|
||||||
>
|
>
|
||||||
<CardHeader className='pb-3'>
|
<CardHeader className='pb-3'>
|
||||||
<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
<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' />
|
<Icon className='h-6 w-6 text-red-600' />
|
||||||
</div>
|
</div>
|
||||||
<CardTitle>{title}</CardTitle>
|
<CardTitle>{title}</CardTitle>
|
||||||
<CardDescription>{description}</CardDescription>
|
<CardDescription>{description}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className='text-sm text-gray-600'>
|
<CardContent className='text-sm text-gray-600'>
|
||||||
<p>{contentText}</p>
|
<p>{contentText}</p>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</Container>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -11,113 +11,119 @@ export const Footer = () => {
|
|||||||
return (
|
return (
|
||||||
<footer className='bg-gray-900 px-4 py-12 text-white'>
|
<footer className='bg-gray-900 px-4 py-12 text-white'>
|
||||||
<div className='containe mx-autor'>
|
<div className='containe mx-autor'>
|
||||||
<div className='grid grid-cols-1 gap-8 md:grid-cols-3'>
|
<div className='grid grid-cols-1 gap-8 md:gap-4 md:grid-cols-3'>
|
||||||
<div>
|
<div className='flex md:justify-center md:items-center'>
|
||||||
<div className='mb-4 flex items-center gap-2'>
|
<div>
|
||||||
<Fuel className='h-6 w-6 text-red-500' />
|
<div className='mb-4 flex items-center gap-2'>
|
||||||
<span className='text-xl font-bold'>{t('common.name')}</span>
|
<Fuel className='h-6 w-6 text-red-500' />
|
||||||
</div>
|
<span className='text-xl font-bold'>{t('common.name')}</span>
|
||||||
<p className='mb-4 text-gray-400'>{t('home.hero.description')}</p>
|
|
||||||
<div className='flex space-x-4'>
|
|
||||||
<a href='#' className='text-gray-400 hover:text-white'>
|
|
||||||
<svg
|
|
||||||
className='h-6 w-6'
|
|
||||||
fill='currentColor'
|
|
||||||
viewBox='0 0 24 24'
|
|
||||||
aria-hidden='true'
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule='evenodd'
|
|
||||||
d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z'
|
|
||||||
clipRule='evenodd'
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a href='#' className='text-gray-400 hover:text-white'>
|
|
||||||
<svg
|
|
||||||
className='h-6 w-6'
|
|
||||||
fill='currentColor'
|
|
||||||
viewBox='0 0 24 24'
|
|
||||||
aria-hidden='true'
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule='evenodd'
|
|
||||||
d='M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'
|
|
||||||
clipRule='evenodd'
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a href='#' className='text-gray-400 hover:text-white'>
|
|
||||||
<svg
|
|
||||||
className='h-6 w-6'
|
|
||||||
fill='currentColor'
|
|
||||||
viewBox='0 0 24 24'
|
|
||||||
aria-hidden='true'
|
|
||||||
>
|
|
||||||
<path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className='mb-4 text-lg font-semibold'>
|
|
||||||
{t('common.footer.contacts')}
|
|
||||||
</h3>
|
|
||||||
<div className='space-y-3'>
|
|
||||||
<div className='flex items-start'>
|
|
||||||
<MapPin className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
|
||||||
<p>{t('common.contacts.address')}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-start'>
|
<p className='mb-4 text-gray-400'>{t('home.hero.description')}</p>
|
||||||
<Phone className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
<div className='flex space-x-4'>
|
||||||
<p>{t('common.contacts.tel')}</p>
|
<a href='#' className='text-gray-400 hover:text-white'>
|
||||||
</div>
|
<svg
|
||||||
<div className='flex items-start'>
|
className='h-6 w-6'
|
||||||
<Mail className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
fill='currentColor'
|
||||||
<p>{t('common.contacts.email')}</p>
|
viewBox='0 0 24 24'
|
||||||
|
aria-hidden='true'
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule='evenodd'
|
||||||
|
d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z'
|
||||||
|
clipRule='evenodd'
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href='#' className='text-gray-400 hover:text-white'>
|
||||||
|
<svg
|
||||||
|
className='h-6 w-6'
|
||||||
|
fill='currentColor'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
aria-hidden='true'
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule='evenodd'
|
||||||
|
d='M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'
|
||||||
|
clipRule='evenodd'
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href='#' className='text-gray-400 hover:text-white'>
|
||||||
|
<svg
|
||||||
|
className='h-6 w-6'
|
||||||
|
fill='currentColor'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
aria-hidden='true'
|
||||||
|
>
|
||||||
|
<path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className='flex md:justify-center md:items-center'>
|
||||||
<h3 className='mb-4 text-lg font-semibold'>
|
<div>
|
||||||
{t('common.footer.navigation')}
|
<h3 className='mb-4 text-lg font-semibold'>
|
||||||
</h3>
|
{t('common.footer.contacts')}
|
||||||
<ul className='space-y-2'>
|
</h3>
|
||||||
<li>
|
<div className='space-y-3'>
|
||||||
<Link href='/' className='text-gray-400 hover:text-white'>
|
<div className='flex items-start'>
|
||||||
{t('common.navigation.home')}
|
<MapPin className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
||||||
</Link>
|
<p>{t('common.contacts.address')}</p>
|
||||||
</li>
|
</div>
|
||||||
<li>
|
<div className='flex items-start'>
|
||||||
<Link href='/about' className='text-gray-400 hover:text-white'>
|
<Phone className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
||||||
{t('common.navigation.about')}
|
<p>{t('common.contacts.tel')}</p>
|
||||||
</Link>
|
</div>
|
||||||
</li>
|
<div className='flex items-start'>
|
||||||
<li>
|
<Mail className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
||||||
<Link
|
<p>{t('common.contacts.email')}</p>
|
||||||
href='/clients/loyalty'
|
</div>
|
||||||
className='text-gray-400 hover:text-white'
|
</div>
|
||||||
>
|
</div>
|
||||||
{t('common.navigation.clients')}
|
</div>
|
||||||
</Link>
|
<div className='flex md:justify-center md:items-center'>
|
||||||
</li>
|
<div>
|
||||||
<li>
|
<h3 className='mb-4 text-lg font-semibold'>
|
||||||
<Link
|
{t('common.footer.navigation')}
|
||||||
href='/#stations'
|
</h3>
|
||||||
className='text-gray-400 hover:text-white'
|
<ul className='space-y-2'>
|
||||||
>
|
<li>
|
||||||
{t('common.navigation.stations')}
|
<Link href='/' className='text-gray-400 hover:text-white'>
|
||||||
</Link>
|
{t('common.navigation.home')}
|
||||||
</li>
|
</Link>
|
||||||
<li>
|
</li>
|
||||||
<Link
|
<li>
|
||||||
href='/#vacancies'
|
<Link href='/about' className='text-gray-400 hover:text-white'>
|
||||||
className='text-gray-400 hover:text-white'
|
{t('common.navigation.about')}
|
||||||
>
|
</Link>
|
||||||
{t('common.navigation.vacancies')}
|
</li>
|
||||||
</Link>
|
<li>
|
||||||
</li>
|
<Link
|
||||||
</ul>
|
href='/clients/loyalty'
|
||||||
|
className='text-gray-400 hover:text-white'
|
||||||
|
>
|
||||||
|
{t('common.navigation.clients')}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
href='/#stations'
|
||||||
|
className='text-gray-400 hover:text-white'
|
||||||
|
>
|
||||||
|
{t('common.navigation.stations')}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
href='/#vacancies'
|
||||||
|
className='text-gray-400 hover:text-white'
|
||||||
|
>
|
||||||
|
{t('common.navigation.vacancies')}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'>
|
<div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user