Community Hero Section with CTA & Avatar Grid

<section class="sm:px-6 lg:px-8 sm:pb-20 max-w-7xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4">
  <div class="mx-auto max-w-4xl text-center">
    <span class="inline-flex items-center gap-2 rounded-full border border-violet-400/30 bg-violet-500/15 px-3 sm:px-4 py-1.5 sm:py-2 text-xs font-medium text-violet-300 font-geist">Global Network</span>
    <h2 class="mt-4 sm:mt-6 text-3xl sm:text-4xl lg:text-5xl xl:text-6xl tracking-tighter font-geist">Join 50,000+
      cognitive pioneers from 180+ countries</h2>
    <p class="mt-3 sm:mt-4 text-sm sm:text-base font-medium text-slate-300/90 font-geist">Connect with neuroscience
      researchers, peak performers, and cognitive enhancement enthusiasts pushing the boundaries of human potential.</p>
    <div class="mt-4 sm:mt-6">
      <a href="#"
        class="inline-flex items-center gap-2 rounded-full bg-violet-500 px-4 sm:px-6 py-2 sm:py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-900/25 hover:bg-violet-400 transition-colors font-geist">
        Join Neural Network
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-arrow-right">
          <path d="M5 12h14" class=""></path>
          <path d="m12 5 7 7-7 7" class=""></path>
        </svg>
      </a>
    </div>
  </div>

  <div class="relative mt-8 sm:mt-12">
    <div class="mx-auto max-w-6xl"
      style="mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent), linear-gradient(to top, transparent, black 15%); -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent), linear-gradient(to top, transparent, black 15%); mask-composite: intersect; -webkit-mask-composite: destination-in;">
      <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2 sm:gap-4">
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1521119989659-a83eee488004?q=80&amp;w=300" alt="Community member" style="">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&amp;w=300" alt="Community member" style="">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&amp;w=300" alt="Community member" style="">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1554151228-14d9def656e4?q=80&amp;w=300" alt="Community member">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&amp;w=300" alt="Community member" style="">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&amp;w=300" alt="Community member">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&amp;w=300" alt="Community member">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&amp;w=300" alt="Community member">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&amp;w=300" alt="Community member" style="">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?q=80&amp;w=300" alt="Community member">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&amp;w=300" alt="Community member">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1552058544-f2b08422138a?q=80&amp;w=300" alt="Community member">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&amp;w=300" alt="Community member">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1530785602389-07594beb8b73?q=80&amp;w=300" alt="Community member" style="">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1522529599102-193c0d76b5b6?q=80&amp;w=300" alt="Community member">
        </div>
        <div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5"><img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&amp;w=300" alt="Community member">
        </div>
      </div>
    </div>
  </div>
</section>