{{ template "headersMenu.html" . }}

<section class="relative items-center py-36 md:py-60">
    <div class="overflow-hidden absolute top-0 left-0 z-0 w-full h-full pointer-events-none">
        <video muted autoplay loop src="/cdn/tube/pm/agenda.mp4" class="absolute top-1/2 ltr:left-1/2 ltr:-translate-x-1/2 rtl:right-1/2 rtl:translate-x-1/2  -translate-y-1/2 w-screen h-[56.25vw] min-h-screen min-w-[177.77vw]"></video>
    </div>

    <div class="container mt-16 md:mt-24" >
        <div class="grid grid-cols-1 justify-center text-center">
            <div class="mb-10">
                <h1 class="mb-5 text-3xl font-bold leading-normal lg:leading-normal lg:text-4xl" style="text-shadow:#fff 0 0 5px, #fff 0 0 15px, #fff 0 0 15px,#fff 0 0 15px,#fff 0 0 15px,#fff 0 0 35px,#fff 0 0 55px,#fff0 0 0 96px">{{ "Votre agenda devient toujours à jour, toujours disponible, compatible tout appareil, synchronisable" | t }} <span class="wrap"></span> </span></h1>
            </div>
        </div>
    </div>
</section><!--end section-->
<!-- End Hero -->

        <!-- FEATURES START -->
        <section class="relative py-16 md:py-24" style="background:#E8C21F">
            <div class="container">
                <div class="flex justify-center">
                    <div class="relative z-2 transition-all duration-500 ease-in-out sm:-mt-[200px] -mt-[140px] m-0 lg:w-10/12 bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md p-6">
                        <div class="grid md:grid-cols-3 grid-cols-1 gap-[24px]">
                            <div class="">

                                <div class="mt-6 content">
                                    <h5 class="text-lg font-medium">{{ "Simplicité et puissance réunies" | t }}</h5>
                                    <p class="mt-3 text-slate-400">{{ "Votre solution de gestion de calendrier qui met fin au chaos et ramène la sérénité dans votre quotidien." | t }}</p>
                                </div>
                            </div>
                            <!--end feature content-->

                            <div class="">

                                <div class="mt-6 content">
                                    <h5 class="text-lg font-medium">{{ "Reprenez le Contrôle du Temps" | t }}</h5>
                                    <p class="mt-3 text-slate-400">{{ "Permettez à vos clients ou collègues de réserver des créneaux directement dans votre agenda." | t }}</p>
                                </div>
                            </div>
                            <!--end feature content-->

                            <div class="">

                                <div class="mt-6 content">
                                    <h5 class="text-lg font-medium">{{ "Analyse de Productivité" | t }}</h5>
                                    <p class="mt-3 text-slate-400">{{ "Suivez votre utilisation du temps et identifiez les opportunités d'optimisation." | t }}</p>
                                </div>
                            </div>

                            <!--end feature content-->
                        </div>
                    </div>
                </div><!--end grid-->
            </div><!--end container-->

            <div class="container mt-16 md:mt-24">
                <div class="grid md:grid-cols-12 grid-cols-1 items-center gap-[30px]">
                    <div class="md:col-span-5">
                        <div class="relative">
                            <img src="/cdn/gui/assets/images/hospital/about-2.png" class="rounded-md" alt="">
                            <div class="absolute right-0 left-0 bottom-2/4 text-center translate-y-2/4">
                                <a href="#!" data-type="youtube" data-id="fLYiYc_jo_s"
                                    class="inline-flex justify-center items-center w-20 h-20 text-indigo-600 bg-white rounded-full shadow-lg lightbox dark:shadow-gray-800 dark:bg-slate-900 dark:text-white">
                                    <i class="inline-flex justify-center items-center text-xl mdi mdi-play"></i>
                                </a>
                            </div>
                        </div>
                    </div><!--end col-->

                    <div class="md:col-span-7">
                        <div class="ltr:lg:ml-4 rtl:lg:mr-4">
                            <h4 class="mb-6 text-2xl font-medium leading-normal md:text-3xl lg:leading-normal">{{ "Fonctionnalités" | t }}</h4>
                            <p class="max-w-xl font-bold text-md">{{ "Des rendez-vous aux réunions, Agenda.pm a tout ce dont vous avez besoin." | t }}</p>
                            <ul class="mt-3 max-w-xl list text-md" style="list-style-type:square">
                                <li>{{ "Prise de rendez-vous depuis un simple lien, en fonction de vos disponibilités" | t }}</li>
                                
                                <li>{{ "Vue Globale: Accédez à une vision complète de votre emploi du temps, en un coup d'œil." | t }}</li>
                                
                                <li>{{ "Notifications Intelligentes: Soyez toujours au courant des événements à venir, sans être submergé." | t }}</li>
                                </p>
                            </ul>
                        </div>
                    </div><!--end col-->
                </div><!--end grid-->
            </div><!--end container-->

        </section><!--end section-->
        <!-- End -->
        <!-- Start -->

{{ template "footerMenu.html" . }}