UI Components – Nigodo Library

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <span class="text-lg font-extrabold text-red-500">Section label</span>
    <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Our team is the best in the business.</h1>
    <p class="text-xl font-extrabold leading-8 mb-16">Highly professional and capable of running your business across all digital channels.</p>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Macauley
            <span class="block">Herring</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">CEO &amp; Founder</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">Dance is the hidden language of the soul.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar2.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Elen
            <span class="block">Benitez</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">CPO</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">The only way to do great work is to love what you do.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar5.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Ivan
            <span class="block">Mathews</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">CTO</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">Everything you’ve ever wanted is on the other side of fear.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar1.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Kacy
            <span class="block">Wade</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">Customer Success</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">The only way to do great work is to love what you do.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar5.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Theo
            <span class="block">Morales</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">Backend Developer</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">Dance is the hidden language of the soul.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar1.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Rosemary
            <span class="block">Hernandez</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">IOS Developer</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">The only way to do great work is to love what you do.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Ivan
            <span class="block">Mathews</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">CTO</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">Everything you’ve ever wanted is on the other side of fear.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow">
          <img class="max-w-max block mb-8" src="nigodo-assets/team/avatar6.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Kacy
            <span class="block">Wade</span>
          </h2>
          <span class="block mb-8 font-bold text-indigo-300 leading-6">Customer Success</span>
          <p class="max-w-xs text-sm font-extrabold leading-5">The only way to do great work is to love what you do.</p>
          <div class="mt-auto pt-8">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-3" href="#">
              <svg width="32" height="24" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M31.3636 3.24326C30.2259 3.74735 29.0053 4.08922 27.7228 4.24185C29.0323 3.45765 30.0347 2.21382 30.5098 0.73624C29.2814 1.46245 27.9255 1.98978 26.4808 2.27563C25.3239 1.04144 23.6783 0.272705 21.853 0.272705C18.3513 0.272705 15.5121 3.11195 15.5121 6.61175C15.5121 7.10811 15.5681 7.59291 15.6762 8.05649C10.4073 7.79185 5.73508 5.26745 2.60806 1.43154C2.06145 2.36639 1.75049 3.45569 1.75049 4.61846C1.75049 6.81841 2.87074 8.75952 4.57044 9.89518C3.5313 9.86043 2.55397 9.57457 1.69837 9.09942V9.17862C1.69837 12.2496 3.88478 14.8127 6.78387 15.396C6.25271 15.5389 5.69261 15.6181 5.11317 15.6181C4.70372 15.6181 4.30776 15.5776 3.91953 15.5003C4.72685 18.0208 7.06781 19.8538 9.8414 19.904C7.67236 21.6037 4.93741 22.6139 1.96685 22.6139C1.45503 22.6139 0.950892 22.583 0.454529 22.5269C3.26094 24.329 6.59271 25.3797 10.1736 25.3797C21.8377 25.3797 28.2134 15.7186 28.2134 7.33993L28.1922 6.51907C29.4379 5.63053 30.5156 4.51417 31.3636 3.24326Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800" href="#">
              <svg width="34" height="26" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.6677 0.636353H24.3319C29.3122 0.636353 33.3638 4.68801 33.3636 9.6679V24.3321C33.3636 29.312 29.3122 33.3636 24.3319 33.3636H9.6677C4.68782 33.3636 0.636353 29.3122 0.636353 24.3321V9.6679C0.636353 4.68801 4.68782 0.636353 9.6677 0.636353ZM24.3321 30.4599C27.711 30.4599 30.4601 27.711 30.4601 24.3321H30.4599V9.6679C30.4599 6.28913 27.7109 3.54007 24.3319 3.54007H9.6677C6.28893 3.54007 3.54007 6.28913 3.54007 9.6679V24.3321C3.54007 27.711 6.28893 30.4601 9.6677 30.4599H24.3321ZM8.42856 17.0002C8.42856 12.2737 12.2736 8.42856 17 8.42856C21.7263 8.42856 25.5714 12.2737 25.5714 17.0002C25.5714 21.7265 21.7263 25.5714 17 25.5714C12.2736 25.5714 8.42856 21.7265 8.42856 17.0002ZM11.38 17C11.38 20.0988 13.9012 22.6198 17 22.6198C20.0988 22.6198 22.62 20.0988 22.62 17C22.62 13.901 20.099 11.3798 17 11.3798C13.901 11.3798 11.38 13.901 11.38 17Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto text-center">
      <span class="text-lg font-extrabold text-gray-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-4">Join our team</h1>
      <p class="text-xl font-extrabold leading-8 mb-16">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Front-end Developer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Back-end Developer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">UI/UX Designer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Product Designer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Project Manager</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white" x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-pink-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      <div class="inline-flex w-full max-w-md p-4 items-center bg-white border-2 border-indigo-900 rounded shadow">
        <a class="text-indigo-900 hover:text-indigo-800" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94731 18.6997 5.81279 16.9855 4.27665C15.2714 2.74051 13.0338 1.91951 10.7329 1.98247C8.43203 2.04543 6.24272 2.98757 4.61514 4.61515C2.98756 6.24273 2.04543 8.43204 1.98247 10.7329C1.91951 13.0338 2.7405 15.2714 4.27664 16.9855C5.81278 18.6997 7.9473 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5064 21.8481 21.617 21.7737 21.71 21.68C21.8902 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8902 20.4765 21.71 20.29ZM11 18C9.61553 18 8.26215 17.5895 7.111 16.8203C5.95986 16.0511 5.06265 14.9579 4.53284 13.6788C4.00303 12.3997 3.8644 10.9922 4.1345 9.63437C4.4046 8.2765 5.07128 7.02922 6.05025 6.05026C7.02922 5.07129 8.2765 4.4046 9.63436 4.13451C10.9922 3.86441 12.3997 4.00303 13.6788 4.53285C14.9579 5.06266 16.0511 5.95987 16.8203 7.11101C17.5895 8.26216 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9497 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#171952"></path>
          </svg>
        </a>
        <input class="bg-transparent px-3 text-lg font-extrabold text-indigo-900 placeholder-indigo-900 outline-none" type="search" placeholder="Search">
      </div>
    </div>
    <div class="mb-10">
      <div class="lg:flex items-center -mb-4">
        <a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl font-extrabold" :class="{ 'text-pink-400 hover:text-gray-500': category!= $refs.category1.textContent }" href="#">All Categories</a>
        <a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-pink-400 hover:text-gray-500 font-extrabold" :class="{ 'text-pink-400 hover:text-gray-500': category!= $refs.category2.textContent }" href="#">Technology</a>
        <a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-pink-400 hover:text-gray-500 font-extrabold" :class="{ 'text-pink-400 hover:text-gray-500': category!= $refs.category3.textContent }" href="#">Development</a>
        <a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-pink-400 hover:text-gray-500 font-extrabold" :class="{ 'text-pink-400 hover:text-gray-500': category!= $refs.category4.textContent }" href="#">Marketing</a>
        <a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="inline-block mb-4 text-xl text-pink-400 hover:text-gray-500 font-extrabold" :class="{ 'text-pink-400 hover:text-gray-500': category!= $refs.category5.textContent }" href="#">Startup</a>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
            <p class="text-xl font-bold text-pink-400 mb-2">John Doe • 19 Jan 2022</p>
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-pink-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops2.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
            <p class="text-xl font-bold text-pink-400 mb-2">John Doe • 19 Jan 2022</p>
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-pink-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/office1.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
            <p class="text-xl font-bold text-pink-400 mb-2">John Doe • 19 Jan 2022</p>
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-pink-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/office2.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
            <p class="text-xl font-bold text-pink-400 mb-2">John Doe • 19 Jan 2022</p>
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-pink-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/office3.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
            <p class="text-xl font-bold text-pink-400 mb-2">John Doe • 19 Jan 2022</p>
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-pink-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/office2.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
            <p class="text-xl font-bold text-pink-400 mb-2">John Doe • 19 Jan 2022</p>
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-pink-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 hidden" :class="{ 'hidden': !showContent }">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
            <p class="text-xl font-bold text-pink-400 mb-2">John Doe • 19 Jan 2022</p>
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-pink-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 hidden" :class="{ 'hidden': !showContent }">
        <div class="bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <img class="h-64 md:h-96 w-full block object-cover" src="nigodo-assets/blog/laptops2.jpeg" alt="">
          <div class="px-6 py-8 md:p-10 border-t-3 border-indigo-900">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Technology</span>
            <p class="text-xl font-bold text-pink-400 mb-2">John Doe • 19 Jan 2022</p>
            <h2 class="text-2xl font-extrabold mb-6">A small business is only as good as its tools and it is totally true.</h2>
            <p class="text-xl font-bold mb-6">We've all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
            <a class="inline-block text-xl font-bold text-pink-500 hover:text-indigo-600" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-20 text-center"><a x-on:click.prevent="showContent=true" :class="{ 'hidden': showContent }" class="inline-block py-4 px-12 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Show more</a></div>
  </div>
