From 0ac988a9c788322ac40e43dc4ad5d02f09d10ff9 Mon Sep 17 00:00:00 2001
From: HAM!DREZA <hamidreza.eidy1999@gmail.com>
Date: Thu, 9 May 2024 11:41:05 +0330
Subject: [PATCH] fixed css bugs

---
 components/home-page/AboutUs.vue              | 28 ++++----
 components/home-page/Catalogs.vue             | 44 ++++++-------
 components/home-page/Header.vue               | 19 +++---
 components/home-page/Instagram.vue            | 28 ++++----
 components/home-page/MediaSlider.vue          | 48 +++++++-------
 components/home-page/ProductSampleForm.vue    | 26 ++++----
 components/home-page/RoadMap.vue              | 66 ++++++++++++-------
 components/home-page/Slider.vue               | 18 ++---
 .../home-page/road-map-components/Banner.vue  | 10 +--
 .../road-map-components/ProductionStage.vue   | 54 +++++++--------
 .../road-map-components/ShopNavigator.vue     |  8 +--
 layouts/default.vue                           | 16 ++---
 layouts/footer.vue                            | 38 +++++------
 pages/index.vue                               | 19 +++---
 14 files changed, 224 insertions(+), 198 deletions(-)

diff --git a/components/home-page/AboutUs.vue b/components/home-page/AboutUs.vue
index c0a116f..4ce290c 100644
--- a/components/home-page/AboutUs.vue
+++ b/components/home-page/AboutUs.vue
@@ -2,16 +2,16 @@
   <div id="dynamic" class="about flex justify-center pt-[6.3vw]">
     <div class="relative w-[81.04%]">
       <div class="absolute -right-[0.8vw] -mt-[2.2vw]">
-        <h1 class="text-[6.469vw] lg:text-[2.5vw] text-[#383E43] font-bold">
+        <h1 class="text-[6.469vw] md:text-[2.5vw] text-[#383E43] font-bold">
           About Us
         </h1>
-        <p class="text-[3.59vw] lg:text-[0.938vw] text-[#878787]">
+        <p class="text-[3.59vw] md:text-[0.938vw] text-[#878787]">
           آنچه باید درباره شینان بدانید
         </p>
       </div>
 
       <svg
-        class="aboutPath line hidden lg:block motion"
+        class="aboutPath line hidden md:block motion"
         width="81.042vw"
         height="14.531vw"
         viewBox="0 0 1556 279"
@@ -48,7 +48,7 @@
       </svg>
 
       <svg
-        class="box2 crcle hidden lg:block absolute top-[1vw] !right-[2.8vw]"
+        class="box2 crcle hidden md:block absolute top-[1vw] !right-[2.8vw]"
         id=""
         width="22.344vw"
         height="22.292vw"
@@ -98,15 +98,15 @@
       
       <div class="mt-[16vw] md:mt-0 panels relative">
         <div
-          class="panel first leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
+          class="panel first leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:top-[9.2vw]"
         >
           <h1
-            class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
+            class="mt-[5vw] md:mt-[1.3vw] text-[5.11vw] md:text-[1.335vw] ps-4 md:ps-8"
           >
             لورم ایپسوم
           </h1>
           <p
-            class="mt-[5vw] lg:mt-[1.5vw] text-[3.19vw] lg:text-[0.833vw] px-4 lg:px-7 leading-[4.785vw] lg:leading-[1.458vw]"
+            class="mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
           >
             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
             استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
@@ -120,15 +120,15 @@
         </div>
 
         <div
-          class="hidden md:block panel leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:!top-[10]"
+          class="hidden md:block panel leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:!top-[10]"
         >
           <h1
-            class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
+            class="mt-[5vw] md:mt-[1.3vw] text-[5.11vw] md:text-[1.335vw] ps-4 md:ps-8"
           >
             لورم ایپسوم
           </h1>
           <p
-            class="mt-[5vw] lg:mt-[1.5vw] text-[3.19vw] lg:text-[0.833vw] px-4 lg:px-7 leading-[4.785vw] lg:leading-[1.458vw]"
+            class="mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
           >
             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
             استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
@@ -141,15 +141,15 @@
           </p>
         </div>
         <div
-          class="hidden md:block panel pnl leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
+          class="hidden md:block panel pnl leading-[1.458vw] absolute w-full md:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] md:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] md:top-[9.2vw]"
         >
           <h1
-            class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
+            class="mt-[5vw] md:mt-[1.3vw] text-[5.11vw] md:text-[1.335vw] ps-4 md:ps-8"
           >
             لورم ایپسوم
           </h1>
           <p
-            class="mt-[5vw] lg:mt-[1.5vw] text-[3.19vw] lg:text-[0.833vw] px-4 lg:px-7 leading-[4.785vw] lg:leading-[1.458vw]"
+            class="mt-[5vw] md:mt-[1.5vw] text-[3.19vw] md:text-[0.833vw] px-4 md:px-7 leading-[4.785vw] md:leading-[1.458vw]"
           >
             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
             استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
@@ -163,7 +163,7 @@
         </div>
       </div>
       <svg
-        class="absolute mt-[75vw] right-0 block lg:hidden"
+        class="absolute mt-[75vw] right-0 block md:hidden"
         width="66"
         height="30"
         viewBox="0 0 66 30"
diff --git a/components/home-page/Catalogs.vue b/components/home-page/Catalogs.vue
index c959a71..731e2b5 100644
--- a/components/home-page/Catalogs.vue
+++ b/components/home-page/Catalogs.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="flex justify-center">
-    <div class="w-[81%] lg:w-[52.96%] my-[8vw] grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <div class="w-[81%] md:w-[52.96%] my-[8vw] grid grid-cols-1 md:grid-cols-3 gap-6">
       <div
-        class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
+        class="flex flex-col items-center justify-between space-y-5 h-auto md:h-[35.99vw] bg-white rounded-[500px] md:rounded-[26.042vw]"
       >
         <div class="flex flex-col items-center">
           <img
             src="/public/images/catalog1.jpg"
             alt=""
-            class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
+            class="mt-[15vw] md:mt-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] rounded-full"
           />
-          <p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
-          <p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
+          <p class="mt-[3vw] md:mt-[1vw] text-[5.11vw] md:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
+          <p class="text-[3.59vw] md:text-[0.833vw] flex items-center border-b mt-[12vw] md:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
             <svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -23,7 +23,7 @@
         </div>
         
         <div class="flex flex-col items-center !m-0">
-          <p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw]  flex items-center text-[#A62186]">
+          <p class="text-[3.59vw] md:text-[0.833vw] mt-[1vw] md:mt-0 mb-[3.5vw]  flex items-center text-[#A62186]">
             <svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -33,13 +33,13 @@
                 
             دانلود کاتالوگ</p>
           <p class="
-          mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
+          mb-[3vw] mt-[8vw] md:mt-0 md:mb-[1vw] text-[5.11vw] md:text-[1.055vw]
         text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
           <img
             src="/public/images/catalog1.jpg"
             alt=""
             class="
-            mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] 
+            mb-[15vw] md:mb-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] 
             rounded-full"
           />
         </div>
@@ -48,16 +48,16 @@
 
 
       <div
-      class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
+      class="flex flex-col items-center justify-between space-y-5 h-auto md:h-[35.99vw] bg-white rounded-[500px] md:rounded-[26.042vw]"
     >
       <div class="flex flex-col items-center">
         <img
           src="/public/images/catalog1.jpg"
           alt=""
