feat: Add Apple social login and user type toggles to authentication pages, alongside various UI and text refinements.
This commit is contained in:
pradeepkumar
@@ -103,13 +103,13 @@ export default function SignUpPage() {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-[24px] font-normal text-[#00293d] mb-3">Check Your Email</h2>
|
||||
<p className="text-sm text-[#00293d]/70 mb-6">
|
||||
<h2 className="text-[24px] font-normal text-[#00293d] font-fractul mb-3">Check Your Email</h2>
|
||||
<p className="text-[14px] text-[#00293d]/70 font-serif mb-6">
|
||||
We've sent a verification link to <strong>{email}</strong>. Please check your inbox and click the link to verify your account before logging in.
|
||||
</p>
|
||||
<Link
|
||||
href="/login"
|
||||
className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center"
|
||||
className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[14px] font-fractul rounded-[7px] transition-colors text-center"
|
||||
>
|
||||
Go to Login
|
||||
</Link>
|
||||
@@ -125,21 +125,21 @@ export default function SignUpPage() {
|
||||
<>
|
||||
{/* Sign Up Heading */}
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="text-[30px] font-normal text-[#00293d] mb-3">Sign Up</h2>
|
||||
<p className="text-sm text-[#00293d] px-4 leading-relaxed">
|
||||
<h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Sign Up</h2>
|
||||
<p className="text-[14px] text-[#00293d] px-4 leading-[20px] font-fractul">
|
||||
Sign in or create an account to showcase your skills & expertise to millions of people starting their real estate journey today"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* User Type Toggle */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="inline-flex bg-[#f0f5fc] rounded-[20px] p-0.5">
|
||||
<div className="inline-flex bg-[#f0f5fc] rounded-[15px] p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setUserType('USER')}
|
||||
className={`px-7 py-2 text-sm font-light rounded-[20px] transition-all duration-200 ${
|
||||
className={`px-10 py-2 text-[14px] font-medium rounded-[15px] transition-all duration-200 font-serif ${
|
||||
userType === 'USER'
|
||||
? 'bg-[#00293d] text-[#f0f5fc]'
|
||||
? 'bg-[#00293d] text-[#f0f5fc] border border-[#00293d]'
|
||||
: 'text-[#00293d]'
|
||||
}`}
|
||||
>
|
||||
@@ -148,9 +148,9 @@ export default function SignUpPage() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setUserType('AGENT')}
|
||||
className={`px-7 py-2 text-sm font-light rounded-[20px] transition-all duration-200 ${
|
||||
className={`px-10 py-2 text-[14px] font-medium rounded-[15px] transition-all duration-200 font-serif ${
|
||||
userType === 'AGENT'
|
||||
? 'bg-[#00293d] text-[#f0f5fc]'
|
||||
? 'bg-[#00293d] text-[#f0f5fc] border border-[#00293d]'
|
||||
: 'text-[#00293d]'
|
||||
}`}
|
||||
>
|
||||
@@ -162,7 +162,7 @@ export default function SignUpPage() {
|
||||
{/* Sign Up 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>
|
||||
)}
|
||||
@@ -176,7 +176,7 @@ export default function SignUpPage() {
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(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 ${
|
||||
getFieldError('firstName') ? 'ring-2 ring-red-400' : ''
|
||||
}`}
|
||||
/>
|
||||
@@ -190,7 +190,7 @@ export default function SignUpPage() {
|
||||
placeholder="Last Name"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
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 ${
|
||||
getFieldError('lastName') ? 'ring-2 ring-red-400' : ''
|
||||
}`}
|
||||
/>
|
||||
@@ -208,7 +208,7 @@ export default function SignUpPage() {
|
||||
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 ${
|
||||
getFieldError('email') ? 'ring-2 ring-red-400' : ''
|
||||
}`}
|
||||
/>
|
||||
@@ -226,7 +226,7 @@ export default function SignUpPage() {
|
||||
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 ${
|
||||
getFieldError('password') ? 'ring-2 ring-red-400' : ''
|
||||
}`}
|
||||
/>
|
||||
@@ -250,7 +250,7 @@ export default function SignUpPage() {
|
||||
{getFieldError('password') && (
|
||||
<p className="text-red-500 text-xs mt-1 ml-2">{getFieldError('password')}</p>
|
||||
)}
|
||||
<p className="text-[#00293d]/60 text-xs mt-2 ml-2">
|
||||
<p className="text-[#00293d]/60 text-xs mt-2 ml-2 font-serif">
|
||||
Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special character
|
||||
</p>
|
||||
</div>
|
||||
@@ -263,7 +263,7 @@ export default function SignUpPage() {
|
||||
onChange={(e) => setSelectedAgentTypeId(e.target.value)}
|
||||
required
|
||||
disabled={loadingAgentTypes}
|
||||
className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all appearance-none cursor-pointer ${
|
||||
className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all appearance-none cursor-pointer ${
|
||||
!selectedAgentTypeId ? 'text-[#00293d]/60' : ''
|
||||
} ${getFieldError('agentTypeId') ? 'ring-2 ring-red-400' : ''}`}
|
||||
style={{
|
||||
@@ -290,7 +290,7 @@ export default function SignUpPage() {
|
||||
<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 ? 'Creating Account...' : 'Sign Up'}
|
||||
</button>
|
||||
@@ -298,8 +298,8 @@ export default function SignUpPage() {
|
||||
|
||||
{/* Already Have Account */}
|
||||
<div className="text-center mt-8">
|
||||
<span className="text-[#00293d] text-sm">Already Have An Account ? </span>
|
||||
<Link href="/login" className="text-[#00293d] font-light text-sm hover:underline">
|
||||
<span className="text-[#00293d] text-[14px] font-serif">Already Have An Account ? </span>
|
||||
<Link href="/login" className="text-[#00293d] font-bold text-[14px] font-fractul hover:underline">
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
@@ -307,12 +307,20 @@ export default function SignUpPage() {
|
||||
{/* 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"
|
||||
|
||||
Reference in New Issue
Block a user