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

Compare commits

base: adilovcode:de1e0a4a89bc1a3c85a18c68480c59ca3264c885
Branches Tags
adilovcode:dev
adilovcode:feat-get-media
adilovcode:fix-bugs
adilovcode:change-partners-section
adilovcode:add-pages
adilovcode:render-main-page-data
adilovcode:feat/auth
..
compare: adilovcode:9cc3e70b476c5be2fcca4ff5ea10b42ec99fea91
Branches Tags
adilovcode:dev
adilovcode:feat-get-media
adilovcode:fix-bugs
adilovcode:change-partners-section
adilovcode:add-pages
adilovcode:render-main-page-data
adilovcode:feat/auth

No commits in common. "de1e0a4a89bc1a3c85a18c68480c59ca3264c885" and "9cc3e70b476c5be2fcca4ff5ea10b42ec99fea91" have entirely different histories.
de1e0a4a89 ... 9cc3e70b47

19 changed files with 219 additions and 169 deletions
Show Stats Expand all files Collapse all files

1
package.json
View File

@ -39,7 +39,6 @@
"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,9 +95,6 @@ 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
@ -2541,11 +2538,6 @@ 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==}
@ -5146,10 +5138,6 @@ 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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 112 KiB

49
src/app/globals.css
View File

@ -1,6 +1,5 @@
@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 *));
@ -121,3 +120,49 @@
@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,12 +22,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html <html lang='en' suppressHydrationWarning>
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='h-4 w-4 text-red-600 sm:mr-2' /> <Filter className='mr-2 h-4 w-4 text-red-600' />
<span className='hidden sm:flex'>{t('map.filters')}</span> {t('map.filters')}
{(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='h-4 w-4 text-red-600 sm:mr-2' /> <List className='mr-2 h-4 w-4 text-red-600' />
<span className='hidden sm:flex'>{t('map.stationsList')}</span> {t('map.stationsList')}
<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-1 gap-6 text-center'> <div ref={sectionRef} className='my-8 grid grid-cols-3 gap-6 text-center'>
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'> <div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
<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-3 shadow-md transition-transform hover:scale-105 sm:p-6'> <div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
<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-3 shadow-md transition-transform hover:scale-105 sm:p-6'> <div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
<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='px-2 py-8 sm:py-16'> <section id='about' className='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,7 +24,47 @@ 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 />
<Features /> <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'>
{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'
@ -42,45 +82,3 @@ 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='px-2 py-8 sm:py-16'> <section id='charity' className='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] w-full overflow-hidden rounded-xl shadow-xl md:order-1' className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'
data-aos='zoom-in' data-aos='zoom-out-up'
> >
<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-xl font-bold tracking-tight sm:text-4xl'> <h2 className='mb-6 text-3xl 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,15 +1,14 @@
'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 px-2 py-8 text-white sm:py-16'> <section className='bg-red-600 py-16 text-white'>
<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,6 +5,8 @@ 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-3 sm:gap-6 lg:contents'> <div className='flex items-center gap-6 lg:contents'>
<MobileNav /> <MobileNav />
<div className='flex items-center gap-3 sm:gap-6'> <div className='flex items-center 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,36 +2,38 @@
import { MapPin } from 'lucide-react'; import { MapPin } from 'lucide-react';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import '../../src/app/globals.css'
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-[300px] w-full overflow-hidden md:h-[500px] xl:h-[700px]'> <div className='relative h-[500px] w-full overflow-hidden'>
<Image <Image
src='/oriyo_bg.jpeg' src='/placeholder.svg?height=500&width=1920'
alt='Gas Station Network' alt='Gas Station Network'
fill width={1920}
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 px-2'> <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
<div className='container mx-auto'> <div className='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='animate-fade animate-duration-[3000ms] animate-ease-in-out'> <div className='tracking-in-expand'>
<h1 className='text-2xl font-bold tracking-tight sm:text-4xl md:text-6xl'> <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
{t('home.hero.title')} {t('home.hero.title')}
</h1> </h1>
</div> </div>
<p className='text-gray-200 sm:text-lg'> <p className='text-lg text-gray-200'>
{t('home.hero.description')} {t('home.hero.description')}
</p> </p>
<div className='flex flex-col gap-2 sm:flex-row sm:gap-4'> <div className='flex 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')}{' '}
@ -39,7 +41,8 @@ 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 px-2 py-8 sm:py-16'> <section id='stations' className='bg-gray-50 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,16 +2,17 @@
import { Handshake } from 'lucide-react'; import { Handshake } from 'lucide-react';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import png from './7fe1595f25e868852247248389bc2b3ac910bf94.png'
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 px-2 py-8 sm:py-16'> <section id='partners' className='bg-gray-50 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'>
@ -25,11 +26,11 @@ export const PartnersSection = () => {
</p> </p>
</div> </div>
<div className='grid grid-cols-2 gap-4 sm:gap-8 md:grid-cols-4'> <div className='grid grid-cols-2 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 flex-col items-center justify-center gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105' 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'
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-8 px-2 sm:py-16'> <section id='promotions' className='bg-gray-50 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

@ -32,9 +32,9 @@ export function StatsSection() {
}, []); }, []);
return ( return (
<section ref={sectionRef} className='bg-red-600 py-6 sm:py-12 px-2 text-white'> <section ref={sectionRef} className='bg-red-600 py-12 text-white'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='grid grid-cols-2 gap-4 sm:gap-8 text-center md:grid-cols-4'> <div className='grid grid-cols-2 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+'}

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

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

3
tailwind.config.js
View File

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