From ea7745179b1b83dfb316a00cbf2ce7318855451f Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 19 Jul 2026 12:25:37 +0330
Subject: [PATCH] orderby application section

---
 app/components/Select.tsx                  | 43 +++++++++++++++++++++
 app/home/Home.tsx                          |  2 +
 app/home/components/OrderByApplication.tsx | 45 ++++++++++++++++++++++
 3 files changed, 90 insertions(+)
 create mode 100644 app/components/Select.tsx
 create mode 100644 app/home/components/OrderByApplication.tsx

diff --git a/app/components/Select.tsx b/app/components/Select.tsx
new file mode 100644
index 0000000..0e63884
--- /dev/null
+++ b/app/components/Select.tsx
@@ -0,0 +1,43 @@
+import { cn } from "@/app/lib/cn";
+import { ArrowDown2 } from "iconsax-reactjs";
+import { FC } from "react";
+
+export type SelectOption = {
+  label: string;
+  value: string;
+};
+
+type Props = {
+  options?: SelectOption[];
+  className?: string;
+  placeholder?: string;
+} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "placeholder">;
+
+const Select: FC<Props> = ({ options, className, placeholder, children, ...rest }) => {
+  return (
+    <div className="relative w-full" dir="rtl">
+      <select
+        className={cn(
+          "h-12 w-full appearance-none rounded-2xl border border-secondary bg-white px-4 pl-13 text-right text-sm transition-colors focus:border-primary disabled:pointer-events-none disabled:opacity-50",
+          className,
+        )}
+        {...rest}
+      >
+        {placeholder && (
+          <option value="" disabled hidden>
+            {placeholder}
+          </option>
+        )}
+        {options?.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+        {children}
+      </select>
+      <ArrowDown2 aria-hidden="true" className="pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-black" color="currentColor" size={18} />
+    </div>
+  );
+};
+
+export default Select;
diff --git a/app/home/Home.tsx b/app/home/Home.tsx
index 0014b1b..c190dd2 100644
--- a/app/home/Home.tsx
+++ b/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>
   );
 };
diff --git a/app/home/components/OrderByApplication.tsx b/app/home/components/OrderByApplication.tsx
new file mode 100644
index 0000000..00768f8
--- /dev/null
+++ b/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;