From 1237f45142cdee53aacdac2d3232b84d969db548 Mon Sep 17 00:00:00 2001
From: Pheonix <150040105+ArshiBansal@users.noreply.github.com>
Date: Fri, 22 May 2026 15:57:34 +0530
Subject: [PATCH] added back to home feature

---
 src/pages/Contact/Contact.tsx |  89 ++++++++++-----
 src/pages/Login/Login.tsx     | 118 +++++++++++++++-----
 src/pages/Signup/Signup.tsx   | 203 +++++++++++++++++++++-------------
 3 files changed, 278 insertions(+), 132 deletions(-)

diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index a0bfccbd..c9175686 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -6,16 +6,22 @@ import {
   Send,
   X,
   CheckCircle,
+  ArrowLeft,
 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
 
 function Contact() {
   const [showPopup, setShowPopup] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+
   const themeContext = useContext(ThemeContext) as ThemeContextType;
   const { mode } = themeContext;
 
+  const navigate = useNavigate();
+
   const handleSubmit = async () => {
     setIsSubmitting(true);
 
@@ -51,6 +57,33 @@ function Contact() {
       </div>
 
       <div className="relative z-10 container mx-auto px-4 py-6 max-w-7xl flex flex-col pb-20">
+        {/* Back to Home Button */}
+        <div className="mb-6 flex justify-start">
+          <button
+            onClick={() => navigate("/")}
+            className={`group relative inline-flex items-center gap-2 overflow-hidden rounded-2xl px-5 py-3 text-sm sm:text-base font-semibold shadow-lg backdrop-blur-xl border transition-all duration-300 hover:scale-105 hover:-translate-y-0.5 active:scale-95 ${
+              mode === "dark"
+                ? "bg-white/10 text-white border-white/20 hover:bg-white/20"
+                : "bg-white/80 text-gray-800 border-gray-200 hover:bg-white"
+            }`}
+          >
+            {/* Glow Effect */}
+            <span className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-blue-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+
+            {/* Icon */}
+            <div
+              className={`relative z-10 flex items-center justify-center w-8 h-8 rounded-full transition-all duration-300 group-hover:-translate-x-1 ${
+                mode === "dark" ? "bg-white/10" : "bg-purple-100"
+              }`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </div>
+
+            {/* Text */}
+            <span className="relative z-10">Back to Home</span>
+          </button>
+        </div>
+
         {/* Header Section */}
         <div className="text-center mb-8 flex-shrink-0">
           <div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-3 mb-4">
@@ -65,6 +98,7 @@ function Contact() {
                 className="w-10 h-10 sm:w-14 sm:h-14 object-contain"
               />
             </div>
+
             <h1
               className="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-bold 
                          bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent"
@@ -72,6 +106,7 @@ function Contact() {
               GitHub Tracker
             </h1>
           </div>
+
           <p
             className={`text-sm sm:text-lg max-w-xl md:max-w-2xl mx-auto leading-relaxed ${
               mode === "dark" ? "text-gray-300" : "text-gray-700"
@@ -93,13 +128,14 @@ function Contact() {
               >
                 Let's Connect
               </h2>
+
               <p
                 className={`text-xs sm:text-base ${
                   mode === "dark" ? "text-gray-400" : "text-gray-600"
                 }`}
               >
-                We're here to help you track and manage your GitHub
-                repositories more effectively
+                We're here to help you track and manage your GitHub repositories
+                more effectively
               </p>
             </div>
 
@@ -128,8 +164,10 @@ function Contact() {
                     Icon: Github,
                   },
                 ];
+
                 const { title, iconBg, detail, sub, Icon } =
                   contactTypes[index];
+
                 return (
                   <div
                     key={title}
@@ -145,36 +183,31 @@ function Contact() {
                       >
                         <Icon
                           className={`w-4 h-4 sm:w-5 sm:h-5 ${
-                            mode === "dark"
-                              ? "text-white"
-                              : "text-gray-800"
+                            mode === "dark" ? "text-white" : "text-gray-800"
                           }`}
                         />
                       </div>
+
                       <div>
                         <h3
                           className={`text-sm sm:text-base font-semibold ${
-                            mode === "dark"
-                              ? "text-white"
-                              : "text-gray-800"
+                            mode === "dark" ? "text-white" : "text-gray-800"
                           }`}
                         >
                           {title}
                         </h3>
+
                         <p
                           className={`text-xs sm:text-sm ${
-                            mode === "dark"
-                              ? "text-gray-300"
-                              : "text-gray-600"
+                            mode === "dark" ? "text-gray-300" : "text-gray-600"
                           }`}
                         >
                           {detail}
                         </p>
+
                         <p
                           className={`text-xs ${
-                            mode === "dark"
-                              ? "text-gray-400"
-                              : "text-gray-500"
+                            mode === "dark" ? "text-gray-400" : "text-gray-500"
                           }`}
                         >
                           {sub}
@@ -209,13 +242,12 @@ function Contact() {
                 <div>
                   <label
                     className={`block text-xs font-medium mb-1 ${
-                      mode === "dark"
-                        ? "text-gray-300"
-                        : "text-gray-700"
+                      mode === "dark" ? "text-gray-300" : "text-gray-700"
                     }`}
                   >
                     Full Name
                   </label>
+
                   <input
                     type="text"
                     placeholder="Enter your full name"
@@ -232,13 +264,12 @@ function Contact() {
                 <div>
                   <label
                     className={`block text-xs font-medium mb-1 ${
-                      mode === "dark"
-                        ? "text-gray-300"
-                        : "text-gray-700"
+                      mode === "dark" ? "text-gray-300" : "text-gray-700"
                     }`}
                   >
                     Email Address
                   </label>
+
                   <input
                     type="email"
                     placeholder="your.email@example.com"
@@ -255,18 +286,17 @@ function Contact() {
                 <div>
                   <label
                     className={`block text-xs font-medium mb-1 ${
-                      mode === "dark"
-                        ? "text-gray-300"
-                        : "text-gray-700"
+                      mode === "dark" ? "text-gray-300" : "text-gray-700"
                     }`}
                   >
                     Subject
                   </label>
+
                   <select
                     className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
                       mode === "dark"
-                        ? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
-                        : "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
+                        ? "bg-white/5 border border-white/20 text-white"
+                        : "bg-gray-50 border border-gray-300 text-gray-800"
                     }`}
                     required
                     defaultValue=""
@@ -274,6 +304,7 @@ function Contact() {
                     <option value="" disabled>
                       Select a subject
                     </option>
+
                     <option>General Inquiry</option>
                     <option>Bug Report</option>
                     <option>Feature Request</option>
@@ -285,13 +316,12 @@ function Contact() {
                 <div className="relative">
                   <label
                     className={`block text-xs font-medium mb-1 ${
-                      mode === "dark"
-                        ? "text-gray-300"
-                        : "text-gray-700"
+                      mode === "dark" ? "text-gray-300" : "text-gray-700"
                     }`}
                   >
                     Message
                   </label>
+
                   <textarea
                     placeholder="Type your message here..."
                     required
@@ -313,6 +343,7 @@ function Contact() {
                     }`}
                   >
                     {isSubmitting ? "Sending..." : "Send"}
+
                     <Send className="w-4 h-4" />
                   </button>
                 </div>
@@ -332,9 +363,11 @@ function Contact() {
           }`}
         >
           <CheckCircle className="w-6 h-6 sm:w-7 sm:h-7" />
+
           <div className="flex-1 text-xs sm:text-sm font-semibold">
             Thank you for contacting us! We will get back to you shortly.
           </div>
+
           <button
             onClick={handleClosePopup}
             className="text-lg sm:text-xl px-2 sm:px-3 py-1 rounded-xl hover:bg-green-200/40 focus:outline-none focus:ring-2 focus:ring-green-400"
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 92b7073e..c704f2cd 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -3,6 +3,7 @@ import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
+import { ArrowLeft } from "lucide-react";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
@@ -12,7 +13,10 @@ interface LoginFormData {
 }
 
 const Login: React.FC = () => {
-  const [formData, setFormData] = useState<LoginFormData>({ email: "", password: "" });
+  const [formData, setFormData] = useState<LoginFormData>({
+    email: "",
+    password: "",
+  });
   const [message, setMessage] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
@@ -30,10 +34,13 @@ const Login: React.FC = () => {
     setIsLoading(true);
 
     try {
-      const response = await axios.post(`${backendUrl}/api/auth/login`, formData);
+      const response = await axios.post(
+        `${backendUrl}/api/auth/login`,
+        formData,
+      );
       setMessage(response.data.message);
 
-      if (response.data.message === 'Login successful') {
+      if (response.data.message === "Login successful") {
         navigate("/");
       }
     } catch (error: unknown) {
@@ -57,34 +64,85 @@ const Login: React.FC = () => {
     >
       {/* Animated background elements */}
       <div className="absolute inset-0">
-        <div className={`absolute -top-40 -right-40 w-96 h-96 ${mode === "dark" ? "bg-purple-500" : "bg-purple-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
-        <div className={`absolute -bottom-40 -left-40 w-96 h-96 ${mode === "dark" ? "bg-blue-500" : "bg-blue-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
-        <div className={`absolute top-40 left-40 w-96 h-96 ${mode === "dark" ? "bg-pink-500" : "bg-pink-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
-        <div className={`absolute top-1/2 right-1/4 w-64 h-64 ${mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"} rounded-full blur-2xl opacity-20 animate-pulse delay-1000`} />
+        <div
+          className={`absolute -top-40 -right-40 w-96 h-96 ${
+            mode === "dark" ? "bg-purple-500" : "bg-purple-300"
+          } rounded-full blur-3xl opacity-30 animate-pulse`}
+        />
+        <div
+          className={`absolute -bottom-40 -left-40 w-96 h-96 ${
+            mode === "dark" ? "bg-blue-500" : "bg-blue-300"
+          } rounded-full blur-3xl opacity-30 animate-pulse`}
+        />
+        <div
+          className={`absolute top-40 left-40 w-96 h-96 ${
+            mode === "dark" ? "bg-pink-500" : "bg-pink-300"
+          } rounded-full blur-3xl opacity-30 animate-pulse`}
+        />
+        <div
+          className={`absolute top-1/2 right-1/4 w-64 h-64 ${
+            mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"
+          } rounded-full blur-2xl opacity-20 animate-pulse delay-1000`}
+        />
       </div>
 
       <div className="relative w-full max-w-md px-4 sm:px-6">
+        {/* ✅ BACK TO HOME BUTTON (ADDED) */}
+        <div className="mb-6">
+          <button
+            onClick={() => navigate("/")}
+            className={`group flex items-center gap-2 px-4 py-2 rounded-xl backdrop-blur-xl border transition-all duration-300 hover:scale-105 active:scale-95 ${
+              mode === "dark"
+                ? "bg-white/10 text-white border-white/20 hover:bg-white/20"
+                : "bg-white/70 text-gray-800 border-gray-200 hover:bg-white"
+            }`}
+          >
+            <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-1" />
+            Back to Home
+          </button>
+        </div>
+
         {/* Branding */}
         <div className="text-center mb-10">
           <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
-            <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
+            <img
+              src="/crl-icon.png"
+              alt="Logo"
+              className="w-14 h-14 object-contain"
+            />
           </div>
 
-          <h1 className={`text-4xl font-bold bg-clip-text text-transparent mb-2 ${
-            mode === "dark"
-              ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300"
-              : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600"
-          }`}>
+          <h1
+            className={`text-4xl font-bold bg-clip-text text-transparent mb-2 ${
+              mode === "dark"
+                ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300"
+                : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600"
+            }`}
+          >
             GitHubTracker
           </h1>
-          <p className={`${mode === "dark" ? "text-slate-300" : "text-gray-700"} text-lg font-medium`}>
+          <p
+            className={`${
+              mode === "dark" ? "text-slate-300" : "text-gray-700"
+            } text-lg font-medium`}
+          >
             Track your GitHub journey
           </p>
         </div>
 
         {/* Form Card */}
-        <div className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${mode === "dark" ? "bg-white/10 backdrop-blur-xl border-white/20 text-white" : "bg-white border-gray-200 text-black"}`}>
-          <h2 className={`text-2xl font-bold text-center mb-8 ${mode === "dark" ? "text-white" : "text-gray-800"}`}>
+        <div
+          className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${
+            mode === "dark"
+              ? "bg-white/10 backdrop-blur-xl border-white/20 text-white"
+              : "bg-white border-gray-200 text-black"
+          }`}
+        >
+          <h2
+            className={`text-2xl font-bold text-center mb-8 ${
+              mode === "dark" ? "text-white" : "text-gray-800"
+            }`}
+          >
             Welcome Back
           </h2>
 
@@ -134,18 +192,24 @@ const Login: React.FC = () => {
 
           {/* Message */}
           {message && (
-            <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${
-              message === "Login successful"
-                ? "bg-green-500/20 text-green-300 border border-green-500/30"
-                : "bg-red-500/20 text-red-300 border border-red-500/30"
-            }`}>
+            <div
+              className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${
+                message === "Login successful"
+                  ? "bg-green-500/20 text-green-300 border border-green-500/30"
+                  : "bg-red-500/20 text-red-300 border border-red-500/30"
+              }`}
+            >
               {message}
             </div>
           )}
 
-          {/* Footer Text */}
+          {/* Footer */}
           <div className="text-center mt-8 pb-8">
-            <p className={`${mode === "dark" ? "text-slate-500" : "text-gray-600"} text-sm`}>
+            <p
+              className={`${
+                mode === "dark" ? "text-slate-500" : "text-gray-600"
+              } text-sm`}
+            >
               Don't have an account?
               <Link
                 to="/signup"
@@ -158,9 +222,13 @@ const Login: React.FC = () => {
         </div>
       </div>
 
-      <div className={`${mode === "dark" ? "from-slate-900" : "from-slate-100"} absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`} />
+      <div
+        className={`${
+          mode === "dark" ? "from-slate-900" : "from-slate-100"
+        } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`}
+      />
     </div>
   );
 };
 
-export default Login;
\ No newline at end of file
+export default Login;
diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index 2ac51dcc..880607c7 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -2,7 +2,7 @@ import React, { useState, useContext } from "react";
 import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
 import { motion } from "framer-motion";
-import { User, Mail, Lock, Eye, EyeOff } from "lucide-react";
+import { User, Mail, Lock, Eye, EyeOff, ArrowLeft } from "lucide-react";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
 
@@ -20,14 +20,17 @@ const SignUp: React.FC = () => {
     email: "",
     password: "",
   });
+
   const [message, setMessage] = useState<string>("");
   const [errors, setErrors] = useState({
     username: "",
     email: "",
     password: "",
   });
+
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+
   const navigate = useNavigate();
   const themeContext = useContext(ThemeContext) as ThemeContextType;
   const { mode } = themeContext;
@@ -35,7 +38,9 @@ const SignUp: React.FC = () => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
+
     let errorMessage = "";
+
     if (name === "username") {
       if (!value.trim()) {
         errorMessage = "Username is required";
@@ -43,6 +48,7 @@ const SignUp: React.FC = () => {
         errorMessage = "Only letters are allowed";
       }
     }
+
     if (name === "email") {
       if (!value.trim()) {
         errorMessage = "Email is required";
@@ -50,50 +56,71 @@ const SignUp: React.FC = () => {
         errorMessage = "Enter a valid email";
       }
     }
+
     if (name === "password") {
       if (!value.trim()) {
         errorMessage = "Password is required";
-      } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(value)) {
-        errorMessage = "Password must be 8+ characters with letters and numbers";
+      } else if (
+        !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(value)
+      ) {
+        errorMessage =
+          "Password must be 8+ characters with letters and numbers";
       }
     }
+
     setErrors((prev) => ({ ...prev, [name]: errorMessage }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
     const usernameError = !formData.username.trim()
       ? "Username is required"
       : !/^[A-Za-z\s]+$/.test(formData.username)
-      ? "Only letters are allowed"
-      : "";
+        ? "Only letters are allowed"
+        : "";
+
     const emailError = !formData.email.trim()
       ? "Email is required"
       : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim())
-      ? "Enter a valid email"
-      : "";
+        ? "Enter a valid email"
+        : "";
+
     const passwordError = !formData.password.trim()
       ? "Password is required"
-      : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(formData.password)
-      ? "Password must be 8+ characters with letters and numbers"
-      : "";
+      : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(
+            formData.password,
+          )
+        ? "Password must be 8+ characters with letters and numbers"
+        : "";
+
     if (usernameError || emailError || passwordError) {
-      setErrors({ username: usernameError, email: emailError, password: passwordError });
+      setErrors({
+        username: usernameError,
+        email: emailError,
+        password: passwordError,
+      });
       return;
     }
+
     setIsLoading(true);
+
     try {
-      const response = await axios.post(`${backendUrl}/api/auth/signup`,
-        formData // Include cookies for session
+      const response = await axios.post(
+        `${backendUrl}/api/auth/signup`,
+        formData,
       );
-      setMessage(response.data.message); // Show success message from backend
 
-      // Navigate to login page after successful signup
-      if (response.data.message === 'User created successfully') {
+      setMessage(response.data.message);
+
+      if (response.data.message === "User created successfully") {
         navigate("/login");
       }
     } catch (error: any) {
-      setMessage(error.response?.data?.message || "Something went wrong. Please try again.");
+      setMessage(
+        error.response?.data?.message ||
+          "Something went wrong. Please try again.",
+      );
     } finally {
       setIsLoading(false);
     }
@@ -107,6 +134,7 @@ const SignUp: React.FC = () => {
           : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
       }`}
     >
+      {/* Background */}
       <div className="absolute inset-0">
         <div
           className={`absolute -top-40 -right-40 w-96 h-96 ${
@@ -123,27 +151,55 @@ const SignUp: React.FC = () => {
             mode === "dark" ? "bg-pink-500" : "bg-pink-300"
           } rounded-full blur-3xl opacity-30 animate-pulse`}
         />
-        <div
-          className={`absolute top-1/2 right-1/4 w-64 h-64 ${
-            mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"
-          } rounded-full blur-2xl opacity-20 animate-pulse delay-1000`}
-        />
       </div>
 
       <div className="relative w-full max-w-md px-4 sm:px-6">
+        {/* ✅ BACK TO HOME BUTTON ADDED */}
+        <button
+          onClick={() => navigate("/")}
+          className={`mb-6 flex items-center gap-2 px-4 py-2 rounded-xl backdrop-blur-xl border transition-all duration-300 hover:scale-105 active:scale-95 ${
+            mode === "dark"
+              ? "bg-white/10 text-white border-white/20 hover:bg-white/20"
+              : "bg-white/70 text-gray-800 border-gray-200 hover:bg-white"
+          }`}
+        >
+          <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-1" />
+          Back to Home
+        </button>
+
+        {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
           className="text-center mb-10"
         >
-          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
-            <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
+          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl overflow-hidden">
+            <img
+              src="/crl-icon.png"
+              alt="Logo"
+              className="w-14 h-14 object-contain"
+            />
           </div>
-          <h1 className={`text-4xl font-bold mb-2 ${mode === "dark" ? "text-white" : "text-black"}`}>GitHubTracker</h1>
-          <p className={`text-lg font-medium ${mode === "dark" ? "text-slate-300" : "text-gray-700"}`}>Join your GitHub journey</p>
+
+          <h1
+            className={`text-4xl font-bold mb-2 ${
+              mode === "dark" ? "text-white" : "text-black"
+            }`}
+          >
+            GitHubTracker
+          </h1>
+
+          <p
+            className={`text-lg font-medium ${
+              mode === "dark" ? "text-slate-300" : "text-gray-700"
+            }`}
+          >
+            Join your GitHub journey
+          </p>
         </motion.div>
 
+        {/* Form */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
@@ -154,87 +210,76 @@ const SignUp: React.FC = () => {
               : "bg-white border-gray-200 text-black"
           }`}
         >
-          
-          <h2
-            className={`text-2xl font-bold text-center mb-8 ${
-              mode === "dark" ? "text-white" : "text-gray-800"
-            }`}
-          >
+          <h2 className="text-2xl font-bold text-center mb-8">
             Create Account
           </h2>
 
           <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Username */}
             <div>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                  <User className="h-5 w-5 text-gray-400" />
-                </div>
-                <input type="text" name="username" placeholder="Enter your username" value={formData.username} onChange={handleChange} required
-                  className={`w-full pl-12 pr-4 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
-                />
-              </div>
-              {errors.username && <p className="text-red-500 text-sm mt-2">{errors.username}</p>}
+              <input
+                type="text"
+                name="username"
+                placeholder="Enter your username"
+                value={formData.username}
+                onChange={handleChange}
+                className="w-full px-4 py-4 rounded-2xl border"
+              />
+              {errors.username && (
+                <p className="text-red-500 text-sm mt-2">{errors.username}</p>
+              )}
             </div>
 
+            {/* Email */}
             <div>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                  <Mail className="h-5 w-5 text-gray-400" />
-                </div>
-                <input type="email" name="email" placeholder="Enter your email" value={formData.email} onChange={handleChange} required
-                  className={`w-full pl-12 pr-4 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
-                />
-              </div>
-              {errors.email && <p className="text-red-500 text-sm mt-2">{errors.email}</p>}
+              <input
+                type="email"
+                name="email"
+                placeholder="Enter your email"
+                value={formData.email}
+                onChange={handleChange}
+                className="w-full px-4 py-4 rounded-2xl border"
+              />
+              {errors.email && (
+                <p className="text-red-500 text-sm mt-2">{errors.email}</p>
+              )}
             </div>
 
+            {/* Password */}
             <div>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                  <Lock className="h-5 w-5 text-gray-400" />
-                </div>
-                <input type={showPassword ? "text" : "password"} name="password" placeholder="Enter your password" value={formData.password} onChange={handleChange} required
-                  className={`w-full pl-12 pr-12 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
-                />
-                <button type="button" onClick={() => setShowPassword(!showPassword)} aria-label={showPassword ? "Hide password" : "Show password"} aria-pressed={showPassword}
-                  className={`absolute inset-y-0 right-0 pr-4 flex items-center transition-colors duration-200 ${mode === "dark" ? "text-slate-400 hover:text-white" : "text-gray-500 hover:text-gray-800"}`}>
-                  {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
-                </button>
-              </div>
-              {errors.password && <p className="text-red-500 text-sm mt-2">{errors.password}</p>}
+              <input
+                type={showPassword ? "text" : "password"}
+                name="password"
+                placeholder="Enter your password"
+                value={formData.password}
+                onChange={handleChange}
+                className="w-full px-4 py-4 rounded-2xl border"
+              />
+              {errors.password && (
+                <p className="text-red-500 text-sm mt-2">{errors.password}</p>
+              )}
             </div>
 
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold focus:ring-4 focus:ring-purple-500/50 transition-all duration-300 hover:scale-[1.02] hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 rounded-2xl"
             >
               {isLoading ? "Creating account..." : "Create Account"}
             </button>
           </form>
 
           {message && (
-            <div className={`text-center mt-6 p-3 rounded-xl ${message.includes("successfully") ? "text-green-600 bg-green-100" : "text-red-600 bg-red-100"}`}>
-              {message}
-            </div>
+            <div className="text-center mt-6 p-3 rounded-xl">{message}</div>
           )}
 
           <div className="text-center mt-8">
-            <p className={mode === "dark" ? "text-gray-300" : "text-gray-600"}>
-              Already have an account?{" "}
-              <Link to="/login" className={`font-medium hover:underline transition-colors duration-300 ${mode === "dark" ? "text-white" : "text-black"}`}>
-                Sign in here
-              </Link>
-            </p>
+            <Link to="/login" className="text-purple-500">
+              Already have an account? Sign in
+            </Link>
           </div>
         </motion.div>
       </div>
-
-      <div
-        className={`${
-          mode === "dark" ? "from-slate-900" : "from-slate-100"
-        } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`}
-      />
     </div>
   );
 };