auth move

src/app/(agent)/layout.tsx

@@ -0,0 +1,7 @@
+export default function AgentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

src/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { authService, AuthService } from '@/services';
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await authService.forgotPassword({ email });
+      setSubmitted(true);
+    } catch (err) {
+      setError(AuthService.getErrorMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (submitted) {
+    return (
+      <div className="bg-white rounded-[20px] p-8 shadow-sm">
+        <div className="text-center">
+          <div className="mb-6">
+            <svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </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">
+            We've sent a password reset link to <strong>{email}</strong>. Please check your inbox and spam folder.
+          </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"
+          >
+            Back to Login
+          </Link>
+          <button
+            type="button"
+            onClick={() => {
+              setSubmitted(false);
+              setEmail('');
+            }}
+            className="block w-full mt-4 text-sm text-[#00293d]/70 hover:text-[#00293d] transition-colors"
+          >
+            Try a different email
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Forgot Password Heading */}
+      <div className="text-center mb-6">
+        <h2 className="text-[30px] font-normal text-[#00293d] mb-3">Forgot Password</h2>
+        <p className="text-sm text-[#00293d] px-4 leading-relaxed">
+          Enter your email address and we'll send you a link to reset your password
+        </p>
+      </div>
+
+      {/* Forgot Password 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">
+            {error}
+          </div>
+        )}
+
+        {/* Email Input */}
+        <div>
+          <input
+            type="email"
+            placeholder="Email"
+            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"
+          />
+        </div>
+
+        {/* Submit Button */}
+        <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"
+        >
+          {loading ? 'Sending...' : 'Send Reset Link'}
+        </button>
+      </form>
+
+      {/* Back to Login */}
+      <div className="text-center mt-8">
+        <Link href="/login" className="text-[#00293d] text-sm font-light hover:underline">
+          Back to Login
+        </Link>
+      </div>
+    </>
+  );
+}

src/app/(auth)/layout.tsx

@@ -0,0 +1,21 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc] py-12 px-4">
+      <div className="w-full max-w-[510px]">
+        {/* Logo */}
+        <div className="text-center mb-4">
+          <img
+            src="/assets/logo.svg"
+            alt="RE-QuestN"
+            className="h-8 mx-auto"
+          />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/(auth)/login/page.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { signIn } from 'next-auth/react';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      // First, validate credentials with backend to get proper error messages
+      const validateRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const validateData = await validateRes.json();
+
+      if (!validateRes.ok) {
+        // Show the actual error message from backend
+        setError(validateData.message || 'Invalid email or password');
+        setLoading(false);
+        return;
+      }
+
+      // If validation passed, use NextAuth to create session
+      const result = await signIn('credentials', {
+        email,
+        password,
+        redirect: false,
+      });
+
+      setLoading(false);
+
+      if (result?.error) {
+        setError('Login failed. Please try again.');
+      } else {
+        router.push('/');
+        router.refresh();
+      }
+    } catch (err) {
+      setLoading(false);
+      setError('An error occurred. Please try again.');
+    }
+  };
+
+  const handleSocialLogin = (provider: 'google' | 'facebook' | 'twitter') => {
+    signIn(provider, { callbackUrl: '/' });
+  };
+
+  return (
+    <>
+      {/* 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
+        </p>
+      </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">
+            {error}
+          </div>
+        )}
+
+        {/* Email Input */}
+        <div>
+          <input
+            type="email"
+            placeholder="Email"
+            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"
+          />
+        </div>
+
+        {/* Password Input */}
+        <div className="relative">
+          <input
+            type={showPassword ? 'text' : 'password'}
+            placeholder="Password"
+            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"
+          />
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute right-5 top-1/2 -translate-y-1/2 text-[#00293d]/60 hover:text-[#00293d] transition-colors"
+          >
+            {showPassword ? (
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+              </svg>
+            ) : (
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+              </svg>
+            )}
+          </button>
+        </div>
+
+        {/* Forgot Password Link */}
+        <div className="text-right">
+          <Link href="/forgot-password" className="text-[#00293d] text-sm font-light hover:underline">
+            Forgot Password?
+          </Link>
+        </div>
+
+        {/* Login Button */}
+        <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"
+        >
+          {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>
+        <div className="flex-1 h-px bg-[#00293d]/20"></div>
+      </div>
+
+      {/* Social Login Icons */}
+      <div className="flex justify-center items-center gap-8">
+        {/* Google */}
+        <button
+          type="button"
+          onClick={() => handleSocialLogin('google')}
+          className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
+        >
+          <img src="/assets/icons/google.svg" alt="Google" className="w-6 h-6" />
+        </button>
+
+        {/* X (Twitter) */}
+        <button
+          type="button"
+          onClick={() => handleSocialLogin('twitter')}
+          className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
+        >
+          <img src="/assets/icons/x.svg" alt="X" className="w-6 h-6" />
+        </button>
+
+        {/* Facebook */}
+        <button
+          type="button"
+          onClick={() => handleSocialLogin('facebook')}
+          className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
+        >
+          <img src="/assets/icons/facebook.svg" alt="Facebook" className="w-6 h-6" />
+        </button>
+      </div>
+    </>
+  );
+}

src/app/(auth)/reset-password/page.tsx

@@ -220,22 +220,8 @@ function LoadingFallback() {
 
 export default function ResetPasswordPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc] py-12 px-4">
-      <div className="w-full max-w-[510px]">
-        {/* Logo */}
-        <div className="text-center mb-4">
-          <img
-            src="/assets/logo.svg"
-            alt="RE-QuestN"
-            className="h-8 mx-auto"
-          />
-        </div>
-
-        {/* Content */}
     <Suspense fallback={<LoadingFallback />}>
       <ResetPasswordContent />
     </Suspense>
-      </div>
-    </div>
   );
 }

