TeamGridFeatured Sections

---
interface TeamMember { name: string; image: string; }
interface Props {
  eyebrow?: string;
  heading?: string;
  featuredTitle: string;
  featuredBody: string;
  featuredCta?: string;
  members: TeamMember[];
}
const {
  eyebrow = 'Ons team',
  heading = 'Maak kennis met onze experts',
  featuredTitle,
  featuredBody,
  featuredCta = 'Bekijk meer',
  members,
} = Astro.props;
---
<section class="tgf">
  <div class="tgf-container">
    <div class="tgf-head">
      <span class="tgf-eyebrow">{eyebrow}</span>
      <h2>{heading}</h2>
    </div>

    <div class="tgf-grid">
      <article class="tgf-feature">
        <div class="tgf-feature-body">
          <h3>{featuredTitle}</h3>
          <p>{featuredBody}</p>
        </div>
        <a href="#" class="tgf-cta">{featuredCta}</a>
        <svg class="tgf-leaf" viewBox="0 0 100 100" aria-hidden="true">
          <path d="M50 10 C58 28, 72 32, 90 30 C72 38, 68 52, 70 70 C56 56, 42 56, 28 70 C30 52, 26 38, 8 30 C26 32, 40 28, 50 10 Z" fill="#ffffff" opacity="0.55"/>
          <circle cx="50" cy="46" r="6" fill="#ffffff"/>
        </svg>
      </article>

      {members.map((m) => (
        <article class="tgf-member">
          <div class="tgf-img" style={`background-image: url('${m.image}')`} aria-label={m.name}></div>
          <div class="tgf-foot">
            <span>{m.name}</span>
            <a href="#">Lees meer →</a>
          </div>
        </article>
      ))}
    </div>
  </div>
</section>

<style>
  .tgf {
    --ink: #131313;
    --ink-2: #2d2d2d;
    --ink-3: #464646;
    --accent: #ecf86e;
    --white: #ffffff;
    --radius: 28px;
    --pill: 999px;
    padding-block: clamp(48px, 8vw, 96px);
    background: #f4f4f2;
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
  }
  .tgf-container { max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
  .tgf-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }
  .tgf-eyebrow { font-size: 15px; color: var(--ink-3); }
  .tgf-head h2 { font-size: clamp(36px, 5.5vw, 64px); font-weight: 500; letter-spacing: -0.025em; margin: 0; }
  .tgf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .tgf-feature, .tgf-member { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; position: relative; }
  .tgf-feature {
    background: var(--accent); padding: 32px;
    display: flex; flex-direction: column; justify-content: space-between;
    color: var(--ink);
  }
  .tgf-feature h3 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 16px; }
  .tgf-feature p { font-size: 15px; color: var(--ink-2); max-width: 280px; line-height: 1.55; margin: 0; }
  .tgf-cta {
    align-self: flex-start; z-index: 1; position: relative;
    background: var(--ink); color: var(--white);
    padding: 14px 26px; border-radius: var(--pill); text-decoration: none; font-size: 15px; font-weight: 500;
  }
  .tgf-leaf { position: absolute; bottom: -40px; right: -40px; width: 220px; height: 220px; pointer-events: none; }
  .tgf-member { background: #d6dbe0; display: flex; flex-direction: column; }
  .tgf-img { flex: 1; background-size: cover; background-position: center top; }
  .tgf-foot {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
    color: var(--white); font-size: 14px;
  }
  .tgf-foot a { color: var(--white); text-decoration: none; }
  @media (max-width: 1080px) { .tgf-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px)  { .tgf-grid { grid-template-columns: 1fr; } .tgf-feature, .tgf-member { aspect-ratio: 4/5; } }
</style>