{{ template "headersMenu.html" . }}
  
<section class="overflow-hidden relative py-2" id="home">

  <div class="container relative">
      <div class="grid relative grid-cols-1 items-center min-h-screen-250 md:grid-cols-2">
          <div class="ltr:md:mr-6 rtl:md:ml-6">
              <h4 class="mb-2 text-3xl font-bold text-black md:text-3xl lg:text-4xl dark:text-white">{{"Nouvelle version !" | t }}<br/><span class="relative text-indigo-600 after:absolute ltr:after:right-0 rtl:after:left-0 ltr:after:left-0 rtl:after:right-0 after:bottom-3 after:-rotate-6 after:h-2 after:w-auto after:rounded-md after:bg-indigo-600/20">{{ "Votre carte de visite a évolué et devient votre média personnel complet." | t }}</span></h4>
              
              <p class="my-4 max-w-xl text-sm font-normal md:text-lg">{{ "Adapté aux freelances comme les grands groupes." | t }}<br/>{{ "PWA responsives - Aucune application à installer." | t }}</p>
              <div class="block mt-6">
                  <a href="#metamorphose" up-follow class="block px-4 py-3 mb-2 text-xl text-left rounded-lg border-gray-200 dark:border-indigo-600 border-2 dark:text-white dark:bg-black hover:bg-indigo-600 hover:text-white hover:border-indigo-600"><i class="float-right mt-1 fa fa-chevron-right"></i> {{ "Voir ce qui change" | t }}</a>
              </div>                
          </div>

          <div class="block relative py-4 md:block">
              <img src="/cdn/apps/studio/illus3.webp" class="hidden mx-auto dark:inline-block" alt="">
              <img src="/cdn/apps/studio/illus3.webp" class="inline-block mx-auto dark:hidden" alt="">
          </div>
          <!--
          <div class="hidden relative py-12 md:block">
              <img src="//datamix.media/fredj-dark.png" class="hidden mx-auto dark:inline-block" alt="">
              <img src="//datamix.media/fredj-light.png" class="inline-block mx-auto dark:hidden" alt="">
          </div>
          -->
      </div>
      
  </div>
  

  <div class="container mt-4">
      <ul class="mb-4 ml-2 text-sm list-none text-center text-amber-400 md:block float-dir">
          <li class="inline text-2xl">
              <a href="/reviews" class="font-bold uppercase">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
              </a>
          </li>
          <li class="block"><a href="/reviews" class="font-bold uppercase">{{ "Voir les avis client" | t}}</a></li>
      </ul>
      <p>
          <span class="text-sm font-bold text-left md:block md:text-2xl text-slate">{{ "Des millers d'entreprises utilisent nos services" | t }}</span><span class="hidden mb-3 text-sm text-left text-slate md:text-md md:inline-block">, {{ "avec les exigences les plus élevées en matière de protection et de sécurité des données" | t }}</span>.
      </p>
  </div>

  <div class="container my-4">
      <div class="grid md:grid-cols-6 grid-cols-2 justify-center gap-[30px]">

          <div class="py-4 mx-auto">
              <a href="/laposte">
                  <img src="https://datamix.media/datamix.io/enseigne/993280b78406d869b0fbaff741bf446d.png" class="h-8" alt="">
              </a>
          </div>

          <div class="py-4 mx-auto">
              <a href="/iad">
                  <img src="https://datamix.media/datamix.io/enseigne/614736951044b71a9fc163e2b1e4ec41.png" class="h-8" alt="">
              </a>
          </div>

          <div class="py-4 mx-auto">
              <a href="/allianz">
                  <img src="https://datamix.media/datamix.io/enseigne/0a0a130954b04c65108c06f502db03da.png" class="block h-8 dark:hidden" alt="">
                  <img src="https://datamix.media/datamix.io/enseigne/0a0a130954b04c65108c06f502db03da.png" style="filter:invert(1) contrast(5) !important" class="hidden h-8 dark:block" alt="">
              </a>
          </div>

          <div class="py-4 mx-auto">
              <a href="/orpi">
                  <img src="https://datamix.media/datamix.io/enseigne/d3b205c430f03536d4f3a4c19877d359.png" class="h-8" alt="">
              </a>
          </div>

          <div class="py-4 mx-auto">
              <a href="/century21">
                  <img src="https://datamix.media/datamix.io/enseigne/c6e164900819cde2aca4a31e904f3dd8.png" class="block h-8 dark:hidden" alt="">
                  <img src="https://datamix.media/datamix.io/enseigne/c6e164900819cde2aca4a31e904f3dd8.png" style="filter:invert(1) !important" class="hidden h-8 dark:block" alt="">
              </a>
          </div>

          <div class="py-4 mx-auto">
              <a href="/optimhome">
                  <img src="https://datamix.media/datamix.io/enseigne/ab678cf3832f7df97ddec2df09f89c88.png" class="h-8" alt="">
              </a>
          </div>

      </div>
      
  </div>

  <div class="container h-[50px]"></div>

  <div class="container h-[50px]"></div>

