{{ template "headersMenu.html" . }}

<main class="transition-fade">
    <!-- Start Hero -->
    <section class="flex relative items-center py-36 h-screen jarallax" data-jarallax data-speed="0.5">
        <div class="container">
            <div class="grid grid-cols-1 items-center pb-8 mt-10 md:grid-cols-2">
                <div class="grid grid-cols-1 pr-1 mt-10">
                    <h1 class="mt-0 mr-3 mb-2 text-4xl font-bold lg:text-5xl">{{ "Un dépannage, une formation à distance ?" | t }}</h1>
                    <h5 class="mb-6 text-lg font-medium uppercase">{{ "Le support technique simplifié" | t }}</h5>
                    <div class="flex" id="grayscale">
                        <a href="/help" class="flex text-2xl text-white bg-black rounded-md border-indigo-600 backstretch animated btn hover:bg-indigo-700 hover:border-indigo-700">{{ "Comment ça marche" | t }}</a>
                        &nbsp;
                    </div>

                    <p class="mt-8 max-w-xl text-slate-400 text-md">{{ "Solution sécurisée de qualité industrielle basée sur le logiciel libre" | t }} <a href="https://rustdesk.com/" target="_blank">RustDesk</a>.</p>
                    
                </div>
                <div class="grid grid-cols-1"><img src="/cdn/apps/helpdesk/intro.png" class="w-100" /></div>
            </div>
        </div>
    </section>
</main>



{{ template "footerMenu.html" . }}