Separate auth title into its own file and add gradient with pulse ani…

…mation

- Moved the authentication page title into a separate component file for better structure and reusability.
- Applied a gradient to the title text using Tailwind's gradient utilities.
- Added a pulse animation to the title for visual emphasis.
- Ensured the title component is easily configurable and maintains consistency across the auth pages.

client/src/components/auth-title.tsx

@@ -0,0 +1,27 @@
+interface AuthTitleProps {
+  title: string;
+  body?: string;
+}
+
+const AuthTitle = ({ title, body }: AuthTitleProps) => {
+  return (
+    <div className="w-full rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl">
+      <h2
+        className="text-lg lg:text-2xl font-extrabold text-center uppercase 
+        bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent
+        drop-shadow-primary-glow animate-pulse p-4"
+      >
+        {title}
+      </h2>
+      {body && (
+        <div className="w-full bg-primary/25 p-2.5 flex-center border-t border-primary/50">
+          <p className="text-xs lg:text-base text-center lg:max-w-[324px] text-foreground/60 font-medium">
+            {body}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { AuthTitle };

client/src/pages/forgot-password/page.tsx

@@ -1,21 +1,15 @@
 import { SwitchAuth } from "@/components/switch-auth";
 import { ForgotPasswordForm } from "./_components/forgot-password-form";
 import { AppRoutes } from "@/constants/routes";
+import { AuthTitle } from "@/components/auth-title";
 
 const ForgotPasswordPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <div className="w-full rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl">
-        <h2 className="text-lg lg:text-2xl font-extrabold text-center uppercase pt-4 pb-2">
-          Forgot Password
-        </h2>
-        <div className="w-full bg-primary/25 p-2.5 flex-center border-t border-primary/50">
-          <p className="text-xs lg:text-base text-center lg:max-w-[324px] text-foreground/60 font-medium">
-            Enter your email address and wait for a reset password link to be
-            sent.
-          </p>
-        </div>
-      </div>
+      <AuthTitle
+        title="Forgot Password"
+        body="Enter your email address and wait for a reset password link to be sent."
+      />
 
       <ForgotPasswordForm />
 

client/src/pages/reset-password/page.tsx

@@ -1,17 +1,13 @@
 import { SwitchAuth } from "@/components/switch-auth";
+import { AuthTitle } from "@/components/auth-title";
 import { AppRoutes } from "@/constants/routes";
 
 import { ResetPasswordForm } from "./_components/reset-password-form";
 
 const ResetPasswordPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <h2
-        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
-        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
-      >
-        Reset Password
-      </h2>
+      <AuthTitle title="Reset Password" />
 
       <ResetPasswordForm />
 

client/src/pages/sign-in/page.tsx

@@ -1,4 +1,5 @@
 import { SwitchAuth } from "@/components/switch-auth";
+import { AuthTitle } from "@/components/auth-title";
 import { AppRoutes } from "@/constants/routes";
 import { Or } from "@/components/or";
 
@@ -7,12 +8,7 @@ import { SignInForm } from "./_components/sign-in-form";
 const SignInPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <h2
-        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
-        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
-      >
-        Access Your Account
-      </h2>
+      <AuthTitle title="Access Your Account" />
 
       <SignInForm />
 

client/src/pages/sign-up/page.tsx

@@ -1,4 +1,5 @@
 import { SwitchAuth } from "@/components/switch-auth";
+import { AuthTitle } from "@/components/auth-title";
 import { AppRoutes } from "@/constants/routes";
 import { Or } from "@/components/or";
 
@@ -7,12 +8,7 @@ import { SignUpForm } from "./_components/sign-up-form";
 const SignUpPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <h2
-        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
-        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
-      >
-        Create Account
-      </h2>
+      <AuthTitle title="Create Account" />
 
       <SignUpForm />
 

client/src/pages/verify-email/page.tsx

@@ -1,15 +1,12 @@
+import { AuthTitle } from "@/components/auth-title";
+
 import { VerifyEmailForm } from "./_components/verify-email-form";
 import { ResendCode } from "./_components/resend-code";
 
 const VerifyEmailPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <h2
-        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
-        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
-      >
-        Verify Email
-      </h2>
+      <AuthTitle title="Verify Email" />
 
       <VerifyEmailForm />