From a3626a56848b060a62ffdf24e9b2533f5ad3594f Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 18 Jul 2026 11:10:34 +0330
Subject: [PATCH] category section

---
 app/home/Home.tsx                       |  2 ++
 app/home/components/CategorySection.tsx | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 app/home/components/CategorySection.tsx

diff --git a/app/home/Home.tsx b/app/home/Home.tsx
index 8d4ab5a..af6747f 100644
--- a/app/home/Home.tsx
+++ b/app/home/Home.tsx
@@ -1,4 +1,5 @@
 import BannerSection from "./components/BannerSection";
+import CategorySection from "./components/CategorySection";
 import StepSection from "./components/StepSection";
 
 const Home = () => {
@@ -6,6 +7,7 @@ const Home = () => {
     <div>
       <BannerSection />
       <StepSection />
+      <CategorySection />
     </div>
   );
 };
diff --git a/app/home/components/CategorySection.tsx b/app/home/components/CategorySection.tsx
new file mode 100644
index 0000000..e9870c5
--- /dev/null
+++ b/app/home/components/CategorySection.tsx
@@ -0,0 +1,23 @@
+import { ArrowLeft, ArrowRight } from "iconsax-reactjs";
+
+const CategorySection = () => {
+  return (
+    <div className="mt-[120px] px-[120px]">
+      <div className="flex justify-between items-center">
+        <div className="font-bold text-2xl">دسته بندی های محصولات</div>
+        <div className="flex gap-2">
+          <div className="size-8 bg-primary rounded-full flex justify-center items-center">
+            <ArrowRight size={20} color="white" />
+          </div>
+          <div className="size-8 bg-primary rounded-full flex justify-center items-center">
+            <ArrowLeft size={20} color="white" />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-12"></div>
+    </div>
+  );
+};
+
+export default CategorySection;