src/features/map/ui/gas-station-map.tsx

@@ -56,7 +56,7 @@ interface StationListPanelProps {
   selectedStation: number | null;
   activeFilters: string[];
   activeCities: string[];
-  handleMapStationClick: (id: number) => void;
+  setSelectedStation: (id: number | null) => void;
   filterToFieldMap: { [key: string]: keyof Stations[number] };
   allFilters: string[];
   resetFilters: () => void;
@@ -205,7 +205,7 @@ function StationListPanel({
   selectedStation,
   activeFilters,
   activeCities,
-  handleMapStationClick,
+  setSelectedStation,
   filterToFieldMap,
   allFilters,
   resetCities,
@@ -275,7 +275,7 @@ function StationListPanel({
                       ? 'border-blue-500 bg-blue-50'
                       : 'border-gray-200 hover:bg-gray-50'
                   }`}
-                  onClick={() => handleMapStationClick(station.id)}
+                  onClick={() => setSelectedStation(station.id)}
                 >
                   <div className='flex items-start justify-between'>
                     <h4 className='font-medium'>{station.name}</h4>
@@ -365,11 +365,6 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
   const [isStationListOpen, setIsStationListOpen] = useState(false);
   const [activeFilterTab, setActiveFilterTab] = useState('cities');
 
-  useEffect(() => {
-    if (selectedStation === null) return;
-    setIsStationListOpen(true);
-  }, [selectedStation]);
-
   // Все доступные фильтры
   const allFilters = [
     // 'ДТ', -> нет значения в интерфейсе - TODO: поправить
@@ -439,16 +434,6 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
     [filteredStations],
   );
 
-  const handleMapStationClick = (stationId: number) => {
-    setSelectedStation(() => {
-      if (selectedStation !== null && selectedStation === stationId) {
-        return null;
-      }
-
-      return stationId;
-    });
-  };
-
   // Переключение фильтра услуг
   const toggleFilter = (filter: string) => {
     setActiveFilters((prev) =>
@@ -509,7 +494,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
         selectedStation={selectedStation}
         activeFilters={activeFilters}
         activeCities={activeCities}
-        handleMapStationClick={handleMapStationClick}
+        setSelectedStation={setSelectedStation}
         filterToFieldMap={filterToFieldMap}
         allFilters={allFilters}
         resetFilters={resetFilters}
@@ -521,7 +506,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
         <YandexMap
           points={points}
           selectedStation={selectedStation}
-          handleMapStationClick={handleMapStationClick}
+          setSelectedStation={setSelectedStation}
         />
       </div>
 

src/features/map/ui/yandex-map.tsx

@@ -7,7 +7,7 @@ import { Point } from '../model';
 type YandexMapProps = {
   points: Point[];
   selectedStation: number | null;
-  handleMapStationClick: (id: number) => void;
+  setSelectedStation: Dispatch<SetStateAction<number | null>>;
 };
 
 const mapCenter = [38.53575, 68.77905];
@@ -15,7 +15,7 @@ const mapCenter = [38.53575, 68.77905];
 export const YandexMap = ({
   points,
   selectedStation,
-  handleMapStationClick,
+  setSelectedStation,
 }: YandexMapProps) => {
   return (
     <YMaps
@@ -39,25 +39,30 @@ export const YandexMap = ({
         }}
         className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
       >
-        {points.map((point) => {
+        {points.map((point) => (
-          const isSelectedStation = selectedStation === point.id;
-          return (
           <Placemark
             key={point.id}
             geometry={point.coordinates}
             options={{
               iconLayout: 'default#image',
               iconImageHref:
-                  !selectedStation || isSelectedStation
+                !selectedStation || selectedStation === point.id
                   ? '/map/oriyo-marker.png'
                   : '/map/oriyo-inactive-marker.png',
-                iconImageSize: isSelectedStation ? [70, 70] : [64, 64],
+              iconImageSize: selectedStation === point.id ? [70, 70] : [64, 64],
-                iconImageOffset: isSelectedStation ? [-28, -40] : [-24, -36],
+              iconImageOffset: [-24, -36],
             }}
-              onClick={() => handleMapStationClick(point.id)}
+            onClick={() =>
+              setSelectedStation(() => {
+                if (selectedStation !== null && selectedStation === point.id) {
+                  return null;
+                }
+
+                return point.id;
+              })
+            }
           />
-          );
+        ))}
-        })}
       </Map>
     </YMaps>
   );

src/pages-templates/about/index.tsx

@@ -6,9 +6,10 @@ import Image from 'next/image';
 import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';
 
 import AnimatedCounter from '@/shared/components/animated-counter';
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
 import { StationGallery } from '@/widgets/about-page/station-gallery';
@@ -61,6 +62,8 @@ export default function AboutPage({ content }: AboutPageProps) {
 
         {/* Company Overview */}
         <Container>
+          <section className='py-16'>
+            <div className='container mx-auto'>
               <div className='grid items-center gap-12 md:grid-cols-2'>
                 <div data-aos='fade-right'>
                   <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@@ -109,11 +112,13 @@ export default function AboutPage({ content }: AboutPageProps) {
                   />
                 </div>
               </div>
+            </div>
+          </section>
         </Container>
 
         {/* Stats Section */}
-        <section className='bg-red-600 text-white'>
+        <section className='bg-red-600 py-16 text-white'>
-          <Container>
+          <div className='container mx-auto'>
             <div className='mb-12 text-center'>
               <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                 {t('about.stats.title')}
@@ -142,10 +147,12 @@ export default function AboutPage({ content }: AboutPageProps) {
                 </div>
               ))}
             </div>
-          </Container>
+          </div>
         </section>
 
         {/* Our History */}
+        <section className='py-16'>
+          <div className='container mx-auto'>
             <Container>
               <div className='mb-12 flex flex-col items-center justify-center text-center'>
                 <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@@ -163,10 +170,13 @@ export default function AboutPage({ content }: AboutPageProps) {
             <Container>
               <CompanyTimeline timeline={content.history} />
             </Container>
+          </div>
+        </section>
 
         {/* Our Stations */}
-        <section className='bg-gray-50'>
         <Container>
+          <section className='bg-gray-50 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'>
                   <MapPin className='h-6 w-6 text-red-600' />
@@ -178,21 +188,26 @@ export default function AboutPage({ content }: AboutPageProps) {
                   {t('about.stations.subtitle')}
                 </p>
               </div>
+
               <StationGallery stations={content.stations} />
+
               <div className='mt-12 text-center'>
                 <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
                   {t('about.stations.description')}
                 </p>
-              {/* <Button className='bg-red-600 hover:bg-red-700'>
+                <Button className='bg-red-600 hover:bg-red-700'>
                   {t('about.stations.buttonText')}{' '}
                   <MapPin className='ml-2 h-4 w-4' />
-                  </Button> */}
+                </Button>
+              </div>
             </div>
-          </Container>
           </section>
+        </Container>
 
         {/* Our Values */}
         <Container>
+          <section className='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'>
                   <Target className='h-6 w-6 text-red-600' />
@@ -229,11 +244,14 @@ export default function AboutPage({ content }: AboutPageProps) {
                   </Card>
                 ))}
               </div>
+            </div>
+          </section>
         </Container>
 
         {/* Our Team */}
-        <section className='bg-gray-50'>
         <Container>
+          <section className='bg-gray-50 py-16'>
+            <div className='container mx-auto px-2'>
               <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'>
                   <Users className='h-6 w-6 text-red-600' />
@@ -245,6 +263,7 @@ export default function AboutPage({ content }: AboutPageProps) {
                   {t('about.team.subtitle')}
                 </p>
               </div>
+
               <div
                 data-aos='flip-down'
                 data-aos-duration='600'
@@ -272,11 +291,14 @@ export default function AboutPage({ content }: AboutPageProps) {
                   </div>
                 ))}
               </div>
-          </Container>
+            </div>
           </section>
+        </Container>
 
         {/* Testimonials */}
         <Container>
+          <section className='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'>
                   <Star className='h-6 w-6 text-red-600' />
@@ -289,7 +311,10 @@ export default function AboutPage({ content }: AboutPageProps) {
                 </p>
               </div>
 
-          <div data-aos='zoom-out-right' className='grid gap-8 md:grid-cols-3'>
+              <div
+                data-aos='zoom-out-right'
+                className='grid gap-8 md:grid-cols-3'
+              >
                 {content.reviews.map((review, index) => (
                   <Card
                     key={index}
@@ -306,12 +331,16 @@ export default function AboutPage({ content }: AboutPageProps) {
                             />
                           ))}
                       </div>
-                  <p className='mb-4 text-gray-600 italic'>"{review.review}"</p>
+                      <p className='mb-4 text-gray-600 italic'>
+                        "{review.review}"
+                      </p>
                       <p className='font-semibold'>{review.fullname}</p>
                     </CardContent>
                   </Card>
                 ))}
               </div>
+            </div>
+          </section>
         </Container>
 
         <CtaSection />

src/pages-templates/charity/index.tsx

@@ -10,14 +10,16 @@ import {
 } from 'lucide-react';
 import Image from 'next/image';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { Button } from '@/shared/shadcn-ui/button';
 import {
   Card,
   CardContent,
+  CardFooter,
   CardHeader,
   CardTitle,
 } from '@/shared/shadcn-ui/card';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 import { CtaSection } from '@/widgets/cta-section';
 
@@ -27,32 +29,6 @@ export const metadata = {
     'Благотворительные проекты и инициативы Ориё. Мы помогаем обществу и заботимся о будущем.',
 };
 
-const events = [
-  {
-    title: 'Благотворительный марафон',
-    description:
-      'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
-    date: '15 июня 2023',
-    location: 'Парк Рудаки, Душанбе',
-    image: '/placeholder.svg?height=200&width=300&text=Марафон',
-  },
-  {
-    title: 'Экологическая акция',
-    description: 'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
-    date: '22 июля 2023',
-    location: 'Река Варзоб, Душанбе',
-    image: '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
-  },
-  {
-    title: 'Сбор школьных принадлежностей',
-    description:
-      'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
-    date: '1-20 августа 2023',
-    location: 'Все заправки GasNetwork',
-    image: '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
-  },
-];
-
 export function CharityPage() {
   const { t } = useTextController();
 
@@ -71,7 +47,12 @@ export function CharityPage() {
               priority
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <Container data-aos='fade-down' data-aos-duration='800'>
+              <Container>
+                <div
+                  data-aos='fade-down'
+                  data-aos-duration='800'
+                  className='container mx-auto'
+                >
                   <div className='max-w-2xl space-y-6 text-white'>
                     <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
                       <Heart className='size-6 text-red-500' />
@@ -83,6 +64,7 @@ export function CharityPage() {
                       {t('charity.hero.subtitle')}
                     </p>
                   </div>
+                </div>
               </Container>
             </div>
           </div>
@@ -90,6 +72,8 @@ export function CharityPage() {
 
         {/* Mission Section */}
         <Container>
+          <section className='py-16'>
+            <div className='container mx-auto'>
               <div className='grid items-center gap-12 md:grid-cols-2'>
                 <div>
                   <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@@ -118,7 +102,9 @@ export function CharityPage() {
                             {t(`charity.mission.principles.${index}.title`)}
                           </h3>
                           <p className='text-gray-600'>
-                        {t(`charity.mission.principles.${index}.description`)}
+                            {t(
+                              `charity.mission.principles.${index}.description`,
+                            )}
                           </p>
                         </div>
                       </div>
@@ -137,10 +123,13 @@ export function CharityPage() {
                   />
                 </div>
               </div>
+            </div>
+          </section>
         </Container>
 
         {/* Key Figures */}
-        <Container className='bg-red-600 text-white'>
+        <section className='bg-red-600 py-16 text-white'>
+          <div className='container mx-auto'>
             <div className='mb-12 text-center'>
               <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                 {t('charity.stats.title')}
@@ -161,10 +150,13 @@ export function CharityPage() {
                 </div>
               ))}
             </div>
-        </Container>
+          </div>
+        </section>
 
         {/* Upcoming Events */}
-        <Container className='bg-gray-50'>
+        <Container>
+          <section className='bg-gray-50 py-16'>
+            <div className='container mx-auto'>
               <div className='mb-12 text-center'>
                 <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                   <Calendar className='h-6 w-6 text-red-600' />
@@ -178,7 +170,34 @@ export function CharityPage() {
               </div>
 
               <div className='grid gap-6 md:grid-cols-3'>
-            {events.map((event, index) => (
+                {[
+                  {
+                    title: 'Благотворительный марафон',
+                    description:
+                      'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
+                    date: '15 июня 2023',
+                    location: 'Парк Рудаки, Душанбе',
+                    image: '/placeholder.svg?height=200&width=300&text=Марафон',
+                  },
+                  {
+                    title: 'Экологическая акция',
+                    description:
+                      'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
+                    date: '22 июля 2023',
+                    location: 'Река Варзоб, Душанбе',
+                    image:
+                      '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
+                  },
+                  {
+                    title: 'Сбор школьных принадлежностей',
+                    description:
+                      'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
+                    date: '1-20 августа 2023',
+                    location: 'Все заправки Ориё',
+                    image:
+                      '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
+                  },
+                ].map((event, index) => (
                   <Card
                     data-aos='zoom-in-up'
                     key={index}
@@ -210,18 +229,22 @@ export function CharityPage() {
                         </div>
                       </CardContent>
                     </div>
-                {/* <CardFooter>
+                    <CardFooter>
                       <Button className='w-full bg-red-600 hover:bg-red-700'>
                         {t(`charity.events.button`)}
                       </Button>
-                </CardFooter> */}
+                    </CardFooter>
                   </Card>
                 ))}
               </div>
+            </div>
+          </section>
         </Container>
 
         {/* How to Help */}
         <Container>
+          <section className='py-16'>
+            <div className='container mx-auto'>
               <div className='mb-12 text-center'>
                 <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' />
@@ -263,7 +286,9 @@ export function CharityPage() {
                 ].map((item, index) => (
                   <Card data-aos='zoom-in' key={index} className='text-center'>
                     <CardHeader>
-                  <div className='mb-4 flex justify-center'>{item.icon}</div>
+                      <div className='mb-4 flex justify-center'>
+                        {item.icon}
+                      </div>
                       <CardTitle className='break-words hyphens-auto'>
                         {item.title}
                       </CardTitle>
@@ -274,6 +299,8 @@ export function CharityPage() {
                   </Card>
                 ))}
               </div>
+            </div>
+          </section>
         </Container>
         <CtaSection />
       </main>

src/pages-templates/clients/certificates/index.tsx

@@ -3,10 +3,10 @@
 import { Download, Eye } from 'lucide-react';
 import Image from 'next/image';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 export function CertificatesPage() {
   const { t } = useTextController();
@@ -67,8 +67,8 @@ export function CertificatesPage() {
   certificates.length = 0;
 
   return (
-    <main>
     <Container>
+      <main className='container mx-auto py-10'>
         <div className='mb-10 text-center'>
           <h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
           <p className='mx-auto max-w-2xl text-lg text-gray-600'>
@@ -125,7 +125,7 @@ export function CertificatesPage() {
             </Card>
           ))}
         </div>
-      </Container>
       </main>
+    </Container>
   );
 }

src/pages-templates/clients/index.tsx

@@ -2,8 +2,8 @@
 
 import Image from 'next/image';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
 import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
@@ -33,7 +33,7 @@ export function ClientsPage() {
               priority
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <Container className='py-0'>
+              <Container>
                 <div
                   data-aos='fade-down'
                   data-aos-duration='1000'

src/pages-templates/clients/loyalty/index.tsx

@@ -3,9 +3,9 @@
 import { Check, Percent } from 'lucide-react';
 import Image from 'next/image';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 import { CtaSection } from '@/widgets/cta-section';
 
@@ -35,7 +35,12 @@ export function LoyaltyPage() {
               priority
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <Container data-aos='fade-down' data-aos-duration='800'>
+              <Container>
+                <div
+                  data-aos='fade-down'
+                  data-aos-duration='800'
+                  className='container mx-auto'
+                >
                   <div className='max-w-2xl space-y-4 text-white'>
                     <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                       {t('clients.loyalty.title')}
@@ -44,13 +49,16 @@ export function LoyaltyPage() {
                       {t('clients.loyalty.description')}
                     </p>
                   </div>
+                </div>
               </Container>
             </div>
           </div>
         </section>
 
-        {/* Program Overview */}
         <Container>
+          {/* Program Overview */}
+          <section className='py-16'>
+            <div className='container mx-auto'>
               <div className='grid items-center gap-12 md:grid-cols-2'>
                 <div data-aos='fade-right'>
                   <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@@ -76,7 +84,9 @@ export function LoyaltyPage() {
                           {t('clients.loyalty.programm.conditions-1')}
                         </h3>
                         <p className='text-gray-600'>
-                      {t('clients.loyalty.programm.conditions.description-1')}
+                          {t(
+                            'clients.loyalty.programm.conditions.description-1',
+                          )}
                         </p>
                       </div>
                     </div>
@@ -89,7 +99,9 @@ export function LoyaltyPage() {
                           {t('clients.loyalty.programm.conditions-2')}
                         </h3>
                         <p className='text-gray-600'>
-                      {t('clients.loyalty.programm.conditions.description-2')}
+                          {t(
+                            'clients.loyalty.programm.conditions.description-2',
+                          )}
                         </p>
                       </div>
                     </div>
@@ -102,7 +114,9 @@ export function LoyaltyPage() {
                           {t('clients.loyalty.programm.conditions-3')}
                         </h3>
                         <p className='text-gray-600'>
-                      {t('clients.loyalty.programm.conditions.description-3')}
+                          {t(
+                            'clients.loyalty.programm.conditions.description-3',
+                          )}
                         </p>
                       </div>
                     </div>
@@ -121,11 +135,12 @@ export function LoyaltyPage() {
                   />
                 </div>
               </div>
-        </Container>
+            </div>
+          </section>
 
           {/* How It Works */}
-        <section className='bg-gray-50'>
+          <section className='bg-gray-50 px-2 py-16'>
-          <Container>
+            <div className='container mx-auto'>
               <div className='mb-12 text-center'>
                 <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                   {t('clients.loyalty.works.title')}
@@ -134,6 +149,7 @@ export function LoyaltyPage() {
                   {t('clients.loyalty.works.description')}
                 </p>
               </div>
+
               <div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
                 <div data-aos='zoom-in-up' className='text-center'>
                   <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
@@ -180,11 +196,12 @@ export function LoyaltyPage() {
                   </p>
                 </div>
               </div>
-          </Container>
+            </div>
           </section>
 
           {/* Loyalty Levels */}
-        <Container>
+          <section className='py-16'>
+            <div className='container mx-auto'>
               <div className='mb-12 text-center'>
                 <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                   {t('clients.loyalty.works.levels.title')}
@@ -333,6 +350,8 @@ export function LoyaltyPage() {
                   </CardContent>
                 </Card>
               </div>
+            </div>
+          </section>
         </Container>
 
         <CtaSection />

src/pages-templates/login/index.tsx

@@ -8,7 +8,6 @@ import { Suspense } from 'react';
 
 import { LoginForm } from '@/features/auth/login-form';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import {
@@ -18,6 +17,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/shared/shadcn-ui/card';
+import Container from '@/shared/shadcn-ui/conteiner';
 import {
   Tabs,
   TabsContent,
@@ -134,9 +134,10 @@ export default function LoginPage() {
   const { t } = useTextController();
 
   return (
-    <main className='flex min-h-screen flex-col items-center justify-center'>
+    <Container>
-      <div className='flex-1'>
+      <div className='flex min-h-screen flex-col items-center justify-center'>
-        <Container className='max-w-6xl'>
+        <main className='flex-1'>
+          <div className='container max-w-6xl py-16'>
             <div className='mb-12 flex flex-col items-center text-center'>
               <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                 <Fuel className='h-6 w-6 text-red-600' />
@@ -155,14 +156,18 @@ export default function LoginPage() {
               <div className='mt-8 text-center text-sm text-gray-500'>
                 <p>
                   {t('auth.loginIssues')}{' '}
-                <Link href='/contact' className='text-red-600 hover:underline'>
+                  <Link
+                    href='/contact'
+                    className='text-red-600 hover:underline'
+                  >
                     {t('auth.contactLink')}
                   </Link>
                 </p>
               </div>
             </div>
-        </Container>
           </div>
         </main>
+      </div>
+    </Container>
   );
 }

src/shared/components/container.tsx

@@ -1,18 +0,0 @@
-'use client';
-
-import { ComponentProps } from 'react';
-
-import { cn } from '../lib/utils';
-
-interface ContainerProps extends ComponentProps<'div'> {}
-
-export function Container({ children, className, ...props }: ContainerProps) {
-  return (
-    <div
-      className={cn('container mx-auto px-2.5 py-8 sm:py-16', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}

src/shared/shadcn-ui/conteiner.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+interface ContainerProps {
+    children: React.ReactNode
+}
+export default function Container({children}: ContainerProps) {
+    return (
+        <div className="container mx-auto px-2.5 py-1">{children}</div>
+    )
+}

src/widgets/about-section.tsx

@@ -4,15 +4,14 @@ import { Users } from 'lucide-react';
 import Image from 'next/image';
 
 import AboutCounter from '@/shared/components/about-counter';
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
 export const AboutSection = () => {
   const { t } = useTextController();
 
   return (
-    <section id='about'>
+    <section id='about' className='px-2 py-8 sm:py-16'>
-      <Container>
+      <div className='container mx-auto'>
         <div className='grid items-center gap-12 md:grid-cols-2'>
           <div>
             <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@@ -39,7 +38,7 @@ export const AboutSection = () => {
             />
           </div>
         </div>
-      </Container>
+      </div>
     </section>
   );
 };

src/widgets/charity-section.tsx

@@ -4,7 +4,6 @@ import { ChevronRight, Heart } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 
@@ -12,8 +11,8 @@ export const CharitySection = () => {
   const { t } = useTextController();
 
   return (
-    <section id='charity'>
+    <section id='charity' className='px-2 py-8 sm:py-16'>
-      <Container>
+      <div className='container mx-auto'>
         <div className='grid items-center gap-12 md:grid-cols-2'>
           <div
             className='relative order-2 h-[400px] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
@@ -60,7 +59,7 @@ export const CharitySection = () => {
             </Link>
           </div>
         </div>
-      </Container>
+      </div>
     </section>
   );
 };

src/widgets/clients/ui/benefits-section.tsx

@@ -3,8 +3,8 @@
 import { Percent } from 'lucide-react';
 import Image from 'next/image';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 interface Benefit {
   title: string;
@@ -34,8 +34,9 @@ export const BenefitsSection = () => {
   const { t } = useTextController();
 
   return (
-    <section className='bg-gray-50'>
     <Container>
+      <section className='bg-gray-50 py-16'>
+        <div className='container mx-auto'>
           <div className='grid items-center gap-12 md:grid-cols-2'>
             <div
               data-aos='fade-right'
@@ -51,6 +52,7 @@ export const BenefitsSection = () => {
               <p className='mb-6 text-gray-600'>
                 {t('clients.benefits.subtitle')}
               </p>
+
               <div className='space-y-4'>
                 {benefits.map(({ title, description }) => {
                   return (
@@ -79,7 +81,8 @@ export const BenefitsSection = () => {
               />
             </div>
           </div>
-      </Container>
+        </div>
       </section>
+    </Container>
   );
 };

src/widgets/clients/ui/services-overview-section.tsx

@@ -3,7 +3,6 @@
 import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
 import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import {
   Card,
@@ -12,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/shared/shadcn-ui/card';
+import Container from '@/shared/shadcn-ui/conteiner';
 
 interface ServiceOverview {
   title: string;
@@ -50,8 +50,9 @@ export const ServicesOverviewSection = () => {
   const { t } = useTextController();
 
   return (
-    <section>
     <Container>
+      <section className='py-16'>
+        <div className='container mx-auto'>
           <div className='mb-12 text-center'>
             <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
               {t('clients.services.title')}
@@ -60,11 +61,8 @@ export const ServicesOverviewSection = () => {
               {t('clients.services.subtitle')}
             </p>
           </div>
-        <div
+
-          data-aos='flip-up'
+          <div data-aos='flip-up' data-aos-duration='600' className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
-          data-aos-duration='600'
-          className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'
-        >
             {servicesOverview.map(({ description, Icon, contentText, title }) => {
               return (
                 <Card
@@ -85,7 +83,8 @@ export const ServicesOverviewSection = () => {
               );
             })}
           </div>
-      </Container>
+        </div>
       </section>
+    </Container>
   );
 };

src/widgets/cta-section.tsx

@@ -2,7 +2,6 @@
 
 import Link from 'next/link';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 
@@ -10,8 +9,8 @@ export const CtaSection = () => {
   const { t } = useTextController();
 
   return (
-    <section className='bg-red-600 text-white'>
+    <section className='bg-red-600 px-2 py-8 text-white sm:py-16'>
-      <Container>
+      <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'>
             {t('home.cta.title')}
@@ -25,7 +24,7 @@ export const CtaSection = () => {
             </Link>
           </div>
         </div>
-      </Container>
+      </div>
     </section>
   );
 };

src/widgets/map-section.tsx

@@ -6,7 +6,6 @@ import { Stations } from '@/app/api-utlities/@types';
 
 import { GasStationMap } from '@/features/map';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
 interface MapSectionProps {
@@ -17,8 +16,8 @@ export const MapSection = ({ stations }: MapSectionProps) => {
   const { t } = useTextController();
 
   return (
-    <section id='stations' className='bg-gray-50'>
+    <section id='stations' className='bg-gray-50 px-2 py-8 sm:py-16'>
-      <Container>
+      <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'>
             <MapPin className='h-6 w-6 text-red-600' />
@@ -36,7 +35,7 @@ export const MapSection = ({ stations }: MapSectionProps) => {
         >
           <GasStationMap stations={stations} />
         </div>
-      </Container>
+      </div>
     </section>
   );
 };

src/widgets/promotions-section.tsx

@@ -4,7 +4,6 @@ import { Gift } from 'lucide-react';
 
 import { Discounts } from '@/app/api-utlities/@types/index';
 
-import { Container } from '@/shared/components/container';
 import PromotionSlider from '@/shared/components/promotion-slider';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
@@ -16,8 +15,8 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
   const { t } = useTextController();
 
   return (
-    <section id='promotions' className='bg-gray-50'>
+    <section id='promotions' className='bg-gray-50 px-2 py-8 sm:py-16'>
-      <Container>
+      <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'>
             <Gift className='h-6 w-6 text-red-600' />
@@ -30,7 +29,7 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
           </p>
         </div>
         <PromotionSlider discounts={discounts} />
-      </Container>
+      </div>
     </section>
   );
 };

src/widgets/stats-section.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
 import AnimatedCounter from '../shared/components/animated-counter';
@@ -37,8 +36,11 @@ export function StatsSection() {
   }, []);
 
   return (
-    <section ref={sectionRef} className='bg-red-600 text-white'>
+    <section
-      <Container>
+      ref={sectionRef}
+      className='bg-red-600 px-2 py-6 text-white sm:py-12'
+    >
+      <div className='container mx-auto'>
         <div className='grid grid-cols-2 gap-4 text-center sm:gap-8 md:grid-cols-4'>
           <div className='space-y-2'>
             <h3 className='text-3xl font-bold'>
@@ -65,7 +67,7 @@ export function StatsSection() {
             <p className='text-sm text-white/80'>{t('home.stats.mode')}</p>
           </div>
         </div>
-      </Container>
+      </div>
     </section>
   );
 }

src/widgets/vacancies-section.tsx

@@ -4,7 +4,6 @@ import { Briefcase } from 'lucide-react';
 
 import { Jobs } from '@/app/api-utlities/@types/index';
 
-import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { cn } from '@/shared/lib/utils';
 import { Badge } from '@/shared/shadcn-ui/badge';
@@ -38,8 +37,8 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
   const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];
 
   return (
-    <section id='vacancies'>
+    <section id='vacancies' className='px-2 py-8 sm:py-16'>
-      <Container>
+      <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'>
             <Briefcase className='h-6 w-6 text-red-600' />
@@ -89,7 +88,7 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
             </TabsContent>
           ))}
         </Tabs>
-      </Container>
+      </div>
     </section>
   );
 };