-          class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
+          class="mt-[15vw] md:mt-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] rounded-full"
         />
-        <p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
-        <p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
+        <p class="mt-[3vw] md:mt-[1vw] text-[5.11vw] md:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
+        <p class="text-[3.59vw] md:text-[0.833vw] flex items-center border-b mt-[12vw] md:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
           <svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
               <path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -69,7 +69,7 @@
       </div>
       
       <div class="flex flex-col items-center !m-0">
-        <p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw]  flex items-center text-[#A62186]">
+        <p class="text-[3.59vw] md:text-[0.833vw] mt-[1vw] md:mt-0 mb-[3.5vw]  flex items-center text-[#A62186]">
           <svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
               <path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -79,29 +79,29 @@
               
           دانلود کاتالوگ</p>
         <p class="
-        mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
+        mb-[3vw] mt-[8vw] md:mt-0 md:mb-[1vw] text-[5.11vw] md:text-[1.055vw]
       text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
         <img
           src="/public/images/catalog1.jpg"
           alt=""
           class="
-          mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] 
+          mb-[15vw] md:mb-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] 
           rounded-full"
         />
       </div>
     </div>
 
     <div
-    class="flex flex-col items-center justify-between space-y-5 h-auto lg:h-[35.99vw] bg-white rounded-[500px] lg:rounded-[26.042vw]"
+    class="flex flex-col items-center justify-between space-y-5 h-auto md:h-[35.99vw] bg-white rounded-[500px] md:rounded-[26.042vw]"
   >
     <div class="flex flex-col items-center">
       <img
         src="/public/images/catalog1.jpg"
         alt=""
-        class="mt-[15vw] lg:mt-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] rounded-full"
+        class="mt-[15vw] md:mt-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] rounded-full"
       />
-      <p class="mt-[3vw] lg:mt-[1vw] text-[5.11vw] lg:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
-      <p class="text-[3.59vw] lg:text-[0.833vw] flex items-center border-b mt-[12vw] lg:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
+      <p class="mt-[3vw] md:mt-[1vw] text-[5.11vw] md:text-[1.055vw] text-[#383E43] font-semibold">کاتالوگ</p>
+      <p class="text-[3.59vw] md:text-[0.833vw] flex items-center border-b mt-[12vw] md:mt-[3.5vw] pb-[0.3vw] text-[#A62186]">
         <svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             <path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -113,7 +113,7 @@
     </div>
     
     <div class="flex flex-col items-center !m-0">
-      <p class="text-[3.59vw] lg:text-[0.833vw] mt-[1vw] lg:mt-0 mb-[3.5vw]  flex items-center text-[#A62186]">
+      <p class="text-[3.59vw] md:text-[0.833vw] mt-[1vw] md:mt-0 mb-[3.5vw]  flex items-center text-[#A62186]">
         <svg class="me-2" width="1.146vw" height="1.146vw" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M8.25 10.0835V15.5835L10.0833 13.7502" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             <path d="M8.25033 15.5833L6.41699 13.75" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -123,13 +123,13 @@
             
         دانلود کاتالوگ</p>
       <p class="
-      mb-[3vw] mt-[8vw] lg:mt-0 lg:mb-[1vw] text-[5.11vw] lg:text-[1.055vw]
+      mb-[3vw] mt-[8vw] md:mt-0 md:mb-[1vw] text-[5.11vw] md:text-[1.055vw]
     text-[1.055vw] text-[#383E43] font-semibold" >کاتالوگ</p>
       <img
         src="/public/images/catalog1.jpg"
         alt=""
         class="
-        mb-[15vw] lg:mb-[5vw] h-[28.205vw] lg:h-[5.208vw] w-[28.205vw] lg:w-[5.208vw] 
+        mb-[15vw] md:mb-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] 
         rounded-full"
       />
     </div>
diff --git a/components/home-page/Header.vue b/components/home-page/Header.vue
index 0a0cb4c..b8300cf 100644
--- a/components/home-page/Header.vue
+++ b/components/home-page/Header.vue
@@ -1,12 +1,12 @@
 
 <template>
   <div
-    class="!max-w-[100vw] transform-bubbles header h-[76.923vw] lg:h-[48.802vw] text-white flex flex-col items-center"
+    class="!max-w-[100vw] transform-bubbles header h-[76.923vw] md:h-[48.802vw] text-white flex flex-col items-center"
   >
     <svg
       class="flex md:hidden absolute animate rotating-mobile rotating"
-      width="390"
-      height="239"
+      width="100vw"
+      height="58vw"
       viewBox="0 0 390 239"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +35,7 @@
     </svg>
 
     <svg
-      class="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.231vw] lg:!-top-[8.8vw] h-[120.513vw] lg:h-[44.688vw] w-[95%] !overflow-x-hidden lg:w-[44.688vw]"
+      class="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.231vw] md:!-top-[8.8vw] h-[120.513vw] md:h-[44.688vw] w-[95%] !overflow-x-hidden md:w-[44.688vw]"
       viewBox="0 0 858 858"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -63,7 +63,8 @@
         </linearGradient>
       </defs>
     </svg>
-    <svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute top-[55vw]" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+    
+    <svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute mt-[53vw]" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="19" cy="19" r="19" fill="white"/>
       <path d="M13.5 16.5526V21.4476C13.5 24.4909 15.6542 25.7284 18.285 24.2159L19.4583 23.5376C19.7425 23.3726 19.9167 23.0701 19.9167 22.7401V15.2601C19.9167 14.9301 19.7425 14.6276 19.4583 14.4626L18.285 13.7842C15.6542 12.2717 13.5 13.5092 13.5 16.5526Z" fill="#383E43"/>
       <path d="M20.833 16.0574V21.9516C20.833 22.3091 21.218 22.5291 21.5205 22.3458L22.5288 21.7591C25.1597 20.2466 25.1597 17.7533 22.5288 16.2408L21.5205 15.6541C21.218 15.4799 20.833 15.6999 20.833 16.0574Z" fill="#383E43"/>
@@ -76,7 +77,7 @@
 
       
     <svg
-      class="hidden md:block arrow absolute h-[4.167vw] w-[4.167vw] lg:!top-[33.75vw]"
+      class="hidden md:block arrow absolute h-[4.167vw] w-[4.167vw] md:!top-[33.75vw]"
       viewBox="0 0 80 80"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -93,14 +94,14 @@
     </svg>
 
     <h1
-      class="text-[7.277vw] lg:text-[3.718vw] font-[700] mt-[100px] lg:mt-[120px] lg:mt-[9.115vw]"
+      class="text-[7.277vw] md:text-[3.718vw] font-[700] mt-[100px] md:mt-[120px] md:mt-[9.115vw]"
     >
       JAVANEH
     </h1>
-    <h1 class="text-[4.544vw] lg:text-[1.927vw] font-[500]">
+    <h1 class="text-[4.544vw] md:text-[1.927vw] font-[500]">
       فروشگاه محصولات ارگانیک
     </h1>
