Responsive Feature & Stats Section with Icons

<section class="z-10 sm:px-6 lg:px-8 max-w-7xl mt-20 mr-auto mb-20 ml-auto pt-20 pr-4 pb-20 pl-4 relative">
    <div class="text-center mb-12">
  <p class="uppercase [animation:fadeSlideIn_1s_ease-out_0.1s_both] animate-on-scroll text-xs text-neutral-400 tracking-[0.18em] font-geist mb-4">Developer-First</p>
  <h2 class="sm:text-5xl md:text-6xl [animation:fadeSlideIn_1s_ease-out_0.2s_both] animate-on-scroll text-4xl font-light text-white tracking-tight font-geist mb-4">Developer experience first</h2>
  <p class="sm:text-lg [animation:fadeSlideIn_1s_ease-out_0.3s_both] animate-on-scroll text-base text-neutral-300 font-geist max-w-2xl mr-auto ml-auto">Built by developers, for developers. VibeCLI removes the complexity of building command-line tools so you can focus on creating great user experiences.</p>
</div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 [animation:fadeSlideIn_1s_ease-out_0.4s_both] animate-on-scroll mb-10 gap-x-6 gap-y-6">
      <div class="relative overflow-hidden ring-white/10 ring-1 rounded-xl bg-neutral-900/60 p-6">
        <div class="mb-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-indigo-500/20 to-purple-600/20 flex items-center justify-center ring-1 ring-indigo-500/30">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-indigo-400">
              <path d="M12 20h9" class=""></path><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" class=""></path>
            </svg>
          </div>
        </div>
        <p class="text-white text-base font-medium mb-2 font-geist">Type Safety</p>
        <p class="text-white/70 text-sm font-geist">End-to-end TypeScript with full IntelliSense support</p>
      </div>
      
      <div class="relative overflow-hidden ring-white/10 ring-1 rounded-xl bg-neutral-900/60 p-6">
        <div class="mb-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-emerald-500/20 to-teal-600/20 flex items-center justify-center ring-1 ring-emerald-500/30">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-400">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" class=""></path><polyline points="22 4 12 14.01 9 11.01" class=""></polyline>
            </svg>
          </div>
        </div>
        <p class="text-white text-base font-medium mb-2 font-geist">Auto Validation</p>
        <p class="text-white/70 text-sm font-geist">Powered by Zod for runtime safety</p>
      </div>
      
      <div class="relative overflow-hidden ring-white/10 ring-1 rounded-xl bg-neutral-900/60 p-6">
        <div class="mb-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-pink-500/20 to-rose-600/20 flex items-center justify-center ring-1 ring-pink-500/30">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-pink-400">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line>
            </svg>
          </div>
        </div>
        <p class="text-white text-base font-medium mb-2 font-geist">Zero Config</p>
        <p class="text-white/70 text-sm font-geist">Works out of the box, customize when needed</p>
      </div>
      
      <div class="relative overflow-hidden ring-white/10 ring-1 rounded-xl bg-neutral-900/60 p-6">
        <div class="mb-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-amber-500/20 to-orange-600/20 flex items-center justify-center ring-1 ring-amber-500/30">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-amber-400">
              <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" class=""></path>
            </svg>
          </div>
        </div>
        <p class="text-white text-base font-medium mb-2 font-geist">Blazing Fast</p>
        <p class="text-white/70 text-sm font-geist">Minimal bundle, instant startup</p>
      </div>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-2 sm:grid-cols-4 [animation:fadeSlideIn_1s_ease-out_0.5s_both] animate-on-scroll mt-14 gap-x-8 gap-y-8">
      <div class="space-y-1">
        <p class="text-4xl sm:text-5xl text-white tracking-tight font-geist font-light" style="">50k+</p>
        <p class="text-sm text-neutral-200 font-geist">Weekly downloads</p>
        <p class="text-xs text-neutral-400 font-geist">Growing fast on npm</p>
      </div>
      <div class="space-y-1">
        <p class="text-4xl sm:text-5xl text-white tracking-tight font-geist font-light" style="">3.2k</p>
        <p class="text-sm text-neutral-200 font-geist">GitHub stars</p>
        <p class="text-xs text-neutral-400 font-geist">Active community</p>
      </div>
      <div class="space-y-1">
        <p class="text-4xl sm:text-5xl text-white tracking-tight font-geist font-light" style="">100%</p>
        <p class="text-sm text-neutral-200 font-geist">Type coverage</p>
        <p class="text-xs text-neutral-400 font-geist">Full TypeScript support</p>
      </div>
      <div class="space-y-1">
        <p class="text-4xl sm:text-5xl text-white tracking-tight font-geist font-light" style="">&lt;5ms</p>
        <p class="text-sm text-neutral-200 font-geist">Startup time</p>
        <p class="text-xs text-neutral-400 font-geist">Lightning fast execution</p>
      </div>
    </div>
  </section>