<%# 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>