</section>

<div class="fixed left-0 bottom-0 w-full z-50 pb-16" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-12 px-6 md:px-14 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="max-w-xl">
            <p class="text-xl font-bold leading-8 mb-6">We use third-party cookies in order to personalise your experience</p>
            <a class="inline-flex items-center text-xl leading-7 text-purple-500 hover:underline" href="#">
              <span class="mr-2">Read our cookie policy</span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.82994 5.29001L2.58994 1.05001C2.49698 0.956281 2.38638 0.881887 2.26452 0.831118C2.14266 0.780349 2.01195 0.754211 1.87994 0.754211C1.74793 0.754211 1.61723 0.780349 1.49537 0.831118C1.37351 0.881887 1.26291 0.956281 1.16994 1.05001C0.983692 1.23737 0.87915 1.49082 0.87915 1.75501C0.87915 2.0192 0.983692 2.27265 1.16994 2.46001L4.70994 6.00001L1.16994 9.54001C0.983692 9.72737 0.87915 9.98082 0.87915 10.245C0.87915 10.5092 0.983692 10.7626 1.16994 10.95C1.26338 11.0427 1.3742 11.116 1.49604 11.1658C1.61787 11.2155 1.74834 11.2408 1.87994 11.24C2.01155 11.2408 2.14201 11.2155 2.26385 11.1658C2.38569 11.116 2.4965 11.0427 2.58994 10.95L6.82994 6.71001C6.92367 6.61705 6.99806 6.50645 7.04883 6.38459C7.0996 6.26273 7.12574 6.13202 7.12574 6.00001C7.12574 5.868 7.0996 5.73729 7.04883 5.61543C6.99806 5.49357 6.92367 5.38297 6.82994 5.29001Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg hover:text-white hover:bg-indigo-800 font-extrabold bg-white border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Decline</a><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Allow</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

