step section

app/home/Home.tsx

@@ -1,9 +1,11 @@
 import BannerSection from "./components/BannerSection";
+import StepSection from "./components/StepSection";
 
 const Home = () => {
   return (
     <div>
       <BannerSection />
+      <StepSection />
     </div>
   );
 };

app/home/components/BannerSection.tsx

@@ -6,7 +6,7 @@ import { FC } from "react";
 
 const BannerSection: FC = () => {
   return (
-    <div className="w-full h-[500px]">
+    <div className="w-full">
       <div className="relative">
         <Image src={banner} alt="banner" width={2000} height={574} className="w-full max-h-[574px] object-cover" />
         <div className="absolute h-full right-[120px] top-0 bottom-0 m-auto flex flex-col justify-center">

app/home/components/StepSection.tsx

@@ -0,0 +1,35 @@
+import { ColorSwatch, Element4, LampCharge, Magicpen, Setting2, TruckFast } from "iconsax-reactjs";
+import { FC } from "react";
+
+const StepSection: FC = () => {
+  return (
+    <div className="w-full px-[120px] bg-secondary flex justify-between items-center h-[80px]">
+      <div className="flex gap-4 3tems-center">
+        <LampCharge variant="Bulk" size={24} color="currentColor" className="text-primary" />
+        <div className="font-bold text-sm">تحلیل نیاز برند</div>
+      </div>
+      <div className="flex gap-3 items-center">
+        <Magicpen variant="Bulk" size={24} color="currentColor" className="text-primary" />
+        <div className="font-bold text-sm">طراحی و آماده‌سازی فایل</div>
+      </div>
+      <div className="flex gap-3 items-center">
+        <Element4 variant="Bulk" size={24} color="currentColor" className="text-primary" />
+        <div className="font-bold text-sm">انتخاب فناوری و متریال</div>
+      </div>
+      <div className="flex gap-4 i3ems-center">
+        <ColorSwatch variant="Bulk" size={24} color="currentColor" className="text-primary" />
+        <div className="font-bold text-sm">کنترل رنگ و نمونه‌گیری</div>
+      </div>
+      <div className="flex gap-3 items-center">
+        <Setting2 variant="Bulk" size={24} color="currentColor" className="text-primary" />
+        <div className="font-bold text-sm">عملیات تکمیلی</div>
+      </div>
+      <div className="flex gap-43items-center">
+        <TruckFast variant="Bulk" size={24} color="currentColor" className="text-primary" />
+        <div className="font-bold text-sm">تحویل به موقع</div>
+      </div>
+    </div>
+  );
+};
+
+export default StepSection;