Animated Gradient Hero Section with CTA

<section class="relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1)">
      <div class="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-8 lg:pt-10 max-w-7xl mr-auto ml-auto pt-10 pr-6 pb-16 pl-6 gap-x-10 gap-y-10 items-center">
        <!-- Left: Copy -->
        <div class="relative z-10">
          <h1 class="text-4xl font-semibold tracking-tight leading-[1.05] sm:text-5xl md:text-6xl lg:text-7xl [animation:fadeSlideIn_0.5s_ease-out_0.3s_both] animate-on-scroll animate">
            <span class="block text-white tracking-tighter font-manrope font-semibold" style="">
              Build stunning websites
            </span>
            <span class="block bg-clip-text text-transparent bg-gradient-to-r from-indigo-200 via-fuchsia-200 to-amber-200 tracking-tighter font-manrope font-semibold" style="">
              in minutes
            </span>
          </h1>

          <p class="leading-relaxed md:text-lg [animation:fadeSlideIn_0.5s_ease-out_0.4s_both] animate-on-scroll text-base text-white/70 max-w-xl mt-6 animate font-sans">
            Create, customize, and publish a high‑performance site using AI—no
            code required. Pick a style, generate pages, and go live in minutes.
          </p>

          <!-- Primary CTA -->
          <div class="[animation:fadeSlideIn_0.5s_ease-out_0.5s_both] animate-on-scroll mt-10 relative animate">
            <!-- glow -->
            <div class="-inset-0.5 bg-gradient-to-r from-indigo-500 via-fuchsia-500 to-amber-400 opacity-40 w-64 rounded-full absolute blur-xl"></div>

            <a href="#" class="group isolate inline-flex cursor-pointer overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-[0_0_40px_8px_rgba(129,140,248,0.35)] rounded-full relative shadow-[0_8px_40px_rgba(129,140,248,0.25)]" style="--spread: 90deg; --shimmer-color: rgba(255,255,255,0.6); --radius: 9999px; --speed: 4s; --cut: 1px; --bg: rgba(255, 255, 255, 0.05);">
              <div class="absolute inset-0">
                <div class="absolute inset-[-200%] w-[400%] h-[400%] [animation:rotate-gradient_var(--speed)_linear_infinite]">
                  <div class="absolute inset-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]"></div>
                </div>
              </div>
              <div class="absolute rounded-full [background:var(--bg)] [inset:var(--cut)] backdrop-blur"></div>
              <div class="z-10 flex gap-3 sm:w-auto overflow-hidden text-base font-medium text-white w-full pt-3 pr-4 pb-3 pl-4 relative gap-x-3 gap-y-3 items-center" style="border-radius: 9999px;">
                <div style="position: absolute; content: ' '; display: block; width: 200%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), transparent); animation: borderBeamRotation 4s infinite linear; top: 50%; left: 50%; transform: translate(-50%, -50%);" class=""></div>
                <div style="position: absolute; inset: 1px; background: rgba(10, 11, 20, 0.8); border-radius: 9999px; backdrop-filter: blur(8px);" class=""></div>
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3f6038cb-af1c-4483-97bc-dd58d89c36ef_320w.jpg" alt="Advisor headshot" class="ring-2 ring-white/10 z-10 w-8 h-8 object-cover rounded-full relative" style="">
                <span class="whitespace-nowrap relative z-10 font-sans">
                  Generate My Site
                </span>
                <span class="inline-flex items-center justify-center z-10 bg-white/10 w-7 h-7 rounded-full ml-1 relative">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" 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 lucide-arrow-right w-[24px] h-[16px]" data-icon-replaced="true" style="width: 24px; height: 16px; color: rgb(255, 255, 255);"><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>
                </span>
                <style>
                  @keyframes borderBeamRotation {
                    0% {
                      transform: translate(-50%, -50%) rotate(0deg);
                    }
                    100% {
                      transform: translate(-50%, -50%) rotate(360deg);
                    }
                  }
                </style>
              </div>
            </a>
          </div>

          <!-- Social proof -->
          <div class="[animation:fadeSlideIn_0.5s_ease-out_0.6s_both] animate-on-scroll text-sm text-white/60 mt-10 animate">
            <p class="font-sans">"Launched a polished site in under an hour"</p>
            <p class="not-italic text-xs text-white/50 mt-1 font-sans">
              Jamie R. — Founder, SaaS
            </p>
          </div>
        </div>

        <!-- Right: Visual -->
        <div class="relative">
          <!-- Decorative ring shadow -->
          <div class="absolute -inset-6 -z-10 rounded-[2rem] bg-gradient-to-br from-indigo-500/10 via-fuchsia-500/10 to-amber-400/10 blur-3xl"></div>

          <div class="overflow-hidden shadow-indigo-900/30 [animation:fadeSlideIn_0.7s_ease-out_0.4s_both] animate-on-scroll border-gradient before:rounded-3xl bg-gradient-to-b from-white/5 to-white/[0.02] w-full max-w-xl rounded-3xl mr-auto ml-auto pt-3 pr-3 pb-3 pl-3 relative shadow-2xl backdrop-blur animate">
            <div class="rounded-2xl bg-black/40 p-2">
              <img class="object-center md:h-[520px] w-full h-[420px] object-cover rounded-xl" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8b907ece-2dd2-4009-9170-a82e3e3e5910_1600w.webp" alt="Abstract 3D ring render" style="">
            </div>
            <!-- subtle caption -->
            <div class="mt-3 flex items-center justify-between px-1">
              <div class="flex items-center gap-2 text-xs text-white/50">
                <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="cpu" class="lucide lucide-cpu h-3.5 w-3.5"><path d="M12 20v2" class=""></path><path d="M12 2v2" class=""></path><path d="M17 20v2" class=""></path><path d="M17 2v2" class=""></path><path d="M2 12h2" class=""></path><path d="M2 17h2" class=""></path><path d="M2 7h2" class=""></path><path d="M20 12h2" class=""></path><path d="M20 17h2" class=""></path><path d="M20 7h2" class=""></path><path d="M7 20v2" class=""></path><path d="M7 2v2" class=""></path><rect x="4" y="4" width="16" height="16" rx="2" class=""></rect><rect x="8" y="8" width="8" height="8" rx="1" class=""></rect></svg>
                <span class="font-sans">Design • Generate • Publish</span>
              </div>
              <div class="text-xs text-white/40 font-sans">Live Preview</div>
            </div>
          </div>
        </div>
      </div>
    </section>