Hero Section with Animated Background

<div class="col-span-1 lg:col-span-7 max-w-[500px] h-[500px] md:p-10 flex flex-col relative overflow-hidden opacity-0 animate-pulse text-center bg-black bg-[url(https://cdn.midjourney.com/c780339b-ee63-4563-92a6-503fa0d14923/0_0.png?w=800&q=80)] bg-cover border-neutral-900 border rounded-[40px] pt-8 pr-8 pb-8 pl-8 shadow-sm items-center justify-center" style="animation: 0.8s ease-out 0.2s 1 normal forwards running fadeInUp; opacity: 0; transform: translateY(79.9px);">
  <div class="absolute inset-0 flex pointer-events-none items-center justify-center">
    <div class="w-80 h-80 md:w-96 md:h-96 rounded-full border border-white/10"></div>
  </div>
  <div class="flex items-center gap-3 mb-8 md:mb-10 z-10">
    <span class="md:text-2xl text-xl font-medium text-neutral-300 tracking-tight font-jakarta">FinanceFlow</span>
  </div>
  <h1 class="z-10 md:text-5xl lg:text-7xl leading-tight text-4xl font-medium text-neutral-50 tracking-tight font-jakarta">
    Smart BankingMade Simple
    <br>
  </h1>
  <p class="z-10 max-w-md text-neutral-200 font-geist mt-4">Experience the future of digital banking with AI-powered insights and seamless transactions</p>
  <style>
  @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
</style>
</div>