src/app/(auth)/signup/page.tsx

@@ -0,0 +1,287 @@
+'use client';
+
+import { useState } from 'react';
+import { signIn } from 'next-auth/react';
+import Link from 'next/link';
+import { authService, AuthService, RegisterRequest } from '@/services';
+
+type UserType = 'USER' | 'AGENT';
+
+interface ValidationError {
+  field: string;
+  errors: string[];
+}
+
+export default function SignUpPage() {
+  const [userType, setUserType] = useState<UserType>('USER');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState('');
+  const [fieldErrors, setFieldErrors] = useState<ValidationError[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [registrationSuccess, setRegistrationSuccess] = useState(false);
+
+  const getFieldError = (fieldName: string): string | null => {
+    const fieldError = fieldErrors.find((e) => e.field === fieldName);
+    return fieldError ? fieldError.errors[0] : null;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    setFieldErrors([]);
+
+    try {
+      const registerData: RegisterRequest = {
+        firstName,
+        lastName,
+        email,
+        password,
+        role: userType,
+      };
+
+      await authService.register(registerData);
+
+      // Show success message - user must verify email before logging in
+      setRegistrationSuccess(true);
+    } catch (err) {
+      // Get field errors
+      const errors = AuthService.getFieldErrors(err);
+      if (errors.length > 0) {
+        setFieldErrors(errors);
+        setError('Please fix the errors below');
+      } else {
+        setError(AuthService.getErrorMessage(err));
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSocialLogin = (provider: 'google' | 'facebook' | 'twitter') => {
+    signIn(provider, { callbackUrl: '/' });
+  };
+
+  // Registration Success Message
+  if (registrationSuccess) {
+    return (
+      <div className="bg-white rounded-[20px] p-8 shadow-sm">
+        <div className="text-center">
+          <div className="mb-6">
+            <svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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">
+            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"
+          >
+            Go to Login
+          </Link>
+          <p className="text-xs text-[#00293d]/50 mt-4">
+            Didn't receive the email? Check your spam folder or contact support.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* 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">
+          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">
+          <button
+            type="button"
+            onClick={() => setUserType('USER')}
+            className={`px-7 py-2 text-sm font-light rounded-[20px] transition-all duration-200 ${
+              userType === 'USER'
+                ? 'bg-[#00293d] text-[#f0f5fc]'
+                : 'text-[#00293d]'
+            }`}
+          >
+            User
+          </button>
+          <button
+            type="button"
+            onClick={() => setUserType('AGENT')}
+            className={`px-7 py-2 text-sm font-light rounded-[20px] transition-all duration-200 ${
+              userType === 'AGENT'
+                ? 'bg-[#00293d] text-[#f0f5fc]'
+                : 'text-[#00293d]'
+            }`}
+          >
+            Agent
+          </button>
+        </div>
+      </div>
+
+      {/* 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">
+            {error}
+          </div>
+        )}
+
+        {/* First Name & Last Name */}
+        <div className="flex gap-4">
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="First Name"
+              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 ${
+                getFieldError('firstName') ? 'ring-2 ring-red-400' : ''
+              }`}
+            />
+            {getFieldError('firstName') && (
+              <p className="text-red-500 text-xs mt-1 ml-2">{getFieldError('firstName')}</p>
+            )}
+          </div>
+          <div className="flex-1">
+            <input
+              type="text"
+              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 ${
+                getFieldError('lastName') ? 'ring-2 ring-red-400' : ''
+              }`}
+            />
+            {getFieldError('lastName') && (
+              <p className="text-red-500 text-xs mt-1 ml-2">{getFieldError('lastName')}</p>
+            )}
+          </div>
+        </div>
+
+        {/* Email Input */}
+        <div>
+          <input
+            type="email"
+            placeholder="Email"
+            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 ${
+              getFieldError('email') ? 'ring-2 ring-red-400' : ''
+            }`}
+          />
+          {getFieldError('email') && (
+            <p className="text-red-500 text-xs mt-1 ml-2">{getFieldError('email')}</p>
+          )}
+        </div>
+
+        {/* Password Input */}
+        <div>
+          <div className="relative">
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Password"
+              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 ${
+                getFieldError('password') ? 'ring-2 ring-red-400' : ''
+              }`}
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-5 top-1/2 -translate-y-1/2 text-[#00293d]/60 hover:text-[#00293d] transition-colors"
+            >
+              {showPassword ? (
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
+              ) : (
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                </svg>
+              )}
+            </button>
+          </div>
+          {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">
+            Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special character
+          </p>
+        </div>
+
+        {/* Sign Up Button */}
+        <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"
+        >
+          {loading ? 'Creating Account...' : 'Sign Up'}
+        </button>
+      </form>
+
+      {/* 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">
+          Login
+        </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>
+        <div className="flex-1 h-px bg-[#00293d]/20"></div>
+      </div>
+
+      {/* Social Login Icons */}
+      <div className="flex justify-center items-center gap-8">
+        {/* Google */}
+        <button
+          type="button"
+          onClick={() => handleSocialLogin('google')}
+          className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
+        >
+          <img src="/assets/icons/google.svg" alt="Google" className="w-6 h-6" />
+        </button>
+
+        {/* X (Twitter) */}
+        <button
+          type="button"
+          onClick={() => handleSocialLogin('twitter')}
+          className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
+        >
+          <img src="/assets/icons/x.svg" alt="X" className="w-6 h-6" />
+        </button>
+
+        {/* Facebook */}
+        <button
+          type="button"
+          onClick={() => handleSocialLogin('facebook')}
+          className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
+        >
+          <img src="/assets/icons/facebook.svg" alt="Facebook" className="w-6 h-6" />
+        </button>
+      </div>
+    </>
+  );
+}

src/app/(auth)/verify-email/page.tsx

@@ -115,22 +115,8 @@ function LoadingFallback() {
 
 export default function VerifyEmailPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc] py-12 px-4">
-      <div className="w-full max-w-[510px]">
-        {/* Logo */}
-        <div className="text-center mb-4">
-          <img
-            src="/assets/logo.svg"
-            alt="RE-QuestN"
-            className="h-8 mx-auto"
-          />
-        </div>
-
-        {/* Content Card */}
     <Suspense fallback={<LoadingFallback />}>
       <VerifyEmailContent />
     </Suspense>
-      </div>
-    </div>
   );
 }

src/app/(user)/layout.tsx

@@ -0,0 +1,7 @@
+export default function UserLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

src/app/forgot-password/page.tsx

@@ -1,122 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import Link from 'next/link';
-import { authService, AuthService } from '@/services';
-
-export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError('');
-
-    try {
-      await authService.forgotPassword({ email });
-      setSubmitted(true);
-    } catch (err) {
-      setError(AuthService.getErrorMessage(err));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc] py-12 px-4">
-      <div className="w-full max-w-[510px]">
-        {/* Logo */}
-        <div className="text-center mb-4">
-          <img
-            src="/assets/logo.svg"
-            alt="RE-QuestN"
-            className="h-8 mx-auto"
-          />
-        </div>
-
-        {submitted ? (
-          /* Success Message */
-          <div className="bg-white rounded-[20px] p-8 shadow-sm">
-            <div className="text-center">
-              <div className="mb-6">
-                <svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                </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">
-                We've sent a password reset link to <strong>{email}</strong>. Please check your inbox and spam folder.
-              </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"
-              >
-                Back to Login
-              </Link>
-              <button
-                type="button"
-                onClick={() => {
-                  setSubmitted(false);
-                  setEmail('');
-                }}
-                className="block w-full mt-4 text-sm text-[#00293d]/70 hover:text-[#00293d] transition-colors"
-              >
-                Try a different email
-              </button>
-            </div>
-          </div>
-        ) : (
-          <>
-            {/* Forgot Password Heading */}
-            <div className="text-center mb-6">
-              <h2 className="text-[30px] font-normal text-[#00293d] mb-3">Forgot Password</h2>
-              <p className="text-sm text-[#00293d] px-4 leading-relaxed">
-                Enter your email address and we'll send you a link to reset your password
-              </p>
-            </div>
-
-            {/* Forgot Password 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">
-                  {error}
-                </div>
-              )}
-
-              {/* Email Input */}
-              <div>
-                <input
-                  type="email"
-                  placeholder="Email"
-                  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"
-                />
-              </div>
-
-              {/* Submit Button */}
-              <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"
-              >
-                {loading ? 'Sending...' : 'Send Reset Link'}
-              </button>
-            </form>
-
-            {/* Back to Login */}
-            <div className="text-center mt-8">
-              <Link href="/login" className="text-[#00293d] text-sm font-light hover:underline">
-                Back to Login
-              </Link>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

src/app/login/page.tsx

@@ -1,195 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { signIn } from 'next-auth/react';
-import Link from 'next/link';
-
-export default function LoginPage() {
-  const router = useRouter();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError('');
-
-    try {
-      // First, validate credentials with backend to get proper error messages
-      const validateRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password }),
-      });
-
-      const validateData = await validateRes.json();
-
-      if (!validateRes.ok) {
-        // Show the actual error message from backend
-        setError(validateData.message || 'Invalid email or password');
-        setLoading(false);
-        return;
-      }
-
-      // If validation passed, use NextAuth to create session
-      const result = await signIn('credentials', {
-        email,
-        password,
-        redirect: false,
-      });
-
-      setLoading(false);
-
-      if (result?.error) {
-        setError('Login failed. Please try again.');
-      } else {
-        router.push('/');
-        router.refresh();
-      }
-    } catch (err) {
-      setLoading(false);
-      setError('An error occurred. Please try again.');
-    }
-  };
-
-  const handleSocialLogin = (provider: 'google' | 'facebook' | 'twitter') => {
-    signIn(provider, { callbackUrl: '/' });
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc] py-12 px-4">
-      <div className="w-full max-w-[510px]">
-        {/* Logo */}
-        <div className="text-center mb-4">
-          <img
-            src="/assets/logo.svg"
-            alt="RE-QuestN"
-            className="h-8 mx-auto"
-          />
-        </div>
-
-        {/* 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
-          </p>
-        </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">
-              {error}
-            </div>
-          )}
-
-          {/* Email Input */}
-          <div>
-            <input
-              type="email"
-              placeholder="Email"
-              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"
-            />
-          </div>
-
-          {/* Password Input */}
-          <div className="relative">
-            <input
-              type={showPassword ? 'text' : 'password'}
-              placeholder="Password"
-              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"
-            />
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-5 top-1/2 -translate-y-1/2 text-[#00293d]/60 hover:text-[#00293d] transition-colors"
-            >
-              {showPassword ? (
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                </svg>
-              ) : (
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-                </svg>
-              )}
-            </button>
-          </div>
-
-          {/* Forgot Password Link */}
-          <div className="text-right">
-            <Link href="/forgot-password" className="text-[#00293d] text-sm font-light hover:underline">
-              Forgot Password?
-            </Link>
-          </div>
-
-          {/* Login Button */}
-          <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"
-          >
-            {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>
-          <div className="flex-1 h-px bg-[#00293d]/20"></div>
-        </div>
-
-        {/* Social Login Icons */}
-        <div className="flex justify-center items-center gap-8">
-          {/* Google */}
-          <button
-            type="button"
-            onClick={() => handleSocialLogin('google')}
-            className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
-          >
-            <img src="/assets/icons/google.svg" alt="Google" className="w-6 h-6" />
-          </button>
-
-          {/* X (Twitter) */}
-          <button
-            type="button"
-            onClick={() => handleSocialLogin('twitter')}
-            className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
-          >
-            <img src="/assets/icons/x.svg" alt="X" className="w-6 h-6" />
-          </button>
-
-          {/* Facebook */}
-          <button
-            type="button"
-            onClick={() => handleSocialLogin('facebook')}
-            className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
-          >
-            <img src="/assets/icons/facebook.svg" alt="Facebook" className="w-6 h-6" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/signup/page.tsx

@@ -1,298 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { signIn } from 'next-auth/react';
-import Link from 'next/link';
-import { authService, AuthService, RegisterRequest } from '@/services';
-
-type UserType = 'USER' | 'AGENT';
-
-interface ValidationError {
-  field: string;
-  errors: string[];
-}
-
-export default function SignUpPage() {
-  const [userType, setUserType] = useState<UserType>('USER');
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [error, setError] = useState('');
-  const [fieldErrors, setFieldErrors] = useState<ValidationError[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [registrationSuccess, setRegistrationSuccess] = useState(false);
-
-  const getFieldError = (fieldName: string): string | null => {
-    const fieldError = fieldErrors.find((e) => e.field === fieldName);
-    return fieldError ? fieldError.errors[0] : null;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError('');
-    setFieldErrors([]);
-
-    try {
-      const registerData: RegisterRequest = {
-        firstName,
-        lastName,
-        email,
-        password,
-        role: userType,
-      };
-
-      await authService.register(registerData);
-
-      // Show success message - user must verify email before logging in
-      setRegistrationSuccess(true);
-    } catch (err) {
-      // Get field errors
-      const errors = AuthService.getFieldErrors(err);
-      if (errors.length > 0) {
-        setFieldErrors(errors);
-        setError('Please fix the errors below');
-      } else {
-        setError(AuthService.getErrorMessage(err));
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSocialLogin = (provider: 'google' | 'facebook' | 'twitter') => {
-    signIn(provider, { callbackUrl: '/' });
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc] py-12 px-4">
-      <div className="w-full max-w-[510px]">
-        {/* Logo */}
-        <div className="text-center mb-4">
-          <img
-            src="/assets/logo.svg"
-            alt="RE-QuestN"
-            className="h-8 mx-auto"
-          />
-        </div>
-
-        {/* Registration Success Message */}
-        {registrationSuccess ? (
-          <div className="bg-white rounded-[20px] p-8 shadow-sm">
-            <div className="text-center">
-              <div className="mb-6">
-                <svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <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">
-                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"
-              >
-                Go to Login
-              </Link>
-              <p className="text-xs text-[#00293d]/50 mt-4">
-                Didn't receive the email? Check your spam folder or contact support.
-              </p>
-            </div>
-          </div>
-        ) : (
-          <>
-            {/* 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">
-                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">
-            <button
-              type="button"
-              onClick={() => setUserType('USER')}
-              className={`px-7 py-2 text-sm font-light rounded-[20px] transition-all duration-200 ${
-                userType === 'USER'
-                  ? 'bg-[#00293d] text-[#f0f5fc]'
-                  : 'text-[#00293d]'
-              }`}
-            >
-              User
-            </button>
-            <button
-              type="button"
-              onClick={() => setUserType('AGENT')}
-              className={`px-7 py-2 text-sm font-light rounded-[20px] transition-all duration-200 ${
-                userType === 'AGENT'
-                  ? 'bg-[#00293d] text-[#f0f5fc]'
-                  : 'text-[#00293d]'
-              }`}
-            >
-              Agent
-            </button>
-          </div>
-        </div>
-
-        {/* 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">
-              {error}
-            </div>
-          )}
-
-          {/* First Name & Last Name */}
-          <div className="flex gap-4">
-            <div className="flex-1">
-              <input
-                type="text"
-                placeholder="First Name"
-                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 ${
-                  getFieldError('firstName') ? 'ring-2 ring-red-400' : ''
-                }`}
-              />
-              {getFieldError('firstName') && (
-                <p className="text-red-500 text-xs mt-1 ml-2">{getFieldError('firstName')}</p>
-              )}
-            </div>
-            <div className="flex-1">
-              <input
-                type="text"
-                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 ${
-                  getFieldError('lastName') ? 'ring-2 ring-red-400' : ''
-                }`}
-              />
-              {getFieldError('lastName') && (
-                <p className="text-red-500 text-xs mt-1 ml-2">{getFieldError('lastName')}</p>
-              )}
-            </div>
-          </div>
-
-          {/* Email Input */}
-          <div>
-            <input
-              type="email"
-              placeholder="Email"
-              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 ${
-                getFieldError('email') ? 'ring-2 ring-red-400' : ''
-              }`}
-            />
-            {getFieldError('email') && (
-              <p className="text-red-500 text-xs mt-1 ml-2">{getFieldError('email')}</p>
-            )}
-          </div>
-
-          {/* Password Input */}
-          <div>
-            <div className="relative">
-              <input
-                type={showPassword ? 'text' : 'password'}
-                placeholder="Password"
-                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 ${
-                  getFieldError('password') ? 'ring-2 ring-red-400' : ''
-                }`}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-5 top-1/2 -translate-y-1/2 text-[#00293d]/60 hover:text-[#00293d] transition-colors"
-              >
-                {showPassword ? (
-                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                  </svg>
-                ) : (
-                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-                  </svg>
-                )}
-              </button>
-            </div>
-            {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">
-              Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special character
-            </p>
-          </div>
-
-          {/* Sign Up Button */}
-          <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"
-          >
-            {loading ? 'Creating Account...' : 'Sign Up'}
-          </button>
-        </form>
-
-        {/* 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">
-            Login
-          </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>
-          <div className="flex-1 h-px bg-[#00293d]/20"></div>
-        </div>
-
-        {/* Social Login Icons */}
-        <div className="flex justify-center items-center gap-8">
-          {/* Google */}
-          <button
-            type="button"
-            onClick={() => handleSocialLogin('google')}
-            className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
-          >
-            <img src="/assets/icons/google.svg" alt="Google" className="w-6 h-6" />
-          </button>
-
-          {/* X (Twitter) */}
-          <button
-            type="button"
-            onClick={() => handleSocialLogin('twitter')}
-            className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
-          >
-            <img src="/assets/icons/x.svg" alt="X" className="w-6 h-6" />
-          </button>
-
-          {/* Facebook */}
-          <button
-            type="button"
-            onClick={() => handleSocialLogin('facebook')}
-            className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
-          >
-            <img src="/assets/icons/facebook.svg" alt="Facebook" className="w-6 h-6" />
-          </button>
-        </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}