move all components that are exclusive to one page

src/pages/ProjectDetails/ProjectDetailsPage.jsx

@@ -0,0 +1,42 @@
+import { useParams } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import NavBar from "../../components/NavBar/NavBar.jsx";
+import ProjectDetails from "./components/ProjectDetails/ProjectDetails.jsx";
+import Footer from "../../components/Footer/Footer.jsx";
+
+function ProjectDetailsPage() {
+    const { id } = useParams();
+    const [project, setProject] = useState([]);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchProject = async () => {
+            try {
+                const response = await fetch(`/api/longProjects/${id}`);
+                if (!response.ok) {
+                    throw new Error(`Erreur HTTP: ${response.status}`);
+                }
+                const data = await response.json();
+                setProject(data);
+            } catch (err) {
+                setError(err.message);
+            }
+        };
+
+        fetchProject();
+    }, [id]);
+
+    if (error) {
+        return <p>Erreur : {error}</p>;
+    }
+
+
+    return (
+        <div>
+            <ProjectDetails project={project}/>
+            <Footer/>
+        </div>
+    );
+}
+
+export default ProjectDetailsPage;