AI Image Generator Promotional Hero Section

<section class="mt-8 px-4" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2)">
  <div class="max-w-7xl mr-auto ml-auto"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2) &gt; div:nth-of-type(1)">
    <div class="bg-gradient-to-t from-[#393D5E]/0 to-[#393D5E] ring-white/10 ring-1 rounded-3xl shadow-xl"
      data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1)">
      <div class="md:p-10 grid md:grid-cols-2 gap-8 pt-6 pr-6 pb-6 pl-6 gap-x-8 gap-y-8 items-center"
        data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1)">
        <div class="relative order-2 md:order-1">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a58a231f-a01b-4174-b390-3f6327e70f3e_800w.jpg" alt="AI Generated Art" class="w-full h-full object-cover rounded-2xl">
          <button class="absolute bottom-4 right-4 w-14 h-14 rounded-2xl backdrop-blur flex items-center justify-center ring-1 bg-black/80 ring-white/10 hover:bg-black/90 transition">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wand-2" class="lucide lucide-wand-2 text-slate-200"><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>
            </button>
        </div>
        <div class="order-1 md:order-2">
          <h3 class="text-3xl md:text-4xl tracking-tight font-semibold mb-3"
            style="font-family:'Plus Jakarta Sans',sans-serif">Create stunning visuals with AI</h3>
          <p class="text-base md:text-lg text-slate-300 mb-5" style="font-family:'Inter',sans-serif">Transform your
            ideas into extraordinary images using advanced AI. From concept art to photorealistic scenes, bring your
            imagination to life.</p>
          <div class="flex flex-wrap gap-3">
            <button class="bg-purple-600 hover:bg-purple-700 text-white px-5 py-2.5 rounded-full text-sm transition" style="font-family:'Inter',sans-serif">Start creating</button>
            <button class="bg-slate-900 hover:bg-slate-800 text-slate-200 px-5 py-2.5 rounded-full text-sm border border-white/10 transition" style="font-family:'Inter',sans-serif">View examples</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>