updating header and routes

src/App.jsx

@@ -4,31 +4,20 @@ import Home from "./Components/Home";
 import About from "./Components/About";
 import Vans from "./Components/Vans";
 import VanDetails from "./Components/VanDetails";
-import "./Server"
+import Layout from "./Components/Layout";
+import "./Server";
 
 function App() {
   return (
-    <div className=" h-screen">
+    <div className="">
       <BrowserRouter>
-        <header className="bg-main-background flex justify-between p-5 items-center h-[15%]">
-          <Link
-            // to="/Components/Home.jsx"
-            to="/VanLife/"
-            className=" font-extrabold text-[2rem]"
-          >
-            #VANLIFE
-          </Link>
-          <nav className="flex  gap-5 text-gray-text font-semibold">
-            <Link to="/VanLife/about">About</Link>
-            <Link to="/VanLife/vans">Vans</Link>
-          </nav>
-        </header>
         <Routes>
-          {/* <Route path="/Components/Home.jsx" element={<Home />} /> */}
-          <Route path="/VanLife/" element={<Home />} />
-          <Route path="/VanLife/about" element={<About />} />
-          <Route path="VanLife/vans" element={<Vans />} />
-          <Route path="VanLife/vanDetails/:id" element={<VanDetails />} />
+          <Route element={<Layout />}>
+            <Route path="/VanLife/" element={<Home />} />
+            <Route path="/VanLife/about" element={<About />} />
+            <Route path="VanLife/vans" element={<Vans />} />
+            <Route path="VanLife/vanDetails/:id" element={<VanDetails />} />
+          </Route>
         </Routes>
       </BrowserRouter>
     </div>

src/Components/Header.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Link } from "react-router-dom";
+export default function Header() {
+  return (
+    <header className="bg-main-background flex justify-between p-5 items-center h-[15%]">
+      <Link to="/VanLife/" className=" font-extrabold text-[2rem]">
+        #VANLIFE
+      </Link>
+      <nav className="flex  gap-5 text-gray-text font-semibold">
+        <Link to="/VanLife/about">About</Link>
+        <Link to="/VanLife/vans">Vans</Link>
+      </nav>
+    </header>
+  );
+}

src/Components/Home.jsx

@@ -3,8 +3,8 @@ import Footer from "./Footer";
 import OrangeButton from "./OrangeButton";
 export default function Home() {
   return (
-    <div className="home-content h-[85%] home">
-      <div className="image w-full h-[85%] text-white p-6 flex flex-col justify-around">
+    <div className="home-content h-[85%]  home">
+      <div className="image h-[85%] text-white p-6 flex flex-col justify-around">
         <p className="text-[3rem] font-bold ">You got the travel plans, we got the travel vans.</p>
         <p className="">Add adventure to your life by joining the #vanlife movement. Rent the perfect van to make your perfect road trip.</p>
         <OrangeButton>Find your Van</OrangeButton>

src/Components/Layout.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import Header from "./Header";
+export default function Layout() {
+  return (
+    <div className="h-screen">
+      <Header />
+      <Outlet />
+    </div>
+  );
+}