orderby application section

app/home/Home.tsx

@@ -1,5 +1,6 @@
 import BannerSection from "./components/BannerSection";
 import CategorySection from "./components/CategorySection";
+import OrderByApplication from "./components/OrderByApplication";
 import ProductSection from "./components/ProductSection";
 import StepSection from "./components/StepSection";
 
@@ -10,6 +11,7 @@ const Home = () => {
       <StepSection />
       <CategorySection />
       <ProductSection />
+      <OrderByApplication />
     </div>
   );
 };

app/home/components/OrderByApplication.tsx

@@ -0,0 +1,45 @@
+import Carousel, { CarouselControls, CarouselSlide, CarouselTrack } from "@/app/components/Carousel";
+import Select from "@/app/components/Select";
+import { FC } from "react";
+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>
+            <Select
+              options={[
+                {
+                  label: "محبوب‌ترین محصولات",
+                  value: "popular",
+                },
+                {
+                  label: "جدیدترین محصولات",
+                  value: "newest",
+                },
+                {
+                  label: "پرفروش‌ترین محصولات",
+                  value: "best_selling",
+                },
+              ]}
+            />
+          </div>
+          <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
+        </div>
+
+        <CarouselTrack className="mt-12">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <CarouselSlide key={index}>
+              <ProductCard />
+            </CarouselSlide>
+          ))}
+        </CarouselTrack>
+      </Carousel>
+    </div>
+  );
+};
+
+export default OrderByApplication;