adilovcode/oriyo_next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into add-pages

Browse Source
This commit is contained in:
khadiatullo 2025-04-27 22:06:39 +03:00
commit 0b895d68e1
19 changed files with 169 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -39,6 +39,7 @@
"sonner": "^2.0.3", "sonner": "^2.0.3",
"tailwind-merge": "^3.2.0", "tailwind-merge": "^3.2.0",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"tailwindcss-animated": "^2.0.0",
"tw-animate-css": "^1.2.6", "tw-animate-css": "^1.2.6",
"zod": "^3.24.3" "zod": "^3.24.3"
}, },

12
pnpm-lock.yaml generated
View File

@ -95,6 +95,9 @@ importers:
tailwindcss-animate: tailwindcss-animate:
specifier: ^1.0.7 specifier: ^1.0.7
version: 1.0.7(tailwindcss@4.1.4) version: 1.0.7(tailwindcss@4.1.4)
tailwindcss-animated:
specifier: ^2.0.0
version: 2.0.0(tailwindcss@4.1.4)
tw-animate-css: tw-animate-css:
specifier: ^1.2.6 specifier: ^1.2.6
version: 1.2.6 version: 1.2.6
@ -2538,6 +2541,11 @@ packages:
peerDependencies: peerDependencies:
tailwindcss: '>=3.0.0 || insiders' tailwindcss: '>=3.0.0 || insiders'
tailwindcss-animated@2.0.0:
resolution: {integrity: sha512-anNNGpxNgjydD8p1lcJjxxH+XbjW6KR8Xs29owTrbcf3tOJ6IRblpyFob43HBkfxFJJTAfFQqugoEG2b1EsR0A==}
peerDependencies:
tailwindcss: '>=3.1.0 || >=4.0.0'
tailwindcss@4.1.4: tailwindcss@4.1.4:
resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==} resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
@ -5138,6 +5146,10 @@ snapshots:
dependencies: dependencies:
tailwindcss: 4.1.4 tailwindcss: 4.1.4
tailwindcss-animated@2.0.0(tailwindcss@4.1.4):
dependencies:
tailwindcss: 4.1.4
tailwindcss@4.1.4: {} tailwindcss@4.1.4: {}
tapable@2.2.1: {} tapable@2.2.1: {}

BIN
public/oriyo_bg.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

51
src/app/globals.css
View File

