responsive home page and layout

app/home/components/CategorySection.tsx

@@ -16,14 +16,14 @@ const categories = [
 
 const CategorySection = () => {
   return (
-    <div className="mt-[120px] px-[120px]">
-      <Carousel slidesPerView={5} gap={40}>
-        <div className="flex justify-between items-center">
-          <div className="font-bold text-2xl">دسته بندی های محصولات</div>
+    <div className="mt-12 px-4 sm:mt-16 sm:px-8 lg:mt-[120px] lg:px-[120px]">
+      <Carousel slidesPerView={{ base: 1.4, md: 3, lg: 5 }} gap={{ base: 16, md: 24, lg: 40 }}>
+        <div className="flex justify-between items-center gap-4">
+          <div className="font-bold text-lg sm:text-2xl">دسته بندی های محصولات</div>
           <CarouselControls prevLabel="دسته‌بندی‌های قبلی" nextLabel="دسته‌بندی‌های بعدی" />
         </div>
 
-        <CarouselTrack className="mt-12">
+        <CarouselTrack className="mt-8 sm:mt-12">
           {categories.map((title) => (
             <CarouselSlide key={title}>
               <CategoryCard title={title} />