feature - 3 - Improve register page layout

This commit is contained in:
myrmidex 2026-01-04 02:42:19 +01:00
parent 197a74ee9b
commit 98230a5ef2

View file

@ -1,71 +1,51 @@
@extends('components.layouts.guest') @extends('components.layouts.guest')
@section('content') @section('content')
<h2 class="text-2xl text-center text-accent-blue mb-6">Register</h2> <h2 class="text-xl text-center text-accent-blue mb-4">Create an account</h2>
<form method="POST" action="{{ route('register') }}"> <form method="POST" action="{{ route('register') }}">
@csrf @csrf
<div> <x-input
<label for="name" class="block text-sm font-medium mb-2">Name</label> type="text"
<input type="text" name="name"
id="name" label="Name"
name="name" placeholder="Enter your name"
value="{{ old('name') }}" required
class="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue @error('name') border-red-500 @enderror" autofocus
placeholder="Enter your name" />
required
autofocus>
@error('name')
<span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span>
@enderror
</div>
<div> <x-input
<label for="email" class="block text-sm font-medium mb-2">Email</label> type="email"
<input type="email" name="email"
id="email" label="Email"
name="email" placeholder="Enter your email"
value="{{ old('email') }}" required
class="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue @error('email') border-red-500 @enderror" />
placeholder="Enter your email"
required>
@error('email')
<span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span>
@enderror
</div>
<div> <x-input
<label for="password" class="block text-sm font-medium mb-2">Password</label> type="password"
<input type="password" name="password"
id="password" label="Password"
name="password" placeholder="Enter your password"
class="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue @error('password') border-red-500 @enderror" required
placeholder="Enter your password" />
required>
@error('password')
<span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span>
@enderror
</div>
<div> <x-input
<label for="password_confirmation" class="block text-sm font-medium mb-2">Confirm Password</label> type="password"
<input type="password" name="password_confirmation"
id="password_confirmation" label="Confirm Password"
name="password_confirmation" placeholder="Confirm your password"
class="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue" required
placeholder="Confirm your password" />
required>
</div>
<button type="submit" class="w-full py-2 px-4 bg-primary text-white text-xl rounded hover:bg-secondary transition-colors duration-200 mb-4"> <x-button type="submit" class="w-full">
Register Register
</button> </x-button>
<div class="text-center"> <div class="text-center mt-4">
<a href="{{ route('login') }}" class="text-accent-blue hover:underline text-sm"> <span class="text-sm text-gray-400">Already have an account?</span>
Already have an account? Login here <a href="{{ route('login') }}" class="text-accent-blue hover:underline text-sm ml-1">Login</a>
</a>
</div> </div>
</form> </form>
@endsection @endsection