Responsive Hero Section with Code & CTA Buttons

<section class="sm:p-8 max-w-7xl mt-24 mr-auto mb-24 ml-auto pt-8 pr-4 pb-8 pl-4" data-element-locator="html &gt; body:nth-of-type(1) &gt; header:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; section:nth-of-type(1) &gt; section:nth-of-type(1)">
  <div class="relative overflow-hidden rounded-3xl bg-neutral-900/60 border border-white/10">
    <div class="relative grid grid-cols-1 lg:grid-cols-2 gap-0">
      <!-- Left: Text Content -->
      <div class="p-6 sm:p-10 lg:p-12 flex flex-col justify-center order-2 lg:order-1">
        
        <h2 class="sm:text-5xl lg:text-6xl leading-[1.05] text-4xl text-white tracking-tight mt-6 font-geist font-light" style="">
          Write CLI tools that feel native
        </h2>
        <p class="sm:mt-6 sm:text-base text-sm text-neutral-300 max-w-[48ch] mt-6 font-geist">
          Intuitive API that gets out of your way. Focus on building features, not boilerplate.
        </p>
        <div class="flex flex-col sm:flex-row sm:gap-4 sm:mt-10 md:mt-12 md:mb-12 mt-10 mb-12 gap-x-3 gap-y-3 items-center justify-center">
            <a href="/docs" class="styled-button inline-flex items-center justify-center transition sm:text-base sm:w-auto animate-hero-element animate-cta-1 text-sm font-medium text-white w-full font-geist" style="position: relative; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 500; color: rgb(255, 255, 255); background: linear-gradient(rgb(23, 23, 23), rgb(36, 36, 36)); border-radius: 9999px; cursor: pointer; box-shadow: rgb(0, 0, 0) 0px 2px 4px, rgba(0, 0, 0, 0.4) 0px 10px 20px; border: 1px solid rgb(41, 41, 41);">
              <style>
                .styled-button::before {
                  content: "";
                  position: absolute;
                  top: -2px;
                  right: -1px;
                  bottom: -1px;
                  left: -1px;
                  background: linear-gradient(to bottom, #292929, #000000);
                  z-index: -1;
                  border-radius: 9999px;
                  transition: all 0.2s ease;
                  opacity: 1;
                }
                .styled-button:hover {
                  background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 1), 0 15px 30px rgba(0, 0, 0, 0.6);
                }
                .styled-button:hover::before {
                  background: linear-gradient(to bottom, #3a3a3a, #1a1a1a);
                }
              </style>
              Read the Docs
              <div class="ml-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="">
                  <path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path>
                </svg>
              </div>
            </a>
            <a href="/examples" class="inline-flex items-center justify-center gap-2 hover:bg-white/10 hover:text-white transition sm:text-base sm:px-6 sm:py-3 sm:w-auto animate-hero-element animate-cta-2 text-sm font-medium text-white/70 bg-white/5 w-full h-14 ring-white/10 ring-1 rounded-full pt-2 pr-4 pb-2 pl-4 shadow-sm backdrop-blur font-geist">
              View Examples
            </a>
          </div>
      </div>

      <!-- Right: Hero Visual with Code & Preview -->
      <div class="overflow-hidden lg:border-t-0 lg:border-l order-1 lg:order-2 sm:p-10 lg:p-12 flex bg-neutral-950 border-white/10 border-t px-6 py-6 relative items-center justify-center" data-element-locator="html &gt; body:nth-of-type(1) &gt; header:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; section:nth-of-type(1) &gt; section:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(2)">
        <div class="relative w-full max-w-lg">
          <!-- Floating Code Snippet -->
          <div class="relative z-10 transform -rotate-2 hover:rotate-0 transition-transform duration-500">
            <div class="overflow-hidden bg-neutral-900 ring-white/10 ring-1 rounded-2xl shadow-2xl">
              <div class="flex bg-neutral-900/80 border-white/10 border-b pt-2 pr-3 pb-2 pl-3 items-center justify-between">
                <div class="flex items-center gap-1.5">
                  <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
                  <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
                  <div class="w-3 h-3 rounded-full bg-emerald-500/80"></div>
                </div>
                <span class="text-[10px] text-neutral-400 font-geist">cli.ts</span>
              </div>
              <div class="p-4">
                <div class="font-geist-mono text-[11px] sm:text-[12px] leading-relaxed text-neutral-300 space-y-1">
                  <div class="flex gap-3">
                    <span class="text-neutral-600 select-none w-4 text-right font-geist">1</span>
                    <span><span class="text-purple-400 font-geist">import</span> <span class="text-white font-geist">{ cli }</span> <span class="text-purple-400 font-geist">from</span> <span class="text-amber-400 font-geist">'vibecli'</span></span>
                  </div>
                  <div class="flex gap-3">
                    <span class="text-neutral-600 select-none w-4 text-right font-geist">2</span>
                    <span></span>
                  </div>
                  <div class="flex gap-3">
                    <span class="text-neutral-600 select-none w-4 text-right font-geist">3</span>
                    <span class=""><span class="text-blue-400 font-geist">cli</span><span class="text-white font-geist">.</span><span class="text-pink-400 font-geist">command</span><span class="text-white font-geist">(</span><span class="text-amber-400 font-geist">'init'</span><span class="text-white font-geist">)</span></span>
                  </div>
                  <div class="flex gap-3">
                    <span class="text-neutral-600 select-none w-4 text-right font-geist">4</span>
                    <span class=""><span class="text-white font-geist">&nbsp;&nbsp;.</span><span class="text-pink-400 font-geist">description</span><span class="text-white font-geist">(</span><span class="text-amber-400 font-geist">'Initialize project'</span><span class="text-white font-geist">)</span></span>
                  </div>
                  <div class="flex gap-3">
                    <span class="text-neutral-600 select-none w-4 text-right font-geist">5</span>
                    <span class=""><span class="text-white font-geist">&nbsp;&nbsp;.</span><span class="text-pink-400 font-geist">action</span><span class="text-white font-geist">(</span><span class="text-purple-400 font-geist">async</span> <span class="text-white font-geist">() =&gt; {</span></span>
                  </div>
                  <div class="flex gap-3">
                    <span class="text-neutral-600 select-none w-4 text-right font-geist">6</span>
                    <span><span class="text-white">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="text-blue-400 font-geist">console</span><span class="text-white font-geist">.</span><span class="text-pink-400 font-geist">log</span><span class="text-white font-geist">(</span><span class="text-amber-400 font-geist">'✨ Done!'</span><span class="text-white font-geist">)</span></span>
                  </div>
                  <div class="flex gap-3">
                    <span class="text-neutral-600 select-none w-4 text-right font-geist">7</span>
                    <span><span class="text-white font-geist">&nbsp;&nbsp;})</span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Floating Preview Card -->
          <div class="absolute -bottom-8 -right-8 z-20 transform rotate-3 hover:rotate-0 transition-transform duration-500">
            <div class="ring-inset overflow-hidden bg-neutral-900 border-white/10 border ring-white/5 ring-1 rounded-2xl shadow-2xl" style="width: 280px;">
              <div class="h-40 relative">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fcac6ae1-fb6e-4c48-b5a9-39c16f529be7_800w.jpg" alt="" class="opacity-70 w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0">
                <div class="bg-gradient-to-tr from-indigo-600/30 to-pink-500/20 mix-blend-overlay absolute top-0 right-0 bottom-0 left-0"></div>

                <!-- Floating HUD -->
                <div class="absolute right-3 top-3 w-32 rounded-xl bg-neutral-900/80 border border-white/10 backdrop-blur p-2.5 shadow-lg">
                  <div class="flex items-center gap-2 text-[10px] font-medium text-neutral-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400 flex-shrink-0">
                      <polyline points="4 17 10 11 4 5" class=""></polyline>
                      <line x1="12" y1="19" x2="20" y2="19" class=""></line>
                    </svg>
                    <span class="truncate font-geist">CLI Running</span>
                  </div>
                  <div class="mt-2 space-y-1">
                    <div class="h-1 w-full max-w-20 rounded bg-emerald-500/40"></div>
                    <div class="h-1 w-full max-w-16 rounded bg-white/20"></div>
                    <div class="h-1 w-full max-w-14 rounded bg-white/10"></div>
                  </div>
                </div>

                <!-- Dock Controls -->
                <div class="absolute left-1/2 -translate-x-1/2 bottom-3 flex items-center gap-1.5">
                  <div class="rounded-lg bg-neutral-900/80 border border-white/10 backdrop-blur px-2 py-1 flex items-center gap-1">
                    <span class="text-[9px] text-neutral-300 rounded bg-white/5 border border-white/10 px-1.5 py-0.5 font-geist">⌘</span>
                    <span class="text-[9px] text-neutral-400 font-geist">K</span>
                  </div>
                  <div class="rounded-lg bg-neutral-900/80 border border-white/10 backdrop-blur px-1.5 py-1 flex items-center gap-0.5">
                    <span class="text-[9px] text-neutral-300 rounded bg-white/5 border border-white/10 px-1.5 py-0.5 font-geist">↑</span>
                    <span class="text-[9px] text-neutral-300 rounded bg-white/5 border border-white/10 px-1.5 py-0.5 font-geist">↓</span>
                  </div>
                </div>
              </div>
              <div class="flex gap-2 text-[10px] text-neutral-400 border-white/10 border-t pt-2 pr-3 pb-2 pl-3 items-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
                  <polyline points="20 6 9 17 4 12" class=""></polyline>
                </svg>
                <span class="truncate font-geist">Interactive CLI interface</span>
              </div>
            </div>
          </div>

          <!-- Decorative Elements -->
          <div class="absolute -top-4 -left-4 w-24 h-24 bg-gradient-to-br from-indigo-500/20 to-purple-600/20 rounded-full blur-2xl"></div>
          <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br from-pink-500/20 to-orange-600/20 rounded-full blur-2xl"></div>
        </div>
      </div>
    </div>
  </div>
</section>