-    <p class="hidden lg:block text-[0.938vw] w-[40vw] text-center mt-[0.3vw]">
+    <p class="hidden md:block text-[0.938vw] w-[40vw] text-center mt-[0.3vw]">
       وب سایت جوانه شرکتی در حوزه تامین و توزیع محصولات طبیعی، ارگانیک و سالم
       میباشد که این امکان را به مصرف کننده میدهد تا بتواند انواع محصولات تازه را
       با حق انتخاب و تنوع بسیار بالا و با مناسب‌ترین قیمت داشته باشد.
diff --git a/components/home-page/Instagram.vue b/components/home-page/Instagram.vue
index 9c6897d..82bec59 100644
--- a/components/home-page/Instagram.vue
+++ b/components/home-page/Instagram.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="bg-white flex justify-center pt-[20vw] lg:pt-[9vw] lg:mt-[3.6vw] lg:pb-[21vw]" dir="rtl">
-    <div class="w-[87.69%] lg:w-[81.04%] flex flex-col flex-col-reverse lg:flex-row">
+  <div class="bg-white flex justify-center pt-[20vw] md:pt-[9vw] md:mt-[3.6vw] md:pb-[21vw]" dir="rtl">
+    <div class="w-[87.69%] md:w-[81.04%] flex flex-col flex-col-reverse md:flex-row">
 
-      <div dir="rtl" class="z-[1] mt-[70vw] lg:mt-0"> 
+      <div dir="rtl" class="z-[1] mt-[70vw] md:mt-0"> 
         <svg
-        class="w-[16.154vw] h-[16.154vw] lg:h-[6.979vw] lg:w-[6.979vw]"
+        class="w-[16.154vw] h-[16.154vw] md:h-[6.979vw] md:w-[6.979vw]"
           width="134"
           height="134"
           viewBox="0 0 134 134"
@@ -35,15 +35,15 @@
         </svg>
 
         <h2
-          class="pb-[0.6vw] mt-[0.8vw] text-[8.318vw] lg:text-[2.813vw] text-[#383E43] font-[700] max-w-[57.949vw] lg:max-w-[19.531vw]"
+          class="pb-[0.6vw] mt-[0.8vw] text-[8.318vw] md:text-[2.813vw] text-[#383E43] font-[700] max-w-[57.949vw] md:max-w-[19.531vw]"
         >
           مارا در اینستاگرام دنبال کنید
         </h2>
-        <div class="birder-b border-[1px] w-[40vw] lg:w-[13vw]"></div>
-        <p class="pb-[20vw] lg:pb-0 flex items-center mt-[1.7vw] text-[4.038vw] lg:text-[1.055vw] text-[#878787]">
+        <div class="birder-b border-[1px] w-[40vw] md:w-[13vw]"></div>
+        <p class="pb-[20vw] md:pb-0 flex items-center mt-[1.7vw] text-[4.038vw] md:text-[1.055vw] text-[#878787]">
           دنبال کردن
           <svg
-            class="ms-5 h-[6.667vw] w-[6.667vw] lg:h-[2.604vw] lg:w-[2.604vw]"
+            class="ms-5 h-[6.667vw] w-[6.667vw] md:h-[2.604vw] md:w-[2.604vw]"
             width="2.604vw"
             height="2.604vw"
             viewBox="0 0 50 50"
@@ -75,14 +75,14 @@
         </p>
       </div>
 
-      <div class="relative ms-0 lg:ms-[6.8vw] gallery w-full lg:w-[32.604vw] h-[32.604vw]">
+      <div class="relative ms-0 md:ms-[6.8vw] gallery w-full md:w-[32.604vw] h-[32.604vw]">
         <div class="grid grid-cols-2">
-            <img src="/public/images/gallery1.jpg" class="h-[43.846vw] lg:h-[16.302vw] object-cover w-full " alt="">
-            <img src="/public/images/gallery2.jpg" class="h-[43.846vw] lg:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
-            <img src="/public/images/gallery3.jpg" class="h-[43.846vw] lg:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
-            <img src="/public/images/gallery1.jpg" class="h-[43.846vw] lg:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
+            <img src="/public/images/gallery1.jpg" class="h-[43.846vw] md:h-[16.302vw] object-cover w-full " alt="">
+            <img src="/public/images/gallery2.jpg" class="h-[43.846vw] md:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
+            <img src="/public/images/gallery3.jpg" class="h-[43.846vw] md:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
+            <img src="/public/images/gallery1.jpg" class="h-[43.846vw] md:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
         </div>
-        <div class="hidden lg:block -left-[21.5vw] top-[5.6vw] absolute h-[41.042vw] w-[23.438vw]">
+        <div class="hidden md:block -left-[21.5vw] top-[5.6vw] absolute h-[41.042vw] w-[23.438vw]">
             <img src="/public/images/gallery4.jpg" class="h-[20.521vw] object-cover w-full" alt="">
             <img src="/public/images/gallery5.jpg" class="h-[20.521vw] object-cover w-full" alt="">
         </div>
diff --git a/components/home-page/MediaSlider.vue b/components/home-page/MediaSlider.vue
index 97f671d..13e0230 100644
--- a/components/home-page/MediaSlider.vue
+++ b/components/home-page/MediaSlider.vue
@@ -1,17 +1,17 @@
 <template>
   <div
-    class="flex flex-col lg:flex-row pb-[15vw] lg:pb-[5vw] px-[2vw] pt-[6.5vw]"
+    class="flex flex-col md:flex-row pb-[15vw] md:pb-[5vw] px-[2vw] pt-[6.5vw]"
   >
     <div
-      class="w-full lg:w-[25%] flex flex-col ps-[8vw] lg:ps-0 border-e-[1px]"
+      class="w-full md:w-[25%] flex flex-col ps-[8vw] md:ps-0 border-e-[1px]"
     >
       <div class="flex justify-between">
         <p
-          class="mt-[2vw] lg:mt-0 lg:py-0 py-[3vw] text-[4.544vw] lg:text-[1.481vw] text-[#383E43] font-semibold"
+          class="mt-[2vw] md:mt-0 md:py-0 py-[3vw] text-[4.544vw] md:text-[1.481vw] text-[#383E43] font-semibold"
         >
           رسانه
         </p>
-        <div class="hidden lg:flex h-[50px] me-[0.5vw]">
+        <div class="hidden md:flex h-[50px] me-[0.5vw]">
           <svg
           class="cursor-pointer "
           @click="this.$refs.carousel.next()"
@@ -41,7 +41,7 @@
       <div class="mt-[1vw] space-y-[1vw] text-[#878787]">
         <p class="flex items-center">
           <svg
-            class="w-[3.333vw] lg:w-[16px] h-[3.333vw] lg:h-[16px]"
+            class="w-[3.333vw] md:w-[16px] h-[3.333vw] md:h-[16px]"
             height="16"
             viewBox="0 0 16 16"
             fill="none"
@@ -51,12 +51,12 @@
             <circle cx="8" cy="8" r="2" fill="#383E43" />
           </svg>
           <span
-            class="ps-3 text-[3.59vw] lg:text-[0.938vw] font-semibold text-black"
+            class="ps-3 text-[3.59vw] md:text-[0.938vw] font-semibold text-black"
           >
             فواید و مضرات مصرف گندم
           </span>
         </p>
-        <p class="items-center hidden lg:flex">
+        <p class="items-center hidden md:flex">
           <svg
             width="16"
             height="16"
@@ -71,7 +71,7 @@
             فواید و مضرات مصرف گندم
           </span>
         </p>
-        <p class="items-center hidden lg:flex">
+        <p class="items-center hidden md:flex">
           <svg
             width="16"
             height="16"
