Gradient AI Chat Widget Card

<section class="col-span-12 lg:col-span-5 md:pt-14 flex pt-14 items-center justify-center"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; section:nth-of-type(2)">
  <div class="relative w-full max-w-lg">
    <div
      class="absolute inset-0 bg-gradient-to-r from-sky-500 via-indigo-500 to-fuchsia-500 rounded-2xl blur-xl opacity-20">
    </div>
    <div
      class="group overflow-hidden transition-all duration-500 hover:border-indigo-500/40 hover:ring-indigo-500/30 bg-gradient-to-br from-slate-900/90 to-slate-950/95 border-white/15 border ring-white/10 ring-1 rounded-2xl relative">
      <div
        class="absolute -bottom-12 -right-12 h-48 w-48 rounded-full bg-gradient-to-tr from-indigo-500/25 via-purple-500/15 to-blue-500/10 blur-3xl transition-all duration-700 group-hover:scale-110">
      </div>
      <div
        class="-top-6 -left-6 bg-gradient-to-br from-blue-500/20 via-indigo-500/15 to-purple-500/10 w-32 h-32 rounded-full absolute blur-2xl">
      </div>

      <div class="pt-6 pr-6 pb-6 pl-6">
        <div class="flex mb-4 items-start justify-between">
          <span class="inline-flex items-center gap-1.5 text-xs font-medium text-white bg-gradient-to-r from-indigo-500/20 to-purple-500/20 ring-indigo-400/30 ring-1 rounded-lg pt-1 pr-2.5 pb-1 pl-2.5">
        <div class="h-1.5 w-1.5 animate-pulse bg-indigo-400 rounded-full"></div>
        AI Assistant
      </span>
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
            <span class="text-xs text-slate-400">Online</span>
          </div>
        </div>

        <h3 class="text-lg font-semibold tracking-tight text-white mb-3">AI Chat Assistant</h3>
        <p class="leading-relaxed text-sm text-slate-300 mb-4">Ask me anything! I can help with code, design, writing,
          analysis, and more. Just type your question below.</p>

        <!-- Chat Interface -->
        <div class="bg-slate-800/50 rounded-xl p-4 mb-4 ring-1 ring-slate-700/50">
          <div class="space-y-3">
            <!-- User message -->
            <div class="flex justify-end">
              <div
                class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white text-sm px-3 py-2 rounded-lg max-w-[80%]">
                How can I improve my website's performance?
              </div>
            </div>

            <!-- AI response -->
            <div class="flex justify-start items-start gap-2">
              <div
                class="flex text-xs font-bold text-white bg-gradient-to-r from-blue-500 to-indigo-600 w-6 h-6 rounded-full items-center justify-center">
                AI
              </div>
              <div class="bg-slate-700/80 text-slate-200 text-sm px-3 py-2 rounded-lg max-w-[80%]">
                I can help optimize your website! Consider image compression, CDN usage, and code minification...
              </div>
            </div>
          </div>
        </div>

        <!-- Input area -->
        <div class="flex items-center gap-2 bg-slate-800/30 rounded-xl p-2 ring-1 ring-slate-600/30">
          <input type="text" placeholder="Type your message..." class="flex-1 bg-transparent text-sm text-white placeholder-slate-400 outline-none px-2 py-1">
          <button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transition-colors w-8 h-8 rounded-lg flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
          <path d="M12 19V5" class=""></path>
          <path d="m5 12 7-7 7 7" class=""></path>
        </svg>
      </button>
        </div>
      </div>
    </div>
  </div>
</section>