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 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 { Providers } from '@/shared/providers/providers';
|
||||||
|
|
||||||
|
import { Footer } from '@/widgets/footer';
|
||||||
|
import { Header } from '@/widgets/header';
|
||||||
|
|
||||||
import './globals.css';
|
import './globals.css';
|
||||||
|
|
||||||
const inter = Inter({ subsets: ['latin', 'cyrillic'] });
|
const inter = Inter({ subsets: ['latin', 'cyrillic'] });
|
||||||
@ -21,7 +24,11 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang='en' suppressHydrationWarning>
|
<html lang='en' suppressHydrationWarning>
|
||||||
<body className={`${inter.className} antialiased`}>
|
<body className={`${inter.className} antialiased`}>
|
||||||
<Providers>{children}</Providers>
|
<Providers>
|
||||||
|
<Header />
|
||||||
|
{children}
|
||||||
|
<Footer />
|
||||||
|
</Providers>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
686
src/app/page.tsx
686
src/app/page.tsx
@ -1,677 +1,25 @@
|
|||||||
import {
|
import { AboutSection } from '@/widgets/about-section';
|
||||||
ArrowRight,
|
import { CharitySection } from '@/widgets/charity-section';
|
||||||
Briefcase,
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
ChevronRight,
|
import { HeroSection } from '@/widgets/hero-section';
|
||||||
Fuel,
|
import { MapSection } from '@/widgets/map-section';
|
||||||
Gift,
|
import { PartnersSection } from '@/widgets/partners-section';
|
||||||
Handshake,
|
import { PromotionsSection } from '@/widgets/promotions-section';
|
||||||
Heart,
|
import { StatsSection } from '@/widgets/stats-section';
|
||||||
Mail,
|
import { VacanciesSection } from '@/widgets/vacancies-section';
|
||||||
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';
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
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'>
|
<main className='flex-1'>
|
||||||
{/* Hero Section */}
|
<HeroSection />
|
||||||
<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 />
|
<StatsSection />
|
||||||
|
<MapSection />
|
||||||
{/* Map Section */}
|
<AboutSection />
|
||||||
<section id='stations' className='bg-gray-50 py-16'>
|
<PromotionsSection />
|
||||||
<div className='container'>
|
<VacanciesSection />
|
||||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
<PartnersSection />
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
<CharitySection />
|
||||||
<MapPin className='h-6 w-6 text-red-600' />
|
<CtaSection />
|
||||||
</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>
|
</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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
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 { 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 [isVisible, setIsVisible] = useState(false);
|
||||||
const sectionRef = useRef<HTMLDivElement>(null);
|
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