adding vans page

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "miragejs": "^0.2.0-alpha.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0"

src/App.jsx

@@ -3,7 +3,7 @@ import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 import Home from "./Components/Home";
 import About from "./Components/About";
 import Vans from "./Components/Vans";
-// import "./Server"
+import "./Server"
 
 function App() {
   return (

src/Components/Button.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function Button({children, type}) {
+  let background;
+  if(type === "simple")
+  background = "bg-orange-button";
+  else if(type === "rugged")
+  background = "bg-green-button";
+  else if(type ==="luxury")
+  background = "bg-black-button";
+  else 
+  background = "bg-light-beige"
+  return (
+    <button className={` px-5 py-2 rounded-md  ${background} ${background ==="bg-light-beige" ? "text-gray-text" : "text-white capitalize w-[40%] car-button" }`}>{children}</button>
+  )
+}

src/Components/CarInfo.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Button from "./Button";
+/**
+ * {
+ * 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"
+ * }
+ */
+export default function CarInfo({ name, price, description, image, type }) {
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-8">
+        <img src={image} alt="Photo" className="rounded-md w-full" />
+        <div className="flex  justify-between items-center font-bold text-[1.2rem]">
+          <p>{name}</p>
+          <p className="">${price} / day</p>
+        </div>
+      </div>
+      <Button type={type}>{type}</Button>
+    </div>
+  );
+}

src/Components/Home.jsx

@@ -3,7 +3,7 @@ import Footer from "./Footer";
 import OrangeButton from "./OrangeButton";
 export default function Home() {
   return (
-    <div className="bg-green-500 home-content h-[85%]">
+    <div className="home-content h-[85%] home">
       <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>

src/Components/Vans.jsx

@@ -1,9 +1,49 @@
 import React from "react";
+import Button from "./Button";
+import CarInfo from "./CarInfo";
+import Footer from "./Footer";
 
 export default function Vans() {
+  // useState that hold the Date
+  const [data, setData] = React.useState([]);
+  // useEffect to fetch Data
+  React.useEffect(() => {
+    fetch("/api/vans")
+      .then((res) => res.json())
+      .then((data) => setData(data.vans));
+  }, []);
+  console.log(data);
   return (
-    <div>
-      <h1>Welcome in Vans Page</h1>
+    <div className="bg-main-background  ">
+      <div className="p-10 flex gap-10 flex-col">
+        <p className="font-bold text-[2rem]">Explore our van options</p>
+        <div className="flex items-center justify-between text-gray-text flex-wrap gap-4">
+          <div className="flex gap-5 flex-wrap">
+            <Button type={"bg-light-beige"}>Simple</Button>
+            <Button type={"bg-light-beige"}>Luxury</Button>
+            <Button type={"bg-light-beige"}>Rugged</Button>
+          </div>
+          <div className="">
+            <button>Clear filters</button>
+            <p className="w-full h-[0.1rem] bg-gray-text"></p>
+          </div>
+        </div>
+        <div className="grid grid-cols-3 gap-10 car-content">
+          {data.map((van) => {
+            return (
+              <CarInfo
+                key={van.id}
+                description={van.description}
+                image={van.imageUrl}
+                name={van.name}
+                price={van.price}
+                type={van.type}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <Footer />
     </div>
   );
 }

src/Server.js

@@ -17,6 +17,7 @@ createServer({
 
   routes() {
     this.namespace = "api"
+    this.logging = false
 
     this.get("/vans", (schema, request) => {
       return schema.vans.all()

src/index.css

@@ -11,12 +11,30 @@ body{
 }
 
 /* Start  Media queries */
+/* very small screen */
+@media (max-width:460px){
+  .home{
+    height: fit-content;
+  }
+  .car-content{
+    grid-template-columns: 1fr;
+  }
+}
 /* Small Screen */
-@media (min-width: 768px) {
+@media (min-width: 460px) {
+  .car-content{
+    grid-template-columns: 1fr 1fr;
+  }
+  .car-button{
+    width: 70%;
+  }
 }
 
 /* medium Screen */
 @media (min-width: 992px) {
+  .car-content{
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 }
 
 /* Large Screen */
@@ -37,6 +55,6 @@ body{
   background-size: cover;
 }
 .image2{
-  background: url("./assets/Images/image\ 55.png") no-repeat center center ;
+  background: url("./assets/images/image\ 55.png") no-repeat center center ;
   background-size: cover;
 }