category section

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>
   );
 };

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;