responsive home page and layout

app/home/components/OrderByApplication.tsx

@@ -5,11 +5,11 @@ import ProductCard from "./ProductCard";
 
 const OrderByApplication: FC = () => {
   return (
-    <div className="p-[120px] bg-[#F1F6FA] mt-[120px]">
-      <div className="text-2xl font-bold">سفارش بر اساس کاربرد</div>
-      <Carousel slidesPerView={5} gap={40}>
-        <div className="flex mt-12 justify-between items-center">
-          <div>
+    <div className="px-4 py-12 sm:px-8 sm:py-16 lg:p-[120px] bg-[#F1F6FA] mt-12 sm:mt-16 lg:mt-[120px]">
+      <div className="text-lg sm:text-2xl font-bold">سفارش بر اساس کاربرد</div>
+      <Carousel slidesPerView={{ base: 1.4, md: 3, lg: 5 }} gap={{ base: 16, md: 24, lg: 40 }}>
+        <div className="flex mt-8 sm:mt-12 justify-between items-center gap-4">
+          <div className="min-w-0 flex-1 max-w-[240px] sm:max-w-none sm:flex-none">
             <Select
               options={[
                 {
@@ -30,7 +30,7 @@ const OrderByApplication: FC = () => {
           <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
         </div>
 
-        <CarouselTrack className="mt-12 px-3 py-4 -mx-3">
+        <CarouselTrack className="mt-8 sm:mt-12 px-2 sm:px-3 py-4 -mx-2 sm:-mx-3">
           {Array.from({ length: 10 }).map((_, index) => (
             <CarouselSlide key={index}>
               <ProductCard />