<template>
  <div class="flexBox flex-col relative max-w-[100vw] overflow-x-hidden pb-[25vw] md:pb-0">
    <!-- header -->
    <div class="h-[40.625vw] mt-[7.4vw] relative w-full flex flex-col md:flex-row justify-between">
      <div
        class="flexBox bg-white absolute -right-[65vw] rounded-b-[50%]  md:right-0 w-[230vw] md:w-[41vw] -top-[60vw] md:-top-[10vw] z-[1] h-[121.538vw] md:h-[60.625vw] md:rounded-b-[0vw] md:!rounded-l-[27vw]"
      >
        <div class="flex mt-[45vw] ms-[45vw] md:ms-[6vw] md:mt-0 flex-col text-[#383E43]">
          <h2 class="text-[7.264vw] md:text-[2.344vw] border-b w-[65vw] md:w-[14vw] pb-[1.2vw] font-semibold">
            درباره ما
          </h2>
          <p class="text-[5.192vw] md:text-[1.69vw] w-[50%] md:w-[70%] md:w-[24.688vw] mt-[2.5vw] leading-[10.79vw] md:leading-[3vw]">
            ما از
            <span class="font-semibold"> قدرت آموزش </span>
            برای ایجاد
            <span class="font-semibold">تغییرات معنادار</span>
            استفاده می کنیم.
          </p>
        </div>
      </div>
      <img
        class="top-[55vw] md:top-0 md:h-[40.625vw] left-0 absolute"
        src="/public/images/aboutHead.jpg"
        alt="header-image"
      />
    </div>


    <!-- info -->
    <div
      class="flex flex-col md:flex-row justify-between items-center py-[10vw] md:py-0 absolute top-[140vw] md:top-[54.3vw] w-full z-[3] border-y h-[133.846vw] md:h-[9.115vw] text-[#383E43] font-semibold px-[10vw]"
    >
      <div class="flexBox flex-col">
        <p class="text-[8.318vw] md:text-[2.344vw]">280</p>
        <p class="text-[3.59vw] md:text-[0.938vw]">حوزه تخصصی</p>
      </div>
      <div class="flexBox flex-col">
        <p class="text-[8.318vw] md:text-[2.344vw]">2,200,000</p>
        <p class="text-[3.59vw] md:text-[0.938vw]">دانشجو</p>
      </div>
      <div class="flexBox flex-col">
        <p class="text-[8.318vw] md:text-[2.344vw]">8,100</p>
        <p class="text-[3.59vw] md:text-[0.938vw]">عنوان آموزشی</p>
      </div>
      <div class="flexBox flex-col">
        <p class="text-[8.318vw] md:text-[2.344vw]">27,000</p>
        <p class="text-[3.59vw] md:text-[0.938vw]">ساعت آموزش</p>
      </div>
    </div>



    <!-- missions -->
    <div class="flexBox mt-[250vw] md:mt-[23.6vw]">
      <div class="w-[87.692vw] md:w-[81.2vw] flex flex-col md:flex-row">
        <div class="w-full md:w-[30.5%] flex gap-[1vw]">
          <div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6vw]">
            <svg
              class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
              viewBox="0 0 10 53"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
                fill="#0D3F40"
              />
            </svg>

            <p class="w-full md:w-[7.552vw] text-[5.11vw] md:text-[1.69vw] text-[#383E43] font-semibold">
              ماموریت و چشم انداز
            </p>
          </div>
        </div>
        <div class="w-full md:w-[60%] mt-[6vw] md:mt-0 text-[3.59vw] md:text-[1.055vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw]">
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
            در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
            می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
            الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و
            شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی
            دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا
            مورد استفاده قرار گیرد. و جوابگوی سوالات پیوسته اهل دنیای موجود
            طراحی اساسا مورد استفاده قرار گیرد. و جوابگوی سوالات پیوسته اهل
            دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. و جوابگوی سوالات
            پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
          </p>
          <p class="mt-[2vw]">
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
            در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
            می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
            الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
          </p>
        </div>
      </div>
    </div>

    <!-- shinan story -->
    <!-- <div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6vw]"> -->
    <div class="flex items-center w-[87.692vw] md:w-[80.9vw] mt-[22vw] md:mt-[8.4vw] border-b pb-[3vw] md:pb-[1.2vw] gap-[3vw] md:gap-[1vw]">
      <svg
      class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
        viewBox="0 0 10 53"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
          fill="#0D3F40"
        />
      </svg>
      <h2 class="text-[5.11vw] md:text-[1.69vw] text-[#383E43] font-semibold ">
        داستان شکل گیری ShinanLearning
      </h2>
    </div>




    <div class="flexBox mt-[10vw] md:mt-[7.7vw]">
      <div class="w-[81.2vw] flex flex-col md:flex-row">
        <div class="w-full md:w-[30.5%] flex gap-[1vw]">
          <div class="w-full md:w-[70%] flex gap-[1vw] border-b border-dashed h-[10vw] md:h-[3.3vw]">
            <p class="w-full md:w-[7.552vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold">
              رویای آغاز
            </p>
          </div>
        </div>
        <div class="mt-[6vw] md:mt-0 w-full md:w-[60%] text-[3.59vw] md:text-[1.055vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw]">
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
            در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
            می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
            الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
          </p>
        </div>
      </div>
    </div>
    <div class="flexBox mt-[6vw] md:mt-[1.5vw]">
      <div class="w-[81.2vw] flex flex-col md:flex-row mt-[5vw]">
        <div class="w-full md:w-[30.5%] flex gap-[1vw]">
          <div class="w-full md:w-[70%] flex gap-[1vw] border-b border-dashed h-[10vw] md:h-[3.3vw]">
            <p class="text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold">
              آرمان ShinanLearning
            </p>
          </div>
        </div>
        <div class="mt-[6vw] md:mt-0 w-full md:w-[60%] text-[3.59vw] md:text-[1.055vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw]">
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
            در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
            می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
            الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و
            شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی
            دستاوردهای اصلی
          </p>
        </div>
      </div>
    </div>



    <!-- slider -->
    <div class="flexBox flex-col mt-[20vw] md:mt-[8.5vw] mb-[6.5vw] relative">
      <div class="w-[81.2vw] flex justify-between">
        <div class="w-full md:w-[30.5%] flex gap-[1vw]">
          <div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6.4vw]">
            <svg
            class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
              viewBox="0 0 10 53"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
                fill="#0D3F40"
              />
            </svg>
            <p class="w-full md:w-[18vw] text-[4.8vw] md:text-[1.69vw] text-[#383E43] font-semibold">
              بخشی از فعالیت های ShinanLearning
            </p>
          </div>
        </div>
        <div class="flex gap-[2vw] md:gap-[0.6vw] absolute md:left-[0.5vw] top-[20vw] md:top-[3.2vw]">
          <svg
          class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
            viewBox="0 0 60 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              cx="30"
              cy="30"
              r="29.5"
              transform="rotate(-180 30 30)"
              stroke="#878787"
            />
            <path
              d="M26.9999 22.0802L33.5199 28.6002C34.2899 29.3702 34.2899 30.6302 33.5199 31.4002L26.9999 37.9202"
              stroke="#878787"
              stroke-width="2"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <svg
          class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
            viewBox="0 0 60 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="30" cy="30" r="29.5" stroke="#383E43" />
            <g clip-path="url(#clip0_1_1122)">
              <path
                d="M33.0001 37.9198L26.4801 31.3998C25.7101 30.6298 25.7101 29.3698 26.4801 28.5998L33.0001 22.0798"
                stroke="#383E43"
                stroke-width="2"
                stroke-miterlimit="10"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </g>
            <defs>
              <clipPath id="clip0_1_1122">
                <rect
                  width="24"
                  height="24"
                  fill="white"
                  transform="translate(18 18)"
                />
              </clipPath>
            </defs>
          </svg>
        </div>
      </div>


      <div class="flex flex-col flex-col-reverse md:flex-row items-center justify-between mt-[25vw] md:mt-[1.6vw] w-full md:w-[81.2%]">
        <div>
            <h2 class="text-[4.544vw] mt-[10vw] md:mt-0 md:text-[1.502vw] text-[#383E43] font-semibold">آموزش آنلاین</h2>
            <p class="text-[3.59vw] md:text-[1.186vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw] mt-[3vw] md:mt-[1vw] w-[81.2vw] md:w-[39.844vw]">
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
              از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و
              سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای
              متنوع با هدف بهبود ابزارهای کاربردی می باشد
            </p>

        </div>
        <img
          class="h-[85.692vw] md:h-[20.469vw] w-[87.692vw] md:w-[20.469vw] rounded-[50%] object-cover"
          src="/public/images/about-slider.jpg"
          alt=""
        />
      </div>
    </div>
  </div>
</template>