Two-Column About Section with Image, CTA & Features

<section class="mt-24 mb-24 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(3)">
  <!-- subtle purple/blue glow -->
  <div class="pointer-events-none absolute -z-10 inset-0">
    <div class="absolute -top-10 -left-10 h-80 w-80 rounded-full bg-indigo-500/10 blur-3xl"></div>
    <div class="absolute bottom-0 right-1/3 h-64 w-64 rounded-full bg-fuchsia-400/10 blur-3xl"></div>
  </div>

  <div class="max-w-7xl mx-auto px-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
      <!-- Visual -->
      <div class="[animation:fadeSlideIn_0.5s_ease-out_0s_both] animate-on-scroll border-gradient before:rounded-[28px] bg-gradient-to-br from-indigo-500/10 via-fuchsia-500/5 to-blue-300/10 rounded-[28px] p-2">
        <div class="overflow-hidden rounded-[22px] bg-black/30 ring-1 ring-white/10">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4209685f-125d-4dc8-b4b6-9a811d4f6e19_1600w.webp" alt="AI-powered design workspace" class="md:h-[520px] w-full h-[320px] object-cover">
        </div>
      </div>

      <!-- Copy -->
      <div class="[animation:fadeSlideIn_0.5s_ease-out_0.1s_both] animate-on-scroll">
        <div class="inline-flex items-center gap-2 text-sm text-indigo-200/80">
          <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-indigo-500/15 ring-1 ring-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
          </span>
          <span class="font-sans">About Aura</span>
        </div>

        <h2 class="mt-4 text-4xl sm:text-5xl md:text-6xl tracking-tight text-white font-manrope font-semibold" style="">
          Intelligent design, beautiful results.
        </h2>

        <p class="mt-5 text-base md:text-lg leading-relaxed text-white/70 max-w-2xl font-sans">
          Aura combines cutting-edge AI technology with thoughtful design principles to help you create stunning websites in minutes. Our platform empowers creators of all skill levels to bring their vision to life.
        </p>

        <div class="mt-8">
          <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)]">
            Discover Our Story
            <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>

        <!-- Feature cards -->
        <div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4 [animation:fadeSlideIn_0.5s_ease-out_0.2s_both] animate-on-scroll">
          <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5 border-gradient before:rounded-2xl">
            <div class="flex items-center gap-3">
              
              <h3 class="text-base tracking-tight text-white font-semibold leading-none font-sans">Lightning Fast</h3>
            </div>
            <p class="mt-3 text-sm text-neutral-400 font-sans">Create professional sites in minutes, not days.</p>
          </div>

          <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5 border-gradient before:rounded-2xl">
            <div class="flex gap-3 gap-x-3 gap-y-3 items-center">
              
              <h3 class="text-base tracking-tight text-white font-semibold leading-none font-sans">AI-Powered</h3>
            </div>
            <p class="mt-3 text-sm text-neutral-400 font-sans">GPT-5 intelligence handles the complex code for you.</p>
          </div>

          <div class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5 border-gradient before:rounded-2xl">
            <div class="flex items-center gap-3">
              
              <h3 class="text-base tracking-tight text-white font-semibold leading-none font-sans">Fully Customizable</h3>
            </div>
            <p class="mt-3 text-sm text-neutral-400 font-sans">Complete control over every design element and style.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>