<div class="fade-in">
    <div class="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20 pt-14">
      <div class="mx-auto max-w-7xl px-6 py-32 lg:py-40 lg:px-8">
        <div class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-x-16 xl:grid-cols-2 xl:gap-x-16">
          <div class="text-content">
            <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
            <h1 class="text-4xl font-semibold tracking-tight text-black lg:text-6xl">This is hero9.html</h1>
            <h2 class="mt-6 text-4xl font-normal tracking-tight text-black lg:text-5xl">This is smaller title h2</h2>
            <p class="mt-6 text-lg font-light text-gray-200 lg:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</p>
            <div class="mt-10 flex items-center gap-x-6">
              <a href="/ventures" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Learn More</a>
              <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
            </div>
          </div>
          <div class="flex justify-center items-center">
            <img src="https://images.unsplash.com/photo-1567532900872-f4e906cbf06a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&q=80" alt="" class="w-full max-w-lg rounded-2xl object-cover">
          </div>
        </div>
      </div>
    </div>
  </div>
  