From 7f0ca359181efb525aaa99557d3e94f8c401eb6c Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Thu, 23 Nov 2023 00:56:21 +0700
Subject: [PATCH] Modify landing page

---
 .../components/landingPage/LandingPage.jsx    | 107 ++++++++----------
 1 file changed, 45 insertions(+), 62 deletions(-)

diff --git a/frontend/src/components/landingPage/LandingPage.jsx b/frontend/src/components/landingPage/LandingPage.jsx
index e40463d..1fe0e1e 100644
--- a/frontend/src/components/landingPage/LandingPage.jsx
+++ b/frontend/src/components/landingPage/LandingPage.jsx
@@ -1,70 +1,53 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGoogle, faGithub } from "@fortawesome/free-brands-svg-icons";
-
 export function LandingPage() {
   return (
-    <div className="flex flex-col min-h-screen  bg-gray-100 items-center">
-      <div className="bg-black text-white p-4 w-full">
-        <div className="container mx-auto flex justify-between items-center">
-          <h1 className="text-4xl font-bold">TurTask</h1>
-          <div className="space-x-4">
-            <a
-              href="\signup"
-              className="text-gray-300 hover:text-white border-b-2 border-transparent hover:border-white px-4 py-2 transition duration-300 font-bold">
-              Register
-            </a>
-            <a
-              href="\login"
-              className="text-gray-300 hover:text-white border-b-2 border-transparent hover:border-white px-4 py-2 transition duration-300 font-bold">
-              Login
-            </a>
-          </div>
+    <div>
+      <div className="navbar bg-base-100">
+        <div className="navbar-start">
+          <a className="btn btn-ghost text-xl">TurTask</a>
+        </div>
+        <div className="navbar-end space-x-3 pr-2">
+          <a className="btn" href="/login">
+            Login
+          </a>
+          <a className="btn" href="/signup">
+            Sign Up
+          </a>
         </div>
       </div>
-      <div className="container mx-auto flex-grow p-12">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div className="grid grid-rows-3">
-            <div className="text-center">
-              <img
-                src="https://img.freepik.com/vektoren-kostenlos/niedlich-schildkroete-meditation-yoga-karikatur-vektor-symbol-illustration-tier-sport-symbol-begriff-freigestellt_138676-6833.jpg"
-                alt="Your Picture"
-                className="rounded-full w-52 h-52 mx-auto mb-4"
-              />
-            </div>
-            <div className="text-left">
-              <h1 className="text-6xl font-bold mb-6">TurTask</h1>
-              <p className="text-5xl font-bold mb-6">Your Ultimate Task Management</p>
-            </div>
-            <div className="text-left">
-              <p className="text-gray-700 text-xl font-bold">
-                TurTask is a task and project management tool that incorporates gamification elements.
+      <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">
+                Manage your task with{" "}
+                <span className="text-primary">
+                  TurTask
+                  <label className="swap swap-flip text-6xl">
+                    <input type="checkbox" />
+                    <div className="swap-on">😇</div>
+                    <div className="swap-off">🥳</div>
+                  </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>
-            </div>
-          </div>
-          <div className="flex items-center justify-center w-full">
-            <div className="bg-white p-10 rounded-lg shadow-md w-full md:w-96 lg:w-1/2">
-              <h1 className="text-4xl font-semibold mb-6">Create your account</h1>
-              <p className="text-gray-700 mb-6 text-lg">Start spending more time on your own table.</p>
-              <div className="font-bold">
-                <div className="mb-4">
-                  <button className="flex items-center justify-center bg-blue-500 text-white px-10 py-3 rounded-lg">
-                    <span className="mr-3">
-                      <FontAwesomeIcon icon={faGoogle} />
-                    </span>
-                    Sign Up with Google
-                  </button>
-                </div>
-                <div className="mb-4">
-                  <button className="flex items-center justify-center bg-gray-800 text-white px-10 py-3 rounded-lg">
-                    <span className="mr-3">
-                      <FontAwesomeIcon icon={faGithub} />
-                    </span>
-                    Sign Up with Github
-                  </button>
-                </div>
-                <div>
-                  <button className="bg-green-500 text-white px-10 py-3 rounded-lg">Sign Up with your email.</button>
-                </div>
+              <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>
+                </a>
               </div>
             </div>
           </div>