move footer call in App instead of calling it in every page

apps/frontend/src/App.jsx

@@ -3,15 +3,19 @@ import { Routes, Route } from 'react-router-dom';
 import HomePage from './pages/Home/HomePage.jsx';
 import ProjectsPage from './pages/Projects/ProjectsPage.jsx';
 import ProjectDetailsPage from "./pages/ProjectDetails/ProjectDetailsPage.jsx";
+import Footer from "./components/Footer/Footer.jsx";
 
 
 function App() {
     return (
-        <Routes>
+        <>
-            <Route path="/" element={<HomePage />} />
+            <Routes>
-            <Route path="/projects" element={<ProjectsPage />} />
+                <Route path="/" element={<HomePage />} />
-            <Route path="/projectDetails/:id" element={<ProjectDetailsPage />} />
+                <Route path="/projects" element={<ProjectsPage />} />
-        </Routes>
+                <Route path="/projectDetails/:id" element={<ProjectDetailsPage />} />
+            </Routes>
+            <Footer/>
+        </>
     )
 }
 

apps/frontend/src/pages/Home/HomePage.jsx

@@ -4,7 +4,6 @@ import Home from './components/Home/Home.jsx';
 import Experiences from './components/Experiences/Experiences.jsx';
 import Projects from '../../components/Projects/Projects.jsx';
 import Skills from './components/Skills/Skills.jsx';
-import Footer from '../../components/Footer/Footer.jsx';
 
 function HomePage() {
     const location = useLocation();
@@ -27,7 +26,6 @@ function HomePage() {
             <Experiences/>
             <Projects/>
             <Skills/>
-            <Footer/>
         </div>
     );
 }

apps/frontend/src/pages/ProjectDetails/ProjectDetailsPage.jsx

@@ -1,7 +1,6 @@
 import { useParams } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import ProjectDetails from "./components/ProjectDetails/ProjectDetails.jsx";
-import Footer from "../../components/Footer/Footer.jsx";
 
 function ProjectDetailsPage() {
     const { id } = useParams();
@@ -33,7 +32,6 @@ function ProjectDetailsPage() {
     return (
         <div>
             <ProjectDetails project={project}/>
-            <Footer/>
         </div>
     );
 }

apps/frontend/src/pages/Projects/ProjectsPage.jsx

@@ -1,11 +1,9 @@
 import Projects from "../../components/Projects/Projects.jsx";
-import Footer from "../../components/Footer/Footer.jsx";
 
 function ProjectsPage() {
     return (
         <div>
             <Projects/>
-            <Footer/>
         </div>
     );
 }