javaneh/components/home-page/Catalogs.vue

<template>
  <div class="flex justify-center">
    <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 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] md:mt-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] rounded-full"
          />
          <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"/>
                <path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                
            دانلود کاتالوگ</p>
        </div>
        
        <div class="flex flex-col items-center !m-0">
          <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"/>
                <path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                
            دانلود کاتالوگ</p>
          <p class="
          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] 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 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] md:mt-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] rounded-full"
        />
        <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"/>
              <path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              
          دانلود کاتالوگ</p>
      </div>
      
      <div class="flex flex-col items-center !m-0">
        <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"/>
              <path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              
          دانلود کاتالوگ</p>
        <p class="
        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] 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 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] md:mt-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] rounded-full"
      />
      <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"/>
            <path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            
        دانلود کاتالوگ</p>
    </div>
    
    <div class="flex flex-col items-center !m-0">
      <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"/>
            <path d="M20.1663 9.16683V13.7502C20.1663 18.3335 18.333 20.1668 13.7497 20.1668H8.24967C3.66634 20.1668 1.83301 18.3335 1.83301 13.7502V8.25016C1.83301 3.66683 3.66634 1.8335 8.24967 1.8335H12.833" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M20.1663 9.16683H16.4997C13.7497 9.16683 12.833 8.25016 12.833 5.50016V1.8335L20.1663 9.16683Z" stroke="#A62186" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            
        دانلود کاتالوگ</p>
      <p class="
      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] md:mb-[5vw] h-[28.205vw] md:h-[5.208vw] w-[28.205vw] md:w-[5.208vw] 
        rounded-full"
      />
    </div>
  </div>

















    </div>
  </div>
</template>