{{ template "headersMenu.html" . }}

<section class="flex relative justify-center items-center py-40 lg:h-screen" id="home">
    <div class="container">
        <div class="col-span-12 lg:col-span-4 hover:col-span-6">
            <div class="text-center ltr:md:text-left rtl:md:text-right">
                <div class="mt-6 mb-3 subcribe-form">
                    <form class="relative max-w-lg" method="get" action="/list">
                        <input type="text" id="subcribe" name="q" class="pt-4 ltr:pr-40 rtl:pl-40 pb-4 ltr:pl-6 rtl:pr-6 w-full h-[50px] outline-none text-black dark:text-white rounded-full bg-white dark:bg-slate-900 shadow dark:shadow-gray-800" placeholder="{{ "Rechercher" | t }}...">
                        <button type="submit" class="btn absolute top-[2px] ltr:right-[3px] rtl:left-[3px] h-[46px] bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-full"><i class="fa fa-search"></i></button>
                    </form>
                </div>
                <span class="font-medium text-slate-400">{{"" | t}} <a href="#!" data-modal-toggle="ContactUs" class="text-indigo-600">{{"" | t}}</a></span>
            </div>
        </div>
        <div class="grid lg:grid-cols-12 md:grid-cols-2 gap-[30px] mt-10 items-center">
            <div class="col-span-12 lg:col-span-8">
                <div class="grid lg:grid-cols-12 md:grid-cols-2 gap-[30px] items-center">
                    <div class="col-span-6 lg:col-span-4">
                        <a href="/list" class="block overflow-hidden relative p-6 text-center bg-white rounded-lg border-t-8 shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900 border-indigo-600/50">
                            <img src="/cdn/design/browser/icons/icon-users.png" class="mx-auto w-24 h-24" alt="">
                            <div class="mt-7 content">
                                <h2 class="text-xl font-semibold title">{{ "Cartes de visite" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <img src="/cdn/design/browser/icons/icon-users.png" alt="">
                                    <div class="absolute inset-0 "></div>
                                </div>
                                <div class="absolute right-0 bottom-0 left-0 mb-6">
                                    <span class="text-xl font-bold text-white">{{ "Cartes de visite" | t }}</span>
                                    <p class="p-3 text-white">{{ "Consultez, partagez, annotez, éditez" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-span-6 lg:col-span-4">
                        <a href="/design" class="block overflow-hidden relative p-6 text-center bg-white rounded-lg border-t-8 shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900 border-indigo-600/50">
                            <img src="/cdn/design/browser/icons/icon-colors.png" class="mx-auto w-24 h-24" alt="">
                            <div class="mt-7 content">
                                <h2 class="text-xl font-semibold title">{{ "Gabarits" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <img src="/cdn/design/browser/icons/icon-colors.png" alt="">
                                    <div class="absolute inset-0 "></div>
                                </div>
                                <div class="absolute right-0 bottom-0 left-0 mb-6">
                                    <span class="text-xl font-bold text-white">{{ "Gabarits" | t }}</span>
                                    <p class="p-3 text-white">{{ "Editez vos chartes graphiques" | t }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-span-6 lg:col-span-4">
                        <a href="/signout" class="block overflow-hidden relative p-6 text-center bg-white rounded-lg border-t-8 shadow transition-all duration-500 ease-in-out group dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900 border-indigo-600/50">
                            <img src="/cdn/design/browser/icons/icon-signout.png" class="mx-auto w-24 h-24" alt="">
                            <div class="mt-7 content">
                                <h2 class="text-xl font-semibold title">{{ "Déconnexion" | t }}</h2>
                            </div>
                            <div class="hidden group-hover:block">
                                <div class="absolute inset-0">
                                    <img src="/cdn/design/browser/icons/icon-signout.png" alt="">
                                    <div class="absolute inset-0 "></div>
                                </div>
                                <div class="absolute right-0 bottom-0 left-0 mb-6">
                                    <span class="text-xl font-bold text-white">{{ "Déconnexion" | t }}</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div id="ContactUs" tabindex="-1" class="hidden overflow-hidden fixed inset-0 z-50 m-auto">
    <div class="relative p-4 w-full max-w-xl h-auto">
        <div class="relative bg-white rounded-lg shadow dark:bg-slate-900 dark:shadow-gray-800">
            <div class="flex justify-between items-center px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                <h5 class="text-xl font-semibold">Contact Us</h5>
                <button type="button" class="inline-flex items-center p-1.5 text-sm text-gray-400 bg-transparent rounded-lg hover:bg-gray-200 hover:text-gray-900 ltr:ml-auto rtl:mr-auto dark:hover:bg-gray-800 dark:hover:text-white" data-modal-toggle="paymentMethod">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
                </button>
            </div>
            <div class="p-6 text-center">
                <form method="post" name="myForm" id="myForm" onsubmit="return validateForm()">
                    <p class="mb-0" id="error-msg"></p>
                    <div id="simple-msg"></div>
                    <div class="grid lg:grid-cols-12 lg:gap-6">
                        <div class="mb-5 lg:col-span-6">
                            <div class="ltr:text-left rtl:text-right">
                                <label for="name" class="font-semibold">Your Name:</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="user" class="absolute top-3 w-4 h-4 ltr:left-4 rtl:right-4"></i>
                                    <input name="name" id="name" type="text" class="form-input ltr:pl-11 rtl:pr-11" placeholder="Name :">
                                </div>
                            </div>
                        </div>

                        <div class="mb-5 lg:col-span-6">
                            <div class="ltr:text-left rtl:text-right">
                                <label for="email" class="font-semibold">Your Email:</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="mail" class="absolute top-3 w-4 h-4 ltr:left-4 rtl:right-4"></i>
                                    <input name="email" id="email" type="email" class="form-input ltr:pl-11 rtl:pr-11" placeholder="Email :">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1">
                        <div class="mb-5">
                            <div class="ltr:text-left rtl:text-right">
                                <label for="subject" class="font-semibold">Your Question:</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="book" class="absolute top-3 w-4 h-4 ltr:left-4 rtl:right-4"></i>
                                    <input name="subject" id="subject" class="form-input ltr:pl-11 rtl:pr-11" placeholder="Subject :">
                                </div>
                            </div>
                        </div>

                        <div class="mb-5">
                            <div class="ltr:text-left rtl:text-right">
                                <label for="comments" class="font-semibold">Your Comment:</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="message-circle" class="absolute top-3 w-4 h-4 ltr:left-4 rtl:right-4"></i>
                                    <textarea name="comments" id="comments" class="h-28 form-input ltr:pl-11 rtl:pr-11" placeholder="Message :"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" id="submit" name="send" class="flex justify-center items-center text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{ template "footer.html" . }}