Hero Section with Animated CTA & Footer (Tailwind)

<section class="sm:px-6 lg:px-8 md:py-20 w-full max-w-7xl mr-auto ml-auto pt-14 pr-4 pb-14 pl-4">
    <div class="relative scroll-fade pt-20 visible">
      <div class="flex items-center justify-center">
        <span class="inline-flex items-center gap-2 text-[11px] uppercase tracking-wide border rounded-full px-3 py-1 text-slate-300/80 bg-white/5 border-white/10" style="">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket h-3.5 w-3.5 text-cyan-300"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class=""></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" class=""></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path></svg>
          Start Your Transformation
        </span>
      </div>

      <div class="scroll-fade scroll-fade-delay text-center max-w-3xl mt-6 mr-auto ml-auto visible">
        <h2 class="md:text-6xl text-4xl font-semibold text-slate-50 tracking-tight" style="">Ready to Transform</h2>
        <h2 class="text-4xl md:text-6xl font-semibold tracking-tight text-slate-50 mt-1" style="">
          Your <span class="bg-clip-text italic font-['Playfair_Display'] bg-gradient-to-r from-slate-200 via-cyan-300 to-indigo-300" style="">Business Operations?</span>
        </h2>
        <p class="mt-4 text-base md:text-lg text-slate-400" style="">
          Book a personalized consultation and discover how AI can revolutionize your workflows
        </p>

        <!-- CTA Button -->
        <div class="relative inline-block group scroll-fade scroll-fade-delay-2 mt-6 visible">
          <button class="animate-[slideInBlur_0.8s_ease-out_1.2s_forwards] relative z-10 overflow-hidden transition-[transform] duration-150 ease-out active:scale-[0.98] text-white bg-neutral-900/60 border-white/20 border rounded-xl pt-3 pr-6 pb-3 pl-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]" style="--x: 179.8125px; --y: 49px; --o: 0;" onmousemove="btnMove(event)" onmouseenter="this.style.setProperty('--o','1')" onmouseleave="this.style.setProperty('--o','0')">
              <span class="relative z-10 inline-flex items-center gap-2 font-semibold" style="">Book A Free Call<svg class="h-5 w-5 transition-transform duration-200 ease-out group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M13 5l7 7-7 7" class=""></path>
                </svg></span>
              <span class="pointer-events-none absolute bottom-0 left-1/2 right-1/2 h-px bg-gradient-to-r from-transparent via-white to-transparent opacity-80 transition-[left,right] duration-500 ease-out group-hover:left-0 group-hover:right-0"></span>
              <span class="glow pointer-events-none absolute inset-0 -z-10" aria-hidden="true" style="transform: scale(0.95) translate(0px, -24px);"></span>
            </button>
          <span aria-hidden="true" class="pointer-events-none absolute -bottom-3 left-1/2 -translate-x-1/2 h-6 w-52 rounded-full opacity-70 group-hover:opacity-100 transition-opacity" style="background: radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,.45), rgba(255,255,255,.22) 35%, transparent 70%); filter: blur(10px) saturate(120%);"></span>
        </div>

        <!-- Contact info -->
        <div class="mt-8 flex items-center justify-center gap-6 text-slate-400 scroll-fade scroll-fade-delay-3 visible">
          <a href="mailto:hello@neuralflow.ai" class="group hover:text-slate-200 transition flex items-center gap-2" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail h-4 w-4"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
            hello@neuralflow.ai
          </a>
          <span class="h-4 w-px bg-white/10"></span>
          <a href="tel:+1234567890" class="group hover:text-slate-200 transition flex items-center gap-2" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="phone" class="lucide lucide-phone h-4 w-4"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
            (555) 123-4567
          </a>
        </div>

        <!-- Separator -->
        <div class="relative mt-14">
          <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 -top-6">
            <span class="block mx-auto w-80 h-10 rounded-full bg-white/20 blur-2xl opacity-70"></span>
          </div>
          <div class="h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="pt-10 scroll-fade visible">
      <div class="flex gap-4 flex-wrap items-center justify-between">
        <!-- Brand -->
        <a href="#" class="inline-flex items-center gap-2">
          <span class="text-sm font-bold text-neutral-200 tracking-tight" style="">NeuralFlow</span>
        </a>

        <!-- Socials -->
        <div class="flex items-center gap-4 text-slate-400">
          <a href="#" class="hover:text-slate-200 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="linkedin" class="lucide lucide-linkedin h-5 w-5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" class=""></path><rect width="4" height="12" x="2" y="9" class=""></rect><circle cx="4" cy="4" r="2" class=""></circle></svg>
          </a>
          <a href="#" class="hover:text-slate-200 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter h-5 w-5"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" class=""></path></svg>
          </a>
          <a href="#" class="hover:text-slate-200 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="github" class="lucide lucide-github h-5 w-5"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" class=""></path><path d="M9 18c-4.51 2-5-2-7-2" class=""></path></svg>
          </a>
        </div>
      </div>

      <!-- Links -->
      <nav class="flex flex-wrap gap-6 text-sm text-slate-400 mt-6">
        <a href="#process" class="hover:text-slate-200 transition" style="">Process</a>
        <a href="#clients" class="hover:text-slate-200 transition" style="">Clients</a>
        <a href="#pricing" class="hover:text-slate-200 transition" style="">Pricing</a>
        <a href="#faq" class="hover:text-slate-200 transition" style="">FAQ</a>
        <a href="#contact" class="hover:text-slate-200 transition" style="">Contact</a>
        <a href="#" class="hover:text-slate-200 transition" style="">Privacy</a>
        <a href="#" class="hover:text-slate-200 transition" style="">Terms</a>
      </nav>

      <!-- Bottom meta -->
      <div class="mt-8 flex items-center justify-between text-xs text-slate-500 flex-wrap gap-4">
        <span style="">© 2025 NeuralFlow. All rights reserved.</span>
        <span style="">Powered by Advanced AI Technology</span>
      </div>
    </footer>
  </section>