Newsletter

<%# Variant 1: Centered simple — centered headline, subtitle, email input + button %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-2xl px-6 text-center">
    <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
      Stay up to date
    </h2>
    <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
      Get the latest product updates, engineering insights, and company news delivered straight to your inbox. No spam, unsubscribe anytime.
    </p>
    <%= form_with url: root_path, class: "mt-8 !flex-row justify-center !gap-0" do |f| %>
      <%= ui.group do %>
        <%= f.email_field :email, label: false, placeholder: "Enter your email address" %>
        <%= ui.btn do %>
          Subscribe
          <%= ui.icon "paper-airplane", size: 5 %>
        <% end %>
      <% end %>
    <% end %>
    <p class="text-muted-foreground mt-4 text-xs">
      We care about your data. Read our
      <a href="#" class="text-foreground underline underline-offset-4 hover:text-primary">privacy policy</a>.
    </p>
  </div>
</section>

<%# Variant 2: Split layout — text on left, form on right %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
      <div>
        <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
          Subscribe to our newsletter
        </h2>
        <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
          Join over 10,000 subscribers who receive weekly insights on product development, design systems, and scaling engineering teams.
        </p>
        <ul class="mt-6 space-y-3">
          <li class="flex items-center gap-2">
            <%= ui.icon "check-circle", size: 5, class: "text-primary" %>
            <span class="text-muted-foreground text-sm">Weekly curated content from our engineering blog</span>
          </li>
          <li class="flex items-center gap-2">
            <%= ui.icon "check-circle", size: 5, class: "text-primary" %>
            <span class="text-muted-foreground text-sm">Early access to new features and beta programs</span>
          </li>
          <li class="flex items-center gap-2">
            <%= ui.icon "check-circle", size: 5, class: "text-primary" %>
            <span class="text-muted-foreground text-sm">Exclusive invites to webinars and live events</span>
          </li>
        </ul>
      </div>

      <div class="lg:pl-12">
        <%= form_with url: root_path, class: "flex flex-col gap-4" do |f| %>
          <%= f.text_field :name, label: "Full name", placeholder: "Jane Doe" %>
          <%= f.email_field :email, label: "Email address", placeholder: "jane@example.com" %>
          <%= ui.btn "Subscribe", block: true %>
          <p class="text-muted-foreground text-xs">
            No spam. Unsubscribe at any time.
          </p>
        <% end %>
      </div>
    </div>
  </div>
</section>

<%# Variant 3: Card style — newsletter signup wrapped in a card with icon %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-2xl px-6">
    <%= ui.card do %>
      <%= ui.card_body class: "flex flex-col items-center text-center gap-6 p-8 sm:p-12" do %>
        <div class="flex size-14 items-center justify-center rounded-full bg-primary/10">
          <%= ui.icon "envelope", size: 7, class: "text-primary" %>
        </div>
        <div>
          <h2 class="text-foreground text-2xl font-bold tracking-tight sm:text-3xl">
            Get notified when we launch
          </h2>
          <p class="text-muted-foreground mt-3 text-base leading-relaxed">
            We are building something new. Be the first to know when it is ready. Drop your email and we will keep you posted on our progress.
          </p>
        </div>
        <%= form_with url: root_path, class: "w-full sm:max-w-md !gap-0" do |f| %>
          <%= ui.group do %>
            <%= f.email_field :email, label: false, placeholder: "you@example.com" %>
            <%= ui.btn do %>
              Notify me
              <%= ui.icon "bell", size: 5 %>
            <% end %>
          <% end %>
        <% end %>
        <p class="text-muted-foreground text-xs">
          Join 3,200+ subscribers. We send updates once a month.
        </p>
      <% end %>
    <% end %>
  </div>
</section>