responsive landing

src/app/page.jsx

@@ -142,7 +142,74 @@ export default function Home() {
       stock: 5,
       mainImage: "3",
     },
+    {
+      id: 11,
+      persianName: "Lip Balm",
+      englishName: "Lip Balm",
+      description:
+        "A moisturizing lip balm that prevents chapped lips and adds a subtle shine.",
+      cost: 90000,
+      costWithDiscount: 80000,
+      hasDiscount: true,
+      discountPercent: 11,
+      stock: 12,
+      mainImage: "1",
+    },
+    {
+      id: 12,
+      persianName: "Hand Cream",
+      englishName: "Hand Cream",
+      description:
+        "A fast-absorbing hand cream that keeps hands soft and hydrated.",
+      cost: 170000,
+      costWithDiscount: 150000,
+      hasDiscount: true,
+      discountPercent: 12,
+      stock: 6,
+      mainImage: "2",
+    },
+    {
+      id: 13,
+      persianName: "Night Repair Serum",
+      englishName: "Night Repair Serum",
+      description:
+        "A serum that works overnight to repair and rejuvenate your skin.",
+      cost: 390000,
+      costWithDiscount: 350000,
+      hasDiscount: true,
+      discountPercent: 10,
+      stock: 4,
+      mainImage: "3",
+    },
+    {
+      id: 14,
+      persianName: "Shaving Cream",
+      englishName: "Shaving Cream",
+      description:
+        "A rich shaving cream that provides a smooth and irritation-free shave.",
+      cost: 200000,
+      costWithDiscount: 200000,
+      hasDiscount: false,
+      discountPercent: 0,
+      stock: 9,
+      mainImage: "4",
+    },
+
+    {
+      id: 15,
+      persianName: "Shaving ",
+      englishName: "Shaving ",
+      description:
+        "A fast-absorbing hand cream that keeps hands soft and hydrated.",
+      cost: 200000,
+      costWithDiscount: 200000,
+      hasDiscount: false,
+      discountPercent: 0,
+      stock: 9,
+      mainImage: "1",
+    },
   ];
+
   const slides = [
     {
       id: 1,
@@ -179,26 +246,35 @@ export default function Home() {
       <div className="xs:px-3 lg:px-20 mt-10">
         <Swiper className="mySwiper ">
           <SwiperSlide>
-            <div className="rounded-2xl overflow-hidden">
-              <Image src={ban1} className="object-cover" />
+            <div className="rounded-2xl overflow-hidden ">
+              <Image
+                src={ban1}
+                className="object-cover xs:h-[200px] lg:h-auto "
+              />
             </div>
           </SwiperSlide>
           <SwiperSlide>
             {" "}
             <div className="rounded-2xl overflow-hidden">
-              <Image src={ban2} />
+              <Image
+                src={ban2}
+                className="object-cover xs:h-[200px] lg:h-auto "
+              />
             </div>
           </SwiperSlide>
         </Swiper>
       </div>
-      <div className="mt-[120px]">
+      <div className="xs:mt-10 lg:mt-[120px]">
         <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
-          <div className="grid grid-cols-3 gap-5">
+          <div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5 rtl ">
+            <div className="mx-auto">
+              <Image src={logo} className="xs:w-[200px] lg:w-auto" />
+            </div>
             <div className="text-left relative mb-10 col-span-2">
-              <h2 className="text-[30px] font-bold relative z-10">
+              <h2 className="text-[30px] font-bold relative z-10 xs:text-center lg:text-left">
                 ADVANCED HORIZON SERVICES LLC Products{" "}
               </h2>
-              <p className="mb-0 text-sm text-gray-400">
+              <p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
                 Lorem ipsum dolor sit amet
               </p>
 
@@ -224,17 +300,13 @@ export default function Home() {
                 Learn more about us
               </button>
             </div>
-
-            <div className="">
-              <Image src={logo} />
-            </div>
           </div>
         </div>
       </div>
       <div className="mt-[120px]">
         <div className="w-full bg-couner-data-landing">
-          <div className="grid grid-cols-3">
-            <div className="my-20">
+          <div className="grid  xs:grid-cols-1 lg:grid-cols-3">
+            <div className="xs:my-10 lg:my-20">
               <p className="mb-0 text-[12px] text-gray-300">
                 Lorem ipsum dolor{" "}
               </p>
@@ -244,7 +316,7 @@ export default function Home() {
               <p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">500</p>
             </div>
 
-            <div className="mt-20">
+            <div className="xs:my-10 lg:my-20">
               <p className="mb-0 text-[12px] text-gray-300">
                 Lorem ipsum dolor{" "}
               </p>
@@ -257,7 +329,7 @@ export default function Home() {
               </p>
             </div>
 
-            <div className="mt-20">
+            <div className="xs:my-10 lg:my-20">
               <p className="mb-0 text-[12px] text-gray-300">
                 Lorem ipsum dolor{" "}
               </p>
@@ -271,13 +343,13 @@ export default function Home() {
           </div>
         </div>
       </div>
-      <div className="mt-[120px]">
+      <div className="my-[120px]">
         <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
           <div className="text-left relative mb-10">
-            <h2 className="text-[30px] font-bold relative z-10">
+            <h2 className="text-[30px] font-bold relative z-10 xs:text-center lg:text-left">
               ADVANCED HORIZON SERVICES LLC Products{" "}
             </h2>
-            <p className="mb-0 text-sm text-gray-400">
+            <p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Corporis,{" "}
             </p>