Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Apple social login and user type toggles to authentication pages, alongside various UI and text refinements.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-07 23:48:49 +05:30
parent 1baad05e79
commit 68fc535b44
3 changed files with 66 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/(auth)/login/page.tsx
View File

@@ -75,16 +75,34 @@ export default function LoginPage() {
<>
{/* Login Heading */}
<div className="text-center mb-6">
<h2 className="text-[30px] font-normal text-[#00293d] mb-3">Login</h2>
<p className="text-sm text-[#00293d] px-4 leading-relaxed">
Sign in to your account to access your real estate dashboard and manage your properties
<h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Login</h2>
<p className="text-[14px] text-[#00293d] px-4 leading-[20px] font-fractul">
Login or create an account to enjoy FREE consultation on all property inquiries.
</p>
</div>
{/* User Type Toggle */}
<div className="flex justify-center mb-8">
<div className="inline-flex bg-[#f0f5fc] rounded-[15px] p-0.5">
<button
type="button"
className="px-10 py-2 text-[14px] font-semibold rounded-[15px] transition-all duration-200 font-serif bg-[#00293d] text-[#f0f5fc] border border-[#00293d]"
>
User
</button>
<button
type="button"
className="px-10 py-2 text-[14px] font-semibold rounded-[15px] transition-all duration-200 font-serif text-[#00293d]"
>
Admin
</button>
</div>
</div>
{/* Login Form */}
<form onSubmit={handleSubmit} className="space-y-5">
{error && (
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[20px] text-sm">
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[7px] text-[14px] font-serif">
{error}
</div>
)}
@@ -97,7 +115,7 @@ export default function LoginPage() {
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all"
className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all"
/>
</div>
@@ -109,7 +127,7 @@ export default function LoginPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all pr-14"
className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all pr-14"
/>
<button
type="button"
@@ -131,8 +149,8 @@ export default function LoginPage() {
{/* Forgot Password Link */}
<div className="text-right">
<Link href="/forgot-password" className="text-[#00293d] text-sm font-light hover:underline">
Forgot Password?
<Link href="/forgot-password" className="text-[#00293d] text-[14px] font-light font-serif leading-[24px] hover:underline">
Forget Your Password ?
</Link>
</div>
@@ -140,29 +158,29 @@ export default function LoginPage() {
<button
type="submit"
disabled={loading}
className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[20px] font-fractul rounded-[7px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Signing in...' : 'Login'}
</button>
</form>
{/* Don't Have Account */}
<div className="text-center mt-8">
<span className="text-[#00293d] text-sm">Don&apos;t Have An Account ? </span>
<Link href="/signup" className="text-[#00293d] font-light text-sm hover:underline">
Sign Up
</Link>
</div>
{/* Divider */}
<div className="flex items-center my-6">
<div className="flex-1 h-px bg-[#00293d]/20"></div>
<span className="px-4 text-sm text-[#00293d] font-light">Or</span>
<span className="px-4 text-[14px] text-[#00293d] font-serif">Or</span>
<div className="flex-1 h-px bg-[#00293d]/20"></div>
</div>
{/* Social Login Icons */}
<div className="flex justify-center items-center gap-8">
{/* Apple */}
<button
type="button"
className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
>
<img src="/assets/icons/apple.svg" alt="Apple" className="w-6 h-6" />
</button>
{/* Google */}
<button
type="button"