opencare/templates/index.html

{% extends "base.html" %}
{% block title %}OpenCare — Santé personnalisée basée sur les preuves{% endblock %}
{% block content %}

<section class="hero-section py-5">
  <div class="container py-3">
    <div class="row align-items-center gy-5">
      <div class="col-lg-6">
        <span class="badge rounded-pill bg-accent-light text-accent mb-3 px-3 py-2">
          <i class="fas fa-microscope me-1"></i>Evidence-based medicine
        </span>
        <h1 class="display-4 fw-bold lh-sm mb-4">
          Votre santé,<br><span class="text-gradient">vraiment personnalisée</span>
        </h1>
        <p class="lead text-muted mb-4">
          OpenCare synthétise des milliers d'études scientifiques et les traduit en recommandations concrètes, adaptées à <strong>votre profil unique</strong> : âge, génétique, mode de vie et objectifs.
        </p>
        <div class="d-flex flex-wrap gap-3">
          <a href="{{ url_for('register') }}" class="btn btn-primary btn-lg px-4 shadow">
            <i class="fas fa-rocket me-2"></i>Commencer gratuitement
          </a>
          <a href="#domains" class="btn btn-outline-secondary btn-lg px-4">
            Découvrir les domaines
          </a>
        </div>
        <div class="mt-4 d-flex flex-wrap gap-4 text-muted small">
          <span><i class="fas fa-lock me-1 text-success"></i>Données locales</span>
          <span><i class="fas fa-flask me-1 text-primary"></i>Sources PubMed</span>
          <span><i class="fas fa-user-md me-1 text-warning"></i>Pas de diagnostic</span>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="hero-visual d-flex flex-wrap gap-3 justify-content-center">
          {% for item in [
            ('🧬', 'Génétique & origines'),
            ('🥗', 'Nutrition ciblée'),
            ('⏱️', 'Jeûne intermittent'),
            ('💪', 'Exercice optimal'),
            ('😴', 'Sommeil réparateur'),
            ('🦠', 'Microbiote'),
          ] %}
          <div class="hero-pill">
            <span class="hero-pill-icon">{{ item[0] }}</span>
            <span class="hero-pill-text">{{ item[1] }}</span>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

<section class="stats-bar py-4 bg-white border-top border-bottom">
  <div class="container">
    <div class="row text-center g-4">
      <div class="col-4">
        <div class="stat-item">
          <div class="stat-num text-primary">25+</div>
          <div class="stat-lbl">Recommandations</div>
        </div>
      </div>
      <div class="col-4">
        <div class="stat-item">
          <div class="stat-num text-primary">6</div>
          <div class="stat-lbl">Domaines couverts</div>
        </div>
      </div>
      <div class="col-4">
        <div class="stat-item">
          <div class="stat-num text-primary">100%</div>
          <div class="stat-lbl">Sources citées</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="domains" class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="fw-bold">Domaines de santé couverts</h2>
      <p class="text-muted">Chaque recommandation est filtrée selon votre profil et sourcée scientifiquement.</p>
    </div>
    <div class="row g-4">
      {% for icon, title, desc, color in [
        ('🥗', 'Alimentation', 'Régimes, macronutriments, aliments fonctionnels, intolérances alimentaires.', 'green'),
        ('⏱️', 'Jeûne intermittent', 'Protocoles 14/10, 16/8, 5:2 — adaptés à votre activité et objectifs.', 'teal'),
        ('💪', 'Exercice', 'Cardio zone 2, musculation, HIIT, mobilité — selon votre niveau actuel.', 'blue'),
        ('😴', 'Sommeil', 'Durée, hygiène du sommeil, chronotype, gestion du stress nocturne.', 'indigo'),
        ('💚', 'Gestion du stress', 'Cohérence cardiaque, méditation MBSR, techniques validées cliniquement.', 'emerald'),
        ('💊', 'Suppléments', 'Vitamine D, oméga-3, magnésium, probiotiques — selon vos déficits réels.', 'amber'),
      ] %}
      <div class="col-md-4">
        <div class="domain-card card h-100 border-0 shadow-sm">
          <div class="card-body p-4">
            <div class="domain-icon mb-3">{{ icon }}</div>
            <h5 class="fw-bold mb-2">{{ title }}</h5>
            <p class="text-muted small mb-0">{{ desc }}</p>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="how-it-works py-5 bg-light">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="fw-bold">Comment ça fonctionne</h2>
    </div>
    <div class="row g-4 text-center">
      {% for n, icon, title, desc in [
        (1, 'fas fa-user-plus', 'Créez votre compte', 'Inscription simple et rapide, données stockées localement.'),
        (2, 'fas fa-clipboard-list', 'Remplissez votre profil', 'Âge, poids, antécédents, mode de vie, objectifs — 7 sections.'),
        (3, 'fas fa-brain', 'Recevez vos recommandations', 'Le moteur croise vos données avec les publications scientifiques.'),
      ] %}
      <div class="col-md-4">
        <div class="step-card">
          <div class="step-num">{{ n }}</div>
          <i class="{{ icon }} fa-2x text-primary mb-3"></i>
          <h5 class="fw-bold">{{ title }}</h5>
          <p class="text-muted small">{{ desc }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
    <div class="text-center mt-5">
      <a href="{{ url_for('register') }}" class="btn btn-primary btn-lg px-5">
        <i class="fas fa-arrow-right me-2"></i>Commencer maintenant
      </a>
    </div>
  </div>
</section>

{% endblock %}