├── src ├── api │ └── index.js ├── reducers │ ├── index.js │ ├── total.js │ ├── cart.js │ ├── products.js │ └── wishlist.js ├── Redux │ ├── Login │ │ ├── Login.action.js │ │ ├── Login.reducer.js │ │ └── Login.type.js │ └── Signup │ │ ├── Signup.action.js │ │ ├── Signup.type.js │ │ └── Signup.reducer.js ├── components │ ├── Address │ │ ├── Address.jsx │ │ ├── address.css │ │ └── CheckOutHeader.jsx │ ├── Assets │ │ ├── Capture.PNG │ │ └── Capture1.PNG │ ├── Authentication │ │ ├── google.png │ │ ├── login.png │ │ ├── Timer.jsx │ │ ├── firebase.js │ │ ├── Login.jsx │ │ ├── login.css.js │ │ ├── Front.jsx │ │ ├── Register.jsx │ │ ├── AuthOtp.jsx │ │ └── ManualRegistration.jsx │ ├── Profile │ │ ├── Home.jsx │ │ ├── Main.jsx │ │ ├── Wishlist.jsx │ │ ├── AllRoutesProfile.jsx │ │ ├── SavedPayment.jsx │ │ ├── Orders.jsx │ │ ├── ProfileOption.jsx │ │ ├── Myprofile.jsx │ │ └── Wallet.jsx │ ├── Navbar │ │ ├── MainNavbar.jsx │ │ ├── NavFold │ │ │ ├── Navbar.module.css │ │ │ ├── Navbar.jsx │ │ │ └── SubNavbar.jsx │ │ └── CatBar │ │ │ ├── NavbarPopUpComponents.jsx │ │ │ ├── Beauty.jsx │ │ │ ├── Luxe.jsx │ │ │ ├── Appliances.jsx │ │ │ ├── Hair.jsx │ │ │ ├── Fragrence.jsx │ │ │ ├── MomBaby.jsx │ │ │ ├── NykaaFashion.jsx │ │ │ ├── Mens.jsx │ │ │ ├── Makeup.jsx │ │ │ ├── Skin.jsx │ │ │ ├── BodyBath.jsx │ │ │ ├── Natural.jsx │ │ │ └── Brands.jsx │ ├── Home │ │ ├── HomePage.jsx │ │ ├── Carousel.module.css │ │ ├── ScrollButton.jsx │ │ ├── Carousel1.1.jsx │ │ ├── Horizontal.module.css │ │ ├── Home.module.css │ │ ├── Carousel3.jsx │ │ ├── Carousel4.jsx │ │ ├── Carousel6.jsx │ │ ├── Carousel7.jsx │ │ ├── Carousel8.jsx │ │ └── Carousel9.jsx │ ├── ProductPage │ │ ├── DataNotFound.jsx │ │ ├── ProductCard.jsx │ │ ├── Skeleton.jsx │ │ └── products.module.css │ ├── Payment │ │ ├── paymentComponent │ │ │ ├── Thnks.jsx │ │ │ ├── Cod.jsx │ │ │ ├── GooglePay.jsx │ │ │ ├── Upi.jsx │ │ │ └── Card.jsx │ │ └── payment.module.css │ ├── Footer │ │ └── Footer.module.css │ └── SingleProduct │ │ ├── product.module.css │ │ └── SingleProduct.jsx ├── Login │ ├── signup.jsx │ └── signin.jsx ├── setupTests.js ├── App.js ├── Admin │ ├── Admincomponents │ │ ├── AdminFooter.jsx │ │ └── AdminNavbar.jsx │ ├── Admin.jsx │ ├── Admin.module.css │ └── AdminPages │ │ ├── AdminUsersList.jsx │ │ └── AdminLoginPage.jsx ├── index.css ├── reportWebVitals.js ├── actions │ ├── products.js │ ├── cart.js │ └── wishlist.js ├── constants │ └── actionTypes.js ├── store │ └── store.js ├── App.css ├── Main.jsx ├── index.js └── logs │ ├── Signup.jsx │ └── Signin.jsx ├── public ├── robots.txt ├── favicon.ico ├── logo192.webp ├── logo512.png ├── manifest.json └── index.html ├── .gitignore ├── README.md └── package.json /src/api/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reducers/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reducers/total.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Redux/Login/Login.action.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Redux/Login/Login.reducer.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Redux/Login/Login.type.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Redux/Signup/Signup.action.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Redux/Signup/Signup.type.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Redux/Signup/Signup.reducer.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Address/Address.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Address/address.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Address/CheckOutHeader.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandrashekharjoshi302/amazing-pocket-7061/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandrashekharjoshi302/amazing-pocket-7061/HEAD/public/logo192.webp -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandrashekharjoshi302/amazing-pocket-7061/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/components/Assets/Capture.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandrashekharjoshi302/amazing-pocket-7061/HEAD/src/components/Assets/Capture.PNG -------------------------------------------------------------------------------- /src/components/Assets/Capture1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandrashekharjoshi302/amazing-pocket-7061/HEAD/src/components/Assets/Capture1.PNG -------------------------------------------------------------------------------- /src/components/Authentication/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandrashekharjoshi302/amazing-pocket-7061/HEAD/src/components/Authentication/google.png -------------------------------------------------------------------------------- /src/components/Authentication/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandrashekharjoshi302/amazing-pocket-7061/HEAD/src/components/Authentication/login.png -------------------------------------------------------------------------------- /src/components/Profile/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Home = () => { 4 | return ( 5 |
Home
6 | ) 7 | } 8 | 9 | export default Home -------------------------------------------------------------------------------- /src/Login/signup.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function signup() { 4 | return ( 5 |
6 |

signupdfafaa

7 |
8 | ) 9 | } 10 | 11 | export default signup -------------------------------------------------------------------------------- /src/Login/signin.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function signin() { 4 | return ( 5 |
signin 6 |

sadadadada

7 |
8 | ) 9 | } 10 | 11 | export default signin -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/components/Navbar/MainNavbar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "./NavFold/Navbar"; 3 | import SubNavbar from "./NavFold/SubNavbar"; 4 | 5 | const MainNavbar = () => { 6 | return ( 7 |
8 | 9 | 10 |
11 | ); 12 | }; 13 | 14 | export default MainNavbar; 15 | -------------------------------------------------------------------------------- /src/components/Home/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import { ChakraProvider } from "@chakra-ui/react"; 2 | import Home from "./Home.jsx"; 3 | import ScrollButton from "./ScrollButton"; 4 | function HomePage() { 5 | return ( 6 | 7 | 8 | 9 | 10 | ); 11 | } 12 | export default HomePage; 13 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | 2 | import './App.css'; 3 | import Footer from './components/Footer/Footer'; 4 | import MainNavbar from './components/Navbar/MainNavbar'; 5 | 6 | import Main from './Main'; 7 | 8 | function App() { 9 | return ( 10 |
11 | 12 |
13 |
15 | ); 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/Admin/Admincomponents/AdminFooter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "../Admin.module.css" 3 | const AdminFooter = () => { 4 | return ( 5 |
6 |

Design And Developed By : Chandrashekhar joshi

7 | 8 | 9 | 10 |
All Rights Reserved © Chandrashekhar
11 |
12 | ); 13 | }; 14 | 15 | export default AdminFooter; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/components/Home/Carousel.module.css: -------------------------------------------------------------------------------- 1 | .slidecontainer { 2 | width: 100%; 3 | margin: auto; 4 | margin-top: 20px; 5 | } 6 | 7 | .eachslide > div { 8 | align-items: center; 9 | justify-content: center; 10 | background-size: cover; 11 | height: 320px; 12 | } 13 | 14 | .eachslide span { 15 | padding: 20px; 16 | font-size: 20px; 17 | background: #efefef; 18 | text-align: center; 19 | } 20 | .sb_main{ 21 | /* border: 3px solid blue; */ 22 | width: 1440px; 23 | } 24 | -------------------------------------------------------------------------------- /src/actions/products.js: -------------------------------------------------------------------------------- 1 | import { GET_PRODUCTS_ERROR, GET_PRODUCTS_LOADING, GET_PRODUCTS_SUCCESS } from "../constants/actionTypes" 2 | import axios from "axios"; 3 | export const getProducts=(url)=>async (dispatch)=>{ 4 | dispatch({type:GET_PRODUCTS_LOADING}); 5 | try { 6 | 7 | const res=await axios.get(url); 8 | 9 | dispatch({type:GET_PRODUCTS_SUCCESS,payload:res.data}); 10 | } catch (error) { 11 | dispatch({type:GET_PRODUCTS_ERROR,payload:error.message}); 12 | } 13 | } -------------------------------------------------------------------------------- /src/actions/cart.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { ADDTO_CART_ERROR, ADDTO_CART_LOADING, ADDTO_CART_SUCCESS } from "../constants/actionTypes" 3 | 4 | 5 | export const addToCart=(data)=>async(dispatch)=>{ 6 | dispatch({type:ADDTO_CART_LOADING}); 7 | try { 8 | let res = await axios.post("https://nyka-json.onrender.com/carts",data); 9 | dispatch({type:ADDTO_CART_SUCCESS , payload:res.data}); 10 | } catch (error) { 11 | dispatch({type:ADDTO_CART_ERROR, payload:error.message}); 12 | } 13 | } -------------------------------------------------------------------------------- /src/actions/wishlist.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { ADDTO_WISHLIST_ERROR, ADDTO_WISHLIST_LOADING, ADDTO_WISHLIST_SUCCESS } from "../constants/actionTypes" 3 | 4 | 5 | export const addToWishlist=(data)=>async(dispatch)=>{ 6 | dispatch({type:ADDTO_WISHLIST_LOADING}); 7 | try { 8 | let res = await axios.post("https://nyka-json.onrender.com/wishlists",data); 9 | dispatch({type:ADDTO_WISHLIST_SUCCESS , payload:res.data}); 10 | } catch (error) { 11 | dispatch({type:ADDTO_WISHLIST_ERROR, payload:error.message}); 12 | } 13 | } -------------------------------------------------------------------------------- /src/constants/actionTypes.js: -------------------------------------------------------------------------------- 1 | export const GET_PRODUCTS_LOADING="products/get/loading"; 2 | export const GET_PRODUCTS_SUCCESS="products/get/success"; 3 | export const GET_PRODUCTS_ERROR="products/get/error"; 4 | 5 | 6 | export const ADDTO_CART_LOADING="cart/post/loading"; 7 | export const ADDTO_CART_SUCCESS="cart/post/success"; 8 | export const ADDTO_CART_ERROR="cart/post/error"; 9 | 10 | 11 | 12 | 13 | export const ADDTO_WISHLIST_LOADING="wishlist/post/loading"; 14 | export const ADDTO_WISHLIST_SUCCESS="wishlist/post/success"; 15 | export const ADDTO_WISHLIST_ERROR="wishlist/post/error"; -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "logo192.webp", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.webp", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/store/store.js: -------------------------------------------------------------------------------- 1 | import {applyMiddleware, combineReducers, compose, legacy_createStore} from "redux" 2 | import { productReducer } from "../reducers/products"; 3 | import thunk from "redux-thunk" 4 | import { cartReducer } from "../reducers/cart"; 5 | import { wishListReducer } from "../reducers/wishlist"; 6 | 7 | export const rootReducer=combineReducers({ 8 | productsManager:productReducer, 9 | cartsManager:cartReducer, 10 | wishListsManager:wishListReducer 11 | }); 12 | 13 | 14 | const composer=window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose(); 15 | 16 | export const store=legacy_createStore(rootReducer,composer(applyMiddleware(thunk))); -------------------------------------------------------------------------------- /src/components/ProductPage/DataNotFound.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from '../ProductPage/products.module.css'; 3 | const DataNotFound = () => { 4 | return ( 5 |
6 | 7 |

Oops ! No more data found 🤒

8 | not found pics 9 | 10 | 11 |
12 | ) 13 | } 14 | 15 | export default DataNotFound -------------------------------------------------------------------------------- /src/components/Authentication/Timer.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from "react"; 2 | function Timer({ setAlert }) { 3 | const ref = useRef(); 4 | const [count, setCounter] = useState(30); 5 | useEffect(() => { 6 | timer(); 7 | return () => { 8 | clearInterval(ref.current); 9 | }; 10 | }, []); 11 | const timer = () => { 12 | ref.current = setInterval(() => { 13 | setCounter((p) => { 14 | if (p === 1) { 15 | clearInterval(ref.current); 16 | setAlert(true); 17 | } 18 | return p - 1; 19 | }); 20 | }, 1000); 21 | }; 22 | return
0:{count}
; 23 | } 24 | 25 | export default Timer; 26 | -------------------------------------------------------------------------------- /src/components/Authentication/firebase.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getAuth } from "firebase/auth"; 4 | const firebaseConfig = { 5 | apiKey: "AIzaSyDPqBnM9g4zbWm7o37ur7Z-3U-1gPCO55s", 6 | authDomain: "nyka-clone.firebaseapp.com", 7 | projectId: "nyka-clone", 8 | storageBucket: "nyka-clone.appspot.com", 9 | messagingSenderId: "599053668129", 10 | appId: "1:599053668129:web:ee5249409f756d0227f860", 11 | measurementId: "G-0V6CEN6KP2", 12 | }; 13 | 14 | // Initialize Firebase 15 | const app = initializeApp(firebaseConfig); 16 | const firebaseAuth = getAuth(app); 17 | export default firebaseAuth; 18 | -------------------------------------------------------------------------------- /src/components/Profile/Main.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | import { Box } from '@chakra-ui/react' 5 | import React from 'react' 6 | import AllRoutesProfile from './AllRoutesProfile' 7 | import ProfileOption from "./ProfileOption" 8 | 9 | const MAIN = () => { 10 | return ( 11 |
12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 | ) 20 | } 21 | 22 | export default MAIN -------------------------------------------------------------------------------- /src/components/Payment/paymentComponent/Thnks.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Alert,AlertIcon,AlertDescription,AlertTitle} from "@chakra-ui/react" 3 | function Thnks() { 4 | return ( 5 |
6 | 7 | 8 | 17 | 18 | 19 | 20 | Payment Done! 21 | 22 | 23 | Thank you for your purchase! 24 | 25 | 26 |
27 | ) 28 | } 29 | 30 | export default Thnks -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/Main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Route, Routes } from 'react-router-dom' 3 | import Products from './components/ProductPage/Products' 4 | import MAIN from './components/Profile/Main' 5 | import HomePage from './components/Home/HomePage' 6 | import SingleProduct from './components/SingleProduct/SingleProduct' 7 | import Login from './components/Authentication/Login' 8 | const Main = () => { 9 | return( 10 | 11 | } /> 12 | } /> 13 | }> 14 | }> 15 | } /> 16 | 17 | ) 18 | } 19 | 20 | export default Main -------------------------------------------------------------------------------- /src/components/Payment/paymentComponent/Cod.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import { getAllCart } from "../../../actions/products"; 4 | import Style from "../payment.module.css"; 5 | 6 | export const Cod = () => { 7 | const { total } = useSelector((state) => state.cart); 8 | console.log(total); 9 | const dispatch = useDispatch(); 10 | 11 | useEffect(() => { 12 | dispatch(getAllCart()); 13 | }, [dispatch]); 14 | return ( 15 |
16 |
17 |

CASH ON DELIVERY

18 |
19 |
20 |
21 | 25 |
26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { BrowserRouter } from 'react-router-dom'; 7 | import { ChakraProvider } from '@chakra-ui/react'; 8 | import { Provider } from 'react-redux'; 9 | import {store} from "./store/store"; 10 | 11 | const root = ReactDOM.createRoot(document.getElementById('root')); 12 | root.render( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | 23 | // If you want to start measuring performance in your app, pass a function 24 | // to log results (for example: reportWebVitals(console.log)) 25 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 26 | reportWebVitals(); 27 | -------------------------------------------------------------------------------- /src/components/Home/ScrollButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { FaArrowCircleUp } from "react-icons/fa"; 3 | import styles from "./Home.module.css"; 4 | const ScrollButton = () => { 5 | const [visible, setVisible] = useState(false); 6 | 7 | const toggleVisible = () => { 8 | const scrolled = document.documentElement.scrollTop; 9 | if (scrolled > 300) { 10 | setVisible(true); 11 | } else if (scrolled <= 300) { 12 | setVisible(false); 13 | } 14 | }; 15 | const scrollToTop = () => { 16 | window.scrollTo({ 17 | top: 0, 18 | behavior: "smooth", 19 | }); 20 | }; 21 | window.addEventListener("scroll", toggleVisible); 22 | return ( 23 | 29 | ); 30 | }; 31 | export default ScrollButton; 32 | -------------------------------------------------------------------------------- /src/components/Profile/Wishlist.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Center, Image,Text } from '@chakra-ui/react' 2 | import React from 'react' 3 | import Pic from "../Assets/Capture.PNG" 4 | 5 | const Wishlist = () => { 6 | return ( 7 | <> 8 | 9 | 10 |
11 | 12 |
13 |
14 | NO ITEMS IN THE WISHLIST 15 |
16 |
17 | Add now, Buy Later. 18 |
19 |
20 | Save your favourite beauty items 21 |
22 |
23 | here! 24 |
25 |
26 | 27 |
28 | 29 | 30 | 31 | ) 32 | } 33 | 34 | export default Wishlist -------------------------------------------------------------------------------- /src/reducers/cart.js: -------------------------------------------------------------------------------- 1 | import { ADDTO_CART_ERROR, ADDTO_CART_LOADING, ADDTO_CART_SUCCESS } from "../constants/actionTypes" 2 | 3 | 4 | const cartState={ 5 | carts:[], 6 | loading:false, 7 | error:false 8 | } 9 | 10 | export const cartReducer=(state=cartState,{type,payload})=>{ 11 | switch(type){ 12 | case ADDTO_CART_LOADING:{ 13 | return { 14 | ...state, 15 | loading:true, 16 | error:false 17 | } 18 | } 19 | case ADDTO_CART_SUCCESS:{ 20 | return { 21 | ...state, 22 | loading:false, 23 | carts:[...state.carts,payload] 24 | } 25 | } 26 | case ADDTO_CART_ERROR:{ 27 | return { 28 | ...state, 29 | loading:false, 30 | error:payload 31 | } 32 | } 33 | default:{ 34 | return state 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/components/Profile/AllRoutesProfile.jsx: -------------------------------------------------------------------------------- 1 | import { Login } from '@mui/icons-material' 2 | import React from 'react' 3 | import { Route, Routes } from 'react-router-dom' 4 | 5 | import Home from './Home' 6 | import Myprofile from './Myprofile' 7 | import Orders from './Orders' 8 | import SavedPayment from './SavedPayment' 9 | import Wallet from './Wallet' 10 | import Wishlist from './Wishlist' 11 | 12 | const AllRoutesProfile = () => { 13 | return ( 14 | 15 | }/> 16 | }/> 17 | }/> 18 | }/> 19 | }/> 20 | }/> 21 | } /> 22 | 23 | {/* }/> */} 24 | 25 | 26 | ) 27 | } 28 | 29 | export default AllRoutesProfile -------------------------------------------------------------------------------- /src/reducers/products.js: -------------------------------------------------------------------------------- 1 | import { GET_PRODUCTS_ERROR, GET_PRODUCTS_LOADING, GET_PRODUCTS_SUCCESS } from "../constants/actionTypes" 2 | 3 | const productState={ 4 | products:[], 5 | loading:false, 6 | error:false 7 | } 8 | 9 | export const productReducer=(state=productState,{type,payload})=>{ 10 | switch(type){ 11 | case GET_PRODUCTS_LOADING:{ 12 | return { 13 | ...state, 14 | loading:true, 15 | error:false 16 | } 17 | } 18 | case GET_PRODUCTS_SUCCESS:{ 19 | return { 20 | ...state, 21 | loading:false, 22 | products:payload, 23 | 24 | } 25 | } 26 | case GET_PRODUCTS_ERROR:{ 27 | return { 28 | ...state, 29 | loading:false, 30 | error:payload 31 | } 32 | } 33 | default:{ 34 | return state; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/reducers/wishlist.js: -------------------------------------------------------------------------------- 1 | 2 | import { ADDTO_WISHLIST_ERROR, ADDTO_WISHLIST_LOADING, ADDTO_WISHLIST_SUCCESS } from "../constants/actionTypes" 3 | 4 | 5 | const wishListState={ 6 | wishlists:[], 7 | loading:false, 8 | error:false 9 | } 10 | 11 | export const wishListReducer=(state=wishListState,{type,payload})=>{ 12 | switch(type){ 13 | case ADDTO_WISHLIST_LOADING:{ 14 | return { 15 | ...state, 16 | loading:true, 17 | error:false 18 | } 19 | } 20 | case ADDTO_WISHLIST_SUCCESS:{ 21 | return { 22 | ...state, 23 | loading:false, 24 | wishlists:[...state.wishlists,payload] 25 | } 26 | } 27 | case ADDTO_WISHLIST_ERROR:{ 28 | return { 29 | ...state, 30 | loading:false, 31 | error:payload 32 | } 33 | } 34 | default:{ 35 | return state 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /src/components/Payment/paymentComponent/GooglePay.jsx: -------------------------------------------------------------------------------- 1 | import { Box, TextField } from "@mui/material"; 2 | import React from "react"; 3 | import Style from "../payment.module.css"; 4 | 5 | export const GooglePay = () => { 6 | return ( 7 |
8 |
9 |

GooglePay

10 |
11 |
12 |
13 |
14 | :not(style)": { m: "0.5", width: "100%" }, 18 | }} 19 | noValidate 20 | autoComplete="off" 21 | > 22 | 27 | 28 |
29 |
30 | 31 |
32 |
33 |
34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /src/components/Authentication/Login.jsx: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import Front from './Front' 3 | import Register from './Register' 4 | import PhoneOTP from "./AuthOTP"; 5 | 6 | import { container } from "./login.css" 7 | function Login() { 8 | const [view, setView] = useState("front"); 9 | const [number, setNumber] = useState(""); 10 | const [name, setName] = useState("") 11 | const [email, setEmail] = useState("") 12 | const [password, setPassword] = useState("") 13 | return ( 14 |
15 | {view === "front" && } 16 | {view === "register" && ( 17 | 25 | )} 26 | 27 | 28 | {view == "AuthOTP" && } 29 | 30 |
31 | 32 | ); 33 | } 34 | 35 | export default Login -------------------------------------------------------------------------------- /src/Admin/Admin.jsx: -------------------------------------------------------------------------------- 1 | import './Admin.module.css' 2 | import React from "react"; 3 | import { Routes, Route } from "react-router-dom"; 4 | import { ToastContainer } from "react-toastify"; 5 | 6 | 7 | import "react-toastify/dist/ReactToastify.css"; 8 | 9 | 10 | import AdminLoginPage from './AdminPages/AdminLoginPage' 11 | import AdminUsersList from "./AdminPages/AdminUsersList"; 12 | 13 | import AdminHomePage from "./AdminPages/AdminHomePage"; 14 | import AdminFooter from "./Admincomponents/AdminFooter"; 15 | function Admin() { 16 | return ( 17 | <> 18 | 33 | 34 | 35 | 36 | 37 | } /> 38 | } /> 39 | } /> 40 | 41 | 42 | 43 | ); 44 | } 45 | 46 | export default Admin; -------------------------------------------------------------------------------- /src/components/Profile/SavedPayment.jsx: -------------------------------------------------------------------------------- 1 | import { Box,Center,Image,Text } from '@chakra-ui/react' 2 | import React from 'react' 3 | import Pic from "../Assets/Capture1.PNG" 4 | 5 | const SavedPayment = () => { 6 | return ( 7 |
8 | 9 | 10 | My Saved Payments 11 | 12 | 13 |
14 | 15 |
16 |
17 | You haved not saved any of your 18 |
19 |
20 | payment modes yet. 21 |
22 |
23 | After you make a purchase with Cards, 24 |
25 |
26 | UPI or PayTM they will appear here. 27 |
28 | 29 | 30 | 31 |
32 | ) 33 | } 34 | 35 | export default SavedPayment -------------------------------------------------------------------------------- /src/Admin/Admincomponents/AdminNavbar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaHouseUser } from "react-icons/fa"; 3 | import { Link } from "react-router-dom"; 4 | import "../Admin.module.css" 5 | const AdminNavbar = () => { 6 | return ( 7 |
8 | 34 |
35 | ); 36 | }; 37 | 38 | export default AdminNavbar -------------------------------------------------------------------------------- /src/Admin/Admin.module.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap"); 2 | body { 3 | margin: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | .form__container { 12 | min-height: 100vh; 13 | background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%); 14 | } 15 | .form__container form { 16 | box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, 17 | rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; 18 | padding: 20px; 19 | } 20 | .form__heading { 21 | font-family: "Dancing Script", cursive; 22 | margin-bottom: 10px; 23 | } 24 | .form__button { 25 | width: 100%; 26 | background-color: black; 27 | color: white; 28 | padding: 5px; 29 | } 30 | .form__button:hover { 31 | background-color: rgba(0, 0, 0, 0.795); 32 | } 33 | .form__submit-btn { 34 | margin-top: 20px; 35 | width: 100%; 36 | color: white; 37 | background-color: black; 38 | padding: 10px 0px; 39 | } 40 | .form__submit-btn:hover { 41 | opacity: 0.9; 42 | } 43 | .content { 44 | min-height: 73vh !important; 45 | } 46 | -------------------------------------------------------------------------------- /src/components/Navbar/NavFold/Navbar.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: fixed; 3 | z-index: 100000; 4 | width: 100vw; 5 | margin-top: -63px; 6 | } 7 | .card { 8 | display: flex; 9 | justify-content: space-evenly; 10 | align-items: center; 11 | height: 8vh; 12 | /* background-color: #ffffff; */ 13 | } 14 | .card > div { 15 | display: flex; 16 | gap: 2vw; 17 | align-items: center; 18 | } 19 | 20 | .inputContainer { 21 | position: relative; 22 | } 23 | .inputContainer > p { 24 | position: absolute; 25 | top: -8px; 26 | left: 5px; 27 | } 28 | .input { 29 | width: 15vw; 30 | height: 4.5vh; 31 | padding-left: 30px; 32 | font-size: 15px; 33 | outline: none; 34 | background: #f4f4f4; 35 | border: 1px solid rgb(212, 212, 212); 36 | border-radius: 5px; 37 | } 38 | .input:focus { 39 | border: 2px solid #fc3581; 40 | } 41 | .card2 { 42 | display: flex; 43 | gap: 0.5vw; 44 | cursor: pointer; 45 | } 46 | .card3 { 47 | display: flex; 48 | gap: 1.4vw; 49 | } 50 | .card4 { 51 | height: 12vh; 52 | color: white; 53 | cursor: pointer; 54 | } 55 | .card4 ~ p { 56 | font-weight: 600; 57 | } 58 | .card4 ~ p:hover { 59 | color: #fc3581; 60 | cursor: pointer; 61 | } 62 | .content { 63 | position: absolute; 64 | z-index: 100000; 65 | width: 100vw; 66 | } 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nyka- Project.. 2 |

"Nykaa.com" (Collaborative)

3 | 4 | 5 |

About

6 | 7 |

Nykaa is an Indian e-commerce company, founded by Falguni Nayar in 2012 and headquartered in Mumbai. It sells beauty, wellness and fashion products across websites, mobile apps and 100+ offline stores. In 2020, it became the first Indian unicorn startup headed by a woman

8 |

Nykaa sells products which are manufactured in India as well as internationally. In 2015, the company expanded from online-only to an omnichannel model and began selling products apart from beauty. As of 2020, it retails over 2,000 brands and 200,000 products across its platforms.

9 | 10 | 11 | **Original website link** : https://www.nykaa.com/ 12 |
13 | Link of My deployed project : https://63ada1475ad13e35586e0a54--ornate-cupcake-fb26b5.netlify.app/ 14 |
15 | 16 | 17 | ## Tech Stack and features 18 | 19 | - Javascript 20 | - React 21 | - Chakra-UI 22 | - HTML 23 | - CSS 24 | 25 | 26 | 27 |


28 | 29 |

30 | Team Of 4 Members.
31 | build this website clone during construct week in just 5 days. 32 | Most focused on UI part. 33 |

34 |

35 | 36 | -------------------------------------------------------------------------------- /src/components/Payment/paymentComponent/Upi.jsx: -------------------------------------------------------------------------------- 1 | import { Box, TextField } from "@mui/material"; 2 | import React, { useEffect } from "react"; 3 | import { useDispatch, useSelector } from "react-redux"; 4 | import { getAllCart } from "../../../actions/products"; 5 | import Style from "../payment.module.css"; 6 | export const Upi = () => { 7 | const { total } = useSelector((state) => state.cart); 8 | console.log(total); 9 | const dispatch = useDispatch(); 10 | 11 | useEffect(() => { 12 | dispatch(getAllCart()); 13 | }, [dispatch]); 14 | return ( 15 |
16 |
17 |

BHIM UPI

18 |
19 |
20 |
21 |
22 | :not(style)": { m: "0.5", width: "95%" }, 26 | }} 27 | noValidate 28 | autoComplete="off" 29 | > 30 | 35 | 36 |
37 |
38 | 39 |
40 |
41 |
42 | ); 43 | }; 44 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/NavbarPopUpComponents.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Fade} from '@mui/material' 3 | import Brands from './Brands' 4 | import Luxe from './Luxe' 5 | import NykaaFashion from './NykaaFashion' 6 | import Beauty from './Beauty' 7 | import Makeup from './Makeup' 8 | import Hair from './Hair' 9 | import Appliances from './Appliances' 10 | import BodyBath from './BodyBath' 11 | import Natural from './Natural' 12 | import MomBaby from './MomBaby' 13 | import Mens from './Mens' 14 | import Fragrence from './Fragrence' 15 | import Skin from './Skin' 16 | 17 | 18 | const NavbarPopUpComponents = ({type}) => { 19 | return ( 20 | 21 |
22 | {type==='BRANDS' && } 23 | {type==='LUXE' && } 24 | {type==='NYKAA' && } 25 | {type==='BEAUTY' && } 26 | {type==="MAKEUP" && } 27 | {type==="SKIN" && } 28 | {type==="HAIR" && } 29 | {type==="APPLIANCES" && } 30 | {type==="BATH&BODY" && } 31 | {type==="NATURAL" && } 32 | {type==="MOM&BABY" && } 33 | {type==="HEALTH" && } 34 | {type==="MEN" && } 35 | {type==="FRAGRENCE" && } 36 | {type==="POPUPS" && } 37 |
38 | 39 | 40 | ) 41 | } 42 | 43 | export default NavbarPopUpComponents; 44 | -------------------------------------------------------------------------------- /src/components/Profile/Orders.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Box,Text,Image, Center} from "@chakra-ui/react" 3 | import { NavLink } from 'react-router-dom' 4 | 5 | const Orders = () => { 6 | return ( 7 | <> 8 | 9 | 10 | ⇐ 11 | 12 | My Orders 13 | 14 |
15 | 16 | 17 |
18 | 19 |
20 |
21 | No recent orders 22 |
23 |
24 | Start Shopping 25 |
26 | 27 | 28 | ) 29 | } 30 | 31 | export default Orders -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Beauty.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const BeautyPop = styled.div` 5 | width: 74%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 5vh 0 7vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .beauty_bar { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 8vw; 20 | } 21 | .beauty_bar > div > img { 22 | height: 20vh; 23 | width: 33vh; 24 | border-radius: 5px; 25 | } 26 | .beauty_bar > div { 27 | line-height: 1.2; 28 | font-size: 14px; 29 | } 30 | `; 31 | 32 | const Beauty = () => { 33 | return ( 34 | 35 |
36 |
37 | 41 |

BEAUTY BOOK

42 |

Nykaa's Digital Magazine

43 |
44 |
45 | 49 |

NYKAA TV

50 |

Masterclasses By Experts & Vloggers

51 |
52 |
53 | 57 |

BEAUTY BUYING GUIDES

58 |

Tips To Explore While You Shop

59 |
60 |
61 | 62 | ); 63 | }; 64 | 65 | export default Beauty; 66 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.module.css: -------------------------------------------------------------------------------- 1 | * { 2 | text-align: left; 3 | } 4 | .box { 5 | display: flex; 6 | justify-content: center; 7 | gap: 5vw; 8 | background: #3f414d; 9 | padding: 2vh 0 2vh 0; 10 | height: 130px; 11 | } 12 | .box > div { 13 | height: 19vh; 14 | } 15 | .box1 { 16 | display: flex; 17 | gap: 0.5vw; 18 | font-weight: 600; 19 | color: white; 20 | font-size: 14px; 21 | } 22 | .box3 > input { 23 | height: 3vh; 24 | width: 13vw; 25 | outline: 0; 26 | border-width: 0 0 2px; 27 | border-color: rgb(232, 232, 235); 28 | margin-right: 1vw; 29 | padding-left: 1.5vw; 30 | background-color: #3f414d; 31 | color: white; 32 | } 33 | .box3 > button { 34 | height: 5vh; 35 | width: 5vw; 36 | background: #3f414d; 37 | color: white; 38 | border-radius: 5px; 39 | border: 1px solid white; 40 | text-align: center; 41 | } 42 | .box4 { 43 | display: flex; 44 | gap: 1vw; 45 | justify-content: center; 46 | } 47 | .box4 > img { 48 | height: 5vh; 49 | width: 9vw; 50 | } 51 | .box5 { 52 | display: flex; 53 | justify-content: center; 54 | margin: auto; 55 | gap: 7vw; 56 | background: #8c8d94; 57 | padding: 3vh 0 3vh 0; 58 | } 59 | .box5 > div > p { 60 | line-height: 2.5vh; 61 | font-size: 13px; 62 | color: white; 63 | } 64 | .box5 > div > h4 { 65 | color: white; 66 | } 67 | .box5 > div > p:hover { 68 | color: #fc3581; 69 | cursor: pointer; 70 | } 71 | .box6 { 72 | display: flex; 73 | justify-content: center; 74 | margin: auto; 75 | gap: 3vw; 76 | padding: 5vh 5vw 5vh 5vw; 77 | } 78 | .box6 > div { 79 | display: flex; 80 | line-height: 15px; 81 | gap: 1.5vw; 82 | font-size: 14px; 83 | } 84 | .box7 { 85 | display: flex; 86 | justify-content: center; 87 | margin: auto; 88 | gap: 3vw; 89 | } 90 | .box7 > p { 91 | cursor: pointer; 92 | } 93 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "main", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/icons": "^2.0.15", 7 | "@chakra-ui/react": "^2.2.4", 8 | "@emotion/react": "^11.9.3", 9 | "@emotion/styled": "^11.9.3", 10 | "@fontsource/roboto": "^4.5.8", 11 | "@material-ui/core": "^4.12.4", 12 | "@material-ui/icons": "^4.11.3", 13 | "@mui/icons-material": "^5.8.4", 14 | "@mui/material": "^5.9.1", 15 | "@testing-library/jest-dom": "^5.16.4", 16 | "@testing-library/react": "^13.3.0", 17 | "@testing-library/user-event": "^13.5.0", 18 | "axios": "^0.27.2", 19 | "firebase": "^9.9.0", 20 | "framer-motion": "^6.5.1", 21 | "react": "^18.2.0", 22 | "react-dom": "^18.2.0", 23 | "react-icons": "^4.4.0", 24 | "react-multi-carousel": "^2.8.2", 25 | "react-redux": "^8.0.2", 26 | "react-responsive-carousel": "^3.2.23", 27 | "react-router-dom": "^6.3.0", 28 | "react-scripts": "^5.0.1", 29 | "react-simple-image-slider": "^2.4.1", 30 | "react-slick": "^0.29.0", 31 | "react-slideshow-image": "^4.0.3", 32 | "react-toastify": "^9.0.7", 33 | "redux": "^4.2.0", 34 | "redux-thunk": "^2.4.1", 35 | "slick-carousel": "^1.8.1", 36 | "styled-components": "^5.3.5", 37 | "web-vitals": "^2.1.4" 38 | }, 39 | "scripts": { 40 | "start": "react-scripts start", 41 | "build": "react-scripts build", 42 | "test": "react-scripts test", 43 | "eject": "react-scripts eject" 44 | }, 45 | "eslintConfig": { 46 | "extends": [ 47 | "react-app", 48 | "react-app/jest" 49 | ] 50 | }, 51 | "browserslist": { 52 | "production": [ 53 | ">0.2%", 54 | "not dead", 55 | "not op_mini all" 56 | ], 57 | "development": [ 58 | "last 1 chrome version", 59 | "last 1 firefox version", 60 | "last 1 safari version" 61 | ] 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Buy Cosmetics Products & Beauty Products Online in India at Best Price |Nykaa 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/Home/Carousel1.1.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Slide } from "react-slideshow-image"; 3 | import "react-slideshow-image/dist/styles.css"; 4 | import styles from "./Carousel.module.css"; 5 | const slideImages = [ 6 | { 7 | url: "https://images-static.nykaa.com/uploads/db2d5607-d968-45f6-ba39-6b8eac6a54e4.jpg?tr=w-1200,cm-pad_resize", 8 | }, 9 | { 10 | url: "https://images-static.nykaa.com/uploads/1b502856-27fa-4013-b7ed-dedb07ab0f1a.jpg?tr=w-1200,cm-pad_resize", 11 | }, 12 | { 13 | url: "https://images-static.nykaa.com/uploads/ae238ad7-9d3a-48ec-b143-a9af8e1f1a0c.jpg?tr=w-1200,cm-pad_resize", 14 | }, 15 | { 16 | url: "https://images-static.nykaa.com/uploads/fe616105-d856-4ef7-9a91-22a68a988094.png?tr=w-1200,cm-pad_resize", 17 | }, 18 | { 19 | url: "https://images-static.nykaa.com/uploads/b5e477cd-478c-4f1d-b1a5-c2030c3d0615.jpg?tr=w-1200,cm-pad_resize", 20 | }, 21 | { 22 | url: "https://images-static.nykaa.com/uploads/7250c4ef-daf6-4f77-ab9d-ea897b773904.jpg?tr=w-1200,cm-pad_resize", 23 | }, 24 | { 25 | url: "https://images-static.nykaa.com/uploads/41cab243-d530-4f83-b083-6352b09f3a13.jpg?tr=w-1200,cm-pad_resize", 26 | }, 27 | ]; 28 | 29 | const properties = { 30 | duration: 2000, 31 | transitionDuration: 500, 32 | infinite: true, 33 | indicators: true, 34 | arrows: true, 35 | pauseOnHover: true, 36 | onChange: (oldIndex, newIndex) => { 37 | console.log(`slide transition from ${oldIndex} to ${newIndex}`); 38 | }, 39 | }; 40 | const Carousel1 = () => { 41 | return ( 42 |
43 | 44 | {slideImages.map((slideImage, index) => ( 45 |
46 |
54 |
55 | ))} 56 | 57 |
58 | ); 59 | }; 60 | 61 | export default Carousel1; 62 | -------------------------------------------------------------------------------- /src/Admin/AdminPages/AdminUsersList.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AdminNavbar from '../Admincomponents/AdminNavbar' 3 | import "../Admin.module.css" 4 | const AdminUsersList = () => { 5 | const profilePIcDefault = 6 | "https://static.vecteezy.com/system/resources/previews/002/318/271/non_2x/user-profile-icon-free-vector.jpg"; 7 | return ( 8 |
9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |

17 | Welcome To User Management System 18 |

19 |
20 | 21 |
22 |
23 | profile_pic 35 |
36 |
37 | 38 | 39 |
40 |
41 |

42 | Name :{" "} 43 | {localStorage.getItem("name") 44 | ? localStorage.getItem("name") 45 | : "NA"} 46 |

47 |

48 | Email :{" "} 49 | {localStorage.getItem("email") 50 | ? localStorage.getItem("email") 51 | : "NA"} 52 |

53 |

54 | Gender :{" "} 55 | {localStorage.getItem("gender") 56 | ? localStorage.getItem("gender") 57 | : "NA"} 58 |

59 |

60 | Accepted Terms And Conditions :{" "} 61 | {localStorage.getItem("terms") ? "YES" : "No"} 62 |

63 |
64 |
65 |
66 |
67 |
68 |
69 | ); 70 | }; 71 | 72 | export default AdminUsersList; -------------------------------------------------------------------------------- /src/components/Profile/ProfileOption.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Button,Text, VStack} from "@chakra-ui/react" 3 | import {CgProfile} from "react-icons/cg" 4 | import {FaWallet,FaTruck} from "react-icons/fa" 5 | import {RiLogoutCircleRLine} from "react-icons/ri" 6 | import {AiTwotoneHeart} from "react-icons/ai" 7 | import {RxDashboard} from "react-icons/rx" 8 | import {NavLink} from "react-router-dom" 9 | 10 | const ProfileOption = () => { 11 | return ( 12 | <> 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 28 | 29 | 30 | 33 | 34 | 35 | 38 | 39 | 40 | 43 | 44 | 45 | 48 | 49 | 50 | 51 | ) 52 | } 53 | 54 | export default ProfileOption -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Luxe.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const LuxePopup = styled.div` 5 | width: 70%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .luxe { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 4.5vw; 20 | } 21 | .luxe > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 0px 14px 0px 14px; 24 | } 25 | 26 | .luxe > div > p { 27 | line-height: 1.2; 28 | font-size: 15px; 29 | } 30 | .luxe > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | 36 | const Luxe = () => { 37 | return ( 38 | 39 |
40 |
41 |

Face

42 |

Face Wash & Cleansers

43 |

Toner

44 |

Exfoliators

45 |

Serum

46 |

Moisturisers

47 |

Day Cream

48 |

Night Cream

49 |

Masks

50 |

Sunscreen

51 |

Face Mist

52 |

Makeup Remover

53 |

Tools & Appliances

54 |
55 |
56 |

Fragrance

57 |

Perfumes (EDP/EDT)

58 |

Aftershave

59 |

Face & Body Mists

60 |

Candles & Incense

61 |

Gifts

62 |
63 |
64 |

Lip Care

65 |

Eye Care

66 |

Eye Cream

67 |

Serum

68 |

Dark Circles

69 |
70 |
71 |

EYES

72 |

Eyeliner & Kajal

73 |

Mascara

74 |

Eye Shadow

75 |

Brows

76 |

Lashes

77 |

Eye Primer

78 |

Corrector & Conclealer

79 |

Customize Your Palette

80 |
81 |
82 |

Tools & Brushes

83 |

Face Brush

84 |

Eye Brush

85 |

Lip Brush

86 |

Applicators

87 |
88 |
89 | 90 | ); 91 | }; 92 | 93 | export default Luxe; 94 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Appliances.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const Popup = styled.div` 5 | width: 75%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .all_items_in_appli { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 4vw; 20 | } 21 | .all_items_in_appli > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 0px 14px 0px 14px; 24 | } 25 | 26 | .all_items_in_appli > div > p { 27 | line-height: 1.2; 28 | font-size: 15px; 29 | } 30 | .all_items_in_appli > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | 36 | const Appliances = () => { 37 | return ( 38 | 39 |
40 |
41 |

Hair Styling Tools

42 |

Hair Dryers

43 |

Straighteners

44 |

Curling Iron/Stylers

45 |

Multi Stylers

46 |
47 |
48 |

Hair Removal Tools

49 |

Epilators

50 |

Body Groomers

51 |

Bikini Trimmers

52 |
53 |
54 |

Shaving Tools

55 |

Shavers

56 |

Trimmers

57 |

Face/Skin Tools

58 |

Face Epilator

59 |

Dermarollers

60 |

Cleansing Brushes

61 |

Acne Removal

62 |

Massage Tools

63 |

Massagers

64 |

Foot Care

65 |
66 |
67 |

Top Brands

68 |

Philips

69 |

Alan Truman

70 |

Dyson

71 |

VEGA

72 |

Braun

73 |

Ikonic Professional

74 |

Nova

75 |

Flawless

76 |
77 |
78 |

Quick Links

79 |

Combos @ Nykaa

80 |

New Launches

81 |

NFBA Nominees 2020

82 |

Gifts @ Nykaa

83 |

Herbal Hair Care

84 |

Routine Finder

85 |
86 |
87 | 88 | ); 89 | }; 90 | 91 | export default Appliances; 92 | -------------------------------------------------------------------------------- /src/components/ProductPage/ProductCard.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Image, Text } from "@chakra-ui/react"; 2 | import React, { useState } from "react"; 3 | import { BsHeart } from "react-icons/bs"; 4 | import { FaStar } from "react-icons/fa"; 5 | import { useDispatch, useSelector } from "react-redux"; 6 | import { useNavigate } from "react-router-dom"; 7 | import { addToCart } from "../../actions/cart"; 8 | import styles from "../ProductPage/products.module.css"; 9 | import { useToast } from "@chakra-ui/react"; 10 | const ProductCard = ({ product }) => { 11 | const [stars, setStars] = useState(Number(product.rating)); 12 | const dispatch = useDispatch(); 13 | const data = useSelector((state) => state); 14 | console.log(data); 15 | const navigate = useNavigate(); 16 | const starArr = new Array(Math.floor(stars)).fill(0); 17 | const handleClick = (id) => { 18 | navigate(`/products/${id}`); 19 | }; 20 | 21 | const handleCart = (product) => { 22 | toast({ 23 | title: "Item Added To Bag", 24 | description: "Added Successfully.", 25 | status: "success", 26 | duration: 4000, 27 | isClosable: true, 28 | }); 29 | dispatch(addToCart(product)); 30 | }; 31 | const toast = useToast(); 32 | return ( 33 | 34 | {product.title} handleClick(product.id)} 38 | w="250px" 39 | /> 40 | 41 | 42 | {product.title} 43 | 44 | 45 | MRP :{" "} 46 | 47 | ₹{product.price}{" "} 48 | {" "} 49 | ₹{product.off_price} |{" "} 50 | 51 | {product.offer}% OFF 52 | 53 | 54 | 55 | 56 | {starArr?.map((e) => { 57 | return ; 58 | })} 59 | 60 | 61 | 64 | 67 | 68 | 69 | ); 70 | }; 71 | 72 | export default ProductCard; 73 | -------------------------------------------------------------------------------- /src/components/Profile/Myprofile.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Box, Button, HStack, Image, Input, Text, useDisclosure, VStack} from "@chakra-ui/react" 3 | import {AiFillHome,AiTwotoneEdit} from "react-icons/ai" 4 | import { useState } from 'react' 5 | import { 6 | Modal, 7 | ModalOverlay, 8 | ModalContent, 9 | ModalHeader, 10 | ModalFooter, 11 | ModalBody, 12 | ModalCloseButton, 13 | } from '@chakra-ui/react' 14 | 15 | const Myprofile = () => { 16 | const { isOpen, onOpen, onClose } = useDisclosure() 17 | const [address, setaddress] = useState("") 18 | const [update,setupdate]=useState("") 19 | // console.log(update) 20 | const handleChange=async()=>{ 21 | setaddress(update) 22 | } 23 | return ( 24 | <> 25 | 26 | 27 | 28 | 29 | 30 | 31 | Arihant Jain 32 | Mobile: 9958394688 33 | Date Of Birth: dd-mm-yyyy 34 | 35 | 36 | 37 | 38 | 39 | MY ADDRESSES 40 | 41 | 42 | 43 | 44 | New Address 45 | 46 | 47 | setupdate(e.target.value)}/> 48 | 49 | 50 | 53 | 54 | 55 | 56 | 57 | 58 | {address===""? "No Address has been added add now!":address} 59 | 60 | 61 | 62 | 63 | ) 64 | } 65 | 66 | export default Myprofile -------------------------------------------------------------------------------- /src/components/Payment/paymentComponent/Card.jsx: -------------------------------------------------------------------------------- 1 | import { Box, ListItem, Stack, TextField } from "@mui/material"; 2 | import React, { useEffect } from "react"; 3 | import { useDispatch, useSelector } from "react-redux"; 4 | import { getAllCart } from "../../../actions/products"; 5 | import { useNavigate } from "react-router-dom"; 6 | import Style from "../payment.module.css"; 7 | 8 | export const Card = () => { 9 | const navigate = useNavigate(); 10 | const { total } = useSelector((state) => state.cart); 11 | console.log(total); 12 | const dispatch = useDispatch(); 13 | 14 | useEffect(() => { 15 | dispatch(getAllCart()); 16 | }, [dispatch]); 17 | return ( 18 |
19 |
20 |

Credit/Debit Card

21 |
22 |
23 |
24 | :not(style)": { width: "90%" }, 28 | }} 29 | noValidate 30 | autoComplete="off" 31 | > 32 | 39 | 40 |
41 |
42 |

expiry

43 |
44 | 45 |
46 | 47 | 48 | 49 | 53 | 54 | 55 | last 3 digits at
the back of 56 |
the card 57 | 58 |
59 |
60 | 75 |
76 |
77 |
78 |
79 | ); 80 | }; 81 | -------------------------------------------------------------------------------- /src/Admin/AdminPages/AdminLoginPage.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Link, useNavigate } from "react-router-dom"; 3 | import { toast } from "react-toastify"; 4 | import "../Admin.module.css" 5 | const AdminLoginPage = () => { 6 | const [email, setEmail] = useState(""); 7 | const [password, setPassword] = useState(""); 8 | const navigate = useNavigate(); 9 | //getting email password 10 | const userName = localStorage.getItem("email") 11 | ? localStorage.getItem("email") 12 | : "chandrashekharjoshi02@gmail.com"; 13 | const userPassword = localStorage.getItem("password") 14 | ? localStorage.getItem("password") 15 | : "abc"; 16 | 17 | //submit function 18 | const handleSubmit = (e) => { 19 | e.preventDefault(); 20 | if (email === userName && password === userPassword) { 21 | toast.success("Login Success"); 22 | navigate("/profile"); 23 | } else { 24 | toast.error("Invalid Email OR password"); 25 | } 26 | }; 27 | return ( 28 | <> 29 |
30 |
31 |

User Management System

32 |
33 |
34 | 37 | setEmail(e.target.value)} 42 | id="exampleInputEmail1" 43 | aria-describedby="emailHelp" 44 | /> 45 |
46 |
47 | 50 | setPassword(e.target.value)} 58 | id="exampleInputPassword1" 59 | /> 60 |
61 |
62 |

