Corporate Login Form

"please modify this code to make the login form in the centre from the four dimensions top bottom left and right and add creativ hovers and animations and also a beautiful background image : <x-guest-layout> <div class="min-h-screen flex flex-col items-center justify-center bg-cover bg-center" style="background-image: url('path_to_your_image.jpg');"> <div class="w-full max-w-md bg-white bg-opacity-90 shadow-xl rounded-3xl p-8 space-y-6 mx-4"> <!-- Added mx-4 for small screens --> <div class="flex justify-center"> <x-authentication-card-logo class="w-20 h-20" /> </div> <x-validation-errors class="mb-4" /> @if (session('status')) <div class="mb-4 font-medium text-sm text-green-400 text-center"> {{ session('status') }} </div> @endif <form method="POST" action="{{ route('login') }}" class="space-y-5"> @csrf <div class="space-y-2"> <x-label for="email" class="text-gray-700 font-medium" value="{{ __('Email') }}" /> <x-input id="email" class="block w-full bg-gray-100 border border-gray-300 text-black rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 py-2 px-4" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" /> </div> <div class="space-y-2"> <x-label for="password" class="text-gray-700 font-medium" value="{{ __('Password') }}" /> <x-input id="password" class="block w-full bg-gray-100 border border-gray-300 text-black rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 py-2 px-4" type="password" name="password" required autocomplete="current-password" /> </div> <div class="flex items-center justify-between pt-2"> <label for="remember_me" class="flex items-center"> <x-checkbox id="remember_me" name="remember" /> <span class="ms-2 text-sm text-gray-600">{{ __('Remember me') }}</span> </label> @if (Route::has('password.request')) <a class="text-sm text-blue-500 hover:text-blue-600 hover:underline" href="{{ route('password.request') }}"> {{ __('Forgot your password?') }} </a> @endif </div> <div class="pt-4"> <x-button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 px-4 rounded-lg transition duration-200"> {{ __('Log in') }} </x-button> </div> </form> <div class="text-center text-sm text-gray-600 pt-2"> {{ __("Don't have an account?") }} <a href="{{ route('register') }}" class="text-blue-500 hover:text-blue-600 font-medium hover:underline"> {{ __('Register') }} </a> </div> </div> </div> </x-guest-layout>"