-
-
+ <>
+
+
+ {/*
*/}
+
+
+
+
+
+ {" "}
+ Save $3
+ with App {" "}
+
+
+ {" "}
+ Support Center {" "}
+
+
+ {" "}
+ Language {" "}
+
-
+ {" "}
+ Country Website {" "}
-
-
-
-
- Favourites
-
+
-
-
- {menuItems.map((e)=>(
-
{e.title}
- ))}
+
+
+
+
+
+
+
+
+
+
+
-
+
);
};
diff --git a/frontend/src/Components/Navbar/Navbar.module.css b/frontend/src/Components/Navbar/Navbar.module.css
index ac0241a..222a23e 100644
--- a/frontend/src/Components/Navbar/Navbar.module.css
+++ b/frontend/src/Components/Navbar/Navbar.module.css
@@ -1,11 +1,10 @@
-.outerbar{
- position: sticky;
- background-color:rgb(253, 250, 250);
- border-color: white;
-top:0;
-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
- /* border: 1px solid red; */
-
+.outerbar {
+ position: sticky;
+ background-color: rgb(253, 250, 250);
+ border-color: white;
+ top: 0;
+ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+ /* border: 1px solid red; */
}
.containerNavbar {
width: 95%;
@@ -55,83 +54,200 @@ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
margin-top: 0%;
font-size: 18px;
}
-
+.midScreenNavbar{
+ display: none;
+}
.navbarSearchSection {
height: 65px;
/* border: 1px solid black; */
-padding-top: 2%;
+ padding-top: 2%;
display: flex;
justify-content: space-between;
}
-.navbarSearchSection>div{
- width:60%;
- height: 38px;
- border-radius: 40px;
- display: flex;
- border:2px solid #ffda00;
+
+.navbarSearchSection > div {
+ width: 60%;
+ height: 38px;
+ border-radius: 40px;
+ display: flex;
+ border: 2px solid #ffda00;
}
-.navbarSearchSection>div>input{
- width:83%;
- height: 100%;
- padding-left: 3%;
- /* border:2px solid #04c74f; */
+.navbarSearchSection > div > input {
+ width: 83%;
+ height: 100%;
+ padding-left: 3%;
+ /* border:2px solid #04c74f; */
}
-.navbarSearchSection>div>input:focus{
- Outline:none !important
- }
-
+.navbarSearchSection > div > input:focus {
+ outline: none !important;
+}
-.navbarSearchSection>div>p{
- padding-top: 1.5%;
- width: 9%;
- padding-left: 2%;
- padding-right: 10px;
- border-top-right-radius: 18px;
- border-bottom-right-radius: 18px;
- background-color: #ffda00;
+.navbarSearchSection > div > p {
+ padding-top: 1.5%;
+ width: 9%;
+ padding-left: 2%;
+ padding-right: 10px;
+ border-top-right-radius: 18px;
+ border-bottom-right-radius: 18px;
+ background-color: #ffda00;
}
-.navbarSearchSection>div>select{
- width: 8%;
- padding-left: -1%;
- font-size: 14px;
- padding-right: -10%;
- border: none;
- margin-left: 3%;
- /* border:2px solid #04c74f; */
+.navbarSearchSection > div > select {
+ width: 8%;
+ padding-left: -1%;
+ font-size: 14px;
+ padding-right: -10%;
+ border: none;
+ margin-left: 3%;
+ /* border:2px solid #04c74f; */
}
-.navbarSearchSection>a{
- display: flex;
- margin-top: 1%;
+.navbarSearchSection > a {
+ display: flex;
+ margin-top: 1%;
}
-.navbarSearchSection>a>p{
- margin-top: -1%;
- margin-left: 5px;
- color: grey;
- }
+.navbarSearchSection > a > p {
+ margin-top: -1%;
+ margin-left: 5px;
+ color: grey;
+}
- .mainDropdown{
+.mainDropdown {
width: 95%;
height: 50px;
margin: auto;
- color:black;
- margin-top:2px;
- background:#ffda00;
+ color: black;
+ margin-top: 2px;
+ background: #ffda00;
display: flex;
- padding-left: 4%;
- /* padding-right: 4%; */
font-size: 14px;
font-weight: 500;
- padding-top: 1%;
- justify-content: left;
+ /* padding-top: 1%; */
+ justify-content: left;
}
-.mainDropdown>p{
+.mainDropdown > div {
font-weight: 700;
- margin-right: 12%;
-}
\ No newline at end of file
+ /* border: 1px solid red; */
+ /* margin-right: 12%; */
+ padding: 18px 85px;
+}
+
+.mainDropdown > div:first-child {
+ background-color: black;
+ color: white;
+}
+
+.megaDropdownBox {
+ width: 95%;
+ margin: auto;
+ height: 420px;
+ /* border: 1px solid green; */
+}
+.sideNavBtn {
+ width: 95%;
+ background: #ffda00;
+ margin: auto;
+}
+
+.navbardropdownName {
+ font-weight: bold;
+ color: black;
+ margin-left: -90%;
+ padding-top: 0%;
+ padding-bottom: 0%;
+}
+
+.carouselNavabr{
+ height:417px; width:100%
+}
+.footerLogoNavbarDropdown{
+ display: none;
+}
+
+
+.midSectionSign{
+ display: none;
+}
+/* <----------------------------------------------min screen---------------------> */
+@media screen and (max-width: 800px) {
+ .outerbar {
+ display: none;
+ }
+
+ .sideNavBtn {
+ width: 95%;
+ padding-left: 50%;
+ }
+
+ .sideNavbarCompo{
+ position:sticky;
+ z-index: 10;
+ top:0;
+ }
+ .navbardropdownName {
+ color: black;
+ font-size: 14px;
+ margin-left: -80%;
+
+ }
+ .carouselNavabr{
+ height:307px; width:100%
+ }
+
+
+ .footerLogoNavbarDropdown{
+ display: flex;
+ margin-top: 2%;
+ width: 100%;
+ margin-left: 2.3%;
+ margin-bottom: 2%;
+ height: 30px;
+
+ background-color: white;
+ }
+ .footerLogoNavbarDropdown>img{
+ display: block;
+ margin-top: 0%;
+ width: 25%;
+ height: 30px;
+ background-color: white;
+ }
+ .midScreenNavbar{
+ width: 42.8%;
+ margin-right: -0.3%;
+ margin-left: 2%;
+ height: 28px;
+ border-radius: 40px;
+ display: flex;
+ border: 2px solid #ffda00;
+ }
+ .midScreenNavbar>input{
+ font-size: 12px;
+ /* border: 1px solid red; */
+ width: 59%;
+ margin-right: 1%;
+ }
+ .midScreenNavbar>select{
+ /* border: 1px solid red; */
+width: 21%;
+border-bottom-left-radius: 10px;
+border-top-left-radius: 10px;
+
+margin-left: 1%;
+font-size: 10px;
+ }
+
+ .midSectionSign{
+ display: block;
+font-size: px;
+width: 1%;
+height:5%;
+margin-top: -2%;
+border: 1px solid red;
+ }
+}
diff --git a/frontend/src/Components/Navbar/NavbarCarousel.jsx b/frontend/src/Components/Navbar/NavbarCarousel.jsx
new file mode 100644
index 0000000..37a2549
--- /dev/null
+++ b/frontend/src/Components/Navbar/NavbarCarousel.jsx
@@ -0,0 +1,34 @@
+import Carousel from 'react-bootstrap/Carousel';
+import styles from "./Navbar.module.css"
+
+function NavbarCarousel() {
+
+ const carouselData =[
+ {img:"https://uidesign.gbtcdn.com/GB/image/8823/electronics_1190x420_en.jpg"},
+ {img:"https://uidesign.gbtcdn.com/GB/image/8823/en_1190x420.jpg?imbypass=true"},
+ {img:"https://uidesign.gbtcdn.com/GB/image/8823/printer_1190x420_en.jpg"},
+ {img:"https://uidesign.gbtcdn.com/GB/image/8823/home_1190x420_en.jpg"},
+ {img:"https://uidesign.gbtcdn.com/GB/image/8823/ortur_master3_1190X420_en.jpg"},
+ {img:"https://uidesign.gbtcdn.com/GB/image/8823/1190X420.jpg"}
+
+ ]
+
+ return (
+
+ {carouselData.map((e)=>(
+
+ 
+
+ ))}
+
+
+ );
+}
+
+export default NavbarCarousel;
\ No newline at end of file
diff --git a/frontend/src/Components/Navbar/SideNavbar.jsx b/frontend/src/Components/Navbar/SideNavbar.jsx
index 11c0079..035fc3e 100644
--- a/frontend/src/Components/Navbar/SideNavbar.jsx
+++ b/frontend/src/Components/Navbar/SideNavbar.jsx
@@ -1,45 +1,134 @@
-import React from 'react'
+import React from "react";
import {
- Drawer,
- DrawerBody,
- DrawerHeader,
- DrawerOverlay,
- DrawerContent,Button, DrawerCloseButton
-} from '@chakra-ui/react'
- import { useDisclosure } from '@chakra-ui/react'
+ MDBContainer,
+ MDBCol,
+ MDBNavbar,
+ MDBNavbarNav,
+ MDBNavbarItem,
+ MDBNavbarLink,
+ MDBDropdown,
+ MDBDropdownToggle,
+ MDBDropdownMenu,
+ MDBListGroup,
+ MDBListGroupItem,
+ MDBRow,
+ MDBIcon
+} from 'mdb-react-ui-kit';
+import styles from "./Navbar.module.css"
const SideNavbar = () => {
- const { isOpen, onOpen, onClose } = useDisclosure()
- const btnRef = React.useRef()
- return (
- <>
-
-
- {/* */}
-
-
- Create your account
-
-
- {/* */}
-
-{/*
-
-
-
- */}
-
-
-
- )
- }
- export default SideNavbar
\ No newline at end of file
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ CATEGORY
+
+
+
+
+
+
+
+
+ Consumer Electronics
+
+
+ Smart Electronics
+
+
+
+ Headphones & Earphones
+
+
+
+ Xiaomi Ecosystem Products
+
+
+
+ Security & Protection
+
+
+
+
+
+
+ Industrial & Scientific
+
+
+ 3D Printer & Supplies
+
+
+
+ Laser Engraver & CNC
+
+
+ Power Tools
+
+
+ Professional Tools
+
+
+
+
+
+
+ Computers & Tablets
+
+
+ Computers & Tablets
+
+
+ Computer Peripherals
+
+
+ Computer Components
+
+
+ Ofice Supply
+
+
+
+
+
+
+ Health & Personal Care
+
+
+ Health Care
+
+
+ Beauty Care Tools
+
+
+ Shaving & Hair Removal
+
+
+ Body scales
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default SideNavbar;
diff --git a/frontend/src/Components/Navbar/SideNavbar.module.css b/frontend/src/Components/Navbar/SideNavbar.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/Pages/Home/AdminLogin.jsx b/frontend/src/Pages/Home/AdminLogin.jsx
deleted file mode 100644
index 3a4ac94..0000000
--- a/frontend/src/Pages/Home/AdminLogin.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const AdminLogin = () => {
- return (
-
AdminLogin
- )
-}
-
-export default AdminLogin
\ No newline at end of file
diff --git a/frontend/src/Pages/Home/HomePage.jsx b/frontend/src/Pages/Home/HomePage.jsx
index a082c29..2c15c22 100644
--- a/frontend/src/Pages/Home/HomePage.jsx
+++ b/frontend/src/Pages/Home/HomePage.jsx
@@ -2,7 +2,10 @@ import React from 'react'
const HomePage = () => {
return (
-
HomePage
+
HomePage
+
+
+
)
}
diff --git a/frontend/src/Pages/Home/UserLogin.jsx b/frontend/src/Pages/Home/UserLogin.jsx
deleted file mode 100644
index d22bcad..0000000
--- a/frontend/src/Pages/Home/UserLogin.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const UserLogin = () => {
- return (
-
UserLogin
- )
-}
-
-export default UserLogin
\ No newline at end of file
diff --git a/frontend/src/Pages/Login/AdminLogin.jsx b/frontend/src/Pages/Login/AdminLogin.jsx
new file mode 100644
index 0000000..54234c4
--- /dev/null
+++ b/frontend/src/Pages/Login/AdminLogin.jsx
@@ -0,0 +1,111 @@
+import {
+ Flex,
+ Box,
+ FormControl,
+ FormLabel,
+ Input,
+ Checkbox,
+ Stack,
+ Link,
+ Button,
+ Heading,
+ Text,
+ useColorModeValue,
+} from "@chakra-ui/react";
+import { useState } from "react";
+import axios from "axios";
+
+function AdminLogin() {
+ const [validated, setValidated] = useState(false);
+
+ const [formData, setFormData] = useState({
+ Email: "",
+ Password: "",
+ });
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData({
+ ...formData,
+ [name]: value,
+ });
+ };
+
+ console.log("formDataaabnj", formData);
+
+ const handleSubmit = (e) => {
+
+ e.preventDefault();
+ axios
+ .post("http://localhost:5000/user/login", formData)
+ .then((e) => {
+ console.log(e);
+ localStorage.setItem("token", e.data.token);
+ })
+ .catch((err) => console.log(err));
+ };
+
+ return (
+
+
+
+ Sign in to your Admin account
+
+
+
+
+
+ Email address
+
+
+ Password
+
+
+
+
+ Remember me
+ Forgot password?
+
+
+
+
+
+
+
+ );
+}
+export default AdminLogin;
diff --git a/frontend/src/Pages/Login/UserLogin.jsx b/frontend/src/Pages/Login/UserLogin.jsx
new file mode 100644
index 0000000..a16ac84
--- /dev/null
+++ b/frontend/src/Pages/Login/UserLogin.jsx
@@ -0,0 +1,111 @@
+import {
+ Flex,
+ Box,
+ FormControl,
+ FormLabel,
+ Input,
+ Checkbox,
+ Stack,
+ Link,
+ Button,
+ Heading,
+ Text,
+ useColorModeValue,
+} from "@chakra-ui/react";
+import { useState } from "react";
+import axios from "axios";
+
+function UserLogin() {
+ const [validated, setValidated] = useState(false);
+
+ const [formData, setFormData] = useState({
+ Email: "",
+ Password: "",
+ });
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData({
+ ...formData,
+ [name]: value,
+ });
+ };
+
+ console.log("formDataaabnj", formData);
+
+ const handleSubmit = (e) => {
+
+ e.preventDefault();
+ axios
+ .post("http://localhost:5000/user/login", formData)
+ .then((e) => {
+ console.log(e);
+ localStorage.setItem("token", e.data.token);
+ })
+ .catch((err) => console.log(err));
+ };
+
+ return (
+
+
+
+ Sign in to your user account
+
+
+
+
+
+ Email address
+
+
+ Password
+
+
+
+
+ Remember me
+ Forgot password?
+
+
+
+
+
+
+
+ );
+}
+export default UserLogin;
diff --git a/frontend/src/Pages/Home/AdminRegister.jsx b/frontend/src/Pages/Signup/AdminRegister.jsx
similarity index 100%
rename from frontend/src/Pages/Home/AdminRegister.jsx
rename to frontend/src/Pages/Signup/AdminRegister.jsx
diff --git a/frontend/src/Pages/Home/UserRegister.jsx b/frontend/src/Pages/Signup/UserRegister.jsx
similarity index 100%
rename from frontend/src/Pages/Home/UserRegister.jsx
rename to frontend/src/Pages/Signup/UserRegister.jsx
diff --git a/frontend/src/Router/AllRoutes.jsx b/frontend/src/Router/AllRoutes.jsx
index 6f40ee2..a7d34f1 100644
--- a/frontend/src/Router/AllRoutes.jsx
+++ b/frontend/src/Router/AllRoutes.jsx
@@ -1,10 +1,10 @@
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import HomePage from '../Pages/Home/HomePage'
-import AdminLogin from "../Pages/Home/AdminLogin"
-import UserLogin from "../Pages/Home/UserLogin.jsx"
-import AdminRegister from "../Pages/Home/AdminRegister.jsx"
-import UserRegister from "../Pages/Home/UserRegister.jsx"
+import AdminLogin from "../Pages/Login/AdminLogin"
+import UserLogin from "../Pages/Login/UserLogin.jsx"
+import AdminRegister from "../Pages/Signup/AdminRegister.jsx"
+import UserRegister from "../Pages/Signup/UserRegister.jsx"
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 56334b3..c1354d8 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -7,7 +7,8 @@ import {BrowserRouter} from "react-router-dom";
import { Provider } from "react-redux";
import { ChakraProvider } from '@chakra-ui/react'
import { store } from './Store/store';
-
+import 'mdb-react-ui-kit/dist/css/mdb.min.css';
+import "@fortawesome/fontawesome-free/css/all.min.css";
- 
-
-