update: make website responsive

update: add banner to main page
update: add animation package and remove animation styles from globals-css file
2025-04-27 22:48:03 +05:00 · 2025-04-27 20:11:38 +05:00 · 2025-04-27 19:42:19 +05:00 · 2025-04-27 18:59:40 +05:00
19 changed files with 169 additions and 219 deletions
--- a/package.json
+++ b/package.json
@ -39,6 +39,7 @@
    "sonner": "^2.0.3",
    "tailwind-merge": "^3.2.0",
    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-animated": "^2.0.0",
    "tw-animate-css": "^1.2.6",
    "zod": "^3.24.3"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -95,6 +95,9 @@ importers:
      tailwindcss-animate:
        specifier: ^1.0.7
        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:
        specifier: ^1.2.6
        version: 1.2.6
@ -2538,6 +2541,11 @@ packages:
    peerDependencies:
      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:
    resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}

@ -5138,6 +5146,10 @@ snapshots:
    dependencies:
      tailwindcss: 4.1.4

+  tailwindcss-animated@2.0.0(tailwindcss@4.1.4):
+    dependencies:
+      tailwindcss: 4.1.4
+
  tailwindcss@4.1.4: {}

  tapable@2.2.1: {}
--- a/public/oriyo_bg.jpeg
+++ b/public/oriyo_bg.jpeg
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -1,5 +1,6 @@
@import 'tailwindcss';
-@import "tw-animate-css";
+@import 'tw-animate-css';
+@import 'tailwindcss-animated';

@custom-variant dark (&:is(.dark *));

@ -120,49 +121,3 @@
    @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;
-  }
-}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -22,7 +22,12 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang='en' suppressHydrationWarning>
+    <html
+      lang='en'
+      suppressHydrationWarning
+      className='scroll-smooth'
+      style={{ scrollBehavior: 'smooth' }}
+    >
      <body className={`${inter.className} antialiased`}>
        <Providers>
          <Header />
