From d827f5b8a2857098c513360eca5890ee381fa096 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Thu, 23 Nov 2023 14:40:47 +0700
Subject: [PATCH] Refactor login and signup pages, add floating particles
 component

---
 frontend/src/components/FlaotingParticles.jsx |  9 +------
 .../components/authentication/LoginPage.jsx   | 27 +++++++++++++------
 .../components/authentication/SignUpPage.jsx  | 14 +++++++---
 .../components/landingPage/LandingPage.jsx    | 17 +++++++-----
 4 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/FlaotingParticles.jsx b/frontend/src/components/FlaotingParticles.jsx
index c6d103a..e621f55 100644
--- a/frontend/src/components/FlaotingParticles.jsx
+++ b/frontend/src/components/FlaotingParticles.jsx
@@ -8,14 +8,7 @@ export function FloatingParticles() {
   }, []);
 
   return (
-    <div
-      style={{
-        position: "absolute",
-        width: "100%",
-        height: "100vh",
-        zIndex: 0,
-        backgroundColor: "#EBF2FA",
-      }}>
+    <div style={{ width: "0%", height: "100vh" }}>
       <Particles
         id="particles"
         init={particlesInit}
diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index 3b306a2..28dd0a1 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/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" />
-      <div className="flex flex-row bg-neutral-400">
+      <NavPreLogin
+        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>
   );
diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 08628e8..0492412 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/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>
diff --git a/frontend/src/components/landingPage/LandingPage.jsx b/frontend/src/components/landingPage/LandingPage.jsx
index e26a44a..1b0bd9e 100644
--- a/frontend/src/components/landingPage/LandingPage.jsx
+++ b/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">
-                  <span className="relative text-base font-semibold text-white">Get started</span>
+                  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>
                 </a>
               </div>
             </div>