<section>
  <div class="pt-26 border-3 border-l-0 border-r-0 border-indigo-900">
    <div class="pb-16 border-b-3 border-indigo-900">
      <div class="container px-4 mx-auto text-center">
        <a class="inline-block mx-auto mb-20" href="#">
          <img class="h-12" src="nigodo-assets/logo-nigodo.svg" alt="">
        </a>
        <div class="flex flex-wrap -mx-4 -mb-6 justify-center">
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Product</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Features</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Pricing</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Resources</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Careers</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Help</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Privacy</a></div>
        </div>
      </div>
    </div>
    <div class="container px-4 pt-16 pb-24 mx-auto">
      <p class="text-center text-xl md:text-2xl font-extrabold">© 2022 Nigodo. All rights reserved.</p>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl font-extrabold">Projects completed</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl font-extrabold">APR</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl font-extrabold">Hours saved annually</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">3.500</h3>
            <h4 class="text-xl font-extrabold">Unique users</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/microsoft.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/google.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/slack.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl font-extrabold">Projects completed</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl font-extrabold">APR</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl font-extrabold">Hours saved annually</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">3.500</h3>
            <h4 class="text-xl font-extrabold">Unique users</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-5xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Gain more insight into how people use your</h1>
      <p class="text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-message.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Measure your performance</h4>
          <p class="text-lg font-extrabold leading-7">Stay connected with your team and make quick decisions wherever you are.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-bar.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Custom analytics</h4>
          <p class="text-lg font-extrabold leading-7">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-people.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Team Management</h4>
          <p class="text-lg font-extrabold leading-7">Our calendar lets you know what is happening with customer and projects so you.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-write.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Build your website</h4>
          <p class="text-lg font-extrabold leading-7">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-box.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Connect multiple apps</h4>
          <p class="text-lg font-extrabold leading-7">The first business platform to bring together all of your products from one place.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-settings.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Easy setup</h4>
          <p class="text-lg font-extrabold leading-7">End to End Business Platform, Sales Management, Marketing Automation, Help Desk</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 md:py-48 min-h-screen md:min-h-0 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Error 404</span>
      <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Page not found</h1>
      <p class="text-xl font-extrabold leading-7 mb-6">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Go back to Homepage</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Try Again</a></div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/microsoft.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/google.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 md:px-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <img src="nigodo-assets/logo-clouds/slack.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-12">
      <span class="inline-block mb-3 text-lg font-extrabold text-gray-500">Quotes</span>
      <div class="flex flex-wrap sm:flex-nowrap -mx-4">
        <div class="hidden sm:block self-start px-4 text-gray-300 opacity-10">
          <svg class="h-10 sm:h-auto" width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.1252 0.631112L72.2546 13.9596C68.5132 13.6478 65.4734 14.2714 63.1351 15.8303C60.7967 17.3112 59.1599 19.4937 58.2246 22.3776C57.3672 25.1836 57.2113 28.4573 57.7569 32.1986H74.1252V64H42.3239V32.1986C42.3239 20.9746 44.935 12.4787 50.1573 6.71079C55.3796 0.864946 63.3689 -1.16161 74.1252 0.631112ZM31.8014 0.631112L29.9307 13.9596C26.1894 13.6478 23.1495 14.2714 20.8112 15.8303C18.4729 17.3112 16.836 19.4937 15.9007 22.3776C15.0433 25.1836 14.8874 28.4573 15.433 32.1986H31.8014V64H0V32.1986C0 20.9746 2.61114 12.4787 7.83342 6.71079C13.0557 0.864946 21.045 -1.16161 31.8014 0.631112Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="w-full lg:w-auto py-6 lg:py-0 px-4">
            <div class="overflow-hidden">
              <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                  <div x-ref="slide1" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                      <span class="text-gray-400 font-bold">CEO &amp; Founder at Nigodo</span>
                  </div>
                  <div x-ref="slide2" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                      <span class="text-gray-400 font-bold">Co-Founder of FlexPro Solutions</span>
                  </div>
                  <div x-ref="slide3" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">Unlocking Freedom: The Ultimate Answer to Flexibility and Financial Stability.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Oliver Tate</h4>
                      <span class="text-gray-400 font-bold">Founder &amp; CEO of FlexEarn Technologies</span>
                  </div>
                </div>
            </div>
        </div>
        <div class="ml-auto self-end px-4 text-gray-300 opacity-10">
          <svg class="h-10 sm:h-auto" width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.62939e-06 63.3689L1.87067 50.0404C5.61201 50.3522 8.65186 49.7286 10.9902 48.1697C13.3285 46.6888 14.9654 44.5063 15.9007 41.6224C16.7581 38.8164 16.914 35.5427 16.3684 31.8014H7.62939e-06V3.8147e-06H31.8014V31.8014C31.8014 43.0254 29.1902 51.5213 23.9679 57.2892C18.7457 63.1351 10.7564 65.1616 7.62939e-06 63.3689ZM42.3239 63.3689L44.1946 50.0404C47.9359 50.3522 50.9757 49.7286 53.3141 48.1697C55.6524 46.6888 57.2892 44.5063 58.2246 41.6224C59.082 38.8164 59.2378 35.5427 58.6922 31.8014H42.3239V3.8147e-06H74.1252V31.8014C74.1252 43.0254 71.5141 51.5213 66.2918 57.2892C61.0695 63.1351 53.0802 65.1616 42.3239 63.3689Z" fill="currentColor"></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="flex justify-center items-center">
      <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="inline-block w-4 h-4 mr-4 bg-gray-500 rounded-full" :class="{ 'bg-gray-100 hover:bg-gray-200': activeSlide != 0, 'bg-gray-500': activeSlide == 0 }"></button>
      <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="inline-block w-4 h-4 mr-4 bg-gray-100 hover:bg-gray-200 rounded-full" :class="{ 'bg-gray-100 hover:bg-gray-200': activeSlide != 1, 'bg-gray-500': activeSlide == 1 }"></button>
      <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="inline-block w-4 h-4 bg-gray-100 hover:bg-gray-200 rounded-full" :class="{ 'bg-gray-100 hover:bg-gray-200': activeSlide != 2, 'bg-gray-500': activeSlide == 2 }"></button>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto text-center">
      <span class="text-lg font-extrabold text-green-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-4">Join our team</h1>
      <p class="text-xl font-extrabold leading-8 mb-16">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Front-end Developer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Back-end Developer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">UI/UX Designer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Product Designer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Project Manager</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Application</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading">Great work starts with your app</h1>
    </div>
    <img class="block mx-auto mb-12" src="nigodo-assets/apps/laptop-full.svg" alt="">
    <div class="max-w-3xl mx-auto text-center">
      <p class="text-xl font-extrabold leading-7 mb-6">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Request a demo</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
    </div>
  </div>
