);
}
diff --git a/src/Components/About.jsx b/src/Components/About.jsx
index e268d95..76965f2 100644
--- a/src/Components/About.jsx
+++ b/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 (
-
-
Welcome in About Page
+
+
+
+
+ Don’t squeeze in a sedan when you could relax in a van.
+
+
+
+ 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 😉)
+
+
+ Our team is full of vanlife enthusiasts who know firsthand the magic
+ of touring the world on 4 wheels.
+
+
+
+
+ Your destination is waiting. Your van is ready.
+
+
+
+
+
- )
+ );
}
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
new file mode 100644
index 0000000..9940f23
--- /dev/null
+++ b/src/Components/Footer.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
index 04cb875..69cb728 100644
--- a/src/Components/Home.jsx
+++ b/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 (
-
-
Welcome in Home Page
+
+
+
You got the travel plans, we got the travel vans.
+
Add adventure to your life by joining the #vanlife movement. Rent the perfect van to make your perfect road trip.
+ Find your Van
+
+
- )
+ );
}
diff --git a/src/Components/OrangeButton.jsx b/src/Components/OrangeButton.jsx
new file mode 100644
index 0000000..b426961
--- /dev/null
+++ b/src/Components/OrangeButton.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function OrangeButton({children}) {
+ return (
+
+ )
+}
diff --git a/src/Components/Vans.jsx b/src/Components/Vans.jsx
new file mode 100644
index 0000000..52d91e0
--- /dev/null
+++ b/src/Components/Vans.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Vans() {
+ return (
+
+
Welcome in Vans Page
+
+ );
+}
diff --git a/src/Server.js b/src/Server.js
new file mode 100644
index 0000000..79f42ff
--- /dev/null
+++ b/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)
+ })
+ }
+})
\ No newline at end of file
diff --git a/src/assets/Images/image 53.png b/src/assets/Images/image 53.png
new file mode 100644
index 0000000..cfbc91b
Binary files /dev/null and b/src/assets/Images/image 53.png differ
diff --git a/src/assets/Images/image 54.png b/src/assets/Images/image 54.png
deleted file mode 100644
index 641542d..0000000
Binary files a/src/assets/Images/image 54.png and /dev/null differ
diff --git a/src/index.css b/src/index.css
index 2f28f0b..453b467 100644
--- a/src/index.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 03959b9..61bd5e2 100644
--- a/tailwind.config.js
+++ b/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: [],