Merge pull request Suneet25#39 from Suneet25/fw20_1276_day5

Fw20 1276 day5
jigna16 · Jan 21, 2023 · 1c89a66 · 1c89a66
2 parents 9b326dd + 5f6cd9e
commit 1c89a66
Show file tree

Hide file tree

Showing 17 changed files with 16,612 additions and 12,009 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,11 +5,15 @@
  "dependencies": {
  "@chakra-ui/icons": "^2.0.16",
  "@chakra-ui/react": "^2.4.9",
+ "@emotion/react": "^11.10.5",
+ "@emotion/styled": "^11.10.5",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "axios": "^1.2.2",
  "framer-motion": "^8.5.0",
+ "i": "^0.3.7",
+ "npm": "^9.3.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^4.7.1",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,11 +1,11 @@
 import "./App.css";
 <<<<<<< HEAD
-import AllRoutes from "./Components/AllRoutes";
+// import AllRoutes from "./Components/AllRoutes";
 
 // import Payment from "./Pages/Payment/Payment";
 =======
 // import AllRoutes from "./Components/AllRoutes";
->>>>>>> 89ff7814d9636d1605a2e51985ae3ae46c2807f9
+// import DateTime from "./Pages/HomePage/DateAndTime";
 // import Active from "./Pages/Payment/Active";
 // import Payment from "./Pages/Payment/Payment";
 // import Banking from "./Pages/Payment/Banking";
@@ -14,11 +14,16 @@ import AllRoutes from "./Components/AllRoutes";
 // import Wallet from "./Pages/Payment/Wallet";
 
 // import Home from "./Pages/HomePage/Home";
+// import Navbar from "./Pages/HomePage/NavBar";
+// import PickUp from "./Pages/HomePage/PickUp";
 
 function App() {
  return (
  <div className="App">
- {/* <AllRoutes/> */}
+ {/* <Navbar />
+ <AllRoutes /> */}
+ {/* <PickUp /> */}
+ {/* <DateTime /> */}
  </div>
  );
 }

diff --git a/src/Components/AllRoutes.jsx b/src/Components/AllRoutes.jsx
@@ -4,14 +4,19 @@ import CarsPage from "../Pages/CarsPage/CarsPage";
 import SingleCarsPage from "../Pages/CarsPage/SingleCarsPage";
 import Home from "../Pages/HomePage/Home";
 import Payment from "../Pages/Payment/Payment";
-
+import Loginpage from "./Loginpage";
+import SignupCard from "./Signuppage";
+import Hosts from "../Pages/HostPage/HostPage";
 const AllRoutes = () => {
  return (
  <Routes>
  <Route path="/" element={<Home />} />
  <Route path="/cars" element={<CarsPage />} />
  <Route path="/cars/:id" element={<SingleCarsPage />} />
  <Route path="/payment" element={<Payment />} />
+ <Route path="/login" element={<Loginpage />} />
+ <Route path="/signup" element={<SignupCard />} />
+ <Route path="/host" element={<Hosts />} />
  </Routes>
  );
 };

diff --git a/src/Pages/HomePage/BottomTag.jsx b/src/Pages/HomePage/BottomTag.jsx
@@ -10,33 +10,48 @@ const BottomTag = () => {
  padding: "30px 80px 30px 80px",
  }}
  >
- <Flex style={{ justifyContent: "space-evenly" }}>
+ <Flex
+ style={{ justifyContent: "space-evenly" }}
+ gap={{ base: "15px", md: "15px", lg: "20px" }}
+ >
  <Box style={{ cursor: "pointer" }}>
  <Link>
  {" "}
- <Heading as={"h5"} size="md">
+ <Heading
+ as={"h5"}
+ fontSize={{ base: "15px", md: "15px", lg: "20px" }}
+ >
  ABOUT US
  </Heading>
  </Link>
  </Box>
  <Box style={{ cursor: "pointer" }}>
  <Link>
- <Heading as={"h5"} size="md">
+ <Heading
+ as={"h5"}
+ fontSize={{ base: "15px", md: "15px", lg: "20px" }}
+ >
  BLOGS
  </Heading>
  </Link>
  </Box>
  <Box style={{ cursor: "pointer" }}>
  <Link>
- <Heading as={"h5"} size="md">
+ <Heading
+ as={"h5"}
+ fontSize={{ base: "15px", md: "15px", lg: "20px" }}
+ >
  CAREERS
  </Heading>
  </Link>
  </Box>
  <Box style={{ cursor: "pointer" }}>
  <Link>
  {" "}
- <Heading as={"h5"} size="md">
+ <Heading
+ as={"h5"}
+ fontSize={{ base: "15px", md: "15px", lg: "20px" }}
+ >
  HELP & SUPPORT
  </Heading>
  </Link>

