Contact Components in Mirga library

<section class="py-12 md:py-24 bg-neutral-900">
  <div class="container mx-auto px-4">
    <h2 class="flex flex-wrap mb-2 pb-14 text-6xl sm:text-9xl xl:text-11xl text-white font-semibold border-b border-neutral-600 font-heading">
      <span class="mr-4">Contact us</span>
      <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M22.1104 0H7.89656C3.53541 0 0 3.54358 0 7.9148V22.1614C0 26.5327 3.53541 30.0763 7.89656 30.0763H22.1104C26.4715 30.0763 30.0069 26.5327 30.0069 22.1614V7.9148C30.0069 3.54358 26.4715 0 22.1104 0Z" fill="#FEE34E"></path>
        <path d="M15.3529 7.38071C14.3388 6.36424 12.6946 6.36424 11.6805 7.38071C10.6663 8.39718 10.6663 10.0452 11.6805 11.0617L15.812 15.2028C16.8261 16.2192 18.4704 16.2192 19.4845 15.2028C20.4986 14.1863 20.4986 12.5383 19.4845 11.5218L15.3529 7.38071Z" fill="#19191B"></path>
        <path d="M13.4047 14.3978C12.3906 13.3813 10.7464 13.3813 9.73223 14.3978C8.71811 15.4143 8.71811 17.0623 9.73223 18.0788L13.8638 22.2199C14.8779 23.2363 16.5221 23.2363 17.5362 22.2199C18.5504 21.2034 18.5504 19.5554 17.5362 18.5389L13.4047 14.3978Z" fill="#19191B"></path>
      </svg>
    </h2>
    <h4 class="mb-8 text-4xl text-white font-semibold tracking-tight font-heading">Do you have any question?</h4>
    <div class="flex flex-wrap -m-2">
      <div class="w-full p-2">
        <div class="h-full py-10 px-12 bg-white rounded-4xl">
          <div class="flex flex-wrap justify-between items-center -m-4">
            <div class="w-auto p-4">
              <h4 class="text-4xl font-medium tracking-tight font-heading">Office in Chester, UK</h4>
            </div>
            <div class="w-auto p-4">
              <div class="flex flex-wrap items-center justify-between -m-5">
                <div class="w-auto p-5">
                  <p class="text-xl text-neutral-600 font-semibold tracking-tight">Anfield Rd 88, M11349, Chester, United Kingdom</p>
                </div>
                <div class="w-auto p-5"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Maps</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-2/3 p-2">
        <div class="h-full p-10 bg-white rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="w-full">
              <div class="max-w-lg">
                <h4 class="mb-2 text-4xl font-medium tracking-tight font-heading">Contact</h4>
                <p class="mb-12 text-lg text-neutral-600 font-medium tracking-tight">Can create, connect, verify, and search across all you knowledge platforms is one centralized.</p>
              </div>
              <ul class="mb-10">
                <li class="mb-6 flex">
                  <div class="flex items-center justify-center w-6 h-6 mr-4">
                    <svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11 24H5C2.243 24 0 21.757 0 19V5C0 2.243 2.243 0 5 0H11C13.757 0 16 2.243 16 5V19C16 21.757 13.757 24 11 24ZM5 2C3.346 2 2 3.346 2 5V19C2 20.654 3.346 22 5 22H11C12.654 22 14 20.654 14 19V5C14 3.346 12.654 2 11 2H5ZM10 19C10 18.448 9.552 18 9 18H7C6.448 18 6 18.448 6 19C6 19.552 6.448 20 7 20H9C9.552 20 10 19.552 10 19Z" fill="#19191B"></path>
                    </svg>
                  </div>
                  <span class="text-xl font-medium tracking-tight">+41 3372 003 00</span>
                </li>
                <li class="flex">
                  <div class="flex items-center justify-center w-6 h-6 mr-4">
                    <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M19 0H5C3.67441 0.00158786 2.40356 0.528882 1.46622 1.46622C0.528882 2.40356 0.00158786 3.67441 0 5L0 17C0.00158786 18.3256 0.528882 19.5964 1.46622 20.5338C2.40356 21.4711 3.67441 21.9984 5 22H19C20.3256 21.9984 21.5964 21.4711 22.5338 20.5338C23.4711 19.5964 23.9984 18.3256 24 17V5C23.9984 3.67441 23.4711 2.40356 22.5338 1.46622C21.5964 0.528882 20.3256 0.00158786 19 0ZM5 2H19C19.5988 2.00118 20.1835 2.18151 20.679 2.5178C21.1744 2.85409 21.5579 3.33095 21.78 3.887L14.122 11.546C13.5584 12.1073 12.7954 12.4225 12 12.4225C11.2046 12.4225 10.4416 12.1073 9.878 11.546L2.22 3.887C2.44215 3.33095 2.82561 2.85409 3.32105 2.5178C3.81648 2.18151 4.40121 2.00118 5 2ZM19 20H5C4.20435 20 3.44129 19.6839 2.87868 19.1213C2.31607 18.5587 2 17.7956 2 17V6.5L8.464 12.96C9.40263 13.8963 10.6743 14.422 12 14.422C13.3257 14.422 14.5974 13.8963 15.536 12.96L22 6.5V17C22 17.7956 21.6839 18.5587 21.1213 19.1213C20.5587 19.6839 19.7956 20 19 20Z" fill="#19191B"></path>
                    </svg>
                  </div>
                  <span class="text-xl font-medium tracking-tight">contactcontact@email.com</span>
                </li>
              </ul>
              <ul class="flex flex-wrap -m-1.5 mb-16">
                <li class="p-1.5">
                  <a class="flex items-center justify-center w-12 h-12 bg-neutral-50 hover:bg-opacity-80 rounded-full transition duration-200" href="#">
                    <img class="h-5" src="mirga-assets/images/contact/fb.svg" alt="">
                  </a>
                </li>
                <li class="p-1.5">
                  <a class="flex items-center justify-center w-12 h-12 bg-neutral-50 hover:bg-opacity-80 rounded-full transition duration-200" href="#">
                    <img class="h-5" src="mirga-assets/images/contact/instagram.svg" alt="">
                  </a>
                </li>
                <li class="p-1.5">
                  <a class="flex items-center justify-center w-12 h-12 bg-neutral-50 hover:bg-opacity-80 rounded-full transition duration-200" href="#">
                    <img class="h-5" src="mirga-assets/images/contact/x.svg" alt="">
                  </a>
                </li>
              </ul>
            </div>
            <div class="w-full">
              <div class="flex flex-wrap -m-1.5">
                <div class="w-auto p-1.5"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">FAQs</a></div>
                <div class="w-auto p-1.5"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Helpdesk</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:flex-1 p-2">
        <div class="h-full p-10 bg-white rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-8 w-full">
              <h4 class="mb-2 text-4xl font-medium tracking-tight font-heading">Live chat</h4>
              <p class="mb-8 text-lg text-neutral-600 font-medium tracking-tight">Chat with Jesse for expert help!</p>
              <img class="mx-auto h-56 object-cover" src="mirga-assets/images/contact/woman.png" alt="">
            </div>
            <div class="w-full"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Open Chat</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark">
  <div class="container mw-xl mw-lg-7xl">
    <div class="position-relative d-inline-block mb-14">
      <span class="position-absolute top-0 end-0 me-n7 me-md-n6 me-lg-n5">
        <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22.1104 0H7.89656C3.53541 0 0 3.54358 0 7.9148V22.1614C0 26.5327 3.53541 30.0763 7.89656 30.0763H22.1104C26.4715 30.0763 30.0069 26.5327 30.0069 22.1614V7.9148C30.0069 3.54358 26.4715 0 22.1104 0Z" fill="#FEE34E"></path>
          <path d="M15.3529 7.38071C14.3388 6.36424 12.6946 6.36424 11.6805 7.38071C10.6663 8.39718 10.6663 10.0452 11.6805 11.0617L15.812 15.2028C16.8261 16.2192 18.4704 16.2192 19.4845 15.2028C20.4986 14.1863 20.4986 12.5383 19.4845 11.5218L15.3529 7.38071Z" fill="#19191B"></path>
          <path d="M13.4047 14.3978C12.3906 13.3813 10.7464 13.3813 9.73223 14.3978C8.71811 15.4143 8.71811 17.0623 9.73223 18.0788L13.8638 22.2199C14.8779 23.2363 16.5221 23.2363 17.5362 22.2199C18.5504 21.2034 18.5504 19.5554 17.5362 18.5389L13.4047 14.3978Z" fill="#19191B"></path>
        </svg>
      </span>
      <h2 class="position-relative font-heading text-white mb-0">Contact us</h2>
    </div>
    <div class="pt-2 border-top border-dark-light mb-8">
      <h5 class="font-heading fw-semibold text-white mb-0">Do you have any question?</h5>
    </div>
    <div class="px-8 px-sm-12 py-10 mb-4 bg-white rounded-5">
      <div class="row align-items-center">
        <div class="col-12 col-lg-5 mb-10 mb-lg-0">
          <h4 class="fs-3 fw-medium mb-0">Office in Chester, UK</h4>
        </div>
        <div class="col-12 col-lg-7">
          <div class="d-lg-flex w-100 align-items-center justify-content-lg-end">
            <span class="d-block lead fs-6">Anfield Rd 88, M11349, Chester, United Kingdom</span>
            <a class="btn mt-8 mt-lg-0 ms-lg-auto ms-lg-16 btn-primary" href="#">More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-8 mb-4 mb-lg-0">
        <div class="h-100 px-8 px-sm-10 pt-10 pb-12 bg-white rounded-5">
          <div class="mw-md">
            <h4 class="fs-3 fw-medium mb-2">Office in Chester, UK</h4>
            <p class="lead fw-medium mb-12">Can create, connect, verify, and search across all you knowledge platforms is one centralized.</p>
            <div class="d-flex mb-6 align-items-center">
              <svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 24H5C2.243 24 0 21.757 0 19V5C0 2.243 2.243 0 5 0H11C13.757 0 16 2.243 16 5V19C16 21.757 13.757 24 11 24ZM5 2C3.346 2 2 3.346 2 5V19C2 20.654 3.346 22 5 22H11C12.654 22 14 20.654 14 19V5C14 3.346 12.654 2 11 2H5ZM10 19C10 18.448 9.552 18 9 18H7C6.448 18 6 18.448 6 19C6 19.552 6.448 20 7 20H9C9.552 20 10 19.552 10 19Z" fill="#19191B"></path>
              </svg>
              <span class="ms-2 fs-6 fw-medium text-dark">+41 3372 003 00</span>
            </div>
            <div class="d-flex mb-10 align-items-center">
              <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 0H5C3.67441 0.00158786 2.40356 0.528882 1.46622 1.46622C0.528882 2.40356 0.00158786 3.67441 0 5L0 17C0.00158786 18.3256 0.528882 19.5964 1.46622 20.5338C2.40356 21.4711 3.67441 21.9984 5 22H19C20.3256 21.9984 21.5964 21.4711 22.5338 20.5338C23.4711 19.5964 23.9984 18.3256 24 17V5C23.9984 3.67441 23.4711 2.40356 22.5338 1.46622C21.5964 0.528882 20.3256 0.00158786 19 0ZM5 2H19C19.5988 2.00118 20.1835 2.18151 20.679 2.5178C21.1744 2.85409 21.5579 3.33095 21.78 3.887L14.122 11.546C13.5584 12.1073 12.7954 12.4225 12 12.4225C11.2046 12.4225 10.4416 12.1073 9.878 11.546L2.22 3.887C2.44215 3.33095 2.82561 2.85409 3.32105 2.5178C3.81648 2.18151 4.40121 2.00118 5 2ZM19 20H5C4.20435 20 3.44129 19.6839 2.87868 19.1213C2.31607 18.5587 2 17.7956 2 17V6.5L8.464 12.96C9.40263 13.8963 10.6743 14.422 12 14.422C13.3257 14.422 14.5974 13.8963 15.536 12.96L22 6.5V17C22 17.7956 21.6839 18.5587 21.1213 19.1213C20.5587 19.6839 19.7956 20 19 20Z" fill="#19191B"></path>
              </svg>
              <span class="ms-2 fs-6 fw-medium text-dark">contact@email.com</span>
            </div>
            <div class="d-flex mb-16 align-items-center">
              <a class="btn p-0 me-3 d-flex align-items-center justify-content-center btn-light rounded-pill" href="#" style="width: 46px; height: 46px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.59391 18.8946V12.6047H6.30815V10.002H8.59391V8.01827C8.59391 5.76115 9.93802 4.51549 11.9934 4.51549C12.9781 4.51549 14.0083 4.69145 14.0083 4.69145V6.9068H12.8731C11.7542 6.9068 11.4062 7.60179 11.4062 8.31323V10.002H13.902L13.5033 12.6047H11.4062V18.8946C15.7088 18.2194 19 14.4951 19 10.0019C19 5.03029 14.9706 1 10 1C5.02944 1 1 5.03029 1 10.0019C1 14.4951 4.29123 18.2194 8.59391 18.8946Z" fill="#19191B"></path>
                </svg>
              </a>
              <a class="btn p-0 me-3 d-flex align-items-center justify-content-center btn-light rounded-pill" href="#" style="width: 46px; height: 46px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_231_5728)">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.0834 5.83317C19.0834 3.11983 16.8801 0.916504 14.1667 0.916504H5.83342C3.12008 0.916504 0.916748 3.11983 0.916748 5.83317V14.1665C0.916748 16.8798 3.12008 19.0832 5.83342 19.0832H14.1667C16.8801 19.0832 19.0834 16.8798 19.0834 14.1665V5.83317ZM17.5834 5.83317V14.1665C17.5834 16.0523 16.0526 17.5832 14.1667 17.5832H5.83342C3.94758 17.5832 2.41675 16.0523 2.41675 14.1665V5.83317C2.41675 3.94733 3.94758 2.41649 5.83342 2.41649H14.1667C16.0526 2.41649 17.5834 3.94733 17.5834 5.83317ZM14.0751 9.36484C13.8126 7.59067 12.4092 6.18733 10.6351 5.92483C10.4367 5.89483 10.2367 5.88067 10.0359 5.88067C7.79591 5.88067 5.95258 7.724 5.95258 9.964C5.95258 12.204 7.79591 14.0473 10.0359 14.0473C12.2759 14.0473 14.1192 12.204 14.1192 9.964C14.1192 9.76317 14.1051 9.56317 14.0751 9.36484ZM12.5917 9.58483C12.6101 9.71066 12.6192 9.83733 12.6192 9.964C12.6192 11.3807 11.4534 12.5473 10.0359 12.5473C8.61925 12.5473 7.45258 11.3807 7.45258 9.964C7.45258 8.5465 8.61925 7.38066 10.0359 7.38066C10.1626 7.38066 10.2892 7.38983 10.4151 7.40816C11.5376 7.57483 12.4251 8.46233 12.5917 9.58483ZM14.5834 4.6665C14.9976 4.6665 15.3334 5.00233 15.3334 5.4165C15.3334 5.83067 14.9976 6.16649 14.5834 6.16649C14.1692 6.16649 13.8334 5.83067 13.8334 5.4165C13.8334 5.00233 14.1692 4.6665 14.5834 4.6665Z" fill="#19191B"></path>
                  </g>
                </svg>
              </a>
              <a class="btn p-0 d-flex align-items-center justify-content-center btn-light rounded-pill" href="#" style="width: 46px; height: 46px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.8216 8.98736L17.9648 2H16.5092L11.1727 8.06576L6.91356 2H2L8.44212 11.1733L2 18.5H3.45554L9.08757 12.0929L13.5864 18.5H18.5L11.8216 8.98736ZM9.82739 11.2538L9.17367 10.3398L3.98044 3.07371H6.21644L10.4088 8.93987L11.0597 9.8539L16.5085 17.4786H14.2725L9.82739 11.2538Z" fill="#19191B"></path>
                </svg>
              </a>
            </div>
            <div><a class="btn me-4 btn-outline-dark" href="#">FAQs</a><a class="btn btn-outline-primary" href="#">Helpdesk</a></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="h-100 px-8 px-sm-10 pt-10 pb-12 bg-white rounded-5">
          <div class="mw-md">
            <h4 class="fs-3 fw-medium mb-2">Live chat</h4>
            <p class="lead fw-medium mb-8">Chat with Jesse for expert help!</p>
            <img class="img-fluid d-block mb-8 mx-auto" src="mirga-assets/images/contact/woman.png" alt="">
            <div><a class="btn btn-outline-primary" href="#">Open chat</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>