Stats & Logos

<%# Variant 1: 4-column numbers — simple row of 4 big stat numbers with labels %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Trusted by teams worldwide
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Our platform powers collaboration for thousands of organizations, from startups to enterprises.
      </p>
    </div>

    <div class="mt-16 grid grid-cols-2 gap-8 lg:grid-cols-4">
      <% [
        { value: "10,000+", label: "Active teams" },
        { value: "2.4M", label: "Projects created" },
        { value: "99.99%", label: "Uptime SLA" },
        { value: "150+", label: "Countries served" }
      ].each do |stat| %>
        <div class="text-center">
          <p class="text-foreground text-4xl font-bold tracking-tight sm:text-5xl"><%= stat[:value] %></p>
          <p class="text-muted-foreground mt-2 text-sm font-medium"><%= stat[:label] %></p>
        </div>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 2: With icons — stats with icons above each number %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl text-center">
      <%= ui.badge "By the numbers", variant: :info, rounded: true %>
      <h2 class="text-foreground mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
        Built for scale, designed for speed
      </h2>
    </div>

    <div class="mt-16 grid grid-cols-2 gap-8 lg:grid-cols-4">
      <% [
        { icon: "users", value: "50,000+", label: "Active users" },
        { icon: "globe-alt", value: "120+", label: "Countries" },
        { icon: "clock", value: "99.9%", label: "Uptime" },
        { icon: "chat-bubble-left-right", value: "4.9/5", label: "Customer rating" }
      ].each do |stat| %>
        <div class="flex flex-col items-center text-center">
          <div class="flex size-12 items-center justify-center rounded-lg bg-primary/10">
            <%= ui.icon stat[:icon], size: 6, class: "text-primary" %>
          </div>
          <p class="text-foreground mt-4 text-3xl font-bold tracking-tight sm:text-4xl"><%= stat[:value] %></p>
          <p class="text-muted-foreground mt-2 text-sm font-medium"><%= stat[:label] %></p>
        </div>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 3: In cards — each stat in its own card, using the stat component %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Platform metrics
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Real-time performance data from our infrastructure and community.
      </p>
    </div>

    <div class="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
      <%= ui.stat do %>
        <%= ui.stat_icon "users" %>
        <%= ui.stat_label "Active Users" %>
        <%= ui.stat_value "24,500" %>
        <%= ui.stat_description "+12.3% from last month", variant: :success %>
      <% end %>

      <%= ui.stat do %>
        <%= ui.stat_icon "document" %>
        <%= ui.stat_label "Projects Created" %>
        <%= ui.stat_value "1.2M" %>
        <%= ui.stat_description "+8.1% from last month", variant: :success %>
      <% end %>

      <%= ui.stat do %>
        <%= ui.stat_icon "clock" %>
        <%= ui.stat_label "Avg. Response Time" %>
        <%= ui.stat_value "45ms" %>
        <%= ui.stat_description "-15% from last week", variant: :success %>
      <% end %>

      <%= ui.stat do %>
        <%= ui.stat_icon "star" %>
        <%= ui.stat_label "Satisfaction Score" %>
        <%= ui.stat_value "4.9/5" %>
        <%= ui.stat_description "Based on 12,000 reviews" %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 4: Split stats + text — description on left, stat grid 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>
        <%= ui.badge "Our Impact", variant: :info, rounded: true %>
        <h2 class="text-foreground mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
          Helping teams deliver faster, together
        </h2>
        <p class="text-muted-foreground mt-6 text-lg leading-relaxed">
          Since launching in 2021, we have helped thousands of engineering teams reduce their deployment time, improve code quality, and collaborate more effectively across time zones.
        </p>
        <div class="mt-8">
          <%= ui.btn size: :lg, url: "#" do %>
            Read our story
            <%= ui.icon "arrow-right", size: 5 %>
          <% end %>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-6">
        <% [
          { value: "10,000+", label: "Teams onboarded", description: "+2,400 this quarter" },
          { value: "3.5M", label: "Deployments", description: "Across all customers" },
          { value: "58%", label: "Faster releases", description: "Average improvement" },
          { value: "99.99%", label: "Uptime", description: "Over the past 12 months" }
        ].each do |stat| %>
          <div class="rounded-lg border border-border bg-background p-6">
            <p class="text-foreground text-3xl font-bold tracking-tight"><%= stat[:value] %></p>
            <p class="text-foreground mt-2 text-sm font-semibold"><%= stat[:label] %></p>
            <p class="text-muted-foreground mt-1 text-xs"><%= stat[:description] %></p>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</section>