{{ template "headersMenu.html" . }}

<section class="overflow-hidden relative pt-28 lg:pt-12">
    <div class="container relative">
        <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 class="grid md:grid-cols-2 grid-cols-1 items-center mb-24 
            gap-[30px] relative min-h-screen-250">
            <div class="ltr:md:mr-6 rtl:md:ml-6">
                <h4 class="mb-2 text-3xl font-bold text-black md:text-4xl dark:text-white">{{"Automatisez vos messages." | t }}</h4>
                <p class="mb-6 text-xl">{{ "Relance intelligente. Suivi client." | t }}<br/>{{ "Zéro surcharge mentale." | t }}</p>
                <p class="mb-6 uppercase">{{"Emails, SMS, push." | t}}</p>
                <div class="flex py-4 mt-4">
					<a href="#features" class="flex text-lg text-white bg-black rounded-md border-indigo-600 backstretch animated btn hover:bg-indigo-700 hover:border-indigo-700">{{ "Voir les fonctionnalités" | t }}</a>
                </div>
            </div>

            <div class="hidden relative py-12 md:block">
				<img src="/cdn/design/pics/illustration2.png" class="w-full" alt="">
            </div>
        </div>
        
    </div>

</section>

<div class="container">

  <section id="features" class="grid grid-cols-1 gap-8 p-10 md:grid-cols-2 lg:grid-cols-4">
    <div class="p-4">
      <h2 class="mb-2 text-2xl font-semibold">{{ "Automatisation des emails" | t }}</h2>
      <p>{{ "Crée une séquence de mails par projet, client, ou type de demande. Zéro oubli, tout est tracké." | t }}</p>
    </div>
    <div class="p-4">
      <h2 class="mb-2 text-2xl font-semibold">{{ "Suivi intelligent" | t }}</h2>
      <p>{{ "Marque les réponses, déclenche des actions, notifie ton équipe. L'info vient à toi." | t }}</p>
    </div>
    <div class="p-4">
      <h2 class="mb-2 text-2xl font-semibold">{{ "API ultra-simple" | t }}</h2>
      <p>{{ "1 POST pour lancer une séquence. Webhooks pour être alerté quand ça répond. C'est tout." | t }}</p>
    </div>
    <div class="p-4">
      <h2 class="mb-2 text-2xl font-semibold">{{ "100% RGPD" | t }}</h2>
      <p>{{ "Aucune data tierce. Données locales ou chiffrées chez nous. Transparence absolue." | t }}</p>
    </div>
  </section>

  <section class="pt-28 text-center">
    <h2 class="mb-4 text-2xl font-bold">{{ "Aperçu de l'API" | t }}</h2>
    <pre class="p-6 text-left bg-gray-100 rounded-xl">
POST /api/ping
{
"to": "client@example.com",
"subject": "{{ "Votre offre expire bientôt" | t }}",
"template_id": "offre-fin",
"steps": [
  { "delay": "3d", "template_id": "relance-1" },
  { "delay": "7d", "template_id": "relance-2" }
],
"metadata": {
  "projet": "CARD.PM"
}
}
    </pre>
  </section>

  <section class="py-32 text-center">
    <h2 class="mb-4 text-2xl font-bold">{{ "Notre offre, votre temps récupéré" | t }}</h2>
    <p class="mb-6 text-xl">{{ "Ce que vous faisiez en 3 heures, maintenant c'est 3 lignes de code. Vous méritez mieux." | t }}</p>
    <a href="https://agenda.pm/cedric" class="inline-block px-6 py-3 mt-4 text-white bg-black rounded-xl">{{ "Demander un accès privé" | t }}</a>
  </section>
</div>

{{ template "footerMenu.html" . }}