Tailwind CSS Components

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-2/5 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-red-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-3/5 md:h-full" src="nigodo-assets/background-elements/pattern-dots-red-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-6xl mb-16">
      <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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md">
          <div class="md:flex items-start mb-12">
            <div class="flex-shrink-0 flex items-center justify-center w-18 h-18 bg-white rounded-full border-3 border-indigo-900 shadow-md">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_277_26293)">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997V4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </g>
              </svg>
            </div>
            <div class="mt-8 md:mt-0 md:ml-8">
              <h4 class="text-2xl font-extrabold mb-4">Measure your performance</h4>
              <p class="text-lg font-extrabold leading-8">Stay connected with your team and make quick decisions wherever you are.</p>
            </div>

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-2/5 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-indigo-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-3/5 md:h-full" src="nigodo-assets/background-elements/pattern-dots-indigo-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-6xl mb-16">
      <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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md">
          <div class="md:flex items-start mb-12">
            <div class="flex-shrink-0 flex items-center justify-center w-18 h-18 bg-white rounded-full border-3 border-indigo-900 shadow-md">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_277_26293)">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997V4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </g>
              </svg>
            </div>
            <div class="mt-8 md:mt-0 md:ml-8">
              <h4 class="text-2xl font-extrabold mb-4">Measure your performance</h4>
              <p class="text-lg font-extrabold leading-8">Stay connected with your team and make quick decisions wherever you are.</p>
            </div>

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 md:w-1/2 mt-4 md:mt-16" src="nigodo-assets/background-elements/pattern-dots-gray-left.svg" alt="">
  <img class="absolute bottom-0 right-0" src="nigodo-assets/background-elements/pattern-smash-rotate-gray-right.svg" alt="">
  <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-4xl font-extrabold font-heading mt-4 mb-4">Join our team</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">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 -mx-4 mb-16 items-center">
        <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <div class="inline-flex w-full bg-white p-4 items-center 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="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <div class="relative bg-white border-2 border-indigo-900 rounded shadow">
            <select class="block w-full pl-4 py-4 pr-20 bg-transparent text-lg font-extrabold appearance-none outline-none cursor-pointer" name="" id="">
              <option value="1">Location</option>
              <option value="1">Poland</option>

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 md:w-1/2 mt-4 md:mt-16" src="nigodo-assets/background-elements/pattern-dots-red-left.svg" alt="">
  <img class="absolute bottom-0 right-0" src="nigodo-assets/background-elements/pattern-smash-rotate-red-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto text-center">
      <span class="text-lg font-extrabold text-red-500">Section label</span>
      <h1 class="text-4xl font-extrabold font-heading mt-4 mb-4">Join our team</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">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 -mx-4 mb-16 items-center">
        <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <div class="inline-flex w-full bg-white p-4 items-center 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="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <div class="relative bg-white border-2 border-indigo-900 rounded shadow">
            <select class="block w-full pl-4 py-4 pr-20 bg-transparent text-lg font-extrabold appearance-none outline-none cursor-pointer" name="" id="">
              <option value="1">Location</option>
              <option value="1">Poland</option>

<section x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="py-24 bg-gray-50 border-b-3 border-indigo-900">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl">
        <span class="text-lg font-extrabold text-indigo-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="max-w-3xl text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-12 pb-24 relative">
    <img class="absolute top-0 left-0 w-full mt-4 md:mt-12" src="nigodo-assets/background-elements/pattern-dots-indigo-left.svg" alt="">
    <img class="absolute bottom-0 right-0 mb-10 w-3/4" src="nigodo-assets/background-elements/pattern-smash-rotate-indigo-right.svg" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
          <div class="inline-flex max-w-md bg-white p-4 mb-12 items-center 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>

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-red-200"></div>
  <img class="hidden lg:block absolute bottom-0 right-0 w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-red-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md xl:max-w-lg mx-auto">
          <div class="text-center mb-8">
            <a class="inline-block mx-auto mb-6" href="#">
              <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
            </a>
            <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Join our community</h2>
            <p class="text-lg font-extrabold leading-7 text-red-500">Start your journey with our product</p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Name</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="text" placeholder="David">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-purple-200"></div>
  <img class="hidden lg:block absolute bottom-0 right-0 w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-purple-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md xl:max-w-lg mx-auto">
          <div class="text-center mb-8">
            <a class="inline-block mx-auto mb-6" href="#">
              <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
            </a>
            <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Join our community</h2>
            <p class="text-lg font-extrabold leading-7 text-purple-500">Start your journey with our product</p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Name</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="text" placeholder="David">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">