--- a/src/features/map/ui/gas-station-map.tsx
+++ b/src/features/map/ui/gas-station-map.tsx
@ -529,8 +529,8 @@ export default function GasStationMap() {
          className='border border-gray-200 bg-white text-gray-800 shadow-md hover:bg-gray-100'
          onClick={() => setIsFilterOpen(true)}
        >
-          <Filter className='mr-2 h-4 w-4 text-red-600' />
-          {t('map.filters')}
+          <Filter className='h-4 w-4 text-red-600 sm:mr-2' />
+          <span className='hidden sm:flex'>{t('map.filters')}</span>
          {(activeFilters.length > 0 || activeCities.length > 0) && (
            <Badge className='ml-2 bg-red-600' variant='default'>
              {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'
          onClick={() => setIsStationListOpen(true)}
        >
-          <List className='mr-2 h-4 w-4 text-red-600' />
-          {t('map.stationsList')}
+          <List className='h-4 w-4 text-red-600 sm:mr-2' />
+          <span className='hidden sm:flex'>{t('map.stationsList')}</span>
          <Badge className='ml-2 bg-red-600' variant='default'>
            {filteredStations.length}
          </Badge>
--- a/src/shared/components/about-counter.tsx
+++ b/src/shared/components/about-counter.tsx
@ -33,8 +33,8 @@ export default function AboutCounter() {
  }, []);

  return (
-    <div ref={sectionRef} className='my-8 grid grid-cols-3 gap-6 text-center'>
-      <div className='transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'>
+    <div ref={sectionRef} className='my-8 grid grid-cols-1 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='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>
@ -43,7 +43,7 @@ export default function AboutCounter() {
        </h3>
        <p className='text-gray-600'>Сотрудников</p>
      </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'>
          <Users className='h-6 w-6 text-red-600' />
        </div>
@ -52,7 +52,7 @@ export default function AboutCounter() {
        </h3>
        <p className='text-gray-600'>Литров топлива в месяц</p>
      </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'>
          <Users className='h-6 w-6 text-red-600' />
        </div>
--- a/src/widgets/about-section.tsx
+++ b/src/widgets/about-section.tsx
@ -10,7 +10,7 @@ export const AboutSection = () => {
  const { t } = useLanguage();

  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='grid items-center gap-12 md:grid-cols-2'>
          <div>
@ -24,47 +24,7 @@ export const AboutSection = () => {
            <p className='mb-6 text-gray-600'>{t('home.about.description2')}</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'>
-                    {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>
+            <Features />
          </div>
          <div
            className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
@ -82,3 +42,45 @@ export const AboutSection = () => {
    </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>
+  );
+};
--- a/src/widgets/charity-section.tsx
+++ b/src/widgets/charity-section.tsx
@ -11,12 +11,12 @@ export const CharitySection = () => {
  const { t } = useLanguage();

  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='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'
-            data-aos='zoom-out-up'
+            className='relative order-2 h-[400px] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
+            data-aos='zoom-in'
          >
            <Image
              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'>
              <Heart className='h-6 w-6 text-red-600' />
            </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')}
            </h2>
            <p className='mb-6 text-gray-600'>
--- a/src/widgets/cta-section.tsx
+++ b/src/widgets/cta-section.tsx
@ -1,14 +1,15 @@
 'use client';

+import Link from 'next/link';
+
 import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
-import Link from 'next/link';

 export const CtaSection = () => {
  const { t } = useLanguage();

  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='flex flex-col items-center text-center'>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
--- a/src/widgets/footer.tsx
+++ b/src/widgets/footer.tsx
@ -5,8 +5,6 @@ import Link from 'next/link';

 import { useLanguage } from '@/shared/language';

-import '.././app/globals.css';
-
 export const Footer = () => {
  const { t } = useLanguage();

--- a/src/widgets/header/ui/index.tsx
+++ b/src/widgets/header/ui/index.tsx
@ -5,7 +5,7 @@ import Link from 'next/link';

 import { Logo } from '@/shared/assets/logo';
 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 { 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'>
        <Logo />
        <DesktopNav />
-        <div className='flex items-center gap-6 lg:contents'>
+        <div className='flex items-center gap-3 sm:gap-6 lg:contents'>
          <MobileNav />
-          <div className='flex items-center gap-6'>
-            <LanguageSwitcher />
+          <div className='flex items-center gap-3 sm:gap-6'>
+            {/* <LanguageSwitcher /> */}
            <Link href={'/login'}>
              <Button className='flex items-center gap-2'>
                <UserCircle className='size-4' />
--- a/src/widgets/hero-section.tsx
+++ b/src/widgets/hero-section.tsx
@ -2,38 +2,36 @@

 import { MapPin } from 'lucide-react';
 import Image from 'next/image';
-import '../../src/app/globals.css'
+import Link from 'next/link';

 import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
-import Link from 'next/link';

 export const HeroSection = () => {
  const { t } = useLanguage();

  return (
    <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
-          src='/placeholder.svg?height=500&width=1920'
+          src='/oriyo_bg.jpeg'
          alt='Gas Station Network'
-          width={1920}
-          height={500}
+          fill
          className='object-cover'
          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='max-w-lg space-y-4 text-white'>
-              <div className='tracking-in-expand'>
-                <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
+              <div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
+                <h1 className='text-2xl font-bold tracking-tight sm:text-4xl md:text-6xl'>
                  {t('home.hero.title')}
                </h1>
              </div>
-              <p className='text-lg text-gray-200'>
+              <p className='text-gray-200 sm:text-lg'>
                {t('home.hero.description')}
              </p>
-              <div className='flex gap-4'>
+              <div className='flex flex-col gap-2 sm:flex-row sm:gap-4'>
                <Link href='#'>
                  <Button className='bg-red-600 hover:bg-red-700'>
                    {t('common.buttons.findStation')}{' '}
@ -41,8 +39,7 @@ export const HeroSection = () => {
                  </Button>
                </Link>
                <Link href='#'>
-                  <Button variant='outline' className='animate-pulse'
-                  >
+                  <Button variant='outline' className='animate-pulse'>
                    {t('common.buttons.learnMore')}
                  </Button>
                </Link>
--- a/src/widgets/map-section.tsx
+++ b/src/widgets/map-section.tsx
@ -10,7 +10,7 @@ export const MapSection = () => {
  const { t } = useLanguage();

  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='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'>
--- a/src/widgets/partners-section.tsx
+++ b/src/widgets/partners-section.tsx
@ -2,17 +2,16 @@

 import { Handshake } from 'lucide-react';
 import Image from 'next/image';
-import png from './7fe1595f25e868852247248389bc2b3ac910bf94.png'
+import Link from 'next/link';

 import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';
-import Link from 'next/link';

 export const PartnersSection = () => {
  const { t } = useLanguage();

  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='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'>
@ -26,11 +25,11 @@ export const PartnersSection = () => {
          </p>
        </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) => (
            <div
              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'
            >
              <Image
--- a/src/widgets/promotions-section.tsx
+++ b/src/widgets/promotions-section.tsx
@ -9,7 +9,7 @@ export const PromotionsSection = () => {
  const { t } = useLanguage();

  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='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'>
--- a/src/widgets/stats-section.tsx
+++ b/src/widgets/stats-section.tsx
@ -32,9 +32,9 @@ export function StatsSection() {
  }, []);

  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='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'>
            <h3 className='text-3xl font-bold'>
              {isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}
--- a/src/widgets/vacancies-section.tsx
+++ b/src/widgets/vacancies-section.tsx
@ -3,6 +3,8 @@
 import { Briefcase } from 'lucide-react';

 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 { Card, CardContent } from '@/shared/shadcn-ui/card';
 import {
@ -16,7 +18,7 @@ export const VacanciesSection = () => {
  const { t } = useLanguage();

  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='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'>
@ -43,35 +45,12 @@ export const VacanciesSection = () => {
              'Бухгалтер',
              'Специалист по логистике',
            ].map((job, index) => (
-              <Card
+              <Vacancy
                key={index}
-                className='overflow-hidden transition-all hover:shadow-md'
-                data-aos='zoom-in'
-              >
-                <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>
+                jobTitle={job}
+                location='Душанбе, Таджикистан'
+                tags={['Полный день', 'Опыт от 1 года']}
+              />
            ))}
          </TabsContent>
          <TabsContent value='office' className='space-y-4'>
@ -80,69 +59,23 @@ export const VacanciesSection = () => {
              'Бухгалтер',
              'Специалист по логистике',
            ].map((job, index) => (
-              <Card
+              <Vacancy
                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>
+                jobTitle={job}
+                location='Душанбе, Таджикистан'
+                tags={['Полный день', 'Опыт от 1 года']}
+              />
            ))}
          </TabsContent>
          <TabsContent value='stations' className='space-y-4'>
            {['Оператор АЗС', 'Заправщик', 'Менеджер станции'].map(
              (job, index) => (
-                <Card
+                <Vacancy
                  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>
+                  jobTitle={job}
+                  location='Душанбе, Таджикистан'
+                  tags={['Сменный график', 'Обучение']}
+                />
              ),
            )}
          </TabsContent>
@ -151,3 +84,49 @@ export const VacanciesSection = () => {
    </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>
+  );
+};
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+import tailwindcssAnimated from 'tailwindcss-animated';

 module.exports = {
  darkMode: ['class'],
@ -102,5 +103,5 @@ module.exports = {
      },
    },
  },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), tailwindcssAnimated],
 };
Author	SHA1	Message	Date
BunyodL	de1e0a4a89	update: make website responsive	2025-04-27 22:48:03 +05:00
BunyodL	f3a25bdb02	update: add banner to main page	2025-04-27 20:11:38 +05:00
BunyodL	aaee519676	update: add animation package and remove animation styles from globals-css file	2025-04-27 19:42:19 +05:00
BunyodL	3cabf35be6	update: add smooth scroll	2025-04-27 18:59:40 +05:00