Newsletter Signup Form

<div class="px-6 py-20 lg:px-20">
  <div class="max-w-md">
    <h2 class="font-serif text-4xl sm:text-5xl mb-6 tracking-tight text-white">Stay Connected</h2>
    <p class="text-sm leading-relaxed text-gray-400 mb-10">
      Be the first to discover new arrivals, exclusive collections, and styling insights from our fashion experts. Join our community of style enthusiasts.
    </p>
    <form id="newsletterForm" class="flex flex-col gap-6">
      <div class="grid sm:grid-cols-2 gap-6">
        <div class="border-b border-gray-600 focus-within:border-white transition duration-300">
          <input type="text" required="" placeholder="First Name" class="w-full bg-transparent py-3 text-sm focus:outline-none placeholder-gray-500 text-white">
        </div>
        <div class="border-b border-gray-600 focus-within:border-white transition duration-300">
          <input type="text" required="" placeholder="Last Name" class="w-full bg-transparent py-3 text-sm focus:outline-none placeholder-gray-500 text-white">
        </div>
      </div>
      <div class="border-b border-gray-600 focus-within:border-white transition duration-300">
        <input type="email" required="" placeholder="Email Address" class="w-full bg-transparent py-3 text-sm focus:outline-none placeholder-gray-500 text-white">
      </div>
      <div class="flex items-center gap-3 text-sm text-gray-400">
        <input type="checkbox" id="newsletter" class="w-4 h-4 rounded border-gray-600">
        <label for="newsletter">Send me style tips and exclusive offers</label>
      </div>
      <button type="submit" class="group flex items-center justify-center gap-3 py-4 px-8 rounded-full border border-gray-600 hover:border-white hover:bg-white hover:text-black transition-all duration-300 text-white">
        <span class="text-sm font-medium">Join Our Community</span>
        <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" class="w-4 h-4 group-hover:translate-x-1 transition-transform">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </button>
    </form>
    <div class="flex items-center gap-4 mt-8">
      <div class="w-12 h-12 border border-gray-600 rounded-full flex items-center justify-center">
        <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" class="w-5 h-5 text-gray-400">
          <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
          <path d="m9 12 2 2 4-4"></path>
        </svg>
      </div>
      <div>
        <p class="text-sm font-medium text-white">Privacy Protected</p>
        <p class="text-xs text-gray-500">We never share your information</p>
      </div>
    </div>
  </div>
</div>