responsive base v1

src/app/home/components/HotOffer.tsx

@@ -7,9 +7,9 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 
 const HotOffer: FC = () => {
     return (
-        <div className=' bg-[#F2F2F2] rounded-2xl flex py-6'>
-            <div className='px-6 min-w-[140px] max-w-[180px] flex flex-col justify-center'>
-                <div className='text-center text-primary font-extrabold text-sm'>
+        <div className='bg-[#F2F2F2] rounded-xl sm:rounded-2xl flex flex-col sm:flex-row py-4 sm:py-6'>
+            <div className='px-4 sm:px-6 w-full sm:min-w-[140px] sm:max-w-[180px] flex flex-col justify-center items-center sm:items-start'>
+                <div className='text-center text-primary font-extrabold text-xs sm:text-sm'>
                     پیشنهاد های
                     <br />
                     داغ
@@ -17,22 +17,27 @@ const HotOffer: FC = () => {
                     سندس
                     کالا
                 </div>
-                <div className='mt-6 flex justify-center'>
+                <div className='mt-4 sm:mt-6 flex justify-center'>
                     <Image
                         src={'/images/hot_offer.png'}
                         alt=''
                         width={120}
                         height={150}
-                        className='max-w-full h-auto'
+                        className='max-w-[80px] sm:max-w-full h-auto'
                     />
                 </div>
             </div>
 
-            <div className='flex-1 overflow-hidden px-4'>
+            <div className='flex-1 overflow-hidden px-2 sm:px-4 mt-4 sm:mt-0'>
                 <Swiper
-                    spaceBetween={16}
+                    spaceBetween={8}
                     slidesPerView={'auto'}
                     className='h-full'
+                    breakpoints={{
+                        640: {
+                            spaceBetween: 16,
+                        },
+                    }}
                 >
                     <SwiperSlide className='!w-auto'>
                         <ProductCard />