63 | Don't Have An Account? Signup ! 64 |

65 |
66 | 69 |
70 |
71 | 72 | ); 73 | }; 74 | 75 | export default AdminLoginPage; -------------------------------------------------------------------------------- /src/components/ProductPage/Skeleton.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from "../ProductPage/products.module.css"; 3 | import { Box, SkeletonCircle, SkeletonText } from "@chakra-ui/react"; 4 | const Skeleton = () => { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 | ) 69 | } 70 | 71 | export default Skeleton; -------------------------------------------------------------------------------- /src/components/Profile/Wallet.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Image,Text } from '@chakra-ui/react' 2 | import React from 'react' 3 | 4 | const Wallet = () => { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | 12 | 13 | Nykaa Wallet 14 | 15 | 16 | A purse you can carry to shop Beauty. 17 | 18 | 19 | 20 | 21 | 22 | 23 | Wallet Balanace 24 | ₹ 20 25 | 26 | 27 | NYKAA CASH 28 | ₹ 0 29 | 30 | 31 | REWARD POINTS 32 | ₹ 20 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ) 41 | } 42 | 43 | export default Wallet -------------------------------------------------------------------------------- /src/components/Payment/payment.module.css: -------------------------------------------------------------------------------- 1 | .pcnt { 2 | width: 75%; 3 | margin: auto; 4 | position: relative; 5 | top: 120px; 6 | } 7 | 8 | .phe { 9 | text-align: left; 10 | margin: 0px; 11 | padding-left: 20px; 12 | font-size: 16px; 13 | font-weight: 600; 14 | } 15 | 16 | .Psidebar { 17 | display: flex; 18 | margin-top: 10px; 19 | } 20 | 21 | .pTab { 22 | background-color: #fff; 23 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 24 | border-radius: 2px; 25 | padding-left: 5px; 26 | position: fixed; 27 | width: 18.5%; 28 | font-size: 16px; 29 | text-align: left; 30 | } 31 | 32 | .pTabpanel { 33 | background-color: #fff; 34 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 35 | border-radius: 2px; 36 | position: relative; 37 | height: max-content; 38 | left: 315px; 39 | width: 465px; 40 | text-align: left; 41 | } 42 | 43 | .pSubdetail { 44 | background-color: #fff; 45 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 46 | padding: 10px 23px 15px 23px; 47 | border-radius: 2px; 48 | position: relative; 49 | height: max-content; 50 | left: 350px; 51 | width: 325px; 52 | text-align: left; 53 | } 54 | 55 | .cbutton { 56 | width: 100%; 57 | height: 50px; 58 | color: #fff; 59 | background-color: #fc2779; 60 | font-weight: 600; 61 | margin-top: 35px; 62 | cursor: pointer; 63 | font-size: 16px; 64 | } 65 | 66 | .shipAdd { 67 | width: 325px; 68 | background-color: #f3f3f3; 69 | padding: 10px 23px 15px 23px; 70 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 71 | border-radius: 2px; 72 | position: relative; 73 | left: 350px; 74 | text-align: left; 75 | } 76 | 77 | .shipAdd h3 { 78 | font-size: 16px; 79 | font-weight: 550; 80 | letter-spacing: 0.5px; 81 | } 82 | 83 | .shipAdd p { 84 | font-size: 16px; 85 | font-weight: 450; 86 | letter-spacing: 0.5px; 87 | line-height: 1.5; 88 | } 89 | 90 | /*---------------------cardstyle-------------*/ 91 | .lae p { 92 | margin-top: 20px; 93 | color: #8c8d94; 94 | font-size: 16px; 95 | font-weight: 450; 96 | } 97 | 98 | .cardInput input { 99 | width: 25%; 100 | margin-right: 10px; 101 | border: none; 102 | border-bottom: 1px solid #8c8d94; 103 | font-size: 15px; 104 | } 105 | 106 | .cardInput input + input { 107 | width: 15%; 108 | margin: 0px 10px; 109 | border: none; 110 | border-bottom: 1px solid #8c8d94; 111 | } 112 | 113 | .cardInput input:focus { 114 | border: none; 115 | outline: none; 116 | border-bottom: 1px solid #8c8d94; 117 | } 118 | 119 | .cardInput span + span { 120 | color: #8c8d94; 121 | padding-bottom: 5px; 122 | padding-left: 10px; 123 | vertical-align: middle; 124 | width: 120px; 125 | box-sizing: border-box; 126 | position: absolute; 127 | margin-top: -15px; 128 | } 129 | 130 | /*---------------------gpay style-------------*/ 131 | .gpayh { 132 | padding: 0px; 133 | margin: 0px; 134 | font-size: 16px; 135 | font-weight: 550; 136 | margin-bottom: 5px; 137 | } 138 | 139 | hr { 140 | margin-bottom: 8px; 141 | } 142 | -------------------------------------------------------------------------------- /src/components/Authentication/login.css.js: -------------------------------------------------------------------------------- 1 | const container = { 2 | boxShadow: 3 | "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px", 4 | width: "27%", 5 | height: "800px", 6 | margin: "80px auto 0px auto", 7 | borderRadius: "15px 15px 0px 0px", 8 | background: "white", 9 | position: "relative", 10 | textAlign: "center", 11 | }; 12 | const crossButton = { 13 | border: "none", 14 | background: "white", 15 | cursor: "pointer", 16 | fontSize: "25px", 17 | fontWeight: "100", 18 | color: "gray", 19 | position: "absolute", 20 | left: "20px", 21 | top: "20px", 22 | }; 23 | const Signin = { 24 | margin: "45px auto", 25 | textAlign: "left", 26 | width: "80%", 27 | }; 28 | const h1 = { 29 | fontSize: "36px", 30 | }; 31 | const p = { 32 | textAlign: "justify", 33 | fontSize: "18px", 34 | color: "#595959", 35 | }; 36 | const input = { 37 | textAlign: "center", 38 | border: "none", 39 | background: "#fc2779", 40 | width: "100%", 41 | padding: "10px 10px", 42 | borderRadius: "5px", 43 | color: "white", 44 | cursor: "pointer", 45 | fontSize: "20px", 46 | }; 47 | const para = { 48 | width: "80%", 49 | margin: "auto", 50 | textAlign: "justify", 51 | color: "gray", 52 | fontSize: "20px", 53 | lineHeight: "1.3", 54 | }; 55 | const a = { 56 | color: "gray", 57 | fontSize: "20px", 58 | }; 59 | const grayBox = { 60 | width: "80%", 61 | background: "#dbdbdb", 62 | margin: "10px auto", 63 | padding: "15px", 64 | fontWeight: "300", 65 | textAlign: "center", 66 | }; 67 | const inputOTP = { 68 | textAlign: "left", 69 | outline: "none", 70 | border: "none", 71 | borderBottom: "1px solid red", 72 | width: "150px", 73 | height: "30px", 74 | }; 75 | const submitButton = { 76 | border: "none", 77 | background: "#dbdbdb", 78 | width: "100%", 79 | padding: "10px 10px", 80 | borderRadius: "5px", 81 | color: "white", 82 | cursor: "pointer", 83 | fontSize: "20px", 84 | }; 85 | const alertPopup = { 86 | width: "100%", 87 | height: "150px", 88 | margin: "auto", 89 | position: "sticky", 90 | top: "300px", 91 | background: "#e9d8ce", 92 | borderRadius: "10px", 93 | display: "flex", 94 | justifyContent: "center", 95 | alignItems: "center", 96 | }; 97 | const googlecss = { width: "100%", cursor: "pointer", marginTop: "20px" }; 98 | const submit = { 99 | color: "white", 100 | background: "#fc2779", 101 | padding: "10px", 102 | border: "none", 103 | borderRadius: "10px", 104 | cursor: "pointer", 105 | width: "90%", 106 | margin: "auto", 107 | }; 108 | const inputReg = { 109 | width: "90%", 110 | height: "35px", 111 | outline: "none", 112 | border: "1px solid gray", 113 | }; 114 | const h2Reg = { 115 | color: "gray", 116 | }; 117 | export { 118 | container, 119 | crossButton, 120 | Signin, 121 | h1, 122 | p, 123 | input, 124 | para, 125 | a, 126 | googlecss, 127 | grayBox, 128 | inputOTP, 129 | submitButton, 130 | alertPopup, 131 | submit, 132 | inputReg, 133 | h2Reg, 134 | }; 135 | -------------------------------------------------------------------------------- /src/components/Navbar/NavFold/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import style from "./Navbar.module.css"; 3 | import { FaRegUser } from "react-icons/fa"; 4 | import { NavLink, useNavigate } from "react-router-dom"; 5 | import { AiFillShopping } from "react-icons/ai"; 6 | import NavbarPopUpComponents from "../CatBar/NavbarPopUpComponents"; 7 | import { ShoppingBag } from "@mui/icons-material"; 8 | import { Route, Routes } from 'react-router-dom' 9 | import MAIN from '../../../components/Profile/Main' 10 | import Signin from "../../../logs/Signin"; 11 | const Navbar = () => { 12 | const navigate = useNavigate(); 13 | const [howerState, setHowerState] = useState(""); 14 | const [login, setLogin] = useState(false); 15 | const hoverHandler = (type) => { 16 | setHowerState(type); 17 | }; 18 | const handleLogin = () => { 19 | if (login) { 20 | setLogin(false); 21 | localStorage.removeItem("user"); 22 | localStorage.removeItem("oAuth"); 23 | window.location.reload(); 24 | } else { 25 | navigate("/login"); 26 | } 27 | }; 28 | 29 | useEffect(() => { 30 | const data = 31 | JSON.parse(localStorage.getItem("user")) || 32 | JSON.parse(localStorage.getItem("oAuth")); 33 | 34 | if (data) setLogin(true); 35 | }, []); 36 | return ( 37 | <> 38 |
39 |
40 |
41 | navigate("/")} 44 | src="https://cdn.iconscout.com/icon/free/png-256/nykaa-3384872-2822953.png" 45 | className={style.card4} 46 | alt="nykka" 47 | /> 48 |

