From 1c80aa661931fb1ebf3cdd30a38b47dbe3f9756d Mon Sep 17 00:00:00 2001
From: Kerolos Fayez <57182650+kero1019@users.noreply.github.com>
Date: Mon, 1 Jul 2024 22:02:53 +0300
Subject: [PATCH] updating header and routes

---
 src/App.jsx               | 29 +++++++++--------------------
 src/Components/Header.jsx | 15 +++++++++++++++
 src/Components/Home.jsx   |  4 ++--
 src/Components/Layout.jsx | 11 +++++++++++
 4 files changed, 37 insertions(+), 22 deletions(-)
 create mode 100644 src/Components/Header.jsx
 create mode 100644 src/Components/Layout.jsx

diff --git a/src/App.jsx b/src/App.jsx
index a46f5d5..2050623 100644
--- a/src/App.jsx
+++ b/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>
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
new file mode 100644
index 0000000..8fc6b87
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
index 1088266..efc9d6e 100644
--- a/src/Components/Home.jsx
+++ b/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>
diff --git a/src/Components/Layout.jsx b/src/Components/Layout.jsx
new file mode 100644
index 0000000..08cf16f
--- /dev/null
+++ b/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>
+  );
+}