From b9b19c002d53c88dc290605561cc9e0bf6bf65b1 Mon Sep 17 00:00:00 2001 From: BunyodL Date: Wed, 23 Apr 2025 03:25:48 +0500 Subject: [PATCH] feat: make about page --- src/app/about/page.tsx | 404 ++++++++++++++++++++ src/shared/shadcn-ui/button.tsx | 2 +- src/shared/shadcn-ui/dialog.tsx | 123 ++++++ src/widgets/about-page/company-timeline.tsx | 125 ++++++ src/widgets/about-page/station-gallery.tsx | 162 ++++++++ src/widgets/cta-section.tsx | 7 +- 6 files changed, 816 insertions(+), 7 deletions(-) create mode 100644 src/app/about/page.tsx create mode 100644 src/shared/shadcn-ui/dialog.tsx create mode 100644 src/widgets/about-page/company-timeline.tsx create mode 100644 src/widgets/about-page/station-gallery.tsx diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..14fa821 --- /dev/null +++ b/src/app/about/page.tsx @@ -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 ( +
+
+ {/* Hero Section */} +
+
+ О нашей компании +
+
+
+

+ О нашей компании +

+

+ Узнайте больше о нашей истории, ценностях и миссии. Мы + стремимся предоставлять лучший сервис и качественное топливо + для наших клиентов. +

+
+
+
+
+
+ + {/* Company Overview */} +
+
+
+
+
+ +
+

+ Лидер на рынке Таджикистана +

+

+ GasNetwork - ведущая сеть автозаправочных станций в + Таджикистане, предоставляющая высококачественное топливо и + превосходный сервис. Наша компания была основана в 2008 году и + с тех пор стала символом надежности и качества в + энергетическом секторе страны. +

+

+ Мы гордимся тем, что предлагаем нашим клиентам только лучшее + топливо, соответствующее международным стандартам качества. + Наши заправочные станции оснащены современным оборудованием, + которое обеспечивает быстрое и безопасное обслуживание. +

+

+ Наша миссия - сделать поездки наших клиентов комфортными и + безопасными, предоставляя качественное топливо и отличный + сервис по всей стране. +

+ +
+
+
+ ✓ +
+
+

Качество

+

Топливо высшего стандарта

+
+
+
+
+ ✓ +
+
+

Сервис

+

+ Профессиональное обслуживание +

+
+
+
+
+ ✓ +
+
+

Инновации

+

Современные технологии

+
+
+
+
+ ✓ +
+
+

Доступность

+

Станции по всей стране

+
+
+
+
+
+ Главный офис GasNetwork +
+
+
+
+ + {/* Stats Section */} +
+
+
+

+ GasNetwork в цифрах +

+

+ Наши достижения и рост за годы работы на рынке Таджикистана +

+
+
+
+

+ +

+

Заправок по стране

+
+
+

+ +

+

Лет на рынке

+
+
+

+ +

+

Сотрудников

+
+
+

+ +

+

Клиентов в год

+
+
+
+
+ + {/* Our History */} +
+
+
+
+ +
+

+ Наша история +

+

+ История развития нашей компании от небольшой сети до лидера + рынка +

+
+ + +
+
+ + {/* Our Stations */} +
+
+
+
+ +
+

+ Наши заправочные станции +

+

+ Современные заправочные станции, оснащенные по последнему слову + техники +

+
+ + + +
+

+ Наши заправочные станции расположены в стратегически важных + точках по всему Таджикистану, обеспечивая удобный доступ для + всех наших клиентов. +

+ +
+
+
+ + {/* Our Values */} +
+
+
+
+ +
+

+ Наши ценности +

+

+ Принципы, которыми мы руководствуемся в нашей работе +

+
+ +
+ + +
+ +
+

Качество

+

+ Мы предлагаем только высококачественное топливо, + соответствующее международным стандартам. Регулярные + проверки и контроль качества гарантируют, что наши клиенты + получают лучшее. +

+ + + + + +
+ +
+

+ Клиентоориентированность +

+

+ Наши клиенты - наш главный приоритет. Мы стремимся + предоставить лучший сервис, удобные условия и приятную + атмосферу на каждой нашей заправке. +

+ + + + + +
+ +
+

Профессионализм

+

+ Наши сотрудники - профессионалы своего дела. Мы постоянно + инвестируем в их обучение и развитие, чтобы обеспечить + высокий уровень обслуживания. +

+ + +
+
+
+ + {/* Our Team */} +
+
+
+
+ +
+

+ Наша команда +

+

+ Познакомьтесь с профессионалами, которые делают GasNetwork + лучшей сетью заправок в Таджикистане +

+
+ +
+ {[ + { name: 'Алишер Рахмонов', position: 'Генеральный директор' }, + { name: 'Фарида Каримова', position: 'Финансовый директор' }, + { name: 'Рустам Назаров', position: 'Технический директор' }, + { name: 'Зарина Шарипова', position: 'Директор по маркетингу' }, + ].map((person, index) => ( +
+
+ {person.name} +
+
+

{person.name}

+

{person.position}

+
+
+ ))} +
+
+
+ + {/* Testimonials */} +
+
+
+
+ +
+

+ Отзывы клиентов +

+

+ Что говорят о нас наши клиенты +

+
+ +
+ {[ + { + name: 'Фархад К.', + text: 'Я всегда заправляюсь только на GasNetwork. Качество топлива на высоте, а обслуживание всегда приветливое и быстрое.', + rating: 5, + }, + { + name: 'Нигина М.', + text: 'Очень удобно, что заправки расположены по всему городу. Всегда чисто, есть кафе и магазин. Рекомендую!', + rating: 5, + }, + { + name: 'Джамшед Р.', + text: 'Пользуюсь картой лояльности GasNetwork уже 3 года. Накопил много бонусов и получил немало приятных подарков. Отличный сервис!', + rating: 4, + }, + ].map((testimonial, index) => ( + + +
+ {Array(5) + .fill(0) + .map((_, i) => ( + + ))} +
+

+ "{testimonial.text}" +

+

{testimonial.name}

+ + + ))} +
+
+
+ + +
+
+ ); +} diff --git a/src/shared/shadcn-ui/button.tsx b/src/shared/shadcn-ui/button.tsx index bc87892..dff2313 100644 --- a/src/shared/shadcn-ui/button.tsx +++ b/src/shared/shadcn-ui/button.tsx @@ -13,7 +13,7 @@ const buttonVariants = cva( destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', 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: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', diff --git a/src/shared/shadcn-ui/dialog.tsx b/src/shared/shadcn-ui/dialog.tsx new file mode 100644 index 0000000..f14ddbf --- /dev/null +++ b/src/shared/shadcn-ui/dialog.tsx @@ -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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; + +const DialogContent = React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)); +DialogContent.displayName = DialogPrimitive.Content.displayName; + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +DialogHeader.displayName = 'DialogHeader'; + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +DialogFooter.displayName = 'DialogFooter'; + +const DialogTitle = React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DialogTitle.displayName = DialogPrimitive.Title.displayName; + +const DialogDescription = React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DialogDescription.displayName = DialogPrimitive.Description.displayName; + +export { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogOverlay, + DialogPortal, + DialogTitle, + DialogTrigger +}; + diff --git a/src/widgets/about-page/company-timeline.tsx b/src/widgets/about-page/company-timeline.tsx new file mode 100644 index 0000000..d817b68 --- /dev/null +++ b/src/widgets/about-page/company-timeline.tsx @@ -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 ( +
+
+ +
+ {displayEvents.map((event, index) => ( +
+
+
+
+ +
+

{event.year}

+

{event.title}

+
+ +
+ + +

{event.description}

+ + +
+
+ +
+
+
+
+ ))} +
+ + {timelineEvents.length > 4 && ( +
+ +
+ )} +
+ ); +} diff --git a/src/widgets/about-page/station-gallery.tsx b/src/widgets/about-page/station-gallery.tsx new file mode 100644 index 0000000..aea4552 --- /dev/null +++ b/src/widgets/about-page/station-gallery.tsx @@ -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 = [ + { + 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(null); + + const nextImage = () => { + setCurrentImage((prev) => (prev === stations.length - 1 ? 0 : prev + 1)); + }; + + const prevImage = () => { + setCurrentImage((prev) => (prev === 0 ? stations.length - 1 : prev - 1)); + }; + + return ( +
+
+ {stations[currentImage].name} +
+

{stations[currentImage].name}

+

{stations[currentImage].location}

+
+ + + + + + + + + + + + {stations[currentImage].name} + + {stations[currentImage].location} + + +
+ {stations[currentImage].name} +
+ + +
+ +
+ {stations.map((station, index) => ( +
setCurrentImage(index)} + > + {station.name} +
+ ))} +
+
+ ); +} diff --git a/src/widgets/cta-section.tsx b/src/widgets/cta-section.tsx index bac561c..bc60660 100644 --- a/src/widgets/cta-section.tsx +++ b/src/widgets/cta-section.tsx @@ -13,12 +13,7 @@ export const CtaSection = () => { и скидки.

- +