Animated Hero Section with Terminal Demo

<section
  class="z-10 sm:px-6 lg:px-8 sm:mt-12 md:mt-16 lg:mt-20 xl:mt-24 text-center max-w-7xl mt-12 mr-auto ml-auto pr-4 pl-4 relative space-y-8">
  <style class="">
    @keyframes fadeInSlide {
      0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(8px);
      }

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

    .animate-hero-element {
      opacity: 0;
      animation-fill-mode: forwards;
    }

    .animate-badge {
      animation: fadeInSlide 0.6s ease-out 0.2s forwards;
    }

    .animate-title-1 {
      animation: fadeInSlide 0.8s ease-out 0.4s forwards;
    }

    .animate-title-2 {
      animation: fadeInSlide 0.8s ease-out 0.6s forwards;
    }

    .animate-description {
      animation: fadeInSlide 0.8s ease-out 0.8s forwards;
    }

    .animate-install {
      animation: fadeInSlide 0.8s ease-out 1.0s forwards;
    }

    .animate-cta-1 {
      animation: fadeInSlide 0.7s ease-out 1.2s forwards;
    }

    .animate-cta-2 {
      animation: fadeInSlide 0.7s ease-out 1.4s forwards;
    }
  </style>

  <div
    class="inline-flex animate-hero-element animate-badge [animation:fadeSlideIn_1s_ease-out_0.2s_both] mb-6 gap-x-2 gap-y-2 items-center">
    <span class="inline-flex items-center gap-2 text-xs text-white/90 font-geist bg-white/5 ring-white/10 ring-1 rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
              <span class="relative flex h-2 w-2">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
    <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
    </span>
    v2.0 Released
    </span>
  </div>

  <h1
    class="sm:text-6xl md:text-7xl lg:text-8xl text-5xl font-medium text-white tracking-tighter font-geist leading-[1.05]">
    <span class="animate-hero-element animate-title-1 block [animation:fadeSlideIn_1s_ease-out_0.3s_both] font-light font-geist">Build CLI tools</span>
    <span class="animate-hero-element animate-title-2 block bg-clip-text xl:bg-neutral-50 [animation:fadeSlideIn_1s_ease-out_0.4s_both] font-light text-transparent font-geist">at lightning speed</span>
  </h1>

  <p
    class="sm:text-lg md:text-xl sm:max-w-2xl md:max-w-3xl sm:mt-6 md:mt-8 animate-hero-element animate-description [animation:fadeSlideIn_1s_ease-out_0.5s_both] text-base text-neutral-300 font-geist max-w-xl mt-6 mr-auto ml-auto">
    A modern, type-safe CLI framework with zero config. Beautiful prompts, async commands, and built-in validation out
    of the box. </p>

  <!-- Install command -->


  <!-- CTAs -->
  <div class="sm:mt-10 animate-hero-element animate-install [animation:fadeSlideIn_1s_ease-out_0.6s_both] mt-10">
    <div
      class="inline-flex items-center gap-3 bg-neutral-900/80 backdrop-blur ring-1 ring-white/10 rounded-xl px-5 py-4 text-left">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" class="text-emerald-400 flex-shrink-0">
        <polyline points="4 17 10 11 4 5" class=""></polyline>
        <line x1="12" y1="19" x2="20" y2="19" class=""></line>
      </svg>
      <code class="text-sm sm:text-base font-geist-mono text-white">npm install vibecli</code>
      <button class="ml-2 p-1.5 hover:bg-white/10 rounded transition" aria-label="Copy to clipboard">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-neutral-400">
                  <rect width="14" height="14" x="8" y="8" rx="2" ry="2" class=""></rect>
                  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" class=""></path>
                </svg>
              </button>
    </div>
  </div>
  <section
    class="z-10 sm:px-6 lg:px-8 sm:mt-12 md:mt-16 lg:mt-20 xl:mt-24 [animation:fadeSlideIn_1s_ease-out_0.8s_both] text-center max-w-7xl mt-12 mr-auto ml-auto pr-4 pl-4 relative space-y-8">


    <div class="relative max-w-5xl mx-auto">
      <!-- Terminal Window -->
      <div class="relative overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10 shadow-2xl">
        <!-- Terminal Header -->
        <div class="flex items-center justify-between px-4 py-3 bg-neutral-900/80 border-b border-white/10">
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
            <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
            <div class="w-3 h-3 rounded-full bg-emerald-500/80"></div>
          </div>
          <div class="flex items-center gap-2 text-xs text-neutral-400 font-geist">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" class="text-emerald-400">
              <polyline points="4 17 10 11 4 5" class=""></polyline>
              <line x1="12" y1="19" x2="20" y2="19" class=""></line>
            </svg>
            <span class="font-geist-mono">bash</span>
          </div>
          <div class="w-16"></div>
        </div>

        <!-- Terminal Body -->
        <div class="p-6 font-geist-mono text-sm bg-neutral-950 min-h-[400px]">
          <!-- Command Input -->
          <div class="flex items-center gap-2 mb-4">
            <span class="text-emerald-400">$</span>
            <span class="text-white">vibecli create my-app</span>
            <span class="inline-block w-2 h-4 bg-emerald-400 ml-1 animate-pulse"></span>
          </div>

          <!-- Output -->
          <div class="space-y-3 text-neutral-300">
            <!-- Welcome Message -->
            <div class="flex items-start gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" class="text-indigo-400 mt-0.5 flex-shrink-0">
                <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
              </svg>
              <div class="">
                <p class="text-white">Welcome to VibeCLI!</p>
                <p class="text-neutral-500 text-xs">Let's set up your new project</p>
              </div>
            </div>

            <!-- Progress Steps -->
            <div class="ml-6 space-y-2 mt-4">
              <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" class="text-emerald-400">
                  <polyline points="20 6 9 17 4 12" class=""></polyline>
                </svg>
                <span class="text-emerald-400">✓</span>
                <span class="text-neutral-400">Project template selected</span>
              </div>

              <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" class="text-emerald-400">
                  <polyline points="20 6 9 17 4 12" class=""></polyline>
                </svg>
                <span class="text-emerald-400">✓</span>
                <span class="text-neutral-400">Dependencies installed</span>
              </div>

              <div class="flex items-center gap-2">
                <div class="relative flex h-4 w-4">
                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                  <span class="relative inline-flex rounded-full h-4 w-4 bg-blue-500"></span>
                </div>
                <span class="text-blue-400">⟳</span>
                <span class="text-blue-400">Configuring TypeScript...</span>
              </div>
            </div>

            <!-- Interactive Prompt -->
            <div class="mt-6 p-4 rounded-lg bg-white/5 border border-white/10">
              <p class="text-white mb-3">? What features would you like?</p>
              <div class="space-y-2 ml-2">
                <div class="flex items-center gap-2">
                  <span class="text-emerald-400">◉</span>
                  <span class="text-white">TypeScript Support</span>
                </div>
                <div class="flex items-center gap-2">
                  <span class="text-emerald-400">◉</span>
                  <span class="text-white">Auto Validation</span>
                </div>
                <div class="flex items-center gap-2">
                  <span class="text-neutral-500">◯</span>
                  <span class="text-neutral-400">Git Integration</span>
                </div>
                <div class="flex items-center gap-2">
                  <span class="text-emerald-400">◉</span>
                  <span class="text-white">Beautiful Prompts</span>
                </div>
              </div>
              <p class="text-xs text-neutral-500 mt-3">Press space to select, enter to continue</p>
            </div>

            <!-- Success Message -->
            <div class="mt-4 p-4 rounded-lg bg-emerald-500/10 border border-emerald-500/30">
              <div class="flex items-start gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" class="text-emerald-400 mt-0.5 flex-shrink-0">
                  <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
                </svg>
                <div>
                  <p class="text-emerald-400 font-semibold">✨ Project created successfully!</p>
                  <div class="mt-2 text-xs text-neutral-400 space-y-1">
                    <p>cd my-app</p>
                    <p>npm run dev</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Floating Feature Cards -->
      <div class="absolute -right-6 top-20 hidden lg:block">
        <div class="w-48 p-4 rounded-xl bg-neutral-900 border border-white/10 shadow-xl backdrop-blur">
          <div class="flex items-center gap-2 mb-2">
            <div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" class="text-indigo-400">
                <polyline points="16 18 22 12 16 6" class=""></polyline>
                <polyline points="8 6 2 12 8 18" class=""></polyline>
              </svg>
            </div>
            <span class="text-xs text-white font-semibold font-geist">Type Safe</span>
          </div>
          <p class="text-xs text-neutral-400 font-geist">Full TypeScript</p>
        </div>
      </div>

      <div class="absolute -left-6 bottom-20 hidden lg:block">
        <div class="w-48 p-4 rounded-xl bg-neutral-900 border border-white/10 shadow-xl backdrop-blur">
          <div class="flex items-center gap-2 mb-2">
            <div class="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" class="text-emerald-400">
                <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" class=""></path>
              </svg>
            </div>
            <span class="text-xs text-white font-semibold font-geist">Lightning Fast</span>
          </div>
          <p class="text-xs text-neutral-400 font-geist">Instant startup</p>
        </div>
      </div>
    </div>

    <!-- Feature Highlights Below -->

  </section>
</section>