
    <section class="relative overflow-hidden z-10 pt-[180px] pb-[120px]">
        <div class="container">
            <div class="flex flex-wrap mx-[-16px]">
                <div class="w-full px-4">
                    <div class="max-w-[500px] mx-auto bg-dark bg-opacity-15 dark:bg-dark rounded-md p-12 sm:p-[60px]">
                        <h3 class="font-bold text-white dark:text-white text-2xl sm:text-3xl mb-6 text-center">
                            Connexion à votre compte
                        </h3>

                        <form>
                            <div class="mb-8">
                                <label for="email" class="block text-sm font-medium text-white dark:text-white mb-3">
                                    Your Email 
                                </label>
                                <input type="email" name="email" placeholder="Entrer votre Email..."
                                    class="w-full border border-transparent bg-primary bg-opacity-10 dark:bg-[#242B51] rounded-md shadow-one dark:shadow-signUp py-3 px-6 text-body-color text-base placeholder-body-color outline-none focus-visible:shadow-none focus:border-primary" />
                            </div>
                            <div class="mb-8">
                                <label for="password" class="block text-sm font-medium text-white dark:text-white mb-3">
                                    Your Password
                                </label>
                                <input type="password" name="password" placeholder="Entrer votre mot de passe..."
                                    class="w-full border border-transparent bg-primary bg-opacity-10 dark:bg-[#242B51] rounded-md shadow-one dark:shadow-signUp py-3 px-6 text-body-color text-base placeholder-body-color outline-none focus-visible:shadow-none focus:border-primary" />
                            </div>
                            <div class="flex items-center justify-between mb-8">
                                <div>
                                    <label for="checkboxLabel"
                                        class="flex items-center cursor-pointer text-body-color text-sm font-medium select-none">
                                        <div class="relative">
                                            <input type="checkbox" id="checkboxLabel" class="sr-only" />
                                            <div
                                                class="box flex items-center justify-center w-5 h-5 rounded border border-body-color border-opacity-20 dark:border-white dark:border-opacity-10 mr-4">
                                                <span class="opacity-0">
                                                    <svg width="11" height="8" viewBox="0 0 11 8" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
                                                            fill="#3056D3" stroke="#3056D3" stroke-width="0.4" />
                                                    </svg>
                                                </span>
                                            </div>
                                        </div>
                                        Rester connecté
                                    </label>
                                </div>
                                <div>
                                    <a href="javascript:void(0)"
                                        class="text-primary text-sm font-medium hover:underline"> 
                                        Mot de passe oublié? </a>
                                </div>
                            </div>
                            <div class="mb-6">
                                <button
                                    class="w-full flex items-center justify-center text-base font-medium text-white bg-primary py-4 px-9 hover:shadow-signUp hover:bg-opacity-80 transition duration-300 ease-in-out rounded-md">
                                    Connexion
                                </button>
                            </div>
                        </form>
                        <p class="font-medium text-base text-body-color text-center">
                            Vous n'avez pas de compte?
                            <a href="/inscription" class="text-primary hover:underline"> Inscription </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