@@ -86,7 +86,7 @@
             فواید و مضرات مصرف گندم
           </span>
         </p>
-        <p class="items-center hidden lg:flex">
+        <p class="items-center hidden md:flex">
           <svg
             width="16"
             height="16"
@@ -101,7 +101,7 @@
             فواید و مضرات مصرف گندم
           </span>
         </p>
-        <p class="items-center hidden lg:flex">
+        <p class="items-center hidden md:flex">
           <svg
             width="16"
             height="16"
@@ -118,7 +118,7 @@
         </p>
 
         <button
-          class="hidden lg:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
+          class="hidden md:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
         >
           ادامه مطلب
           <svg
@@ -152,16 +152,16 @@
 
     <Carousel
       ref="carousel"
-      class="lg:w-[75%] mt-[8vw] lg:mt-0  w-full"
+      class="md:w-[75%] mt-[8vw] md:mt-0  w-full"
       :wrap-around="true"
       :breakpoints="breakpoints"
     >
       <Slide v-for="slide in 10" :key="slide">
         <div
-          class="carousel-item h-[85.641vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
+          class="carousel-item h-[85.641vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
         >
           <div
-            class="mx-[3vw] md:mx-[1vw] mediagallery w-[53.846vw] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
+            class="mx-[3vw] md:mx-[1vw] mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
           ></div>
         </div>
       </Slide>
@@ -172,15 +172,15 @@
 
     <!-- 
     <div
-      class="mt-[8vw] lg:mt-0 w-full grid grid-cols-1 lg:grid-cols-3 border-s-none lg:border-s-[1px] ms-0 lg:ms-[3vw] ps-0 lg:ps-[1vw]"
+      class="mt-[8vw] md:mt-0 w-full grid grid-cols-1 md:grid-cols-3 border-s-none md:border-s-[1px] ms-0 md:ms-[3vw] ps-0 md:ps-[1vw]"
     >
 
 
       <div
-        class="w-[64.103vw] lg:w-[20.156vw] h-[85.641vw] lg:h-[28.021vw]
+        class="w-[64.103vw] md:w-[20.156vw] h-[85.641vw] md:h-[28.021vw]
          border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto">
 
-        <div class="mediagallery w-[53.846vw] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw]
+        <div class="mediagallery w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw]
          border-[1.5px] rounded-[500px]"></div>
 
 
@@ -191,17 +191,17 @@
 
 
       <div
-        class="hidden lg:flex lg:w-[20.156vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
+        class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
       >
         <div
-          class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
+          class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
         ></div>
       </div>
       <div
-        class="hidden lg:flex lg:w-[20.156vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
+        class="hidden md:flex md:w-[20.156vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] justify-center items-center"
       >
         <div
-          class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
+          class="mediagallery md:w-[18.073vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
         ></div>
       </div>
     </div> -->
