Feature Grid with Stats Card

<div class="bg-zinc-950 border-white/5 border-t pt-32 pb-32 relative">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');@keyframes shimmer{0%{transform:scaleX(0);}100%{transform:scaleX(1);}}</style>
  <div class="max-w-7xl border-slate-50/10 border mr-auto ml-auto pt-6
    pr-6 pb-6 pl-6 bg-zinc-950
    font-['Inter','Helvetica_Neue',sans-serif]">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 w-full gap-x-16 gap-y-16 items-center">
      <div class="grid grid-cols-2 w-full gap-x-4 gap-y-4">
        <div class="bg-zinc-900 border border-white/10 rounded-none p-10 flex
          flex-col justify-between min-h-[280px] relative
          overflow-hidden group hover:border-cyan-500/50
          transition-all duration-300">
          <div class="absolute top-0 right-0 w-4 h-4 border-t border-r border-cyan-500/50"></div>
          <div class="absolute top-0 right-0 w-40 h-40 bg-cyan-500/5 blur-[80px]
            pointer-events-none group-hover:bg-cyan-500/10
            transition-colors"></div>
          <div class="flex items-center gap-4 z-10">
            <span class="text-7xl text-white tracking-tighter font-['Manrope',sans-serif] font-medium">10x</span>
            <div class="flex flex-col justify-center h-full pt-2">
              <span class="text-[10px] uppercase tracking-widest text-cyan-500 font-bold mb-1">Velocity</span>
              <div class="h-0.5 w-12 bg-zinc-800 overflow-hidden">
                <div class="h-full w-full bg-cyan-500 origin-left animate-[shimmer_2s_infinite]"></div>
              </div>
            </div>
          </div>
          <p class="text-zinc-500 text-sm leading-relaxed max-w-[180px] font-medium relative z-10 mt-4">Accelerate development. Go from raw idea to deployed frontend in seconds.</p>
        </div>
        <div class="flex flex-col gap-4">
          <div class="bg-zinc-900 border border-white/10 rounded-none p-8 flex-1
            flex flex-col justify-center gap-3 hover:bg-zinc-800
            hover:border-white/30 transition-all duration-300 group
            relative overflow-hidden">
            <div class="absolute inset-0
              bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)]
              bg-[size:24px_24px]"></div>
            <div class="absolute top-0 left-0 w-3 h-3 border-t border-l
              border-white/20 group-hover:border-cyan-500/50
              transition-colors"></div>
            <div class="relative z-10 flex items-center justify-between">
              <div class="w-12 h-12 bg-zinc-800 border border-white/10 flex
                items-center justify-center text-zinc-400
                group-hover:text-cyan-300 group-hover:border-cyan-500/30
                transition-all rounded-none">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M2 12c0 1.64.425 2.191 1.275 3.296C4.972 17.5 7.818 20 12 20s7.028-2.5 8.725-4.704C21.575 14.192 22 13.639 22 12c0-1.64-.425-2.191-1.275-3.296C19.028 6.5 16.182 4 12 4S4.972 6.5 3.275 8.704C2.425 9.81 2 10.361 2 12" opacity=".5"></path>
                  <path fill="currentColor" fill-rule="evenodd" d="M8.25 12a3.75 3.75 0 1 1 7.5 0a3.75 3.75 0 0 1-7.5 0m1.5 0a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0" clip-rule="evenodd"></path>
                </svg>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-zinc-600 group-hover:text-white transition-colors">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path>
              </svg>
            </div>
            <span class="relative z-10 text-zinc-300 text-sm font-medium group-hover:text-white mt-2">Real-time Visuals</span>
          </div>
          <div class="bg-zinc-900 border border-white/10 rounded-none p-8 flex-1
            flex flex-col justify-center gap-3 hover:bg-zinc-800
            hover:border-white/30 transition-all duration-300 group
            relative overflow-hidden">
            <div class="absolute inset-0
              bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)]
              bg-[size:24px_24px]"></div>
            <div class="absolute bottom-0 right-0 w-3 h-3 border-b border-r
              border-white/20 group-hover:border-cyan-500/50
              transition-colors"></div>
            <div class="relative z-10 flex items-center justify-between">
              <div class="w-12 h-12 bg-zinc-800 border border-white/10 flex
                items-center justify-center text-zinc-400
                group-hover:text-cyan-300 group-hover:border-cyan-500/30
                transition-all rounded-none">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12" opacity=".5"></path>
                  <path fill="currentColor" d="M13.488 6.446a.75.75 0 0 1 .53.918l-2.588 9.66a.75.75 0 0 1-1.449-.389l2.589-9.659a.75.75 0 0 1 .918-.53M14.97 8.47a.75.75 0 0 1 1.06 0l.209.208c.635.635 1.165 1.165 1.529 1.642c.384.504.654 1.036.654 1.68s-.27 1.176-.654 1.68c-.364.477-.894 1.007-1.53 1.642l-.208.208a.75.75 0 1 1-1.06-1.06l.171-.172c.682-.682 1.139-1.14 1.434-1.528c.283-.37.347-.586.347-.77s-.064-.4-.347-.77c-.295-.387-.752-.846-1.434-1.528l-.171-.172a.75.75 0 0 1 0-1.06"></path>
                </svg>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-zinc-600 group-hover:text-white transition-colors">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path>
              </svg>
            </div>
            <span class="relative z-10 text-zinc-300 text-sm font-medium group-hover:text-white mt-2">Clean Code Export</span>
          </div>
        </div>
        <div class="col-span-2 bg-zinc-900 rounded-none relative overflow-hidden
          min-h-[300px] flex items-end group border border-white/10
          hover:border-cyan-500/30 transition-all duration-500">
          <div class="absolute inset-0
            bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)]
            bg-[size:24px_24px]"></div>
          <div class="bg-gradient-to-t from-zinc-900 via-zinc-900/50 to-transparent absolute top-0 right-0 bottom-0 left-0"></div>
          <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[85%]">
            <div class="bg-zinc-800/95 backdrop-blur-xl border border-white/10 p-1
              shadow-2xl shadow-black/50 transform
              group-hover:-translate-y-2 transition-transform duration-500
              rounded-none">
              <div class="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-zinc-900/30">
                <div class="flex gap-1.5">
                  <div class="w-2 h-2 bg-zinc-600"></div>
                  <div class="w-2 h-2 bg-zinc-600"></div>
                </div>
                <div class="text-[9px] font-mono text-zinc-500 tracking-wider">GENERATING...</div>
              </div>
              <div class="p-6 space-y-5">
                <div class="flex gap-5">
                  <div class="w-16 h-16 bg-gradient-to-br from-cyan-900/20 to-blue-900/20
                    border border-cyan-500/20 animate-pulse flex items-center
                    justify-center rounded-none">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="text-cyan-500/50">
                      <path fill="currentColor" d="m5.67 9.914l3.062-4.143c1.979-2.678 2.969-4.017 3.892-3.734s.923 1.925.923 5.21v.31c0 1.185 0 1.777.379 2.148l.02.02c.387.363 1.003.363 2.236.363c2.22 0 3.329 0 3.704.673l.018.034c.354.683-.289 1.553-1.574 3.29l-3.062 4.144c-1.98 2.678-2.969 4.017-3.892 3.734s-.923-1.925-.923-5.21v-.31c0-1.185 0-1.777-.379-2.148l-.02-.02c-.387-.363-1.003-.363-2.236-.363c-2.22 0-3.329 0-3.703-.673l-.019-.034c-.354-.683.289-1.552 1.574-3.29"></path>
                    </svg>
                  </div>
                  <div class="flex-1 space-y-3 py-1">
                    <div class="h-2 bg-zinc-700/80 w-3/4"></div>
                    <div class="h-2 bg-zinc-700/80 w-1/2"></div>
                    <div class="h-2 bg-zinc-700/80 w-5/6"></div>
                  </div>
                </div>
                <div class="flex items-center justify-between pt-3 border-t border-white/5">
                  <div class="flex items-center gap-2">
                    <div class="w-1.5 h-1.5 bg-cyan-500 animate-pulse"></div>
                    <span class="text-[10px] text-cyan-200 font-mono uppercase tracking-wide">Processing Prompt</span>
                  </div>
                  <span class="text-[10px] text-zinc-600 font-mono">0.8s</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col lg:pl-4 pl-0 justify-center">
        <div class="flex items-center gap-2 text-cyan-400 text-sm font-medium mb-8">
          <div class="w-1 h-1 bg-cyan-400"></div>
          <span class="font-bold uppercase tracking-widest text-xs text-zinc-500">Capabilities</span>
        </div>
        <h2 class="md:text-5xl leading-[1.15] text-4xl font-medium text-white
          tracking-tight font-['Manrope',sans-serif] mb-12">
          <span class="text-zinc-500">full-featured websites.</span>
        </h2>
        <div class="border-white/10 border-l pl-8 relative space-y-0">
          <div class="absolute left-[-1px] top-0 h-[88px] w-[1px] bg-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.5)]"></div>
          <div class="group pb-10">
            <h3 class="text-lg text-white font-medium mb-3">Natural Language Prompts</h3>
            <p class="text-zinc-400 text-sm leading-relaxed font-medium max-w-md">Describe your vision: "A dark mode SaaS landing page with a pricing grid," and watch Kreona build it pixel-perfectly.</p>
          </div>
          <div class="group pb-10">
            <h3 class="text-lg text-zinc-500 group-hover:text-white transition-colors font-medium mb-3 cursor-pointer">Production-Ready Code</h3>
            <p class="text-zinc-600 group-hover:text-zinc-400 text-sm
              leading-relaxed font-medium max-w-md transition-colors">Clean, semantic HTML and Tailwind CSS. No lock-in, just code you can ship.</p>
          </div>
          <div class="group">
            <h3 class="text-lg text-zinc-500 group-hover:text-white transition-colors font-medium mb-3 cursor-pointer">Responsive by Default</h3>
            <p class="text-zinc-600 group-hover:text-zinc-400 text-sm
              leading-relaxed font-medium max-w-md transition-colors">Every generated layout is mobile-optimized and adapts to any screen size automatically.</p>
          </div>
        </div>
        <div class="mt-14">
          <button class="bg-white text-black px-8 py-4 rounded-none text-sm
            hover:bg-cyan-50 transition-all
            shadow-[0_0_20px_-(34,211,238,0.4)]
            hover:shadow-[0_0_30px_-5px_rgba(34,211,238,0.6)]
            active:translate-y-0.5 font-bold tracking-wide">Start Building for Free</button>
        </div>
      </div>
    </div>
  </div>
</div>