BudgetPlanner Ui has been initialised

client/src/App.js

@@ -7,20 +7,23 @@ import Driver from "./pages/RideShare/driver/Driver";
 import PrivateDriverRoute from "./components/PrivateDriverRoute";
 import Passenger from "./pages/RideShare/passenger/Passenger";
 import PrivateRoute from "./components/PrivateRoute";
-import Header from './components/Header'
+import Header from "./components/Header";
+import Dummy from "./components/Dummy";
+
 // import Map from "./components/Map";
 
 function App() {
   return (
     <BrowserRouter>
-    <Header />
+      <Header />
       <Switch>
         <PrivateDriverRoute exact path="/driver" component={Driver} />
         <PrivateRoute exact path="/passenger" component={Passenger} />
         {/* <PrivateRoute exact path='/map' component={Map} /> */}
         <Route exact path="/register" component={Register} />
         <Route exact path="/login" component={Login} />
         <Route exact path="/" component={Home} />
+        <Route exact path="/dummy" component={Dummy} />
       </Switch>
     </BrowserRouter>
   );

client/src/components/Budgetplanner.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./BudgetPlanner.css";
+const Budgetplanner = () => {
+  return <div>Budgetplanner</div>;
+};
+
+export default Budgetplanner;

client/src/components/Dummy.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+
+import { FromAddressInput, ToAddressInput } from "./AddressInput";
+const Dummy = () => {
+  const [open, setOpen] = React.useState(false);
+  const [fromLocation, setFromLocation] = useState("");
+  const [toDestination, setToDestination] = useState("");
+  //   const [totalDistance, setTotalDistance] = useState(0);
+  //   const [mileage, setMileage] = useState(0);
+  //   const [hours, setHours] = useState(0);
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return (
+    <div>
+      <Button variant="outlined" onClick={handleClickOpen}>
+        Open form dialog
+      </Button>
+      <Card open={open} onClose={handleClose}>
+        <h1>Budget Planner</h1>
+        <CardContent>
+          <h5>
+            Our predictor works 99% of the time. We can 100% guarentee you that
+            the data which is entered here would never be revealed to any of the
+            sites.
+          </h5>
+          <div style={{ marginBottom: 20 }}>
+            <FromAddressInput fD={fromLocation} setFD={setFromLocation} />
+            <ToAddressInput tD={toDestination} setTD={setToDestination} />
+          </div>
+        </CardContent>
+        <CardActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleClose}>OK</Button>
+        </CardActions>
+      </Card>
+    </div>
+  );
+};
+
+export default Dummy;

client/src/pages/Home.css

@@ -1,15 +1,62 @@
-
+*{
+    margin-left:0;
+}
+.H-button{
+    height:50px;
+    width:150px;
+}
 .container {
     margin: 0 ;
     background-color: #1f2937;
     width: 100%;
 
 }
-
-.header {
+.Hm-about{
+    margin-top: 80px;
+    font-size:32px;
+    display: flex;
+    flex-direction: row;
+    width:100%;
+}
+.Hm-about-content{
+    width: 50% !important;;
+}
+.H-content{
+    display: flex;
+    flex-direction: row;
     background-color: #1f2937;
+    width:1500px;
+    height:60vh;
 }
+.wrapper{
+    display: flex;
+}
+.wrapper div{
+    width:25%;
+    height:400px;
+    background-color: lightgray;
+    margin:10px;
+}
+.Hm-content{
+    margin-top: 70px;
+    margin-left: 30vh;
+    width:40vh;
+    color:white;
+}
+.H-image{
+    height:200px;
+    width: 200px;
+}
+.Hm-heading{
+    font-size: 64px;
 
+    }
+.Hm-p{
+    margin-top: 70px;
+    font-size: 40px;
+}
+
+/* 
 nav {
     display: flex;
     align-items: center;
@@ -41,53 +88,8 @@ nav .navbar ul li a {
     color: #e5e7eb;
 }
 
-/** End Navbar **/
+* End Navbar * */
 
-.hero {
-    height:40vh;
-    width:100vh;
-    padding: 100px 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 30px;
-}
-
-.hero .hero-content  {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.hero .hero-content .hero-header {
-    font-size: 48px;
-    font-weight: bold;
-    color: #f9faf8;
-}
-
-.hero .hero-content .hero-desc {
-    font-size: 20px;
-    color: #f9faf8;
-    margin: 15px 0;
-}
-
-.hero .hero-img {
-    flex: 1;
-}
-
-.hero .hero-img img {
-    width: 100%;
+.header {
+
 }
-
-.hero .hero-content .btn {
-    display: block;
-    padding: 10px 30px;
-    border-radius: 5px;
-    border: none;
-    background-color: #3882f6;
-    color: #f9faf8;
-    font-size: 18px;
-    font-weight: 300;
-    text-transform: uppercase;
-}

client/src/pages/Home.js

@@ -1,28 +1,75 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import Variant from "../assets/variant.png";
 import "./Home.css";
+
 const Home = () => {
-  return(
-  <>        
+  return (
+    <>
       <section class="header">
         <div>
-            <div>
-                <div>
-                    <h1>Hello</h1>
-                    <p>Lorem Ipsum</p>
-                </div>
-                <img src="" alt="Hero-image"/>
+          <div className="H-content">
+            <div className="Hm-content">
+              <h1 classname="Hm-heading">Hello</h1>
+              <p className="Hm-p">Lorem Ipsum</p>
+              <button className="H-button">Signup</button>
             </div>
+            <img src={Variant} alt="Hero-image" classname="H-image" />
+          </div>
+          <hr />
+          <div>
             <div>
-                <div></div>
+              <h1 className="Hm-Heading" style={{ color: "#1f2937" }}>
+                About us
+              </h1>
             </div>
+            <div className="Hm-about">
+              <div className="Hm-about-content">
+                <p>Lorem</p>
+              </div>
+              <img src="" alt="image" style={{ marginLeft: 30 }}></img>
+            </div>
+          </div>
+          <hr />
+          <div style={{ backgroundColor: "#1f2937", color: "white" }}>
+            <h1 style={{ fontSize: 60, marginLeft: 20 }}>
+              <i>Inspiration</i>
+            </h1>
+            <h2 style={{ fontSize: 45, paddingTop: 40, paddingBottom: 40 }}>
+              <i>
+                <center>"Even dead I am the hero"</center>
+              </i>
+            </h2>
+          </div>
 
-
-
-
+          <hr />
+          <div style={{ paddingBottom: 40 }}>
+            <div className="wrapper">
+              <div>
+                <img src="" alt="computer-picture" />
+              </div>
+              <div>
+                <h1>
+                  <center>Step1</center>
+                </h1>
+                <p>lorem ipsum</p>
+              </div>
+              <div>
+                <h1>
+                  <center>Step2</center>
+                </h1>
+                <p>lorem ipsum</p>
+              </div>
+              <div>
+                <h1>
+                  <center>Step1</center>
+                </h1>
+                <p>lorem ipsum</p>
+              </div>
+            </div>
+          </div>
         </div>
-
-
+        <hr />
 
         {/* <div class="container">
             <div class="hero">
@@ -38,8 +85,8 @@ const Home = () => {
                 </div>
             </div>
         </div> */}
-    </section>
-   </>
+      </section>
+    </>
   );
 };