@ -1,5 +1,6 @@
@import 'tailwindcss'; @import 'tailwindcss';
@import "tw-animate-css"; @import 'tw-animate-css';
@import 'tailwindcss-animated';
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
@ -49,7 +50,7 @@
--card-foreground: oklch(0.145 0 0); --card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0); --popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.577 0.245 27.325) ; --primary: oklch(0.577 0.245 27.325);
--primary-foreground: oklch(0.985 0 0); --primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0); --secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: oklch(0.205 0 0);
@ -120,49 +121,3 @@
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
.tracking-in-expand {
animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
.heartbeat {
animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes heartbeat {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(0.91);
animation-timing-function: ease-in;
}
17% {
transform: scale(0.98);
animation-timing-function: ease-out;
}
33% {
transform: scale(0.87);
animation-timing-function: ease-in;
}
45% {
transform: scale(1);
animation-timing-function: ease-out;
}
}

7
src/app/layout.tsx
View File

@ -22,7 +22,12 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang='en' suppressHydrationWarning> <html
lang='en'
suppressHydrationWarning
className='scroll-smooth'
style={{ scrollBehavior: 'smooth' }}
>
<body className={`${inter.className} antialiased`}> <body className={`${inter.className} antialiased`}>
<Providers> <Providers>
<Header /> <Header />

8
src/features/map/ui/gas-station-map.tsx
View File

@ -529,8 +529,8 @@ export default function GasStationMap() {
className='border border-gray-200 bg-white text-gray-800 shadow-md hover:bg-gray-100' className='border border-gray-200 bg-white text-gray-800 shadow-md hover:bg-gray-100'
onClick={() => setIsFilterOpen(true)} onClick={() => setIsFilterOpen(true)}
> >
<Filter className='mr-2 h-4 w-4 text-red-600' /> <Filter className='h-4 w-4 text-red-600 sm:mr-2' />
{t('map.filters')} <span className='hidden sm:flex'>{t('map.filters')}</span>
{(activeFilters.length > 0 || activeCities.length > 0) && ( {(activeFilters.length > 0 || activeCities.length > 0) && (
<Badge className='ml-2 bg-red-600' variant='default'> <Badge className='ml-2 bg-red-600' variant='default'>
{activeFilters.length + activeCities.length} {activeFilters.length + activeCities.length}
@ -546,8 +546,8 @@ export default function GasStationMap() {
className='border border-gray-200 bg-white text-gray-800 shadow-md hover:bg-gray-100' className='border border-gray-200 bg-white text-gray-800 shadow-md hover:bg-gray-100'
onClick={() => setIsStationListOpen(true)} onClick={() => setIsStationListOpen(true)}
> >
<List className='mr-2 h-4 w-4 text-red-600' /> <List className='h-4 w-4 text-red-600 sm:mr-2' />
{t('map.stationsList')} <span className='hidden sm:flex'>{t('map.stationsList')}</span>
<Badge className='ml-2 bg-red-600' variant='default'> <Badge className='ml-2 bg-red-600' variant='default'>
{filteredStations.length} {filteredStations.length}
</Badge> </Badge>

8
src/shared/components/about-counter.tsx
View File

@ -33,8 +33,8 @@ export default function AboutCounter() {
}, []); }, []);
return ( return (
<div ref={sectionRef} className='my-8 grid grid-cols-3 gap-6 text-center'> <div ref={sectionRef} className='my-8 grid grid-cols-1 gap-6 text-center'>
<div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'> <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'> <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' /> <Users className='h-6 w-6 text-red-600' />
</div> </div>
@ -43,7 +43,7 @@ export default function AboutCounter() {
</h3> </h3>
<p className='text-gray-600'>Сотрудников</p> <p className='text-gray-600'>Сотрудников</p>
</div> </div>
<div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'> <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'> <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' /> <Users className='h-6 w-6 text-red-600' />
</div> </div>
@ -52,7 +52,7 @@ export default function AboutCounter() {
</h3> </h3>
<p className='text-gray-600'>Литров топлива в месяц</p> <p className='text-gray-600'>Литров топлива в месяц</p>
</div> </div>
<div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'> <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'> <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' /> <Users className='h-6 w-6 text-red-600' />
</div> </div>

86
src/widgets/about-section.tsx
View File

@ -10,7 +10,7 @@ export const AboutSection = () => {
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<section id='about' className='py-16'> <section id='about' className='px-2 py-8 sm:py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='grid items-center gap-12 md:grid-cols-2'> <div className='grid items-center gap-12 md:grid-cols-2'>
<div> <div>
@ -24,47 +24,7 @@ export const AboutSection = () => {
<p className='mb-6 text-gray-600'>{t('home.about.description2')}</p> <p className='mb-6 text-gray-600'>{t('home.about.description2')}</p>
<AboutCounter /> <AboutCounter />
<div className='space-y-4'> <Features />
<div className='flex items-start'>
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
<span className='text-xs text-white'>✓</span>
</div>
<div className='ml-3'>
<h3 className='text-lg font-medium'>
{t('home.about.features.quality.title')}
</h3>
<p className='text-gray-600'>
{t('home.about.features.quality.description')}
</p>
</div>
</div>
<div className='flex items-start'>
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
<span className='text-xs text-white'>✓</span>
</div>
<div className='ml-3'>
<h3 className='text-lg font-medium'>
{t('home.about.features.equipment.title')}
</h3>
<p className='text-gray-600'>
{t('home.about.features.equipment.description')}
</p>
</div>
</div>
<div className='flex items-start'>
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
<span className='text-xs text-white'>✓</span>
</div>
<div className='ml-3'>
<h3 className='text-lg font-medium'>
{t('home.about.features.staff.title')}
</h3>
<p className='text-gray-600'>
{t('home.about.features.staff.description')}
</p>
</div>
</div>
</div>
</div> </div>
<div <div
className='relative h-[400px] overflow-hidden rounded-xl shadow-xl' className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
@ -82,3 +42,45 @@ export const AboutSection = () => {
</section> </section>
); );
}; };
interface Feature {
title: string;
description: string;
}
const features: Array<Feature> = [
{
title: 'home.about.features.quality.title',
description: 'home.about.features.quality.description',
},
{
title: 'home.about.features.equipment.title',
description: 'home.about.features.equipment.description',
},
{
title: 'home.about.features.staff.title',
description: 'home.about.features.staff.description',
},
];
const Features = () => {
const { t } = useLanguage();
return (
<div className='space-y-4'>
{features.map(({ title, description }) => {
return (
<div className='flex items-start'>
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
<span className='text-xs text-white'>✓</span>
</div>
<div className='ml-3'>
<h3 className='text-lg font-medium'>{t(title)}</h3>
<p className='text-gray-600'>{t(description)}</p>
</div>
</div>
);
})}
</div>
);
};

8
src/widgets/charity-section.tsx
View File

@ -11,12 +11,12 @@ export const CharitySection = () => {
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<section id='charity' className='py-16'> <section id='charity' className='px-2 py-8 sm:py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='grid items-center gap-12 md:grid-cols-2'> <div className='grid items-center gap-12 md:grid-cols-2'>
<div <div
className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1' className='relative order-2 h-[400px] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
data-aos='zoom-out-up' data-aos='zoom-in'
> >
<Image <Image
src='/placeholder.svg?height=400&width=600' src='/placeholder.svg?height=400&width=600'
@ -29,7 +29,7 @@ export const CharitySection = () => {
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'> <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' /> <Heart className='h-6 w-6 text-red-600' />
</div> </div>
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'> <h2 className='mb-6 text-xl font-bold tracking-tight sm:text-4xl'>
{t('home.charity.title')} {t('home.charity.title')}
</h2> </h2>
<p className='mb-6 text-gray-600'> <p className='mb-6 text-gray-600'>

5
src/widgets/cta-section.tsx
View File

@ -1,14 +1,15 @@
'use client'; 'use client';
import Link from 'next/link';
import { useLanguage } from '@/shared/language'; import { useLanguage } from '@/shared/language';
import { Button } from '@/shared/shadcn-ui/button'; import { Button } from '@/shared/shadcn-ui/button';
import Link from 'next/link';
export const CtaSection = () => { export const CtaSection = () => {
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<section className='bg-red-600 py-16 text-white'> <section className='bg-red-600 px-2 py-8 text-white sm:py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='flex flex-col items-center text-center'> <div className='flex flex-col items-center text-center'>
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'> <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>

2
src/widgets/footer.tsx
View File

@ -5,8 +5,6 @@ import Link from 'next/link';
import { useLanguage } from '@/shared/language'; import { useLanguage } from '@/shared/language';
import '.././app/globals.css';
export const Footer = () => { export const Footer = () => {
const { t } = useLanguage(); const { t } = useLanguage();

8
src/widgets/header/ui/index.tsx
View File

@ -5,7 +5,7 @@ import Link from 'next/link';
import { Logo } from '@/shared/assets/logo'; import { Logo } from '@/shared/assets/logo';
import { useLanguage } from '@/shared/language'; import { useLanguage } from '@/shared/language';
import { LanguageSwitcher } from '@/shared/language/ui/language-switcher'; // import { LanguageSwitcher } from '@/shared/language/ui/language-switcher';
import { Button } from '@/shared/shadcn-ui/button'; import { Button } from '@/shared/shadcn-ui/button';
import { DesktopNav } from './desktop-nav'; import { DesktopNav } from './desktop-nav';
@ -19,10 +19,10 @@ export function Header() {
<div className='container mx-auto flex h-16 items-center justify-between p-4'> <div className='container mx-auto flex h-16 items-center justify-between p-4'>
<Logo /> <Logo />
<DesktopNav /> <DesktopNav />
<div className='flex items-center gap-6 lg:contents'> <div className='flex items-center gap-3 sm:gap-6 lg:contents'>
<MobileNav /> <MobileNav />
<div className='flex items-center gap-6'> <div className='flex items-center gap-3 sm:gap-6'>
<LanguageSwitcher /> {/* <LanguageSwitcher /> */}
<Link href={'/login'}> <Link href={'/login'}>
<Button className='flex items-center gap-2'> <Button className='flex items-center gap-2'>
<UserCircle className='size-4' /> <UserCircle className='size-4' />

23
src/widgets/hero-section.tsx
View File

@ -2,38 +2,36 @@
import { MapPin } from 'lucide-react'; import { MapPin } from 'lucide-react';
import Image from 'next/image'; import Image from 'next/image';
import '../../src/app/globals.css' import Link from 'next/link';
import { useLanguage } from '@/shared/language'; import { useLanguage } from '@/shared/language';
import { Button } from '@/shared/shadcn-ui/button'; import { Button } from '@/shared/shadcn-ui/button';
import Link from 'next/link';
export const HeroSection = () => { export const HeroSection = () => {
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<section className='relative'> <section className='relative'>
<div className='relative h-[500px] w-full overflow-hidden'> <div className='relative h-[300px] w-full overflow-hidden md:h-[500px] xl:h-[700px]'>
<Image <Image
src='/placeholder.svg?height=500&width=1920' src='/oriyo_bg.jpeg'
alt='Gas Station Network' alt='Gas Station Network'
width={1920} fill
height={500}
className='object-cover' className='object-cover'
priority priority
/> />
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'> <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30 px-2'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='max-w-lg space-y-4 text-white'> <div className='max-w-lg space-y-4 text-white'>
<div className='tracking-in-expand'> <div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'> <h1 className='text-2xl font-bold tracking-tight sm:text-4xl md:text-6xl'>
{t('home.hero.title')} {t('home.hero.title')}
</h1> </h1>
</div> </div>
<p className='text-lg text-gray-200'> <p className='text-gray-200 sm:text-lg'>
{t('home.hero.description')} {t('home.hero.description')}
</p> </p>
<div className='flex gap-4'> <div className='flex flex-col gap-2 sm:flex-row sm:gap-4'>
<Link href='#'> <Link href='#'>
<Button className='bg-red-600 hover:bg-red-700'> <Button className='bg-red-600 hover:bg-red-700'>
{t('common.buttons.findStation')}{' '} {t('common.buttons.findStation')}{' '}
@ -41,8 +39,7 @@ export const HeroSection = () => {
</Button> </Button>
</Link> </Link>
<Link href='#'> <Link href='#'>
<Button variant='outline' className='animate-pulse' <Button variant='outline' className='animate-pulse'>
>
{t('common.buttons.learnMore')} {t('common.buttons.learnMore')}
</Button> </Button>
</Link> </Link>

2
src/widgets/map-section.tsx
View File

@ -10,7 +10,7 @@ export const MapSection = () => {
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<section id='stations' className='bg-gray-50 py-16'> <section id='stations' className='bg-gray-50 px-2 py-8 sm:py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 flex flex-col items-center justify-center text-center'> <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'> <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>

9
src/widgets/partners-section.tsx
View File

@ -2,17 +2,16 @@
import { Handshake } from 'lucide-react'; import { Handshake } from 'lucide-react';
import Image from 'next/image'; import Image from 'next/image';
import png from './7fe1595f25e868852247248389bc2b3ac910bf94.png' import Link from 'next/link';
import { useLanguage } from '@/shared/language'; import { useLanguage } from '@/shared/language';
import { Button } from '@/shared/shadcn-ui/button'; import { Button } from '@/shared/shadcn-ui/button';
import Link from 'next/link';
export const PartnersSection = () => { export const PartnersSection = () => {
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<section id='partners' className='bg-gray-50 py-16'> <section id='partners' className='bg-gray-50 px-2 py-8 sm:py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 flex flex-col items-center justify-center text-center'> <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'> <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -26,11 +25,11 @@ export const PartnersSection = () => {
</p> </p>
</div> </div>
<div className='grid grid-cols-2 gap-8 md:grid-cols-4'> <div className='grid grid-cols-2 gap-4 sm:gap-8 md:grid-cols-4'>
{[1, 2, 3, 4, 5, 6, 7, 8].map((partner) => ( {[1, 2, 3, 4, 5, 6, 7, 8].map((partner) => (
<div <div
key={partner} key={partner}
className='flex h-32 items-center justify-center flex-col gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105' className='flex h-32 flex-col items-center justify-center gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
data-aos='flip-left' data-aos='flip-left'
> >
<Image <Image

2
src/widgets/promotions-section.tsx
View File

@ -9,7 +9,7 @@ export const PromotionsSection = () => {
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<section id='promotions' className='bg-gray-50 py-16'> <section id='promotions' className='bg-gray-50 py-8 px-2 sm:py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 flex flex-col items-center justify-center text-center'> <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'> <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>

4
src/widgets/stats-section.tsx
View File

@ -35,9 +35,9 @@ export function StatsSection() {
}, []); }, []);
return ( return (
<section ref={sectionRef} className='bg-red-600 py-12 text-white'> <section ref={sectionRef} className='bg-red-600 py-6 sm:py-12 px-2 text-white'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'> <div className='grid grid-cols-2 gap-4 sm:gap-8 text-center md:grid-cols-4'>
<div className='space-y-2'> <div className='space-y-2'>
<h3 className='text-3xl font-bold'> <h3 className='text-3xl font-bold'>
{isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'} {isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}

149
src/widgets/vacancies-section.tsx
View File

@ -3,6 +3,8 @@
import { Briefcase } from 'lucide-react'; import { Briefcase } from 'lucide-react';
import { useLanguage } from '@/shared/language'; import { useLanguage } from '@/shared/language';
import { cn } from '@/shared/lib/utils';
import { Badge } from '@/shared/shadcn-ui/badge';
import { Button } from '@/shared/shadcn-ui/button'; import { Button } from '@/shared/shadcn-ui/button';
import { Card, CardContent } from '@/shared/shadcn-ui/card'; import { Card, CardContent } from '@/shared/shadcn-ui/card';
import { import {
@ -16,7 +18,7 @@ export const VacanciesSection = () => {
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<section id='vacancies' className='py-16'> <section id='vacancies' className='px-2 py-8 sm:py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 flex flex-col items-center justify-center text-center'> <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'> <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -43,35 +45,12 @@ export const VacanciesSection = () => {
'Бухгалтер', 'Бухгалтер',
'Специалист по логистике', 'Специалист по логистике',
].map((job, index) => ( ].map((job, index) => (
<Card <Vacancy
key={index} key={index}
className='overflow-hidden transition-all hover:shadow-md' jobTitle={job}
data-aos='zoom-in' location='Душанбе, Таджикистан'
> tags={['Полный день', 'Опыт от 1 года']}
<CardContent className='p-0'> />
<div className='p-6'>
<div className='flex items-start justify-between'>
<div>
<h3 className='mb-2 text-lg font-bold'>{job}</h3>
<p className='mb-4 text-sm text-gray-500'>
Душанбе, Таджикистан
</p>
<div className='mb-4 flex flex-wrap gap-2'>
<span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800'>
Полный день
</span>
<span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
Опыт от 1 года
</span>
</div>
</div>
<Button variant='outline' size='sm'>
{t('common.buttons.apply')}
</Button>
</div>
</div>
</CardContent>
</Card>
))} ))}
</TabsContent> </TabsContent>
<TabsContent value='office' className='space-y-4'> <TabsContent value='office' className='space-y-4'>
@ -80,69 +59,23 @@ export const VacanciesSection = () => {
'Бухгалтер', 'Бухгалтер',
'Специалист по логистике', 'Специалист по логистике',
].map((job, index) => ( ].map((job, index) => (
<Card <Vacancy
key={index} key={index}
className='overflow-hidden transition-all hover:shadow-md' jobTitle={job}
data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'} location='Душанбе, Таджикистан'
> tags={['Полный день', 'Опыт от 1 года']}
<CardContent className='p-0'> />
<div className='p-6'>
<div className='flex items-start justify-between'>
<div>
<h3 className='mb-2 text-lg font-bold'>{job}</h3>
<p className='mb-4 text-sm text-gray-500'>
Душанбе, Таджикистан
</p>
<div className='mb-4 flex flex-wrap gap-2'>
<span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800'>
Полный день
</span>
<span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
Опыт от 1 года
</span>
</div>
</div>
<Button variant='outline' size='sm'>
{t('common.buttons.apply')}
</Button>
</div>
</div>
</CardContent>
</Card>
))} ))}
</TabsContent> </TabsContent>
<TabsContent value='stations' className='space-y-4'> <TabsContent value='stations' className='space-y-4'>
{['Оператор АЗС', 'Заправщик', 'Менеджер станции'].map( {['Оператор АЗС', 'Заправщик', 'Менеджер станции'].map(
(job, index) => ( (job, index) => (
<Card <Vacancy
key={index} key={index}
className='overflow-hidden transition-all hover:shadow-md' jobTitle={job}
data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'} location='Душанбе, Таджикистан'
> tags={['Сменный график', 'Обучение']}
<CardContent className='p-0'> />
<div className='p-6'>
<div className='flex items-start justify-between'>
<div>
<h3 className='mb-2 text-lg font-bold'>{job}</h3>
<p className='mb-4 text-sm text-gray-500'>
Душанбе, Таджикистан
</p>
<div className='mb-4 flex flex-wrap gap-2'>
<span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800'>
Сменный график
</span>
<span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
Обучение
</span>
</div>
</div>
<Button variant='outline' size='sm'>
{t('common.buttons.apply')}
</Button>
</div>
</div>
</CardContent>
</Card>
), ),
)} )}
</TabsContent> </TabsContent>
@ -151,3 +84,49 @@ export const VacanciesSection = () => {
</section> </section>
); );
}; };
interface VacancyProps {
jobTitle: string;
location: string;
tags: Array<string>;
}
const Vacancy = ({ jobTitle, location, tags }: VacancyProps) => {
const { t } = useLanguage();
return (
<Card
className='overflow-hidden transition-all hover:shadow-md'
data-aos='zoom-in'
>
<CardContent className='p-0'>
<div className='p-6'>
<div className='flex flex-col items-start justify-between sm:flex-row'>
<div>
<h3 className='mb-2 text-lg font-bold'>{jobTitle}</h3>
<p className='mb-4 text-sm text-gray-500'>{location}</p>
<div className='mb-4 flex flex-wrap gap-2'>
{tags.map((tag, index) => {
return (
<Badge
key={index}
className={cn(
'inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium',
`${index % 2 === 0 ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800'}`,
)}
>
{tag}
</Badge>
);
})}
</div>
</div>
<Button variant='outline' size='sm'>
{t('common.buttons.apply')}
</Button>
</div>
</div>
</CardContent>
</Card>
);
};

3
tailwind.config.js
View File

@ -1,4 +1,5 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
import tailwindcssAnimated from 'tailwindcss-animated';
module.exports = { module.exports = {
darkMode: ['class'], darkMode: ['class'],
@ -102,5 +103,5 @@ module.exports = {
}, },
}, },
}, },
plugins: [require('tailwindcss-animate')], plugins: [require('tailwindcss-animate'), tailwindcssAnimated],
}; };