Merge pull request #8 from Felix221123/develop

Side bar closing upon addtotask, editdeleet button clicked

frontend/index.html

@@ -5,7 +5,7 @@
     <link
       rel="icon"
       type="image/svg+xml"
-      href="/src/assets/desktop-logo-32x32.png"
+      href="./src/assets/portfolio-site-icon.jpg"
     />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta

frontend/src/App/taaskifyStyles.css

@@ -71,14 +71,14 @@
 }
 
 #overLayEffect {
-  position: fixed; /* Sit on top of the page content */
-  width: 100%; /* Full width (cover the whole page) */
-  height: 100%; /* Full height (cover the whole page) */
+  position: fixed;
+  width: 100%;
+  height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
-  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
-  cursor: pointer; /* Add a pointer on hover */
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+  cursor: pointer;
 }/*# sourceMappingURL=taaskifyStyles.css.map */

frontend/src/Page/LandingPage.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import HeroImage from "/src/assets/frontpageImg.png"
+import RealTimeSvg from "/src/assets/realtimeIcon.svg"
+import CustomisableColumnSvg from "/src/assets/Monitor.svg"
+import HighPerformanceSvg from "/src/assets/performanceIcon.svg"
+import AutomateUpdatesImg from "/src/assets/real-time.png"
+import CustomisableImg from "/src/assets/customisable.png"
+import DashboardImg from "/src/assets/dashboard.png"
+import { useNavigate } from "react-router-dom"
+
+
+export const LandingPage: React.FC = () => {
+
+  // calling the useNavigate component
+  const navigate = useNavigate();
+
+  // handles the navigation controller
+  const handleNavigation = (route:string) => {
+    const routeFormat = route.replace(/\s+/g, '-').toLowerCase()
+    navigate(`/${routeFormat}/`)
+  }
+
+
+
+  return (
+    <>
+      <div className="landingPage">
+        {/* header section */}
+        <header>
+          <div className="logo" data-testid='appName'>taaskify</div>
+          <button className="logInBtn" data-testid="logInLink" onClick={() => handleNavigation("login")}>Log In</button>
+        </header>
+        {/* hero section */}
+        <div className="heroSection">
+          <div className="textSection">
+            <h1>Manage Tasks Effortlessly with Real-Time Efficiency</h1>
+            <p className="description">
+              Taaskify offers a robust, real-time task management solution designed for individuals who value efficiency and flexibility.
+              With customisable Kanban boards, real-time notifications, and secure authentication, stay on top of every project no matter where you are.
+            </p>
+            <button className="signUpBtn" data-testid="signupLink" onClick={() => handleNavigation("signup")}>Try for free</button>
+          </div>
+          <div className="appImageSection">
+            <img src={HeroImage} alt="hero section image" />
+          </div>
+        </div>
+        {/* main features section */}
+        <div className="mainFeatures" data-testid='mainFeatures'>
+          <h2>Main Features</h2>
+          <p className="featureDescription">
+            Taaskify empowers individuals with a fully customisable task management solution.
+            Whether you're tracking daily activities or managing complex projects, our platform delivers
+            real-time monitoring, tailored dashboards, and high performance. Stay organised, boost productivity,
+            and keep your workflows running smoothly—all within a highly intuitive and secure environment.
+          </p>
+          <div className="features">
+            <div className="eachFeature">
+              <img src={RealTimeSvg} alt="real time icon" />
+              <article>Real-Time Monitoring</article>
+              <p className="description">Track and manage tasks 24/7 with real-time updates and notifications. Keep yourself and projects in sync at all times.</p>
+            </div>
+            <div className="eachFeature">
+              <img src={CustomisableColumnSvg} alt="customisable icon" />
+              <article>Customisable Columns</article>
+              <p className="description">Easily personalise your dashboard with a variety of columns tailored to suit your specific project needs</p>
+            </div>
+            <div className="eachFeature">
+              <img src={HighPerformanceSvg} alt="high performance icon" />
+              <article>High Performance</article>
+              <p className="description">Built for speed and reliability, Taaskify delivers top-notch performance, ensuring seamless task management even with large workloads.</p>
+            </div>
+          </div>
+        </div>
+        {/* feature explanation */}
+        <div className="featureExplanationContainer" data-testid='features'>
+          <div className="featureContainer">
+            <div className="textSection">
+              <article>
+                Automated Updates
+                & Column Tracking
+              </article>
+              <p className="description">
+              Stay informed and on top of your projects with Taaskify's automated system. Get real-time insights delivered straight to your dashboard. Customise your Kanban board’s column according to your needs.
+              </p>
+            </div>
+            <div className="imgContainer">
+              <img src={AutomateUpdatesImg} alt="feature image" />
+            </div>
+          </div>
+          <div className="featureContainer">
+            <div className="textSection">
+              <article>Fully customizable to address your needs</article>
+              <p className="description">
+              Taaskify adapts to your workflow, allowing you to tailor every aspect of task management to suit your specific requirements. Whether you need to customise columns, adjust notifications,Taaskify gives you full control to create a seamless project management experience
+              </p>
+            </div>
+            <div className="imgContainer">
+              <img src={CustomisableImg} alt="feature image" />
+            </div>
+          </div>
+          <div className="featureContainer">
+            <div className="textSection">
+              <article>Dashboard </article>
+              <p className="description">
+              Kickstart your projects with our ready-to-use dashboards, designed to help you visualise and manage tasks efficiently using boards.
+              </p>
+            </div>
+            <div className="imgContainer">
+              <img src={DashboardImg} alt="feature image" />
+            </div>
+          </div>
+        </div>
+        {/* footer */}
+        <footer data-testid='footer'>
+          <hr />
+          <div className="footerText">
+            <article className='uppercase font-bold'>taaskify</article>
+            <article>© Copyright 2024 Powered by <a href="https://felixbaah.com/" target="_blank" rel="noopener noreferrer" className='portfolio-link'>Felix Baah</a> </article>
+            <a href="mailto:contact@taaskify.com">contact@taaskify.com</a>
+          </div>
+        </footer>
+      </div>
+    </>
+  )
+}
+
+

