<div class="mfw-site">
  <Header
    title="Sentropic"
    navItems={[{"label":"Produit","href":"#"},{"label":"Tarifs","href":"#","active":true},{"label":"Docs","href":"#"}]}
  />
  <section class="mfw-hero">
    <div class="mfw-container">
      <h1 class="mfw-hero-title">Tarification simple</h1>
      <p class="mfw-hero-lead">Des forfaits clairs pour chaque étape de votre croissance. Aucune surprise en fin de mois.</p>
    </div>
  </section>
  <section class="mfw-plans-section">
    <div class="mfw-container">
      <div class="mfw-plans-grid">
        <Card class="mfw-plan-card">
          <div class="mfw-plan-header">
            <span class="mfw-plan-name">Starter</span>
          </div>
          <p class="mfw-plan-price">0 $ / mois</p>
          <p class="mfw-plan-desc">Pour les équipes qui démarrent.</p>
          <ul class="mfw-plan-features">
            <li>5 utilisateurs</li>
            <li>10 projets</li>
            <li>Assistance par e-mail</li>
          </ul>
        </Card>
        <Card class="mfw-plan-card mfw-plan-card--highlight">
          <div class="mfw-plan-header">
            <span class="mfw-plan-name">Pro</span>
            <Badge tone="brand">Populaire</Badge>
          </div>
          <p class="mfw-plan-price">49 $ / mois</p>
          <p class="mfw-plan-desc">Pour les équipes en croissance.</p>
          <ul class="mfw-plan-features">
            <li>50 utilisateurs</li>
            <li>Projets illimités</li>
            <li>Assistance prioritaire</li>
          </ul>
        </Card>
        <Card class="mfw-plan-card">
          <div class="mfw-plan-header">
            <span class="mfw-plan-name">Entreprise</span>
          </div>
          <p class="mfw-plan-price">Sur devis</p>
          <p class="mfw-plan-desc">Pour les grandes organisations.</p>
          <ul class="mfw-plan-features">
            <li>Utilisateurs illimités</li>
            <li>SSO / SAML</li>
            <li>SLA garanti</li>
          </ul>
        </Card>
      </div>
    </div>
  </section>
  <Footer
    brand="Sentropic"
    columns={[{"title":"Produit","links":[{"label":"Composants","href":"#"},{"label":"Tokens","href":"#"},{"label":"Thèmes","href":"#"}]},{"title":"Entreprise","links":[{"label":"À propos","href":"#"},{"label":"Blog","href":"#"},{"label":"Contact","href":"#"}]},{"title":"Légal","links":[{"label":"Conditions","href":"#"},{"label":"Confidentialité","href":"#"}]}]}
    copyright="© 2026 Sentropic. Tous droits réservés."
  />
</div>