navigate("/products")}>Categories

49 |

hoverHandler("BRANDS")}>Brands

50 |

hoverHandler("LUXE")}>Luxe

51 |

hoverHandler("NYKAA")}>Nykaa Fashion

52 |

hoverHandler("BEAUTY")}>Beauty Advice

53 |
54 |
55 |
56 | 62 |
63 |
64 |

65 | 66 |

67 |

handleLogin()}>{!login ? "Login" : "Logout"}

68 |
69 |
70 | 71 | 72 | 73 | 74 |
75 | 76 |
77 | 78 |
setHowerState("")}> 79 | {howerState && } 80 |
81 |
82 | 83 | ); 84 | }; 85 | 86 | export default Navbar; 87 | -------------------------------------------------------------------------------- /src/components/ProductPage/products.module.css: -------------------------------------------------------------------------------- 1 | .productMain { 2 | display: flex; 3 | width: 100%; 4 | 5 | justify-content: space-around; 6 | } 7 | 8 | .filterBoxs { 9 | width: 25%; 10 | height: 300px; 11 | margin-top: 100px; 12 | position: sticky; 13 | top: 100px; 14 | } 15 | 16 | .productsContainer { 17 | height: auto; 18 | width: 65%; 19 | } 20 | 21 | .prodHeading { 22 | margin: 25px auto; 23 | text-align: center; 24 | font-size: 30px; 25 | font-weight: bold; 26 | } 27 | 28 | .products { 29 | width: 90%; 30 | height: auto; 31 | margin: auto; 32 | margin-bottom: 30px; 33 | display: grid; 34 | grid-template-columns: repeat(3, 1fr); 35 | grid-template-rows: repeat(auto, 1fr); 36 | gap: 20px; 37 | } 38 | 39 | .title { 40 | font-weight: 600; 41 | font-size: medium; 42 | } 43 | .productCard { 44 | box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; 45 | border-radius: 20px; 46 | } 47 | 48 | .stars { 49 | display: flex; 50 | justify-content: center; 51 | /* border: 1px solid blue; */ 52 | gap: 0px 5px; 53 | } 54 | 55 | .btns { 56 | width: 100%; 57 | position: relative; 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: center; 61 | margin-top: 20px; 62 | visibility: hidden; 63 | top: 0; 64 | } 65 | .productCard:hover .btns { 66 | visibility: visible; 67 | } 68 | .btns button { 69 | text-align: center; 70 | } 71 | .btns .heartbtn { 72 | text-align: center; 73 | font-size: 30px; 74 | padding: 6px 8px; 75 | color: #fc2779; 76 | border-top: 1px solid rgb(232, 232, 232); 77 | border-bottom: 1px solid rgb(232, 232, 232); 78 | } 79 | .btns .primary { 80 | width: 90%; 81 | font-size: 26px; 82 | padding: 4px 8px; 83 | background-color: #fc2779; 84 | color: white; 85 | border-radius: 5px; 86 | } 87 | 88 | .paginate { 89 | display: flex; 90 | align-items: center; 91 | justify-content: center; 92 | font-size: 30px; 93 | gap: 0px 30px; 94 | margin: 5px 0px 20px 0px; 95 | color: #fc2779; 96 | } 97 | 98 | .paginate button { 99 | border: 1px solid #fc2779; 100 | padding: 0px 15px; 101 | border-radius: 30%; 102 | } 103 | .paginate button:hover { 104 | background-color: #fc2779; 105 | color: aliceblue; 106 | } 107 | .stBtn { 108 | background-color: #fc2779; 109 | color: aliceblue; 110 | } 111 | 112 | .skeleton { 113 | width: 70%; 114 | display: grid; 115 | grid-template-columns: repeat(3, 1fr); 116 | grid-template-rows: repeat(auto, 1fr); 117 | gap: 0px 30px; 118 | margin: auto; 119 | } 120 | 121 | .notFound { 122 | width: 60%; 123 | margin: auto; 124 | margin-bottom: 60px; 125 | height: auto; 126 | text-align: center; 127 | } 128 | 129 | .notFound > img { 130 | height: 500px; 131 | width: 70%; 132 | 133 | margin: auto; 134 | } 135 | 136 | .notFound > button { 137 | background-color: #ff5697; 138 | color: aliceblue; 139 | width: 20%; 140 | padding: 10px; 141 | text-align: center; 142 | border-radius: 5px; 143 | border: 1px solid aliceblue; 144 | font-size: large; 145 | margin: 15px 0px; 146 | } 147 | 148 | .notFound > button:hover { 149 | background-color: #fc2779; 150 | color: azure; 151 | } 152 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Hair.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | 4 | const Hairpopup = styled.div` 5 | width: 80%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .hair { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 1.8vw; 20 | } 21 | .hair > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 0px 14px 0px 14px; 24 | } 25 | 26 | .hair > div > p { 27 | line-height: 1.2; 28 | font-size: 14px; 29 | } 30 | .hair > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | 36 | const Hair = () => { 37 | return ( 38 | 39 |
40 |
41 |

Hair Care

42 |

Shampoo

43 |

Dry Shampoo NEW

44 |

Conditioner

45 |

Hair Oil

46 |

Hair Serum

47 |

Hair Creams & Masks

48 |

Nutritional Supplements

49 |
50 |
51 |

Tools & Accessories

52 |

Hair Brushes

53 |

Hair Combs

54 |

Dryers & Stylers

55 |

Straighteners

56 |

Rollers & Curlers

57 |

Hair Extensions

58 |

Hair Accessories

59 |
60 |
61 |

Hair Styling

62 |

Hair Color

63 |

Hair Spray

64 |

Gels & Waxes

65 |

Shop By Hair Type

66 |

Straight

67 |

Curly & Wavy

68 |

Professional Brands

69 |
70 |
71 |

Shop By Concern

72 |

Hairfall & Thinning

73 |

Dandruff

74 |

Dry & Frizzy Hair

75 |

Split Ends

76 |

Color Protection

77 |

Trending Searches

78 |

Hair Growth Oil

79 |

Dandruff Shampoo

80 |

Castor Oil For Hair

81 |

Sulphate Free Shampoo

82 |

Hair Straightener Brush

83 |
84 |
85 |

Top Brands

86 |

Nykaa Naturals

87 |

L'Oreal Paris

88 |

Wella Professionals

89 |

L'Oreal Professionnel

90 |

BBlunt

91 |

Herbal Essences

92 |

Schwarzkopf Professional

93 |
94 |
95 |

Quick Links

96 |

Combos @ Nykaa

97 |

New Launches

98 |

NFBA Nominees 2020

99 |

Herbal Hair Care

100 |

Routine Finder

101 |

The Beauty Ingredient Edit

102 |

The Safe Beauty Edit

103 |

The Gift Store

104 |
105 |
106 | 107 | ) 108 | } 109 | 110 | export default Hair 111 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Fragrence.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const FragrancePopup = styled.div` 5 | width: 80%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .fragrance { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 1.4vw; 20 | } 21 | .fragrance > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 5px 14px 5px 14px; 24 | } 25 | 26 | .fragrance > div > p { 27 | line-height: 1.2; 28 | font-size: 14px; 29 | } 30 | .fragrance > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | 36 | const Fragrence = () => { 37 | return ( 38 | 39 |
40 |
41 |

Womens Fragrance

42 |

Perfumes (EDT / EDP)

43 |

Body Mists / Sprays

44 |

Deodorants / Roll-Ons

45 |

Mens Fragrance

46 |

Perfumes (EDT / EDP)

47 |

Body Mists / Sprays

48 |

Deodorants / Roll-Ons

49 |

Colognes & After Shaves

50 |
51 |
52 |

Giftsets & Combos

53 |

Shop By Fragrance Family

54 |

Earthy & Woody

55 |

Floral

56 |

Fresh & Aquatic

57 |

Spicy & Warm

58 |

Oud Collection

59 |

Fruity

60 |
61 |
62 |

The Parcos Store

63 | 64 |

Candles

65 |
66 |
67 |

Top Brands

68 |

Nykaa Cosmetics

69 |

Masaba By Nykaa

70 |

Dior

71 |

Gucci

72 |

Calvin Klein

73 |

Davidoff

74 |

Hermes

75 |

Bvlgari

76 |

Versace

77 |

Skinn By Titan

78 |

Paco Rabanne

79 |

Giorgio Armani

80 |
81 |
82 |

83 | PREMIUM AND
DESIGNER BRANDS 84 |

85 |

Explore All

86 |

Dior

87 |

Hermès

88 |

Jo Malone London

89 |

Guerlain

90 |

BVLGARI

91 |

Salvatore Ferragamo

92 |

Calvin Klein

93 |

Giorgio Armani

94 |

Davidoff

95 |

Paco Rabanne

96 |

Carolina Herrera

97 |

Yves Saint Laurent

98 |

Elie Saab

99 |
100 |
101 |

Dolce & Gabbana

102 |

Narciso Rodrigue

103 |

Hugo Boss

104 |

Montblanc

105 |

Quick Links

106 |

Combos @ Nykaa

107 |

New Launches

108 |

NFBA Nominees 2020

109 |

Help Me Choose - Fragrance Finder

110 |

Gifts @ Nykaa

111 |

The Gift Store

112 |
113 |
114 | 115 | ); 116 | }; 117 | 118 | export default Fragrence; 119 | -------------------------------------------------------------------------------- /src/components/Navbar/NavFold/SubNavbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import styled from "styled-components"; 3 | 4 | import { useNavigate } from "react-router-dom"; 5 | import NavbarPopUpComponents from "../CatBar/NavbarPopUpComponents"; 6 | 7 | const SubNavbar = () => { 8 | const navigate = useNavigate(); 9 | const [State, setState] = useState(""); 10 | 11 | const hoverHandler = (type) => { 12 | setState(type); 13 | }; 14 | 15 | const handleNoHover = () => { 16 | setState(""); 17 | }; 18 | return ( 19 | <> 20 | 21 |

navigate("/face")} 23 | onMouseOver={() => hoverHandler("MAKEUP")} 24 | > 25 | Makeup{" "} 26 |

27 |

navigate("/face")} 29 | onMouseEnter={() => hoverHandler("SKIN")} 30 | > 31 | Skin 32 |

33 |

navigate("/face")} 35 | onMouseEnter={() => hoverHandler("HAIR")} 36 | > 37 | Hair 38 |

39 |

navigate("/face")} 41 | onMouseEnter={() => hoverHandler("APPLIANCES")} 42 | > 43 | Appliances 44 |

45 |

navigate("/face")} 47 | onMouseEnter={() => hoverHandler("BATH&BODY")} 48 | > 49 | Bath & Body 50 |

51 |

navigate("/face")} 53 | onMouseEnter={() => hoverHandler("NATURAL")} 54 | > 55 | Natural 56 |

57 |

navigate("/face")} 59 | onMouseEnter={() => hoverHandler("MOM&BABY")} 60 | > 61 | Mom & Baby 62 |

63 |

navigate("/face")} 65 | onMouseEnter={() => hoverHandler("HEALTH")} 66 | > 67 | Health & Wellness 68 |

69 |

navigate("/face")} 71 | onMouseEnter={() => hoverHandler("MEN")} 72 | > 73 | Men 74 |

75 |

navigate("/face")} 77 | onMouseEnter={() => hoverHandler("FRAGRENCE")} 78 | > 79 | Fragrance 80 |

81 |

navigate("/face")} 83 | onMouseEnter={() => hoverHandler("POPUPS")} 84 | > 85 | Pop Ups 86 |

87 | 88 | 89 |
90 | {State && } 91 |
92 | 93 | 94 | ); 95 | }; 96 | 97 | export default SubNavbar; 98 | 99 | const Subnav = styled.div` 100 | display: flex; 101 | justify-content: center; 102 | margin: auto; 103 | border: 1px solid #e6dede; 104 | align-items: center; 105 | height: 6.3vh; 106 | background-color: #ffffff; 107 | gap: 2vw; 108 | font-weight: 400; 109 | color: gray; 110 | font-size: 15px; 111 | margin-top: 63px; 112 | p:hover { 113 | border-bottom: 3px solid #fc3581; 114 | cursor: pointer; 115 | padding: 1.7vh 0 1.7vh 0; 116 | color: #fc3581; 117 | font-weight: 600; 118 | } 119 | `; 120 | const Content = styled.div` 121 | .content { 122 | position: absolute; 123 | z-index: 100000; 124 | width: 100vw; 125 | } 126 | `; 127 | -------------------------------------------------------------------------------- /src/components/SingleProduct/product.module.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .singleProdCont{ 4 | width: 85%; 5 | 6 | margin: 30px auto; 7 | height: 600px; 8 | 9 | } 10 | 11 | .singleMain{ 12 | width: 100%; 13 | margin: auto; 14 | display: flex; 15 | align-items: center; 16 | 17 | } 18 | .imageCard{ 19 | width: 50%; 20 | 21 | height: 420px; 22 | margin: 10px auto; 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | gap: 0px 12px; 27 | padding: 20px ; 28 | } 29 | 30 | .multiImg{ 31 | 32 | width: 20%; 33 | height: 100%; 34 | display: flex; 35 | flex-direction: column; 36 | align-items: center; 37 | justify-content: space-evenly; 38 | border-radius: 4px; 39 | } 40 | 41 | .multiImg>img{ 42 | background-position: center; 43 | border-radius: 4px; 44 | } 45 | 46 | .multiImg>img:hover{ 47 | cursor: pointer; 48 | } 49 | 50 | 51 | .singleImage{ 52 | border: 1px solid rgb(161, 161, 161); 53 | width: 70%; 54 | height: 100%; 55 | text-align: center; 56 | border-radius: 4px; 57 | } 58 | 59 | .singleImage>img{ 60 | width: 100%; 61 | height: 100%; 62 | background-position: center; 63 | background-size: cover; 64 | background-repeat: no-repeat; 65 | border-radius: 4px; 66 | } 67 | 68 | .detailsCard{ 69 | height: 420px; 70 | width: 50%; 71 | border-left: 1px solid rgb(136, 136, 136); 72 | padding: 20px 0px; 73 | } 74 | 75 | .detailsCard>div{ 76 | 77 | width: 100%; 78 | height: 50%; 79 | padding:0px 20px; 80 | } 81 | .starRating{ 82 | display: flex; 83 | align-items: center; 84 | font-size: large; 85 | font-weight: 600; 86 | margin-bottom: 5px; 87 | color: rgb(94, 94, 94); 88 | } 89 | .stars{ 90 | display: flex; 91 | gap: 0px 3px; 92 | margin-right: 20px; 93 | } 94 | 95 | .mrp,.inc{ 96 | font-size: large; 97 | margin-bottom: 5px; 98 | } 99 | 100 | 101 | .btnAddress{ 102 | 103 | display: flex; 104 | align-items: center; 105 | } 106 | 107 | 108 | .btn{ 109 | width: 40%; 110 | } 111 | .address{ 112 | width: 60%; 113 | border-left: 1px solid grey; 114 | height: 100%; 115 | padding-left: 7px; 116 | } 117 | 118 | .cart{ 119 | width: 80%; 120 | border: 1px solid rgb(98, 98, 98); 121 | padding: 10px 15px; 122 | margin: auto; 123 | margin-right: 10px; 124 | text-align: center; 125 | background-color: #f337c7; 126 | color: azure; 127 | font-size: large; 128 | border-radius: 5px; 129 | } 130 | .cart:hover{ 131 | color: #f8e0f2; 132 | background-color: #f414c0; 133 | } 134 | .pin{ 135 | display: flex; 136 | align-items: center; 137 | font-size: larger; 138 | margin: 10px 0px; 139 | } 140 | 141 | .inputPin{ 142 | width: 100%; 143 | border: 1px solid blue; 144 | height: 100px; 145 | display: flex; 146 | align-items: center; 147 | gap: 0px 5px; 148 | } 149 | 150 | .inputPin input{ 151 | width: 65%; 152 | height: 50px; 153 | border: 1px solid rgb(79, 79, 79); 154 | border-radius: 5px; 155 | padding: 3px 15px; 156 | } 157 | 158 | .inputPin button{ 159 | width: 30%; 160 | border: 1px solid green; 161 | height: 50px; 162 | border-radius: 5px; 163 | text-align: center; 164 | background-color: #f73bcb; 165 | color: aliceblue; 166 | font-weight: bold; 167 | } 168 | 169 | .inputPin button:hover{ 170 | color: #f8e0f2; 171 | background-color: #f414c0; 172 | } -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/MomBaby.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const MomBabyPopup = styled.div` 5 | width: 82%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .mombaby { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 1vw; 20 | } 21 | .mombaby > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 5px 14px 5px 14px; 24 | } 25 | 26 | .mombaby > div > p { 27 | line-height: 1.2; 28 | font-size: 14px; 29 | } 30 | .mombaby > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | 36 | const MomBaby = () => { 37 | return ( 38 | 39 |
40 |
41 |

