creating Home page and About Page

src/App.jsx

@@ -1,21 +1,33 @@
 import React from "react";
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 import Home from "./Components/Home";
 import About from "./Components/About";
-import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import Vans from "./Components/Vans";
+// import "./Server"
+
 function App() {
   return (
-    <BrowserRouter>
-      <header>
-        <Link to="/Components/Home.jsx">#VANLIFE</Link>
-        <nav>
-          <Link to="/Components/About.jsx">About Page</Link>
-        </nav>
-      </header>
-      <Routes>
-        <Route path="/Components/Home.jsx" element={<Home />} />
-        <Route path="/Components/About.jsx" element={<About />} />
-      </Routes>
-    </BrowserRouter>
+    <div className=" h-screen">
+      <BrowserRouter>
+        <header className="bg-main-background flex justify-between p-5 items-center h-[15%]">
+          <Link
+            to="/Components/Home.jsx"
+            className=" font-extrabold text-[2rem]"
+          >
+            #VANLIFE
+          </Link>
+          <nav className="flex  gap-5 text-gray-text font-semibold">
+            <Link to="/Components/About.jsx">About</Link>
+            <Link to="/Components/Vans.jsx">Vans</Link>
+          </nav>
+        </header>
+        <Routes>
+          <Route path="/Components/Home.jsx" element={<Home />} />
+          <Route path="/Components/About.jsx" element={<About />} />
+          <Route path="/Components/Vans.jsx" element={<Vans />} />
+        </Routes>
+      </BrowserRouter>
+    </div>
   );
 }
 

src/Components/About.jsx

@@ -1,9 +1,35 @@
-import React from 'react'
+import React from "react";
+import Footer from "./Footer";
 
 export default function About() {
   return (
-    <div>
-      <h1>Welcome in About Page</h1>
+    <div className=" h-[85%]">
+      <div className="image2 h-[90%]"></div>
+      <div className="bg-main-background flex flex-col p-6 gap-10 ">
+        <p className="text-normal-text font-bold text-[2rem]">
+          Don’t squeeze in a sedan when you could relax in a van.
+        </p>
+        <div className="flex flex-col gap-16 text-[1.2rem]">
+          <p>
+            Our mission is to enliven your road trip with the perfect travel van
+            rental. Our vans are recertified before each trip to ensure your
+            travel plans can go off without a hitch. (Hitch costs extra 😉)
+          </p>
+          <p>
+            Our team is full of vanlife enthusiasts who know firsthand the magic
+            of touring the world on 4 wheels.
+          </p>
+        </div>
+        <div className="bg-light-orange rounded-lg flex flex-col gap-10  p-10 mb-10">
+          <p className="font-bold text-normal-text text-[1.5rem] ">
+            Your destination is waiting. Your van is ready.
+          </p>
+          <button className="text-white font-semibold bg-black w-fit p-5 rounded-lg">
+            Explore our vans
+          </button>
+        </div>
+      </div>
+      <Footer />
     </div>
-  )
+  );
 }

src/Components/Footer.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Footer() {
+  return (
+    <div className="bg-footer-background text-footer-text p-4 justify-center h-[15%] flex items-center gap-1">
+      <span className="text-[1.5rem]">&copy;</span> 2024 #VANLLIFE
+    </div>
+  );
+}

src/Components/Home.jsx

@@ -1,9 +1,15 @@
-import React from 'react'
-
+import React from "react";
+import Footer from "./Footer";
+import OrangeButton from "./OrangeButton";
 export default function Home() {
   return (
-    <div>
-      <h1>Welcome in Home Page</h1>
+    <div className="bg-green-500 home-content h-[85%]">
+      <div className="image w-full 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>
+      </div>
+        <Footer />
     </div>
-  )
+  );
 }

src/Components/OrangeButton.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function OrangeButton({children}) {
+  return (
+    <button className='bg-orange p-5 rounded-lg w-full font-bold'>{children}</button>
+  )
+}

src/Components/Vans.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Vans() {
+  return (
+    <div>
+      <h1>Welcome in Vans Page</h1>
+    </div>
+  );
+}

src/Server.js

@@ -0,0 +1,30 @@
+import { createServer, Model } from "miragejs"
+
+
+createServer({
+  models: {
+    vans: Model,
+  },
+
+  seeds(server) {
+    server.create("van", { id: "1", name: "Modest Explorer", price: 60, description: "The Modest Explorer is a van designed to get you out of the house and into nature. This beauty is equipped with solar panels, a composting toilet, a water tank and kitchenette. The idea is that you can pack up your home and escape for a weekend or even longer!", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/modest-explorer.png", type: "simple" })
+    server.create("van", { id: "2", name: "Beach Bum", price: 80, description: "Beach Bum is a van inspired by surfers and travelers. It was created to be a portable home away from home, but with some cool features in it you won't find in an ordinary camper.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/beach-bum.png", type: "rugged" })
+    server.create("van", { id: "3", name: "Reliable Red", price: 100, description: "Reliable Red is a van that was made for travelling. The inside is comfortable and cozy, with plenty of space to stretch out in. There's a small kitchen, so you can cook if you need to. You'll feel like home as soon as you step out of it.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/reliable-red.png", type: "luxury" })
+    server.create("van", { id: "4", name: "Dreamfinder", price: 65, description: "Dreamfinder is the perfect van to travel in and experience. With a ceiling height of 2.1m, you can stand up in this van and there is great head room. The floor is a beautiful glass-reinforced plastic (GRP) which is easy to clean and very hard wearing. A large rear window and large side windows make it really light inside and keep it well ventilated.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/dreamfinder.png", type: "simple" })
+    server.create("van", { id: "5", name: "The Cruiser", price: 120, description: "The Cruiser is a van for those who love to travel in comfort and luxury. With its many windows, spacious interior and ample storage space, the Cruiser offers a beautiful view wherever you go.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/the-cruiser.png", type: "luxury" })
+    server.create("van", { id: "6", name: "Green Wonder", price: 70, description: "With this van, you can take your travel life to the next level. The Green Wonder is a sustainable vehicle that's perfect for people who are looking for a stylish, eco-friendly mode of transport that can go anywhere.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/green-wonder.png", type: "rugged" })
+  },
+
+  routes() {
+    this.namespace = "api"
+
+    this.get("/vans", (schema, request) => {
+      return schema.vans.all()
+    })
+
+    this.get("/vans/:id", (schema, request) => {
+      const id = request.params.id
+      return schema.vans.find(id)
+    })
+  }
+})

src/index.css

@@ -32,3 +32,11 @@ body{
 }
 
 /* End of Global Rules */
+.image{
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.46)), url("./assets/Images/image\ 53.png") no-repeat center center;
+  background-size: cover;
+}
+.image2{
+  background: url("./assets/Images/image\ 55.png") no-repeat center center ;
+  background-size: cover;
+}

tailwind.config.js

@@ -7,7 +7,6 @@ export default {
   theme: {
     extend: {
       colors:{
-        "black":"000000",
         "white":"#FFFFFF",
         "main-background":"#FFF7ED",
         "light-beige":"#FFEAD0",
@@ -20,7 +19,7 @@ export default {
         "orange-button":"#E17654",
         "black-button":"#161616",
         "green-button":"#115E59",
-      }
+      },
     },
   },
   plugins: [],