Element Selection Card with Library & Drag-Drop Upload

<div class="md:p-8 border-white/10 border rounded-xl pt-6 pr-6 pb-6 pl-6">
    <span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-slate-300 mb-4 font-geist">Step 1</span>
    <h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tighter" style="">Choose Your Elements</h3>
    <p class="text-sm text-slate-400 font-geist">Select from our library of elements or import your own designs to start building animations.</p>

    <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
      <!-- Element Library -->
      <div class="relative rounded-lg border border-white/10 bg-black/30 p-4">
        <div class="space-y-3">
          <div class="flex items-center gap-3 p-2 rounded-md bg-white/5 border border-white/10">
            <div class="w-6 h-6 bg-blue-500 rounded-lg"></div>
            <span class="text-xs text-slate-300 font-geist">Button</span>
          </div>
          <div class="flex items-center gap-3 p-2 rounded-md bg-white/5 border border-white/10">
            <div class="w-6 h-6 bg-cyan-500 rounded-full"></div>
            <span class="text-xs text-slate-300 font-geist">Icon</span>
          </div>
          <div class="flex items-center gap-3 p-2 rounded-md bg-white/5 border border-white/10">
            <div class="w-6 h-6 bg-emerald-500 rounded"></div>
            <span class="text-xs text-slate-300 font-geist">Card</span>
          </div>
        </div>
        <p class="mt-3 text-[11px] text-slate-500 font-geist">Element Library</p>
      </div>

      <!-- Drag & Drop -->
      <div class="rounded-lg border border-white/10 bg-black/30 p-4 space-y-3">
        <div class="border-2 border-dashed border-white/20 rounded-lg p-4 text-center">
          <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="upload" class="lucide lucide-upload h-6 w-6 text-slate-400 mx-auto mb-2"><path d="M12 3v12" class=""></path><path d="m17 8-5-5-5 5" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path></svg>
          <span class="text-xs text-slate-400 font-geist">Drop files here</span>
        </div>
        <p class="text-[11px] text-slate-500 font-geist">Or upload your own</p>
      </div>
    </div>
  </div>