Refactor login and signup pages, add floating

particles component

frontend/src/components/FlaotingParticles.jsx

@@ -8,14 +8,7 @@ export function FloatingParticles() {
   }, []);
 
   return (
-    <div
+    <div style={{ width: "0%", height: "100vh" }}>
-      style={{
-        position: "absolute",
-        width: "100%",
-        height: "100vh",
-        zIndex: 0,
-        backgroundColor: "#EBF2FA",
-      }}>
       <Particles
         id="particles"
         init={particlesInit}

frontend/src/components/authentication/LoginPage.jsx

@@ -65,8 +65,15 @@ export function LoginPage() {
 
   return (
     <div>
-      <NavPreLogin text="Don't have account?" btn_text="Sign Up" link="/signup" />
+      <NavPreLogin
-      <div className="flex flex-row bg-neutral-400">
+        text="Don't have account?"
+        btn_text="Sign Up"
+        link="/signup"
+      />
+      <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
+        {/* Particles Container */}
+
+        <FloatingParticles />
         {/* Login Box */}
         <div className="flex items-center justify-center flex-1 z-50">
           <div className="w-100 bg-white border-solid rounded-lg p-8 shadow space-y-4">
@@ -78,7 +85,8 @@ export function LoginPage() {
                   xmlns="http://www.w3.org/2000/svg"
                   className="stroke-current shrink-0 h-6 w-6"
                   fill="none"
-                  viewBox="0 0 24 24">
+                  viewBox="0 0 24 24"
+                >
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
@@ -122,20 +130,23 @@ export function LoginPage() {
               />
             </div>
             {/* Login Button */}
-            <button className="btn bg-blue-700 hover:bg-blue-900 w-full text-white font-bold" onClick={handleSubmit}>
+            <button
+              className="btn bg-blue-700 hover:bg-blue-900 w-full text-white font-bold"
+              onClick={handleSubmit}
+            >
               Login
             </button>
             <div className="divider">OR</div>
             {/* Login with Google Button */}
-            <button className="btn bg-gray-200 btn-outline w-full " onClick={() => googleLoginImplicit()}>
+            <button
+              className="btn bg-gray-200 btn-outline w-full "
+              onClick={() => googleLoginImplicit()}
+            >
               <FcGoogle className="rounded-full bg-white" />
               Login with Google
             </button>
           </div>
         </div>
-        <div className="basis-1/2 bg-#ebf2fa h-screen z-0">
-          <FloatingParticles />
-        </div>
       </div>
     </div>
   );

frontend/src/components/authentication/SignUpPage.jsx

@@ -5,6 +5,7 @@ import { useGoogleLogin } from "@react-oauth/google";
 import { NavPreLogin } from "../navigations/NavPreLogin";
 import { useAuth } from "src/hooks/AuthHooks";
 import { createUser, googleLogin } from "src/api/AuthenticationApi";
+import { FloatingParticles } from "../FlaotingParticles";
 
 export function SignUp() {
   const Navigate = useNavigate();
@@ -76,9 +77,13 @@ export function SignUp() {
 
   return (
     <div>
-      <NavPreLogin text="Already have an account?" btn_text="Log In" link="/login" />
+      <NavPreLogin
+        text="Already have an account?"
+        btn_text="Log In"
+        link="/login"
+      />
       <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
-        {/* ... (other code) */}
+        <FloatingParticles />
         <div className="w-1/4 h-1 flex items-center justify-center z-10">
           <div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
             {/* Register Form */}
@@ -136,7 +141,10 @@ export function SignUp() {
             </button>
             <div className="divider">OR</div>
             {/* Login with Google Button */}
-            <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
+            <button
+              className="btn btn-outline btn-secondary w-full "
+              onClick={() => googleLoginImplicit()}
+            >
               <FcGoogle className="rounded-full bg-white" />
               Login with Google
             </button>

frontend/src/components/landingPage/LandingPage.jsx

@@ -2,13 +2,10 @@ import { FloatingParticles } from "../FlaotingParticles";
 
 export function LandingPage() {
   return (
-    <div>
+    <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
       {/* Particles Container */}
       <FloatingParticles />
       {/* Navbar */}
-      <div className="navbar bg-white z-10">
-        <div className="navbar-end space-x-3 z-10"></div>
-      </div>
       <div className="relative" id="home">
         <div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
           <div className="relative pt-36 ml-auto">
@@ -24,12 +21,18 @@ export function LandingPage() {
                   </label>
                 </span>
               </h1>
-              <p className="mt-8 text-#143D6C">Unleash productivity with our personal task and project management.</p>
+              <p className="mt-8 text-#143D6C">
+                Unleash productivity with our personal task and project
+                management.
+              </p>
               <div className="mt-8 flex flex-wrap justify-center gap-y-4 gap-x-6">
                 <a
                   href="/login"
-                  className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
+                  className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
-                  <span className="relative text-base font-semibold text-white">Get started</span>
+                >
+                  <span className="relative text-base font-semibold text-white">
+                    Get started
+                  </span>
                 </a>
               </div>
             </div>