{{ template "headersMenu.html" . }}

<section class="overflow-hidden relative pt-20" id="home">

    <div class="container relative py-2">
        <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="font-bold mb-2 text-3xl text-black md:text-3xl lg:text-4xl dark:text-white">{{"Un seul abonnement" | t }} <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">{{ "pour tous vos besoins numériques quotidiens." | t }}</span></h4>
                
                <p class="my-4 max-w-xl text-lg md:text-2xl">{{ " Une alternative souveraine, modulaire et sans commission pour tous, de l'enseigne multi-agence à l'indépendant." | t }}</p>
            </div>

            <div class="holder block relative py-4 md:block" style="mask-image: url('/cdn/apps/card/illus2.webp'); -webkit-mask-image: url('/cdn/apps/card/illus2.webp')">
                <img src="/cdn/apps/card/illus2.webp" class="hidden mx-auto dark:inline-block" alt="">
                <img src="/cdn/apps/card/illus2.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 class="relative animate-[spin_30s_linear_infinite] -z-1">
            <span class="relative after:absolute ltr:after:left-0 rtl:after:right-0 after:bottom-1/2 after:translate-y-1/2 after:h-2 after:w-8 after:rounded-md after:bg-indigo-600/20 after:z-10"></span>
            <span class="relative after:absolute ltr:after:left-0 rtl:after:right-0 after:bottom-1/2 after:translate-y-1/2 after:rotate-90 after:h-2 after:w-8 after:rounded-md after:bg-indigo-600/20 after:z-10"></span>
        </div>
        
    </div>

</section>

<div class="container">

  <!-- Hero 1 -->
  <section class="pt-20">
    <div class="grid md:grid-cols-2 gap-12 items-center">
      <div>
        <h2 class="text-2xl lg:text-3xl mb-4 text-indigo-600 uppercase">{{ "Pensé pour les pros." | t }}</h2>
        <p class="text-lg">{{ "Hébergement en Europe, modules activables à la carte, intégration Stripe native, marque blanche possible. Géré par nos soins, mais peut être déployé sur votre propre infra." | t }}</p>
      </div>
      <div class="order-2 md:order-1">
        <h2 class="text-2xl lg:text-3xl mb-4 text-indigo-600 uppercase">{{ "Remplacez 6 outils." | t }}</h2>
        <p class="text-lg">{{ "PERSONAL MEDIA remplace Linktree, Shopify, Patreon, Notion public, Typeform et Mailchimp. Un seul abonnement, aucun coût caché, AUCUN % prélevé sur votre activité." | t }}</p>
      </div>
    </div>
  </section>

  <!-- Hero 3 -->
  <section class="pt-20">
    <div class="grid md:grid-cols-2 gap-12 items-center">
      <div class="order-2 md:order-1">
        <h2 class="text-2xl lg:text-3xl mb-4 text-indigo-600 uppercase">{{ "Respect. Sobriété. Contrôle." | t }}</h2>
        <p class="text-lg">{{ "100% RGPD. Aucun cookie tiers. API. Webhooks. Votre domaine, vos règles. Un vrai outil pro." | t }}</p>
      </div>
      <div>
        <h2 class="text-2xl lg:text-3xl mb-4 text-indigo-600 uppercase">{{ "Gardez vos revenus" | t }}</h2>
        <p class="text-lg">{{ "Un modèle éthique et clair. Aucune commission, Setup fixe, hébergement au choix, licence illimitée. Support humain inclus." | t }}</p>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="mt-20 py-20 text-center bg-black text-white dark:bg-white dark:text-black aspect-video rounded-xl">
    <h2 class="text-5xl mb-6 uppercase">{{ "Reprenez la main" | t }}</h2>
    <p class="text-2xl max-w-xl mx-auto mb-10">{{ "Déployez PERSONAL MEDIA dans votre écosystème ou proposez-le à vos clients." | t }}</p>
    <a href="https://agenda.pm/cedric" class="bg-indigo-600 px-4 py-3 rounded-lg font-bold text-xl uppercase">{{ "Demander une démo" | t }}</a>
  </section>

</div>

{{ template "footerMenu.html" . }}