Three-Column Feature Grid for Creator Tools

<section class="border-white/[0.06] border-t pt-24 pb-24 relative">
  <div class="max-w-7xl mx-auto px-6">
    <!-- Header -->
    <div class="max-w-2xl mx-auto text-center mb-16">
      <h2 class="text-3xl md:text-5xl font-medium tracking-tight text-white mb-6">
        Power tools for <span class="text-orange-500">creators</span>
      </h2>
      <p class="text-lg text-white/60 font-light leading-relaxed">
        Everything you need to build top-tier websites. From visual design to global deployment, we've got you covered.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      
      <!-- Card 1: Editor -->
      <div class="group relative rounded-2xl bg-[#0E0F11] border border-white/[0.08] overflow-hidden hover:border-white/20 transition-colors duration-500">
        <!-- Glow -->
        <div class="absolute -top-24 -right-24 w-48 h-48 bg-orange-500/10 blur-[80px] rounded-full group-hover:bg-orange-500/20 transition-all duration-500"></div>
        
        <div class="p-8 relative z-10">
          <div class="w-10 h-10 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center justify-center mb-6 text-orange-500">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><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>
          <h3 class="text-xl font-medium text-white mb-3">Visual Editor</h3>
          <p class="text-sm text-white/50 leading-relaxed mb-8">
            Edit content inline, adjust styles, and see changes instantly. No context switching required.
          </p>
          
          <!-- Visual -->
          <div class="relative h-48 rounded-xl bg-white/[0.03] border border-white/[0.06] overflow-hidden group-hover:border-white/10 transition-colors">
            <!-- Mock UI -->
            <div class="absolute inset-4 bg-[#0B0C0E] rounded border border-white/[0.08] shadow-2xl">
              <div class="h-8 border-b border-white/[0.08] flex items-center px-3 gap-2">
                <div class="w-2 h-2 rounded-full bg-white/20"></div>
                <div class="w-2 h-2 rounded-full bg-white/20"></div>
              </div>
              <div class="p-4">
                <div class="h-2 w-2/3 bg-white/10 rounded mb-3"></div>
                <div class="h-2 w-1/2 bg-white/10 rounded mb-6"></div>
                <div class="relative h-20 w-full rounded border border-orange-500/50 bg-orange-500/5 flex items-center justify-center">
                   <div class="absolute -top-1.5 -left-1.5 w-3 h-3 bg-orange-500 border-2 border-[#0B0C0E] rounded-full"></div>
                   <div class="absolute -bottom-1.5 -right-1.5 w-3 h-3 bg-orange-500 border-2 border-[#0B0C0E] rounded-full"></div>
                   <span class="text-[10px] text-orange-400 font-mono">Section</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2: Animation -->
      <div class="group relative rounded-2xl bg-[#0E0F11] border border-white/[0.08] overflow-hidden hover:border-white/20 transition-colors duration-500">
        <!-- Glow -->
        <div class="absolute -top-24 -right-24 w-48 h-48 bg-purple-500/10 blur-[80px] rounded-full group-hover:bg-purple-500/20 transition-all duration-500"></div>

        <div class="p-8 relative z-10">
          <div class="w-10 h-10 rounded-lg bg-purple-500/10 border border-purple-500/20 flex items-center justify-center mb-6 text-purple-400">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
          </div>
          <h3 class="text-xl font-medium text-white mb-3">Interactions</h3>
          <p class="text-sm text-white/50 leading-relaxed mb-8">
            Create complex scroll animations and micro-interactions without writing a single line of code.
          </p>
          
          <!-- Visual -->
          <div class="relative h-48 rounded-xl bg-white/[0.03] border border-white/[0.06] overflow-hidden group-hover:border-white/10 transition-colors flex items-center justify-center">
             <div class="relative flex gap-4">
                <div class="w-12 h-12 rounded-lg bg-purple-500/20 border border-purple-500/40 animate-bounce" style="animation-duration: 2s;"></div>
                <div class="w-12 h-12 rounded-lg bg-purple-500/20 border border-purple-500/40 animate-bounce" style="animation-duration: 2s; animation-delay: 0.1s;"></div>
                <div class="w-12 h-12 rounded-lg bg-purple-500/20 border border-purple-500/40 animate-bounce" style="animation-duration: 2s; animation-delay: 0.2s;"></div>
             </div>
             <!-- Controls -->
             <div class="absolute bottom-4 left-4 right-4 flex justify-between px-3 py-2 bg-[#0E0F11]/80 backdrop-blur rounded border border-white/[0.08]">
                <div class="flex gap-2 items-center">
                    <div class="w-2 h-2 rounded-full bg-purple-400"></div>
                    <span class="text-[10px] text-white/60 font-mono">Spring</span>
                </div>
                <span class="text-[10px] text-white/40 font-mono">120ms</span>
             </div>
          </div>
        </div>
      </div>

      <!-- Card 3: Performance -->
      <div class="group relative rounded-2xl bg-[#0E0F11] border border-white/[0.08] overflow-hidden hover:border-white/20 transition-colors duration-500">
        <!-- Glow -->
        <div class="absolute -top-24 -right-24 w-48 h-48 bg-emerald-500/10 blur-[80px] rounded-full group-hover:bg-emerald-500/20 transition-all duration-500"></div>

        <div class="p-8 relative z-10">
          <div class="w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-6 text-emerald-400">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" class=""></path></svg>
          </div>
          <h3 class="text-xl font-medium text-white mb-3">Performance</h3>
          <p class="text-sm text-white/50 leading-relaxed mb-8">
            Optimized automatically and deployed to a global edge network. 100/100 Lighthouse scores.
          </p>
          
          <!-- Visual -->
          <div class="relative h-48 rounded-xl bg-white/[0.03] border border-white/[0.06] overflow-hidden group-hover:border-white/10 transition-colors flex items-center justify-center">
             <div class="relative w-32 h-32">
                <svg class="w-full h-full -rotate-90" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="8" class=""></circle>
                    <circle cx="50" cy="50" r="40" fill="none" stroke="#10B981" stroke-width="8" stroke-dasharray="251.2" stroke-dashoffset="0" class="drop-shadow-[0_0_10px_rgba(16,185,129,0.4)] animate-[dash_1.5s_ease-out_forwards]"></circle>
                </svg>
                <div class="absolute inset-0 flex flex-col items-center justify-center">
                    <span class="text-2xl font-bold text-white tracking-tight">100</span>
                    <span class="text-[10px] text-emerald-400 uppercase tracking-wider font-medium">Score</span>
                </div>
             </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
  <style>
    @keyframes dash {
      from { stroke-dashoffset: 251.2; }
      to { stroke-dashoffset: 0; }
    }
  </style>
</section>