Compare commits
7 Commits
91c6544f0c
...
0b895d68e1
| Author | SHA1 | Date | |
|---|---|---|---|
|
0b895d68e1 | ||
|
|
da243435fe | ||
|
|
de1e0a4a89 | ||
|
|
f3a25bdb02 | ||
|
|
aaee519676 | ||
|
|
3cabf35be6 | ||
| 9cc3e70b47 |
@ -39,6 +39,7 @@
|
||||
"sonner": "^2.0.3",
|
||||
"tailwind-merge": "^3.2.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"tailwindcss-animated": "^2.0.0",
|
||||
"tw-animate-css": "^1.2.6",
|
||||
"zod": "^3.24.3"
|
||||
},
|
||||
|
||||
12
pnpm-lock.yaml
generated
12
pnpm-lock.yaml
generated
@ -95,6 +95,9 @@ importers:
|
||||
tailwindcss-animate:
|
||||
specifier: ^1.0.7
|
||||
version: 1.0.7(tailwindcss@4.1.4)
|
||||
tailwindcss-animated:
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0(tailwindcss@4.1.4)
|
||||
tw-animate-css:
|
||||
specifier: ^1.2.6
|
||||
version: 1.2.6
|
||||
@ -2538,6 +2541,11 @@ packages:
|
||||
peerDependencies:
|
||||
tailwindcss: '>=3.0.0 || insiders'
|
||||
|
||||
tailwindcss-animated@2.0.0:
|
||||
resolution: {integrity: sha512-anNNGpxNgjydD8p1lcJjxxH+XbjW6KR8Xs29owTrbcf3tOJ6IRblpyFob43HBkfxFJJTAfFQqugoEG2b1EsR0A==}
|
||||
peerDependencies:
|
||||
tailwindcss: '>=3.1.0 || >=4.0.0'
|
||||
|
||||
tailwindcss@4.1.4:
|
||||
resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
|
||||
|
||||
@ -5138,6 +5146,10 @@ snapshots:
|
||||
dependencies:
|
||||
tailwindcss: 4.1.4
|
||||
|
||||
tailwindcss-animated@2.0.0(tailwindcss@4.1.4):
|
||||
dependencies:
|
||||
tailwindcss: 4.1.4
|
||||
|
||||
tailwindcss@4.1.4: {}
|
||||
|
||||
tapable@2.2.1: {}
|
||||
|
||||
BIN
public/oriyo_bg.jpeg
Normal file
BIN
public/oriyo_bg.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
@ -1,404 +1,5 @@
|
||||
import {
|
||||
Award,
|
||||
Fuel,
|
||||
History,
|
||||
MapPin,
|
||||
Star,
|
||||
Target,
|
||||
Users,
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import AboutPage from "@/pages-templates/about";
|
||||
|
||||
import AnimatedCounter from '@/shared/components/animated-counter';
|
||||
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: 'О нас | 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>
|
||||
);
|
||||
export default function About(){
|
||||
return <AboutPage/>
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { CertificatesPage } from '@/pages-templates/certificates';
|
||||
import { CertificatesPage } from '@/pages-templates/clients/certificates';
|
||||
|
||||
export default function Certificates() {
|
||||
return <CertificatesPage />;
|
||||
|
||||
@ -1,285 +1,5 @@
|
||||
import { Check, Percent } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { LoyaltyPage } from "@/pages-templates/clients/loyatly"
|
||||
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
|
||||
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>
|
||||
);
|
||||
export default function Loyalty() {
|
||||
return <LoyaltyPage/>
|
||||
}
|
||||
@ -1,50 +1,5 @@
|
||||
import Image from 'next/image';
|
||||
import { ClientsPage } from "@/pages-templates/clients"
|
||||
|
||||
import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
|
||||
import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
|
||||
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>
|
||||
);
|
||||
export default function Clients() {
|
||||
return <ClientsPage />;
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
@import 'tailwindcss';
|
||||
@import "tw-animate-css";
|
||||
@import 'tw-animate-css';
|
||||
@import 'tailwindcss-animated';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@ -49,7 +50,7 @@
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.577 0.245 27.325) ;
|
||||
--primary: oklch(0.577 0.245 27.325);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
@ -120,49 +121,3 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
.tracking-in-expand {
|
||||
animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
||||
}
|
||||
|
||||
@keyframes tracking-in-expand {
|
||||
0% {
|
||||
letter-spacing: -0.5em;
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.heartbeat {
|
||||
animation: heartbeat 1.5s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
@keyframes heartbeat {
|
||||
from {
|
||||
transform: scale(1);
|
||||
transform-origin: center center;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
10% {
|
||||
transform: scale(0.91);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
17% {
|
||||
transform: scale(0.98);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
33% {
|
||||
transform: scale(0.87);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
45% {
|
||||
transform: scale(1);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
@ -22,7 +22,12 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang='en' suppressHydrationWarning>
|
||||
<html
|
||||
lang='en'
|
||||
suppressHydrationWarning
|
||||
className='scroll-smooth'
|
||||
style={{ scrollBehavior: 'smooth' }}
|
||||
>
|
||||
<body className={`${inter.className} antialiased`}>
|
||||
<Providers>
|
||||
<Header />
|
||||
|
||||
@ -529,8 +529,8 @@ export default function GasStationMap() {
|
||||
className='border border-gray-200 bg-white text-gray-800 shadow-md hover:bg-gray-100'
|
||||
onClick={() => setIsFilterOpen(true)}
|
||||
>
|
||||
<Filter className='mr-2 h-4 w-4 text-red-600' />
|
||||
{t('map.filters')}
|
||||
<Filter className='h-4 w-4 text-red-600 sm:mr-2' />
|
||||
<span className='hidden sm:flex'>{t('map.filters')}</span>
|
||||
{(activeFilters.length > 0 || activeCities.length > 0) && (
|
||||
<Badge className='ml-2 bg-red-600' variant='default'>
|
||||
{activeFilters.length + activeCities.length}
|
||||
@ -546,8 +546,8 @@ export default function GasStationMap() {
|
||||
className='border border-gray-200 bg-white text-gray-800 shadow-md hover:bg-gray-100'
|
||||
onClick={() => setIsStationListOpen(true)}
|
||||
>
|
||||
<List className='mr-2 h-4 w-4 text-red-600' />
|
||||
{t('map.stationsList')}
|
||||
<List className='h-4 w-4 text-red-600 sm:mr-2' />
|
||||
<span className='hidden sm:flex'>{t('map.stationsList')}</span>
|
||||
<Badge className='ml-2 bg-red-600' variant='default'>
|
||||
{filteredStations.length}
|
||||
</Badge>
|
||||
|
||||
315
src/pages-templates/about/index.tsx
Normal file
315
src/pages-templates/about/index.tsx
Normal file
@ -0,0 +1,315 @@
|
||||
"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 { 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';
|
||||
import { useLanguage } from '@/shared/language';
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
282
src/pages-templates/clients/loyatly/index.tsx
Normal file
282
src/pages-templates/clients/loyatly/index.tsx
Normal file
@ -0,0 +1,282 @@
|
||||
"use client"
|
||||
|
||||
import { Check, Percent } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
|
||||
import { CtaSection } from '@/widgets/cta-section';
|
||||
import { useLanguage } from '@/shared/language';
|
||||
|
||||
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.loyatly.title')}
|
||||
</h1>
|
||||
<p className='text-lg text-gray-200'>
|
||||
{t('clients.loyatly.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.loyatly.programm.about")}
|
||||
</h2>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
{t("clients.loyatly.programm.about-description")}
|
||||
</p>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.programm.conditions-1")}</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.programm.conditions-2")}
|
||||
</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.programm.conditions-3")}</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.works.title")}
|
||||
</h2>
|
||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.works.stage-1")}</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.works.stage-2")}</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.works.stage-3")}</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.works.stage-4")}</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.works.levels.title")}
|
||||
</h2>
|
||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||
{t("clients.loyatly.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.loyatly.works.levels.card-1.title")}
|
||||
</h3>
|
||||
<div className='mb-6 text-center'>
|
||||
<span className='text-4xl font-bold'>{t( "clients.loyatly.works.levels.card-1.percent")}</span>
|
||||
<p className='text-sm text-gray-600'>{t( "clients.loyatly.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.loyatly.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.loyatly.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.loyatly.works.levels.card-1.bonus-3")}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="overflow-hidden transition-all hover:shadow-lg border-t-4 border-t-yellow-500">
|
||||
<CardContent className='p-6'>
|
||||
<h3 className='mb-4 text-center text-2xl font-bold'>
|
||||
{t( "clients.loyatly.works.levels.card-2.title")}
|
||||
</h3>
|
||||
<div className='mb-6 text-center'>
|
||||
<span className='text-4xl font-bold'>{t( "clients.loyatly.works.levels.card-2.percent")}</span>
|
||||
<p className='text-sm text-gray-600'>{t( "clients.loyatly.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.loyatly.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.loyatly.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.loyatly.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.loyatly.works.levels.card-4.bonus-4")}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="overflow-hidden transition-all hover:shadow-lg border-t-4 border-t-red-600">
|
||||
<CardContent className='p-6'>
|
||||
<h3 className='mb-4 text-center text-2xl font-bold'>
|
||||
{t( "clients.loyatly.works.levels.card-3.title")}
|
||||
</h3>
|
||||
<div className='mb-6 text-center'>
|
||||
<span className='text-4xl font-bold'>{t( "clients.loyatly.works.levels.card-3.percent")}</span>
|
||||
<p className='text-sm text-gray-600'>{t( "clients.loyatly.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.loyatly.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.loyatly.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.loyatly.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.loyatly.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.loyatly.works.levels.card-3.bonus-5")}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -33,8 +33,8 @@ export default function AboutCounter() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={sectionRef} className='my-8 grid grid-cols-3 gap-6 text-center'>
|
||||
<div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
|
||||
<div ref={sectionRef} className='my-8 grid grid-cols-1 gap-6 text-center'>
|
||||
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
|
||||
<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>
|
||||
@ -43,7 +43,7 @@ export default function AboutCounter() {
|
||||
</h3>
|
||||
<p className='text-gray-600'>Сотрудников</p>
|
||||
</div>
|
||||
<div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
|
||||
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
|
||||
<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>
|
||||
@ -52,7 +52,7 @@ export default function AboutCounter() {
|
||||
</h3>
|
||||
<p className='text-gray-600'>Литров топлива в месяц</p>
|
||||
</div>
|
||||
<div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
|
||||
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
|
||||
<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>
|
||||
|
||||
@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
import Link from 'next/link';
|
||||
import { useLanguage } from '../language';
|
||||
|
||||
const promotions = [
|
||||
{
|
||||
@ -44,6 +45,8 @@ export default function PromotionSlider() {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [visibleItems, setVisibleItems] = useState(3);
|
||||
|
||||
const { t } = useLanguage()
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth < 640) {
|
||||
@ -113,7 +116,7 @@ export default function PromotionSlider() {
|
||||
size='sm'
|
||||
className='border-red-600 text-red-600 hover:bg-red-50'
|
||||
>
|
||||
Подробнее
|
||||
{t('common.buttons.readMore')}
|
||||
</Button>
|
||||
</Link>
|
||||
</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.findStation": "Найти заправку",
|
||||
"common.buttons.learnMore": "Узнать больше",
|
||||
@ -35,6 +39,11 @@
|
||||
"home.hero.title": "Сеть современных заправок в Таджикистане",
|
||||
"home.hero.description": "Качественное топливо, удобное расположение и отличный сервис для наших клиентов",
|
||||
|
||||
"home.stats.stations": "Заправок по стране",
|
||||
"home.stats.daily": "Клиентов ежедневно",
|
||||
"home.stats.years": "Лет на рынке",
|
||||
"home.stats.mode": "Работаем круглосуточно",
|
||||
|
||||
"home.about.title": "О нашей компании",
|
||||
"home.about.description1": "Наша сеть заправок является одной из ведущих в Таджикистане. Мы предоставляем качественное топливо и высокий уровень обслуживания для наших клиентов уже более 15 лет.",
|
||||
"home.about.description2": "Мы постоянно развиваемся, открывая новые станции и улучшая сервис на существующих. Наша цель - сделать заправку автомобиля максимально удобной и быстрой для каждого клиента.",
|
||||
@ -45,6 +54,81 @@
|
||||
"home.about.features.staff.title": "Профессиональный персонал",
|
||||
"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.description": "Найдите ближайшую к вам заправку нашей сети. Мы расположены в удобных местах по всему Таджикистану.",
|
||||
|
||||
@ -78,6 +162,65 @@
|
||||
"home.cta.title": "Присоединяйтесь к нам",
|
||||
"home.cta.description": "Станьте частью нашей сети. Получайте специальные предложения, бонусы и скидки.",
|
||||
|
||||
|
||||
"clients.title": "Для наших клиентов",
|
||||
"clients.description": "Специальные предложения, программы лояльности и удобные способы оплаты для наших клиентов",
|
||||
"clients.services": "Наши услуги для клиентов",
|
||||
"clients.services.description": "Мы стремимся сделать обслуживание на наших заправках максимально удобным и выгодным для вас",
|
||||
"clients.loyatly.title": "Программа лояльности",
|
||||
"clients.loyatly.description": "Накапливайте баллы и получайте скидки на топливо и услуги нашей сети",
|
||||
|
||||
"clients.loyatly.programm.about": "О программе лояльности",
|
||||
"clients.loyatly.programm.about-description": "Программа лояльности GasNetwork — это возможность получать баллы за каждую покупку топлива и услуг на наших заправочных станциях. Накопленные баллы можно обменять на скидки, подарки или дополнительные услуги.",
|
||||
"clients.loyatly.programm.about-description-2": "Участие в программе абсолютно бесплатное. Вам нужно только получить карту лояльности в любой нашей заправочной станции или зарегистрироваться в мобильном приложении.",
|
||||
"clients.loyatly.programm.conditions-1": "1 литр = 1 балл",
|
||||
"clients.loyatly.programm.conditions.description-1": "За каждый литр топлива вы получаете 1 балл",
|
||||
"clients.loyatly.programm.conditions-2": "Дополнительные баллы",
|
||||
"clients.loyatly.programm.conditions.description-2": "За покупки в магазине и кафе на заправке",
|
||||
"clients.loyatly.programm.conditions-3": "Специальные акции",
|
||||
"clients.loyatly.programm.conditions.description-3": "Удвоенные и утроенные баллы в праздничные дни",
|
||||
|
||||
"clients.loyatly.works.title": "Как это работает",
|
||||
"clients.loyatly.works.description": "Простые шаги для участия в программе лояльности GasNetwork",
|
||||
|
||||
"clients.loyatly.works.stage-1": "Получите карту",
|
||||
"clients.loyatly.works.stage.description-1": "Получите карту лояльности на любой заправке GasNetwork или зарегистрируйтесь в мобильном приложении",
|
||||
"clients.loyatly.works.stage-2": "Заправляйтесь",
|
||||
"clients.loyatly.works.stage.description-2": "Используйте карту при каждой заправке и покупке в магазинах на наших АЗС",
|
||||
"clients.loyatly.works.stage-3": "Накапливайте баллы",
|
||||
"clients.loyatly.works.stage.description-3": "Получайте баллы за каждую покупку и следите за их накоплением в приложении",
|
||||
"clients.loyatly.works.stage-4": "Получайте выгоду",
|
||||
"clients.loyatly.works.stage.description-4": "Обменивайте накопленные баллы на скидки, подарки или дополнительные услуги",
|
||||
|
||||
"clients.loyatly.works.levels.title": "Уровни лояльности",
|
||||
"clients.loyatly.works.levels.description": "Чем больше вы заправляетесь, тем больше преимуществ получаете",
|
||||
"clients.loyatly.works.levels.card.mark": "возврат баллами",
|
||||
|
||||
"clients.loyatly.works.levels.card-1.title": "Стандарт",
|
||||
"clients.loyatly.works.levels.card-1.percent": "1%",
|
||||
"clients.loyatly.works.levels.card-1.bonus-1": "1 балл за каждый литр топлива",
|
||||
"clients.loyatly.works.levels.card-1.bonus-2": "Участие в акциях",
|
||||
"clients.loyatly.works.levels.card-1.bonus-3": "Доступ к мобильному приложению",
|
||||
|
||||
"clients.loyatly.works.levels.card-2.title": "Золотой",
|
||||
"clients.loyatly.works.levels.card-2.percent": "2%",
|
||||
"clients.loyatly.works.levels.card-2.bonus-1": "2 балла за каждый литр топлива",
|
||||
"clients.loyatly.works.levels.card-2.bonus-2": "Скидка 5% в кафе на заправках",
|
||||
"clients.loyatly.works.levels.card-2.bonus-3": "Приоритетное обслуживание",
|
||||
"clients.loyatly.works.levels.card-2.bonus-4": "Эксклюзивные акции",
|
||||
|
||||
"clients.loyatly.works.levels.card-3.title": "Платиновый",
|
||||
"clients.loyatly.works.levels.card-3.percent": "3%",
|
||||
"clients.loyatly.works.levels.card-3.bonus-1": "3 балла за каждый литр топлива",
|
||||
"clients.loyatly.works.levels.card-3.bonus-2": "Скидка 10% в кафе на заправках",
|
||||
"clients.loyatly.works.levels.card-3.bonus-3": "Бесплатная мойка раз в месяц",
|
||||
"clients.loyatly.works.levels.card-3.bonus-4": "Персональный менеджер",
|
||||
"clients.loyatly.works.levels.card-3.bonus-5": "VIP-обслуживание",
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
"certificates.title": "Наши сертификаты",
|
||||
"certificates.description": "GasNetwork придерживается высоких стандартов качества и безопасности. Наши сертификаты подтверждают соответствие нашей продукции и услуг международным и национальным стандартам.",
|
||||
"certificates.issueDate": "Дата выдачи",
|
||||
|
||||
@ -10,7 +10,7 @@ export const AboutSection = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<section id='about' className='py-16'>
|
||||
<section id='about' className='px-2 py-8 sm:py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||
<div>
|
||||
@ -24,47 +24,7 @@ export const AboutSection = () => {
|
||||
<p className='mb-6 text-gray-600'>{t('home.about.description2')}</p>
|
||||
|
||||
<AboutCounter />
|
||||
<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('home.about.features.quality.title')}
|
||||
</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t('home.about.features.quality.description')}
|
||||
</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('home.about.features.equipment.title')}
|
||||
</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t('home.about.features.equipment.description')}
|
||||
</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('home.about.features.staff.title')}
|
||||
</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t('home.about.features.staff.description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Features />
|
||||
</div>
|
||||
<div
|
||||
className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
|
||||
@ -82,3 +42,45 @@ export const AboutSection = () => {
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
interface Feature {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const features: Array<Feature> = [
|
||||
{
|
||||
title: 'home.about.features.quality.title',
|
||||
description: 'home.about.features.quality.description',
|
||||
},
|
||||
{
|
||||
title: 'home.about.features.equipment.title',
|
||||
description: 'home.about.features.equipment.description',
|
||||
},
|
||||
{
|
||||
title: 'home.about.features.staff.title',
|
||||
description: 'home.about.features.staff.description',
|
||||
},
|
||||
];
|
||||
|
||||
const Features = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className='space-y-4'>
|
||||
{features.map(({ title, description }) => {
|
||||
return (
|
||||
<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(title)}</h3>
|
||||
<p className='text-gray-600'>{t(description)}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -11,12 +11,12 @@ export const CharitySection = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<section id='charity' className='py-16'>
|
||||
<section id='charity' className='px-2 py-8 sm:py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||
<div
|
||||
className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'
|
||||
data-aos='zoom-out-up'
|
||||
className='relative order-2 h-[400px] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
|
||||
data-aos='zoom-in'
|
||||
>
|
||||
<Image
|
||||
src='/placeholder.svg?height=400&width=600'
|
||||
@ -29,7 +29,7 @@ export const CharitySection = () => {
|
||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||
<Heart className='h-6 w-6 text-red-600' />
|
||||
</div>
|
||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
<h2 className='mb-6 text-xl font-bold tracking-tight sm:text-4xl'>
|
||||
{t('home.charity.title')}
|
||||
</h2>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import { useLanguage } from '@/shared/language';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const CtaSection = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<section className='bg-red-600 py-16 text-white'>
|
||||
<section className='bg-red-600 px-2 py-8 text-white sm:py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='flex flex-col items-center text-center'>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
|
||||
@ -5,8 +5,6 @@ import Link from 'next/link';
|
||||
|
||||
import { useLanguage } from '@/shared/language';
|
||||
|
||||
import '.././app/globals.css';
|
||||
|
||||
export const Footer = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
@ -68,15 +66,15 @@ export const Footer = () => {
|
||||
<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>ул. Рудаки 137, Душанбе, Таджикистан</p>
|
||||
<p>{t('common.contacts.address')}</p>
|
||||
</div>
|
||||
<div className='flex items-start'>
|
||||
<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 className='flex items-start'>
|
||||
<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>
|
||||
|
||||
@ -11,8 +11,12 @@ import {
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from '@/shared/shadcn-ui/navigation-menu';
|
||||
import { useLanguage } from '@/shared/language';
|
||||
|
||||
export function DesktopNav() {
|
||||
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<NavigationMenu className='hidden lg:flex'>
|
||||
<NavigationMenuList>
|
||||
@ -22,7 +26,7 @@ export function DesktopNav() {
|
||||
asChild
|
||||
className={navigationMenuTriggerStyle()}
|
||||
>
|
||||
<span>Главная</span>
|
||||
<span>{t('common.navigation.home')}</span>
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
@ -32,12 +36,12 @@ export function DesktopNav() {
|
||||
asChild
|
||||
className={navigationMenuTriggerStyle()}
|
||||
>
|
||||
<span>Наши заправки</span>
|
||||
<span>{t('common.navigation.stations')}</span>
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>Клиентам</NavigationMenuTrigger>
|
||||
<NavigationMenuTrigger>{t('common.navigation.clients')}</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]'>
|
||||
<li className='row-span-4'>
|
||||
@ -47,11 +51,10 @@ export function DesktopNav() {
|
||||
href='/clients'
|
||||
>
|
||||
<div className='mt-4 mb-2 text-lg font-medium text-white'>
|
||||
Для наших клиентов
|
||||
{t('clients.title')}
|
||||
</div>
|
||||
<p className='text-sm leading-tight text-white/90'>
|
||||
Специальные предложения, программы лояльности и удобные
|
||||
способы оплаты для наших клиентов
|
||||
{t('clients.description')}
|
||||
</p>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
@ -71,7 +74,7 @@ export function DesktopNav() {
|
||||
asChild
|
||||
className={navigationMenuTriggerStyle()}
|
||||
>
|
||||
<span>Вакансии</span>
|
||||
<span>{t('common.navigation.vacancies')}</span>
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
@ -81,7 +84,7 @@ export function DesktopNav() {
|
||||
asChild
|
||||
className={navigationMenuTriggerStyle()}
|
||||
>
|
||||
<span>Акции</span>
|
||||
<span>{t('common.navigation.promotions')}</span>
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
@ -91,7 +94,7 @@ export function DesktopNav() {
|
||||
asChild
|
||||
className={navigationMenuTriggerStyle()}
|
||||
>
|
||||
<span>О нас</span>
|
||||
<span>{t('common.navigation.about')}</span>
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
|
||||
@ -5,7 +5,7 @@ import Link from 'next/link';
|
||||
|
||||
import { Logo } from '@/shared/assets/logo';
|
||||
import { useLanguage } from '@/shared/language';
|
||||
import { LanguageSwitcher } from '@/shared/language/ui/language-switcher';
|
||||
// import { LanguageSwitcher } from '@/shared/language/ui/language-switcher';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
import { DesktopNav } from './desktop-nav';
|
||||
@ -19,10 +19,10 @@ export function Header() {
|
||||
<div className='container mx-auto flex h-16 items-center justify-between p-4'>
|
||||
<Logo />
|
||||
<DesktopNav />
|
||||
<div className='flex items-center gap-6 lg:contents'>
|
||||
<div className='flex items-center gap-3 sm:gap-6 lg:contents'>
|
||||
<MobileNav />
|
||||
<div className='flex items-center gap-6'>
|
||||
<LanguageSwitcher />
|
||||
<div className='flex items-center gap-3 sm:gap-6'>
|
||||
{/* <LanguageSwitcher /> */}
|
||||
<Link href={'/login'}>
|
||||
<Button className='flex items-center gap-2'>
|
||||
<UserCircle className='size-4' />
|
||||
|
||||
@ -2,38 +2,36 @@
|
||||
|
||||
import { MapPin } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import '../../src/app/globals.css'
|
||||
import Link from 'next/link';
|
||||
|
||||
import { useLanguage } from '@/shared/language';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const HeroSection = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<section className='relative'>
|
||||
<div className='relative h-[500px] w-full overflow-hidden'>
|
||||
<div className='relative h-[300px] w-full overflow-hidden md:h-[500px] xl:h-[700px]'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=500&width=1920'
|
||||
src='/oriyo_bg.jpeg'
|
||||
alt='Gas Station Network'
|
||||
width={1920}
|
||||
height={500}
|
||||
fill
|
||||
className='object-cover'
|
||||
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 className='max-w-lg space-y-4 text-white'>
|
||||
<div className='tracking-in-expand'>
|
||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||
<div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
|
||||
<h1 className='text-2xl font-bold tracking-tight sm:text-4xl md:text-6xl'>
|
||||
{t('home.hero.title')}
|
||||
</h1>
|
||||
</div>
|
||||
<p className='text-lg text-gray-200'>
|
||||
<p className='text-gray-200 sm:text-lg'>
|
||||
{t('home.hero.description')}
|
||||
</p>
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex flex-col gap-2 sm:flex-row sm:gap-4'>
|
||||
<Link href='#'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
{t('common.buttons.findStation')}{' '}
|
||||
@ -41,8 +39,7 @@ export const HeroSection = () => {
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href='#'>
|
||||
<Button variant='outline' className='animate-pulse'
|
||||
>
|
||||
<Button variant='outline' className='animate-pulse'>
|
||||
{t('common.buttons.learnMore')}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
@ -10,7 +10,7 @@ export const MapSection = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<section id='stations' className='bg-gray-50 py-16'>
|
||||
<section id='stations' className='bg-gray-50 px-2 py-8 sm: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'>
|
||||
|
||||
@ -2,17 +2,16 @@
|
||||
|
||||
import { Handshake } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import png from './7fe1595f25e868852247248389bc2b3ac910bf94.png'
|
||||
import Link from 'next/link';
|
||||
|
||||
import { useLanguage } from '@/shared/language';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const PartnersSection = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<section id='partners' className='bg-gray-50 py-16'>
|
||||
<section id='partners' className='bg-gray-50 px-2 py-8 sm: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'>
|
||||
@ -26,11 +25,11 @@ export const PartnersSection = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-8 md:grid-cols-4'>
|
||||
<div className='grid grid-cols-2 gap-4 sm:gap-8 md:grid-cols-4'>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8].map((partner) => (
|
||||
<div
|
||||
key={partner}
|
||||
className='flex h-32 items-center justify-center flex-col gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
|
||||
className='flex h-32 flex-col items-center justify-center gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
|
||||
data-aos='flip-left'
|
||||
>
|
||||
<Image
|
||||
|
||||
@ -9,7 +9,7 @@ export const PromotionsSection = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<section id='promotions' className='bg-gray-50 py-16'>
|
||||
<section id='promotions' className='bg-gray-50 py-8 px-2 sm: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'>
|
||||
|
||||
@ -3,11 +3,14 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import AnimatedCounter from '../shared/components/animated-counter';
|
||||
import { useLanguage } from '@/shared/language';
|
||||
|
||||
export function StatsSection() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { t } = useLanguage()
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
@ -32,32 +35,32 @@ export function StatsSection() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className='bg-red-600 py-12 text-white'>
|
||||
<section ref={sectionRef} className='bg-red-600 py-6 sm:py-12 px-2 text-white'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
|
||||
<div className='grid grid-cols-2 gap-4 sm:gap-8 text-center md:grid-cols-4'>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-3xl font-bold'>
|
||||
{isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}
|
||||
</h3>
|
||||
<p className='text-sm text-white/80'>Заправок по стране</p>
|
||||
<p className='text-sm text-white/80'>{t('home.stats.stations')}</p>
|
||||
</div>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-3xl font-bold'>
|
||||
{isVisible ? <AnimatedCounter end={10000} suffix='+' /> : '0+'}
|
||||
</h3>
|
||||
<p className='text-sm text-white/80'>Клиентов ежедневно</p>
|
||||
<p className='text-sm text-white/80'>{t('home.stats.daily')}</p>
|
||||
</div>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-3xl font-bold'>
|
||||
{isVisible ? <AnimatedCounter end={15} /> : '0'}
|
||||
</h3>
|
||||
<p className='text-sm text-white/80'>Лет на рынке</p>
|
||||
<p className='text-sm text-white/80'>{t('home.stats.years')}</p>
|
||||
</div>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-3xl font-bold'>
|
||||
{isVisible ? <AnimatedCounter end={24} suffix='/7' /> : '0/7'}
|
||||
</h3>
|
||||
<p className='text-sm text-white/80'>Работаем круглосуточно</p>
|
||||
<p className='text-sm text-white/80'>{t('home.stats.mode')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
import { Briefcase } from 'lucide-react';
|
||||
|
||||
import { useLanguage } from '@/shared/language';
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
import { Badge } from '@/shared/shadcn-ui/badge';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
import {
|
||||
@ -16,7 +18,7 @@ export const VacanciesSection = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<section id='vacancies' className='py-16'>
|
||||
<section id='vacancies' className='px-2 py-8 sm: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'>
|
||||
@ -32,9 +34,9 @@ export const VacanciesSection = () => {
|
||||
|
||||
<Tabs defaultValue='all' className='mx-auto w-full max-w-3xl'>
|
||||
<TabsList className='mb-8 grid grid-cols-3'>
|
||||
<TabsTrigger value='all'>Все вакансии</TabsTrigger>
|
||||
<TabsTrigger value='office'>Офис</TabsTrigger>
|
||||
<TabsTrigger value='stations'>Заправки</TabsTrigger>
|
||||
<TabsTrigger value='all'>{t('home.vacancies.all')}</TabsTrigger>
|
||||
<TabsTrigger value='office'>{t('home.vacancies.office')}</TabsTrigger>
|
||||
<TabsTrigger value='stations'>{t('home.vacancies.stations')}</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value='all' className='space-y-4'>
|
||||
{[
|
||||
@ -43,35 +45,12 @@ export const VacanciesSection = () => {
|
||||
'Бухгалтер',
|
||||
'Специалист по логистике',
|
||||
].map((job, index) => (
|
||||
<Card
|
||||
<Vacancy
|
||||
key={index}
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
data-aos='zoom-in'
|
||||
>
|
||||
<CardContent className='p-0'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-start justify-between'>
|
||||
<div>
|
||||
<h3 className='mb-2 text-lg font-bold'>{job}</h3>
|
||||
<p className='mb-4 text-sm text-gray-500'>
|
||||
Душанбе, Таджикистан
|
||||
</p>
|
||||
<div className='mb-4 flex flex-wrap gap-2'>
|
||||
<span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800'>
|
||||
Полный день
|
||||
</span>
|
||||
<span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
|
||||
Опыт от 1 года
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant='outline' size='sm'>
|
||||
{t('common.buttons.apply')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
jobTitle={job}
|
||||
location='Душанбе, Таджикистан'
|
||||
tags={['Полный день', 'Опыт от 1 года']}
|
||||
/>
|
||||
))}
|
||||
</TabsContent>
|
||||
<TabsContent value='office' className='space-y-4'>
|
||||
@ -80,69 +59,23 @@ export const VacanciesSection = () => {
|
||||
'Бухгалтер',
|
||||
'Специалист по логистике',
|
||||
].map((job, index) => (
|
||||
<Card
|
||||
<Vacancy
|
||||
key={index}
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'}
|
||||
>
|
||||
<CardContent className='p-0'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-start justify-between'>
|
||||
<div>
|
||||
<h3 className='mb-2 text-lg font-bold'>{job}</h3>
|
||||
<p className='mb-4 text-sm text-gray-500'>
|
||||
Душанбе, Таджикистан
|
||||
</p>
|
||||
<div className='mb-4 flex flex-wrap gap-2'>
|
||||
<span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800'>
|
||||
Полный день
|
||||
</span>
|
||||
<span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
|
||||
Опыт от 1 года
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant='outline' size='sm'>
|
||||
{t('common.buttons.apply')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
jobTitle={job}
|
||||
location='Душанбе, Таджикистан'
|
||||
tags={['Полный день', 'Опыт от 1 года']}
|
||||
/>
|
||||
))}
|
||||
</TabsContent>
|
||||
<TabsContent value='stations' className='space-y-4'>
|
||||
{['Оператор АЗС', 'Заправщик', 'Менеджер станции'].map(
|
||||
(job, index) => (
|
||||
<Card
|
||||
<Vacancy
|
||||
key={index}
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'}
|
||||
>
|
||||
<CardContent className='p-0'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-start justify-between'>
|
||||
<div>
|
||||
<h3 className='mb-2 text-lg font-bold'>{job}</h3>
|
||||
<p className='mb-4 text-sm text-gray-500'>
|
||||
Душанбе, Таджикистан
|
||||
</p>
|
||||
<div className='mb-4 flex flex-wrap gap-2'>
|
||||
<span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800'>
|
||||
Сменный график
|
||||
</span>
|
||||
<span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
|
||||
Обучение
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant='outline' size='sm'>
|
||||
{t('common.buttons.apply')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
jobTitle={job}
|
||||
location='Душанбе, Таджикистан'
|
||||
tags={['Сменный график', 'Обучение']}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</TabsContent>
|
||||
@ -151,3 +84,49 @@ export const VacanciesSection = () => {
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
interface VacancyProps {
|
||||
jobTitle: string;
|
||||
location: string;
|
||||
tags: Array<string>;
|
||||
}
|
||||
|
||||
const Vacancy = ({ jobTitle, location, tags }: VacancyProps) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<Card
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
data-aos='zoom-in'
|
||||
>
|
||||
<CardContent className='p-0'>
|
||||
<div className='p-6'>
|
||||
<div className='flex flex-col items-start justify-between sm:flex-row'>
|
||||
<div>
|
||||
<h3 className='mb-2 text-lg font-bold'>{jobTitle}</h3>
|
||||
<p className='mb-4 text-sm text-gray-500'>{location}</p>
|
||||
<div className='mb-4 flex flex-wrap gap-2'>
|
||||
{tags.map((tag, index) => {
|
||||
return (
|
||||
<Badge
|
||||
key={index}
|
||||
className={cn(
|
||||
'inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium',
|
||||
`${index % 2 === 0 ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800'}`,
|
||||
)}
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<Button variant='outline' size='sm'>
|
||||
{t('common.buttons.apply')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
import tailwindcssAnimated from 'tailwindcss-animated';
|
||||
|
||||
module.exports = {
|
||||
darkMode: ['class'],
|
||||
@ -102,5 +103,5 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require('tailwindcss-animate')],
|
||||
plugins: [require('tailwindcss-animate'), tailwindcssAnimated],
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user