frontend/src/Page/LandingPageStyles.css

@@ -0,0 +1,24 @@
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
+.ball:nth-child(1) {
+  animation: bounce 1.1s -0.32s infinite;
+}
+
+.ball:nth-child(2) {
+  animation: bounce 1.1s -0.16s infinite;
+}
+
+.ball:nth-child(3) {
+  animation: bounce 1.1s -0.25s infinite;
+}
+
+@keyframes bounce {
+  0% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+  80%, 100% {
+    transform: scale(0);
+  }
+}/*# sourceMappingURL=LandingPageStyles.css.map */

frontend/src/Page/LandingPageStyles.scss

@@ -0,0 +1,16 @@
+@import "../static/base";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// main styles selectors

frontend/src/Routes/AppRoute.tsx

@@ -11,6 +11,7 @@ import { useUser } from '../Context/User/useUser'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Loading } from '../components/Containers/Loading'
 import "../components/Containers/ContainersStyles.css"
+import { LandingPage } from '../Page/LandingPage'
 
 
 export const AppRoute: React.FC = () => {
@@ -52,8 +53,11 @@ export const AppRoute: React.FC = () => {
     <>
       <Router>
         <Routes>
+          {/* route for landing page */}
+          <Route index element={<LandingPage />} />
+          <Route path="/" element={<LandingPage />} />
           {/* route for login page  */}
-          <Route index element={<LogIn onLogInSuccessful={handleLoginSuccess} />} />
+          <Route element={<LogIn onLogInSuccessful={handleLoginSuccess} />} />
           {/* route for login page */}
           <Route path="/login/" element={<LogIn onLogInSuccessful={handleLoginSuccess} />} />
           {/* route for signup page */}