feat: refresh forgot password page UI, integrate new icons, and update styling.

public/assets/icons/arrow-back-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>

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

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { authService, AuthService } from '@/services';
 
 export default function ForgotPasswordPage() {
@@ -27,20 +28,23 @@ export default function ForgotPasswordPage() {
 
   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">
+          <Image
-              <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" />
+            src="/assets/icons/email-orange-icon.svg"
-            </svg>
+            alt="Email sent"
+            width={64}
+            height={64}
+            className="mx-auto"
+          />
         </div>
-          <h2 className="text-[24px] font-normal text-[#00293d] mb-3">Check Your Email</h2>
+        <h2 className="text-[24px] font-normal text-[#00293d] font-fractul mb-3">Check Your Email</h2>
-          <p className="text-sm text-[#00293d]/70 mb-6">
+        <p className="text-[14px] text-[#00293d]/70 font-serif 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"
+          className="inline-block w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[20px] font-fractul rounded-[7px] transition-colors text-center"
         >
           Back to Login
         </Link>
@@ -50,12 +54,11 @@ export default function ForgotPasswordPage() {
             setSubmitted(false);
             setEmail('');
           }}
-            className="block w-full mt-4 text-sm text-[#00293d]/70 hover:text-[#00293d] transition-colors"
+          className="block w-full mt-4 text-[14px] text-[#00293d]/70 font-serif hover:text-[#00293d] transition-colors"
         >
           Try a different email
         </button>
       </div>
-      </div>
     );
   }
 
@@ -63,16 +66,16 @@ export default function ForgotPasswordPage() {
     <>
       {/* Forgot Password Heading */}
       <div className="text-center mb-6">
-        <h2 className="text-[30px] font-normal text-[#00293d] mb-3">Forgot Password</h2>
+        <h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Forget Your Password</h2>
-        <p className="text-sm text-[#00293d] px-4 leading-relaxed">
+        <p className="text-[14px] text-[#00293d] px-4 leading-[20px] font-fractul">
-          Enter your email address and we'll send you a link to reset your password
+          Enter your registered email 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">
+          <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[7px] text-[14px] font-serif">
             {error}
           </div>
         )}
@@ -85,7 +88,7 @@ export default function ForgotPasswordPage() {
             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>
 
@@ -93,15 +96,26 @@ export default function ForgotPasswordPage() {
         <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 ? 'Sending...' : 'Send Reset Link'}
+          {loading ? 'Sending...' : 'Submit'}
         </button>
       </form>
 
+      {/* Divider */}
+      <div className="my-6">
+        <div className="h-px bg-[#00293d]/20"></div>
+      </div>
+
       {/* Back to Login */}
-      <div className="text-center mt-8">
+      <div className="flex justify-center items-center">
-        <Link href="/login" className="text-[#00293d] text-sm font-light hover:underline">
+        <Link href="/login" className="flex items-center gap-2 text-[#00293d] text-[14px] font-fractul hover:underline">
+          <Image
+            src="/assets/icons/arrow-back-icon.svg"
+            alt="Back"
+            width={20}
+            height={20}
+          />
           Back to Login
         </Link>
       </div>