Call to Action

<%# Variant 1: Simple centered — headline + subtitle + single CTA button %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-3xl px-6 text-center">
    <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
      Ready to transform your workflow?
    </h2>
    <p class="text-muted-foreground mx-auto mt-6 max-w-2xl text-lg leading-relaxed">
      Join thousands of teams who have already streamlined their processes and boosted productivity. Start your free trial today.
    </p>
    <div class="mt-10">
      <%= ui.btn size: :lg, url: "#" do %>
        Get started for free
        <%= ui.icon "arrow-right", size: 5 %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 2: With background — bg-muted section with bold headline and 2 buttons %>
<section class="bg-muted py-16 lg:py-24">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
      Start building something amazing
    </h2>
    <p class="text-muted-foreground mx-auto mt-6 max-w-2xl text-lg leading-relaxed">
      Whether you are a startup finding product-market fit or an enterprise scaling globally, our platform adapts to your needs.
    </p>
    <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
      <%= ui.btn size: :lg, url: "#" do %>
        Start free trial
        <%= ui.icon "arrow-right", size: 5 %>
      <% end %>
      <%= ui.btn "Schedule a demo", variant: :outline, size: :lg, url: "#" %>
    </div>
    <p class="text-muted-foreground mt-6 text-sm">
      No credit card required. 14-day free trial.
    </p>
  </div>
</section>

<%# Variant 3: Split CTA — text on left, email input + button on right %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-6xl px-6">
    <div class="flex flex-col items-center gap-10 lg:flex-row lg:justify-between">
      <div class="max-w-xl text-center lg:text-left">
        <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
          Stay ahead of the curve
        </h2>
        <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
          Get weekly insights on product development, design systems, and engineering best practices delivered straight to your inbox.
        </p>
      </div>
      <div class="w-full max-w-md">
        <%= form_with url: root_path, class: "!gap-0" do |f| %>
          <%= ui.group do %>
            <%= f.email_field :email, label: false, placeholder: "Enter your email" %>
            <%= ui.btn size: :lg do %>
              Subscribe
              <%= ui.icon "envelope", size: 5 %>
            <% end %>
          <% end %>
        <% end %>
        <p class="text-muted-foreground mt-3 text-sm">
          We respect your privacy. Unsubscribe at any time.
        </p>
      </div>
    </div>
  </div>
</section>

<%# Variant 4: Banner style — narrow horizontal banner with text and CTA inline %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-6xl px-6">
    <div class="bg-muted border-border flex flex-col items-center justify-between gap-6 rounded-lg border px-8 py-6 sm:flex-row">
      <div class="flex items-center gap-4 text-center sm:text-left">
        <div class="hidden sm:block">
          <%= ui.icon "rocket-launch", size: 8, class: "text-primary" %>
        </div>
        <div>
          <h3 class="text-foreground text-lg font-semibold">
            Ready to launch your next project?
          </h3>
          <p class="text-muted-foreground mt-1 text-sm">
            Get up and running in under 5 minutes with our quickstart guide.
          </p>
        </div>
      </div>
      <%= ui.btn size: :md, url: "#" do %>
        Get started
        <%= ui.icon "arrow-right", size: 5 %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 5: With stats — CTA section with 3 stat numbers above the button %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
      Trusted by developers worldwide
    </h2>
    <p class="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg leading-relaxed">
      Our platform powers the next generation of web applications. See why teams choose us.
    </p>

    <div class="border-border mx-auto mt-12 grid max-w-3xl grid-cols-1 gap-8 border-y py-10 sm:grid-cols-3">
      <div>
        <p class="text-primary text-4xl font-bold">10K+</p>
        <p class="text-muted-foreground mt-2 text-sm font-medium">Active teams</p>
      </div>
      <div>
        <p class="text-primary text-4xl font-bold">99.9%</p>
        <p class="text-muted-foreground mt-2 text-sm font-medium">Uptime SLA</p>
      </div>
      <div>
        <p class="text-primary text-4xl font-bold">2.5M</p>
        <p class="text-muted-foreground mt-2 text-sm font-medium">Deployments per month</p>
      </div>
    </div>

    <div class="mt-10">
      <%= ui.btn size: :lg, url: "#" do %>
        Join these teams
        <%= ui.icon "arrow-right", size: 5 %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 6: Card CTA — CTA wrapped in a card with icon and description %>
<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 gap-6 p-10 text-center" do %>
        <div class="bg-muted flex size-16 items-center justify-center rounded-full">
          <%= ui.icon "sparkles", size: 8, class: "text-primary" %>
        </div>
        <div>
          <h3 class="text-foreground text-2xl font-bold">
            Upgrade to Pro
          </h3>
          <p class="text-muted-foreground mx-auto mt-3 max-w-md text-base leading-relaxed">
            Unlock advanced analytics, priority support, and unlimited team members. Everything you need to scale your business.
          </p>
        </div>
        <div class="flex flex-col items-center gap-3 sm:flex-row">
          <%= ui.btn size: :lg, url: "#" do %>
            Upgrade now
            <%= ui.icon "arrow-right", size: 5 %>
          <% end %>
          <%= ui.btn "Compare plans", variant: :ghost, size: :lg, url: "#" %>
        </div>
      <% end %>
    <% end %>
  </div>
</section>