Merge pull request #60 from TurTaskProject/feature/landing-page

Add landing page

frontend/src/App.jsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import "./App.css";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, Navigate } from "react-router-dom";
 import axios from "axios";
 import TestAuth from "./components/testAuth";
 import LoginPage from "./components/authentication/LoginPage";
@@ -13,6 +13,8 @@ import Eisenhower from "./components/EisenhowerMatrix/Eisenhower";
 import PrivateRoute from "./PrivateRoute";
 import ProfileUpdatePage from "./components/profilePage";
 import Dashboard from "./components/dashboard/dashboard";
+import { LandingPage } from "./components/landingPage/LandingPage";
+import PublicRoute from "./PublicRoute";
 
 import { useAuth } from "./hooks/AuthHooks";
 
@@ -60,10 +62,17 @@ const App = () => {
 const NonAuthenticatedComponents = () => {
   return (
     <div>
-      <NavBar />
       <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/signup" element={<SignUpPage />} />
+        <Route exact path="/l" element={<PublicRoute />}>
+          <Route exact path="/l" element={<LandingPage />} />
+        </Route>
+        <Route exact path="/login" element={<PublicRoute />}>
+          <Route exact path="/login" element={<LoginPage />} />
+        </Route>
+        <Route exact path="/signup" element={<PublicRoute />}>
+          <Route exact path="/signup" element={<SignUpPage />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/l" />} />
       </Routes>
     </div>
   );
@@ -91,8 +100,7 @@ const AuthenticatedComponents = () => {
             <Route exact path="/priority" element={<PrivateRoute />}>
               <Route exact path="/priority" element={<Eisenhower />} />
             </Route>
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/signup" element={<SignUpPage />} />
+            <Route path="*" element={<Navigate to="/" />} />
           </Routes>
         </div>
       </div>

frontend/src/PrivateRoute.jsx

@@ -3,7 +3,7 @@ import { useAuth } from "src/hooks/AuthHooks";
 
 const PrivateRoute = () => {
   const { isAuthenticated } = useAuth();
-  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
+  return isAuthenticated ? <Outlet /> : <Navigate to="/" />;
 };
 
 export default PrivateRoute;

frontend/src/PublicRoute.jsx

@@ -0,0 +1,9 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { useAuth } from "src/hooks/AuthHooks";
+
+const PublicRoute = () => {
+  const { isAuthenticated } = useAuth();
+  return isAuthenticated ? <Navigate to="/d" /> : <Outlet />;
+};
+
+export default PublicRoute;

frontend/src/components/dashboard/dashboard.jsx

@@ -1,24 +1,10 @@
-import {
-  Card,
-  Grid,
-  Tab,
-  TabGroup,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Text,
-  Title,
-  Legend,
-} from "@tremor/react";
+import { Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title, Legend } from "@tremor/react";
 import KpiCard from "./KpiCard";
 import { BarChartGraph } from "./Barchart";
 import DonutChartGraph from "./DonutChart";
 import { AreaChartGraph } from "./Areachart";
 import ProgressCircleChart from "./ProgressCircle";
 
-const valueFormatter = (number) =>
-  `$ ${new Intl.NumberFormat("us").format(number).toString()}`;
-
 export default function Dashboard() {
   return (
     <div className="flex flex-col p-12">
@@ -48,8 +34,7 @@ export default function Dashboard() {
                   <Legend
                     className="mt-3 mx-auto w-1/2"
                     categories={["Completed Tasks", "Assigned Tasks"]}
-                    colors={["indigo"]}
-                  ></Legend>
+                    colors={["indigo"]}></Legend>
                 </Card>
                 <Card>
                   <BarChartGraph />
@@ -60,18 +45,18 @@ export default function Dashboard() {
               </Grid>
             </TabPanel>
             <TabPanel>
-            <div className="h-31">
-                  <Card className="mx-auto h-full">
-                    <Title>Tasks</Title>
-                    <DonutChartGraph />
-                    <br />
-                    <Legend
-                      className="mt-3 mx-auto w-1/2"
-                      categories={["Todo Task", "Recurrence Task"]}
-                      colors={["rose", "yellow"]}
-                    />
-                  </Card>
-                </div>
+              <div className="h-31">
+                <Card className="mx-auto h-full">
+                  <Title>Tasks</Title>
+                  <DonutChartGraph />
+                  <br />
+                  <Legend
+                    className="mt-3 mx-auto w-1/2"
+                    categories={["Todo Task", "Recurrence Task"]}
+                    colors={["rose", "yellow"]}
+                  />
+                </Card>
+              </div>
             </TabPanel>
           </TabPanels>
         </TabGroup>

frontend/src/components/landingPage/LandingPage.jsx

@@ -0,0 +1,58 @@
+export function LandingPage() {
+  return (
+    <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="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 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>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/signup/Signup.jsx

@@ -1,39 +1,38 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGoogle, faGithub } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGoogle, faGithub } from "@fortawesome/free-brands-svg-icons";
 
 function Signup() {
-    return (
-        <div className="flex items-center justify-center h-screen">
-            <div className="flex flex-col items-center bg-white p-10 rounded-lg shadow-md">
-                <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-14 py-3 rounded-lg">
-                            <span className="mr-3"><FontAwesomeIcon icon={faGoogle} /></span>
-                            Sign Up with Google
-                        </button>
-                    </div>
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="flex flex-col items-center bg-white p-10 rounded-lg shadow-md">
+        <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-14 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-14 py-3 rounded-lg">
-                            <span className="mr-3"><FontAwesomeIcon icon={faGithub} /></span>
-                            Sign Up with Github
-                        </button>
-                    </div>
+          <div className="mb-4">
+            <button className="flex items-center justify-center bg-gray-800 text-white px-14 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-14 py-3 rounded-lg">
-                            Sign Up with your email.
-                        </button>
-                    </div>
-                </div>
-            </div>
+          <div>
+            <button className="bg-green-500 text-white px-14 py-3 rounded-lg">Sign Up with your email.</button>
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
 
 export default Signup;