@@ -216,8 +216,12 @@ export default defineComponent({
 
     breakpoints: {
       // 700px and up
+      300: {
+        itemsToShow: 1.4,
+        snapAlign: 'end',
+      },
       700: {
-        itemsToShow: 1,
+        itemsToShow: 3.3,
         snapAlign: 'center',
       },
       // 1024 and up
diff --git a/components/home-page/ProductSampleForm.vue b/components/home-page/ProductSampleForm.vue
index fb16324..00703f0 100644
--- a/components/home-page/ProductSampleForm.vue
+++ b/components/home-page/ProductSampleForm.vue
@@ -1,35 +1,35 @@
 <template>
-<div class="pb-[27vw] lg:pb-[6vw] bg-white flex flex-col lg:flex-row items-center justify-center">
-    <div class="w-[81.04%] flex flex-col flex-col-reverse lg:flex-row items-center lg:items-start mt-[4.7vw]">
+<div class="pb-[27vw] md:pb-[6vw] bg-white flex flex-col md:flex-row items-center justify-center">
+    <div class="w-[81.04%] flex flex-col flex-col-reverse md:flex-row items-center md:items-start mt-[4.7vw]">
      
-        <div class="relative w-full lg:basis-3/5" dir="rtl">
-            <div class="absolute -mt-[75vw] lg:mt-[0vw]">
-                <h2 class="text-[4.544vw] lg:text-[1.481vw] text-[#383E43] font-[600]">درخواست نمونه محصول</h2>
-                <p class="text-[#878787] text-[3.19vw] lg:text-[0.833vw] mt-[1vw]">مشخصات خود را وارد کنید</p>
+        <div class="relative w-full md:basis-3/5" dir="rtl">
+            <div class="absolute -mt-[75vw] md:mt-[0vw]">
+                <h2 class="text-[4.544vw] md:text-[1.481vw] text-[#383E43] font-[600]">درخواست نمونه محصول</h2>
+                <p class="text-[#878787] text-[3.19vw] md:text-[0.833vw] mt-[1vw]">مشخصات خود را وارد کنید</p>
 
             </div>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-[13vw] lg:mt-[6.2vw]">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-[13vw] md:mt-[6.2vw]">
                 <input
-                class="ps-5 h-[13.846vw] lg:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] lg:text-[0.741vw] rounded-[10px] outline-none"
+                class="ps-5 h-[13.846vw] md:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] md:text-[0.741vw] rounded-[10px] outline-none"
                 type="text" placeholder="نام و نام خانوادگی">
                 <input
-                class="ps-5 h-[13.846vw] lg:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] lg:text-[0.741vw] rounded-[10px] outline-none"
+                class="ps-5 h-[13.846vw] md:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] md:text-[0.741vw] rounded-[10px] outline-none"
                 type="number" placeholder="شماره موبایل">
                 <input
-                class="ps-5 h-[13.846vw] lg:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] lg:text-[0.741vw] rounded-[10px] outline-none"
+                class="ps-5 h-[13.846vw] md:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] md:text-[0.741vw] rounded-[10px] outline-none"
                 type="text" placeholder="نام فروشگاه">
                 <input
-                class="ps-5 h-[13.846vw] lg:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] lg:text-[0.741vw] rounded-[10px] outline-none"
+                class="ps-5 h-[13.846vw] md:h-[2.969vw] bg-[#F5F5F5] text-[#878787] text-[3.19vw] md:text-[0.741vw] rounded-[10px] outline-none"
                 type="select" placeholder="انتخاب محصول">
             </div>
-            <span class="absolute mt-[8vw] lg:mt-[2vw] ms-[27vw] lg:ms-[19vw] bg-[#A62186] py-[2.564vw] lg:py-[0.625vw] px-[10.256vw] lg:px-[3.646vw] text-[3.59vw] lg:text-[1.055vw] text-white rounded-[10px]">ثبت</span>
+            <span class="absolute mt-[8vw] md:mt-[2vw] ms-[27vw] md:ms-[19vw] bg-[#A62186] py-[2.564vw] md:py-[0.625vw] px-[10.256vw] md:px-[3.646vw] text-[3.59vw] md:text-[1.055vw] text-white rounded-[10px]">ثبت</span>
             
         </div>
      
      
         <div class="basis-2/5 flex justify-end">
             <svg
-            class="mt-[22vw] lg:mt-0 h-[58.462vw] w-[58.462vw] lg:h-[25.99vw] lg:w-[26.667vw]"
+            class="mt-[22vw] md:mt-0 h-[58.462vw] w-[58.462vw] md:h-[25.99vw] md:w-[26.667vw]"
              viewBox="0 0 512 499" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <g clip-path="url(#clip0_836_14313)">
                 <path d="M326.562 111.858H299.32V344.154C299.32 347.799 298.602 351.408 297.207 354.775C295.813 358.142 293.769 361.202 291.192 363.779C288.615 366.356 285.556 368.401 282.19 369.795C278.823 371.19 275.215 371.908 271.571 371.908H63.292V372.174C63.292 375.818 64.0097 379.427 65.4042 382.794C66.7987 386.162 68.8427 389.221 71.4194 391.798C73.9961 394.376 77.0551 396.42 80.4218 397.815C83.7884 399.209 87.3968 399.927 91.0408 399.927H326.562C330.206 399.927 333.814 399.209 337.181 397.815C340.547 396.42 343.606 394.376 346.183 391.798C348.76 389.221 350.804 386.162 352.198 382.794C353.593 379.427 354.311 375.818 354.311 372.174V139.612C354.311 132.251 351.387 125.192 346.183 119.987C340.979 114.782 333.921 111.858 326.562 111.858Z" fill="#F2F2F2"/>
diff --git a/components/home-page/RoadMap.vue b/components/home-page/RoadMap.vue
index 3162246..bb4c140 100644
--- a/components/home-page/RoadMap.vue
+++ b/components/home-page/RoadMap.vue
@@ -3,15 +3,14 @@
     class="flex flex-col items-center border-t-[1px] border-[#E5E5E5] z-[1] min-h-[40vw] bg-[#FAF6F9] mt-[8vw]"
   >
     <h2
-      class="font-semibold text-[5.11vw] lg:text-[1.69vw] text-[#383E43] mt-24"
+      class="font-semibold text-[5.11vw] md:text-[1.69vw] text-[#383E43] mt-24"
     >
       نقشه راه از تولید به مصرف محصولات شینان
     </h2>
-    <div ref="main" class="relative mt-[10vw] lg:mt-0 flex justify-center">
-
+    <div ref="main" class="relative mt-[10vw] md:mt-0 flex justify-center">
       <svg
-      id="motionSVG"
-        class="hidden lg:block box z-[1] absolute mt-[8vw] lg:mt-[2.4vw] h-[15.385vw] w-[15.385vw] lg:h-[5.625vw] lg:w-[5.625vw]"
+        id="motionSVG"
+        class="hidden md:block box z-[1] absolute mt-[8vw] md:mt-[2.4vw] h-[15.385vw] w-[15.385vw] md:h-[5.625vw] md:w-[5.625vw]"
         viewBox="0 0 108 108"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -24,7 +23,7 @@
           stroke-width="2"
           stroke-dasharray="10 10"
         />
-        <circle cx="54" cy="54" r="23" fill="white"/>
+        <circle cx="54" cy="54" r="23" fill="white" />
         <path
           d="M57.3375 46.5L50.6625 46.5C46.5125 46.5 44.825 49.4375 46.8875 53.025L47.8125 54.625C48.0375 55.0125 48.45 55.25 48.9 55.25L59.1 55.25C59.55 55.25 59.9625 55.0125 60.1875 54.625L61.1125 53.025C63.175 49.4375 61.4875 46.5 57.3375 46.5Z"
           fill="#383E43"
@@ -36,7 +35,7 @@
       </svg>
 
       <svg
-        class="motionPath hidden lg:block absolute mt-[8vw] w-[81.146vw] h-[107.604vw]"
+        class="motionPath hidden md:block absolute mt-[8vw] w-[81.146vw] h-[107.604vw]"
         viewBox="0 0 1558 2066"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -50,33 +49,46 @@
         />
       </svg>
 
-
       <svg
-      class="box2 block md:hidden !mt-[18vw] absolute"
-      id="motionSVG2"
-      width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="30" cy="30" r="29.5" stroke="#383E43" stroke-dasharray="5 5"/>
-        <circle cx="30" cy="30" r="18" fill="white"/>
-        <path d="M32.6698 24L27.3298 24C24.0098 24 22.6598 26.35 24.3098 29.22L25.0498 30.5C25.2298 30.81 25.5598 31 25.9198 31L34.0798 31C34.4398 31 34.7698 30.81 34.9498 30.5L35.6898 29.22C37.3398 26.35 35.9898 24 32.6698 24Z" fill="#383E43"/>
-        <path d="M33.2104 32L26.7804 32C26.3904 32 26.1504 32.42 26.3504 32.75L26.9904 33.85C28.6404 36.72 31.3604 36.72 33.0104 33.85L33.6504 32.75C33.8404 32.42 33.6004 32 33.2104 32Z" fill="#383E43"/>
-        </svg>
-        
-
-      <svg
-        class="motionPath2 block absolute md:hidden mt-[20vw]"
-        width="98vw"
-        height="359.487vw"
+        class="motionPath block absolute md:hidden mt-[20vw] w-[98vw] h-[359.487vw]"
         viewBox="0 0 390 1402"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-        id="motionPath2"
+          id="motionPath"
           d="M195.25 -8.51273e-06L195.211 9.21222C195.094 36.7434 172.743 59 145.212 59L50 59C22.3858 59 5.86356e-05 81.3858 5.88568e-05 109L6.27834e-05 599C6.30047e-05 626.614 22.3858 649 50.0001 649L339.999 649C367.613 649 389.999 671.386 389.999 699L389.999 1238C389.999 1265.61 367.613 1288 339.999 1288L245 1288C217.386 1288 195 1310.39 195 1338L195 1402"
           stroke="#383E43"
           stroke-dasharray="5 5"
         />
       </svg>
+
+      <svg
+        class="block md:hidden box z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
+        id="motionSVG"
+        width="60"
+        height="60"
+        viewBox="0 0 60 60"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="30"
+          cy="30"
+          r="29.5"
+          stroke="#383E43"
+          stroke-dasharray="5 5"
+        />
+        <circle cx="30" cy="30" r="18" fill="white" />
+        <path
+          d="M32.6698 24L27.3298 24C24.0098 24 22.6598 26.35 24.3098 29.22L25.0498 30.5C25.2298 30.81 25.5598 31 25.9198 31L34.0798 31C34.4398 31 34.7698 30.81 34.9498 30.5L35.6898 29.22C37.3398 26.35 35.9898 24 32.6698 24Z"
+          fill="#383E43"
+        />
+        <path
+          d="M33.2104 32L26.7804 32C26.3904 32 26.1504 32.42 26.3504 32.75L26.9904 33.85C28.6404 36.72 31.3604 36.72 33.0104 33.85L33.6504 32.75C33.8404 32.42 33.6004 32 33.2104 32Z"
+          fill="#383E43"
+        />
+      </svg>
     </div>
     <home-page-road-map-componentsBanner />
     <home-page-road-map-componentsProductionStage />
@@ -99,8 +111,12 @@ let ctx;
 
 onMounted(() => {
   ctx = gsap.context((self) => {
-    gsap.to(".motionPath #motionPath", 
-    {strokeDashoffset: -300, repeat: -1, ease: "none", duration: 5});
+    gsap.to(".motionPath #motionPath", {
+      strokeDashoffset: -300,
+      repeat: -1,
+      ease: "none",
+      duration: 5,
+    });
     gsap.to("#motionSVG", {
       scrollTrigger: {
         trigger: "#motionSVG",
diff --git a/components/home-page/Slider.vue b/components/home-page/Slider.vue
index b62a985..c7d6e2d 100644
--- a/components/home-page/Slider.vue
+++ b/components/home-page/Slider.vue
@@ -2,35 +2,37 @@
   <div
     ref="main"
     id="flipSection"
-    class="-z-[1] relative mt-[100vw] lg:mt-[25vw] flex flex-col items-center justify-center"
+    class="-z-[1] relative mt-[100vw] md:mt-[25vw] flex flex-col items-center justify-center"
   >
     <img
       src="/public/images/assal.png"
       alt="product-name"
-      class="z-[100] ax w-[18.205vw] lg:w-[17.292vw] h-[20.521vw]"
+      class="z-[100] ax w-[18.205vw] md:w-[17.292vw] h-[20.521vw]"
     />
     <h1
-      class="font-bold text-[4.038vw] lg:text-[2.21vw] text-[#383E43] my-[2.083vw]"
+      class="font-bold text-[4.038vw] md:text-[2.21vw] text-[#383E43] my-[2.083vw]"
     >
       عسل آقای عسل
     </h1>
     <p
-      class="text-[3.59vw] lg:text-[1.823vw] text-[#383E43] font-semibold"
+      class="text-[3.59vw] md:text-[1.823vw] text-[#383E43] font-semibold"
       dir="rtl"
     >
       510,000
-      <span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
+      <span class="text-[2.836vw] md:text-[0.833vw] font-[400]">تومان</span>
     </p>
 
+
     <div class="absolute">
       <div
         ref="start"
-        class="start relative w-[87.69%] lg:w-[91.82%] flex flex-col items-center justify-center"
+        class="start relative w-[87.69%] md:w-[91.82%] flex flex-col items-center justify-center"
       >
 
+
       <div class="absolute small">
         <svg
-        class="absolute -left-[0vw] top-[27.25vw] h-[8.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
+        class="absolute left-[1.2vw] top-[28.9vw] h-[8.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
        viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M42.7144 57.3336L54.2759 50.6586C61.4639 46.5086 61.4473 39.73 54.2852 35.5748L51.082 33.7267C50.3046 33.2801 49.3524 33.281 48.573 33.731L30.9061 43.931C30.1267 44.381 29.6499 45.2051 29.6479 46.1017L29.6468 49.7998C29.6642 58.08 35.5264 61.4836 42.7144 57.3336Z" fill="#383E43"/>
           <path d="M31.5397 40.6771L45.461 32.6396C46.3054 32.1521 46.2997 30.9422 45.4539 30.4773L42.6924 28.8942C35.5302 24.739 29.6413 28.139 29.6587 36.4192L29.6489 39.6023C29.6503 40.5547 30.6953 41.1646 31.5397 40.6771Z" fill="#383E43"/>
@@ -57,7 +59,7 @@
       </div>
  <div class="absolute big">
   <svg
-  class="absolute left-[38vw] -top-[2.3vw]  md:-top-[1.8] h-[5.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
+  class="absolute left-[36vw] -top-[2.3vw]   md:-top-[2.1vw] h-[5.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
  viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M45.9902 36.675L45.9902 23.325C45.9902 15.025 40.1115 11.65 32.9319 15.775L29.7298 17.625C28.9543 18.075 28.479 18.9 28.479 19.8L28.479 40.2C28.479 41.1 28.9543 41.925 29.7298 42.375L32.9319 44.225C40.1115 48.35 45.9902 44.975 45.9902 36.675Z" fill="#383E43"/>
     <path d="M25.9775 38.025L25.9775 21.95C25.9775 20.975 24.9269 20.375 24.1013 20.875L21.3496 22.475C14.17 26.6 14.17 33.4 21.3496 37.525L24.1013 39.125C24.9269 39.6 25.9775 39 25.9775 38.025Z" fill="#383E43"/>
diff --git a/components/home-page/road-map-components/Banner.vue b/components/home-page/road-map-components/Banner.vue
index 7549871..46fc689 100644
--- a/components/home-page/road-map-components/Banner.vue
+++ b/components/home-page/road-map-components/Banner.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="baner flex flex-col w-[84.61vw] lg:w-[70.41%] mt-[50vw] lg:mt-[20vw]">
-        <img src="/public/images/baner.jpg" alt="organic" class="h-[45.12vw] lg:h-[26.302vw] w-full object-cover rounded-[25px]">
-    <div class="flex flex-col flex-col-reverse px-[1vw] lg:flex-row justify-between items-center mt-12">
-        <p class="mt-[17vw] lg:mt-0 w-full lg:w-[50%] text-[3.59vw] lg:text-[1.502vw]">
+    <div class="baner flex flex-col w-[84.61vw] md:w-[70.41%] mt-[50vw] md:mt-[20vw]">
+        <img src="/public/images/baner.jpg" alt="organic" class="h-[45.12vw] md:h-[26.302vw] w-full object-cover rounded-[25px]">
+    <div class="flex flex-col flex-col-reverse px-[1vw] md:flex-row justify-between items-center mt-12">
+        <p class="mt-[17vw] md:mt-0 w-full md:w-[50%] text-[3.59vw] md:text-[1.502vw]">
             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
         </p>
-        <p class="w-full lg:w-[40%] text-[4.544vw] lg:text-[1.186vw]">
+        <p class="w-full md:w-[40%] text-[4.544vw] md:text-[1.186vw]">
             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
         </p>
   
diff --git a/components/home-page/road-map-components/ProductionStage.vue b/components/home-page/road-map-components/ProductionStage.vue
index 6ba21ba..aa80406 100644
--- a/components/home-page/road-map-components/ProductionStage.vue
+++ b/components/home-page/road-map-components/ProductionStage.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="mt-[28vw] lg:mt-[12vw] w-[84.615vw] lg:w-[51.14%]">
-    <h2 class="mb-[7vw] lg:mb-0 text-[#383E43] text-[4.544vw] lg:text-[1.502vw]">مراحل تولید :</h2>
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4 p-[3vw]">
+  <div class="mt-[28vw] md:mt-[12vw] w-[84.615vw] md:w-[51.14%]">
+    <h2 class="mb-[7vw] md:mb-0 text-[#383E43] text-[4.544vw] md:text-[1.502vw]">مراحل تولید :</h2>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 p-[3vw]">
   
       <div
-        class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
+        class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
       >
 
         <div class="flex items-center">
           <svg
-          class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
+          class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
             viewBox="0 0 41 41"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
@@ -50,20 +50,20 @@
               stroke-linejoin="round"
             />
           </svg>
-          <span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
+          <span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
             >تحقیق و توسعه</span
           >
         </div>
-        <span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
+        <span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
       </div>
 
       <div
-        class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
+        class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
       >
 
         <div class="flex items-center">
           <svg
-          class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
+          class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
             viewBox="0 0 41 41"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
@@ -104,19 +104,19 @@
               stroke-linejoin="round"
             />
           </svg>
-          <span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
+          <span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
             >تحقیق و توسعه</span
           >
         </div>
-        <span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
+        <span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
       </div>
       <div
-      class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
+      class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
     >
 
       <div class="flex items-center">
         <svg
-        class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
+        class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
           viewBox="0 0 41 41"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -157,19 +157,19 @@
             stroke-linejoin="round"
           />
         </svg>
-        <span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
+        <span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
           >تحقیق و توسعه</span
         >
       </div>
-      <span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
+      <span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
     </div>
     <div
-    class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
+    class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
   >
 
     <div class="flex items-center">
       <svg
-      class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
+      class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
         viewBox="0 0 41 41"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -210,19 +210,19 @@
           stroke-linejoin="round"
         />
       </svg>
-      <span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
+      <span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
         >تحقیق و توسعه</span
       >
     </div>
-    <span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
+    <span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
   </div>
   <div
-  class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
+  class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
 >
 
   <div class="flex items-center">
     <svg
-    class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
+    class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
       viewBox="0 0 41 41"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -263,19 +263,19 @@
         stroke-linejoin="round"
       />
     </svg>
-    <span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
+    <span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
       >تحقیق و توسعه</span
     >
   </div>
-  <span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
+  <span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
 </div>
 <div
-class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] rounded-[5.128vw] lg:rounded-[1.302vw] px-[3vw] lg:px-[1vw]"
+class="flex items-center justify-between bg-white h-[17.179vw] md:h-[4.688vw] rounded-[5.128vw] md:rounded-[1.302vw] px-[3vw] md:px-[1vw]"
 >
 
 <div class="flex items-center">
   <svg
-  class="h-[6.667vw] w-[6.667vw] lg:h-[2.135vw] lg:w-[2.135vw]"
+  class="h-[6.667vw] w-[6.667vw] md:h-[2.135vw] md:w-[2.135vw]"
     viewBox="0 0 41 41"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -316,11 +316,11 @@ class="flex items-center justify-between bg-white h-[17.179vw] lg:h-[4.688vw] ro
       stroke-linejoin="round"
     />
   </svg>
-  <span class="text-[#383E43] text-[4.038vw] lg:text-[1.055vw] ms-[2vw]"
+  <span class="text-[#383E43] text-[4.038vw] md:text-[1.055vw] ms-[2vw]"
     >تحقیق و توسعه</span
   >
 </div>
-<span class="text-[#878787] text-[5.11vw] lg:text-[1.335vw]">01</span>
+<span class="text-[#878787] text-[5.11vw] md:text-[1.335vw]">01</span>
 </div>
     </div>
   </div>
diff --git a/components/home-page/road-map-components/ShopNavigator.vue b/components/home-page/road-map-components/ShopNavigator.vue
index 568ec39..b9063be 100644
--- a/components/home-page/road-map-components/ShopNavigator.vue
+++ b/components/home-page/road-map-components/ShopNavigator.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="ps-[6vw] lg:ps-[15%] text-[#383E43] flex flex-col items-start justify-center mt-[28vw] lg:mt-[14.4vw] h-[87.179vw] lg:h-[22.396vw] w-[81.61%] lg:w-[81.04%] border-[2px] border-[##E5E5E5] rounded-[25px]"
+    class="ps-[6vw] md:ps-[15%] text-[#383E43] flex flex-col items-start justify-center mt-[28vw] md:mt-[14.4vw] h-[87.179vw] md:h-[22.396vw] w-[81.61%] md:w-[81.04%] border-[2px] border-[##E5E5E5] rounded-[25px]"
   >
-    <p class="mt-[5vw] lg:mt-0 w-[36.154vw]  lg:w-auto lg:text-[1.69vw] text-[5.11vw]">
+    <p class="mt-[5vw] md:mt-0 w-[36.154vw]  md:w-auto md:text-[1.69vw] text-[5.11vw]">
       ما اینجا هستیم تا از شما حمایت کنیم
     </p>
 
-    <p class="text-[3.19vw] lg:text-[0.938vw] mt-3">سلامتی با محصولات شینان</p>
+    <p class="text-[3.19vw] md:text-[0.938vw] mt-3">سلامتی با محصولات شینان</p>
 
     <nuxt-link
       to="/"
-      class="flex items-center mt-[8vw] border-black lg:mt-[2vw] text-[3.19vw] lg:text-[0.938vw] py-[12px] px-[24px] rounded-[10px] border-[1px] border-[#E5E5E5]"
+      class="flex items-center mt-[8vw] border-black md:mt-[2vw] text-[3.19vw] md:text-[0.938vw] py-[12px] px-[24px] rounded-[10px] border-[1px] border-[#E5E5E5]"
     >
       <svg
         class="me-1"
diff --git a/layouts/default.vue b/layouts/default.vue
index 593fd64..1c88c76 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,7 +2,7 @@
   <!-- desktop navMenu -->
   <svg
     @click="[openMenu(), (menuStatus = !menuStatus)]"
-    class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] lg:mt-[1.51vw] me-[6.154vw] lg:me-[1.25vw]"
+    class="cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] md:mt-[1.51vw] me-[6.154vw] md:me-[1.25vw]"
     viewBox="0 0 40 40"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -36,7 +36,7 @@
 
   <div class="hidden md:block" v-show="menuStatus">
     <svg
-      class="svg cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 lg:mt-[5.885vw] me-[6.154vw] lg:me-[1.25vw]"
+      class="svg cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 md:mt-[5.885vw] me-[6.154vw] md:me-[1.25vw]"
       viewBox="0 0 40 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -50,7 +50,7 @@
       />
     </svg>
     <svg
-      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] lg:mt-[9.948vw] me-[6.154vw] lg:me-[1.25vw]"
+      class="cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] md:mt-[9.948vw] me-[6.154vw] md:me-[1.25vw]"
       viewBox="0 0 40 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -93,7 +93,7 @@
     </svg>
 
     <svg
-      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[14.01vw] me-[6.154vw] lg:me-[1.25vw]"
+      class="cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[14.01vw] me-[6.154vw] md:me-[1.25vw]"
       viewBox="0 0 40 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -143,7 +143,7 @@
     </svg>
 
     <svg
-      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[18.073vw] me-[6.154vw] lg:me-[1.25vw]"
+      class="cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[18.073vw] me-[6.154vw] md:me-[1.25vw]"
       viewBox="0 0 40 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -179,7 +179,7 @@
     </svg>
 
     <svg
-      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 lg:mt-[22.135vw] me-[6.154vw] lg:me-[1.25vw]"
+      class="cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 md:mt-[22.135vw] me-[6.154vw] md:me-[1.25vw]"
       viewBox="0 0 40 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -208,7 +208,7 @@
     </svg>
 
     <svg
-      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] lg:mt-[26.198vw] me-[6.154vw] lg:me-[1.25vw]"
+      class="cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] md:mt-[26.198vw] me-[6.154vw] md:me-[1.25vw]"
       viewBox="0 0 40 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -241,7 +241,7 @@
   <img
   src="/public/images/logo.png"
   alt="logo"
-  class="z-[1] absolute mt-[6.154vw] lg:mt-[1.25vw] right-[6.154vw] lg:right-[1.25vw] w-[8.718vw] lg:w-[70px] h-[8.718vw] lg:h-[70px]"
+  class="z-[1] absolute mt-[6.154vw] md:mt-[1.25vw] right-[6.154vw] md:right-[1.25vw] w-[8.718vw] md:w-[3.646vw] h-[8.718vw] md:h-[3.646vw]"
   />
   
   <!-- mobile navMenu -->
diff --git a/layouts/footer.vue b/layouts/footer.vue
index 2e00914..8687989 100644
--- a/layouts/footer.vue
+++ b/layouts/footer.vue
@@ -1,9 +1,9 @@
 <template>
   <footer dir="rtl">
     <div class=" flex bg-[#F5F5F5]  justify-center py-[4.844vw]">
-      <div class="mt-[10vw] lg:mt-0 w-[80.88%] flex flex-col lg:flex-row justify-between">
+      <div class="mt-[10vw] md:mt-0 w-[80.88%] flex flex-col md:flex-row justify-between">
         <div
-          class=" w-full lg:w-[32.19%] bg-[#F2F2F2] text-[#383E43] border-[1px] rounded-[16px] p-[1.042vw] border-[#E5E5E5]"
+          class=" w-full md:w-[32.19%] bg-[#F2F2F2] text-[#383E43] border-[1px] rounded-[16px] p-[1.042vw] border-[#E5E5E5]"
         >
           <img
             src="/public/images/logo.png"
@@ -13,7 +13,7 @@
             class="m-2"
           />
           <p
-            class="mt-[5vw] text-[3.59vw] lg:text-[0.938vw] leading-[5.385vw] lg:leading-[1.406vw] font-[500] px-[4vw] lg:p-[0.417vw] lg:mt-[0.417vw]"
+            class="mt-[5vw] text-[3.59vw] md:text-[0.938vw] leading-[5.385vw] md:leading-[1.406vw] font-[500] px-[4vw] md:p-[0.417vw] md:mt-[0.417vw]"
           >
             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
             استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
@@ -23,11 +23,11 @@
           </p>
 
           <div
-            class="space-y-[2.5vw] px-[4vw] lg:px-0 lg:space-y-[1.25vw] mt-[3.333vw] font-[500] text-[3.19vw] lg:text-[0.833vw]"
+            class="space-y-[2.5vw] px-[4vw] md:px-0 md:space-y-[1.25vw] mt-[3.333vw] font-[500] text-[3.19vw] md:text-[0.833vw]"
           >
-            <p class="flex items-center mt-6 lg:mt-0">
+            <p class="flex items-center mt-6 md:mt-0">
               <svg
-                class="w-[4.359vw] lg:w-[1.042vw]"
+                class="w-[4.359vw] md:w-[1.042vw]"
                 viewBox="0 0 20 20"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -44,7 +44,7 @@
 
             <p class="flex items-center">
               <svg
-                class="w-[4.359vw] lg:w-[1.042vw]"
+                class="w-[4.359vw] md:w-[1.042vw]"
                 viewBox="0 0 20 20"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -70,7 +70,7 @@
             </p>
             <p class="flex">
               <svg
-                class="w-[4.359vw] lg:w-[1.563vw]"
+                class="w-[4.359vw] md:w-[1.563vw]"
                 viewBox="0 0 20 20"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -94,22 +94,22 @@
           </div>
         </div>
         <div
-          class="w-full lg:w-[59.43%] space-y-6 flex flex-col justify-center items-end"
+          class="w-full md:w-[59.43%] space-y-6 flex flex-col justify-center items-end"
         >
           <div
-            class="mt-8 lg:mt-0 w-full flex items-center justify-between flex-row h-[72px] bg-[#F2F2F2] text-[#383E43] border-[1px] rounded-[16px] font-[600] border-[#E5E5E5]"
+            class="mt-8 md:mt-0 w-full flex items-center justify-between flex-row h-[72px] bg-[#F2F2F2] text-[#383E43] border-[1px] rounded-[16px] font-[600] border-[#E5E5E5]"
           >
-            <p class="hidden lg:block w-[50%] ps-5 text-[0.938vw]">
+            <p class="hidden md:block w-[50%] ps-5 text-[0.938vw]">
               با ثبت ایمیل از آخرین تخفیف ها با خبر شوید
             </p>
-            <div class="flex items-center w-full lg:w-[50%] text-end me-2">
+            <div class="flex items-center w-full md:w-[50%] text-end me-2">
               <input
                 type="email"
-                class="w-[80%] ms-2 lg:ms-0 me-2 h-[11.026vw] lg:h-[2.5vw] text-[#383E43] bg-[#E5E5E5] rounded-[8px] placeholder:text-[#383E43] placeholder:ps-4 placeholder:font-[500]"
+                class="text-[3.19vw] md:text-[0.938vw] w-[80%] ms-2 md:ms-0 me-2 h-[11.026vw] md:h-[2.5vw] text-[#383E43] bg-[#E5E5E5] rounded-[8px] placeholder:text-[#383E43] placeholder:ps-4 placeholder:font-[500]"
                 placeholder="آدرس ایمیل"
               />
               <button
-                class="flex text-[3.19vw] lg:text-[0.938vw] items-center font-[500] h-[11.026vw] lg:h-[2.4vw] rounded-[8px] bg-[#A62186] text-white px-[4vw] lg:px-[1.25vw]"
+                class="flex text-[3.19vw] md:text-[0.938vw] items-center font-[500] h-[11.026vw] md:h-[2.4vw] rounded-[8px] bg-[#A62186] text-white px-[4vw] md:px-[1.25vw]"
               >
                 ثبت
               </button>
@@ -117,12 +117,12 @@
           </div>
 
           <div
-            class="w-full flex items-center justify-between px-5 lg:px-auto flex-row h-[72px] bg-[#F2F2F2] text-[#383E43] border-[1px] rounded-[16px] font-[600] border-[#E5E5E5]"
+            class="w-full flex items-center justify-between px-5 md:px-auto flex-row h-[72px] bg-[#F2F2F2] text-[#383E43] border-[1px] rounded-[16px] font-[600] border-[#E5E5E5]"
           >
-            <p class="hidden lg:block text-[0.938vw]">
+            <p class="hidden md:block text-[0.938vw]">
               مارا در شبکه های اجتماعی دنبال کنید
             </p>
-            <div class="flex justify-between px-[10vw] w-full lg:w-[25%]">
+            <div class="flex justify-between px-[10vw] w-full md:w-[25%]">
               <svg
                 width="40"
                 height="40"
@@ -209,7 +209,7 @@
           </div>
 
           <div
-            class="hidden lg:flex w-full flex-row items-center justify-between"
+            class="hidden md:flex w-full flex-row items-center justify-between"
           >
             <div class="text-[#878787] text-[0.833vw] space-y-3 mt-8">
               <h2 class="text-[1.055vw] text-[#383E43] font-[600]">
@@ -328,7 +328,7 @@
               </div>
             </div>
           </div>
-          <div class="block lg:hidden w-full">
+          <div class="block md:hidden w-full">
             <p
               class="flex justify-between text-[3.59vw] text-[#383E43] font-semibold border-b py-[4vw]"
             >
diff --git a/pages/index.vue b/pages/index.vue
index 3666a2f..e057956 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,11 +1,14 @@
 <template>
-    <home-pageHeader />
-    <home-pageAboutUs />
-    <home-pageSlider />
-    <home-pageRoadMap />
-    <home-pageCatalogs />
-    <home-pageProductSampleForm />
-    <home-pageMediaSlider />
-    <home-pageInstagram />
+    <client-only>
+        <home-pageHeader />
+        <home-pageAboutUs />
+        <home-pageSlider />
+        <home-pageRoadMap />
+        <home-pageCatalogs />
+        <home-pageProductSampleForm />
+        <home-pageMediaSlider />
+        <home-pageInstagram />
+
+    </client-only>
 </template>