Dark CTA Footer with Newsletter and Quick Links

<footer class="sm:p-8 bg-zinc-900/50 border-zinc-800 border rounded-3xl mt-10 pt-6 pr-6 pb-6 pl-6">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
    <!-- Left: CTA + Contact -->
    <div class="">
      <h3 class="text-4xl text-zinc-100 font-geist font-medium tracking-tighter" style="">
        Ready to transform your workflows with intelligent automation?
        <span class="underline decoration-zinc-600 underline-offset-4 font-geist font-medium tracking-tighter" style="">Let's get started</span>.
      </h3>

      <div class="mt-6 flex items-center gap-3">
        <div
          class="h-10 w-10 flex bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f40f03d0-8722-42a1-bf75-89d9deb07d7f_320w.jpg)] bg-cover border-zinc-700 border rounded-full items-center justify-center">

        </div>
        <div class="">
          <p class="text-sm font-medium tracking-tight text-zinc-100 font-geist" style="">Alex Rivera</p>
          <p class="text-xs text-zinc-500 font-geist" style="">AI Solutions Lead</p>
        </div>
      </div>

      <div class="mt-10 space-y-2">
        <p class="text-sm text-zinc-400 font-geist" style="">support@flowai.com</p>
        <a href="mailto:hello@flowai.com"
          class="inline-flex items-center gap-3 text-2xl sm:text-3xl text-zinc-100 underline decoration-zinc-600 underline-offset-4 font-geist font-medium tracking-tighter"
          style="">
          <span class="inline-flex h-7 w-7 items-center justify-center text-zinc-900 bg-zinc-100 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-3.5 w-3.5"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                            </span>
          hello@flowai.com
        </a>
      </div>
    </div>

    <!-- Right: Newsletter + Links -->
    <div class="">
      <h4 class="text-2xl sm:text-3xl text-zinc-100 font-geist font-medium tracking-tighter" style="">Stay Updated</h4>

      <form class="mt-6 space-y-6">
        <div class="">
          <input type="text" placeholder="Your name *" class="w-full bg-transparent border-b border-zinc-700 focus:border-zinc-400 outline-none py-3 text-sm text-zinc-100 placeholder-zinc-500">
        </div>
        <div>
          <input type="email" placeholder="Email *" class="w-full bg-transparent border-b border-zinc-700 focus:border-zinc-400 outline-none py-3 text-sm text-zinc-100 placeholder-zinc-500">
        </div>
        <div class="flex items-center gap-4">
          <button type="submit" class="inline-flex items-center justify-between gap-3 px-4 py-2.5 rounded-full bg-zinc-100 text-zinc-900 text-sm font-normal hover:bg-zinc-200 transition font-geist" style="">
                                Subscribe
                                <span class="inline-flex h-2 w-2 rounded-full bg-zinc-900"></span>
                            </button>
          <p class="text-sm text-zinc-500 font-geist" style="">Get weekly insights on workflow automation and AI trends.
          </p>
        </div>
      </form>

      <div class="grid grid-cols-2 gap-8 mt-10">
        <div>
          <p class="text-xs text-zinc-500 font-normal font-geist" style="">Quick Links</p>
          <ul class="mt-3 space-y-2">
            <li><a href="#"
                class="text-lg font-medium tracking-tight text-zinc-100 hover:underline underline-offset-4 font-geist"
                style="">Platform</a></li>
            <li><a href="#"
                class="text-lg font-medium tracking-tight text-zinc-100 hover:underline underline-offset-4 font-geist"
                style="">Features</a></li>
            <li><a href="#"
                class="text-lg font-medium tracking-tight text-zinc-100 hover:underline underline-offset-4 font-geist"
                style="">Pricing</a></li>
            <li><a href="#"
                class="text-lg font-medium tracking-tight text-zinc-100 hover:underline underline-offset-4 font-geist"
                style="">Docs</a></li>
          </ul>
        </div>
        <div>
          <p class="text-xs text-zinc-500 font-normal font-geist" style="">Connect</p>
          <ul class="mt-3 space-y-2">
            <li>
              <a href="#"
                class="inline-flex items-center gap-2 text-lg font-medium tracking-tight text-zinc-100 hover:underline underline-offset-4 font-geist"
                style="">
                GitHub
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  data-lucide="external-link" class="lucide lucide-external-link h-4 w-4">
                  <path d="M15 3h6v6"></path>
                  <path d="M10 14 21 3"></path>
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                </svg>
              </a>
            </li>
            <li>
              <a href="#"
                class="inline-flex items-center gap-2 text-lg font-medium tracking-tight text-zinc-100 hover:underline underline-offset-4 font-geist"
                style="">
                Discord
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  data-lucide="external-link" class="lucide lucide-external-link h-4 w-4">
                  <path d="M15 3h6v6"></path>
                  <path d="M10 14 21 3"></path>
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                </svg>
              </a>
            </li>
            <li>
              <a href="#"
                class="inline-flex items-center gap-2 text-lg font-medium tracking-tight text-zinc-100 hover:underline underline-offset-4 font-geist"
                style="">
                Twitter
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  data-lucide="external-link" class="lucide lucide-external-link h-4 w-4">
                  <path d="M15 3h6v6"></path>
                  <path d="M10 14 21 3"></path>
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div
    class="mt-10 pt-6 border-t border-zinc-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
    <div class="flex items-center gap-2">
      <svg class="md:w-14 md:h-14 w-[36px] h-[36px]" viewBox="0 0 48 48" aria-hidden="true" stroke-width="2"
        style="width: 36px; height: 36px;">
        <path d="M24 8 L40 36 H8 Z" fill="currentColor" class=""></path>
      </svg>
      <span class="text-sm font-medium tracking-tight font-geist" style="">FlowAI</span>
    </div>
    <p class="text-xs text-zinc-500 font-geist" style="">© <span class="font-normal font-geist" style="">2024</span>
      FlowAI® — All rights reserved</p>
  </div>
</footer>