Aarushi Changes

Client/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

Client/src/App.js

@@ -1,13 +1,12 @@
-import logo from './logo.svg';
-import Login from './components/auth/login.js'
-import './App.css';
+import Feature4 from './components/onboarding/feature4.js';
 
 function App() {
   return (
     <div className="App">
-      <Login />
+      <Feature4 />
     </div>
   );
 }
 
+
 export default App;

Client/src/assets/buttons.css

@@ -0,0 +1,20 @@
+.btn-choice{
+    margin-top: 1vh;
+    border-radius: 1em;
+    border: 1.015px solid rgba(167, 233, 47, 0.70);
+    background: rgba(167, 233, 47, 0.20);
+    width: 80vw;    
+    padding-left: 5%;
+    text-align: left;
+    display: flex;
+    font-weight: 200;
+    flex-direction: row;
+}
+
+.btn-submit{
+    border-radius: 1em;
+    background-color: #A7E92F;
+    width: 80vw;
+    padding: 1%;
+}
+

Client/src/assets/onboarding.css

@@ -0,0 +1,90 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
+
+p {
+  color: #323844;
+  font-family: 'Poppins', sans-serif;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.onboarding {
+  display: flex;
+  flex-direction: column;
+}
+
+.icons {
+  display: flex;
+  flex-direction: row;
+  margin-top: 4vh;
+  justify-content: space-between;
+}
+
+.arrow-back {
+  margin-left: 2vw;
+  align-self: flex-start;
+}
+
+.volume-icon {
+  margin-right: 2vw;
+  align-self: flex-end;
+}
+
+.content3 {
+  margin-left: 5vw;
+  margin-right: 5vw;
+  text-justify: inter-word;
+}
+
+.btn {
+  bottom: 0;
+  position: absolute;
+  align-self: center;
+  margin-bottom: 10px;
+}
+
+.back {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 4vh;
+  margin-left: 2vw;
+}
+
+.back h3 {
+  margin-left: 2px; 
+}
+
+h3{
+  color: grey;
+  font-weight: 600;
+}
+
+.base-icons{
+  margin-top: 5vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.circle {
+  position: relative;
+  margin-right: 5%;
+}
+
+.circle::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  background-color: #A7E92F;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.arrow-icon {
+  position: relative;
+  z-index: 1;
+}

Client/src/components/onboarding/button-choice.js

@@ -0,0 +1,26 @@
+import "../../assets/buttons.css";
+import Checkbox from "@mui/material/Checkbox";
+
+const label = { inputProps: { "aria-label": "Checkbox demo" } };
+
+const ButtonChoice = (props) => {
+  return (
+    <center>
+      <div className="btn-choice">
+        <Checkbox
+          {...label}
+          defaultChecked
+          sx={{
+            color: "#A7E92F",
+            "&.Mui-checked": {
+              color: "#A7E92F",
+            },
+          }}
+        />
+        <p style={{fontWeight: 200}}>{props.label}</p>
+      </div>
+    </center>
+  );
+};
+
+export default ButtonChoice;

Client/src/components/onboarding/button-submit.js

@@ -0,0 +1,12 @@
+import "../../assets/buttons.css";
+const ButtonSubmit = (props) => {
+  return (
+    <center>
+      <div className="btn-submit">
+        <p>{props.label}</p>
+      </div>
+    </center>
+  );
+};
+
+export default ButtonSubmit;

Client/src/components/onboarding/feature1.js

@@ -0,0 +1,22 @@
+import React from "react";
+import feature1 from "../../assets/images/feature1.png";
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import "../../assets/onboarding.css";
+
+const Feature1 = () => {
+  return (
+    <div className="onboarding" style={{ marginTop: 50 }}>
+      <center>
+        <p style={{ fontSize: 30 }}>Offer taxi fair</p>
+        <p style={{ fontWeight: 200, marginLeft:30, marginRight:30, marginBottom:100}}>Put forward your own taxi fair. Get the best prices!</p>
+        <img src={feature1} />
+      </center>
+      <div className="base-icons" style={{ display: 'flex', alignItems: 'center' }}>
+        <h3 style={{marginLeft:10}}>Skip</h3>
+        <div className="circle"><ArrowForwardIosIcon className="arrow-icon" /></div>
+      </div>
+    </div>
+  );
+};
+
+export default Feature1;

Client/src/components/onboarding/feature2.js

@@ -0,0 +1,36 @@
+import React from "react";
+import feature2 from "../../assets/images/feature2.png";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import "../../assets/onboarding.css";
+
+const Feature2 = () => {
+  return (
+    <div className="onboarding" style={{ marginTop: 50 }}>
+      <center>
+        <p style={{ fontSize: 30 }}>Added features for specially abled</p>
+        <p
+          style={{
+            fontWeight: 200,
+            marginLeft: 30,
+            marginRight: 30,
+          }}
+        >
+          With enhanced accessibilty voice-prompts, equipped vehicles, AI chat
+          assistance, we make sure everyone’s travel requirements are fulfilled.
+        </p>
+        <img src={feature2} style={{width:'40vw'}} />
+      </center>
+      <div
+        className="base-icons"
+        style={{ display: "flex", alignItems: "center" }}
+      >
+        <h3 style={{ marginLeft: 10 }}>Skip</h3>
+        <div className="circle">
+          <ArrowForwardIosIcon className="arrow-icon" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Feature2;

Client/src/components/onboarding/feature3.js

@@ -0,0 +1,37 @@
+import React from "react";
+import feature3 from "../../assets/images/feature3.png";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import "../../assets/onboarding.css";
+
+const Feature3 = () => {
+  return (
+    <div className="onboarding" style={{ marginTop: 50 }}>
+      <center>
+        <p style={{ fontSize: 30 }}>Companion friendly</p>
+        <p
+          style={{
+            fontWeight: 200,
+            marginLeft: 30,
+            marginRight: 30,
+          }}
+        >
+          We make our services companion friendly, especially if you are
+          visually impaired. Bring along your service-animals and enjoy a safe
+          ride!
+        </p>
+        <img src={feature3} />
+      </center>
+      <div
+        className="base-icons"
+        style={{ display: "flex", alignItems: "center" }}
+      >
+        <h3 style={{ marginLeft: 10 }}>Skip</h3>
+        <div className="circle">
+          <ArrowForwardIosIcon className="arrow-icon" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Feature3;

Client/src/components/onboarding/feature4.js

@@ -0,0 +1,36 @@
+import React from "react";
+import feature4 from "../../assets/images/feature4.png";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import "../../assets/onboarding.css";
+
+const Feature4 = () => {
+  return (
+    <div className="onboarding" style={{ marginTop: 50 }}>
+      <center>
+        <p style={{ fontSize: 30 }}>Enjoy your ride</p>
+        <p
+          style={{
+            fontWeight: 200,
+            marginLeft: 30,
+            marginRight: 30,
+          }}
+        >
+          InDrive takes utmost care of your safety. We leave no stone unturned
+          to assure a safe and comfortable ride for you.
+        </p>
+        <img src={feature4} />
+      </center>
+      <div
+        className="base-icons"
+        style={{ display: "flex", alignItems: "center" }}
+      >
+        <h3 style={{ marginLeft: 10 }}>Skip</h3>
+        <div className="circle">
+          <ArrowForwardIosIcon className="arrow-icon" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Feature4;

Client/src/components/onboarding/locationCheck.js

@@ -0,0 +1,21 @@
+import React from "react";
+import ButtonSubmit from "./button-submit";
+import locationicon from '../../assets/images/loc-check.png';
+import "../../assets/onboarding.css";
+
+const LocationCheck = () => {
+  return (
+    <div className="onboarding">
+      <center>
+        <p style={{fontSize:20, marginTop: 50}}>Are you in this city?</p>
+      </center>
+      <center><img src={locationicon} style={{marginTop:200, width:200}} /></center>
+      <center><p style={{color:'#00C4FF'}}>Edit</p></center>
+      <div className="btn">
+      <center><ButtonSubmit label="Allow" /></center>
+      </div>
+    </div>
+  );
+};
+
+export default LocationCheck;

Client/src/components/onboarding/onboarding-name.js

@@ -0,0 +1,28 @@
+import React from "react";
+// import Form from "muicss/lib/react/form";
+// import Input from "muicss/lib/react/input";
+import ButtonSubmit from "./button-submit";
+import "../../assets/onboarding.css";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+
+const OnboardingName = () => {
+  return (
+    <div className="onboarding">
+      <div className="back">
+        <ArrowBackIosIcon style={{ color: "grey" }} />
+        <h3>Back</h3>
+      </div>
+      <center>
+        <p style={{ fontSize: 30, marginTop: 50 }}>Welcome to inDrive!</p>
+        <p style={{ fontWeight: 100 }}>Let's get aquainted</p>
+      </center>
+        <div className="btn">
+          <center>
+            <ButtonSubmit label="Next" />
+          </center>
+        </div>
+    </div>
+  );
+};
+
+export default OnboardingName;