AI SaaS Hero Section with Animated Visual UI

<div id="hero-borealis" class="relative bg-[#050505] text-[#E4E4E7] overflow-hidden font-['DM_Sans',sans-serif]"
  style="min-height: 100vh;">
  <!-- Scripts & External Resources -->
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=Newsreader:ital,opsz,wght@1,6..72,400&display=swap');

    .font-serif-italic {
      font-family: 'Newsreader', serif;
      font-style: italic;
    }

    @keyframes animationIn {
      0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(10px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
      }
    }

    .animate-hero {
      animation: animationIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .delay-1 {
      animation-delay: 0.1s;
    }

    .delay-2 {
      animation-delay: 0.2s;
    }

    .delay-3 {
      animation-delay: 0.3s;
    }
  </style>

  <!-- Navigation -->
  <nav class="absolute top-0 left-0 w-full z-50 flex items-center justify-between px-6 lg:px-12 py-8">
    <div class="flex items-center gap-3 group cursor-pointer animate-hero">
      <div
        class="w-10 h-10 flex items-center justify-center rounded-xl bg-white/5 border border-white/10 group-hover:bg-white/10 transition-colors">
        <iconify-icon icon="solar:star-fall-bold-duotone" class="text-xl text-[#E4E4E7]"></iconify-icon>
      </div>
      <span class="text-lg font-semibold tracking-tight">Borealis<span class="text-[#A1A1AA] font-serif-italic font-normal ml-1">AI</span></span>
    </div>

    <div
      class="hidden md:flex items-center bg-black/40 border border-white/10 rounded-full px-2 py-1.5 backdrop-blur-md animate-hero delay-1">
      <a href="#" class="px-5 py-1.5 text-xs font-medium text-white bg-white/10 rounded-full">Solutions</a>
      <a href="#" class="px-5 py-1.5 text-xs font-medium text-[#A1A1AA] hover:text-white transition-colors">Research</a>
      <a href="#" class="px-5 py-1.5 text-xs font-medium text-[#A1A1AA] hover:text-white transition-colors">Insights</a>
    </div>

    <div class="flex items-center gap-4 animate-hero delay-2">
      <button class="hidden lg:block text-xs font-semibold px-5 py-2.5 bg-white text-black rounded-lg hover:bg-zinc-200 transition-all">
        Book Consultation
      </button>
      <button class="p-2 text-[#E4E4E7] lg:hidden" id="mobile-toggle">
        <iconify-icon icon="solar:hamburger-menu-bold-duotone" class="text-2xl"></iconify-icon>
      </button>
    </div>
  </nav>

  <!-- Hero Content -->
  <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-12 pt-40 pb-24 grid lg:grid-cols-2 gap-16 items-center">

    <!-- Left Column: Text -->
    <div class="flex flex-col">
      <div class="flex items-center gap-4 mb-8 animate-hero">
        <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-[#71717A]">Series A Deployment</span>
        <div class="h-px w-12 bg-gradient-to-r from-zinc-800 to-transparent"></div>
        <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-blue-400">Neural Core v2.4</span>
      </div>

      <h1 class="text-5xl lg:text-7xl leading-[1.05] font-medium tracking-tight mb-8 animate-hero delay-1">
        Intelligence beyond<br>
        <span class="font-serif-italic text-zinc-500">algorithms</span>
      </h1>

      <p
        class="text-lg text-[#A1A1AA] max-w-md leading-relaxed font-light mb-12 border-l border-white/10 pl-6 animate-hero delay-2">
        We bridge the gap between theoretical neural architectures and revenue-generating enterprise reality. Bespoke AI
        infrastructure built for the next decade.
      </p>

      <div class="grid grid-cols-2 gap-4 animate-hero delay-3">
        <div
          class="p-4 rounded-2xl bg-white/5 border border-white/10 group cursor-pointer hover:bg-white/10 transition-all">
          <div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-3">
            <iconify-icon icon="solar:graph-up-bold-duotone" class="text-blue-400 text-xl"></iconify-icon>
          </div>
          <h3 class="text-sm font-medium mb-1">Predictive Engine</h3>
          <p class="text-[10px] text-[#71717A] uppercase tracking-wider">Analysis v.2.4</p>
        </div>
        <div
          class="p-4 rounded-2xl bg-white/5 border border-white/10 group cursor-pointer hover:bg-white/10 transition-all">
          <div class="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center mb-3">
            <iconify-icon icon="solar:eye-bold-duotone" class="text-purple-400 text-xl"></iconify-icon>
          </div>
          <h3 class="text-sm font-medium mb-1">Vision Labs</h3>
          <p class="text-[10px] text-[#71717A] uppercase tracking-wider">Neural Synthesis</p>
        </div>
      </div>
    </div>

    <!-- Right Column: Visual Component -->
    <div class="relative animate-hero delay-2">
      <div
        class="relative aspect-[4/5] lg:aspect-square rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl group">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a2d788c8-7a85-45a5-b298-a7fb2ce26c66_1600w.webp"
             alt="AI Visual"
             class="w-full h-full object-cover grayscale transition-all duration-1000 group-hover:scale-105 group-hover:grayscale-0">

        <div class="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>

        <!-- UI Overlays -->
        <div
          class="absolute top-6 right-6 bg-black/60 backdrop-blur-xl border border-white/10 p-3 rounded-xl flex items-center gap-3">
          <div class="relative flex items-center justify-center">
            <div class="absolute w-2 h-2 bg-green-500 rounded-full animate-ping"></div>
            <div class="relative w-2 h-2 bg-green-500 rounded-full"></div>
          </div>
          <span class="text-[10px] font-mono uppercase tracking-widest text-zinc-300">Live: Node_771-B</span>
        </div>

        <div class="absolute bottom-0 left-0 right-0 p-8 lg:p-10">
          <div class="flex items-end justify-between gap-4">
            <div>
              <span class="inline-block px-2 py-1 rounded bg-blue-500/20 text-blue-300 border border-blue-500/30 text-[9px] font-bold uppercase tracking-[0.2em] mb-4">Case Study</span>
              <h4 class="text-2xl lg:text-3xl font-medium tracking-tight mb-2">FinTech Risk Engine</h4>
              <p class="text-zinc-400 text-sm max-w-[240px]">Real-time anomaly detection processing $4B daily volume.
              </p>
            </div>
            <button class="w-12 h-12 flex items-center justify-center rounded-full bg-white text-black hover:scale-110 transition-transform">
              <iconify-icon icon="solar:arrow-right-up-bold" class="text-xl"></iconify-icon>
            </button>
          </div>
        </div>
      </div>

      <!-- Decorative Background Glow -->
      <div class="absolute -z-10 -top-20 -right-20 w-96 h-96 bg-blue-500/10 blur-[120px] rounded-full"></div>
      <div class="absolute -z-10 -bottom-20 -left-20 w-96 h-96 bg-purple-500/10 blur-[120px] rounded-full"></div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const toggle = document.getElementById('mobile-toggle');
      if(toggle) {
        toggle.addEventListener('click', () => {
          // Simple mobile menu placeholder logic
          console.log('Mobile menu requested');
        });
      }
    });
  </script>
</div>