fix: adjust promotion-slider width

src/shared/components/promotion-slider.tsx

@@ -74,68 +74,64 @@ export default function PromotionSlider() {
   };
 
   return (
-    <div className='relative'>
+    <div className='relative overflow-hidden'>
-      <div className='overflow-hidden'>
+      <div
-        <div
+        className='flex transition-transform duration-300 ease-in-out'
-          className='flex transition-transform duration-300 ease-in-out'
+        style={{
-          style={{
+          transform: `translateX(-${currentIndex * (100 / visibleItems)}%)`,
-            transform: `translateX(-${currentIndex * (100 / visibleItems)}%)`,
+        }}
-          }}
+      >
-        >
+        {promotions.map((promo) => (
-          {promotions.map((promo) => (
+          <div
-            <div
+            key={promo.id}
-              key={promo.id}
+            className='w-full flex-none p-2 sm:w-1/2 lg:w-1/3'
-              className='w-full flex-none p-2 sm:w-1/2 lg:w-1/3'
+            data-aos='zoom-in-right'
-              data-aos='zoom-in-right'
+            data-aos-duration='700'
-              data-aos-duration='700'
+          >
-            >
+            <Card className='h-full overflow-hidden transition-shadow hover:shadow-lg'>
-              <Card className='h-full overflow-hidden transition-shadow hover:shadow-lg'>
+              <div className='relative h-48'>
-                <div className='relative h-48'>
+                <Image
-                  <Image
+                  src={promo.image || '/placeholder.svg'}
-                    src={promo.image || '/placeholder.svg'}
+                  alt={promo.title}
-                    alt={promo.title}
+                  fill
-                    fill
+                  className='object-cover'
-                    className='object-cover'
+                />
-                  />
+              </div>
+              <CardContent className='p-4'>
+                <h3 className='mb-2 text-lg font-bold'>{promo.title}</h3>
+                <p className='mb-3 text-sm text-gray-600'>
+                  {promo.description}
+                </p>
+                <div className='flex items-center justify-between'>
+                  <span className='text-xs text-gray-500'>
+                    Действует до: {promo.validUntil}
+                  </span>
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    className='border-red-600 text-red-600 hover:bg-red-50'
+                  >
+                    Подробнее
+                  </Button>
                 </div>
-                <CardContent className='p-4'>
+              </CardContent>
-                  <h3 className='mb-2 text-lg font-bold'>{promo.title}</h3>
+            </Card>
-                  <p className='mb-3 text-sm text-gray-600'>
+          </div>
-                    {promo.description}
+        ))}
-                  </p>
-                  <div className='flex items-center justify-between'>
-                    <span className='text-xs text-gray-500'>
-                      Действует до: {promo.validUntil}
-                    </span>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='border-red-600 text-red-600 hover:bg-red-50'
-                    >
-                      Подробнее
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-          ))}
-        </div>
       </div>
-
       <Button
         variant='outline'
         size='icon'
-        className='absolute top-1/2 left-0 z-10 -translate-x-1/2 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
+        className='absolute top-1/2 left-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
         onClick={prevSlide}
       >
         <ChevronLeft className='h-4 w-4' />
         <span className='sr-only'>Предыдущий</span>
       </Button>
-
       <Button
         variant='outline'
         size='icon'
-        className='absolute top-1/2 right-0 z-10 translate-x-1/2 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
+        className='absolute top-1/2 right-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
         onClick={nextSlide}
       >
         <ChevronRight className='h-4 w-4' />