<template>
  <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>
        </div>
    </div>
  </section>
</template>

<script setup>
const { banners } = inject("data");
</script>

<style lang="scss">
.home-banners {
  @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];

    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>
