Merge pull request 'change: rendered all the text in json' (#6) from add-pages into dev
Reviewed-on: #6
This commit is contained in:
commit
26b714ecc7
@ -1,404 +1,5 @@
|
|||||||
import {
|
import AboutPage from "@/pages-templates/about";
|
||||||
Award,
|
|
||||||
Fuel,
|
|
||||||
History,
|
|
||||||
MapPin,
|
|
||||||
Star,
|
|
||||||
Target,
|
|
||||||
Users,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import Image from 'next/image';
|
|
||||||
|
|
||||||
import AnimatedCounter from '@/shared/components/animated-counter';
|
export default function About(){
|
||||||
import { Button } from '@/shared/shadcn-ui/button';
|
return <AboutPage/>
|
||||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
|
||||||
|
|
||||||
import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
|
|
||||||
import { StationGallery } from '@/widgets/about-page/station-gallery';
|
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
|
||||||
|
|
||||||
export const metadata = {
|
|
||||||
title: 'О нас | GasNetwork - Сеть заправок в Таджикистане',
|
|
||||||
description:
|
|
||||||
'Узнайте больше о нашей компании, истории и ценностях. Качественное топливо и отличный сервис.',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function AboutPage() {
|
|
||||||
return (
|
|
||||||
<div className='flex min-h-screen flex-col'>
|
|
||||||
<main className='flex-1'>
|
|
||||||
{/* Hero Section */}
|
|
||||||
<section className='relative'>
|
|
||||||
<div className='relative h-[400px] w-full overflow-hidden'>
|
|
||||||
<Image
|
|
||||||
src='/placeholder.svg?height=400&width=1920&text=Наша+История'
|
|
||||||
alt='О нашей компании'
|
|
||||||
width={1920}
|
|
||||||
height={400}
|
|
||||||
className='object-cover'
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='max-w-2xl space-y-4 text-white'>
|
|
||||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
|
||||||
О нашей компании
|
|
||||||
</h1>
|
|
||||||
<p className='text-lg text-gray-200'>
|
|
||||||
Узнайте больше о нашей истории, ценностях и миссии. Мы
|
|
||||||
стремимся предоставлять лучший сервис и качественное топливо
|
|
||||||
для наших клиентов.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Company Overview */}
|
|
||||||
<section className='py-16'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Лидер на рынке Таджикистана
|
|
||||||
</h2>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
GasNetwork - ведущая сеть автозаправочных станций в
|
|
||||||
Таджикистане, предоставляющая высококачественное топливо и
|
|
||||||
превосходный сервис. Наша компания была основана в 2008 году и
|
|
||||||
с тех пор стала символом надежности и качества в
|
|
||||||
энергетическом секторе страны.
|
|
||||||
</p>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
Мы гордимся тем, что предлагаем нашим клиентам только лучшее
|
|
||||||
топливо, соответствующее международным стандартам качества.
|
|
||||||
Наши заправочные станции оснащены современным оборудованием,
|
|
||||||
которое обеспечивает быстрое и безопасное обслуживание.
|
|
||||||
</p>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
Наша миссия - сделать поездки наших клиентов комфортными и
|
|
||||||
безопасными, предоставляя качественное топливо и отличный
|
|
||||||
сервис по всей стране.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className='mb-6 grid grid-cols-2 gap-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'>Качество</h3>
|
|
||||||
<p className='text-gray-600'>Топливо высшего стандарта</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'>Сервис</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Профессиональное обслуживание
|
|
||||||
</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'>Инновации</h3>
|
|
||||||
<p className='text-gray-600'>Современные технологии</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'>Доступность</h3>
|
|
||||||
<p className='text-gray-600'>Станции по всей стране</p>
|
|
||||||
</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='Главный офис GasNetwork'
|
|
||||||
fill
|
|
||||||
className='object-cover'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Stats Section */}
|
|
||||||
<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'>
|
|
||||||
GasNetwork в цифрах
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-white/80'>
|
|
||||||
Наши достижения и рост за годы работы на рынке Таджикистана
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
|
|
||||||
<div className='space-y-2'>
|
|
||||||
<h3 className='text-4xl font-bold'>
|
|
||||||
<AnimatedCounter end={25} suffix='+' />
|
|
||||||
</h3>
|
|
||||||
<p className='text-sm text-white/80'>Заправок по стране</p>
|
|
||||||
</div>
|
|
||||||
<div className='space-y-2'>
|
|
||||||
<h3 className='text-4xl font-bold'>
|
|
||||||
<AnimatedCounter end={15} />
|
|
||||||
</h3>
|
|
||||||
<p className='text-sm text-white/80'>Лет на рынке</p>
|
|
||||||
</div>
|
|
||||||
<div className='space-y-2'>
|
|
||||||
<h3 className='text-4xl font-bold'>
|
|
||||||
<AnimatedCounter end={150} suffix='+' />
|
|
||||||
</h3>
|
|
||||||
<p className='text-sm text-white/80'>Сотрудников</p>
|
|
||||||
</div>
|
|
||||||
<div className='space-y-2'>
|
|
||||||
<h3 className='text-4xl font-bold'>
|
|
||||||
<AnimatedCounter end={1000000} suffix='+' />
|
|
||||||
</h3>
|
|
||||||
<p className='text-sm text-white/80'>Клиентов в год</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Our History */}
|
|
||||||
<section className='py-16'>
|
|
||||||
<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'>
|
|
||||||
<History className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Наша история
|
|
||||||
</h2>
|
|
||||||
<p className='max-w-2xl text-gray-600'>
|
|
||||||
История развития нашей компании от небольшой сети до лидера
|
|
||||||
рынка
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CompanyTimeline />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Our Stations */}
|
|
||||||
<section className='bg-gray-50 py-16'>
|
|
||||||
<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'>
|
|
||||||
<MapPin className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Наши заправочные станции
|
|
||||||
</h2>
|
|
||||||
<p className='max-w-2xl text-gray-600'>
|
|
||||||
Современные заправочные станции, оснащенные по последнему слову
|
|
||||||
техники
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<StationGallery />
|
|
||||||
|
|
||||||
<div className='mt-12 text-center'>
|
|
||||||
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
|
||||||
Наши заправочные станции расположены в стратегически важных
|
|
||||||
точках по всему Таджикистану, обеспечивая удобный доступ для
|
|
||||||
всех наших клиентов.
|
|
||||||
</p>
|
|
||||||
<Button className='bg-red-600 hover:bg-red-700'>
|
|
||||||
Найти ближайшую заправку <MapPin className='ml-2 h-4 w-4' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Our Values */}
|
|
||||||
<section className='py-16'>
|
|
||||||
<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'>
|
|
||||||
<Target className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Наши ценности
|
|
||||||
</h2>
|
|
||||||
<p className='max-w-2xl text-gray-600'>
|
|
||||||
Принципы, которыми мы руководствуемся в нашей работе
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-8 md:grid-cols-3'>
|
|
||||||
<Card 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'>Качество</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Мы предлагаем только высококачественное топливо,
|
|
||||||
соответствующее международным стандартам. Регулярные
|
|
||||||
проверки и контроль качества гарантируют, что наши клиенты
|
|
||||||
получают лучшее.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card 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'>
|
|
||||||
<Users className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>
|
|
||||||
Клиентоориентированность
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Наши клиенты - наш главный приоритет. Мы стремимся
|
|
||||||
предоставить лучший сервис, удобные условия и приятную
|
|
||||||
атмосферу на каждой нашей заправке.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card 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'>
|
|
||||||
<Award className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>Профессионализм</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Наши сотрудники - профессионалы своего дела. Мы постоянно
|
|
||||||
инвестируем в их обучение и развитие, чтобы обеспечить
|
|
||||||
высокий уровень обслуживания.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Our Team */}
|
|
||||||
<section className='bg-gray-50 py-16'>
|
|
||||||
<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'>
|
|
||||||
<Users className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Наша команда
|
|
||||||
</h2>
|
|
||||||
<p className='max-w-2xl text-gray-600'>
|
|
||||||
Познакомьтесь с профессионалами, которые делают GasNetwork
|
|
||||||
лучшей сетью заправок в Таджикистане
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
|
|
||||||
{[
|
|
||||||
{ name: 'Алишер Рахмонов', position: 'Генеральный директор' },
|
|
||||||
{ name: 'Фарида Каримова', position: 'Финансовый директор' },
|
|
||||||
{ name: 'Рустам Назаров', position: 'Технический директор' },
|
|
||||||
{ name: 'Зарина Шарипова', position: 'Директор по маркетингу' },
|
|
||||||
].map((person, 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=${person.name}`}
|
|
||||||
alt={person.name}
|
|
||||||
fill
|
|
||||||
className='object-cover'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='p-4 text-center'>
|
|
||||||
<h3 className='text-lg font-bold'>{person.name}</h3>
|
|
||||||
<p className='text-gray-600'>{person.position}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Testimonials */}
|
|
||||||
<section className='py-16'>
|
|
||||||
<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'>
|
|
||||||
Отзывы клиентов
|
|
||||||
</h2>
|
|
||||||
<p className='max-w-2xl text-gray-600'>
|
|
||||||
Что говорят о нас наши клиенты
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-8 md:grid-cols-3'>
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
name: 'Фархад К.',
|
|
||||||
text: 'Я всегда заправляюсь только на GasNetwork. Качество топлива на высоте, а обслуживание всегда приветливое и быстрое.',
|
|
||||||
rating: 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Нигина М.',
|
|
||||||
text: 'Очень удобно, что заправки расположены по всему городу. Всегда чисто, есть кафе и магазин. Рекомендую!',
|
|
||||||
rating: 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Джамшед Р.',
|
|
||||||
text: 'Пользуюсь картой лояльности GasNetwork уже 3 года. Накопил много бонусов и получил немало приятных подарков. Отличный сервис!',
|
|
||||||
rating: 4,
|
|
||||||
},
|
|
||||||
].map((testimonial, 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 < testimonial.rating ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<p className='mb-4 text-gray-600 italic'>
|
|
||||||
"{testimonial.text}"
|
|
||||||
</p>
|
|
||||||
<p className='font-semibold'>{testimonial.name}</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<CtaSection />
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { CertificatesPage } from '@/pages-templates/certificates';
|
import { CertificatesPage } from '@/pages-templates/clients/certificates';
|
||||||
|
|
||||||
export default function Certificates() {
|
export default function Certificates() {
|
||||||
return <CertificatesPage />;
|
return <CertificatesPage />;
|
||||||
|
|||||||
@ -1,285 +1,5 @@
|
|||||||
import { Check, Percent } from 'lucide-react';
|
import { LoyaltyPage } from '@/pages-templates/clients/loyalty';
|
||||||
import Image from 'next/image';
|
|
||||||
|
|
||||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
export default function Loyalty() {
|
||||||
|
return <LoyaltyPage />;
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
|
||||||
|
|
||||||
export const metadata = {
|
|
||||||
title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане',
|
|
||||||
description:
|
|
||||||
'Программа лояльности GasNetwork: накапливайте баллы и получайте скидки на топливо и услуги.',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function LoyaltyPage() {
|
|
||||||
return (
|
|
||||||
<div className='flex min-h-screen flex-col'>
|
|
||||||
<main className='flex-1'>
|
|
||||||
{/* Hero Section */}
|
|
||||||
<section className='relative'>
|
|
||||||
<div className='relative h-[400px] w-full overflow-hidden'>
|
|
||||||
<Image
|
|
||||||
src='/placeholder.svg?height=400&width=1920&text=Программа+лояльности'
|
|
||||||
alt='Программа лояльности'
|
|
||||||
width={1920}
|
|
||||||
height={400}
|
|
||||||
className='object-cover'
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='max-w-2xl space-y-4 text-white'>
|
|
||||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
|
||||||
Программа лояльности
|
|
||||||
</h1>
|
|
||||||
<p className='text-lg text-gray-200'>
|
|
||||||
Накапливайте баллы и получайте скидки на топливо и услуги
|
|
||||||
нашей сети
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Program Overview */}
|
|
||||||
<section className='py-16'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
|
||||||
<div>
|
|
||||||
<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'>
|
|
||||||
О программе лояльности
|
|
||||||
</h2>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
Программа лояльности GasNetwork — это возможность получать
|
|
||||||
баллы за каждую покупку топлива и услуг на наших заправочных
|
|
||||||
станциях. Накопленные баллы можно обменять на скидки, подарки
|
|
||||||
или дополнительные услуги.
|
|
||||||
</p>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
Участие в программе абсолютно бесплатное. Вам нужно только
|
|
||||||
получить карту лояльности в любой нашей заправочной станции
|
|
||||||
или зарегистрироваться в мобильном приложении.
|
|
||||||
</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'>1 литр = 1 балл</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
За каждый литр топлива вы получаете 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'>
|
|
||||||
Дополнительные баллы
|
|
||||||
</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
За покупки в магазине и кафе на заправке
|
|
||||||
</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'>Специальные акции</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Удвоенные и утроенные баллы в праздничные дни
|
|
||||||
</p>
|
|
||||||
</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 */}
|
|
||||||
<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'>
|
|
||||||
Как это работает
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
|
||||||
Простые шаги для участия в программе лояльности GasNetwork
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-8 md:grid-cols-4'>
|
|
||||||
<div className='text-center'>
|
|
||||||
<div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
|
|
||||||
1
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>Получите карту</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Получите карту лояльности на любой заправке GasNetwork или
|
|
||||||
зарегистрируйтесь в мобильном приложении
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<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'>
|
|
||||||
2
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>Заправляйтесь</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Используйте карту при каждой заправке и покупке в магазинах на
|
|
||||||
наших АЗС
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<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'>
|
|
||||||
3
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>Накапливайте баллы</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Получайте баллы за каждую покупку и следите за их накоплением
|
|
||||||
в приложении
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<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'>
|
|
||||||
4
|
|
||||||
</div>
|
|
||||||
<h3 className='mb-2 text-xl font-bold'>Получайте выгоду</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Обменивайте накопленные баллы на скидки, подарки или
|
|
||||||
дополнительные услуги
|
|
||||||
</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'>
|
|
||||||
Уровни лояльности
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
|
||||||
Чем больше вы заправляетесь, тем больше преимуществ получаете
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-8 md:grid-cols-3'>
|
|
||||||
<Card className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'>
|
|
||||||
<CardContent className='p-6'>
|
|
||||||
<h3 className='mb-4 text-center text-2xl font-bold'>
|
|
||||||
Стандарт
|
|
||||||
</h3>
|
|
||||||
<div className='mb-6 text-center'>
|
|
||||||
<span className='text-4xl font-bold'>1%</span>
|
|
||||||
<p className='text-sm text-gray-600'>возврат баллами</p>
|
|
||||||
</div>
|
|
||||||
<ul className='space-y-2'>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>1 балл за каждый литр топлива</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>Участие в акциях</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>Доступ к мобильному приложению</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'>
|
|
||||||
Золотой
|
|
||||||
</h3>
|
|
||||||
<div className='mb-6 text-center'>
|
|
||||||
<span className='text-4xl font-bold'>2%</span>
|
|
||||||
<p className='text-sm text-gray-600'>возврат баллами</p>
|
|
||||||
</div>
|
|
||||||
<ul className='space-y-2'>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>2 балла за каждый литр топлива</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>Скидка 5% в кафе на заправках</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>Приоритетное обслуживание</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>Эксклюзивные акции</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'>
|
|
||||||
Платиновый
|
|
||||||
</h3>
|
|
||||||
<div className='mb-6 text-center'>
|
|
||||||
<span className='text-4xl font-bold'>3%</span>
|
|
||||||
<p className='text-sm text-gray-600'>возврат баллами</p>
|
|
||||||
</div>
|
|
||||||
<ul className='space-y-2'>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>3 балла за каждый литр топлива</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>Скидка 10% в кафе на заправках</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>Бесплатная мойка раз в месяц</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>Персональный менеджер</span>
|
|
||||||
</li>
|
|
||||||
<li className='flex items-center'>
|
|
||||||
<Check className='mr-2 h-5 w-5 text-green-500' />
|
|
||||||
<span>VIP-обслуживание</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<CtaSection />
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,50 +1,5 @@
|
|||||||
import Image from 'next/image';
|
import { ClientsPage } from "@/pages-templates/clients"
|
||||||
|
|
||||||
import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
|
export default function Clients() {
|
||||||
import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
|
return <ClientsPage />;
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
|
||||||
|
|
||||||
export const metadata = {
|
|
||||||
title: 'Клиентам | GasNetwork - Сеть заправок в Таджикистане',
|
|
||||||
description:
|
|
||||||
'Информация для клиентов: программа лояльности, топливные карты, сертификаты и способы оплаты.',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function ClientsPage() {
|
|
||||||
return (
|
|
||||||
<div className='flex min-h-screen flex-col'>
|
|
||||||
<main className='flex-1'>
|
|
||||||
{/* Hero Section */}
|
|
||||||
<section className='relative'>
|
|
||||||
<div className='relative h-[400px] w-full overflow-hidden'>
|
|
||||||
<Image
|
|
||||||
src='/placeholder.svg?height=400&width=1920&text=Для+наших+клиентов'
|
|
||||||
alt='Для наших клиентов'
|
|
||||||
width={1920}
|
|
||||||
height={400}
|
|
||||||
className='object-cover'
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='max-w-2xl space-y-4 text-white'>
|
|
||||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
|
||||||
Для наших клиентов
|
|
||||||
</h1>
|
|
||||||
<p className='text-lg text-gray-200'>
|
|
||||||
Специальные предложения, программы лояльности и удобные
|
|
||||||
способы оплаты для наших клиентов
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<ServicesOverviewSection />
|
|
||||||
<BenefitsSection />
|
|
||||||
<CtaSection />
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
@ -19,7 +19,7 @@ import {
|
|||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
return (
|
return (
|
||||||
<div className='flex min-h-screen flex-col'>
|
<div className='flex min-h-screen flex-col items-center justify-center'>
|
||||||
<main className='flex-1'>
|
<main className='flex-1'>
|
||||||
<div className='container max-w-6xl py-16'>
|
<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'>
|
||||||
|
|||||||
325
src/pages-templates/about/index.tsx
Normal file
325
src/pages-templates/about/index.tsx
Normal file
@ -0,0 +1,325 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Award,
|
||||||
|
Fuel,
|
||||||
|
History,
|
||||||
|
MapPin,
|
||||||
|
Star,
|
||||||
|
Target,
|
||||||
|
Users,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
// import { useTranslation } from 'next-i18next';
|
||||||
|
|
||||||
|
import AnimatedCounter from '@/shared/components/animated-counter';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||||
|
|
||||||
|
import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
|
||||||
|
import { StationGallery } from '@/widgets/about-page/station-gallery';
|
||||||
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: 'about.metadata.title',
|
||||||
|
description: 'about.metadata.description',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
const { t } = useLanguage();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex min-h-screen flex-col'>
|
||||||
|
<main className='flex-1'>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className='relative'>
|
||||||
|
<div className='relative h-[400px] w-full overflow-hidden'>
|
||||||
|
<Image
|
||||||
|
src='/placeholder.svg?height=400&width=1920&text=Наша+История'
|
||||||
|
alt={t('about.hero.imageAlt')}
|
||||||
|
width={1920}
|
||||||
|
height={400}
|
||||||
|
className='object-cover'
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='max-w-2xl space-y-4 text-white'>
|
||||||
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||||
|
{t('about.hero.title')}
|
||||||
|
</h1>
|
||||||
|
<p className='text-lg text-gray-200'>
|
||||||
|
{t('about.hero.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Company Overview */}
|
||||||
|
<section className='py-16'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('about.overview.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='mb-6 text-gray-600'>
|
||||||
|
{t('about.overview.description1')}
|
||||||
|
</p>
|
||||||
|
<p className='mb-6 text-gray-600'>
|
||||||
|
{t('about.overview.description2')}
|
||||||
|
</p>
|
||||||
|
<p className='mb-6 text-gray-600'>
|
||||||
|
{t('about.overview.description3')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className='mb-6 grid grid-cols-2 gap-4'>
|
||||||
|
{[0, 1, 2, 3].map((index) => (
|
||||||
|
<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'>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
<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('about.stats.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='mx-auto max-w-2xl text-white/80'>
|
||||||
|
{t('about.stats.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
|
||||||
|
{[0, 1, 2, 3].map((index) => (
|
||||||
|
<div key={index} className='space-y-2'>
|
||||||
|
<h3 className='text-4xl font-bold'>
|
||||||
|
<AnimatedCounter
|
||||||
|
end={Number(t(`about.stats.items.${index}.value`))}
|
||||||
|
suffix={
|
||||||
|
t(`about.stats.items.${index}.suffix`) ===
|
||||||
|
`about.stats.items.${index}.suffix`
|
||||||
|
? ''
|
||||||
|
: t(`about.stats.items.${index}.suffix`) || ''
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</h3>
|
||||||
|
<p className='text-sm text-white/80'>
|
||||||
|
{t(`about.stats.items.${index}.label`)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Our History */}
|
||||||
|
<section className='py-16'>
|
||||||
|
<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'>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<CompanyTimeline />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Our Stations */}
|
||||||
|
<section className='bg-gray-50 py-16'>
|
||||||
|
<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'>
|
||||||
|
<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 />
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Our Values */}
|
||||||
|
<section className='py-16'>
|
||||||
|
<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'>
|
||||||
|
<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 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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Our Team */}
|
||||||
|
<section className='bg-gray-50 py-16'>
|
||||||
|
<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'>
|
||||||
|
<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 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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Testimonials */}
|
||||||
|
<section className='py-16'>
|
||||||
|
<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'>
|
||||||
|
{[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'>
|
||||||
|
{Array(5)
|
||||||
|
.fill(0)
|
||||||
|
.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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<CtaSection />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
55
src/pages-templates/clients/index.tsx
Normal file
55
src/pages-templates/clients/index.tsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
|
||||||
|
import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
|
||||||
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: 'Клиентам | GasNetwork - Сеть заправок в Таджикистане',
|
||||||
|
description:
|
||||||
|
'Информация для клиентов: программа лояльности, топливные карты, сертификаты и способы оплаты.',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ClientsPage() {
|
||||||
|
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex min-h-screen flex-col'>
|
||||||
|
<main className='flex-1'>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className='relative'>
|
||||||
|
<div className='relative h-[400px] w-full overflow-hidden'>
|
||||||
|
<Image
|
||||||
|
src='/placeholder.svg?height=400&width=1920&text=Для+наших+клиентов'
|
||||||
|
alt='Для наших клиентов'
|
||||||
|
width={1920}
|
||||||
|
height={400}
|
||||||
|
className='object-cover'
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='max-w-2xl space-y-4 text-white'>
|
||||||
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||||
|
{t('clients.title')}
|
||||||
|
</h1>
|
||||||
|
<p className='text-lg text-gray-200'>
|
||||||
|
{t('clients.description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<ServicesOverviewSection />
|
||||||
|
<BenefitsSection />
|
||||||
|
<CtaSection />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
328
src/pages-templates/clients/loyalty/index.tsx
Normal file
328
src/pages-templates/clients/loyalty/index.tsx
Normal file
@ -0,0 +1,328 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Check, Percent } from 'lucide-react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||||
|
|
||||||
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане',
|
||||||
|
description:
|
||||||
|
'Программа лояльности GasNetwork: накапливайте баллы и получайте скидки на топливо и услуги.',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function LoyaltyPage() {
|
||||||
|
const { t } = useLanguage();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex min-h-screen flex-col'>
|
||||||
|
<main className='flex-1'>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className='relative'>
|
||||||
|
<div className='relative h-[400px] w-full overflow-hidden'>
|
||||||
|
<Image
|
||||||
|
src='/placeholder.svg?height=400&width=1920&text=Программа+лояльности'
|
||||||
|
alt='Программа лояльности'
|
||||||
|
width={1920}
|
||||||
|
height={400}
|
||||||
|
className='object-cover'
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='max-w-2xl space-y-4 text-white'>
|
||||||
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||||
|
{t('clients.loyalty.title')}
|
||||||
|
</h1>
|
||||||
|
<p className='text-lg text-gray-200'>
|
||||||
|
{t('clients.loyalty.description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Program Overview */}
|
||||||
|
<section className='py-16'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
|
<div>
|
||||||
|
<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 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 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 */}
|
||||||
|
<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='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 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'>
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<h3 className='mb-2 text-xl font-bold'>
|
||||||
|
{t('clients.loyalty.works.stage-2')}
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
{t('clients.loyalty.works.stage.description-2')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<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'>
|
||||||
|
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 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid gap-8 md:grid-cols-3'>
|
||||||
|
<Card className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'>
|
||||||
|
<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-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-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-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-4.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 />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
|
|||||||
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 Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import { useLanguage } from '../language';
|
||||||
|
|
||||||
const promotions = [
|
const promotions = [
|
||||||
{
|
{
|
||||||
@ -44,6 +45,8 @@ export default function PromotionSlider() {
|
|||||||
const [currentIndex, setCurrentIndex] = useState(0);
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
const [visibleItems, setVisibleItems] = useState(3);
|
const [visibleItems, setVisibleItems] = useState(3);
|
||||||
|
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
if (window.innerWidth < 640) {
|
if (window.innerWidth < 640) {
|
||||||
@ -113,7 +116,7 @@ export default function PromotionSlider() {
|
|||||||
size='sm'
|
size='sm'
|
||||||
className='border-red-600 text-red-600 hover:bg-red-50'
|
className='border-red-600 text-red-600 hover:bg-red-50'
|
||||||
>
|
>
|
||||||
Подробнее
|
{t('common.buttons.readMore')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,4 +1,8 @@
|
|||||||
{
|
{
|
||||||
|
"common.contacts.address": "ул. Рудаки 137, Душанбе, Таджикистан",
|
||||||
|
"common.contacts.tel": "+992 (37) 223-45-67",
|
||||||
|
"common.contacts.email": "info@gasnetwork.tj",
|
||||||
|
|
||||||
"common.buttons.readMore": "Подробнее",
|
"common.buttons.readMore": "Подробнее",
|
||||||
"common.buttons.findStation": "Найти заправку",
|
"common.buttons.findStation": "Найти заправку",
|
||||||
"common.buttons.learnMore": "Узнать больше",
|
"common.buttons.learnMore": "Узнать больше",
|
||||||
@ -35,6 +39,11 @@
|
|||||||
"home.hero.title": "Сеть современных заправок в Таджикистане",
|
"home.hero.title": "Сеть современных заправок в Таджикистане",
|
||||||
"home.hero.description": "Качественное топливо, удобное расположение и отличный сервис для наших клиентов",
|
"home.hero.description": "Качественное топливо, удобное расположение и отличный сервис для наших клиентов",
|
||||||
|
|
||||||
|
"home.stats.stations": "Заправок по стране",
|
||||||
|
"home.stats.daily": "Клиентов ежедневно",
|
||||||
|
"home.stats.years": "Лет на рынке",
|
||||||
|
"home.stats.mode": "Работаем круглосуточно",
|
||||||
|
|
||||||
"home.about.title": "О нашей компании",
|
"home.about.title": "О нашей компании",
|
||||||
"home.about.description1": "Наша сеть заправок является одной из ведущих в Таджикистане. Мы предоставляем качественное топливо и высокий уровень обслуживания для наших клиентов уже более 15 лет.",
|
"home.about.description1": "Наша сеть заправок является одной из ведущих в Таджикистане. Мы предоставляем качественное топливо и высокий уровень обслуживания для наших клиентов уже более 15 лет.",
|
||||||
"home.about.description2": "Мы постоянно развиваемся, открывая новые станции и улучшая сервис на существующих. Наша цель - сделать заправку автомобиля максимально удобной и быстрой для каждого клиента.",
|
"home.about.description2": "Мы постоянно развиваемся, открывая новые станции и улучшая сервис на существующих. Наша цель - сделать заправку автомобиля максимально удобной и быстрой для каждого клиента.",
|
||||||
@ -45,6 +54,80 @@
|
|||||||
"home.about.features.staff.title": "Профессиональный персонал",
|
"home.about.features.staff.title": "Профессиональный персонал",
|
||||||
"home.about.features.staff.description": "Наши сотрудники - профессионалы своего дела",
|
"home.about.features.staff.description": "Наши сотрудники - профессионалы своего дела",
|
||||||
|
|
||||||
|
"about.hero.imageAlt": "О нашей компании",
|
||||||
|
"about.hero.title": "О нашей компании",
|
||||||
|
"about.hero.subtitle": "Узнайте больше о нашей истории, ценностях и миссии. Мы стремимся предоставлять лучший сервис и качественное топливо для наших клиентов.",
|
||||||
|
|
||||||
|
"about.overview.title": "Лидер на рынке Таджикистана",
|
||||||
|
"about.overview.description1": "GasNetwork - ведущая сеть автозаправочных станций в Таджикистане, предоставляющая высококачественное топливо и превосходный сервис. Наша компания была основана в 2008 году и с тех пор стала символом надежности и качества в энергетическом секторе страны.",
|
||||||
|
"about.overview.description2": "Мы гордимся тем, что предлагаем нашим клиентам только лучшее топливо, соответствующее международным стандартам качества. Наши заправочные станции оснащены современным оборудованием, которое обеспечивает быстрое и безопасное обслуживание.",
|
||||||
|
"about.overview.description3": "Наша миссия - сделать поездки наших клиентов комфортными и безопасными, предоставляя качественное топливо и отличный сервис по всей стране.",
|
||||||
|
"about.overview.imageAlt": "Главный офис GasNetwork",
|
||||||
|
|
||||||
|
"about.overview.benefits.0.title": "Качество",
|
||||||
|
"about.overview.benefits.0.description": "Топливо высшего стандарта",
|
||||||
|
"about.overview.benefits.1.title": "Сервис",
|
||||||
|
"about.overview.benefits.1.description": "Профессиональное обслуживание",
|
||||||
|
"about.overview.benefits.2.title": "Инновации",
|
||||||
|
"about.overview.benefits.2.description": "Современные технологии",
|
||||||
|
"about.overview.benefits.3.title": "Доступность",
|
||||||
|
"about.overview.benefits.3.description": "Станции по всей стране",
|
||||||
|
|
||||||
|
"about.stats.title": "GasNetwork в цифрах",
|
||||||
|
"about.stats.subtitle": "Наши достижения и рост за годы работы на рынке Таджикистана",
|
||||||
|
|
||||||
|
"about.stats.items.0.value": "25",
|
||||||
|
"about.stats.items.0.suffix": "+",
|
||||||
|
"about.stats.items.0.label": "Заправок по стране",
|
||||||
|
"about.stats.items.1.value": "15",
|
||||||
|
"about.stats.items.1.label": "Лет на рынке",
|
||||||
|
"about.stats.items.2.value": "150",
|
||||||
|
"about.stats.items.2.suffix": "+",
|
||||||
|
"about.stats.items.2.label": "Сотрудников",
|
||||||
|
"about.stats.items.3.value": "1000000",
|
||||||
|
"about.stats.items.3.suffix": "+",
|
||||||
|
"about.stats.items.3.label": "Клиентов в год",
|
||||||
|
|
||||||
|
"about.history.title": "Наша история",
|
||||||
|
"about.history.subtitle": "История развития нашей компании от небольшой сети до лидера рынка",
|
||||||
|
|
||||||
|
"about.stations.title": "Наши заправочные станции",
|
||||||
|
"about.stations.subtitle": "Современные заправочные станции, оснащенные по последнему слову техники",
|
||||||
|
"about.stations.description": "Наши заправочные станции расположены в стратегически важных точках по всему Таджикистану, обеспечивая удобный доступ для всех наших клиентов.",
|
||||||
|
"about.stations.buttonText": "Найти ближайшую заправку",
|
||||||
|
|
||||||
|
"about.values.title": "Наши ценности",
|
||||||
|
"about.values.subtitle": "Принципы, которыми мы руководствуемся в нашей работе",
|
||||||
|
"about.values.items.0.title": "Качество",
|
||||||
|
"about.values.items.0.description": "Мы предлагаем только высококачественное топливо, соответствующее международным стандартам. Регулярные проверки и контроль качества гарантируют, что наши клиенты получают лучшее.",
|
||||||
|
"about.values.items.1.title": "Клиентоориентированность",
|
||||||
|
"about.values.items.1.description": "Наши клиенты - наш главный приоритет. Мы стремимся предоставить лучший сервис, удобные условия и приятную атмосферу на каждой нашей заправке.",
|
||||||
|
"about.values.items.2.title": "Профессионализм",
|
||||||
|
"about.values.items.2.description": "Наши сотрудники - профессионалы своего дела. Мы постоянно инвестируем в их обучение и развитие, чтобы обеспечить высокий уровень обслуживания.",
|
||||||
|
|
||||||
|
"about.team.title": "Наша команда",
|
||||||
|
"about.team.subtitle": "Познакомьтесь с профессионалами, которые делают GasNetwork лучшей сетью заправок в Таджикистане",
|
||||||
|
"about.team.members.0.name": "Алишер Рахмонов",
|
||||||
|
"about.team.members.0.position": "Генеральный директор",
|
||||||
|
"about.team.members.1.name": "Фарида Каримова",
|
||||||
|
"about.team.members.1.position": "Финансовый директор",
|
||||||
|
"about.team.members.2.name": "Рустам Назаров",
|
||||||
|
"about.team.members.2.position": "Технический директор",
|
||||||
|
"about.team.members.3.name": "Зарина Шарипова",
|
||||||
|
"about.team.members.3.position": "Директор по маркетингу",
|
||||||
|
|
||||||
|
"about.testimonials.title": "Отзывы клиентов",
|
||||||
|
"about.testimonials.subtitle": "Что говорят о нас наши клиенты",
|
||||||
|
"about.testimonials.items.0.name": "Фархад К.",
|
||||||
|
"about.testimonials.items.0.text": "Я всегда заправляюсь только на GasNetwork. Качество топлива на высоте, а обслуживание всегда приветливое и быстрое.",
|
||||||
|
"about.testimonials.items.0.rating": "5",
|
||||||
|
"about.testimonials.items.1.name": "Нигина М.",
|
||||||
|
"about.testimonials.items.1.text": "Очень удобно, что заправки расположены по всему городу. Всегда чисто, есть кафе и магазин. Рекомендую!",
|
||||||
|
"about.testimonials.items.1.rating": "5",
|
||||||
|
"about.testimonials.items.2.name": "Джамшед Р.",
|
||||||
|
"about.testimonials.items.2.text": "Пользуюсь картой лояльности GasNetwork уже 3 года. Накопил много бонусов и получил немало приятных подарков. Отличный сервис!",
|
||||||
|
"about.testimonials.items.2.rating": "4",
|
||||||
|
|
||||||
"home.stations.title": "Наши заправки",
|
"home.stations.title": "Наши заправки",
|
||||||
"home.stations.description": "Найдите ближайшую к вам заправку нашей сети. Мы расположены в удобных местах по всему Таджикистану.",
|
"home.stations.description": "Найдите ближайшую к вам заправку нашей сети. Мы расположены в удобных местах по всему Таджикистану.",
|
||||||
|
|
||||||
@ -78,6 +161,60 @@
|
|||||||
"home.cta.title": "Присоединяйтесь к нам",
|
"home.cta.title": "Присоединяйтесь к нам",
|
||||||
"home.cta.description": "Станьте частью нашей сети. Получайте специальные предложения, бонусы и скидки.",
|
"home.cta.description": "Станьте частью нашей сети. Получайте специальные предложения, бонусы и скидки.",
|
||||||
|
|
||||||
|
"clients.title": "Для наших клиентов",
|
||||||
|
"clients.description": "Специальные предложения, программы лояльности и удобные способы оплаты для наших клиентов",
|
||||||
|
"clients.services": "Наши услуги для клиентов",
|
||||||
|
"clients.services.description": "Мы стремимся сделать обслуживание на наших заправках максимально удобным и выгодным для вас",
|
||||||
|
"clients.loyalty.title": "Программа лояльности",
|
||||||
|
"clients.loyalty.description": "Накапливайте баллы и получайте скидки на топливо и услуги нашей сети",
|
||||||
|
|
||||||
|
"clients.loyalty.programm.about": "О программе лояльности",
|
||||||
|
"clients.loyalty.programm.about-description": "Программа лояльности GasNetwork — это возможность получать баллы за каждую покупку топлива и услуг на наших заправочных станциях. Накопленные баллы можно обменять на скидки, подарки или дополнительные услуги.",
|
||||||
|
"clients.loyalty.programm.about-description-2": "Участие в программе абсолютно бесплатное. Вам нужно только получить карту лояльности в любой нашей заправочной станции или зарегистрироваться в мобильном приложении.",
|
||||||
|
"clients.loyalty.programm.conditions-1": "1 литр = 1 балл",
|
||||||
|
"clients.loyalty.programm.conditions.description-1": "За каждый литр топлива вы получаете 1 балл",
|
||||||
|
"clients.loyalty.programm.conditions-2": "Дополнительные баллы",
|
||||||
|
"clients.loyalty.programm.conditions.description-2": "За покупки в магазине и кафе на заправке",
|
||||||
|
"clients.loyalty.programm.conditions-3": "Специальные акции",
|
||||||
|
"clients.loyalty.programm.conditions.description-3": "Удвоенные и утроенные баллы в праздничные дни",
|
||||||
|
|
||||||
|
"clients.loyalty.works.title": "Как это работает",
|
||||||
|
"clients.loyalty.works.description": "Простые шаги для участия в программе лояльности GasNetwork",
|
||||||
|
|
||||||
|
"clients.loyalty.works.stage-1": "Получите карту",
|
||||||
|
"clients.loyalty.works.stage.description-1": "Получите карту лояльности на любой заправке GasNetwork или зарегистрируйтесь в мобильном приложении",
|
||||||
|
"clients.loyalty.works.stage-2": "Заправляйтесь",
|
||||||
|
"clients.loyalty.works.stage.description-2": "Используйте карту при каждой заправке и покупке в магазинах на наших АЗС",
|
||||||
|
"clients.loyalty.works.stage-3": "Накапливайте баллы",
|
||||||
|
"clients.loyalty.works.stage.description-3": "Получайте баллы за каждую покупку и следите за их накоплением в приложении",
|
||||||
|
"clients.loyalty.works.stage-4": "Получайте выгоду",
|
||||||
|
"clients.loyalty.works.stage.description-4": "Обменивайте накопленные баллы на скидки, подарки или дополнительные услуги",
|
||||||
|
|
||||||
|
"clients.loyalty.works.levels.title": "Уровни лояльности",
|
||||||
|
"clients.loyalty.works.levels.description": "Чем больше вы заправляетесь, тем больше преимуществ получаете",
|
||||||
|
"clients.loyalty.works.levels.card.mark": "возврат баллами",
|
||||||
|
|
||||||
|
"clients.loyalty.works.levels.card-1.title": "Стандарт",
|
||||||
|
"clients.loyalty.works.levels.card-1.percent": "1%",
|
||||||
|
"clients.loyalty.works.levels.card-1.bonus-1": "1 балл за каждый литр топлива",
|
||||||
|
"clients.loyalty.works.levels.card-1.bonus-2": "Участие в акциях",
|
||||||
|
"clients.loyalty.works.levels.card-1.bonus-3": "Доступ к мобильному приложению",
|
||||||
|
|
||||||
|
"clients.loyalty.works.levels.card-2.title": "Золотой",
|
||||||
|
"clients.loyalty.works.levels.card-2.percent": "2%",
|
||||||
|
"clients.loyalty.works.levels.card-2.bonus-1": "2 балла за каждый литр топлива",
|
||||||
|
"clients.loyalty.works.levels.card-2.bonus-2": "Скидка 5% в кафе на заправках",
|
||||||
|
"clients.loyalty.works.levels.card-2.bonus-3": "Приоритетное обслуживание",
|
||||||
|
"clients.loyalty.works.levels.card-2.bonus-4": "Эксклюзивные акции",
|
||||||
|
|
||||||
|
"clients.loyalty.works.levels.card-3.title": "Платиновый",
|
||||||
|
"clients.loyalty.works.levels.card-3.percent": "3%",
|
||||||
|
"clients.loyalty.works.levels.card-3.bonus-1": "3 балла за каждый литр топлива",
|
||||||
|
"clients.loyalty.works.levels.card-3.bonus-2": "Скидка 10% в кафе на заправках",
|
||||||
|
"clients.loyalty.works.levels.card-3.bonus-3": "Бесплатная мойка раз в месяц",
|
||||||
|
"clients.loyalty.works.levels.card-3.bonus-4": "Персональный менеджер",
|
||||||
|
"clients.loyalty.works.levels.card-3.bonus-5": "VIP-обслуживание",
|
||||||
|
|
||||||
"certificates.title": "Наши сертификаты",
|
"certificates.title": "Наши сертификаты",
|
||||||
"certificates.description": "GasNetwork придерживается высоких стандартов качества и безопасности. Наши сертификаты подтверждают соответствие нашей продукции и услуг международным и национальным стандартам.",
|
"certificates.description": "GasNetwork придерживается высоких стандартов качества и безопасности. Наши сертификаты подтверждают соответствие нашей продукции и услуг международным и национальным стандартам.",
|
||||||
"certificates.issueDate": "Дата выдачи",
|
"certificates.issueDate": "Дата выдачи",
|
||||||
|
|||||||
@ -70,7 +70,7 @@ const Features = () => {
|
|||||||
<div className='space-y-4'>
|
<div className='space-y-4'>
|
||||||
{features.map(({ title, description }) => {
|
{features.map(({ title, description }) => {
|
||||||
return (
|
return (
|
||||||
<div 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>
|
||||||
|
|||||||
@ -66,15 +66,15 @@ export const Footer = () => {
|
|||||||
<div className='space-y-3'>
|
<div className='space-y-3'>
|
||||||
<div className='flex items-start'>
|
<div className='flex items-start'>
|
||||||
<MapPin className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
<MapPin className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
||||||
<p>ул. Рудаки 137, Душанбе, Таджикистан</p>
|
<p>{t('common.contacts.address')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-start'>
|
<div className='flex items-start'>
|
||||||
<Phone className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
<Phone className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
||||||
<p>+992 (37) 223-45-67</p>
|
<p>{t('common.contacts.tel')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-start'>
|
<div className='flex items-start'>
|
||||||
<Mail className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
<Mail className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
||||||
<p>info@gasnetwork.tj</p>
|
<p>{t('common.contacts.email')}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,8 +11,12 @@ import {
|
|||||||
NavigationMenuTrigger,
|
NavigationMenuTrigger,
|
||||||
navigationMenuTriggerStyle,
|
navigationMenuTriggerStyle,
|
||||||
} from '@/shared/shadcn-ui/navigation-menu';
|
} from '@/shared/shadcn-ui/navigation-menu';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
|
||||||
export function DesktopNav() {
|
export function DesktopNav() {
|
||||||
|
|
||||||
|
const { t } = useLanguage();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavigationMenu className='hidden lg:flex'>
|
<NavigationMenu className='hidden lg:flex'>
|
||||||
<NavigationMenuList>
|
<NavigationMenuList>
|
||||||
@ -22,7 +26,7 @@ export function DesktopNav() {
|
|||||||
asChild
|
asChild
|
||||||
className={navigationMenuTriggerStyle()}
|
className={navigationMenuTriggerStyle()}
|
||||||
>
|
>
|
||||||
<span>Главная</span>
|
<span>{t('common.navigation.home')}</span>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</Link>
|
</Link>
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
@ -32,12 +36,12 @@ export function DesktopNav() {
|
|||||||
asChild
|
asChild
|
||||||
className={navigationMenuTriggerStyle()}
|
className={navigationMenuTriggerStyle()}
|
||||||
>
|
>
|
||||||
<span>Наши заправки</span>
|
<span>{t('common.navigation.stations')}</span>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</Link>
|
</Link>
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
<NavigationMenuItem>
|
<NavigationMenuItem>
|
||||||
<NavigationMenuTrigger>Клиентам</NavigationMenuTrigger>
|
<NavigationMenuTrigger>{t('common.navigation.clients')}</NavigationMenuTrigger>
|
||||||
<NavigationMenuContent>
|
<NavigationMenuContent>
|
||||||
<ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]'>
|
<ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]'>
|
||||||
<li className='row-span-4'>
|
<li className='row-span-4'>
|
||||||
@ -47,11 +51,10 @@ export function DesktopNav() {
|
|||||||
href='/clients'
|
href='/clients'
|
||||||
>
|
>
|
||||||
<div className='mt-4 mb-2 text-lg font-medium text-white'>
|
<div className='mt-4 mb-2 text-lg font-medium text-white'>
|
||||||
Для наших клиентов
|
{t('clients.title')}
|
||||||
</div>
|
</div>
|
||||||
<p className='text-sm leading-tight text-white/90'>
|
<p className='text-sm leading-tight text-white/90'>
|
||||||
Специальные предложения, программы лояльности и удобные
|
{t('clients.description')}
|
||||||
способы оплаты для наших клиентов
|
|
||||||
</p>
|
</p>
|
||||||
</Link>
|
</Link>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
@ -71,7 +74,7 @@ export function DesktopNav() {
|
|||||||
asChild
|
asChild
|
||||||
className={navigationMenuTriggerStyle()}
|
className={navigationMenuTriggerStyle()}
|
||||||
>
|
>
|
||||||
<span>Вакансии</span>
|
<span>{t('common.navigation.vacancies')}</span>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</Link>
|
</Link>
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
@ -81,7 +84,7 @@ export function DesktopNav() {
|
|||||||
asChild
|
asChild
|
||||||
className={navigationMenuTriggerStyle()}
|
className={navigationMenuTriggerStyle()}
|
||||||
>
|
>
|
||||||
<span>Акции</span>
|
<span>{t('common.navigation.promotions')}</span>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</Link>
|
</Link>
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
@ -91,7 +94,7 @@ export function DesktopNav() {
|
|||||||
asChild
|
asChild
|
||||||
className={navigationMenuTriggerStyle()}
|
className={navigationMenuTriggerStyle()}
|
||||||
>
|
>
|
||||||
<span>О нас</span>
|
<span>{t('common.navigation.about')}</span>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</Link>
|
</Link>
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
|
|||||||
@ -3,11 +3,14 @@
|
|||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
import AnimatedCounter from '../shared/components/animated-counter';
|
import AnimatedCounter from '../shared/components/animated-counter';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
|
||||||
export function StatsSection() {
|
export function StatsSection() {
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
const sectionRef = useRef<HTMLDivElement>(null);
|
const sectionRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
(entries) => {
|
(entries) => {
|
||||||
@ -39,25 +42,25 @@ export function StatsSection() {
|
|||||||
<h3 className='text-3xl font-bold'>
|
<h3 className='text-3xl font-bold'>
|
||||||
{isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}
|
{isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}
|
||||||
</h3>
|
</h3>
|
||||||
<p className='text-sm text-white/80'>Заправок по стране</p>
|
<p className='text-sm text-white/80'>{t('home.stats.stations')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='space-y-2'>
|
<div className='space-y-2'>
|
||||||
<h3 className='text-3xl font-bold'>
|
<h3 className='text-3xl font-bold'>
|
||||||
{isVisible ? <AnimatedCounter end={10000} suffix='+' /> : '0+'}
|
{isVisible ? <AnimatedCounter end={10000} suffix='+' /> : '0+'}
|
||||||
</h3>
|
</h3>
|
||||||
<p className='text-sm text-white/80'>Клиентов ежедневно</p>
|
<p className='text-sm text-white/80'>{t('home.stats.daily')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='space-y-2'>
|
<div className='space-y-2'>
|
||||||
<h3 className='text-3xl font-bold'>
|
<h3 className='text-3xl font-bold'>
|
||||||
{isVisible ? <AnimatedCounter end={15} /> : '0'}
|
{isVisible ? <AnimatedCounter end={15} /> : '0'}
|
||||||
</h3>
|
</h3>
|
||||||
<p className='text-sm text-white/80'>Лет на рынке</p>
|
<p className='text-sm text-white/80'>{t('home.stats.years')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='space-y-2'>
|
<div className='space-y-2'>
|
||||||
<h3 className='text-3xl font-bold'>
|
<h3 className='text-3xl font-bold'>
|
||||||
{isVisible ? <AnimatedCounter end={24} suffix='/7' /> : '0/7'}
|
{isVisible ? <AnimatedCounter end={24} suffix='/7' /> : '0/7'}
|
||||||
</h3>
|
</h3>
|
||||||
<p className='text-sm text-white/80'>Работаем круглосуточно</p>
|
<p className='text-sm text-white/80'>{t('home.stats.mode')}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -34,9 +34,9 @@ export const VacanciesSection = () => {
|
|||||||
|
|
||||||
<Tabs defaultValue='all' className='mx-auto w-full max-w-3xl'>
|
<Tabs defaultValue='all' className='mx-auto w-full max-w-3xl'>
|
||||||
<TabsList className='mb-8 grid grid-cols-3'>
|
<TabsList className='mb-8 grid grid-cols-3'>
|
||||||
<TabsTrigger value='all'>Все вакансии</TabsTrigger>
|
<TabsTrigger value='all'>{t('home.vacancies.all')}</TabsTrigger>
|
||||||
<TabsTrigger value='office'>Офис</TabsTrigger>
|
<TabsTrigger value='office'>{t('home.vacancies.office')}</TabsTrigger>
|
||||||
<TabsTrigger value='stations'>Заправки</TabsTrigger>
|
<TabsTrigger value='stations'>{t('home.vacancies.stations')}</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
<TabsContent value='all' className='space-y-4'>
|
<TabsContent value='all' className='space-y-4'>
|
||||||
{[
|
{[
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user