www_ourworld_tf/templates/partials/ventures/hero.html

<div class="relative isolate overflow-hidden bg-black text-white lg:py-24 py-16">
    <div class="mx-auto max-w-7xl px-6">
      <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
        <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
      </div>
      <div class="mx-auto max-w-2xl lg:mx-0">
        <div class="inline-flex items-center">
          <a href="/ventures" class="block">
            <h2 class="text-base font-semibold leading-8 text-indigo-400 hover:text-purple-500 transition-colors duration-200 underline"><u>VENTURES</u></h2>
          </a>
          <span class="text-base font-semibold leading-8 text-indigo-400 ml-1"> > HERO</span>
        </div>        
        <p class="mt-2 text-2xl font-bold tracking-tight text-white sm:text-4xl">Hero</p>
        <p class="mt-8 text-base font-light lg:text-xl"><b>Hero</b> is your own personal intelligent digital identity that fosters a collective intelligence and empower everyone to enhance our digital existence with unfettered access to essential tools for learning, participating, and thriving within the Mycelium Network.</p>
      </div>
      <dl class="mt-6 grid grid-cols-1 gap-8 sm:mt-16 sm:grid-cols-2 lg:grid-cols-2">
        <div class="flex flex-col-reverse px-6 py-2">
          <dt class="text-base leading-7 text-gray-300">Seamlessly integrates all aspects of your digital presence into a unified identity.</dt>
          <dd class="text-xl font-semibold leading-9 tracking-tight flex items-center gap-4"> <!-- Increased gap here -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 rounded-md bg-white text-black p-1">
              <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
            </svg>
            <span class="ml-4">Unified Digital Identity</span>
          </dd>
          </dd>
        </div>
        <div class="flex flex-col-reverse px-6 py-2">
          <dt class="text-base leading-7 text-gray-300">Ensures robust privacy measures and security protocols to safeguard your information.s</dt>
          <dd class="text-xl font-semibold leading-9 tracking-tight flex items-center gap-4"> <!-- Increased gap here -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 rounded-md bg-white text-black p-1">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
            </svg>
            <span class="ml-4">Enhanced Privacy and Security</span>
          </dd>
        </div>
        <div class="flex flex-col-reverse px-6 py-2">
          <dt class="text-base leading-7 text-gray-300">Provides easy integration with various platforms and ensures accessibility across devices.</dt>
          <dd class="text-xl font-semibold leading-9 tracking-tight flex items-center gap-4"> <!-- Increased gap here -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 rounded-md bg-white text-black p-1">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z" />
            </svg>
            <span class="ml-4">Seamless Integration and Accessibility</span>
          </dd>
        </div>
        <div class="flex flex-col-reverse px-6 py-2">
          <dt class="text-base leading-7 text-gray-300">Offers customizable features and extensibility to tailor your digital experiences according to your needs.</dt>
          <dd class="text-xl font-semibold leading-9 tracking-tight flex items-center gap-4"> <!-- Increased gap here -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 rounded-md bg-white text-black p-1">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
            </svg>
            <span class="ml-4">Customizable and Extensible Experiences
            </span>
          </dd>
        </div>
      </dl>
    </div>
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-24">
    <div class="absolute inset-x-0 top-1/2 -z-10 -translate-y-1/2 transform-gpu overflow-hidden opacity-20 blur-3xl w-1/3 mx-auto" aria-hidden="true">
        <div class="aspect-[1313/771] w-full bg-gradient-to-tr from-[#ff80b5] to-[#9089fc]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
    </div>
    <div class="text-center mt-12">
      <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight text-white lg:mb-4 lg:mt-2">Become the Hero of Your Own Digital World.</h2>
      <p class="text-base font-medium lg:text-xl text-gray-500 lg:mb-8 lg:mt-2 mt-2 lg:mb-4 mb-8">Start owning your data and digital life. With Hero, we can build a conscious collective intelligence together.</p>
    </div>
    <div class="flex justify-center mt-8">
        <a href="https://hero.myceliumproject.io">
            <img src="./hero/img/heroweb.png" alt="TF Image" class="max-w-full h-auto">
        </a>
    </div>
    <div class="mt-10 flex items-center justify-center gap-x-6">
      <a href="/contact" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Support</a>
      <a href="https://hero.myceliumproject.io" target="_blank" class="text-sm font-semibold leading-6 text-white">Visit Website <span aria-hidden="true">→</span></a>
    </div>
  </div>
</div>