From de1e0a4a89bc1a3c85a18c68480c59ca3264c885 Mon Sep 17 00:00:00 2001
From: BunyodL <blutfulloyev@bk.ru>
Date: Sun, 27 Apr 2025 22:48:03 +0500
Subject: [PATCH] update: make website responsive

---
 src/features/map/ui/gas-station-map.tsx |   8 +-
 src/shared/components/about-counter.tsx |   8 +-
 src/widgets/about-section.tsx           |  86 +++++++-------
 src/widgets/charity-section.tsx         |   8 +-
 src/widgets/cta-section.tsx             |   5 +-
 src/widgets/header/ui/index.tsx         |   8 +-
 src/widgets/hero-section.tsx            |   6 +-
 src/widgets/map-section.tsx             |   2 +-
 src/widgets/partners-section.tsx        |   9 +-
 src/widgets/promotions-section.tsx      |   2 +-
 src/widgets/stats-section.tsx           |   4 +-
 src/widgets/vacancies-section.tsx       | 149 ++++++++++--------------
 12 files changed, 138 insertions(+), 157 deletions(-)

diff --git a/src/features/map/ui/gas-station-map.tsx b/src/features/map/ui/gas-station-map.tsx
index 7621105..5ef8a15 100644
--- 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>
diff --git a/src/shared/components/about-counter.tsx b/src/shared/components/about-counter.tsx
index 317f7f3..6f301c0 100644
--- 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>
diff --git a/src/widgets/about-section.tsx b/src/widgets/about-section.tsx
index 11d8a6b..3d26fe7 100644
--- 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>
+  );
+};
diff --git a/src/widgets/charity-section.tsx b/src/widgets/charity-section.tsx
index 3562f5e..44b943d 100644
--- 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'>
diff --git a/src/widgets/cta-section.tsx b/src/widgets/cta-section.tsx
index 67df7e3..9faa576 100644
--- 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'>
diff --git a/src/widgets/header/ui/index.tsx b/src/widgets/header/ui/index.tsx
index 9baef64..71197f0 100644
--- 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' />
diff --git a/src/widgets/hero-section.tsx b/src/widgets/hero-section.tsx
index 83627b8..4b2c70b 100644
--- a/src/widgets/hero-section.tsx
+++ b/src/widgets/hero-section.tsx
@@ -20,7 +20,7 @@ export const HeroSection = () => {
           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='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
@@ -28,10 +28,10 @@ export const HeroSection = () => {
                   {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')}{' '}
diff --git a/src/widgets/map-section.tsx b/src/widgets/map-section.tsx
index 5e64426..90f5150 100644
--- 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'>
diff --git a/src/widgets/partners-section.tsx b/src/widgets/partners-section.tsx
index 08a7b29..f4ccadc 100644
--- 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
diff --git a/src/widgets/promotions-section.tsx b/src/widgets/promotions-section.tsx
index 4c36fce..d4b5d2b 100644
--- 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'>
diff --git a/src/widgets/stats-section.tsx b/src/widgets/stats-section.tsx
index 680a74a..b236fa3 100644
--- 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+'}
diff --git a/src/widgets/vacancies-section.tsx b/src/widgets/vacancies-section.tsx
index c77726f..1a9d11f 100644
--- 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>
+  );
+};