From 6310bd62f4e8e85b9c8c0377f980311ef90c5bf8 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Thu, 23 Nov 2023 02:14:15 +0700
Subject: [PATCH] Add smooth scrolling and fix formatting issues

---
 .../components/authentication/LoginPage.jsx   |  14 +-
 .../components/authentication/SignUpPage.jsx  |   9 +-
 .../components/landingPage/LandingPage.jsx    | 134 +++++++++++++++---
 3 files changed, 127 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index dff40ab..bfd942b 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/frontend/src/components/authentication/LoginPage.jsx
@@ -42,7 +42,8 @@ function LoginPage() {
         // On successful login, store tokens and set the authorization header
         localStorage.setItem("access_token", res.data.access);
         localStorage.setItem("refresh_token", res.data.refresh);
-        axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access;
+        axiosapi.axiosInstance.defaults.headers["Authorization"] =
+          "Bearer " + res.data.access;
         setIsAuthenticated(true);
         redirect("/");
       })
@@ -85,7 +86,10 @@ function LoginPage() {
   }, []);
 
   return (
-    <div data-theme="night" className="h-screen flex items-center justify-center">
+    <div
+      data-theme="night"
+      className="h-screen flex items-center justify-center"
+    >
       {/* Particles Container */}
       <div style={{ width: "0%", height: "100vh" }}>
         <Particles
@@ -95,6 +99,7 @@ function LoginPage() {
           className="-z-10"
           options={{
             fpsLimit: 240,
+            smooth: true,
             interactivity: {
               events: {
                 onClick: {
@@ -199,7 +204,10 @@ function LoginPage() {
           </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/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 6bcc8dc..7d73580 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -7,7 +7,6 @@ import { loadFull } from "tsparticles";
 import { FcGoogle } from "react-icons/fc";
 import { useGoogleLogin } from "@react-oauth/google";
 
-
 function Copyright(props) {
   return (
     <div className="text-center text-sm text-gray-500" {...props}>
@@ -104,6 +103,7 @@ export default function SignUp() {
           className="-z-10"
           options={{
             fpsLimit: 240,
+            smooth: true,
             interactivity: {
               events: {
                 onClick: {
@@ -229,13 +229,12 @@ export default function SignUp() {
             className="btn btn-outline btn-secondary w-full "
             onClick={() => googleLoginImplicit()}
           >
-            <FcGoogle className="rounded-full bg-white"/>Login with Google
+            <FcGoogle className="rounded-full bg-white" />
+            Login with Google
           </button>
           {/* Already have an account? */}
           <div className="text-blue-500 flex justify-center text-sm">
-            <a href="login">
-              Already have an account?
-            </a>
+            <a href="login">Already have an account?</a>
           </div>
           <Copyright />
         </div>
diff --git a/frontend/src/components/landingPage/LandingPage.jsx b/frontend/src/components/landingPage/LandingPage.jsx
index 1fe0e1e..f5895ec 100644
--- a/frontend/src/components/landingPage/LandingPage.jsx
+++ b/frontend/src/components/landingPage/LandingPage.jsx
@@ -1,28 +1,119 @@
+import { useCallback } from "react";
+import Particles from "react-tsparticles";
+import { loadFull } from "tsparticles";
+
 export function LandingPage() {
+  const particlesInit = useCallback(async (engine) => {
+    console.log(engine);
+    await loadFull(engine);
+  }, []);
+
+  const particlesLoaded = useCallback(async (container) => {
+    console.log(container);
+  }, []);
   return (
-    <div>
-      <div className="navbar bg-base-100">
-        <div className="navbar-start">
-          <a className="btn btn-ghost text-xl">TurTask</a>
+    <div className="bg-black">
+      {/* Particles Container */}
+      <div
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100vh",
+          zIndex: 0,
+          backgroundColor: "black",
+        }}
+      >
+        <Particles
+          id="particles"
+          init={particlesInit}
+          loaded={particlesLoaded}
+          className="-z-10"
+          options={{
+            fpsLimit: 240,
+            smooth: true,
+            interactivity: {
+              events: {
+                onClick: {
+                  enable: true,
+                  mode: "push",
+                },
+                onHover: {
+                  enable: true,
+                  mode: "repulse",
+                },
+                resize: true,
+              },
+              modes: {
+                push: {
+                  quantity: 4,
+                },
+                repulse: {
+                  distance: 200,
+                  duration: 0.4,
+                },
+              },
+            },
+            particles: {
+              color: {
+                value: "#4f46e5",
+              },
+              links: {
+                color: "#818cf8",
+                distance: 150,
+                enable: true,
+                opacity: 0.5,
+                width: 1,
+              },
+              move: {
+                direction: "none",
+                enable: true,
+                outModes: {
+                  default: "bounce",
+                },
+                random: false,
+                speed: 2,
+                straight: false,
+              },
+              number: {
+                density: {
+                  enable: true,
+                  area: 800,
+                },
+                value: 100,
+              },
+              opacity: {
+                value: 0.5,
+              },
+              shape: {
+                type: "square",
+              },
+              size: {
+                value: { min: 4, max: 5 },
+              },
+            },
+            detectRetina: true,
+          }}
+        />
+      </div>
+      {/* Navbar */}
+      <div className="navbar bg-white z-10">
+        <div className="navbar-start z-10">
+          <a className="btn btn-ghost text-xl z-10 text-white">TurTask</a>
         </div>
-        <div className="navbar-end space-x-3 pr-2">
-          <a className="btn" href="/login">
+        <div className="navbar-end space-x-3 pr-2 z-10">
+          <a className="btn z-10" href="/login">
             Login
           </a>
-          <a className="btn" href="/signup">
+          <a className="btn z-10" href="/signup">
             Sign Up
           </a>
         </div>
       </div>
       <div className="relative" id="home">
-        <div aria-hidden="true" className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40">
-          <div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400"></div>
-          <div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
-        </div>
         <div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
           <div className="relative pt-36 ml-auto">
             <div className="lg:w-2/3 text-center mx-auto">
-              <h1 className="text-gray-900 font-bold text-5xl md:text-6xl xl:text-7xl">
+              <h1 className="text-gray-100 font-bold text-5xl md:text-6xl xl:text-7xl">
                 Manage your task with{" "}
                 <span className="text-primary">
                   TurTask
@@ -33,20 +124,19 @@ export function LandingPage() {
                   </label>
                 </span>
               </h1>
-              <p className="mt-8 text-gray-700">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio incidunt nam itaque sed eius modi error
-                totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!
+              <p className="mt-8 text-gray-400">
+                Unleash productivity with our all-in-one task and project
+                management solution. Streamline your workflow, automate tasks,
+                and conquer projects effortlessly.
               </p>
               <div className="mt-16 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>
-                </a>
-                <a
-                  href="#"
-                  className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:border before:border-transparent before:bg-primary/10 before:bg-gradient-to-b 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-primary">Placeholder</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>