fix(navbar): responsive issue in login and register pages

- fix remember me and forgot password alignment
- fix back to home position
- fix white background in some screens at bottom

resources/views/auth/login.blade.php

@@ -1,6 +1,12 @@
 <x-layout>
-    <section class="bg-linear-135 h-screen from-[#EFF6FF] to-[#FCF3F8] flex justify-center items-center">
+    <section class="bg-linear-135 h-screen from-[#EFF6FF] to-[#FCF3F8] flex flex-col justify-center items-center wrapper">
-        <x-card class="md:w-96">
+        <div class="mb-12 self-start">
+            <a href="{{route('home')}}" class="flex hover:underline">
+                <x-heroicon-o-arrow-left class="w-4 mr-2"/>
+                Back to Home
+            </a>
+        </div>
+        <x-card class="sm:w-96 w-full">
             <div class="flex flex-col items-center space-y-5">
                 <x-logo class="w-fit"/>
                 <h1 class="font-bold text-2xl">Welcome Back</h1>
@@ -9,7 +15,7 @@
             <form action="" class="flex flex-col space-y-5">
                 <x-input label="Email" name="email" type="email" placeholder="you@example.com"/>
                 <x-input label="Password" name="password" type="password"/>
-                <div class="flex justify-between">
+                <div class="flex flex-col md:flex-row md:justify-between space-y-4">
                     <div class="flex items-center space-x-2">
                         <input type="checkbox" name="remember_me">
                         <label class="text-sm font-bold text-accent-600">Remember me</label>
@@ -23,12 +29,5 @@
                 <a href="{{route('register')}}" class="text-blue-500 font-bold">Sign Up</a>
             </p>
         </x-card>
-
-        <div class="absolute top-1 md:top-5 md:left-10">
-            <a href="{{route('home')}}" class="flex hover:underline">
-                <x-heroicon-o-arrow-left class="w-4 mr-2"/>
-                Back to Home
-            </a>
-        </div>
     </section>
 </x-layout>

resources/views/auth/register.blade.php

@@ -2,33 +2,38 @@
     $options = \App\Enums\UserTypes::labels();
 @endphp
 <x-layout>
-    <section class="bg-linear-135 h-screen from-[#EFF6FF] to-[#FCF3F8] flex justify-center items-center">
+    <section
-        <x-card class="md:w-96">
+        class="bg-linear-135 flex-1 overflow-y-scroll wrapper py-12 from-[#EFF6FF] to-[#FCF3F8] ">
-            <div class="flex flex-col items-center space-y-5">
+        <div class="flex flex-col items-center justify-center">
-                <x-logo class="w-fit"/>
+
-                <h1 class="font-bold text-2xl">Create Account</h1>
+            <div class="mb-12 self-start ">
-                <p class=" text-accent-600 text-sm">Join {{config('app.name')}} and start discovering great deals</p>
+                <a href="{{route('home')}}" class="flex hover:underline">
+                    <x-heroicon-o-arrow-left class="w-4 mr-2"/>
+                    Back to Home
+                </a>
             </div>
-            <form action="" class="flex flex-col space-y-5">
+            <x-card class="sm:w-96 w-full ">
-                <x-input label="Full Name" name="name" placeholder="Jhon Doe"/>
+                <div class="flex flex-col items-center space-y-5">
-                <x-input label="Email" name="email" type="email" placeholder="you@example.com"/>
+                    <x-logo class="w-fit"/>
-                <x-select :options="$options" value-key="value" label-key="label" label="Account Type"/>
+                    <h1 class="font-bold text-2xl">Create Account</h1>
-                <x-input label="Password" name="password" type="password"/>
+                    <p class=" text-accent-600 text-sm">Join {{config('app.name')}} and start discovering great
-                <x-input label="Confirm Password" name="password_confirmation" type="password"/>
+                        deals</p>
+                </div>
+                <form action="" class="flex flex-col space-y-5">
+                    <x-input label="Full Name" name="name" placeholder="Jhon Doe"/>
+                    <x-input label="Email" name="email" type="email" placeholder="you@example.com"/>
+                    <x-select :options="$options" value-key="value" label-key="label" label="Account Type"/>
+                    <x-input label="Password" name="password" type="password"/>
+                    <x-input label="Confirm Password" name="password_confirmation" type="password"/>
 
-                <x-button variant="neutral">Create Account</x-button>
+                    <x-button variant="neutral">Create Account</x-button>
-            </form>
+                </form>
 
-            <p class="text-center text-accent-600 text-xs">Already have an account?
+                <p class="text-center text-accent-600 text-xs">Already have an account?
-                <a href="{{route('login')}}" class="text-blue-500 font-bold">Sign In</a>
+                    <a href="{{route('login')}}" class="text-blue-500 font-bold">Sign In</a>
-            </p>
+                </p>
-        </x-card>
+            </x-card>
 
-        <div class="absolute top-1 md:top-5 md:left-10">
-            <a href="{{route('home')}}" class="flex hover:underline">
-                <x-heroicon-o-arrow-left class="w-4 mr-2"/>
-                Back to Home
-            </a>
         </div>
     </section>
 </x-layout>

resources/views/components/layout.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -14,7 +14,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 
 </head>
-<body class="bg-[#FFFFFF] text-[#1b1b18] flex  min-h-screen flex-col">
+<body class="bg-[#FFFFFF] text-[#1b1b18] flex  h-full w-full flex-col">
     {{$slot}}
 </body>
 </html>