</section>

  <!-- Section 2 : La métamorphose -->
  <section id="metamorphose" class="py-32">
    <div class="container">
      <h2 class="mb-8 text-5xl font-bold">{{ "CARD.PM a 10 ans." | t }}</h2>
      <p class="mb-6 text-2xl">{{ "10 ans passés à vos côtés." | t }}<br/>{{ "Merci pour votre fidélité" | t }} ❤️ !<br/><br/>{{ "Aujourd’hui, une mue d'opère." | t }}</p>
      <h2 class="mt-8 mb-2 text-5xl font-bold text-left">{{ "À l'origine" | t }}</h2>
      <p class="max-w-3xl mx-auto text-lg">
        {{ "CARD.PM est né avec une idée simple : offrir aux entreprises un outil de présentation moderne, élégant et fonctionnel." | t }}
        {{ "Une alternative propre, sans tracking, au bullshit du tout-connecté." | t }}<br/>
        {{ "Depuis, plus de 6000 entreprises ont adopté la solution." | t }}
      </p>
      <h2 class="mt-8 mb-2 text-5xl font-bold text-left">{{ "10 ans de R&D plus tard." | t }}</h2>
      <p class="mx-auto mb-24 max-w-3xl text-lg">
        {{ "Au fil des projets spécifiques, ce qui n’était qu’une carte de visite s'est progressivement transformé en un hub d’identités vous permettant de :" | t }}
        <br/>✓ {{ "maîtriser votre image" | t }}<br/>✓ {{ "gérer vos équipes à l’échelle" | t }}<br/>✓ {{ "diffuser en toute sécurité" | t }}.
      </p>

      <div class="grid gap-16 md:grid-cols-2 py-10 gap-5">
        <div class="bg-gray-100 dark:bg-gray-800 p-8 rounded-2xl">
          <h3 class="mb-4 text-2xl font-semibold text-black dark:text-white">✅ Centralisation des profils</h3>
          <p class="text-gray-600 dark:text-gray-400">Pilotez tous vos collaborateurs depuis une interface unifiée. Compatible SSO.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-8 rounded-2xl">
          <h3 class="mb-4 text-2xl font-semibold text-black dark:text-white">🧾 Modules certifiables</h3>
          <p class="text-gray-600 dark:text-gray-400">Certificats, diplômes, documents RH, contrats signés… horodatés, intégrés et vérifiables sans login.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-8 rounded-2xl">
          <h3 class="mb-4 text-2xl font-semibold text-black dark:text-white">🎨 Branding à votre image</h3>
          <p class="text-gray-600 dark:text-gray-400">Vos couleurs. Vos polices. Votre style. Chaque carte reflète votre identité.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-8 rounded-2xl">
          <h3 class="mb-4 text-2xl font-semibold text-black dark:text-white">🔗 Connecté à PM.STUDIO</h3>
          <p class="text-gray-600 dark:text-gray-400">Accès direct à vos outils : FORM.PM, DOC.PM, LEADS.PM. Tout est interopérable.</p>
        </div>
      </div>
    </div>
  </section>

  <main id="hero" class="pt-20">
    <section class="section-spacing">
      <div class="container px-6 mx-auto text-center">
        <h1 class="mb-8 text-3xl font-bold leading-tight lg:text-6xl">L'ÉCOSYSTÈME PM.STUDIO <br>COMMENCE PAR CARD.PM</h1>
        <p class="mx-auto mb-12 max-w-3xl text-2xl lg:text-4xl gradient-text">Card.pm est votre carte de visite numérique. Point d'entrée de l'écosystème PM.studio. Centralisez et contrôlez vos informations professionnelles.</p>
        <div class="my-20">
          <div class="flex justify-center items-center h-96 illustration-placeholder">
            <p class="text-xl text-gray-500">Illustration: Écosystème PM interconnecté</p>
          </div>
        </div>
        <a href="#ecosystem" class="inline-block px-12 py-4 text-xl text-white bg-blue-600 rounded-full transition duration-300 hover:bg-blue-700">En savoir plus</a>
      </div>
    </section>
  
    <section id="ecosystem" class="section-spacing">
      <div class="container px-6 mx-auto">
        <h2 class="mb-16 text-5xl font-bold text-center">Cohérence et Contrôle</h2>
        <div class="grid gap-24 md:grid-cols-2">
          <div>
            <h3 class="mb-6 text-3xl font-semibold text-white">Design Unifié</h3>
            <p class="mb-8 text-xl font-bold text-white">Identité cohérente. <span class="font-light text-gray-600 transition hover:text-gray-400">Chaque module applique la même charte graphique.</span></p>
            <div class="flex justify-center items-center h-64 illustration-placeholder">
              <p class="text-gray-500">Illustration: Interface unifiée</p>
            </div>
          </div>
          <div>
            <h3 class="mb-6 text-3xl font-semibold text-white">Personnalisation Contrôlée</h3>
            <p class="mb-8 text-xl font-bold text-white">Personnalisation sous contrôle. <span class="font-light text-gray-600 transition hover:text-gray-400">Vous choisissez ce qui peut être modifié sans compromettre l'identité visuelle.</span></p>
            <div class="flex justify-center items-center h-64 illustration-placeholder">
              <p class="text-gray-500">Illustration: Options de personnalisation</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  
    <section id="sync" class="section-spacing">
      <div class="container px-6 mx-auto">
        <h2 class="mb-16 text-5xl font-bold text-center">Synchronisation en Temps Réel</h2>
        <div class="mx-auto max-w-4xl">
          <p class="mb-12 text-2xl text-center text-gray-400">La modification, la collaboration, le changement d'outil : tout est instantané.</p>
          <div class="flex justify-center items-center mb-12 h-96 illustration-placeholder">
            <p class="text-xl text-gray-500">Illustration: Synchronisation entre appareils et outils</p>
          </div>
          <ul class="space-y-8 text-xl">
            <li>
              <span class="font-semibold text-blue-400">✓ Mise à jour en temps réel :</span>
              <p class="mt-2 text-gray-400">Vos changements sont propagés instantanément sur tous vos appareils et modules.</p>
            </li>
            <li>
              <span class="font-semibold text-blue-400">✓ Collaboration en temps réel :</span>
              <p class="mt-2 text-gray-400">Vos collaborateurs voient les modifications en direct.</p>
            </li>
            <li>
              <span class="font-semibold text-blue-400">✓ Intégration transparente :</span>
              <p class="mt-2 text-gray-400">Basculez d'un module à l'autre sans rupture : vos données restent à jour.</p>
            </li>
          </ul>
        </div>
      </div>
    </section>
  
    <section id="ux" class="section-spacing">
      <div class="container px-6 mx-auto">
        <h2 class="mb-16 text-5xl font-bold text-center">Expérience Utilisateur</h2>
        <div class="grid gap-24 items-center md:grid-cols-2">
          <div>
            <h3 class="mb-6 text-3xl font-semibold gradient-text">Simplicité et Efficacité</h3>
            <p class="mb-8 text-xl text-gray-400">Chaque module est intuitif et facile à utiliser. Restez concentré sur votre travail, pas sur l'outil.</p>
            <ul class="space-y-4 text-xl text-gray-400">
              <li>✓ Interface épurée</li>
              <li>✓ Navigation fluide entre les modules</li>
              <li>✓ Prise en main rapide par toute l'équipe</li>
            </ul>
          </div>
          <div class="flex justify-center items-center h-96 illustration-placeholder">
            <p class="text-xl text-gray-500">Illustration: Interface utilisateur intuitive</p>
          </div>
        </div>
      </div>
    </section>
  
    <section id="privacy" class="section-spacing">
      <div class="container px-6 mx-auto">
        <h2 class="mb-16 text-5xl font-bold text-center">Garanties</h2>
        <div class="mx-auto max-w-4xl">
          <p class="mb-12 text-2xl text-center text-gray-400">Transparence et ouverture par conception.</p>
          <div class="flex justify-center items-center mb-12 h-96 illustration-placeholder">
            <p class="text-xl text-gray-500">Illustration: Sécurité et confidentialité des données</p>
          </div>
          <ul class="space-y-6 text-xl text-gray-400">
            <li><span class="text-2xl text-blue-400">✓</span> Pas de tracking.</li>
            <li><span class="text-2xl text-blue-400">✓</span> Aucune donnée partagée sans consentement.</li>
            <li><span class="text-2xl text-blue-400">✓</span> Certificats signés et horodatés. Vérifiables sans compte.</li>
            <li><span class="text-2xl text-blue-400">✓</span> Compatible SSO. OAuth2 possible.</li>
          </ul>
        </div>
      </div>
    </section>
  
    <section id="tools" class="bg-gray-900 section-spacing">
      <div class="container px-6 mx-auto">
        <h2 class="mb-16 text-5xl font-bold text-center">Les modules de PM.STUDIO<br><span class="gradient-text">Spécialisés et interopérables</span></h2>
        <p class="mx-auto mb-20 max-w-3xl text-2xl text-center text-gray-400">Des outils web spécialisés, conçus pour fonctionner ensemble.</p>
        <div class="grid gap-12 md:grid-cols-3">
          <div class="p-8 bg-gray-800 rounded-2xl transition duration-300 hover:bg-gray-700">
            <h3 class="mb-6 text-2xl font-semibold gradient-text"><img src="/cdn/design/logos/card-white.png" alt="" class="h-8"></h3>
            <p class="mb-8 text-gray-400">Carte de visite numérique. Échangez vos coordonnées sans passer par les réseaux sociaux.</p>
            <div class="flex justify-center items-center h-48 illustration-placeholder">
              <p class="text-gray-500">Card.pm</p>
            </div>
          </div>
          <div class="p-8 bg-gray-800 rounded-2xl transition duration-300 hover:bg-gray-700">
            <h3 class="mb-6 text-2xl font-semibold gradient-text"><img src="/cdn/design/logos/form-white.png" alt="" class="h-8"></h3>
            <p class="mb-8 text-gray-400">Formulaires en ligne sans complexité. Créez et partagez des formulaires sans aucune limite.</p>
            <div class="flex justify-center items-center h-48 illustration-placeholder">
              <p class="text-gray-500">Form.pm</p>
            </div>
          </div>
          <div class="p-8 bg-gray-800 rounded-2xl transition duration-300 hover:bg-gray-700">
            <h3 class="mb-6 text-2xl font-semibold gradient-text"><img src="/cdn/design/logos/flyer-white.png" alt="" class="h-8"></h3>
            <p class="mb-8 text-gray-400">Flyers numériques sans distraction. Mettez en avant vos événements, produits ou services sur des pages épurées.</p>
            <div class="flex justify-center items-center h-48 illustration-placeholder">
              <p class="text-gray-500">Flyer.pm</p>
            </div>
          </div>
        </div>
        <div class="mt-10 text-center">
          <a href="/settings/apps" class="inline-block px-12 py-4 text-xl font-semibold text-white bg-blue-600 rounded-full transition duration-300 hover:bg-blue-700">Toutes les applications</a>
        </div>
      </div>
    </section>
  
    <section id="pricing" class="section-spacing">
      <div class="container px-6 mx-auto">
        <h2 class="mb-16 text-5xl font-bold text-center">L'Abonnement Unique — Tout Compris</h2>
        <p class="mx-auto mb-20 max-w-3xl text-2xl text-center text-gray-400">Une seule offre donne accès à l'ensemble de l'écosystème PM.studio.</p>
        <div class="p-12 mx-auto max-w-2xl bg-gray-800 rounded-3xl shadow-2xl">
          <ul class="mb-12 space-y-6 text-xl">
            <li><span class="text-2xl text-blue-400">✓</span> Une licence pour tous les modules PM.studio.</li>
            <li><span class="text-2xl text-blue-400">✓</span> Utilisation illimitée, sans frais cachés.</li>
            <li><span class="text-2xl text-blue-400">✓</span> Partage avec plusieurs utilisateurs sans coût supplémentaire.</li>
            <li><span class="text-2xl text-blue-400">✓</span> Accès complet à l'ensemble des modules.</li>
          </ul>
          <div class="text-center">
            <a href="/signup" class="inline-block px-12 py-4 text-xl font-semibold text-white bg-blue-600 rounded-full transition duration-300 hover:bg-blue-700">S'abonner maintenant</a>
          </div>
        </div>
      </div>
    </section>
  </main>
  


  <!-- Section 4 : Promesse -->
  <section class="py-32">
    <div class="container px-6 mx-auto text-center">
      <h2 class="mb-12 text-5xl font-bold text-black dark:text-white">🤝 Notre promesse ne change pas</h2>
      <ul class="space-y-6 text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
        <li><strong class="text-blue-500">✓</strong> CARD.PM ne traque pas</li>
        <li><strong class="text-blue-500">✓</strong> CARD.PM ne vend rien</li>
        <li><strong class="text-blue-500">✓</strong> CARD.PM vous appartient</li>
      </ul>
      <p class="mt-12 text-2xl italic text-black dark:text-white">🦋 Le futur est personnel. Et vous l’avez déjà dans la poche.</p>
    </div>
  </section>

  <!-- Section 5 : Écosystème -->
  <section class="py-32">
    <div class="container px-6 mx-auto">
      <h2 class="mb-12 text-5xl font-bold text-center text-black dark:text-white">L’écosystème PM.STUDIO</h2>
      <p class="mx-auto mb-20 max-w-3xl text-2xl text-center text-gray-500">
        CARD.PM devient votre point d’entrée vers un environnement unifié.
        <br/>Vos formulaires, vos documents, vos contacts — synchronisés, simplifiés, souverains.
      </p>

      <div class="grid md:grid-cols-3 gap-12">
        <div class="text-center p-6 bg-gray-800 text-white rounded-xl">
          <h3 class="mb-4 text-xl font-bold"><img src="/cdn/design/logos/form-white.png" class="h-6 mx-auto mb-2">FORM.PM</h3>
          <p class="text-gray-400">Collecte RH, onboarding, formulaires dynamiques. Liés à chaque profil.</p>
        </div>
        <div class="text-center p-6 bg-gray-800 text-white rounded-xl">
          <h3 class="mb-4 text-xl font-bold"><img src="/cdn/design/logos/doc-white.png" class="h-6 mx-auto mb-2">DOC.PM</h3>
          <p class="text-gray-400">Partage de documents signés, certifiés, horodatés. Intégrés à la carte.</p>
        </div>
        <div class="text-center p-6 bg-gray-800 text-white rounded-xl">
          <h3 class="mb-4 text-xl font-bold"><img src="/cdn/design/logos/leads-white.png" class="h-6 mx-auto mb-2">LEADS.PM</h3>
          <p class="text-gray-400">Centralisez vos leads en RGPD natif. Fini les CRM flous et fouineurs.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Section 6 : Call To Action -->
  <section id="pricing" class="py-32 bg-gray-900 text-white">
    <div class="container px-6 mx-auto text-center">
      <h2 class="mb-12 text-5xl font-bold">L’abonnement simple. Rien d’autre.</h2>
      <p class="mx-auto mb-16 max-w-3xl text-xl text-gray-400">
        Une seule licence. Tous les outils. Aucun piège.
      </p>
      <ul class="mb-12 space-y-6 text-xl">
        <li><span class="text-2xl text-blue-400">✓</span> Une licence pour tous les PM</li>
        <li><span class="text-2xl text-blue-400">✓</span> Pas de limite d’usage</li>
        <li><span class="text-2xl text-blue-400">✓</span> Partageable avec votre équipe</li>
        <li><span class="text-2xl text-blue-400">✓</span> Accès illimité à CARD.PM, FORM.PM, DOC.PM, LEADS.PM…</li>
      </ul>
      <a href="/signup" class="inline-block px-12 py-4 text-xl font-semibold text-white bg-blue-600 rounded-full transition duration-300 hover:bg-blue-700">
        S’inscrire maintenant
      </a>
    </div>
  </section>

  <!-- Call To Action -->
  <section id="features" class="px-6 py-20 text-center text-white bg-indigo-600">
    <h2 class="mb-6 text-xl font-bold md:text-3xl">{{ "Essai gratuit 7 jours" | t }}</h2>
    <a href="/create" class="px-6 py-4 font-bold text-black bg-white rounded-full shadow-lg hover:bg-gray-100">
      {{ "Lancez votre CARD maintenant" | t }}
    </a>
    <p class="mt-6 text-sm text-white">{{ "Sans engagement. Pas de cookies. RGPD first." | t }}</p>
  </section>

{{ template "footerMenuDetails.html" . }}