javaneh/components/home-page/MediaSlider.vue

<template>
  <div class="flex flex-col lg:flex-row pb-[15vw] lg:pb-0 px-[2vw] pt-[6.5vw]">
    <div class="w-full lg:w-[35%] flex flex-col ps-[8vw] lg:ps-0">
      <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"
        >
          رسانه
        </p>
        <svg
          class="hidden lg:block"
          width="112"
          height="50"
          viewBox="0 0 112 50"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="25" cy="25" r="24.5" stroke="#383E43" />
          <g clip-path="url(#clip0_836_14506)">
            <path
              d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801"
              stroke="#383E43"
              stroke-width="2"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </g>
          <circle
            cx="87"
            cy="25"
            r="24.5"
            transform="rotate(-180 87 25)"
            stroke="#878787"
          />
          <path
            d="M84.0002 17.0799L90.5202 23.5999C91.2902 24.3699 91.2902 25.6299 90.5202 26.3999L84.0002 32.9199"
            stroke="#878787"
            stroke-width="2"
            stroke-miterlimit="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <defs>
            <clipPath id="clip0_836_14506">
              <rect
                width="24"
                height="24"
                fill="white"
                transform="translate(13 13)"
              />
            </clipPath>
          </defs>
        </svg>
      </div>

      <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]"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <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"
          >
            فواید و مضرات مصرف گندم
          </span>
        </p>
        <p class="items-center hidden lg:flex">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            فواید و مضرات مصرف گندم
          </span>
        </p>


        
        <p class=" items-center hidden lg:flex">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            فواید و مضرات مصرف گندم
          </span>
        </p>
        <p class=" items-center hidden lg:flex">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            فواید و مضرات مصرف گندم
          </span>
        </p>
        <p class=" items-center hidden lg:flex">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            فواید و مضرات مصرف گندم
          </span>
        </p>
        <button
          class="hidden lg:flex text-[0.833vw] border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
        >
          ادامه مطلب
          <svg
            class="ms-3"
            width="24"
            height="24"
            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="#383E43"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M20.4999 12H3.66992"
              stroke="#383E43"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
      </div>
    </div>

    <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]"
    >
      <div
        class="w-[64.103vw] lg:w-[20.156vw] h-[85.641vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
      >
        <div
          class="w-[53.846vw] lg:w-[18.073vw] h-[76.41vw] lg: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"
      >
        <div class="lg:w-[18.073vw] lg: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"
      >
        <div class="lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"></div>
      </div>
    </div>
  </div>
</template>