<section x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="py-24 bg-gray-50 border-b-3 border-indigo-900">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl">
        <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="max-w-3xl text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-12 pb-24 relative">
    <img class="absolute top-0 left-0 w-full mt-4 md:mt-12" src="nigodo-assets/background-elements/pattern-dots-pink-left.svg" alt="">
    <img class="absolute bottom-0 right-0 mb-10 w-3/4" src="nigodo-assets/background-elements/pattern-smash-rotate-pink-right.svg" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
          <div class="inline-flex max-w-md bg-white p-4 mb-12 items-center 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>

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-2/5 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-gray-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-3/5 md:h-full" src="nigodo-assets/background-elements/pattern-dots-gray-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-6xl mb-16">
      <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-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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md">
          <div class="md:flex items-start mb-12">
            <div class="flex-shrink-0 flex items-center justify-center w-18 h-18 bg-white rounded-full border-3 border-indigo-900 shadow-md">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_277_26293)">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997V4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </g>
              </svg>
            </div>
            <div class="mt-8 md:mt-0 md:ml-8">
              <h4 class="text-2xl font-extrabold mb-4">Measure your performance</h4>
              <p class="text-lg font-extrabold leading-8">Stay connected with your team and make quick decisions wherever you are.</p>
            </div>

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-green-200"></div>
  <img class="hidden lg:block absolute bottom-0 right-0 w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-green-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md xl:max-w-lg mx-auto">
          <div class="text-center mb-8">
            <a class="inline-block mx-auto mb-6" href="#">
              <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
            </a>
            <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Join our community</h2>
            <p class="text-lg font-extrabold leading-7 text-green-500">Start your journey with our product</p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Name</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="text" placeholder="David">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-indigo-200"></div>
  <img class="hidden lg:block absolute bottom-0 right-0 w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-indigo-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md xl:max-w-lg mx-auto">
          <div class="text-center mb-8">
            <a class="inline-block mx-auto mb-6" href="#">
              <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
            </a>
            <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Join our community</h2>
            <p class="text-lg font-extrabold leading-7 text-indigo-500">Start your journey with our product</p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Name</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="text" placeholder="David">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">

<section x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="py-24 bg-gray-50 border-b-3 border-indigo-900">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl">
        <span class="text-lg font-extrabold text-orange-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="max-w-3xl text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-12 pb-24 relative">
    <img class="absolute top-0 left-0 w-full mt-4 md:mt-12" src="nigodo-assets/background-elements/pattern-dots-orange-left.svg" alt="">
    <img class="absolute bottom-0 right-0 mb-10 w-3/4" src="nigodo-assets/background-elements/pattern-smash-rotate-orange-right.svg" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
          <div class="inline-flex max-w-md bg-white p-4 mb-12 items-center 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>

<section x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="py-24 bg-gray-50 border-b-3 border-indigo-900">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl">
        <span class="text-lg font-extrabold text-purple-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="max-w-3xl text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-12 pb-24 relative">
    <img class="absolute top-0 left-0 w-full mt-4 md:mt-12" src="nigodo-assets/background-elements/pattern-dots-purple-left.svg" alt="">
    <img class="absolute bottom-0 right-0 mb-10 w-3/4" src="nigodo-assets/background-elements/pattern-smash-rotate-purple-right.svg" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
          <div class="inline-flex max-w-md bg-white p-4 mb-12 items-center 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>

