refactor: divide page components to sections
This commit is contained in:
BunyodL
parent
ceef7c7efc
commit
438702c360
@ -1,8 +1,11 @@
|
||||
import type { Metadata } from 'next';
|
||||
import { Geist, Geist_Mono, Inter } from 'next/font/google';
|
||||
import { Inter } from 'next/font/google';
|
||||
|
||||
import { Providers } from '@/shared/providers/providers';
|
||||
|
||||
import { Footer } from '@/widgets/footer';
|
||||
import { Header } from '@/widgets/header';
|
||||
|
||||
import './globals.css';
|
||||
|
||||
const inter = Inter({ subsets: ['latin', 'cyrillic'] });
|
||||
@ -21,7 +24,11 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang='en' suppressHydrationWarning>
|
||||
<body className={`${inter.className} antialiased`}>
|
||||
<Providers>{children}</Providers>
|
||||
<Providers>
|
||||
<Header />
|
||||
{children}
|
||||
<Footer />
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
692
src/app/page.tsx
692
src/app/page.tsx
@ -1,677 +1,25 @@
|
||||
import {
|
||||
ArrowRight,
|
||||
Briefcase,
|
||||
ChevronRight,
|
||||
Fuel,
|
||||
Gift,
|
||||
Handshake,
|
||||
Heart,
|
||||
Mail,
|
||||
MapPin,
|
||||
Phone,
|
||||
Users,
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
import AboutCounter from '@/shared/components/about-counter';
|
||||
import GasStationMap from '@/shared/components/gas-station-map';
|
||||
import PromotionSlider from '@/shared/components/promotion-slider';
|
||||
import StatsSection from '@/shared/components/stats-section';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from '@/shared/shadcn-ui/tabs';
|
||||
import { AboutSection } from '@/widgets/about-section';
|
||||
import { CharitySection } from '@/widgets/charity-section';
|
||||
import { CtaSection } from '@/widgets/cta-section';
|
||||
import { HeroSection } from '@/widgets/hero-section';
|
||||
import { MapSection } from '@/widgets/map-section';
|
||||
import { PartnersSection } from '@/widgets/partners-section';
|
||||
import { PromotionsSection } from '@/widgets/promotions-section';
|
||||
import { StatsSection } from '@/widgets/stats-section';
|
||||
import { VacanciesSection } from '@/widgets/vacancies-section';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className='flex min-h-screen flex-col'>
|
||||
{/* Header */}
|
||||
<header className='sticky top-0 z-40 w-full border-b bg-white'>
|
||||
<div className='container flex h-16 items-center justify-between py-4'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Fuel className='h-6 w-6 text-red-600' />
|
||||
<span className='text-xl font-bold'>GasNetwork</span>
|
||||
</div>
|
||||
<nav className='hidden items-center gap-6 md:flex'>
|
||||
<Link
|
||||
href='#stations'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Наши заправки
|
||||
</Link>
|
||||
<Link
|
||||
href='#about'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
О нас
|
||||
</Link>
|
||||
<Link
|
||||
href='#vacancies'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Вакансии
|
||||
</Link>
|
||||
<Link
|
||||
href='#promotions'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Акции
|
||||
</Link>
|
||||
<Link
|
||||
href='#partners'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Партнеры
|
||||
</Link>
|
||||
<Link
|
||||
href='#charity'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Благотворительность
|
||||
</Link>
|
||||
</nav>
|
||||
<div className='flex items-center gap-4'>
|
||||
<Button variant='outline' size='sm' className='hidden md:flex'>
|
||||
TJ
|
||||
</Button>
|
||||
<Button variant='outline' size='sm' className='hidden md:flex'>
|
||||
RU
|
||||
</Button>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>Контакты</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className='flex-1'>
|
||||
{/* Hero Section */}
|
||||
<section className='relative'>
|
||||
<div className='relative h-[500px] w-full overflow-hidden'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=500&width=1920'
|
||||
alt='Gas Station Network'
|
||||
width={1920}
|
||||
height={500}
|
||||
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'>
|
||||
<div className='max-w-lg 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 className='flex gap-4'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Найти заправку <MapPin className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
className='border-white text-white hover:bg-white/10'
|
||||
>
|
||||
Узнать больше
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<StatsSection />
|
||||
|
||||
{/* Map Section */}
|
||||
<section id='stations' className='bg-gray-50 py-16'>
|
||||
<div className='container'>
|
||||
<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>
|
||||
<div className='h-[500px] overflow-hidden rounded-xl border shadow-lg'>
|
||||
<GasStationMap />
|
||||
</div>
|
||||
<div className='mt-8 flex justify-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Показать все заправки <ChevronRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About Section */}
|
||||
<section id='about' className='py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Users 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'>
|
||||
Наша сеть заправок является одной из ведущих в Таджикистане.
|
||||
Мы предоставляем качественное топливо и высокий уровень
|
||||
обслуживания для наших клиентов уже более 15 лет.
|
||||
</p>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
Мы постоянно развиваемся, открывая новые станции и улучшая
|
||||
сервис на существующих. Наша цель - сделать заправку
|
||||
автомобиля максимально удобной и быстрой для каждого клиента.
|
||||
</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'>
|
||||
Качественное топливо
|
||||
</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-[400px] overflow-hidden rounded-xl shadow-xl'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=400&width=600'
|
||||
alt='About our company'
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Promotions Section */}
|
||||
<section id='promotions' className='bg-gray-50 py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Gift 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>
|
||||
<PromotionSlider />
|
||||
<div className='mt-8 flex justify-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Все акции <ArrowRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Vacancies Section */}
|
||||
<section id='vacancies' className='py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Briefcase 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>
|
||||
|
||||
<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>
|
||||
</TabsList>
|
||||
<TabsContent value='all' className='space-y-4'>
|
||||
{[
|
||||
'Оператор АЗС',
|
||||
'Менеджер по продажам',
|
||||
'Бухгалтер',
|
||||
'Специалист по логистике',
|
||||
].map((job, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
>
|
||||
<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'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
<TabsContent value='office' className='space-y-4'>
|
||||
{[
|
||||
'Менеджер по продажам',
|
||||
'Бухгалтер',
|
||||
'Специалист по логистике',
|
||||
].map((job, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
>
|
||||
<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'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
<TabsContent value='stations' className='space-y-4'>
|
||||
{['Оператор АЗС', 'Заправщик', 'Менеджер станции'].map(
|
||||
(job, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
>
|
||||
<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'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
),
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className='mt-8 flex justify-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Отправить резюме <ArrowRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Partners Section */}
|
||||
<section id='partners' className='bg-gray-50 py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Handshake 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 grid-cols-2 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 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
|
||||
>
|
||||
<Image
|
||||
src={`/placeholder.svg?height=80&width=160&text=Partner ${partner}`}
|
||||
alt={`Partner ${partner}`}
|
||||
width={160}
|
||||
height={80}
|
||||
className='max-h-16 w-auto'
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className='mt-12 text-center'>
|
||||
<h3 className='mb-4 text-xl font-bold'>
|
||||
Станьте нашим партнером
|
||||
</h3>
|
||||
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
||||
Мы открыты для сотрудничества и новых партнерских отношений.
|
||||
Свяжитесь с нами для обсуждения возможностей.
|
||||
</p>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Связаться с нами
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Charity Section */}
|
||||
<section id='charity' className='py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=400&width=600'
|
||||
alt='Charity Foundation'
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
<div className='order-1 md:order-2'>
|
||||
<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>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
Наш благотворительный фонд был создан для поддержки социально
|
||||
значимых проектов в Таджикистане. Мы стремимся внести свой
|
||||
вклад в развитие общества и помочь тем, кто в этом нуждается.
|
||||
</p>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
Основные направления деятельности нашего фонда:
|
||||
</p>
|
||||
<ul className='mb-6 space-y-2'>
|
||||
<li className='flex items-center'>
|
||||
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
||||
<span>Поддержка образовательных программ</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
||||
<span>Помощь детям из малообеспеченных семей</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
||||
<span>Экологические инициативы</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
||||
<span>Поддержка спортивных мероприятий</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Подробнее о фонде
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className='bg-red-600 py-16 text-white'>
|
||||
<div className='container'>
|
||||
<div className='flex flex-col items-center text-center'>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
Присоединяйтесь к нам
|
||||
</h2>
|
||||
<p className='mb-8 max-w-2xl'>
|
||||
Станьте частью нашей сети. Получайте специальные предложения,
|
||||
бонусы и скидки.
|
||||
</p>
|
||||
<div className='flex flex-col gap-4 sm:flex-row'>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className='bg-gray-900 py-12 text-white'>
|
||||
<div className='container'>
|
||||
<div className='grid grid-cols-1 gap-8 md:grid-cols-4'>
|
||||
<div>
|
||||
<div className='mb-4 flex items-center gap-2'>
|
||||
<Fuel className='h-6 w-6 text-red-500' />
|
||||
<span className='text-xl font-bold'>GasNetwork</span>
|
||||
</div>
|
||||
<p className='mb-4 text-gray-400'>
|
||||
Сеть современных заправок в Таджикистане. Качественное топливо и
|
||||
отличный сервис.
|
||||
</p>
|
||||
<div className='flex space-x-4'>
|
||||
<a href='#' className='text-gray-400 hover:text-white'>
|
||||
<svg
|
||||
className='h-6 w-6'
|
||||
fill='currentColor'
|
||||
viewBox='0 0 24 24'
|
||||
aria-hidden='true'
|
||||
>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z'
|
||||
clipRule='evenodd'
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href='#' className='text-gray-400 hover:text-white'>
|
||||
<svg
|
||||
className='h-6 w-6'
|
||||
fill='currentColor'
|
||||
viewBox='0 0 24 24'
|
||||
aria-hidden='true'
|
||||
>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'
|
||||
clipRule='evenodd'
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href='#' className='text-gray-400 hover:text-white'>
|
||||
<svg
|
||||
className='h-6 w-6'
|
||||
fill='currentColor'
|
||||
viewBox='0 0 24 24'
|
||||
aria-hidden='true'
|
||||
>
|
||||
<path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='mb-4 text-lg font-semibold'>Контакты</h3>
|
||||
<div className='space-y-3'>
|
||||
<div className='flex items-start'>
|
||||
<MapPin className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
||||
<p>ул. Рудаки 137, Душанбе, Таджикистан</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='mb-4 text-lg font-semibold'>Навигация</h3>
|
||||
<ul className='space-y-2'>
|
||||
<li>
|
||||
<Link
|
||||
href='#stations'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Наши заправки
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href='#about'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
О нас
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href='#vacancies'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Вакансии
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href='#promotions'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Акции
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href='#partners'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Партнеры
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href='#charity'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Благотворительность
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='mb-4 text-lg font-semibold'>Подписка</h3>
|
||||
<p className='mb-4 text-gray-400'>
|
||||
Подпишитесь на нашу рассылку, чтобы получать новости и
|
||||
специальные предложения.
|
||||
</p>
|
||||
<form className='space-y-2'>
|
||||
<input
|
||||
type='email'
|
||||
placeholder='Ваш email'
|
||||
className='w-full rounded-md border border-gray-700 bg-gray-800 px-4 py-2 text-white'
|
||||
/>
|
||||
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
||||
Подписаться
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'>
|
||||
<p>
|
||||
© {new Date().getFullYear()} GasNetwork. Все права защищены.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<main className='flex-1'>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<MapSection />
|
||||
<AboutSection />
|
||||
<PromotionsSection />
|
||||
<VacanciesSection />
|
||||
<PartnersSection />
|
||||
<CharitySection />
|
||||
<CtaSection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
3
src/features/map/index.ts
Normal file
3
src/features/map/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import GasStationMap from './ui/gas-station-map';
|
||||
|
||||
export { GasStationMap };
|
||||
82
src/widgets/about-section.tsx
Normal file
82
src/widgets/about-section.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import { Users } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import AboutCounter from '@/shared/components/about-counter';
|
||||
|
||||
export const AboutSection = () => {
|
||||
return (
|
||||
<section id='about' className='py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Users 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'>
|
||||
Наша сеть заправок является одной из ведущих в Таджикистане. Мы
|
||||
предоставляем качественное топливо и высокий уровень обслуживания
|
||||
для наших клиентов уже более 15 лет.
|
||||
</p>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
Мы постоянно развиваемся, открывая новые станции и улучшая сервис
|
||||
на существующих. Наша цель - сделать заправку автомобиля
|
||||
максимально удобной и быстрой для каждого клиента.
|
||||
</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'>Качественное топливо</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-[400px] overflow-hidden rounded-xl shadow-xl'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=400&width=600'
|
||||
alt='About our company'
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
60
src/widgets/charity-section.tsx
Normal file
60
src/widgets/charity-section.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { ChevronRight, Heart } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
export const CharitySection = () => {
|
||||
return (
|
||||
<section id='charity' className='py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=400&width=600'
|
||||
alt='Charity Foundation'
|
||||
fill
|
||||
className='object-cover'
|
||||
/>
|
||||
</div>
|
||||
<div className='order-1 md:order-2'>
|
||||
<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>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
Наш благотворительный фонд был создан для поддержки социально
|
||||
значимых проектов в Таджикистане. Мы стремимся внести свой вклад в
|
||||
развитие общества и помочь тем, кто в этом нуждается.
|
||||
</p>
|
||||
<p className='mb-6 text-gray-600'>
|
||||
Основные направления деятельности нашего фонда:
|
||||
</p>
|
||||
<ul className='mb-6 space-y-2'>
|
||||
<li className='flex items-center'>
|
||||
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
||||
<span>Поддержка образовательных программ</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
||||
<span>Помощь детям из малообеспеченных семей</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
||||
<span>Экологические инициативы</span>
|
||||
</li>
|
||||
<li className='flex items-center'>
|
||||
<ChevronRight className='mr-2 h-5 w-5 text-red-600' />
|
||||
<span>Поддержка спортивных мероприятий</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Подробнее о фонде
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
30
src/widgets/cta-section.tsx
Normal file
30
src/widgets/cta-section.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
export const CtaSection = () => {
|
||||
return (
|
||||
<section className='bg-red-600 py-16 text-white'>
|
||||
<div className='container'>
|
||||
<div className='flex flex-col items-center text-center'>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
Присоединяйтесь к нам
|
||||
</h2>
|
||||
<p className='mb-8 max-w-2xl'>
|
||||
Станьте частью нашей сети. Получайте специальные предложения, бонусы
|
||||
и скидки.
|
||||
</p>
|
||||
<div className='flex flex-col gap-4 sm:flex-row'>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
154
src/widgets/footer.tsx
Normal file
154
src/widgets/footer.tsx
Normal file
@ -0,0 +1,154 @@
|
||||
import { Fuel, Mail, MapPin, Phone } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<footer className='bg-gray-900 py-12 text-white'>
|
||||
<div className='container'>
|
||||
<div className='grid grid-cols-1 gap-8 md:grid-cols-4'>
|
||||
<div>
|
||||
<div className='mb-4 flex items-center gap-2'>
|
||||
<Fuel className='h-6 w-6 text-red-500' />
|
||||
<span className='text-xl font-bold'>GasNetwork</span>
|
||||
</div>
|
||||
<p className='mb-4 text-gray-400'>
|
||||
Сеть современных заправок в Таджикистане. Качественное топливо и
|
||||
отличный сервис.
|
||||
</p>
|
||||
<div className='flex space-x-4'>
|
||||
<a href='#' className='text-gray-400 hover:text-white'>
|
||||
<svg
|
||||
className='h-6 w-6'
|
||||
fill='currentColor'
|
||||
viewBox='0 0 24 24'
|
||||
aria-hidden='true'
|
||||
>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z'
|
||||
clipRule='evenodd'
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href='#' className='text-gray-400 hover:text-white'>
|
||||
<svg
|
||||
className='h-6 w-6'
|
||||
fill='currentColor'
|
||||
viewBox='0 0 24 24'
|
||||
aria-hidden='true'
|
||||
>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'
|
||||
clipRule='evenodd'
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href='#' className='text-gray-400 hover:text-white'>
|
||||
<svg
|
||||
className='h-6 w-6'
|
||||
fill='currentColor'
|
||||
viewBox='0 0 24 24'
|
||||
aria-hidden='true'
|
||||
>
|
||||
<path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='mb-4 text-lg font-semibold'>Контакты</h3>
|
||||
<div className='space-y-3'>
|
||||
<div className='flex items-start'>
|
||||
<MapPin className='mt-0.5 mr-3 h-5 w-5 text-red-500' />
|
||||
<p>ул. Рудаки 137, Душанбе, Таджикистан</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='mb-4 text-lg font-semibold'>Навигация</h3>
|
||||
<ul className='space-y-2'>
|
||||
<li>
|
||||
<Link
|
||||
href='#stations'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Наши заправки
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href='#about' className='text-gray-400 hover:text-white'>
|
||||
О нас
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href='#vacancies'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Вакансии
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href='#promotions'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Акции
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href='#partners'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Партнеры
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href='#charity'
|
||||
className='text-gray-400 hover:text-white'
|
||||
>
|
||||
Благотворительность
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='mb-4 text-lg font-semibold'>Подписка</h3>
|
||||
<p className='mb-4 text-gray-400'>
|
||||
Подпишитесь на нашу рассылку, чтобы получать новости и специальные
|
||||
предложения.
|
||||
</p>
|
||||
<form className='space-y-2'>
|
||||
<input
|
||||
type='email'
|
||||
placeholder='Ваш email'
|
||||
className='w-full rounded-md border border-gray-700 bg-gray-800 px-4 py-2 text-white'
|
||||
/>
|
||||
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
||||
Подписаться
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'>
|
||||
<p>
|
||||
© {new Date().getFullYear()} GasNetwork. Все права защищены.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
67
src/widgets/header.tsx
Normal file
67
src/widgets/header.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import { Fuel } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
export const Header = () => {
|
||||
return (
|
||||
<header className='sticky top-0 z-40 w-full border-b bg-white'>
|
||||
<div className='container flex h-16 items-center justify-between py-4'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Fuel className='h-6 w-6 text-red-600' />
|
||||
<span className='text-xl font-bold'>GasNetwork</span>
|
||||
</div>
|
||||
<nav className='hidden items-center gap-6 md:flex'>
|
||||
<Link
|
||||
href='#stations'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Наши заправки
|
||||
</Link>
|
||||
<Link
|
||||
href='#about'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
О нас
|
||||
</Link>
|
||||
<Link
|
||||
href='#vacancies'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Вакансии
|
||||
</Link>
|
||||
<Link
|
||||
href='#promotions'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Акции
|
||||
</Link>
|
||||
<Link
|
||||
href='#partners'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Партнеры
|
||||
</Link>
|
||||
<Link
|
||||
href='#charity'
|
||||
className='text-sm font-medium transition-colors hover:text-red-600'
|
||||
>
|
||||
Благотворительность
|
||||
</Link>
|
||||
<Button variant='link' size='sm' className='bg-accent'>
|
||||
TJ
|
||||
</Button>
|
||||
</nav>
|
||||
<div className='flex items-center gap-4'>
|
||||
<Button variant='outline' size='sm' className='hidden md:flex'>
|
||||
TJ
|
||||
</Button>
|
||||
<Button variant='outline' size='sm' className='hidden md:flex'>
|
||||
RU
|
||||
</Button>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>Контакты</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
45
src/widgets/hero-section.tsx
Normal file
45
src/widgets/hero-section.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { MapPin } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
export const HeroSection = () => {
|
||||
return (
|
||||
<section className='relative'>
|
||||
<div className='relative h-[500px] w-full overflow-hidden'>
|
||||
<Image
|
||||
src='/placeholder.svg?height=500&width=1920'
|
||||
alt='Gas Station Network'
|
||||
width={1920}
|
||||
height={500}
|
||||
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'>
|
||||
<div className='max-w-lg 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 className='flex gap-4'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Найти заправку <MapPin className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
className='border-white text-white hover:bg-white/10'
|
||||
>
|
||||
Узнать больше
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
34
src/widgets/map-section.tsx
Normal file
34
src/widgets/map-section.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { ChevronRight, MapPin } from 'lucide-react';
|
||||
|
||||
import { GasStationMap } from '@/features/map';
|
||||
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
export const MapSection = () => {
|
||||
return (
|
||||
<section id='stations' className='bg-gray-50 py-16'>
|
||||
<div className='container'>
|
||||
<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>
|
||||
<div className='h-[500px] overflow-hidden rounded-xl border shadow-lg'>
|
||||
<GasStationMap />
|
||||
</div>
|
||||
<div className='mt-8 flex justify-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Показать все заправки <ChevronRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
53
src/widgets/partners-section.tsx
Normal file
53
src/widgets/partners-section.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { Handshake } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
export const PartnersSection = () => {
|
||||
return (
|
||||
<section id='partners' className='bg-gray-50 py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Handshake 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 grid-cols-2 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 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
|
||||
>
|
||||
<Image
|
||||
src={`/placeholder.svg?height=80&width=160&text=Partner ${partner}`}
|
||||
alt={`Partner ${partner}`}
|
||||
width={160}
|
||||
height={80}
|
||||
className='max-h-16 w-auto'
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className='mt-12 text-center'>
|
||||
<h3 className='mb-4 text-xl font-bold'>Станьте нашим партнером</h3>
|
||||
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
||||
Мы открыты для сотрудничества и новых партнерских отношений.
|
||||
Свяжитесь с нами для обсуждения возможностей.
|
||||
</p>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Связаться с нами
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
31
src/widgets/promotions-section.tsx
Normal file
31
src/widgets/promotions-section.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import { ArrowRight, Gift } from 'lucide-react';
|
||||
|
||||
import PromotionSlider from '@/shared/components/promotion-slider';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
export const PromotionsSection = () => {
|
||||
return (
|
||||
<section id='promotions' className='bg-gray-50 py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Gift 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>
|
||||
<PromotionSlider />
|
||||
<div className='mt-8 flex justify-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Все акции <ArrowRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import AnimatedCounter from './animated-counter';
|
||||
import AnimatedCounter from '../shared/components/animated-counter';
|
||||
|
||||
export default function StatsSection() {
|
||||
export function StatsSection() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
152
src/widgets/vacancies-section.tsx
Normal file
152
src/widgets/vacancies-section.tsx
Normal file
@ -0,0 +1,152 @@
|
||||
import { ArrowRight, Briefcase } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from '@/shared/shadcn-ui/tabs';
|
||||
|
||||
export const VacanciesSection = () => {
|
||||
return (
|
||||
<section id='vacancies' className='py-16'>
|
||||
<div className='container'>
|
||||
<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'>
|
||||
<Briefcase 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>
|
||||
|
||||
<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>
|
||||
</TabsList>
|
||||
<TabsContent value='all' className='space-y-4'>
|
||||
{[
|
||||
'Оператор АЗС',
|
||||
'Менеджер по продажам',
|
||||
'Бухгалтер',
|
||||
'Специалист по логистике',
|
||||
].map((job, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
>
|
||||
<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'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
<TabsContent value='office' className='space-y-4'>
|
||||
{[
|
||||
'Менеджер по продажам',
|
||||
'Бухгалтер',
|
||||
'Специалист по логистике',
|
||||
].map((job, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
>
|
||||
<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'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
<TabsContent value='stations' className='space-y-4'>
|
||||
{['Оператор АЗС', 'Заправщик', 'Менеджер станции'].map(
|
||||
(job, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
>
|
||||
<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'>
|
||||
Подробнее
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
),
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className='mt-8 flex justify-center'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
Отправить резюме <ArrowRight className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user