<!DOCTYPE html>
<html lang="en">

<head>
       <meta charset="UTF-8">
       <title>@yield('title', 'Login')</title>




       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

       <meta name="viewport" content="width=device-width, initial-scale=1">
       @vite('resources/css/app.css')
</head>

<body>
       <div class="flex h-[100vh]">
              <div class="2xl:w-[47%] lg:w-1/2 w-full flex flex-col  justify-center  bg-[#FFFFFF] bg-no-repeat" style="background-image: url('{{ asset('Sites/images/map.png') }}');">
                     <div class="flex 2xl:ml-40 sm:ml-20 ml-8 mt-10  gap-2 mb-8 cursor-pointer" onclick="window.location.href='{{ url('/') }}'">
                            <img src="{{ asset('Sites/images/logo-login.png') }}" />
                     </div>
                     <div class="2xl:w-[648px]  xl:w-[550px] desk:w-[600px] lg:w-[500px] sm:w-[90%] w-[95%] 2xl:ml-40 sm:ml-10 mb-20 h-full flex flex-col justify-center sm:mx-0 mx-auto">

                            <h2 class="xl:text-[44px] sm:text-[35px] text-[30px] font-medium mb-10 text-[#111827] syne-medium leading-none">Welcome! It’s really nice <br> to see you</h2>
                            <label class="text-[19px] fo-m text-[#111827]">Username*</label>
                            <input type="text" placeholder="Enter your Username"
                                   value="Richard"
                                   class="w-full mt-1 mb-4 px-3 py-4 syne border-l font-medium text-[17px]  outline-none  text-[#111827]" />
                            <label class="text-[19px] fo-m text-[#111827]">Password*</label>
                            <input type="pasword" placeholder="Enter your Password"
                                   value="******"
                                   class="w-full mt-1 mb-4 px-3 py-4 border-l syne font-medium text-[17px]  outline-none  text-[#111827]" />



                            <button class="w-full text-[19px] cursor-pointer bg-[#F4C701] text-[#000000] syne py-4 mt-10 rounded font-medium">
                                   Sign In →
                                   
                            </button>
                            <div class="flex justify-between">

                                   <p class="text-[17px] text-center font-medium syne text-[#9CA3AF] mt-4">
                                          Create an account?
                                          <a href="{{url('signUp')}}" class="text-[#111827] font-medium underline ">Sign up</a>
                                   </p>
                                   <a href="{{url('reset-Password')}}" class="text-[17px] text-center font-medium syne text-[#9CA3AF] mt-4">
                                          Forgot Password?

                                   </a>
                            </div>
                     </div>
              </div>
              <div class="w-[53%] lg:flex hidden  items-center justify-center relative m-5 rounded-md bg-cover" style="background-image: url('{{ asset('Sites/images/auth-bg.png') }}');">


                     <div class="relative text-center">
                            <div class="flex justify-center mb-3">
                                   <img src="{{ asset('Sites/images/login-logo.png') }}" class="desk:w-full w-60"/>
                            </div>
                     </div>
                     <a href="{{url('signUp')}}" class="absolute syne font-normal top-10 right-[15%] text-white text-[18px]">
                            Sign up >
                     </a>

              </div>

       </div>
</body>

</html>