route changed

src/App.jsx

@@ -21,6 +21,7 @@ import {
 } from './routes';
 import AddNewProjectModal from './components/AddNewProjectModal';
 import FAQ from './pages/FAQ';
+import ProjectContent from './components/ProjectContent';
 
 function App() {
   return (
@@ -33,7 +34,9 @@ function App() {
           <Route path={ABOUT_ROUTE} element={<About />} />
           <Route path={CONTACT_ROUTE} element={<Contact />} />
           <Route path={LOGIN_ROUTE} element={<Login />} />
-          <Route path={PROJECT_ROUTE} element={<Project />} />
+          <Route path={PROJECT_ROUTE} element={<Project />}>
+            <Route path=":pId" element={ProjectContent} />
+          </Route>
           <Route path={SIGN_UP_ROUTE} element={<SignUp />} />
           <Route path={POSTS_ROUTE} element={<Posts />} />
           <Route path={FAQS_ROUTE} element={<FAQ />} />

src/components/ProjectContent.jsx

@@ -11,7 +11,7 @@ function ProjectContent({ title, type, address, date, pic, skills, isOpen }) {
         />
         <div className="flex flex-col">
           <h1 className="text-center sm:text-center md:text-left lg:text-left text-2xl text-blue-600 py-3 font-normal">
-            Name: {title}
+            {title.toUpperCase()}
           </h1>
           <span className="text-blue-600 text-center sm:text-center md:text-left lg:text-left">
             Deadline: {date.slice(0, 10)}

src/pages/Project/Project.jsx

@@ -8,7 +8,6 @@ function Project() {
   const project = useSelector((state) => state.projects.list);
   /* eslint no-underscore-dangle: 0 */
   const filteredP = project.filter((x) => x._id === params.pId).map((p) => p);
-
   return (
     <div className="container mx-auto px-8 py-6">
       {filteredP.map((p) => {