feat: make about page
This commit is contained in:
BunyodL
parent
a9957ee471
commit
b9b19c002d
404
src/app/about/page.tsx
Normal file
404
src/app/about/page.tsx
Normal file
@ -0,0 +1,404 @@
|
|||||||
|
import {
|
||||||
|
Award,
|
||||||
|
Fuel,
|
||||||
|
History,
|
||||||
|
MapPin,
|
||||||
|
Star,
|
||||||
|
Target,
|
||||||
|
Users,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -13,7 +13,7 @@ const buttonVariants = cva(
|
|||||||
destructive:
|
destructive:
|
||||||
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||||
outline:
|
outline:
|
||||||
'border-input bg-background hover:bg-accent hover:text-accent-foreground border',
|
'border-input bg-background hover:bg-accent text-accent-foreground border',
|
||||||
secondary:
|
secondary:
|
||||||
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||||
|
|||||||
123
src/shared/shadcn-ui/dialog.tsx
Normal file
123
src/shared/shadcn-ui/dialog.tsx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/shared/lib/utils';
|
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root;
|
||||||
|
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger;
|
||||||
|
|
||||||
|
const DialogPortal = DialogPrimitive.Portal;
|
||||||
|
|
||||||
|
const DialogClose = DialogPrimitive.Close;
|
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof DialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DialogPortal>
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<DialogPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'>
|
||||||
|
<X className='h-4 w-4' />
|
||||||
|
<span className='sr-only'>Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
));
|
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const DialogHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col space-y-1.5 text-center sm:text-left',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
DialogHeader.displayName = 'DialogHeader';
|
||||||
|
|
||||||
|
const DialogFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
DialogFooter.displayName = 'DialogFooter';
|
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof DialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'text-lg leading-none font-semibold tracking-tight',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof DialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn('text-muted-foreground text-sm', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogPortal,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger
|
||||||
|
};
|
||||||
|
|
||||||
125
src/widgets/about-page/company-timeline.tsx
Normal file
125
src/widgets/about-page/company-timeline.tsx
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Calendar, ChevronDown, ChevronUp } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||||
|
|
||||||
|
const timelineEvents = [
|
||||||
|
{
|
||||||
|
year: '2008',
|
||||||
|
title: 'Основание компании',
|
||||||
|
description:
|
||||||
|
'GasNetwork была основана с открытием первых трех заправочных станций в Душанбе. С самого начала компания поставила перед собой цель предоставлять качественное топливо и отличный сервис.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2010',
|
||||||
|
title: 'Расширение сети',
|
||||||
|
description:
|
||||||
|
'Открытие еще пяти заправочных станций в различных регионах Таджикистана. Начало формирования единого стандарта обслуживания на всех станциях сети.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2012',
|
||||||
|
title: 'Внедрение программы лояльности',
|
||||||
|
description:
|
||||||
|
'Запуск первой в Таджикистане программы лояльности для клиентов сети заправок. Введение карт постоянного клиента с накопительной системой бонусов.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2014',
|
||||||
|
title: 'Модернизация оборудования',
|
||||||
|
description:
|
||||||
|
'Масштабная программа по обновлению оборудования на всех заправочных станциях сети. Внедрение современных технологий для повышения качества обслуживания.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2016',
|
||||||
|
title: 'Открытие 15-й заправки',
|
||||||
|
description:
|
||||||
|
'Значительное расширение сети с открытием юбилейной 15-й заправочной станции. GasNetwork становится одной из крупнейших сетей заправок в Таджикистане.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2018',
|
||||||
|
title: 'Запуск мобильного приложения',
|
||||||
|
description:
|
||||||
|
'Разработка и запуск мобильного приложения для клиентов сети. Возможность отслеживать бонусы, находить ближайшие заправки и получать специальные предложения.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2020',
|
||||||
|
title: 'Создание благотворительного фонда',
|
||||||
|
description:
|
||||||
|
'Основание благотворительного фонда GasNetwork для поддержки социальных проектов в Таджикистане. Начало активной социальной деятельности компании.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: '2023',
|
||||||
|
title: 'Современное развитие',
|
||||||
|
description:
|
||||||
|
'Сегодня GasNetwork - это 25+ современных заправочных станций по всему Таджикистану, более 150 сотрудников и тысячи довольных клиентов ежедневно.',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function CompanyTimeline() {
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
const displayEvents = expanded ? timelineEvents : timelineEvents.slice(0, 4);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='relative'>
|
||||||
|
<div className='absolute left-1/2 -z-10 -ml-0.5 hidden h-full w-0.5 bg-gradient-to-b from-red-200 via-red-200 to-transparent md:block' />
|
||||||
|
|
||||||
|
<div className='space-y-8'>
|
||||||
|
{displayEvents.map((event, index) => (
|
||||||
|
<div key={index} className='relative'>
|
||||||
|
<div className='items-center md:grid md:grid-cols-2 md:gap-8'>
|
||||||
|
<div
|
||||||
|
className={`mb-4 md:mb-0 ${index % 2 === 0 ? 'md:pr-10 md:text-right' : 'md:order-last md:pl-10'}`}
|
||||||
|
data-aos='zoom-in-down'
|
||||||
|
>
|
||||||
|
<div className='mb-2 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
|
<Calendar className='h-5 w-5 text-red-600' />
|
||||||
|
</div>
|
||||||
|
<h3 className='text-xl font-bold'>{event.year}</h3>
|
||||||
|
<h4 className='mb-2 text-lg font-semibold'>{event.title}</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`${index % 2 === 0 ? 'md:pl-10' : 'md:order-first md:pr-10 md:text-right'}`}
|
||||||
|
>
|
||||||
|
<Card
|
||||||
|
className='overflow-hidden transition-all hover:shadow-md'
|
||||||
|
data-aos={index % 2 === 0 ? 'fade-left' : 'fade-right'}
|
||||||
|
>
|
||||||
|
<CardContent className='p-4'>
|
||||||
|
<p className='text-gray-600'>{event.description}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='absolute top-5 left-1/2 -ml-3 hidden h-6 w-6 items-center justify-center rounded-full bg-red-600 md:flex'>
|
||||||
|
<div className='h-3 w-3 rounded-full bg-white'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{timelineEvents.length > 4 && (
|
||||||
|
<div className='mt-8 text-center'>
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
onClick={() => setExpanded(!expanded)}
|
||||||
|
className='inline-flex items-center'
|
||||||
|
>
|
||||||
|
{expanded ? (
|
||||||
|
<>
|
||||||
|
Свернуть <ChevronUp className='ml-2 h-4 w-4' />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
Показать больше <ChevronDown className='ml-2 h-4 w-4' />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
162
src/widgets/about-page/station-gallery.tsx
Normal file
162
src/widgets/about-page/station-gallery.tsx
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ChevronLeft, ChevronRight, Maximize } from 'lucide-react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/shared/shadcn-ui/dialog';
|
||||||
|
|
||||||
|
interface Station {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
image: string;
|
||||||
|
location: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const stations: Array<Station> = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'АЗС Душанбе-Центр',
|
||||||
|
image: '/placeholder.svg?height=400&width=600&text=АЗС+Душанбе-Центр',
|
||||||
|
location: 'ул. Рудаки 150, Душанбе',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'АЗС Худжанд',
|
||||||
|
image: '/placeholder.svg?height=400&width=600&text=АЗС+Худжанд',
|
||||||
|
location: 'ул. Ленина 45, Худжанд',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'АЗС Куляб',
|
||||||
|
image: '/placeholder.svg?height=400&width=600&text=АЗС+Куляб',
|
||||||
|
location: 'ул. Сомони 78, Куляб',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'АЗС Бохтар',
|
||||||
|
image: '/placeholder.svg?height=400&width=600&text=АЗС+Бохтар',
|
||||||
|
location: 'ул. Айни 23, Бохтар',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'АЗС Хорог',
|
||||||
|
image: '/placeholder.svg?height=400&width=600&text=АЗС+Хорог',
|
||||||
|
location: 'ул. Горная 12, Хорог',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: 'АЗС Истаравшан',
|
||||||
|
image: '/placeholder.svg?height=400&width=600&text=АЗС+Истаравшан',
|
||||||
|
location: 'ул. Исмоили Сомони 34, Истаравшан',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function StationGallery() {
|
||||||
|
const [currentImage, setCurrentImage] = useState(0);
|
||||||
|
const [selectedStation, setSelectedStation] = useState<Station | null>(null);
|
||||||
|
|
||||||
|
const nextImage = () => {
|
||||||
|
setCurrentImage((prev) => (prev === stations.length - 1 ? 0 : prev + 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const prevImage = () => {
|
||||||
|
setCurrentImage((prev) => (prev === 0 ? stations.length - 1 : prev - 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='space-y-8'>
|
||||||
|
<div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl md:h-[500px]'>
|
||||||
|
<Image
|
||||||
|
src={stations[currentImage].image || '/placeholder.svg'}
|
||||||
|
alt={stations[currentImage].name}
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
<div className='absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/70 to-transparent p-6 text-white'>
|
||||||
|
<h3 className='text-2xl font-bold'>{stations[currentImage].name}</h3>
|
||||||
|
<p className='text-white/80'>{stations[currentImage].location}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
size='icon'
|
||||||
|
className='absolute top-1/2 left-4 -translate-y-1/2 bg-white/80 hover:bg-white'
|
||||||
|
onClick={prevImage}
|
||||||
|
>
|
||||||
|
<ChevronLeft className='h-6 w-6' />
|
||||||
|
<span className='sr-only'>Предыдущая</span>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
size='icon'
|
||||||
|
className='absolute top-1/2 right-4 -translate-y-1/2 bg-white/80 hover:bg-white'
|
||||||
|
onClick={nextImage}
|
||||||
|
>
|
||||||
|
<ChevronRight className='h-6 w-6' />
|
||||||
|
<span className='sr-only'>Следующая</span>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
size='icon'
|
||||||
|
className='absolute top-4 right-4 bg-white/80 hover:bg-white'
|
||||||
|
onClick={() => setSelectedStation(stations[currentImage])}
|
||||||
|
>
|
||||||
|
<Maximize className='h-5 w-5' />
|
||||||
|
<span className='sr-only'>Увеличить</span>
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className='max-w-4xl'>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{stations[currentImage].name}</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{stations[currentImage].location}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className='relative h-[60vh] w-full'>
|
||||||
|
<Image
|
||||||
|
src={stations[currentImage].image || '/placeholder.svg'}
|
||||||
|
alt={stations[currentImage].name}
|
||||||
|
fill
|
||||||
|
className='object-contain'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-3 gap-4 md:grid-cols-6'>
|
||||||
|
{stations.map((station, index) => (
|
||||||
|
<div
|
||||||
|
key={station.id}
|
||||||
|
className={`relative h-20 cursor-pointer overflow-hidden rounded-md transition-all ${
|
||||||
|
index === currentImage
|
||||||
|
? 'ring-2 ring-red-600 ring-offset-2'
|
||||||
|
: 'opacity-70 hover:opacity-100'
|
||||||
|
}`}
|
||||||
|
onClick={() => setCurrentImage(index)}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={station.image || '/placeholder.svg'}
|
||||||
|
alt={station.name}
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -13,12 +13,7 @@ export const CtaSection = () => {
|
|||||||
и скидки.
|
и скидки.
|
||||||
</p>
|
</p>
|
||||||
<div className='flex flex-col gap-4 sm:flex-row'>
|
<div className='flex flex-col gap-4 sm:flex-row'>
|
||||||
<Button
|
<Button variant='outline'>Скачать приложение</Button>
|
||||||
variant='outline'
|
|
||||||
className='border-white text-white hover:bg-white/10'
|
|
||||||
>
|
|
||||||
Скачать приложение
|
|
||||||
</Button>
|
|
||||||
<Button className='bg-white text-red-600 hover:bg-gray-100'>
|
<Button className='bg-white text-red-600 hover:bg-gray-100'>
|
||||||
Получить карту лояльности
|
Получить карту лояльности
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user