Four-Step Workflow "How It Works" Section

<div class="max-w-7xl md:px-6 mr-auto ml-auto pr-4 pl-4">
            <div class="text-center mb-16">
                <p class="mb-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-slate-300 font-geist">
                    <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="workflow" class="lucide lucide-workflow h-4 w-4 text-blue-400"><rect width="8" height="8" x="3" y="3" rx="2" class=""></rect><path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path><rect width="8" height="8" x="13" y="13" rx="2" class=""></rect></svg>
                    Simple 4-step process
                </p>
                <h2 class="text-3xl sm:text-4xl lg:text-5xl text-white mb-4 font-geist font-light tracking-tighter" style="">
                    How it works
                </h2>
                <p class="text-lg text-slate-300 max-w-2xl mx-auto font-geist">
                    Create stunning animations in minutes with our intuitive visual builder. No coding experience required.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
  <!-- Step 1 -->
  <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>

  <!-- Step 2 -->
  <div class="p-6 md:p-8 rounded-xl border border-white/10 bg-white/[0.03]">
    <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 2</span>
    <h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tighter" style="">Design Your Timeline</h3>
    <p class="text-sm text-slate-400 font-geist">Use our visual timeline editor to create smooth animations with precise timing controls.</p>

    <!-- Timeline Editor -->
    <div class="mt-6 rounded-lg border border-white/10 bg-black/30 p-4">
      <div class="space-y-3">
        <!-- Timeline Track 1 -->
        <div class="flex items-center gap-3">
          <div class="w-4 h-4 bg-blue-500 rounded-sm"></div>
          <div class="flex-1 h-2 bg-white/5 rounded-full relative">
            <div class="absolute left-0 top-0 w-2/3 h-2 bg-blue-500/80 rounded-full"></div>
          </div>
          <span class="text-xs text-slate-400 font-geist">1.2s</span>
        </div>
        
        <!-- Timeline Track 2 -->
        <div class="flex items-center gap-3">
          <div class="w-4 h-4 bg-cyan-500 rounded-full"></div>
          <div class="flex-1 h-2 bg-white/5 rounded-full relative">
            <div class="absolute left-1/4 top-0 w-1/2 h-2 bg-cyan-500/80 rounded-full"></div>
          </div>
          <span class="text-xs text-slate-400 font-geist">0.8s</span>
        </div>
        
        <!-- Timeline Track 3 -->
        <div class="flex items-center gap-3">
          <div class="w-4 h-4 bg-emerald-500 rounded"></div>
          <div class="flex-1 h-2 bg-white/5 rounded-full relative">
            <div class="absolute left-1/3 top-0 w-3/5 h-2 bg-emerald-500/80 rounded-full"></div>
          </div>
          <span class="text-xs text-slate-400 font-geist">1.5s</span>
        </div>
      </div>
      
      <!-- Playhead -->
      <div class="mt-3 flex items-center gap-2">
        <button class="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-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="play" class="lucide lucide-play h-3 w-3 text-white"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
        </button>
        <span class="text-xs text-slate-400 font-geist">0:01.2 / 0:02.5</span>
      </div>
    </div>
  </div>

  <!-- Step 3 -->
  <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 3</span>
    <h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tighter" style="">Preview &amp; Refine</h3>
    <p class="text-sm text-slate-400 font-geist">Test your animations across different devices and fine-tune every detail in real-time.</p>

    <!-- Preview Interface -->
    <div class="mt-6 space-y-4">
      <!-- Device Preview -->
      <div class="relative rounded-lg border border-white/10 bg-black/30 p-4">
        <div class="flex items-center justify-between mb-3">
          <span class="text-xs text-slate-300 font-geist">Live Preview</span>
          <div class="flex items-center gap-2">
            <button class="w-6 h-6 rounded border border-white/10 bg-white/5 flex items-center justify-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="monitor" class="lucide lucide-monitor h-3 w-3 text-blue-400"><rect width="20" height="14" x="2" y="3" rx="2" class=""></rect><line x1="8" x2="16" y1="21" y2="21" class=""></line><line x1="12" x2="12" y1="17" y2="21" class=""></line></svg>
            </button>
            <button class="w-6 h-6 rounded border border-white/10 bg-white/5 flex items-center justify-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="tablet" class="lucide lucide-tablet h-3 w-3 text-slate-400"><rect width="16" height="20" x="4" y="2" rx="2" ry="2" class=""></rect><line x1="12" x2="12.01" y1="18" y2="18" class=""></line></svg>
            </button>
            <button class="w-6 h-6 rounded border border-white/10 bg-white/5 flex items-center justify-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="smartphone" class="lucide lucide-smartphone h-3 w-3 text-slate-400"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg>
            </button>
          </div>
        </div>
        
        <!-- Mock Preview Screen -->
        <div class="aspect-video bg-neutral-900/50 rounded border border-white/10 flex items-center justify-center relative overflow-hidden">
          <div class="absolute inset-4 border-2 border-dashed border-white/20 rounded flex items-center justify-center">
            <div class="text-center">
              <div class="w-8 h-8 bg-blue-500 rounded-lg mx-auto mb-2 animate-pulse"></div>
              <div class="w-16 h-1 bg-white/30 rounded mx-auto"></div>
            </div>
          </div>
          
          <!-- Animation Indicator -->
          <div class="absolute top-2 right-2 flex items-center gap-1">
            <div class="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></div>
            <span class="text-[10px] text-slate-400 font-geist">Live</span>
          </div>
        </div>
      </div>

      <!-- Fine-tuning Controls -->
      <div class="grid grid-cols-2 gap-3">
        <div class="rounded-lg border border-white/10 bg-black/30 p-3">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs text-slate-300 font-geist">Easing</span>
            <span class="text-xs text-slate-400 font-geist">Ease Out</span>
          </div>
          <div class="h-1 bg-white/10 rounded-full relative">
            <div class="absolute left-3/4 top-0 w-2 h-1 bg-blue-500 rounded-full"></div>
          </div>
        </div>
        
        <div class="rounded-lg border border-white/10 bg-black/30 p-3">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs text-slate-300 font-geist">Speed</span>
            <span class="text-xs text-slate-400 font-geist">1.2x</span>
          </div>
          <div class="h-1 bg-white/10 rounded-full relative">
            <div class="absolute left-2/3 top-0 w-2 h-1 bg-cyan-500 rounded-full"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Step 4 -->
  <div class="p-6 md:p-8 rounded-xl border border-white/10 bg-white/[0.03]">
    <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 4</span>
    <h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tighter" style="">Export &amp; Deploy</h3>
    <p class="text-sm text-slate-400 font-geist">Export clean, optimized code or deploy directly to your favorite platforms with one click.</p>

    <!-- Export Options -->
    <div class="mt-6 space-y-3 rounded-lg border border-white/10 bg-black/30 p-4">
      <div class="flex items-center justify-between rounded-md border border-white/10 bg-white/5 px-3 py-2">
        <div class="inline-flex items-center gap-2">
          <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="code" class="lucide lucide-code h-4 w-4 text-slate-300"><path d="m16 18 6-6-6-6" class=""></path><path d="m8 6-6 6 6 6" class=""></path></svg>
          <div class="">
            <div class="text-xs text-slate-200 font-geist">CSS Animation</div>
            <div class="text-[10px] text-slate-500 font-geist">Clean, optimized code</div>
          </div>
        </div>
        <button class="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 font-geist">Export</button>
      </div>

      <div class="flex items-center justify-between rounded-md border border-white/10 bg-white/5 px-3 py-2">
        <div class="inline-flex items-center gap-2">
          <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="video" class="lucide lucide-video h-4 w-4 text-slate-300"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" class=""></path><rect x="2" y="6" width="14" height="12" rx="2" class=""></rect></svg>
          <div class="">
            <div class="text-xs text-slate-200 font-geist">Video Export</div>
            <div class="text-[10px] text-slate-500 font-geist">MP4, GIF, WebM formats</div>
          </div>
        </div>
        <button class="px-3 py-1 bg-cyan-500 text-white text-xs rounded hover:bg-cyan-600 font-geist">Render</button>
      </div>

      <div class="flex items-center justify-between rounded-md border border-white/10 bg-white/5 px-3 py-2">
        <div class="inline-flex items-center gap-2">
          <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="globe" class="lucide lucide-globe h-4 w-4 text-slate-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
          <div class="">
            <div class="text-xs text-slate-200 font-geist">Deploy Live</div>
            <div class="text-[10px] text-slate-500 font-geist">Instant hosting &amp; sharing</div>
          </div>
        </div>
        <button class="px-3 py-1 bg-emerald-500 text-white text-xs rounded hover:bg-emerald-600 font-geist">Deploy</button>
      </div>
      
      <!-- Integration Options -->
      <div class="mt-4 pt-3 border-t border-white/10">
        <div class="flex items-center gap-2 mb-2">
          <span class="text-xs text-slate-400 font-geist">Quick Integrations:</span>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-6 h-6 bg-orange-500 rounded flex items-center justify-center">
            <span class="text-[10px] font-bold text-white font-geist">F</span>
          </div>
          <div class="w-6 h-6 bg-black rounded flex items-center justify-center">
            <span class="text-[10px] font-bold text-white font-geist">▲</span>
          </div>
          <div class="w-6 h-6 bg-purple-500 rounded flex items-center justify-center">
            <span class="text-[10px] font-bold text-white font-geist">N</span>
          </div>
          <div class="w-6 h-6 bg-blue-500 rounded flex items-center justify-center">
            <span class="text-[10px] font-bold text-white font-geist">W</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
        </div>