Baby Care

42 |

Body Wash & Soaps

43 |

Baby Oil

44 |

Hair Oil

45 |

Lotions & Creams

46 |

Baby Powder

47 |

Shampoo & Conditioner

48 |

Sunscreen

49 |

Wipes & Buds

50 |

Teeth & Dental Care

51 |

Rash Cream

52 |

Diapers

53 |

Diaper Accessories

54 |

Bath Accessories

55 |

Baby Grooming

56 |

Baby Bedding

57 |
58 |
59 |

Kids Care

60 |

Nutritional Supplement

61 |

Body Wash & Soaps

62 |

Lotions & Creams

63 |

Hair Care

64 |

Sunscreen

65 |

Dental Care

66 |

Kids Makeup

67 |
68 |
69 |

Maternity Care

70 |

Stretch Mark Creams & Oils

71 |

Breast Firming Gels & Creams

72 |

Nipple Creams

73 |

Nutritional Supplements

74 |

Maternity Pillows

75 |
76 |
77 |

Nursing & Feeding

78 |

Feeding Bottle & Nipples

79 |

Teethers & Soothers

80 |

Breast Pumps

81 |

Breast Pads

82 |

83 | Cleaning & Feeding
Accessories 84 |

85 |

Bibs

86 |

Sippers & Cups

