Team Sections

<%# Variant 1: Grid with avatars — 4-column grid of team cards with avatar, name, role %>
<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 "Our Team", variant: :info, rounded: true %>
      <h2 class="text-foreground mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
        Meet the people behind the product
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        A diverse group of builders, designers, and thinkers dedicated to making your work easier.
      </p>
    </div>

    <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
      <% [
        { name: "Sarah Chen", role: "CEO & Co-founder" },
        { name: "Marcus Johnson", role: "CTO & Co-founder" },
        { name: "Elena Rodriguez", role: "Head of Design" },
        { name: "David Kim", role: "Head of Engineering" },
        { name: "Aisha Patel", role: "Product Manager" },
        { name: "Tom Wilson", role: "Lead Developer" },
        { name: "Mia Thompson", role: "UX Researcher" },
        { name: "James Lee", role: "DevOps Engineer" }
      ].each do |member| %>
        <div class="flex flex-col items-center text-center">
          <%= ui.avatar size: 20 %>
          <h3 class="text-foreground mt-4 text-base font-semibold"><%= member[:name] %></h3>
          <p class="text-muted-foreground mt-1 text-sm"><%= member[:role] %></p>
        </div>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 2: 3-column with bio — larger cards with avatar, name, role, short bio text %>
<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">
        Leadership team
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Experienced leaders who have built and scaled products used by millions of people worldwide.
      </p>
    </div>

    <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      <% [
        { name: "Sarah Chen", role: "CEO & Co-founder", bio: "Former VP of Product at Stripe. Sarah has spent 15 years building developer tools and scaling engineering organizations from startup to IPO." },
        { name: "Marcus Johnson", role: "CTO & Co-founder", bio: "Previously a principal engineer at Google Cloud. Marcus leads our technical vision and ensures we build infrastructure that scales reliably." },
        { name: "Elena Rodriguez", role: "Head of Design", bio: "Award-winning designer who led design systems at Figma. Elena shapes the product experience and champions user-centered thinking across the team." },
        { name: "David Kim", role: "Head of Engineering", bio: "Former engineering lead at Vercel. David drives technical excellence across our platform, from the frontend experience to backend infrastructure." },
        { name: "Aisha Patel", role: "VP of Marketing", bio: "Growth leader who scaled acquisition at Notion. Aisha oversees brand strategy, content, and demand generation to reach new audiences." },
        { name: "Tom Wilson", role: "VP of Sales", bio: "Enterprise sales veteran with a decade at Salesforce. Tom leads our go-to-market strategy and builds relationships with our largest customers." }
      ].each do |member| %>
        <%= ui.card do %>
          <%= ui.card_body class: "flex flex-col items-center text-center gap-4" do %>
            <%= ui.avatar size: 20 %>
            <div>
              <h3 class="text-foreground text-base font-semibold"><%= member[:name] %></h3>
              <p class="text-primary mt-1 text-sm font-medium"><%= member[:role] %></p>
            </div>
            <p class="text-muted-foreground text-sm leading-relaxed"><%= member[:bio] %></p>
          <% end %>
        <% end %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 3: Compact list — horizontal list/row of team members, minimal info %>
<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">
        Built by a world-class team
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Engineers, designers, and operators from leading technology companies.
      </p>
    </div>

    <div class="mt-16 flex flex-wrap items-center justify-center gap-10 lg:gap-16">
      <% [
        { name: "Sarah Chen", role: "CEO" },
        { name: "Marcus Johnson", role: "CTO" },
        { name: "Elena Rodriguez", role: "Design" },
        { name: "David Kim", role: "Engineering" },
        { name: "Aisha Patel", role: "Product" },
        { name: "Tom Wilson", role: "Sales" }
      ].each do |member| %>
        <div class="flex items-center gap-3">
          <%= ui.avatar size: 12 %>
          <div>
            <p class="text-foreground text-sm font-semibold"><%= member[:name] %></p>
            <p class="text-muted-foreground text-xs"><%= member[:role] %></p>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 4: Featured + grid — one large featured member + grid of smaller ones %>
<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">
        Our team
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Passionate people building the future of collaboration.
      </p>
    </div>

    <div class="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-2">
      <%# Featured member %>
      <%= ui.card do %>
        <%= ui.card_body class: "flex flex-col items-center text-center gap-6 p-8" do %>
          <%= ui.avatar size: 28 %>
          <div>
            <h3 class="text-foreground text-xl font-bold">Sarah Chen</h3>
            <p class="text-primary mt-1 text-sm font-medium">CEO & Co-founder</p>
          </div>
          <p class="text-muted-foreground text-sm leading-relaxed max-w-md">
            Sarah founded Acme in 2021 with a mission to make professional tools accessible to every team. Before Acme, she spent a decade building developer platforms at Stripe and led a 200-person product organization.
          </p>
          <div class="flex items-center gap-3">
            <a href="#" class="text-muted-foreground hover:text-foreground transition">
              <%= ui.icon "github", size: 5 %>
            </a>
            <a href="#" class="text-muted-foreground hover:text-foreground transition">
              <%= ui.icon "globe-alt", size: 5 %>
            </a>
          </div>
        <% end %>
      <% end %>

      <%# Grid of other members %>
      <div class="grid grid-cols-2 gap-8 content-center">
        <% [
          { name: "Marcus Johnson", role: "CTO" },
          { name: "Elena Rodriguez", role: "Head of Design" },
          { name: "David Kim", role: "Head of Engineering" },
          { name: "Aisha Patel", role: "Product Manager" },
          { name: "Tom Wilson", role: "Lead Developer" },
          { name: "Mia Thompson", role: "UX Researcher" }
        ].each do |member| %>
          <div class="flex flex-col items-center text-center">
            <%= ui.avatar size: 16 %>
            <h3 class="text-foreground mt-3 text-sm font-semibold"><%= member[:name] %></h3>
            <p class="text-muted-foreground mt-1 text-xs"><%= member[:role] %></p>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</section>