AI Web Builder Hero & Feature Section

<section class="z-10 mt-20 mb-20 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2)">
      <div class="max-w-7xl mx-auto px-6 py-16">
        <div class="grid gap-12 lg:grid-cols-2">
          <!-- Visual Demo -->
          <div class="[animation:fadeSlideIn_0.5s_ease-out_0s_both] animate-on-scroll border-gradient before:rounded-[36px] bg-gradient-to-br from-indigo-500/5 via-fuchsia-500/5 to-amber-400/5 rounded-[36px] pt-5 pr-5 pb-5 pl-5 relative">
            <article class="group relative overflow-hidden transition-shadow hover:shadow-md bg-neutral-900/70 border border-neutral-700 rounded-3xl shadow-xl backdrop-blur-xl border-gradient before:rounded-3xl" style="background: rgba(17, 17, 17, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(64, 64, 64, 0.35);">
              <div class="sm:p-10 pt-6 pr-6 pb-6 pl-6">
                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 [animation:fadeSlideIn_0.5s_ease-out_0.1s_both] animate-on-scroll">
                  <h3 class="text-2xl tracking-tight text-white font-manrope font-semibold" style="">GPT-5 HTML Generation</h3>
                  <span class="inline-flex items-center gap-2 text-[10px] sm:text-xs text-neutral-300 bg-white/5 border border-white/10 rounded-full px-2.5 py-1 border-gradient before:rounded-full font-sans">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wand-sparkles" class="lucide lucide-wand-sparkles text-fuchsia-400 w-[16px] h-[16px]" data-icon-replaced="true" style="color: rgb(232, 121, 249); width: 16px; height: 16px;"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" class=""></path><path d="m14 7 3 3" class=""></path><path d="M5 6v4" class=""></path><path d="M19 14v4" class=""></path><path d="M10 2v2" class=""></path><path d="M7 8H3" class=""></path><path d="M21 16h-4" class=""></path><path d="M11 3H9" class=""></path></svg>
                    AI-Powered
                  </span>
                </div>

                <!-- Code Editor Illustration -->
                <div class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-800 ring-1 ring-inset ring-white/5 mb-8 border-gradient before:rounded-2xl [animation:fadeSlideIn_0.5s_ease-out_0.2s_both] animate-on-scroll">
                  <!-- Code Editor Window -->
                  <div class="absolute right-3 sm:right-6 top-4 sm:top-6 w-[78%] h-[68%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm border-gradient before:rounded-2xl">
                    <div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
                      <span class="text-[10px] sm:text-xs tracking-widest text-neutral-400 font-sans">index.html</span>
                      <div class="flex items-center gap-2">
                        <span class="h-2 w-2 rounded-full bg-green-400"></span>
                        <span class="text-xs text-green-400 font-sans">Live</span>
                      </div>
                    </div>
                    <div class="p-2 font-mono text-[8px] sm:text-[10px] leading-relaxed">
                      <div class="text-purple-400 font-sans">&lt;<span class="text-blue-400 font-sans">section</span> <span class="text-green-400 font-sans">class</span>=<span class="text-amber-300 font-sans">"hero"</span>&gt;</div>
                      <div class="text-neutral-500 pl-3 font-sans">&lt;<span class="text-blue-400 font-sans">div</span> <span class="text-green-400 font-sans">class</span>=<span class="text-amber-300 font-sans">"container"</span>&gt;</div>
                      <div class="text-white pl-6 font-sans">&lt;<span class="text-blue-400 font-sans">h1</span>&gt;Welcome&lt;/<span class="text-blue-400 font-sans">h1</span>&gt;</div>
                      <div class="text-neutral-500 pl-3 font-sans">&lt;/<span class="text-blue-400 font-sans">div</span>&gt;</div>
                      <div class="text-purple-400 font-sans">&lt;/<span class="text-blue-400 font-sans">section</span>&gt;</div>
                    </div>
                  </div>

                  <!-- Tailwind Classes Panel -->
                  <div class="absolute left-6 sm:left-12 bottom-10 sm:bottom-12 w-[62%] h-[52%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm border-gradient before:rounded-2xl">
                    <div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
                      <span class="text-[10px] sm:text-xs tracking-widest text-neutral-400 font-sans">TAILWIND</span>
                    </div>
                    <div class="p-2 space-y-1 font-mono text-[9px] sm:text-[10px]">
                      <div class="flex items-center justify-between">
                        <span class="text-blue-400 font-sans">flex items-center</span>
                        <span class="text-green-400 font-sans">✓</span>
                      </div>
                      <div class="flex items-center justify-between">
                        <span class="text-blue-400 font-sans">rounded-xl p-6</span>
                        <span class="text-green-400 font-sans">✓</span>
                      </div>
                      <div class="flex items-center justify-between">
                        <span class="text-blue-400 font-sans">bg-gradient-to-r</span>
                        <span class="text-green-400 font-sans">✓</span>
                      </div>
                    </div>
                  </div>

                  <!-- AI Process Indicator -->
                  <div class="sm:left-6 h-[44%] border-neutral-800 border rounded-2xl absolute top-6 left-3 shadow-sm backdrop-blur border-gradient before:rounded-2xl bg-neutral-900/90">
                    <div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
                      <span class="text-[10px] sm:text-xs tracking-widest text-neutral-400 font-sans">PROCESS</span>
                    </div>
                    <div class="text-[9px] sm:text-[10px] pt-2 pr-2 pb-2 pl-2 space-y-1.5">
                      <div class="flex items-center gap-2">
                        <div class="h-1.5 w-1.5 rounded-full bg-green-400"></div>
                        <span class="text-neutral-300 font-sans">Parse request</span>
                      </div>
                      <div class="flex items-center gap-2">
                        <div class="h-1.5 w-1.5 rounded-full bg-green-400"></div>
                        <span class="text-neutral-300 font-sans">Generate HTML</span>
                      </div>
                      <div class="flex items-center gap-2">
                        <div class="h-1.5 w-1.5 rounded-full bg-fuchsia-400 animate-pulse"></div>
                        <span class="text-neutral-300 font-sans">Apply Tailwind</span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Features grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 [animation:fadeSlideIn_0.5s_ease-out_0.3s_both] animate-on-scroll">
                  <div class="">
                    <h4 class="text-lg font-semibold tracking-tight text-white font-sans">Intelligent Styling</h4>
                    <p class="mt-2 text-sm text-neutral-400 font-sans">GPT-5 understands design intent and generates pixel-perfect Tailwind classes automatically.</p>
                  </div>
                  <div class="">
                    <h4 class="text-lg font-semibold tracking-tight text-white font-sans">Real-time Preview</h4>
                    <p class="mt-2 text-sm text-neutral-400 font-sans">See your changes instantly as GPT-5 generates and updates your HTML components.</p>
                  </div>
                </div>

                <!-- CTA -->
                <div class="[animation:fadeSlideIn_0.5s_ease-out_0.4s_both] animate-on-scroll">
                  <a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-neutral-100 hover:text-neutral-300 border-gradient before:rounded-lg font-sans">
                    Try GPT-5 Editor
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                      <path d="M5 12h14" class=""></path>
                      <path d="m12 5 7 7-7 7" class=""></path>
                    </svg>
                  </a>
                </div>
              </div>
            </article>
          </div>

          <!-- Copy & stats -->
          <div class="">
            <div class="tech-content [animation:fadeSlideIn_0.5s_ease-out_0s_both] animate-on-scroll" id="technology">
              <h3 class="text-4xl sm:text-5xl text-white tracking-tight font-manrope font-semibold" style="">
                Next-generation AI web builder powered by GPT-5
              </h3>

              <!-- Additional technology details -->
              <div class="mt-8 [animation:fadeSlideIn_0.5s_ease-out_0.1s_both] animate-on-scroll">
                <div class="border-white/10 border-t pt-6">
                  <h4 class="text-lg font-semibold text-white mb-4 font-sans">Core AI Capabilities</h4>
                  <div class="space-y-4">
                    <div class="flex items-start gap-3 [animation:fadeSlideIn_0.5s_ease-out_0.2s_both] animate-on-scroll">
                      <div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center mt-0.5 border-gradient before:rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye text-indigo-400 w-[16px] h-[16px]" data-icon-replaced="true" style="color: rgb(129, 140, 248); width: 16px; height: 16px;"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
                      </div>
                      <div class="">
                        <h5 class="font-medium text-white font-sans">Context-Aware Generation</h5>
                        <p class="text-sm text-neutral-400 mt-1 font-sans">GPT-5 analyzes your site structure and maintains consistent design patterns throughout.</p>
                      </div>
                    </div>
                    <div class="flex items-start gap-3 [animation:fadeSlideIn_0.5s_ease-out_0.3s_both] animate-on-scroll">
                      <div class="flex-shrink-0 w-8 h-8 rounded-full bg-fuchsia-500/20 flex items-center justify-center mt-0.5 border-gradient before:rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-fuchsia-400">
                          <path d="m7.5 4.27 9 5.15" class=""></path>
                          <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path>
                          <path d="m3.3 7 8.7 5 8.7-5" class=""></path>
                          <path d="M12 22V12" class=""></path>
                        </svg>
                      </div>
                      <div class="">
                        <h5 class="font-medium text-white font-sans">Tailwind Optimization</h5>
                        <p class="text-sm text-neutral-400 mt-1 font-sans">Automatically selects optimal utility classes for responsive, accessible, and performant designs.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="border-white/10 border-t mt-8 pt-6 [animation:fadeSlideIn_0.5s_ease-out_0.4s_both] animate-on-scroll">
              <div class="grid gap-6 sm:grid-cols-2">
                <div class="flex gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer items-center">
                  <div class="">
                    <div class="flex items-baseline gap-2">
                      <span class="text-2xl tracking-tight text-white font-manrope font-semibold" data-target="99" style="">99.9%</span>
                      <span class="text-sm text-neutral-400"></span>
                    </div>
                    <p class="text-xs text-neutral-400 font-sans">Code accuracy rate</p>
                  </div>
                </div>

                <div class="flex items-center gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer">
                  <div class="">
                    <div class="flex items-baseline gap-2">
                      <span class="text-2xl tracking-tight text-white font-manrope font-semibold" data-target="10" style="">10x</span>
                    </div>
                    <p class="text-xs text-neutral-400 font-sans">Faster than manual coding</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="border-white/10 border-t mt-8 pt-6 [animation:fadeSlideIn_0.5s_ease-out_0.5s_both] animate-on-scroll">
              <a href="#" class="group inline-flex items-center gap-2 hover:opacity-90 transition-opacity border-gradient before:rounded-full text-sm font-medium text-black bg-gradient-to-r from-indigo-400 via-fuchsia-400 to-amber-400 rounded-full pt-2.5 pr-5 pb-2.5 pl-5 shadow-[0_8px_30px_rgba(129,140,248,0.25)]">Start Building With GPT-5<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-black/10 text-black">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </span></a>
            </div>
          </div>
        </div>
      </div>
    </section>