87 |
88 |
89 |

Health & Safety

90 |

Nose & Ear Care

91 |

92 | Gripe Water & Tummy
Roll On 93 |

94 |

Detergents & Cleansers

95 |

Handwash & Sanitizer

96 |

Mosquito

97 |

Maternity Wear

98 |

Maternity Bra

99 |

Maternity Dress

100 |

Maternity Tops

101 |
102 |
103 |

Baby Toys

104 |

Gift Sets

105 |

Shop By Concerns

106 |

Baby Dry Skin

107 |

Cracked Nipple Cream

108 |

Scalp Treatment

109 |

Coconut Oil

110 |

Almond Oil

111 |

Heat Rash

112 |

Body Toning & Firming

113 |

Baby Skin Concerns

114 |

Combos @ Nykaa

115 |
116 |
117 | 118 | ); 119 | }; 120 | 121 | export default MomBaby; 122 | -------------------------------------------------------------------------------- /src/components/Authentication/Front.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | crossButton, 4 | Signin, 5 | h1, 6 | p, 7 | input, 8 | para, 9 | a, 10 | googlecss, 11 | } from "./login.css"; 12 | import { useNavigate } from "react-router-dom"; 13 | import loginImage from "./login.png"; 14 | import google from "./google.png"; 15 | import firebaseAuth from "./firebase"; 16 | import { GoogleAuthProvider, signInWithPopup } from "firebase/auth"; 17 | import axios from "axios"; 18 | import { v4 } from "uuid"; 19 | function Front({ setView }) { 20 | const navigate = useNavigate(); 21 | const signInWithFirebase = () => { 22 | var googleProvider = new GoogleAuthProvider(); 23 | signInWithPopup(firebaseAuth, googleProvider) 24 | .then((response) => { 25 | const user = { 26 | ID: v4(), 27 | Email: response._tokenResponse.email, 28 | Photo: response._tokenResponse.photoUrl, 29 | Name: response._tokenResponse.displayName, 30 | Token: response._tokenResponse.oauthAccessToken, 31 | Password: response._tokenResponse.email, 32 | }; 33 | axios 34 | .post("https://mock-server-686g.onrender.com/register", user) 35 | .then((res) => { 36 | const localData = { 37 | ID: res.data.data, 38 | Email: response._tokenResponse.email, 39 | Name: response._tokenResponse.displayName, 40 | Token: response._tokenResponse.oauthAccessToken, 41 | Photo: response._tokenResponse.photoUrl, 42 | }; 43 | localStorage.setItem("oAuth", JSON.stringify(localData)); 44 | navigate("/"); 45 | }); 46 | }) 47 | .catch((error) => { 48 | console.log(error); 49 | }); 50 | }; 51 | return ( 52 |
53 | 61 |
62 |
63 |

Sign in

64 |

65 | To quickly find your favourites items, saved addresses and payments. 66 |

67 |
74 |

Register and earn 2000 reward points

75 |
76 | gift Image 77 |
78 | 81 |
82 |
83 | 86 |
87 | google Login 93 |
94 |
95 |

96 | By continuing, you agree that you have read and accept our{" "} 97 | 102 | T&Cs 103 | {" "} 104 | and{" "} 105 | 110 | Privacy Policy. 111 | 112 |

113 |
114 |
115 | ); 116 | } 117 | 118 | export default Front; 119 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/NykaaFashion.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const Nyaka = styled.div` 5 | width: 80%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .nyaka { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 2vw; 20 | } 21 | .nyaka > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 0px 10px 0px 10px; 24 | } 25 | .nyaka > div:nth-child(5) > img { 26 | height: 53vh; 27 | } 28 | .nyaka > div > p { 29 | line-height: 1.2; 30 | font-size: 15px; 31 | } 32 | .nyaka > div > p:hover { 33 | color: #fc3581; 34 | cursor: pointer; 35 | } 36 | `; 37 | 38 | const NykaaFashion = () => { 39 | return ( 40 | 41 |
42 |
43 |

What's New

44 |

Recently Added

45 |

Women

46 |

Indianwear

47 |

Westernwear

48 |

Footwear

49 |

Bags

50 |

Lingerie

51 |

Sportswear

52 |

Sleep & Lounge

53 |

Jewellery

54 |

Watches

55 |

Accessories

56 |

Men

57 |

Topwear

58 |

Bottomwear

59 |

Ethnicwear

60 |

Topwear

61 |
62 |
63 |

Bottomwear

64 |

Ethnicwear

65 |

Footwear

66 |

Atheisure

67 |

Innerwear & Sleepwear

68 |

Watches

69 |

Accessories

70 |

Bags

71 |

Style Guide

72 | 73 |

Tech

74 |

Smart Wearables

75 |

Headphones

76 |

Speakers

77 |

Chargers & Cables

78 |

Power Banks

79 |

Kids

80 |

Westernwear

81 |

Indianwear

82 |
83 |
84 |

Winterwear

85 |

Footwear

86 |

Toys & Games

87 |

Feeding

88 |

Sportswear

89 |

Sleep & Lounge

90 |

Home

91 |

Kitchen & Dining

92 |

Decor

93 |

Bedding

94 |

Bath

95 |

Storage

96 |

Floor Coverings

97 |

Kitchen Appliances

98 | 99 |

House Of Nykaa

100 |

Twenty Dresses

101 |

Nykaa Fashion

102 |

RSVP By Nykaa Fashion

103 |
104 |
105 |

Gajra Gang

106 |

Nykd By Nykaa

107 |

Pipa Bella

108 |

IYKYK By Nykaa Fashion

109 |

Kica

110 |

Twig And Twine

111 |

Likha By Nykaa Fashion

112 |

Top Brands

113 |

Vero Moda

114 |

Fabindia

115 |

Na-Kd

116 |

Koton

117 |

I Saw It First

118 |

Swtantra

119 |

Biba

120 |

Forever New

121 |
122 |
123 | 127 |
128 |
129 | 130 | ); 131 | }; 132 | 133 | export default NykaaFashion; 134 | -------------------------------------------------------------------------------- /src/components/Home/Horizontal.module.css: -------------------------------------------------------------------------------- 1 | .media_scroller { 2 | --_spacer: var(--size-3); 3 | display: grid; 4 | gap: var(--_spacer); 5 | grid-auto-flow: column; 6 | grid-auto-columns: 21%; 7 | padding: 0 var(--_spacer) var(--_spacer); 8 | overflow-x: auto; 9 | overscroll-behavior-inline: contain; 10 | width: 90%; 11 | margin: auto; 12 | } 13 | 14 | .media_element { 15 | display: grid; 16 | grid-template-rows: min-content; 17 | gap: var(--_spacer); 18 | padding: var(--_spacer); 19 | background: var(--surface-2); 20 | border-radius: var(--radius-2); 21 | box-shadow: var(--shadow-2); 22 | position: relative; 23 | height: 300px; 24 | display: inline-block; 25 | background: rgb(255, 255, 255); 26 | width: 217px; 27 | min-width: 218px; 28 | max-height: 600px; 29 | vertical-align: top; 30 | cursor: pointer; 31 | border-top: 1px solid rgb(225, 225, 225); 32 | border-right: 1px solid rgb(225, 225, 225); 33 | border-bottom: 1px solid rgb(225, 225, 225); 34 | border-image: initial; 35 | border-left: none; 36 | } 37 | .detail { 38 | font-size: 14px; 39 | font-weight: 400; 40 | line-height: 20px; 41 | letter-spacing: 0px; 42 | overflow: hidden; 43 | height: 40px; 44 | display: block; 45 | margin: 0px 0px 0px -10px; 46 | color: rgb(0, 19, 37); 47 | text-overflow: ellipsis; 48 | text-align: left; 49 | } 50 | .subtittle { 51 | font-size: 12px; 52 | text-align: left; 53 | font-weight: 400; 54 | line-height: 16px; 55 | letter-spacing: 0px; 56 | color: rgb(117, 117, 117); 57 | margin: 0px 0px 0px -10px; 58 | padding: 0px; 59 | text-transform: capitalize; 60 | } 61 | .viewbtn { 62 | width: 100px; 63 | height: 32px; 64 | font-size: 14px; 65 | font-weight: 600; 66 | line-height: 2; 67 | letter-spacing: 0.57px; 68 | text-align: center; 69 | position: absolute; 70 | bottom: 0px; 71 | cursor: pointer; 72 | margin-bottom: 2px; 73 | color: rgb(252, 39, 121); 74 | margin-left: 50px; 75 | } 76 | .media_element img { 77 | width: 156px; 78 | height: 156px; 79 | } 80 | .snaps_inline > * { 81 | scroll-snap-align: start; 82 | } 83 | .reviewstar { 84 | line-height: 12px; 85 | margin-bottom: 0.25rem; 86 | display: flex; 87 | margin-left: -10px; 88 | } 89 | .starwrap { 90 | display: inline-block; 91 | margin-right: 2px; 92 | } 93 | .reviewcount { 94 | margin-left: 5px; 95 | font-size: 12px; 96 | color: rgb(117, 117, 117); 97 | } 98 | .pricediscountprice { 99 | color: rgb(0, 19, 37); 100 | font-size: 14px; 101 | font-weight: 400; 102 | line-height: 20px; 103 | letter-spacing: 0px; 104 | } 105 | .priceoffer { 106 | color: rgb(0, 137, 69); 107 | margin-left: 4px; 108 | padding-left: 4px; 109 | border-left: 1px solid rgb(238, 238, 238); 110 | font-size: 14px; 111 | font-weight: 400; 112 | line-height: 20px; 113 | letter-spacing: 0px; 114 | } 115 | .offprice { 116 | margin-right: 4px; 117 | color: rgba(0, 19, 37, 0.64); 118 | font-size: 14px; 119 | font-weight: 400; 120 | line-height: 20px; 121 | letter-spacing: 0px; 122 | 123 | text-decoration-line: line-through; 124 | } 125 | .price1 { 126 | line-height: 20px; 127 | margin-bottom: 0.25rem; 128 | margin-left: -10px; 129 | text-align: left; 130 | } 131 | .badgediv { 132 | margin: 0.5rem; 133 | position: absolute; 134 | top: 0px; 135 | left: 0px; 136 | z-index: 1; 137 | } 138 | .badgeul { 139 | width: 80px; 140 | padding-left: 0px; 141 | list-style: none; 142 | margin: 0px 0px 0px -19px; 143 | display: flex; 144 | } 145 | .badgeli { 146 | margin-right: 4px; 147 | border: none; 148 | display: inline-block; 149 | padding: 0px 5px; 150 | text-transform: capitalize; 151 | font-size: 10px; 152 | font-weight: 600; 153 | line-height: 12px; 154 | letter-spacing: 0.9px; 155 | background-color: rgb(223, 249, 229); 156 | border: 1px solid rgb(195, 231, 206); 157 | color: rgb(104, 166, 119); 158 | } 159 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Mens.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const MensPopup = styled.div` 5 | width: 80%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .mens { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 1.8vw; 20 | } 21 | .mens > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 0px 14px 0px 14px; 24 | } 25 | 26 | .mens > div > p { 27 | line-height: 1.2; 28 | font-size: 14px; 29 | } 30 | .mens > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | 36 | const Mens = () => { 37 | return ( 38 | 39 |
40 |
41 |

Shaving

42 |

Razors & Cartridges

43 |

Shavers

44 |

Trimmers

45 |

Shaving Creams

46 |

Shaving Foams

47 |

Shaving Gels

48 |

Pre & Post Shaves

49 |

Aftershave Lotion

50 |

Shaving Brushes

51 |
52 |
53 |

Beard Care

54 |

Beard Oil

55 |

Beard Butter

56 |

Beard Softener

57 |

Beard Wash

58 |

Beard Wax

59 |

Moustache Oil

60 |

Beard Comb

61 |

Moustache Wax

62 |

Beard Kits

63 |

Beard Gel

64 |

Beard Balm

65 |

Beard Cream

66 |

Beard Serum

67 |

Beard Mist

68 |

Beard Colour

69 |

Beard Shampoo

70 |
71 |
72 |

Hair Care

73 |

Shampoo

74 | Conditioner 75 |

Hair Styling

76 | Hair Color 77 |

Hair Oils

78 |

Professional Products

79 |

Skin Care

80 |

Face Wash

81 |

Moisturizers

82 |

Sunscreen

83 |

Masks & Peels

84 |

Scrubs & Exfoliators

85 |

Fairness

86 |
87 |
88 |

Bath & Body

89 |

Bath/Shower Gels

90 |

Soaps

91 |

Body Scrubs

92 |

Talc

93 |

Dental Care

94 |

Body Lotions

95 |

Intimate Care

96 |

Grooming Kits

97 |

Fragrance

98 |

Deodorants/Roll Ons

99 |

Colognes & Perfumes (EDT & EDP)

100 |

Luxe Fragrances

101 |
102 |
103 |

Shop By Concern

104 |

Anti Dandruff

105 |

Anti Hairfall

106 |

Scalp Treatment

107 |

Anti Acne

108 |

Anti Ageing

109 |

Wellness

110 |

Sexual Wellness

111 |

Health Supplements

112 |

Weight Management

113 |

Sports Nutrition

114 |
115 |
116 |

Top Brands

117 |

Beardo

118 |

Gilette

119 |

Livon

120 |

Nivea

121 |

Park Avenue

122 |

Quick Links

123 |

Combos @ Nykaa

124 |

New Launches

125 |

Gifts @ Nykaa

126 |

Routine Finder

127 |

The Gift Store

128 |
129 |
130 | 131 | ); 132 | }; 133 | 134 | export default Mens; 135 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Makeup.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const MakeupPopup = styled.div` 5 | width: 80%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .makup { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 2.4vw; 20 | } 21 | .makup > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 0px 14px 0px 14px; 24 | } 25 | 26 | .makup > div > p { 27 | line-height: 1.2; 28 | font-size: 14px; 29 | } 30 | .makup > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | 36 | const Makeup = () => { 37 | return ( 38 | 39 |
40 |
41 |

Face

42 |

Face Primer

43 |

Concealer

44 |

Foundation

45 |

Compact

46 |

Contour

47 |

Loose Powder

48 |

Tinted Moisturizer

49 |

Blush

50 |

Bronzer

51 |

BB & CC Cream

52 |

Highlighters

53 |

Setting Spray

54 |

Makeup Remover

55 |

Sindoor

56 |
57 |
58 |

Eyes

59 |

Kajal

60 |

Eyeliner

61 |

Mascara

62 |

Eye Shadow

63 |

Eye Brow Enhancers

64 |

Eye Primer

65 |

False Eyelashes

66 |

Eye Makeup Remover

67 |

Under Eye Concealer

68 |

Contact Lenses

69 | 70 |

Makeup Kits & Combos

71 |

Makeup Kits

72 |

Makeup Combos

73 |
74 |
75 |

Lips

76 |

Lipstick

77 |

Liquid Lipstick

78 |

Lip Crayon

79 |

Lip Gloss

80 |

Lip Liner

81 |

Lip Plumper

82 |

Lip Stain

83 |

Nails

84 |

Nail Polish

85 |

Nail Art Kits

86 |

Nail Care

87 |

Nail Polish Remover

88 |
89 |
90 |

Tools & Brushes

91 |

Face Brush

92 |

Eye Brush

93 |

Lip Brush

94 |

Brush Sets

95 |

Brush Cleaners

96 |

Sponges & Applicators

97 |

Eyelash Curlers

98 |

Tweezers

99 |

Sharpeners

100 |

Mirrors

101 |

Makeup Pouches

102 |

103 | Multi-Functional Makeup
Palettes 104 |

105 |
106 |
107 |

Top Brands

108 |

Kay Beauty

109 |

Huda Beauty

110 |

Charlotte Tilbury

111 |

M.A.C

112 |

Maybelline New York

113 |

L'Oreal Paris

114 |

Lakme

115 |

Nykaa Cosmetics

116 |

Nyx Pro.Makeup

117 |
118 |
119 |

Quick Links

120 |

Combos @ Nykaa

121 |

New Launches

122 |

NFBA Nominees 2020

123 |

Gifts @ Nykaa

124 |

The Gift Store

125 |

Trending Searches

126 |

Nude Lipstick

127 |

Matte Lipstick

128 |

Red Lipstick

129 |

Pink Lipstick

130 |
131 |
132 | 133 | ); 134 | }; 135 | 136 | export default Makeup; 137 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Skin.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | 4 | const SkinPopup = styled.div` 5 | width: 80%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .skin { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 1.8vw; 20 | } 21 | .skin > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 0px 14px 0px 14px; 24 | } 25 | 26 | .skin > div > p { 27 | line-height: 1.2; 28 | font-size: 14px; 29 | } 30 | .skin > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | 36 | const Skin = () => { 37 | return ( 38 | <> 39 | 40 |
41 |
42 |

Moisturizers

43 |

Face Moisturizer

44 |

Night Cream

45 |

Face Oils

46 |

All Purpose Gels/Creams

47 |

Face Serums

48 |

Cleansers

49 |

Face Wash & Cleanser

50 |

Cleansing Oils & Balm

51 |

Micellar Water

52 |

Face Wipes

53 |

Makeup Remover

54 |

Face Scrub

55 |
56 |
57 |

Trending Searches

58 |

Toners Under 1000

59 |

Face Wash For Oily Skin

60 |

Oil Free Face Moisturizers

61 |

Lip Balm Under 500

62 |

Vitamin C Serum

63 |

Masks

64 |

Sheet Masks

65 |

Sleeping Masks

66 |

Face Masks & Packs

67 |

Face Packs

68 |

Face Bleach

69 |
70 |
71 |

Toners & Mists

72 |

Toners

73 |

Facial Mists

74 |

Rose Water

75 |

Bath & Body

76 |

Body Lotions

77 |

Body Butter

78 |

Body Oils

79 |

Shower Gels And Body Wash

80 |

Soaps

81 |

Body Scrubs

82 |

Bath Salts

83 |

Scrubs And Loofahs

84 |

Hands And Feet

85 |

Hand Creams

86 |

Foot Creams

87 |

Hand & Foot Masks

88 |
89 |
90 |

Specialised Skincare

91 |

Acne Spot Correctors

92 |

Neck Creams

93 |

Nose Strips

94 |

Facial Peels

95 |

Eye Care

96 |

Eye Serums & Creams

97 |

Eye Masks

98 |

Lip Care

99 |

Lip Balm

100 |

Lip Scrubs

101 |

Lip Masks

102 |

Sunscreen

103 |

Face Sunscreen

104 |

Body Sunscreen

105 |
106 |
107 |

Kits And Combos

108 |

Facial Kits

109 |

Kits & Combos

110 |

Gift Sets

111 |

Skin Tools

112 |

Face Massagers

113 |

Cleansing Brushes

114 |

Blackhead Remover

115 |

Dermarollers

116 |

Skin Supplements

117 |

Vitamins & Minerals

118 |

Ayurvedic Herbs

119 |
120 |
121 |

Shop By Concern

122 |

Acne

123 |

Dull Skin

124 |

Pigmentation

125 |

Wrinkles & Fine Lines

126 |

Pores

127 |

Dark Spots

128 |

Face Tan

129 |

Oil Control

130 |

New Launches

131 |

Quick Links

132 |

The Gift Store

133 |
134 |
135 | 136 | 137 | ) 138 | } 139 | 140 | export default Skin; 141 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/BodyBath.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const Bodybath = styled.div` 5 | width: 82%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .bodybath { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 1vw; 20 | } 21 | .bodybath > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 5px 14px 5px 14px; 24 | } 25 | 26 | .bodybath > div > p { 27 | line-height: 1.2; 28 | font-size: 14px; 29 | } 30 | .bodybath > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | const BodyBath = () => { 36 | return ( 37 | 38 |
39 |
40 |

Bath & Shower

41 |

Shower Gels & Body Wash

42 |

Body Scrubs & Exfoliants

43 |

Soaps

44 |

Bath Salts

45 |

Bath Accessories

46 |

Body Care

47 |

Body Lotions & Moisturizers

48 |

Deodorants/Roll Ons

49 |

Body Butters

50 |

Massage Oils

51 |

Essential Oils

52 |

Talcum Powder

53 |

Intimate Care

54 |
55 |
56 |

Feminine Hygiene

57 |

Sanitary Napkins

58 |

Menstrual Cups

59 |

Tampons

60 |

Pantyliners

61 |

Intimate Wash

62 |

Other Period Essentials

63 |

Shaving & Hair Removal

64 |

Body Razors & Cartridges

65 |

Face & Eyebrow Razors

66 |

Wax & Wax Strips

67 |

Hair Removal Creams

68 |

Epilators & Bikini Trimmers

69 |

Pre & Post Wax Essentials

70 |
71 |
72 |

Men's Grooming

73 |

Razors & Catridges

74 |

Shaving Cream, Foams & Gels

75 |

Pre & Post Shaves

76 |

Shavers & Trimmers

77 |

Beard & Moustache Care

78 |

Intimate Care

79 |

Hands & Feet

80 |

Hand Wash

81 |

Hand Creams & Masks

82 |

Foot Care

83 |

Manicure Pedicure Tools & Kits

84 |
85 |
86 |

Hygiene Essentials

87 |

Face Mask

88 |

Hand Sanitizer

89 |

Gloves, PPE & Face Shields

90 |

Oral Care

91 |

Toothpaste

92 |

Electric Toothbrush

93 |

Manual Toothbrush

94 |

Mouthwash

95 |

Floss & Tongue Cleaners

96 |
97 |
98 |

Kits & Combos

99 |

Bath & Body Kits

100 |

Bath & Body Combos

101 |

Top Brands

102 |

MCaffeine

103 |

Wanderlust

104 |

Gillette

105 |

Whisper

106 |

Dove

107 |

Sanfe

108 |
109 |
110 |

Quick Links

111 |

Combos @ Nykaa

112 |

New Launches

113 |

NFBA Nominees 2020

114 |

Gifts @ Nykaa

115 |

Routine Finder

116 |

The Gift Store

117 |

Trending Searches

118 |

Body Wash

119 |

Body Lotions

120 |

Face Razors For Women

121 |

Sanitary Napkins

122 |

Body Scrubs

123 |

Deodorants

124 |
125 |
126 | 127 | ); 128 | }; 129 | 130 | export default BodyBath; -------------------------------------------------------------------------------- /src/logs/Signup.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Flex, 3 | Box, 4 | FormControl, 5 | FormLabel, 6 | Input, 7 | InputGroup, 8 | HStack, 9 | InputRightElement, 10 | Stack, 11 | Button, 12 | Heading, 13 | Text, 14 | useColorModeValue, 15 | Link 16 | } from '@chakra-ui/react'; 17 | import { useState } from 'react'; 18 | import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; 19 | import {useDispatch, useSelector} from "react-redux"; 20 | // import { signup } from '../../Redux/Signup/Signup.action'; 21 | // import Navbar from '../../compounts/navbar/Navbar'; 22 | import { signup } from "../Redux/Signup/Signup.action" 23 | 24 | function Signup() { 25 | const [showPassword, setShowPassword] = useState(false); 26 | const [user,setUser]= useState({name:"",email:"",password:""}); 27 | 28 | 29 | const dispatch = useDispatch(); 30 | 31 | 32 | const handleChange=(e)=>{ 33 | const {name,value}=e.target; 34 | setUser({...user,[name]:value}) 35 | } 36 | const state= useSelector((store)=>store.signupManager); 37 | 38 | 39 | 40 | const handleSignup=()=>{ 41 | dispatch(signup(user)); 42 | } 43 | 44 | return ( 45 | <> 46 | {/* */} 47 | 48 | 53 | 54 | 55 | 56 | Sign up 57 | 58 | 59 | 64 | 65 | 66 | 67 | 68 | First Name 69 | 70 | 71 | 72 | 73 | 74 | Last Name 75 | 76 | 77 | 78 | 79 | 80 | Email address 81 | 82 | 83 | 84 | Create Password 85 | 86 | 87 | 88 | 95 | 96 | 97 | 98 | 99 | 110 | 111 | 112 | 113 | Already a user? Login 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | ) 122 | } 123 | 124 | export default Signup 125 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Natural.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const NaturalPopup = styled.div` 5 | width: 80%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | text-align: left; 10 | padding: 2vh 0 3vh 0; 11 | border-bottom-left-radius: 5px; 12 | border-bottom-right-radius: 5px; 13 | border: 1px solid #e6dede; 14 | background-color: #fafafa; 15 | .natural { 16 | display: flex; 17 | justify-content: center; 18 | margin: auto; 19 | gap: 1.8vw; 20 | } 21 | .natural > div:nth-child(even) { 22 | background-color: #f4f4f4; 23 | padding: 0px 14px 0px 14px; 24 | } 25 | 26 | .natural > div > p { 27 | line-height: 1.2; 28 | font-size: 14px; 29 | } 30 | .natural > div > p:hover { 31 | color: #fc3581; 32 | cursor: pointer; 33 | } 34 | `; 35 | 36 | const Natural = () => { 37 | return ( 38 | 39 |
40 |
41 |