diff --git a/src/Pages/HomePage/DateAndTime.jsx b/src/Pages/HomePage/DateAndTime.jsx
@@ -0,0 +1,55 @@
+// import { Box, Button } from "@chakra-ui/react";
+// import React, { useState } from "react";
+// import { DateRangePicker } from "react-date-range";
+// import { addDays } from "date-fns";
+// import "react-date-range/dist/styles.css";
+// import "react-date-range/dist/theme/default.css";
+// import { useNavigate } from "react-router-dom";
+
+// const DateTime = () => {
+// const navigate = useNavigate();
+// const [state, setState] = useState([
+// {
+// startDate: new Date(),
+// endDate: addDays(new Date(), 7),
+// key: "selection",
+// },
+// ]);
+
+// const handleSelect = (date) => {
+// let startDate = String(state[0]?.startDate);
+// let endDate = String(state[0]?.endDate);
+// let stDate = "";
+// let edDate = "";
+// for (let i = 0; i < 16; i++) {
+// stDate += startDate[i];
+// edDate += endDate[i];
+// }
+// localStorage.setItem("firstDay", JSON.stringify(stDate));
+// localStorage.setItem("lastDay", JSON.stringify(edDate));
+
+// navigate("/");
+// };
+
+// return (
+// <Box height={"100vh"} backgroundColor="white" color={"black"}>
+// <DateRangePicker
+// onChange={(item) => setState([item.selection])}
+// showSelectionPreview={true}
+// moveRangeOnFirstSelection={false}
+// months={2}
+// ranges={state}
+// direction="horizontal"
+// preventSnapRefocus={true}
+// calendarFocus="backwards"
+// />
+// <Box>
+// <Button backgroundColor="#e0e0e0" onClick={() => handleSelect(state)}>
+// Done
+// </Button>
+// </Box>
+// </Box>
+// );
+// };
+
+// export default DateTime;
diff --git a/src/Pages/HomePage/Footer.jsx b/src/Pages/HomePage/Footer.jsx
@@ -16,15 +16,21 @@ const Footer = () => {
  <Heading
  as="h4"
  size="md"
- style={{ paddingLeft: "60px", color: "white" }}
+ style={{
+ paddingLeft: "60px",
+ color: "white",
+ }}
  >
  We operate in many other cities
  </Heading>
  <br />
  <Heading
  as="h4"
  size="md"
- style={{ paddingLeft: "60px", color: "white" }}
+ style={{
+ paddingLeft: "60px",
+ color: "white",
+ }}
  >
  INDIA
  </Heading>
@@ -131,15 +137,7 @@ const Footer = () => {
  >
  Let's keep in touch
  </Heading>
- <Box
- style={{
- paddingLeft: "60px",
- color: "white",
- marginTop: "30px",
- display: "grid",
- gridTemplateColumns: "repeat(5,50px)",
- }}
- >
+ <Box className={foot.socials}>
  <Box>
  <FaTwitter style={{ width: "30px", height: "30px" }} />
  </Box>
@@ -160,13 +158,13 @@ const Footer = () => {
  <Box className={foot.QRcode} style={{}}>
  <Box
  style={{
- fontSize: "70px",
  fontWeight: "600",
  lineHeight: 1,
  letterSpacing: "normal",
  color: " #e0e0e0",
  opacity: 0.5,
  }}
+ fontSize={{ base: "15px", md: "50px", lg: "70px" }}
  >
  <Text>Never</Text>
  <Text>Stop</Text>
@@ -175,22 +173,35 @@ const Footer = () => {
  <Flex gap={"30px"}>
  <Box>
  <Image src="https://www.zoomcar.com/img/image.png"></Image>
- <Text color="white" textAlign={"center"}>
+ <Text
+ color="white"
+ textAlign={"center"}
+ fontSize={{ base: "15px", md: "20px", lg: "20" }}
+ >
  Scan this QR code to
  </Text>
  <Text color="white" textAlign={"center"}>
  download app.
  </Text>
  </Box>
  <Box>
- <Heading style={{ fontSize: "35px", color: "white" }}>
+ <Heading
+ style={{ color: "white" }}
+ fontSize={{ base: "10px", md: "15px", lg: "35px" }}
+ >
  DOWNLOAD ZOOMCAR APP
  </Heading>
  <br />
- <Heading style={{ fontSize: "25px", color: "white" }}>
+ <Heading
+ style={{ color: "white" }}
+ fontSize={{ base: "10px", md: "15px", lg: "25px" }}
+ >
  We have incredible offers, discounts &
  </Heading>
- <Heading style={{ fontSize: "25px", color: "white" }}>
+ <Heading
+ style={{ color: "white" }}
+ fontSize={{ base: "10px", md: "15px", lg: "25px" }}
+ >
  much more in our app
  </Heading>
  </Box>

diff --git a/src/Pages/HomePage/Home.jsx b/src/Pages/HomePage/Home.jsx
@@ -19,11 +19,12 @@ const Home = () => {
  <Poster2 />
  <CorouselTwo />
  <Poster3 />
+ <BottomTag />
  <Footer />
  {/* <AboutPage /> */}
- <BottomTag />
- <SignupCard />
- <Loginpage />
+
+ {/* <SignupCard />
+ <Loginpage /> */}
  </div>
  );
 };