<section x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="py-24 bg-gray-50 border-b-3 border-indigo-900">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl">
        <span class="text-lg font-extrabold text-gray-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="max-w-3xl text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-12 pb-24 relative">
    <img class="absolute top-0 left-0 w-full mt-4 md:mt-12" src="nigodo-assets/background-elements/pattern-dots-gray-left.svg" alt="">
    <img class="absolute bottom-0 right-0 mb-10 w-3/4" src="nigodo-assets/background-elements/pattern-smash-rotate-gray-right.svg" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
          <div class="inline-flex max-w-md bg-white p-4 mb-12 items-center 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>

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-2/5 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-purple-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-3/5 md:h-full" src="nigodo-assets/background-elements/pattern-dots-purple-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-6xl mb-16">
      <span class="text-lg font-extrabold text-purple-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 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md">
          <div class="md:flex items-start mb-12">
            <div class="flex-shrink-0 flex items-center justify-center w-18 h-18 bg-white rounded-full border-3 border-indigo-900 shadow-md">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_277_26293)">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997V4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </g>
              </svg>
            </div>
            <div class="mt-8 md:mt-0 md:ml-8">
              <h4 class="text-2xl font-extrabold mb-4">Measure your performance</h4>
              <p class="text-lg font-extrabold leading-8">Stay connected with your team and make quick decisions wherever you are.</p>
            </div>

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 md:w-1/2 mt-4 md:mt-16" src="nigodo-assets/background-elements/pattern-dots-pink-left.svg" alt="">
  <img class="absolute bottom-0 right-0" src="nigodo-assets/background-elements/pattern-smash-rotate-pink-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto text-center">
      <span class="text-lg font-extrabold text-pink-500">Section label</span>
      <h1 class="text-4xl font-extrabold font-heading mt-4 mb-4">Join our team</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">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 -mx-4 mb-16 items-center">
        <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <div class="inline-flex w-full bg-white p-4 items-center 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="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <div class="relative bg-white border-2 border-indigo-900 rounded shadow">
            <select class="block w-full pl-4 py-4 pr-20 bg-transparent text-lg font-extrabold appearance-none outline-none cursor-pointer" name="" id="">
              <option value="1">Location</option>
              <option value="1">Poland</option>

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-orange-200"></div>
  <img class="hidden lg:block absolute bottom-0 right-0 w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-orange-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md xl:max-w-lg mx-auto">
          <div class="text-center mb-8">
            <a class="inline-block mx-auto mb-6" href="#">
              <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
            </a>
            <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Join our community</h2>
            <p class="text-lg font-extrabold leading-7 text-orange-500">Start your journey with our product</p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Name</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="text" placeholder="David">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">

<section x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="py-24 bg-gray-50 border-b-3 border-indigo-900">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl">
        <span class="text-lg font-extrabold text-green-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="max-w-3xl text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-12 pb-24 relative">
    <img class="absolute top-0 left-0 w-full mt-4 md:mt-12" src="nigodo-assets/background-elements/pattern-dots-green-left.svg" alt="">
    <img class="absolute bottom-0 right-0 mb-10 w-3/4" src="nigodo-assets/background-elements/pattern-smash-rotate-green-right.svg" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
          <div class="inline-flex max-w-md bg-white p-4 mb-12 items-center 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>

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-gray-200"></div>
  <img class="hidden lg:block absolute bottom-0 right-0 w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-gray-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-md xl:max-w-lg mx-auto">
          <div class="text-center mb-8">
            <a class="inline-block mx-auto mb-6" href="#">
              <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
            </a>
            <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Join our community</h2>
            <p class="text-lg font-extrabold leading-7 text-gray-500">Start your journey with our product</p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Name</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="text" placeholder="David">
            </div>
            <div class="mb-6">
              <label class="block mb-2 font-extrabold" for="">Email</label>
              <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
            </div>
            <div class="mb-6">

<section x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="py-24 bg-gray-50 border-b-3 border-indigo-900">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl">
        <span class="text-lg font-extrabold text-indigo-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="max-w-3xl text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
    </div>
  </div>
  <div class="pt-12 pb-24 relative">
    <img class="absolute top-0 left-0 w-full mt-4 md:mt-12" src="nigodo-assets/background-elements/pattern-dots-2-indigo-light-left.svg" alt="">
    <img class="absolute bottom-0 right-0 mb-10 w-3/4" src="nigodo-assets/background-elements/pattern-smash-rotate-indigo-light-right.svg" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
          <div class="inline-flex max-w-md bg-white p-4 mb-12 items-center 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>