Skin

42 |

Face Wash

43 |

Cleanser

44 |

Moisturizer

45 |

Face Cream

46 |

Face Mist

47 |

Facial Kits

48 |

Toner

49 |

Face Oils

50 |

Sunscreen

51 |

Night Cream

52 |

Day Cream

53 |

Under Eye Care

54 |

Face Bleach

55 |

Serums

56 |
57 |
58 |

Skin

59 |

Sheet Masks

60 |

Masks & Peels

61 |

Scrubs & Exfoliators

62 |

Face Tools

63 |

Face Gel

64 |

Lip Scrub

65 |

Body Care

66 |

Shower Gels & Body Wash

67 |

Soaps

68 |

Body Lotions

69 |

Body Scrubs

70 |

Bath Salts & Bath Bombs

71 |

Hands & Feet Care

72 |

Bath Tools & Accessories

73 |

Oral Care

74 |
75 |
76 |

Hair

77 |

Shampoo & Cleanser

78 |

Conditioner

79 |

Hair Masks

80 |

Hair Oil

81 |

Hair Serum

82 |

Hair Color

83 |

Tools & Accessories

84 |

Aromatherapy

85 |

Massage Oils

86 |

Carrier Oils

87 |

Essential Oils

88 |

Candles

89 |

Diffuser

