change banners images

components/app/desktop/header/Index.vue

@@ -51,7 +51,7 @@ const overlay = (event, is) => {
     @apply sticky top-0 z-10 xl:gap-4;
 
     &>a>img {
-        @apply text-center;
+        @apply text-center w-[180px];
     }
 
     &>a {

components/home/Banners.vue

@@ -1,29 +1,99 @@
 <template>
-    <section class="home-banners">
-        <div>
-            <router-link v-for="({link, image}, i) in banners" :key="i" :to="link">
-                <img :src="image" />
-            </router-link>
+  <section class="home-banners">
+    <div>
+      <!-- <router-link v-for="({ link, image }, i) in banners" :key="i" :to="link">
+        <img :src="image" />
+      </router-link> -->
+      <div class="bg-image-1 baner text-gray-800 flex justify-start w-full ps-[2rem] relative bg-gray-200 rounded-[5px] lg:rounded-[10px] shadow-sm">
+      <div class="-space-y-[0.4rem] lg:space-y-0 flex flex-col text-start w-full">
+        <h1 class="text-[0.9rem] lg:text-[2rem] font-bold">فروش ویژه 
+            <span class="text-blue-800">روغن ها</span>
+            
+            <br />
+            در 
+            <span class="text-green-600">آناهیتا</span>
+        </h1>
+      
+        <p class="text-gray-500 font-medium text-[0.5rem] lg:text-[1.2rem]">بهترین و با کیفیت ترین روغن ها را از آناهیتا بخواهید.</p>
+        <nuxt-link to="/search?category=haribaloil" class="gap-[0.1rem] lg:gap-[0.3rem] w-[3rem] lg:w-[7rem] h-[1.1rem] lg:h-[2.5rem] flex bg-green-500 text-white flex items-center justify-center text-[0.4rem] lg:text-[1.2rem] font-medium rounded-[2rem]">    
+            <p>مشاهده</p>
+            <svg 
+            class="h-[0.5rem] lg:h-[1.5rem]" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M9.57 5.93018L3.5 12.0002L9.57 18.0702" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M20.4999 12H3.66992" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+        </nuxt-link>
+      
+    </div>
+      </div>
+
+
+
+
+      <div class="bg-image-2 baner text-gray-800 flex justify-start w-full ps-[2rem] relative bg-sky-100 rounded-[10px] shadow-sm">
+        <div class="-space-y-[0.4rem] lg:space-y-0 flex flex-col text-start w-full">
+          <h1 class="text-[0.9rem] lg:text-[2rem] font-bold">عرضه کننده محصولات 
+              <span class="text-blue-500">بالک</span>
+          </h1>
+          <p class="text-gray-500 font-medium text-[0.5rem] lg:text-[1.2rem]">آناهیتا بالک یکی از بزرگترین عرضه کننده
+            <br />
+            محصولات بالک در کشور .
+          </p>
+          <nuxt-link to="/search?category=medicineandgalen" class="lg:!mt-4 gap-[0.1rem] lg:gap-[0.3rem] w-[3rem] lg:w-[7rem] h-[1.1rem] lg:h-[2.5rem] flex bg-green-500 text-white flex items-center justify-center text-[0.4rem] lg:text-[1.2rem] font-medium rounded-[2rem]">    
+            <p>مشاهده</p>
+            <svg 
+            class="h-[0.5rem] lg:h-[1.5rem]" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M9.57 5.93018L3.5 12.0002L9.57 18.0702" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M20.4999 12H3.66992" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+        </nuxt-link>
         </div>
-    </section>
+        </div>
+    </div>
+  </section>
 </template>
 
 <script setup>
-const { banners } = inject('data')
+const { banners } = inject("data");
 </script>
 
 <style lang="scss">
 .home-banners {
-    @apply w-full flex justify-center mt-6 lg:mt-[6.5rem];
+  @apply w-full flex justify-center mt-6 lg:mt-[6.5rem];
 
-    div {
-        @apply flex flex-wrap justify-center gap-3 lg:gap-[1.4rem] ;
+  div {
+    @apply flex flex-wrap justify-center gap-3 lg:gap-[1.4rem];
 
-        a {
-            img {
-                @apply object-contain w-[21.3rem] h-[6.6rem] lg:w-[47.9rem] lg:h-[18.8rem];
-            }
-        }
+    a {
+      img {
+        @apply object-contain w-[21.3rem] h-[6.6rem] lg:w-[47.9rem] lg:h-[18.8rem];
+      }
+    }
+    .baner {
+      @apply border object-contain relative w-[21.3rem] h-[6.6rem] lg:w-[47.9rem] lg:h-[18.8rem] ;
+      img{
+       @apply flex inline object-cover  w-[21.3rem] h-[6.6rem] lg:w-[50rem] lg:h-[40rem]
+      }
     }
 }
+}
+.baner{
+
+    background-size: 80% 220%;
+background-repeat: no-repeat;
+    background-position: -4rem 50%; 
+    font-family: 'vazir';
+}
+.bg-image-1 {
+    background-image: url('/public/images/1111.png');
+}
+.bg-image-2 {
+    background-image: url('/public/images/222.png');
+}
+@media (min-width: 1024px) {
+    .baner{
+        background-size: 100%;
+        background-position: -13rem 50%; 
+    }
+ }
 </style>