added three pages instead of using one page

src/App.jsx

@@ -1,19 +1,24 @@
 /* ----- Third Party Imports ----- */
-import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 
 /* ----- Project Imports ----- */
 import "@/styles/App.css";
 import Header from "@/components/Header.jsx";
 import Footer from "@/components/Footer.jsx";
-import Content from "@/components/Content.jsx";
+import HomePage from "@/pages/Home";
-
+import ExpertisePage from "@/pages/Expertise";
+import ProjectsPage from "@/pages/Projects";
 
 function App() {
 
   return (
     <>
       <Header />
-      <Content />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/expertise" element={<ExpertisePage />} />
+        <Route path="/projects" element={<ProjectsPage />} />
+      </Routes>
       <Footer />
     </>
   )

src/pages/Expertise.jsx

@@ -0,0 +1,18 @@
+/* ----- Third Party Imports ----- */
+
+/* ----- Project Imports ----- */
+import "@/styles/App.css";
+import Header from "@/components/Header.jsx";
+import Footer from "@/components/Footer.jsx";
+import Content from "@/components/Content.jsx";
+
+export function ExpertisePage() {
+  return (
+    <>
+    <h2>You are at the most amazing home page on the planet</h2>
+    <p>Home sweet Home!</p>
+    </>
+  );
+};
+
+export default ExpertisePage;

src/pages/Home.jsx

@@ -0,0 +1,17 @@
+/* ----- Third Party Imports ----- */
+
+/* ----- Project Imports ----- */
+import "@/styles/App.css";
+import Details from "@/components/Details.jsx";
+import "@/styles/content.css";
+
+export function HomePage() {
+  return (
+    <>
+    <h2>You are at the most amazing home page on the planet</h2>
+    <p>Home sweet Home!</p>
+    </>
+  );
+};
+
+export default HomePage;

src/pages/Projects.jsx

@@ -0,0 +1,18 @@
+/* ----- Third Party Imports ----- */
+
+/* ----- Project Imports ----- */
+import "@/styles/App.css";
+import Header from "@/components/Header.jsx";
+import Footer from "@/components/Footer.jsx";
+import Content from "@/components/Content.jsx";
+
+export function ProjectsPage() {
+  return (
+    <>
+    <h2>You are at the most amazing home page on the planet</h2>
+    <p>Home sweet Home!</p>
+    </>
+  );
+};
+
+export default ProjectsPage;