Add : built html template for the landing page and tested it using vi…

…test,add the fb image as the desktop favicon

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/Page/LandingPage.tsx

@@ -1,11 +1,126 @@
 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}/`)
+  }
+
 
 
-export const LandingPage:React.FC = () => {
   return (
-    <div>LandingPage</div>
+    <>
+      <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/testing/LandingPage.test.tsx

@@ -0,0 +1,39 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { customRender } from "../utils/testingUtils";
+import { LandingPage } from '../Page/LandingPage';
+import { LogIn } from '../Auth/LogIn';
+import { SignUp } from '../Auth/SignUp';
+
+describe('Landing Page', () => {
+  test('it should display the header and hero section', () => {
+    customRender(<LandingPage />);
+    customRender(<LogIn onLogInSuccessful={() => {}}/>);
+    customRender(<SignUp onSignUpSuccessful={() => { }}/>)
+    expect(screen.getByTestId("appName")).toBeInTheDocument();
+
+    const logInLink = screen.getByTestId("logInLink");
+
+    fireEvent.click(logInLink);
+
+    expect(screen.getByTestId("loginContainer")).toBeInTheDocument();
+
+    expect(screen.getByText(/Manage Tasks Effortlessly with Real-Time Efficiency/i)).toBeInTheDocument();
+
+    const signupLink = screen.getByTestId("signupLink");
+
+    fireEvent.click(signupLink);
+
+    expect(screen.getByTestId("signUpContainer")).toBeInTheDocument();
+
+  })
+
+  test('it should display the features containers and the footer', () => {
+    customRender(<LandingPage />);
+    expect(screen.getByTestId("mainFeatures")).toBeInTheDocument();
+    expect(screen.getByTestId("features")).toBeInTheDocument();
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+
+  })
+
+
+})