</section>

<section class="py-26 md:py-48 min-h-screen md:min-h-0 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Error 404</span>
      <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Page not found</h1>
      <p class="text-xl font-extrabold leading-7 mb-6">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Go back to Homepage</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Try Again</a></div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="text-lg font-extrabold text-indigo-500">Newsletter</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-4">Sign up for our newsletter</h1>
      <p class="text-xl font-extrabold leading-8 mb-10">Stay in the loop with everything you need to know.</p>
    </div>
    <div class="max-w-lg mx-auto">
      <div class="flex flex-wrap -mx-2 justify-center">
        <div class="flex-grow w-full md:w-auto px-2 mb-2">
          <input class="inline-block w-full p-4 text-lg font-extrabold placeholder-indigo-900 shadow border-2 border-indigo-900 rounded outline-none" type="email" placeholder="Enter your email">
        </div>
        <div class="w-full md:w-auto px-2 mb-2"><a class="inline-flex items-center justify-center w-full md:w-auto h-full py-4 px-5 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200" href="#">Subscribe</a></div>
        <div class="w-full px-2">
          <p class="text-xs font-extrabold">We care about your data in our privacy policy</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 md:py-48 min-h-screen md:min-h-0 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Error 404</span>
      <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Page not found</h1>
      <p class="text-xl font-extrabold leading-7 mb-6">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Go back to Homepage</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Try Again</a></div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Application</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading">Great work starts with your app</h1>
    </div>
    <img class="block mx-auto mb-12" src="nigodo-assets/apps/laptop-full.svg" alt="">
    <div class="max-w-3xl mx-auto text-center">
      <p class="text-xl font-extrabold leading-7 mb-6">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Request a demo</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl font-extrabold">Projects completed</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl font-extrabold">APR</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl font-extrabold">Hours saved annually</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">3.500</h3>
            <h4 class="text-xl font-extrabold">Unique users</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-5xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-red-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Gain more insight into how people use your</h1>
      <p class="text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-message.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Measure your performance</h4>
          <p class="text-lg font-extrabold leading-7">Stay connected with your team and make quick decisions wherever you are.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-bar.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Custom analytics</h4>
          <p class="text-lg font-extrabold leading-7">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-people.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Team Management</h4>
          <p class="text-lg font-extrabold leading-7">Our calendar lets you know what is happening with customer and projects so you.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-write.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Build your website</h4>
          <p class="text-lg font-extrabold leading-7">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-box.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Connect multiple apps</h4>
          <p class="text-lg font-extrabold leading-7">The first business platform to bring together all of your products from one place.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-settings.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Easy setup</h4>
          <p class="text-lg font-extrabold leading-7">End to End Business Platform, Sales Management, Marketing Automation, Help Desk</p>
        </div>
      </div>
    </div>
  </div>
</section>