{{ template "headersMenu.html" . }}


<div class="text-black bg-white dark:text-white dark:bg-black">
    <main class="container pt-36">
        <section class="flex">
            <div class="mx-auto mt-20 text-left">
                <h1 class="mb-8 text-5xl font-bold lg:text-6xl">{{ "Votre solution de partage universel" | t }}</h1>
                <p class="mx-auto mb-12 max-w-3xl text-xl md:text-2xl">{{ "L'AirDrop* universel pour Mac, Windows et Linux. Simple, sécurisé et intelligent." | t }}</p>
                <a href="#get-started" class="px-6 py-4 text-xl font-semibold text-white bg-black rounded-md transition duration-300 dark:text-black dark:bg-white">{{ "Version beta" | t }} <i class="ml-2 fa-regular fa-circle-info"></i></a>
            </div>
            <div class="container hidden mx-auto text-center md:block">
                <img src="https://datamix.media/fredj-light.png" style="mix-blend-mode: multiply" class="block mx-auto h-[400px] dark:hidden">
                <img src="https://datamix.media/fredj-dark.png" class="hidden mx-auto h-[400px] dark:block">
              </div>
        </section>

        <section id="features" class="py-28 mt-20">
            <div class="container mx-auto mt-10">
                <h2 class="mb-16 text-4xl font-bold text-center">{{ "Fonctionnalités Principales" | t }}</h2>
                <div class="grid grid-cols-1 gap-12 md:grid-cols-3">
                    <div class="p-6 mx-2 text-center bg-white rounded-lg border shadow-lg dark:bg-gray-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto mb-4 w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                        </svg>
                        <h3 class="mb-4 text-2xl font-semibold">{{ "Partage Universel" | t }}</h3>
                        <p class="text-gray-600">{{ "Transférez facilement du contenu entre Mac, Windows et Linux." | t }}</p>
                    </div>
                    <div class="p-6 mx-2 text-center bg-white rounded-lg border shadow-lg dark:bg-gray-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto mb-4 w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                        <h3 class="mb-4 text-2xl font-semibold">{{ "Sécurité Renforcée" | t }}</h3>
                        <p class="text-gray-600">{{ "Synchronisation totalement sécurisée et privée dans notre cloud." | t }}</p>
                    </div>
                    <div class="p-6 mx-2 text-center bg-white rounded-lg border shadow-lg dark:bg-gray-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto mb-4 w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                        </svg>
                        <h3 class="mb-4 text-2xl font-semibold">{{ "Historique Intelligent" | t }}</h3>
                        <p class="text-gray-600">{{ "Accédez à l'historique complet de vos copier-coller." | t }}</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="how-it-works" class="py-20">
            <div class="container mx-auto mt-10">
                <h2 class="mb-16 text-4xl font-bold text-center">{{ "Comment ça marche" | t }}</h2>
                <div class="grid grid-cols-1 gap-12 items-center md:grid-cols-2">
                    <div>
                        <img src="https://via.placeholder.com/600x400" alt="CLIP.PM en action" class="rounded-lg shadow-lg">
                    </div>
                    <div>
                        <ol class="space-y-6">
                            <li class="flex items-center space-x-4">
                                <div class="flex justify-center items-center w-8 h-8 font-bold text-white bg-blue-600 rounded-full">1</div>
                                <p class="text-lg">{{ "Installez CLIP.PM sur vos appareils" | t }}</p>
                            </li>
                            <li class="flex items-center space-x-4">
                                <div class="flex justify-center items-center w-8 h-8 font-bold text-white bg-blue-600 rounded-full">2</div>
                                <p class="text-lg">{{ "Copiez du contenu sur un appareil" | t }}</p>
                            </li>
                            <li class="flex items-center space-x-4">
                                <div class="flex justify-center items-center w-8 h-8 font-bold text-white bg-blue-600 rounded-full">3</div>
                                <p class="text-lg">{{ "Collez instantanément sur un autre appareil" | t }}</p>
                            </li>
                            <li class="flex items-center space-x-4">
                                <div class="flex justify-center items-center w-8 h-8 font-bold text-white bg-blue-600 rounded-full">4</div>
                                <p class="text-lg">{{ "Profitez de l'historique et des intégrations" | t }}</p>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section id="integrations" class="py-20">
            <div class="container mx-auto mt-10">
                <h2 class="mb-16 text-4xl font-bold text-center">{{ "Quelques exemples d'intégrations" | t }}</h2>
                <div class="grid grid-cols-1 gap-12 md:grid-cols-3">
                    <div class="p-6 mx-2 text-center bg-white rounded-lg border shadow-lg dark:bg-gray-800">
                        <h3 class="mb-4 text-2xl font-semibold">
                            <img src="/cdn/design/logos/note-white.png" alt="" class="hidden h-8 dark:inline-block">
                            <img src="/cdn/design/logos/note-black.png" alt="" class="inline-block h-8 dark:hidden">
                        </h3>
                        <p class="mb-4">{{ "Intégrez vos copier-coller directement dans vos notes de projet pour une organisation optimale." | t }}</p>
                        <a href="https://beta.note.pm" class="underline opacity-50 transition hover:opacity-100">{{ "En savoir plus" | t }}</a>
                    </div>
                    <div class="p-6 mx-2 text-center bg-white rounded-lg border shadow-lg dark:bg-gray-800">
                        <h3 class="mb-4 text-2xl font-semibold">
                            <img src="/cdn/design/logos/assistant-white.png" alt="" class="hidden h-8 dark:inline-block">
                            <img src="/cdn/design/logos/assistant-black.png" alt="" class="inline-block h-8 dark:hidden">
                        </h3>
                        <p class="mb-4">{{ "Automatisez vos tâches répétitives en utilisant l'historique de vos copier-coller avec l'IA." | t }}</p>
                        <a href="https://beta.assistant.pm" class="underline opacity-50 transition hover:opacity-100">{{ "En savoir plus" | t }}</a>
                    </div>
                    <div class="p-6 mx-2 text-center bg-white rounded-lg border shadow-lg dark:bg-gray-800">
                        <h3 class="mb-4 text-2xl font-semibold">
                            <img src="/cdn/design/logos/livechat-white.png" alt="" class="hidden h-8 dark:inline-block">
                            <img src="/cdn/design/logos/livechat-black.png" alt="" class="inline-block h-8 dark:hidden">
                        </h3>
                        <p class="mb-4">{{ "Partagez instantanément des snippets lors de vos sessions de travail collaboratives." | t }}</p>
                        <a href="https://beta.livechat.pm" class="underline opacity-50 transition hover:opacity-100">{{ "En savoir plus" | t }}</a>
                    </div>
                </div>
            </div>
        </section>

        <section id="pricing" class="hidden py-36 text-white bg-black dark:bg-white dark:text-black">
            <div class="container mx-auto mt-10">
                <h2 class="mb-16 text-4xl font-bold text-center">Tarifs</h2>
                <div class="grid grid-cols-1 gap-12 mx-auto max-w-4xl md:grid-cols-2">
                    <div class="p-8 bg-white rounded-lg border shadow-lg">
                        <h3 class="mb-4 text-2xl font-semibold">Gratuit</h3>
                        <p class="mb-6 text-4xl font-bold">0€ <span class="text-base font-normal">/mois</span></p>
                        <ul class="mb-8 space-y-4">
                            <li class="flex items-center">
                                <svg class="mr-2 w-6 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Loggueur local de copier-coller
                            </li>
                            <li class="flex items-center">
                                <svg class="mr-2 w-6 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Utilisation illimitée sur un appareil
                            </li>
                        </ul>
                        <a href="#" class="block py-2 w-full text-center text-white bg-blue-600 rounded-full transition duration-300 hover:bg-blue-700">Commencer gratuitement</a>
                    </div>
                    <div class="p-8 bg-white rounded-lg border-2 border border-blue-600 shadow-lg">
                        <h3 class="mb-4 text-2xl font-semibold">Premium</h3>
                        <p class="mb-6 text-4xl font-bold">30€ <span class="text-base font-normal">HT/an</span></p>
                        <ul class="mb-8 space-y-4">
                            <li class="flex items-center">
                                <svg class="mr-2 w-6 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Synchronisation cloud sécurisée
                            </li>
                            <li class="flex items-center">
                                <svg class="mr-2 w-6 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Utilisation sur tous vos appareils
                            </li>
                            <li class="flex items-center">
                                <svg class="mr-2 w-6 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Historique illimité
                            </li>
                            <li class="flex items-center">
                                <svg class="mr-2 w-6 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Intégrations .PM
                            </li>
                        </ul>
                        <a href="#" class="block py-2 w-full text-center text-white bg-blue-600 rounded-full transition duration-300 hover:bg-blue-700">S'abonner</a>
                    </div>
                </div>
            </div>
        </section>

        <section id="get-started" class="py-20 bg-blue-100">
            <div class="container mx-auto mt-10 text-center">
                <h2 class="mb-8 text-4xl font-bold">{{ "Prêt à révolutionner votre façon de partager ?" | t }}</h2>
                <p class="mx-auto mb-12 max-w-3xl text-xl">{{ "Rejoignez des milliers d'utilisateurs qui ont déjà adopté CLIP.PM pour simplifier leur flux de travail et booster leur productivité." | t }}</p>
                <a href="/about/download" up-follow class="px-6 py-4 text-xl font-bold text-white bg-black rounded-full transition duration-300 dark:bg-white dark:text-black hover:bg-blue-700">{{ "Télécharger CLIP.PM" | t }}</a>
            </div>
        </section>
    </main>

</div>

{{ template "footerMenu.html" . }}