90 |

Incense Sticks

91 |
92 |
93 |

Makeup

94 |

Lipstick

95 |

Kajal

96 |

Eyeliner

97 |

Mascara

98 |

Nail Polish

99 |

Lip Balm & Gloss

100 |

Foundation & Concealer

101 |

Blush & Highlighter

102 |

Makeup Remover

103 |

Tools & Brushes

104 |

Trending Search

105 |

Tea Tree Oil

106 |

Eucalyptus Oil

107 |

Rosemary Oil

108 |

Jojoba Oil

109 |

Peppermint Oil

110 |
111 |
112 |

Top Brands

113 |

Biotique

114 |

Lotus Herbals

115 |

The Body Shop

116 |

Nykaa Naturals

117 |

Kama Ayurveda

118 |

Forest Essentials

119 |

Khadi Natural

120 |

Himalaya

121 |

VLCC

122 |

Baby Care

123 |

Types Of Skin

124 |

Dry Skin

125 |

Normal Skin

126 |

Oily Skin

127 |

Combination Skin

128 |
129 |
130 |

Shop By Concern

131 |

Tan Removal

132 |

Pigmentation

133 |

Acne Treatment

134 |

Skin Lightening

135 |

Anti Aging

136 |

Dark Circles

137 |

Hairfall

138 |

Dandruff

139 |

Dry & Frizzy Hair

140 |

QUICK LINKS

141 |

New Launches

142 |

Combos @ Nykaa

143 |

Gifts @ Nykaa

144 |

The Safe Beauty Edit

145 |
146 |
147 | 148 | ); 149 | }; 150 | 151 | export default Natural; 152 | -------------------------------------------------------------------------------- /src/components/Home/Home.module.css: -------------------------------------------------------------------------------- 1 | .banner { 2 | width: 90%; 3 | height: auto; 4 | margin: auto; 5 | margin-top: 15px; 6 | margin-bottom: 20px; 7 | border-radius: 3px; 8 | } 9 | .banner:hover { 10 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, 11 | rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 12 | } 13 | .bigheader { 14 | font-size: 24px; 15 | font-weight: normal; 16 | color: black; 17 | text-align: center; 18 | margin: auto; 19 | margin-top: 20px; 20 | margin-bottom: 10px; 21 | text-transform: uppercase; 22 | } 23 | .card { 24 | border: 2px solid blue; 25 | display: grid; 26 | grid-template-columns: repeat(3, 300px); 27 | grid-template-rows: auto; 28 | width: 89%; 29 | margin: auto; 30 | gap: 20px; 31 | } 32 | .discount { 33 | /* border: 2px solid red; */ 34 | width: 300px; 35 | margin: auto; 36 | text-align: center; 37 | } 38 | .card2 { 39 | /* border: 2px solid green; */ 40 | display: flex; 41 | flex-wrap: wrap; 42 | box-sizing: border-box; 43 | width: auto; 44 | margin-top: 50px; 45 | height: auto; 46 | margin-top: 20px; 47 | /* width: 89%; 48 | margin: auto; */ 49 | } 50 | .card2hovereffect { 51 | margin: auto; 52 | } 53 | .card2hovereffect:hover { 54 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, 55 | rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 56 | } 57 | .desimcal { 58 | width: 400px; 59 | height: 350px; 60 | object-fit: cover; 61 | border-radius: 3px; 62 | } 63 | .desimcal:hover { 64 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, 65 | rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 66 | } 67 | .banner2 { 68 | width: 89%; 69 | height: auto; 70 | margin: auto; 71 | margin-top: 15px; 72 | border-radius: 5px; 73 | } 74 | .banner2:hover { 75 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, 76 | rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 77 | } 78 | .banner3 { 79 | width: 89%; 80 | height: auto; 81 | margin: auto; 82 | margin-top: 15px; 83 | border-radius: 3px; 84 | } 85 | .banner3:hover { 86 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, 87 | rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 88 | } 89 | .cardwidth { 90 | width: 250px; 91 | /* border: 2px solid red; */ 92 | } 93 | .cardsquare { 94 | display: flex; 95 | width: 1140px; 96 | margin-left: 70px; 97 | gap: 20px; 98 | margin-top: 30px; 99 | } 100 | .cardhovereffect { 101 | box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%); 102 | } 103 | .cardhovereffect:hover { 104 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, 105 | rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 106 | } 107 | 108 | .cardsquare img:hover { 109 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, 110 | rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 111 | } 112 | .setcontainer { 113 | position: relative; 114 | display: inline-block; 115 | } 116 | .setdiv { 117 | position: absolute; 118 | padding: 5px; 119 | width: 535px; 120 | height: 74px; 121 | margin-top: -74px; 122 | margin-left: 10px; 123 | text-align: center; 124 | border-radius: 3px; 125 | background: rgba(255, 255, 255, 1); 126 | word-wrap: break-word; 127 | text-transform: capitalize; 128 | box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%); 129 | } 130 | .tittle { 131 | color: #fc2779; 132 | font-size: 18px; 133 | font-weight: 400; 134 | line-height: 1.2; 135 | } 136 | .scrollbtn { 137 | position: fixed; 138 | width: 100%; 139 | left: 94%; 140 | bottom: 40px; 141 | height: 20px; 142 | font-size: 3rem; 143 | z-index: 1; 144 | cursor: pointer; 145 | color: #fc2779; 146 | height: 45px; 147 | } 148 | .bahaar { 149 | padding: 0px 30px; 150 | } 151 | .top_brands { 152 | display: grid; 153 | grid-template-columns: repeat(3, 455px); 154 | gap: 30px; 155 | margin-top: 10px; 156 | } 157 | .top_cont { 158 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, 159 | rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; 160 | border-radius: 10px; 161 | } 162 | .top_content { 163 | text-align: center; 164 | margin: 10px 0px 10px 30px; 165 | background-color: white; 166 | } 167 | .only_nyka { 168 | text-align: center; 169 | margin: 10px 0px 10px 30px; 170 | background-color: #fff6f9; 171 | } 172 | .f_brands { 173 | display: grid; 174 | grid-template-columns: repeat(5, 1fr); 175 | gap: 20px; 176 | margin-top: 10px; 177 | } 178 | .f_inner { 179 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, 180 | rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; 181 | border-radius: 10px; 182 | } 183 | .influe { 184 | border: 1px solid gray; 185 | border-radius: 10px; 186 | } 187 | .dis_nyka { 188 | display: flex; 189 | gap: 30px; 190 | } 191 | .dis_cont { 192 | border: 1px solid gray; 193 | border-radius: 10px; 194 | } 195 | -------------------------------------------------------------------------------- /src/components/Navbar/CatBar/Brands.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const Popup = styled.div` 5 | width: 65%; 6 | display: flex; 7 | justify-content: center; 8 | margin: auto; 9 | padding: 3vh 0px 3vh 0px; 10 | border-bottom-left-radius: 5px; 11 | border-bottom-right-radius: 5px; 12 | border: 1px solid #e6dede; 13 | background-color: #fafafa; 14 | .style { 15 | display: grid; 16 | grid-template-columns: repeat(5, 1fr); 17 | gap: 2.5vh 2vw; 18 | } 19 | `; 20 | 21 | const Brands = () => { 22 | return ( 23 | <> 24 | 25 |
26 | 30 | 34 | 38 | 42 | 46 | 50 | 54 | 58 | 62 | 66 | 70 | 74 | 78 | 82 | 86 | 90 | 94 | 98 | 102 | 106 | 110 | 114 | 118 | 122 | 126 |
127 | 128 | 129 | ); 130 | }; 131 | 132 | export default Brands; 133 | -------------------------------------------------------------------------------- /src/components/Authentication/Register.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from "react"; 2 | import { crossButton, input } from "./login.css"; 3 | import { signInWithPhoneNumber } from "firebase/auth"; 4 | import firebaseAuth from "./firebase"; 5 | import { RecaptchaVerifier } from "firebase/auth"; 6 | 7 | function Register({ 8 | setView, 9 | number, 10 | setNumber, 11 | setPassword, 12 | setName, 13 | setEmail, 14 | }) { 15 | //ReCaptcha 16 | const generateReCaptcha = () => { 17 | window.recaptchaVerifier = new RecaptchaVerifier( 18 | "recaptcha-Div", 19 | { 20 | //size: "invisible", 21 | callback: (response) => { 22 | // reCAPTCHA solved, allow signInWithPhoneNumber. 23 | }, 24 | }, 25 | firebaseAuth 26 | ); 27 | }; 28 | const handleClick = (e) => { 29 | e.preventDefault(); 30 | var phone = "+91" + number; 31 | generateReCaptcha(); 32 | const appVerifier = window.recaptchaVerifier; 33 | signInWithPhoneNumber(firebaseAuth, phone, appVerifier) 34 | .then((confirmation) => { 35 | window.confirmation = confirmation; 36 | setView("AuthOTP"); 37 | }) 38 | .catch((error) => { 39 | console.log(error); 40 | }); 41 | }; 42 | 43 | return ( 44 |
45 | 48 |

55 | LOGIN / REGISTER 56 |

57 |
58 |
59 |
60 |
61 |
69 |
70 |
handleClick(e)}> 71 |
72 | setNumber(e.target.value)} 74 | required 75 | type="tel" 76 | placeholder="Enter Phone Number" 77 | minLength="10" 78 | maxLength="10" 79 | pattern="[0-9]{10}" 80 | style={{ 81 | border: "1px solid red", 82 | background: "#f3f3f3", 83 | width: "100%", 84 | height: "40px", 85 | fontSize: "16px", 86 | textAlign: "center", 87 | outline: "none", 88 | }} 89 | /> 90 |
91 |
92 |
93 | setName(e.target.value)} 95 | required 96 | type="text" 97 | placeholder="Enter Name" 98 | style={{ 99 | border: "1px solid red", 100 | background: "#f3f3f3", 101 | width: "100%", 102 | height: "40px", 103 | fontSize: "16px", 104 | textAlign: "center", 105 | outline: "none", 106 | }} 107 | /> 108 |
109 |
110 |
111 | setEmail(e.target.value)} 113 | required 114 | type="email" 115 | placeholder="Enter Email" 116 | style={{ 117 | border: "1px solid red", 118 | background: "#f3f3f3", 119 | width: "100%", 120 | height: "40px", 121 | fontSize: "16px", 122 | textAlign: "center", 123 | outline: "none", 124 | }} 125 | /> 126 | 127 |
128 |
129 |
130 | setPassword(e.target.value)} 132 | required 133 | type="password" 134 | placeholder="Enter New Password" 135 | style={{ 136 | border: "1px solid red", 137 | background: "#f3f3f3", 138 | width: "100%", 139 | height: "40px", 140 | fontSize: "16px", 141 | textAlign: "center", 142 | outline: "none", 143 | }} 144 | /> 145 |
146 | 147 |
151 |
152 | 155 |
156 |
157 |
158 | ); 159 | } 160 | 161 | export default Register; 162 | -------------------------------------------------------------------------------- /src/components/Authentication/AuthOtp.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { useNavigate } from "react-router-dom"; 3 | import { 4 | crossButton, 5 | grayBox, 6 | inputOTP, 7 | submitButton, 8 | input, 9 | alertPopup, 10 | } from "./login.css"; 11 | import Timer from "./Timer"; 12 | import axios from "axios"; 13 | import { v4 } from "uuid"; 14 | 15 | function AuthOTP({ setView, number, name, password, email }) { 16 | const navigate = useNavigate(); 17 | const [otp, setOtp] = useState(""); 18 | const [Alert, setAlert] = useState(false); 19 | const [popUp, setPopUp] = useState(true); 20 | //<---------------------------------------------------------------->//SetInterval for 30 sec timer 21 | useEffect(() => { 22 | setTimeout(() => { 23 | setAlert(false); 24 | setView("front"); 25 | }, 35000); 26 | }, []); 27 | const handleSubmit = (e) => { 28 | e.preventDefault(); 29 | //<-----------------------------> //OTP Logic for verification 30 | const result = window.confirmation; 31 | result 32 | .confirm(otp) 33 | .then((result) => { 34 | // User signed in successfully. 35 | const user = result.user; 36 | const userData = { 37 | ID: v4(), 38 | Email: email, 39 | Password: password, 40 | Name: name, 41 | Phone: number, 42 | }; 43 | axios 44 | .post("https://mock-server-686g.onrender.com/register", userData) 45 | .then((response) => { 46 | const localData = { 47 | ID: response.data.ID, 48 | Email: email, 49 | Name: name, 50 | Token: user.accessToken, 51 | Photo: 52 | "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png", 53 | }; 54 | localStorage.setItem("oAuth", JSON.stringify(localData)); 55 | alert("Login Successful"); 56 | navigate("/"); 57 | }); 58 | }) 59 | .catch((error) => { 60 | // User couldn't sign in (bad verification code?) 61 | alert("Wrong verification code"); 62 | setView("front"); 63 | }); 64 | }; 65 | 66 | //<---------------------------------------------------------------------------->***** 67 | return ( 68 | <> 69 | {Alert && ( 70 |
71 | OTP Expired. Try to register here : 72 |

navigate("/register")} 75 | > 76 | Register 77 |

78 |
79 | )} 80 |
81 | 84 |

91 | REGISTER 92 |

93 |
94 |
95 |
96 |
104 |

Welcome to Nykaa!

105 |
106 |
113 | Register now and get , 114 |

2000 Reward Points!

115 |
116 |
{number}
117 |
118 |
119 |

120 | Please enter the OTP sent to verify your phone number 121 |

122 |
123 |
124 |
125 |
handleSubmit(e)}> 126 |
133 | setPopUp(false)} 135 | required 136 | pattern="[0-9]{4}" 137 | minLength="4" 138 | maxLength="4" 139 | onChange={(e) => setOtp(e.target.value)} 140 | placeholder="OTP" 141 | type="number" 142 | style={inputOTP} 143 | /> 144 |
145 |
146 | 147 |
148 |

RE-SEND OTP

