responsive home page and layout

app/home/components/StepSection.tsx

@@ -1,32 +1,25 @@
 import { ColorSwatch, Element4, LampCharge, Magicpen, Setting2, TruckFast } from "iconsax-reactjs";
 import { FC } from "react";
 
+const steps = [
+  { label: "تحلیل نیاز برند", Icon: LampCharge },
+  { label: "طراحی و آماده‌سازی فایل", Icon: Magicpen },
+  { label: "انتخاب فناوری و متریال", Icon: Element4 },
+  { label: "کنترل رنگ و نمونه‌گیری", Icon: ColorSwatch },
+  { label: "عملیات تکمیلی", Icon: Setting2 },
+  { label: "تحویل به موقع", Icon: TruckFast },
+];
+
 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 className="w-full px-4 sm:px-8 lg:px-[120px] bg-secondary">
+      <div className="flex gap-6 lg:gap-4 lg:justify-between items-center h-auto py-4 lg:py-0 lg:h-[80px] overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+        {steps.map(({ label, Icon }) => (
+          <div key={label} className="flex gap-3 items-center shrink-0">
+            <Icon variant="Bulk" size={24} color="currentColor" className="text-primary" />
+            <div className="font-bold text-sm whitespace-nowrap">{label}</div>
+          </div>
+        ))}
       </div>
     </div>
   );