149 |
150 |
151 |
152 |
153 | 154 |
155 |
156 |
157 |
158 | {popUp &&
OTP sent successfully!
} 159 |
160 |
161 | 162 | ); 163 | } 164 | 165 | export default AuthOTP; 166 | -------------------------------------------------------------------------------- /src/components/Home/Carousel3.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Image, Text } from "@chakra-ui/react"; 2 | import Carousel from "react-multi-carousel"; 3 | import "react-multi-carousel/lib/styles.css"; 4 | import styles from "./Carousel.module.css"; 5 | const responsive = { 6 | superLargeDesktop: { 7 | // the naming can be any, depends on you. 8 | breakpoint: { max: 4000, min: 3000 }, 9 | items: 5, 10 | }, 11 | desktop: { 12 | breakpoint: { max: 3000, min: 1024 }, 13 | items: 5, 14 | }, 15 | tablet: { 16 | breakpoint: { max: 1024, min: 464 }, 17 | items: 2, 18 | }, 19 | mobile: { 20 | breakpoint: { max: 464, min: 0 }, 21 | items: 1, 22 | }, 23 | }; 24 | 25 | const Carousel3 = () => { 26 | return ( 27 |
28 | 29 | 30 | error 35 |
43 | 50 | Moisturisers 51 | 52 |
53 | 54 | 55 | error 60 |
68 | 75 | Bath & Body 76 | 77 |
78 | 79 | 80 | error 85 |
93 | 100 | Face Washes 101 | 102 |
103 | 104 | 105 | error 110 |
118 | 125 | Budget Makeup 126 | 127 |
128 | 129 | 130 | error 135 |
143 | 150 | Value Combos 151 | 152 |
153 | 154 | 155 | error 160 |
168 | 175 | Shampoos 176 | 177 |
178 | 179 | 180 |
181 | ); 182 | }; 183 | 184 | export default Carousel3; 185 | -------------------------------------------------------------------------------- /src/components/SingleProduct/SingleProduct.jsx: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import React from 'react'; 3 | import {FcCheckmark} from "react-icons/fc" 4 | import { useEffect } from 'react'; 5 | import { useState } from 'react'; 6 | import {CiLocationOn} from "react-icons/ci/" 7 | import { FaStar } from 'react-icons/fa'; 8 | import { useParams } from 'react-router-dom'; 9 | import style from "../ProductPage/products.module.css"; 10 | import styles from "../SingleProduct/product.module.css"; 11 | import { Box, SkeletonCircle, SkeletonText } from '@chakra-ui/react'; 12 | import { useDispatch } from 'react-redux'; 13 | import { addToCart } from '../../actions/cart'; 14 | 15 | const SingleProduct = () => { 16 | const params = useParams(); 17 | console.log(params); 18 | const [product, setProduct] = useState({}); 19 | const [loading, setLoading] = useState(false); 20 | const [active, setActive] = useState(0); 21 | const dispatch=useDispatch(); 22 | 23 | const handleCart=(product)=>{ 24 | dispatch(addToCart(product)); 25 | 26 | } 27 | 28 | let id = Number(params.id); 29 | const getProduct = async (id) => { 30 | try { 31 | setLoading(true) 32 | let res = await axios.get(`https://nyka-json.onrender.com/products/${id}`); 33 | setLoading(false); 34 | let data = res.data; 35 | 36 | setProduct(data); 37 | } catch (error) { 38 | setLoading(false); 39 | console.log(error) 40 | } 41 | } 42 | 43 | let images = [product.image1, product.image2, product.image3]; 44 | let stars = Math.floor(product.rating); 45 | let starArr; 46 | if (stars) { 47 | starArr = new Array(stars).fill(1); 48 | } 49 | 50 | 51 | 52 | 53 | useEffect(() => { 54 | getProduct(id) 55 | }, []); 56 | 57 | 58 | 59 | if (loading) { 60 | return
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
77 | } 78 | 79 | return ( 80 |
81 | 82 | 83 |
84 |
85 |
86 | { 87 | images?.map((image, ind) => { 88 | return {ind} setActive(ind)} /> 89 | }) 90 | } 91 |
92 |
93 | image 94 |
95 |
96 | 97 |
98 |
99 |

{product.title}

100 |
101 |
102 | { 103 | starArr?.map((star) => { 104 | return 105 | }) 106 | } 107 |
108 |

{product.rating}/5  {product.ratingNum} ratings & {product.reviews} reviews   Q&As

109 |
110 |

111 | MRP: {product.price}  ₹{product.off_price}  {product.offer}% Off 112 |

113 |

inclusive all taxes

114 |
115 |
116 |
117 | 118 | 119 |
120 |
121 |
 

Delivery options for: 752031

122 |
123 |  

Shipping to Balugaon , India

124 |
125 |
126 |  

Delivery by 25th Dec

127 |
128 |
129 |  

Cash on Delivery available on orders above 499/-

130 |
131 |
132 |
133 |
134 | 135 |
136 |
137 | ) 138 | } 139 | 140 | export default SingleProduct -------------------------------------------------------------------------------- /src/logs/Signin.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Flex, 4 | Box, 5 | FormControl, 6 | FormLabel, 7 | Input, 8 | Checkbox, 9 | Stack, 10 | Link, 11 | Button, 12 | Heading, 13 | Text, 14 | useColorModeValue, 15 | useDisclosure, 16 | Modal, 17 | ModalOverlay, 18 | ModalContent, 19 | ModalFooter, 20 | ModalBody, 21 | ModalCloseButton, 22 | } from '@chakra-ui/react'; 23 | import { useEffect, useState } from 'react'; 24 | import { useDispatch, useSelector } from 'react-redux'; 25 | import { Navigate } from 'react-router-dom'; 26 | // import Navbar from '../../compounts/navbar/Navbar'; 27 | // import { login } from '../../Redux/Login/Login.action'; 28 | import { login } from "../Redux/Login/Login.action" 29 | 30 | function Signin() { 31 | const { isOpen, onOpen, onClose } = useDisclosure() 32 | const [user,setUser]= useState({email:"",password:""}); 33 | const dispatch = useDispatch(); 34 | const state= useSelector((store)=>store.loginManager); 35 | 36 | 37 | const handleChange=(e)=>{ 38 | const {name,value}=e.target; 39 | setUser({...user,[name]:value}) 40 | } 41 | 42 | const handleLogin=()=>{ 43 | dispatch(login(user)); 44 | 45 | } 46 | 47 | useEffect(() => { 48 | 49 | if(state.existingUser){ 50 | 51 | } 52 | }, [state]) 53 | return ( 54 | <> 55 | {/* */} 56 | 57 | 63 | 64 | 65 | Login to your account 66 | 67 | 72 | 73 | 74 | Email address 75 | 76 | 77 | 78 | Password 79 | 80 | 81 | 82 | 86 | Remember me 87 | Forgot password? 88 | 89 | 90 | 91 | 92 | 93 | 94 | 98 | 107 | 108 | Forgot your password? 109 | 110 | 113 | You'll get an email with a reset link 114 | 115 | 116 | 121 | 122 | 123 | 131 | 132 | 133 | 134 | 135 | 136 | 139 | 140 | 141 | 142 | 143 | 153 | 154 | 155 | Didn't signup? Create an Account 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | ) 165 | } 166 | 167 | export default Signin 168 | -------------------------------------------------------------------------------- /src/components/Home/Carousel4.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Image, Text } from "@chakra-ui/react"; 2 | import Carousel from "react-multi-carousel"; 3 | import "react-multi-carousel/lib/styles.css"; 4 | import styles from "./Carousel.module.css"; 5 | const responsive = { 6 | superLargeDesktop: { 7 | // the naming can be any, depends on you. 8 | breakpoint: { max: 4000, min: 3000 }, 9 | items: 5, 10 | }, 11 | desktop: { 12 | breakpoint: { max: 3000, min: 1024 }, 13 | items: 5, 14 | }, 15 | tablet: { 16 | breakpoint: { max: 1024, min: 464 }, 17 | items: 2, 18 | }, 19 | mobile: { 20 | breakpoint: { max: 464, min: 0 }, 21 | items: 1, 22 | }, 23 | }; 24 | 25 | const Carousel4 = () => { 26 | return ( 27 |
28 | 29 | 30 | error 36 |
43 | 50 | Makeup 51 | 52 | 53 | Up To 30% Off 54 | 55 |
56 | 57 | 58 | error 64 |
71 | 78 | Skincare 79 | 80 | 81 | Up To 30% Off 82 | 83 |
84 | 85 | 86 | error 92 |
99 | 106 | New Arrivals 107 | 108 | 109 | Up To 50% Off 110 | 111 |
112 | 113 | 114 | error 120 |
127 | 134 | Luke Minis 135 | 136 | 137 | Free Shipping 138 | 139 |
140 | 141 | 142 | error 148 |
155 | 162 | Hair 163 | 164 | 165 | Up To 30% Off 166 | 167 |
168 | 169 | 170 | error 176 |
183 | 190 | Bestsellers 191 | 192 | 193 | Up To 30% Off 194 | 195 |
196 | 197 | 198 |
199 | ); 200 | }; 201 | 202 | export default Carousel4; 203 | -------------------------------------------------------------------------------- /src/components/Authentication/ManualRegistration.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { container, crossButton, submit, inputReg, h2Reg } from "./login.css"; 3 | import { useNavigate } from "react-router-dom"; 4 | import axios from "axios"; 5 | import { v4 } from "uuid"; 6 | 7 | function ManualRegistration() { 8 | const navigate = useNavigate(); 9 | const [login, setLogin] = useState(false); 10 | const [email, setEmail] = useState(""); 11 | const [password, setPassword] = useState(""); 12 | const [name, setName] = useState(""); 13 | const [phone, setPhone] = useState(""); 14 | const handleSubmit = (e, i) => { 15 | e.preventDefault(); 16 | if (i === "login") { 17 | const data = { 18 | Email: email, 19 | Password: password, 20 | }; 21 | axios 22 | .post("https://mock-server-686g.onrender.com/login", data) 23 | .then((response) => { 24 | console.log(response); 25 | if (response.data.Message === "Account does not exist") { 26 | alert("Account does not exist, please create one"); 27 | setLogin(false); 28 | } 29 | if (response.data.Message === "Password doesn't match!") { 30 | alert("Password doesn't match, Try once again"); 31 | setPassword(""); 32 | } else { 33 | const localData = { 34 | ID: response.data.ID, 35 | Email: email, 36 | Name: response.data.Name, 37 | Token: response.data.Token, 38 | Photo: 39 | "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png", 40 | }; 41 | localStorage.setItem("user", JSON.stringify(localData)); 42 | } 43 | }) 44 | .catch((error) => { 45 | console.log(error); 46 | }); 47 | } else { 48 | const data = { 49 | ID: v4(), 50 | Email: email, 51 | Password: password, 52 | Name: name, 53 | Phone: phone, 54 | }; 55 | axios 56 | .post("https://mock-server-686g.onrender.com/register", data) 57 | .then((response) => { 58 | const localData = { 59 | ID: response.data.ID, 60 | Email: email, 61 | Name: name, 62 | Token: response.data.Token, 63 | Photo: 64 | "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png", 65 | }; 66 | localStorage.setItem("user", JSON.stringify(localData)); 67 | alert("Login Successful"); 68 | navigate("/"); 69 | }) 70 | .catch((error) => { 71 | console.log(error); 72 | }); 73 | } 74 | }; 75 | return ( 76 |
77 | 80 |

87 | {login ? "SIGN IN" : "SIGN UP"} 88 |

89 |
90 |
91 |
92 |
93 |
101 |
102 | {login ? ( 103 | <> 104 |
105 |
handleSubmit(e, "login")}> 106 |

Email:

107 | setEmail(e.target.value)} 109 | style={inputReg} 110 | required 111 | type="email" 112 | placeholder="Enter Email" 113 | /> 114 |
115 |

Password:

116 | setPassword(e.target.value)} 118 | style={inputReg} 119 | required 120 | type="password" 121 | placeholder="Enter Password" 122 | /> 123 |
124 |
125 |
126 | 127 |
128 |
129 |

setLogin(false)} 131 | style={{ color: "#fc2779", cursor: "pointer" }} 132 | > 133 | New user? Register here 134 |

135 |
136 | 137 | ) : ( 138 | <> 139 |
140 |
handleSubmit(e, "register")}> 141 |

Email:

142 | setEmail(e.target.value)} 144 | style={inputReg} 145 | required 146 | type="email" 147 | placeholder="Enter Email" 148 | /> 149 |
150 |

Password:

151 | setPassword(e.target.value)} 153 | style={inputReg} 154 | required 155 | type="password" 156 | placeholder="Enter Password" 157 | /> 158 |
159 |

Name:

160 | setName(e.target.value)} 162 | style={inputReg} 163 | required="required" 164 | type="text" 165 | placeholder="Enter Name" 166 | /> 167 |
168 |

Phone:

169 | setPhone(e.target.value)} 171 | style={inputReg} 172 | type="tel" 173 | placeholder="Enter Phone" 174 | /> 175 |
176 |
177 |
178 |
179 | 180 |
181 |
182 |

setLogin(true)} 184 | style={{ color: "#fc2779", cursor: "pointer" }} 185 | > 186 | Already an user? Please Login 187 |

188 |
189 | 190 | )} 191 |
192 | ); 193 | } 194 | 195 | export default ManualRegistration; 196 | -------------------------------------------------------------------------------- /src/components/Home/Carousel6.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Image, Text } from "@chakra-ui/react"; 2 | import Carousel from "react-multi-carousel"; 3 | import "react-multi-carousel/lib/styles.css"; 4 | import styles from "./Carousel.module.css"; 5 | const responsive = { 6 | superLargeDesktop: { 7 | // the naming can be any, depends on you. 8 | breakpoint: { max: 4000, min: 3000 }, 9 | items: 5, 10 | }, 11 | desktop: { 12 | breakpoint: { max: 3000, min: 1024 }, 13 | items: 5, 14 | }, 15 | tablet: { 16 | breakpoint: { max: 1024, min: 464 }, 17 | items: 2, 18 | }, 19 | mobile: { 20 | breakpoint: { max: 464, min: 0 }, 21 | items: 1, 22 | }, 23 | }; 24 | 25 | const Carousel6 = () => { 26 | return ( 27 |
28 | 29 | 30 | error 36 |
43 | 50 | Up To 40% Off 51 | 52 | 53 | On Entire Range 54 | 55 |
56 | 57 | 58 | error 64 |
72 | 79 | Up To 30% Off 80 | 81 | 82 | On All Orders 83 | 84 |
85 | 86 | 87 | error 93 |
101 | 108 | Up To 20% Off 109 | 110 | 111 | On Bestsellers 112 | 113 |
114 | 115 | 116 | error 122 |
130 | 137 | Up To 20% Off 138 | 139 | 140 | Huda & MonaKattan 141 | 142 |
143 | 144 | 145 | error 151 |
159 | 166 | Up To 40% Off+ 167 | 168 | 169 | On Rs.900 170 | 171 |
172 | 173 | 174 | error 180 |
188 | 195 | View All 196 | 197 | 198 | Makeup 199 | 200 |
201 | 202 | 203 |
204 | ); 205 | }; 206 | 207 | export default Carousel6; 208 | -------------------------------------------------------------------------------- /src/components/Home/Carousel7.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Image, Text } from "@chakra-ui/react"; 2 | import Carousel from "react-multi-carousel"; 3 | import "react-multi-carousel/lib/styles.css"; 4 | import styles from "./Carousel.module.css"; 5 | const responsive = { 6 | superLargeDesktop: { 7 | // the naming can be any, depends on you. 8 | breakpoint: { max: 4000, min: 3000 }, 9 | items: 5, 10 | }, 11 | desktop: { 12 | breakpoint: { max: 3000, min: 1024 }, 13 | items: 5, 14 | }, 15 | tablet: { 16 | breakpoint: { max: 1024, min: 464 }, 17 | items: 2, 18 | }, 19 | mobile: { 20 | breakpoint: { max: 464, min: 0 }, 21 | items: 1, 22 | }, 23 | }; 24 | 25 | const Carousel7 = () => { 26 | return ( 27 |
28 | 29 | 30 | error 36 |
43 | 50 | Up To 40% Off 51 | 52 | 53 | On Entire Range 54 | 55 |
56 | 57 | 58 | error 64 |
72 | 79 | Up To 30% Off 80 | 81 | 82 | On All Orders 83 | 84 |
85 | 86 | 87 | error 93 |
101 | 108 | Up To 20% Off 109 | 110 | 111 | On Bestsellers 112 | 113 |
114 | 115 | 116 | error 122 |
130 | 137 | Up To 20% Off 138 | 139 | 140 | Huda & MonaKattan 141 | 142 |
143 | 144 | 145 | error 151 |
159 | 166 | Up To 40% Off+ 167 | 168 | 169 | On Rs.900 170 | 171 |
172 | 173 | 174 | error 180 |
188 | 195 | View All 196 | 197 | 198 | Skincare 199 | 200 |
201 | 202 | 203 |
204 | ); 205 | }; 206 | 207 | export default Carousel7; 208 | -------------------------------------------------------------------------------- /src/components/Home/Carousel8.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Image, Text } from "@chakra-ui/react"; 2 | import Carousel from "react-multi-carousel"; 3 | import "react-multi-carousel/lib/styles.css"; 4 | import styles from "./Carousel.module.css"; 5 | const responsive = { 6 | superLargeDesktop: { 7 | // the naming can be any, depends on you. 8 | breakpoint: { max: 4000, min: 3000 }, 9 | items: 5, 10 | }, 11 | desktop: { 12 | breakpoint: { max: 3000, min: 1024 }, 13 | items: 5, 14 | }, 15 | tablet: { 16 | breakpoint: { max: 1024, min: 464 }, 17 | items: 2, 18 | }, 19 | mobile: { 20 | breakpoint: { max: 464, min: 0 }, 21 | items: 1, 22 | }, 23 | }; 24 | 25 | const Carousel8 = () => { 26 | return ( 27 |
28 | 29 | 30 | error 36 |
43 | 50 | Up To 40% Off 51 | 52 | 53 | On Entire Range 54 | 55 |
56 | 57 | 58 | error 64 |
72 | 79 | Up To 30% Off 80 | 81 | 82 | On All Orders 83 | 84 |
85 | 86 | 87 | error 93 |
101 | 108 | Up To 20% Off 109 | 110 | 111 | On Bestsellers 112 | 113 |
114 | 115 | 116 | error 122 |
130 | 137 | Up To 20% Off 138 | 139 | 140 | Huda & MonaKattan 141 | 142 |
143 | 144 | 145 | error 151 |
159 | 166 | Up To 40% Off+ 167 | 168 | 169 | On Rs.900 170 | 171 |
172 | 173 | 174 | error 180 |
188 | 195 | View All 196 | 197 | 198 | More Beauty 199 | 200 |
201 | 202 | 203 |
204 | ); 205 | }; 206 | 207 | export default Carousel8; 208 | -------------------------------------------------------------------------------- /src/components/Home/Carousel9.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Image, Text } from "@chakra-ui/react"; 2 | import Carousel from "react-multi-carousel"; 3 | import "react-multi-carousel/lib/styles.css"; 4 | import styles from "./Carousel.module.css"; 5 | const responsive = { 6 | superLargeDesktop: { 7 | // the naming can be any, depends on you. 8 | breakpoint: { max: 4000, min: 3000 }, 9 | items: 5, 10 | }, 11 | desktop: { 12 | breakpoint: { max: 3000, min: 1024 }, 13 | items: 5, 14 | }, 15 | tablet: { 16 | breakpoint: { max: 1024, min: 464 }, 17 | items: 2, 18 | }, 19 | mobile: { 20 | breakpoint: { max: 464, min: 0 }, 21 | items: 1, 22 | }, 23 | }; 24 | 25 | const Carousel9 = () => { 26 | return ( 27 |
28 | 29 | 30 | error 36 |
43 | 50 | Up To 40% Off 51 | 52 | 53 | On Entire Range 54 | 55 |
56 | 57 | 58 | error 64 |
72 | 79 | Up To 30% Off 80 | 81 | 82 | On All Orders 83 | 84 |
85 | 86 | 87 | error 93 |
101 | 108 | Up To 20% Off 109 | 110 | 111 | On Bestsellers 112 | 113 |
114 | 115 | 116 | error 122 |
130 | 137 | Up To 20% Off 138 | 139 | 140 | Huda & MonaKattan 141 | 142 |
143 | 144 | 145 | error 151 |
159 | 166 | Up To 40% Off+ 167 | 168 | 169 | On Rs.900 170 | 171 |
172 | 173 | 174 | error 180 |
188 | 195 | View All 196 | 197 | 198 | Global Faves 199 | 200 |
201 | 202 | 203 |
204 | ); 205 | }; 206 | 207 | export default Carousel9; 208 | --------------------------------------------------------------------------------