├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── assets │ ├── add.png │ ├── aus.png │ ├── better.jpeg │ ├── car1.png │ ├── car2.png │ ├── car3.png │ ├── car4.png │ ├── cara.png │ ├── cartGif.gif │ ├── drop.png │ ├── feel.png │ ├── filterBtn.png │ ├── flo.png │ ├── good.jpeg │ ├── hair.jpeg │ ├── i1.jpg │ ├── i10.jpg │ ├── i11.jpg │ ├── i2.jpg │ ├── i3.jpg │ ├── i4.jpg │ ├── i5.jpg │ ├── i6.jpg │ ├── i7.jpg │ ├── i8.jpg │ ├── i9.jpg │ ├── ing1.png │ ├── ing2.png │ ├── ing3.png │ ├── ing4.png │ ├── ing5.png │ ├── ing6.png │ ├── mastercard.png │ ├── nf.png │ ├── one.png │ ├── prevv.png │ ├── qty.png │ ├── s.png │ ├── sortBtn.png │ ├── three.png │ ├── two.png │ └── u20bg.png ├── components │ ├── BestSellers.js │ ├── Body.js │ ├── BreadCrumb.js │ ├── BsText.js │ ├── Cart.js │ ├── CartAdditonalFeatures.js │ ├── CartHold.js │ ├── CartPageFaq.js │ ├── CartPageFooter.js │ ├── CartTotal.js │ ├── EmptyCart.js │ ├── Features2.js │ ├── FollowONIG.js │ ├── ForHer.js │ ├── ForHim.js │ ├── GiftSets.js │ ├── Gifts.js │ ├── HeroCarousel.js │ ├── HeroSection.js │ ├── Ingridients.js │ ├── JournalPage.js │ ├── JournalPageFooter.js │ ├── JournalSection.js │ ├── MobileJournalSinglePage.js │ ├── MobileNav.js │ ├── NavBar.js │ ├── OurBestSellers.js │ ├── Products.js │ ├── Review1.js │ ├── SPFooter.js │ ├── SearchBox.js │ ├── SingleAlsoLike.js │ ├── SingleJournal.js │ ├── SinglePage.js │ ├── SinglePageFAQ.js │ ├── Under10.js │ ├── Under20.js │ └── YouMayAlsoLike.js ├── index.css ├── index.js ├── logo.svg ├── productsStore │ └── Store.js ├── redux-state │ └── CartState.js ├── reportWebVitals.js ├── setupTests.js └── styles │ ├── BestSellers.css │ ├── Body.css │ ├── FollowONIG.css │ ├── GiftSets.css │ ├── HeroSection.css │ ├── Ingridients.css │ ├── JournalPage.css │ ├── JournalSection.css │ ├── Navbar.css │ ├── Navbar.css.map │ ├── Navbar.scss │ ├── OurBestSellers.css │ ├── SearchBox.css │ ├── SinglePage.css │ ├── Under20.css │ └── YouMayAlsoLike.css └── tailwind.config.js /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | An 8 page e-commerce website with the 3 | home page, 4 | product detail page, 5 | cart and checkout page, 6 | under 20 page, 7 | under 40 page, 8 | for him page, 9 | for her page, 10 | journal page. 11 | 12 | with great UI UX built using react with the product detail page having a search bar to search and filter out reviewes, integrated gpay, paypal, visa, amex and mastercard for checkout on the cart page. 13 | the under 20 and under 40 page having filtering options to filter out products based upon category of products i.e body-lotion, body-wash and body-scurb. 14 | tech stack used = react, javascript, scss and css. 15 | 16 | DO STAR THE REPO 🌟 17 | 18 | 19 | # Getting Started with Create React App 20 | 21 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 22 | 23 | ## Available Scripts 24 | 25 | In the project directory, you can run: 26 | 27 | ### `npm start` 28 | 29 | Runs the app in the development mode.\ 30 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 31 | 32 | The page will reload when you make changes.\ 33 | You may also see any lint errors in the console. 34 | 35 | ### `npm test` 36 | 37 | Launches the test runner in the interactive watch mode.\ 38 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 39 | 40 | ### `npm run build` 41 | 42 | Builds the app for production to the `build` folder.\ 43 | It correctly bundles React in production mode and optimizes the build for the best performance. 44 | 45 | The build is minified and the filenames include the hashes.\ 46 | Your app is ready to be deployed! 47 | 48 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 49 | 50 | ### `npm run eject` 51 | 52 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 53 | 54 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 55 | 56 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 57 | 58 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 59 | 60 | ## Learn More 61 | 62 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 63 | 64 | To learn React, check out the [React documentation](https://reactjs.org/). 65 | 66 | ### Code Splitting 67 | 68 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 69 | 70 | ### Analyzing the Bundle Size 71 | 72 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 73 | 74 | ### Making a Progressive Web App 75 | 76 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 77 | 78 | ### Advanced Configuration 79 | 80 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 81 | 82 | ### Deployment 83 | 84 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 85 | 86 | ### `npm run build` fails to minify 87 | 88 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 89 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "e-com", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/icons": "^2.0.12", 7 | "@chakra-ui/react": "^2.4.1", 8 | "@emotion/react": "^11.10.5", 9 | "@emotion/styled": "^11.10.5", 10 | "@google-pay/button-react": "^3.0.0", 11 | "@material-ui/core": "^4.12.4", 12 | "@mui/material": "^5.10.13", 13 | "@paypal/react-paypal-js": "^7.8.1", 14 | "@reduxjs/toolkit": "^1.9.0", 15 | "@testing-library/jest-dom": "^5.16.5", 16 | "@testing-library/react": "^13.4.0", 17 | "@testing-library/user-event": "^13.5.0", 18 | "daisyui": "^2.39.0", 19 | "framer-motion": "^7.6.6", 20 | "react": "^18.2.0", 21 | "react-alice-carousel": "^2.6.4", 22 | "react-dom": "^18.2.0", 23 | "react-external-link": "^2.0.0", 24 | "react-faq-component": "^1.3.4", 25 | "react-fast-marquee": "^1.3.5", 26 | "react-highlight-words": "^0.18.0", 27 | "react-hover-image": "^2.0.1", 28 | "react-icons": "^4.6.0", 29 | "react-image-magnifiers": "^1.4.0", 30 | "react-image-magnify": "^2.7.4", 31 | "react-image-zoom": "^1.3.1", 32 | "react-paypal-button-v2": "^2.6.3", 33 | "react-redux": "^8.0.5", 34 | "react-router-dom": "^6.4.3", 35 | "react-scripts": "5.0.1", 36 | "react-show-more-text": "^1.6.2", 37 | "react-slick": "^0.29.0", 38 | "slick-carousel": "^1.8.1", 39 | "web-vitals": "^2.1.4", 40 | "word-wrap": "^1.2.3" 41 | }, 42 | "scripts": { 43 | "start": "react-scripts --max_old_space_size=4096 start", 44 | "build": "react-scripts --max_old_space_size=4096 build", 45 | "test": "react-scripts test", 46 | "eject": "react-scripts eject" 47 | }, 48 | "eslintConfig": { 49 | "extends": [ 50 | "react-app", 51 | "react-app/jest" 52 | ] 53 | }, 54 | "browserslist": { 55 | "production": [ 56 | ">0.2%", 57 | "not dead", 58 | "not op_mini all" 59 | ], 60 | "development": [ 61 | "last 1 chrome version", 62 | "last 1 firefox version", 63 | "last 1 safari version" 64 | ] 65 | }, 66 | "devDependencies": { 67 | "tailwindcss": "^3.2.2" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 30 | React App 31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | /*{ 2 | max-width: 100% !important; 3 | box-sizing: border-box !important; 4 | height: auto !important; 5 | }*/ -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import { useState } from 'react'; 3 | import NavBar from './components/NavBar'; 4 | import Body from './components/Body'; 5 | import SimpleSlider from './components/HeroCarousel'; 6 | import HeroSection from './components/HeroSection'; 7 | import OurBestSellers from './components/OurBestSellers'; 8 | import Ingridients from './components/Ingridients'; 9 | import JournalSection from './components/JournalSection'; 10 | import BsText from './components/BsText'; 11 | import { Route, Routes } from 'react-router-dom'; 12 | import { BrowserRouter } from 'react-router-dom'; 13 | import SinglePage from "./components/SinglePage"; 14 | import JournalPage from "./components/JournalPage"; 15 | import Cart from './components/Cart'; 16 | import FollowONIG from './components/FollowONIG'; 17 | import Products from './components/Products'; 18 | import CartHold from './components/CartHold'; 19 | import SPFooter from './components/SPFooter'; 20 | import Under20 from './components/Under20'; 21 | import Under10 from './components/Under10'; 22 | import ForHer from './components/ForHer'; 23 | import ForHim from './components/ForHim'; 24 | import MobileNav from './components/MobileNav'; 25 | 26 | function App() { 27 | 28 | return ( 29 |
30 | 31 | 32 | 33 | {} {/**/} } /> 34 | } /> 35 | } /> 36 | } /> 37 | } /> 38 | } /> 39 | } /> 40 | } /> 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | ); 50 | } 51 | 52 | export default App; 53 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/assets/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/add.png -------------------------------------------------------------------------------- /src/assets/aus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/aus.png -------------------------------------------------------------------------------- /src/assets/better.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/better.jpeg -------------------------------------------------------------------------------- /src/assets/car1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/car1.png -------------------------------------------------------------------------------- /src/assets/car2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/car2.png -------------------------------------------------------------------------------- /src/assets/car3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/car3.png -------------------------------------------------------------------------------- /src/assets/car4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/car4.png -------------------------------------------------------------------------------- /src/assets/cara.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/cara.png -------------------------------------------------------------------------------- /src/assets/cartGif.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/cartGif.gif -------------------------------------------------------------------------------- /src/assets/drop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/drop.png -------------------------------------------------------------------------------- /src/assets/feel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/feel.png -------------------------------------------------------------------------------- /src/assets/filterBtn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/filterBtn.png -------------------------------------------------------------------------------- /src/assets/flo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/flo.png -------------------------------------------------------------------------------- /src/assets/good.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/good.jpeg -------------------------------------------------------------------------------- /src/assets/hair.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/hair.jpeg -------------------------------------------------------------------------------- /src/assets/i1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i1.jpg -------------------------------------------------------------------------------- /src/assets/i10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i10.jpg -------------------------------------------------------------------------------- /src/assets/i11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i11.jpg -------------------------------------------------------------------------------- /src/assets/i2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i2.jpg -------------------------------------------------------------------------------- /src/assets/i3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i3.jpg -------------------------------------------------------------------------------- /src/assets/i4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i4.jpg -------------------------------------------------------------------------------- /src/assets/i5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i5.jpg -------------------------------------------------------------------------------- /src/assets/i6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i6.jpg -------------------------------------------------------------------------------- /src/assets/i7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i7.jpg -------------------------------------------------------------------------------- /src/assets/i8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i8.jpg -------------------------------------------------------------------------------- /src/assets/i9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/i9.jpg -------------------------------------------------------------------------------- /src/assets/ing1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/ing1.png -------------------------------------------------------------------------------- /src/assets/ing2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/ing2.png -------------------------------------------------------------------------------- /src/assets/ing3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/ing3.png -------------------------------------------------------------------------------- /src/assets/ing4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/ing4.png -------------------------------------------------------------------------------- /src/assets/ing5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/ing5.png -------------------------------------------------------------------------------- /src/assets/ing6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/ing6.png -------------------------------------------------------------------------------- /src/assets/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/mastercard.png -------------------------------------------------------------------------------- /src/assets/nf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/nf.png -------------------------------------------------------------------------------- /src/assets/one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/one.png -------------------------------------------------------------------------------- /src/assets/prevv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/prevv.png -------------------------------------------------------------------------------- /src/assets/qty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/qty.png -------------------------------------------------------------------------------- /src/assets/s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/s.png -------------------------------------------------------------------------------- /src/assets/sortBtn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/sortBtn.png -------------------------------------------------------------------------------- /src/assets/three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/three.png -------------------------------------------------------------------------------- /src/assets/two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/two.png -------------------------------------------------------------------------------- /src/assets/u20bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/assets/u20bg.png -------------------------------------------------------------------------------- /src/components/BestSellers.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { store } from '../productsStore/Store' 3 | import "../styles/BestSellers.css"; 4 | import HoverImage from 'react-hover-image/build'; 5 | import { Link } from 'react-router-dom'; 6 | 7 | const BestSellers = () => { 8 | return ( 9 |
10 | {store.map((item) => { 11 | if (item.type == "bestSeller") 12 | return ( 13 | 14 |
15 | 16 |

{item.name}

17 |

${item.price}

18 |
19 | 20 | ) 21 | })} 22 | 23 |
24 | ) 25 | } 26 | 27 | export default BestSellers; 28 | -------------------------------------------------------------------------------- /src/components/Body.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react' 4 | import "../styles/Body.css"; 5 | import { useState } from 'react'; 6 | import { store } from '../productsStore/Store'; 7 | import HoverImage from "react-hover-image/build" 8 | import { Link } from 'react-router-dom'; 9 | 10 | const Body = () => { 11 | 12 | const [show, setShow] = useState(true); 13 | const [show2, setShow2] = useState(false); 14 | const [show3, setShow3] = useState(false); 15 | const [show4, setShow4] = useState(false); 16 | 17 | 18 | const showHandler = () => { 19 | setShow(true) 20 | document.querySelector(".bodyContent").classList.add("transition"); 21 | setShow2(false) 22 | setShow3(false) 23 | setShow4(false) 24 | 25 | document.querySelector(".bodyContent").style.opacity = "1"; 26 | document.querySelector(".hairContent").style.opacity = "0"; 27 | document.querySelector(".newContent").style.opacity = "0"; 28 | document.querySelector(".travelContent").style.opacity = "0"; 29 | 30 | } 31 | 32 | const showHandler2 = () => { 33 | setShow2(true) 34 | document.querySelector(".hairContent").classList.add("transition2"); 35 | setShow(false) 36 | setShow3(false) 37 | setShow4(false) 38 | 39 | 40 | document.querySelector(".hairContent").style.opacity = "1"; 41 | document.querySelector(".bodyContent").style.opacity = "0"; 42 | document.querySelector(".newContent").style.opacity = "0"; 43 | document.querySelector(".travelContent").style.opacity = "0"; 44 | 45 | } 46 | 47 | const showHandler3 = () => { 48 | setShow3(true) 49 | document.querySelector(".travelContent").classList.add("transition3"); 50 | //document.querySelector(".hairContent").style.opacity = "0"; 51 | //document.querySelector(".newContent").style.opacity="0" 52 | setShow(false) 53 | setShow2(false) 54 | setShow4(false) 55 | 56 | document.querySelector(".travelContent").style.opacity = "1"; 57 | document.querySelector(".hairContent").style.opacity = "0"; 58 | document.querySelector(".bodyContent").style.opacity = "0"; 59 | document.querySelector(".newContent").style.opacity = "0"; 60 | } 61 | 62 | const showHandler4 = () => { 63 | setShow4(true) 64 | document.querySelector(".newContent").classList.add("transition4"); 65 | //document.querySelector(".travelContent").style.opacity = "0"; 66 | setShow(false) 67 | setShow2(false) 68 | setShow3(false) 69 | 70 | document.querySelector(".newContent").style.opacity = "1"; 71 | document.querySelector(".hairContent").style.opacity = "0"; 72 | document.querySelector(".bodyContent").style.opacity = "0"; 73 | document.querySelector(".travelContent").style.opacity = "0"; 74 | } 75 | 76 | 77 | const dontShowHandler = () => { 78 | setShow(false) 79 | setShow2(false) 80 | setShow3(false) 81 | setShow4(false) 82 | 83 | document.querySelector(".newContent").style.opacity = "0"; 84 | document.querySelector(".hairContent").style.opacity = "0"; 85 | document.querySelector(".bodyContent").style.opacity = "0"; 86 | document.querySelector(".travelContent").style.opacity = "0"; 87 | 88 | } 89 | return ( 90 |
91 |
92 | 93 |
94 |

BODY

95 |
96 | 97 |
98 |

HAIR

99 |
100 | 101 |
102 |

TRAVEL

103 |
104 | 105 | 106 | 107 |
108 |

NEW

109 |
110 | 111 | 112 | 113 |
114 | 115 | 116 | 117 | {show &&
118 |

Body Wash

119 |

Body Scrub

120 |

Body Lotions

121 |

Body Oil

122 |

Hand Wash

123 |

Hand Creams

124 | 125 |
126 | {store.map((item) => { 127 | if (item.type == "navbar-BodyType") { 128 | return ( 129 | 130 | 131 |
132 | 133 |

{item.name}

134 |
135 | 136 | ) 137 | } 138 | })} 139 |
140 | 141 |
} 142 | 143 | 144 | 145 | {show2 &&
146 |
147 |

CATEGORY

148 |

Shampoos

149 |

Conditioners

150 |

Treatments

151 |
152 | 153 | 154 |
155 |

HAIR CONCERN

156 |

Deep Cleanse

157 |

Oily

158 |

Dry

159 |

Volume

160 |

Normal

161 |
162 | 163 |
164 | 165 | 166 |
167 | 168 |
169 |

Make The Switch! Why Natural Haircare Is Best

170 |

How to lead a natural & sustainable lifestyle

171 |
172 | 173 | 174 | 175 |
} 176 | 177 | {show3 &&
178 |
179 |
180 | {store.map((item) => { 181 | if (item.type == "navbar-TravelType") { 182 | return ( 183 | 184 | 185 |
186 | 187 |

{item.name}

188 |

${item.price}

189 |
190 | 191 | ) 192 | } 193 | })} 194 |
195 | 196 |
197 |
} 198 | 199 | 200 | 201 | 202 | 203 | {show4 &&
204 |
205 |

CATEGORY

206 | 207 |

Brightening Range

208 | 209 |

Facial Masks

210 | 211 |

Rosehip Range

212 | 213 |

Shop All New Arrivals

214 |
215 | 216 |
217 | {store.map((item) => { 218 | if (item.type == "navbar-NewType") { 219 | return ( 220 | 221 | 222 |
223 | 224 |

{item.name}

225 |

${item.price}

226 |
227 | 228 | ) 229 | } 230 | })} 231 |
232 | 233 |
} 234 | 235 | 236 | 237 |
238 | ) 239 | } 240 | 241 | export default Body 242 | -------------------------------------------------------------------------------- /src/components/BreadCrumb.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Breadcrumb, 4 | BreadcrumbItem, 5 | BreadcrumbLink, 6 | BreadcrumbSeparator, 7 | } from '@chakra-ui/react' 8 | 9 | import { ChevronRightIcon } from '@chakra-ui/icons'; 10 | import { Link } from 'react-router-dom'; 11 | 12 | const BreadCrumb = (props) => { 13 | return ( 14 |
15 | }> 16 | 17 | Home 18 | 19 | 20 | 21 | Products 22 | 23 | 24 | 25 | {props.name} 26 | 27 | 28 |
29 | ) 30 | } 31 | 32 | export default BreadCrumb -------------------------------------------------------------------------------- /src/components/BsText.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const BsText = () => { 4 | return ( 5 |
6 | 7 |

OUR BEST SELLERS

8 | 9 |
10 | ) 11 | } 12 | 13 | export default BsText -------------------------------------------------------------------------------- /src/components/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useSelector } from 'react-redux' 3 | import { cartActions } from '../redux-state/CartState' 4 | import { useDispatch } from 'react-redux' 5 | import cartgif from "../assets/cartGif.gif"; 6 | import qty from "../assets/qty.png" 7 | 8 | import { MdAdd } from "react-icons/md"; 9 | //import { GrFormSubtract } from "react-icons/gr" 10 | import { RiSubtractFill } from "react-icons/ri" 11 | import YouMayAlsoLike from './YouMayAlsoLike'; 12 | import SPFooter from './SPFooter'; 13 | import { Link } from 'react-router-dom'; 14 | 15 | 16 | const Cart = (props) => { 17 | 18 | const { title, quantity, price, id, image, total, cartLength } = props.item; 19 | 20 | 21 | 22 | const cartList = useSelector((state) => state.cart.items); 23 | 24 | 25 | 26 | const dispacth = useDispatch(); 27 | 28 | 29 | const totalPrice = cartList.map(item => { 30 | return item.quantity * item.price; 31 | }).reduce((totalPrice, singleItemPrice) => totalPrice + singleItemPrice, 0); 32 | 33 | 34 | 35 | 36 | const removeItemFromCartHandler = () => { 37 | dispacth(cartActions.removeItemFromCart(id)) 38 | } 39 | 40 | const addItemToCartHandler = () => { 41 | dispacth( 42 | cartActions.addItemToCart({ 43 | id, 44 | price, 45 | title, 46 | image, 47 | }) 48 | ) 49 | } 50 | 51 | 52 | return ( 53 |
54 | 55 | 56 | {/*

items in your cart {cartLength}

*/} 57 | 58 |
59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 |
67 | 68 |

{title}

69 |

${price}

70 | 71 |
72 | ___________________________________________________________
73 | 74 | 75 |
76 |
77 | 78 |

{quantity}

79 | 80 |
81 |
82 | 83 | 84 |
85 | 86 |
87 | ______________________________________________________________________________ 88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 |
98 | 99 | 100 | ) 101 | } 102 | 103 | export default Cart 104 | 105 | -------------------------------------------------------------------------------- /src/components/CartAdditonalFeatures.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import better from "../assets/better.jpeg"; 3 | import mastercard from "../assets/mastercard.png"; 4 | import { FaShippingFast } from "react-icons/fa"; 5 | import { FaLock } from "react-icons/fa"; 6 | import { FaCcVisa } from "react-icons/fa"; 7 | import { FaCcPaypal } from "react-icons/fa"; 8 | import { FaCcStripe } from "react-icons/fa"; 9 | import { FaCcMastercard } from "react-icons/fa"; 10 | 11 | 12 | 13 | 14 | const CartAdditonalFeatures = () => { 15 | return ( 16 |
17 | 18 | 19 | 20 | 21 |
22 | ) 23 | } 24 | 25 | export default CartAdditonalFeatures -------------------------------------------------------------------------------- /src/components/CartHold.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useSelector } from 'react-redux'; 3 | import Cart from './Cart'; 4 | import CartPageFaq from './CartPageFaq'; 5 | import CartPageFooter from './CartPageFooter'; 6 | import CartTotal from './CartTotal'; 7 | import EmptyCart from './EmptyCart'; 8 | import MobileNav from './MobileNav'; 9 | import SPFooter from './SPFooter'; 10 | import YouMayAlsoLike from './YouMayAlsoLike'; 11 | import "../styles/BestSellers.css"; 12 | 13 | const CartHold = () => { 14 | const cartItems = useSelector((state) => state.cart.items); 15 | const cartLen = cartItems.length; 16 | 17 | const totalPrice = cartItems.map(item => { 18 | return item.quantity * item.price; 19 | }).reduce((totalPrice, singleItemPrice) => totalPrice + singleItemPrice, 0); 20 | 21 | 22 | return ( 23 |
24 | 25 | {/*

CART TOAL ${totalPrice}

*/} 26 | {cartLen === 0 ? : <> 27 |
28 |

Your Cart

29 |

{cartLen} items

30 |
31 | 32 | 33 | 34 | 35 |
36 | {cartItems.map((item) => ( 37 | 38 |
39 | 40 | 52 |
53 | ))} 54 |
55 | 56 | 57 | 58 | 59 |

YOU MAY ALSO LIKE

60 | 61 | 62 | 63 | 64 | } 65 | 66 | 67 | 68 | 69 | 70 |
71 | ) 72 | } 73 | 74 | export default CartHold -------------------------------------------------------------------------------- /src/components/CartPageFaq.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Faq from "react-faq-component"; 3 | 4 | const data = { 5 | title: "FREQUENTLY ASKED QUESTION", 6 | rowContentTextSize: "10px", 7 | rows: [ 8 | { 9 | title: "HOW LONG WILL MY ORDER TAKE TO ARRIVE?", 10 | content: `We give you the option to use USPS or UPS at checkout. 11 | 12 | USPS: Priority (2-4 business days depending on location) Priority Express (1-3 business days depending on location). 13 | 14 | UPS: 15 | Ground (4-8 business days depending on location) 3-Day Select (3 business days) 2nd Day Air (2 business days) Next Day Air Saver (1 business day) Next Day Air (1 business day) Next Day Air Early AM (1 business day) 16 | 17 | Please note this does not apply to weekend orders as well as peak sale periods and peak holiday seasons. Orders may be delayed by up to 48 hours during these periods. 18 | 19 | Delivery timeframes can vary over the public holiday periods due to overwhelming demand on postal services. Please expect delays on estimated delivery times and customer service response from delivery providers. Thank you for your consideration.`, 20 | }, 21 | 22 | 23 | { 24 | title: "HOW MUCH IS POSTAGE?", 25 | content: 26 | "Postage is calculated at checkout based on your delivery address and preferred method of delivery. We offer free shipping on all orders over $50.", 27 | }, 28 | 29 | { 30 | title: "CAN I HAVE MY ORDER EXPRESS POSTED?", 31 | content: ` Yes, we offer a Priority Express option through USPS at our check-out. Please note that selecting this Express Post option does not guarantee next day delivery.`, 32 | }, 33 | 34 | { 35 | title: "DO YOU SHIP INTERNATIONALLY?", 36 | content: `We offer shipping of online purchases to U.S. only at this time. At this time we do not ship outside the United States due to additional taxes and fees imposed by customs. We have other Sukin websites that ship to Australia, New Zealand, Asia, United Kingdom, Europe & Canada.`, 37 | }, 38 | 39 | { 40 | title: "WHAT HAPPENS IF MY PACKAGE GOES MISSING? ", 41 | content: `Unfortunately, we can not change any order information once your order has been processed. Please ensure the correct post codes are entered and if you are in an office building, please add your company name to avoid your package being sent back to us. `, 42 | }, 43 | 44 | { 45 | title: "WHAT HAPPENS IF I ENTERED THE WRONG DELIVERY INFORMATION?", 46 | content: `If your package has been 'stuck in transit' for longer than expected please let us know so we can lodge a 'missing package investigation' with postal service. `, 47 | }, 48 | 49 | 50 | ], 51 | }; 52 | 53 | const styles = { 54 | // bgColor: 'white', 55 | titleTextColor: "black", 56 | rowTitleColor: "black", 57 | position:"relative", 58 | // rowContentColor: 'grey', 59 | // arrowColor: "red", 60 | }; 61 | 62 | const config = { 63 | animate: true, 64 | // arrowIcon: "V", 65 | // tabFocus: true 66 | 67 | expandIcon: "+", 68 | collapseIcon: "-", 69 | transitionDuration: "1s", 70 | }; 71 | 72 | export default function CartPageFaq(){ 73 | 74 | return ( 75 |
76 | 82 |
83 | ); 84 | } -------------------------------------------------------------------------------- /src/components/CartPageFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const CartPageFooter = () => { 4 | return ( 5 |
6 | 28 |
29 |
30 | 31 |

BUILT BY GOVIND.

32 |
33 |
34 |
35 | 36 | 37 | 38 |
39 |
40 |
41 |
42 | ) 43 | } 44 | 45 | export default CartPageFooter -------------------------------------------------------------------------------- /src/components/CartTotal.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import GooglePayButton from "@google-pay/button-react"; 3 | import { PayPalButtons } from '@paypal/react-paypal-js'; 4 | import { PayPalScriptProvider } from '@paypal/react-paypal-js'; 5 | import { useEffect } from 'react'; 6 | import CartAdditonalFeatures from './CartAdditonalFeatures'; 7 | import CartPageFaq from './CartPageFaq'; 8 | import Features2 from './Features2'; 9 | import { useSelector } from 'react-redux'; 10 | 11 | const CartTotal = (props) => { 12 | 13 | let finapPr = props.totalPr + 20 + 15; 14 | 15 | let cartItems = useSelector((state) => state.cart.items); 16 | 17 | let cartLen = cartItems.length; 18 | 19 | 20 | return ( 21 |
22 |
23 |

SUBTOTAL

24 |

${Math.round(props.totalPr)}

25 |
26 | 27 |
28 |

SHIPPING

29 |

INCL, TAX

30 |
31 | 32 |
33 |

$20

34 |

$15

35 |
36 | 37 |
38 |

________________________________________________________

39 |
40 | 41 |
42 |

TOATL ${Math.round(props.totalPr + 20 + 15)}

43 |
44 | 45 |
46 |

________________________________________________________

47 |
48 | 49 | 50 | 51 |
52 | 53 | 54 | { 92 | console.log(paymentData.paymentMethodData); 93 | }} 94 | 95 | /> 96 |
97 | 98 |
99 | 100 | { 101 | return actions.order.create({ 102 | purchase_units: [ 103 | { 104 | amount: { 105 | value: "100", 106 | }, 107 | }, 108 | ], 109 | }); 110 | }}> 111 | 112 | 113 | 114 |
115 | 116 | {cartLen > 1 ?
117 | 118 |

SECURELY CHCECKOUT WITH

119 | 120 | 121 | 122 | {cartLen > 2 ? : ""} 123 | 124 |
125 | : 126 | "" 127 | } 128 | 129 |
130 | ) 131 | } 132 | 133 | export default CartTotal 134 | 135 | -------------------------------------------------------------------------------- /src/components/EmptyCart.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import cartgif from "../assets/cartGif.gif"; 3 | import "../styles/BestSellers.css"; 4 | 5 | 6 | const EmptyCart = () => { 7 | return ( 8 |
9 | 10 |
11 |

Cart Is Empty Maybe Order Something :)

12 |
13 | 14 | 15 |
16 | ) 17 | } 18 | 19 | export default EmptyCart -------------------------------------------------------------------------------- /src/components/Features2.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import better from "../assets/better.jpeg"; 3 | import { FaShippingFast } from "react-icons/fa"; 4 | import { FaLock } from "react-icons/fa"; 5 | 6 | const Features2 = () => { 7 | return ( 8 |
9 | 10 |
11 | 12 | hey 13 | 14 |
15 | 16 |
17 |

2 DAY SHIPPING

18 |

EASY RETURNS

19 |

SECURE CHECKOUT

20 |
21 |
22 | ) 23 | } 24 | 25 | export default Features2 -------------------------------------------------------------------------------- /src/components/FollowONIG.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import AliceCarousel from 'react-alice-carousel'; 3 | import "../styles/FollowONIG.css"; 4 | import { store } from '../productsStore/Store'; 5 | import "react-alice-carousel/lib/alice-carousel.css"; 6 | import i1 from "../assets/i1.jpg"; 7 | import i2 from "../assets/i2.jpg"; 8 | import i3 from "../assets/i3.jpg"; 9 | import i4 from "../assets/i4.jpg"; 10 | import i5 from "../assets/i5.jpg"; 11 | import i6 from "../assets/i6.jpg"; 12 | import i7 from "../assets/i7.jpg"; 13 | import i8 from "../assets/i8.jpg"; 14 | import i9 from "../assets/i9.jpg"; 15 | import i10 from "../assets/i10.jpg"; 16 | import i11 from "../assets/i11.jpg"; 17 | import { ExternalLink } from 'react-external-link'; 18 | import Marquee from "react-fast-marquee"; 19 | 20 | 21 | const FollowONIG = () => { 22 | 23 | const responsive = { 24 | 2000: { 25 | items: 11, 26 | }, 27 | 1600: { 28 | items: 6 29 | }, 30 | 1200: { 31 | items: 5, 32 | }, 33 | 800: { 34 | items: 3, 35 | }, 36 | 0: { 37 | items: 1, 38 | }, 39 | }; 40 | 41 | return ( 42 |
43 |

FOLLOW US ON INSTAGRAM

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 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |
95 | 96 |
97 | 98 | 99 | 100 | ) 101 | } 102 | 103 | export default FollowONIG 104 | -------------------------------------------------------------------------------- /src/components/ForHer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import u20bg from "../assets/u20bg.png"; 3 | import "../styles/Under20.css"; 4 | import { 5 | Breadcrumb, 6 | BreadcrumbItem, 7 | BreadcrumbLink, 8 | BreadcrumbSeparator, 9 | } from '@chakra-ui/react' 10 | import { ChevronRightIcon } from '@chakra-ui/icons'; 11 | import { Link } from 'react-router-dom'; 12 | import filterBtn from "../assets/filterBtn.png"; 13 | import sortBtn from "../assets/sortBtn.png" 14 | import { useState } from 'react'; 15 | import { store } from "../productsStore/Store"; 16 | import HoverImage from 'react-hover-image/build'; 17 | import JournalSection from "./JournalSection" 18 | import Features2 from './Features2'; 19 | 20 | import { FaShippingFast } from "react-icons/fa" 21 | import { FaLock } from 'react-icons/fa'; 22 | import { BsCurrencyDollar } from "react-icons/bs"; 23 | import better from "../assets/better.jpeg"; 24 | import SPFooter from './SPFooter'; 25 | 26 | 27 | 28 | const ForHer = () => { 29 | const [filter, SetFilter] = useState(false); 30 | 31 | const [sort, SetSort] = useState(false); 32 | 33 | const [bodyLotionShow, SetBodyLotionShow] = useState(false); 34 | 35 | const [bodyScrubShow, SetBodyScrubShow] = useState(false); 36 | 37 | const [bodyWashShow, SetBodyWashShow] = useState(false); 38 | 39 | const [allShow, SetAllShow] = useState(true); 40 | 41 | const [lowTOHigh, SetLowTOHigh] = useState(false); 42 | 43 | 44 | 45 | 46 | const filterShowHandler = () => { 47 | SetFilter(!filter) 48 | 49 | } 50 | 51 | const toggleSortHandler = () => { 52 | SetSort(!sort) 53 | } 54 | 55 | 56 | const bodyLotionHandler = () => { 57 | SetBodyLotionShow(true); 58 | SetAllShow(false) 59 | 60 | SetBodyScrubShow(false); 61 | SetBodyWashShow(false); 62 | } 63 | 64 | const bodyScrubHandler = () => { 65 | SetBodyScrubShow(true) 66 | SetAllShow(false) 67 | 68 | SetBodyLotionShow(false); 69 | SetBodyWashShow(false) 70 | } 71 | 72 | const bodyWashHandler = () => { 73 | SetBodyWashShow(true) 74 | SetAllShow(false) 75 | 76 | SetBodyLotionShow(false) 77 | SetBodyScrubShow(false) 78 | } 79 | 80 | const allShowHandler = () => { 81 | SetAllShow(true) 82 | 83 | SetBodyWashShow(false) 84 | SetBodyLotionShow(false) 85 | SetBodyScrubShow(false) 86 | } 87 | 88 | 89 | 90 | var bodyLotionProducts = store.filter(product => product.type.includes('bodyLotion')); 91 | 92 | var bodyScrubProducts = store.filter(produt => produt.type.includes("bodyScrub")); 93 | 94 | var bodyWashProducts = store.filter(product => product.type.includes("bodywash")); 95 | 96 | 97 | const bgAddHandler = (e) => { 98 | 99 | e.target.classList.add("whi"); 100 | 101 | 102 | } 103 | 104 | const bgRemoveHandler = (e) => { 105 | e.target.classList.remove("whi"); 106 | 107 | 108 | 109 | } 110 | 111 | 112 | 113 | return ( 114 |
115 |

116 | 117 |
118 | 119 |
120 | 121 |
122 |

Natural Gifts For Her

123 |

Shop Sukin natural and vegan collection of skincare and hair care gifts under $20.

124 |
125 | 126 |
127 | }> 128 | 129 | Home 130 | 131 | 132 | 133 | 134 | Under 20 135 | 136 | 137 |
138 | 139 |
140 | 141 | 142 | 143 | {/**/} 144 |
145 | 146 |
147 | {filter &&
148 |

Body Lotion

149 |

Body Wash

150 |

Body Scrub

151 |

All Products

152 | 153 |
} 154 |
155 | 156 | 157 | 158 | { /* ALL PRODUCTS */} 159 | 160 | 161 | {allShow &&
162 | {store.map((item) => { 163 | 164 | if (item.type.includes("all")) { 165 | return ( 166 |
167 | 168 |
169 | 170 |
171 | 172 | 173 |
174 |

{item.name}

175 | 176 | 177 | 178 |
179 | 180 |

181 |

${item.price}

182 |
183 | 184 | 185 | 186 |
187 |
188 | 189 | 190 | ) 191 | } 192 | })} 193 |
194 | } 195 | 196 | 197 | {/* BODY LOTION */} 198 | 199 | {bodyLotionShow &&
200 | {bodyLotionProducts.map((item) => { 201 | 202 | if (item.type.includes("all")) { 203 | return ( 204 |
205 | 206 |
207 | 208 |
209 | 210 | 211 |
212 |

{item.name}

213 | 214 | 215 |
216 | 217 |

218 |

${item.price}

219 |
220 | 221 |
222 |
223 | ) 224 | } 225 | })} 226 |
227 | } 228 | 229 | 230 | {/* BODY WASH */} 231 | 232 | {bodyWashShow &&
233 | {bodyWashProducts.map((item) => { 234 | 235 | if (item.type.includes("all")) { 236 | return ( 237 |
238 | 239 |
240 | 241 |
242 | 243 | 244 |
245 |

{item.name}

246 | 247 | 248 |
249 | 250 |

251 |

${item.price}

252 |
253 | 254 | 255 |
256 |
257 | ) 258 | 259 | } 260 | })} 261 |
262 | } 263 | 264 | 265 | { /* BODY SCRUB */} 266 | 267 | {bodyScrubShow &&
268 | {bodyScrubProducts.map((item) => { 269 | 270 | if (item.type.includes("all")) { 271 | return ( 272 |
273 | 274 |
275 | 276 |
277 | 278 | 279 |
280 |

{item.name}

281 | 282 | 283 |
284 | 285 |

286 |

${item.price}

287 |
288 | 289 | 290 |
291 | 292 |
293 | ) 294 | 295 | } 296 | })} 297 | 298 | 299 |
300 | } 301 | 302 |
303 | 304 |
305 | 306 |
307 | 308 |
309 | 310 | 311 | 312 | 313 |
314 | 315 |
316 |

2 DAY DELIVERY

317 |

secure checkout

318 |

royalty points

319 |

easy returns

320 |
321 | 322 |
323 | 324 |
325 | 326 |
327 | 328 | 329 | 330 | 331 | 332 |
333 | 334 | 335 | ) 336 | 337 | } 338 | 339 | 340 | export default ForHer; 341 | 342 | -------------------------------------------------------------------------------- /src/components/ForHim.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import u20bg from "../assets/u20bg.png"; 3 | import "../styles/Under20.css"; 4 | import { 5 | Breadcrumb, 6 | BreadcrumbItem, 7 | BreadcrumbLink, 8 | BreadcrumbSeparator, 9 | } from '@chakra-ui/react' 10 | import { ChevronRightIcon } from '@chakra-ui/icons'; 11 | import { Link } from 'react-router-dom'; 12 | import filterBtn from "../assets/filterBtn.png"; 13 | import sortBtn from "../assets/sortBtn.png" 14 | import { useState } from 'react'; 15 | import { store } from "../productsStore/Store"; 16 | import HoverImage from 'react-hover-image/build'; 17 | import JournalSection from "./JournalSection" 18 | import Features2 from './Features2'; 19 | 20 | import { FaShippingFast } from "react-icons/fa" 21 | import { FaLock } from 'react-icons/fa'; 22 | import { BsCurrencyDollar } from "react-icons/bs"; 23 | import better from "../assets/better.jpeg"; 24 | import SPFooter from './SPFooter'; 25 | 26 | 27 | 28 | const ForHim = () => { 29 | const [filter, SetFilter] = useState(false); 30 | 31 | const [sort, SetSort] = useState(false); 32 | 33 | const [bodyLotionShow, SetBodyLotionShow] = useState(false); 34 | 35 | const [bodyScrubShow, SetBodyScrubShow] = useState(false); 36 | 37 | const [bodyWashShow, SetBodyWashShow] = useState(false); 38 | 39 | const [allShow, SetAllShow] = useState(true); 40 | 41 | const [lowTOHigh, SetLowTOHigh] = useState(false); 42 | 43 | 44 | 45 | 46 | const filterShowHandler = () => { 47 | SetFilter(!filter) 48 | 49 | } 50 | 51 | const toggleSortHandler = () => { 52 | SetSort(!sort) 53 | } 54 | 55 | 56 | const bodyLotionHandler = () => { 57 | SetBodyLotionShow(true); 58 | SetAllShow(false) 59 | 60 | SetBodyScrubShow(false); 61 | SetBodyWashShow(false); 62 | } 63 | 64 | const bodyScrubHandler = () => { 65 | SetBodyScrubShow(true) 66 | SetAllShow(false) 67 | 68 | SetBodyLotionShow(false); 69 | SetBodyWashShow(false) 70 | } 71 | 72 | const bodyWashHandler = () => { 73 | SetBodyWashShow(true) 74 | SetAllShow(false) 75 | 76 | SetBodyLotionShow(false) 77 | SetBodyScrubShow(false) 78 | } 79 | 80 | const allShowHandler = () => { 81 | SetAllShow(true) 82 | 83 | SetBodyWashShow(false) 84 | SetBodyLotionShow(false) 85 | SetBodyScrubShow(false) 86 | } 87 | 88 | 89 | 90 | var bodyLotionProducts = store.filter(product => product.type.includes('bodyLotion')); 91 | 92 | var bodyScrubProducts = store.filter(produt => produt.type.includes("bodyScrub")); 93 | 94 | var bodyWashProducts = store.filter(product => product.type.includes("bodywash")); 95 | 96 | var under40Products = store.filter(product => product.price > 16 && product.price < 40) 97 | 98 | 99 | const bgAddHandler = (e) => { 100 | 101 | e.target.classList.add("whi"); 102 | 103 | } 104 | 105 | const bgRemoveHandler = (e) => { 106 | e.target.classList.remove("whi"); 107 | 108 | } 109 | 110 | 111 | 112 | return ( 113 |
114 |

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

Natural Gifts For Him

122 |

Shop Sukin natural and vegan collection of skincare and hair care gifts under $20.

123 |
124 | 125 |
126 | }> 127 | 128 | Home 129 | 130 | 131 | 132 | 133 | Under 40 134 | 135 | 136 |
137 | 138 |
139 | 140 | 141 | 142 | {/**/} 143 |
144 | 145 |
146 | {filter &&
147 |

Body Lotion

148 |

Body Wash

149 |

Body Scrub

150 |

All Products

151 | 152 |
} 153 |
154 | 155 | 156 | 157 | { /* ALL PRODUCTS */} 158 | 159 | 160 | {allShow &&
161 | {under40Products.map((item) => { 162 | 163 | if (item.type.includes("all")) { 164 | return ( 165 |
166 | 167 |
168 | 169 |
170 | 171 | 172 |
173 |

{item.name}

174 | 175 | 176 | 177 |
178 | 179 |

180 |

${item.price}

181 |
182 | 183 | 184 | 185 |
186 |
187 | 188 | 189 | ) 190 | } 191 | })} 192 |
193 | } 194 | 195 | 196 | {/* BODY LOTION */} 197 | 198 | {bodyLotionShow &&
199 | {bodyLotionProducts.map((item) => { 200 | 201 | if (item.type.includes("all")) { 202 | return ( 203 |
204 | 205 |
206 | 207 |
208 | 209 | 210 |
211 |

{item.name}

212 | 213 | 214 |
215 | 216 |

217 |

${item.price}

218 |
219 | 220 |
221 |
222 | ) 223 | } 224 | })} 225 |
226 | } 227 | 228 | 229 | {/* BODY WASH */} 230 | 231 | {bodyWashShow &&
232 | {bodyWashProducts.map((item) => { 233 | 234 | if (item.type.includes("all")) { 235 | return ( 236 |
237 | 238 |
239 | 240 |
241 | 242 | 243 |
244 |

{item.name}

245 | 246 | 247 |
248 | 249 |

250 |

${item.price}

251 |
252 | 253 | 254 |
255 |
256 | ) 257 | 258 | } 259 | })} 260 |
261 | } 262 | 263 | 264 | { /* BODY SCRUB */} 265 | 266 | {bodyScrubShow &&
267 | {bodyScrubProducts.map((item) => { 268 | 269 | if (item.type.includes("all")) { 270 | return ( 271 |
272 | 273 |
274 | 275 |
276 | 277 | 278 |
279 |

{item.name}

280 | 281 | 282 |
283 | 284 |

285 |

${item.price}

286 |
287 | 288 | 289 |
290 | 291 |
292 | ) 293 | 294 | } 295 | })} 296 | 297 | 298 |
299 | } 300 | 301 |
302 | 303 |
304 | 305 |
306 | 307 |
308 | 309 | 310 | 311 | 312 |
313 | 314 |
315 |

2 DAY DELIVERY

316 |

secure checkout

317 |

royalty points

318 |

easy returns

319 |
320 | 321 |
322 | 323 |
324 | 325 |
326 | 327 | 328 | 329 | 330 | 331 |
332 | 333 | 334 | ) 335 | 336 | } 337 | 338 | 339 | export default ForHim; -------------------------------------------------------------------------------- /src/components/GiftSets.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "../styles/GiftSets.css"; 3 | import { store } from '../productsStore/Store'; 4 | import HoverImage from 'react-hover-image/build'; 5 | import { Link } from 'react-router-dom'; 6 | const GiftSets = () => { 7 | return ( 8 |
9 | 10 |

CATEGORY

11 | 12 |
13 | 14 | 15 |

Under $20

16 | 17 | 18 | 19 |

Under $40

20 | 21 | 22 | 23 |

For Her

24 | 25 | 26 | 27 |

For Him

28 | 29 | 30 |
31 | 32 |
33 | 34 | {store.map((item) => { 35 | if (item.type == "gift") 36 | return ( 37 | 38 | 39 |
40 | 41 |

{item.name}

42 |

${item.price}

43 |
44 | 45 | ) 46 | })} 47 | 48 | 49 | 50 |
51 |
52 | ) 53 | } 54 | export default GiftSets -------------------------------------------------------------------------------- /src/components/Gifts.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/components/Gifts.js -------------------------------------------------------------------------------- /src/components/HeroCarousel.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Slider from "react-slick"; 3 | 4 | import "slick-carousel/slick/slick.css"; 5 | import "slick-carousel/slick/slick-theme.css"; 6 | import car1 from "../assets/car1.png" 7 | import car2 from "../assets/car2.png" 8 | import car3 from "../assets/car3.png" 9 | 10 | import { FaArrowRight } from "react-icons/fa" 11 | 12 | ; 13 | 14 | 15 | export default class SimpleSlider extends Component { 16 | 17 | 18 | 19 | render() { 20 | const settings = { 21 | infinite: true, 22 | speed: 500, 23 | slidesToShow: 1, 24 | slidesToScroll: 1, 25 | }; 26 | return ( 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 | } -------------------------------------------------------------------------------- /src/components/HeroSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "../styles/HeroSection.css" 3 | import one from "../assets/one.png" 4 | import two from "../assets/two.png" 5 | import three from "../assets/three.png" 6 | 7 | 8 | const HeroSection = () => { 9 | return ( 10 |
11 | 12 |

WELCOME TO OUR STORE

13 |
14 |
15 | 16 | 17 |

The self care brand that's setting a new standard. Natural products, to help 18 | you feel good in your own body.

19 | 20 | 21 |
22 | 23 | 24 | 25 |
26 | 27 |
28 |

Powered By Nature

29 |

Exceptional Quality

30 |

Skin First Formulas

31 |
32 | 33 |
34 |

Aliquam venenatis vel lorem id
nuaer mollis eget.

35 |

Nulla tincidunt gravida augue, eget
pellentesque.

36 |

Aliquam sed diam fringilla, loborti
sorci nec

37 |
38 |
39 | ) 40 | } 41 | 42 | export default HeroSection -------------------------------------------------------------------------------- /src/components/Ingridients.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "../styles/Ingridients.css" 3 | 4 | import ing1 from "../assets/ing1.png"; 5 | import ing2 from "../assets/ing2.png"; 6 | import ing3 from "../assets/ing3.png"; 7 | import ing4 from "../assets/ing4.png"; 8 | import ing5 from "../assets/ing5.png"; 9 | import ing6 from "../assets/ing6.png"; 10 | 11 | 12 | const Ingridients = () => { 13 | return ( 14 |
15 |

OUR INGRIDENTS

16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 |
27 |

All Natural

28 |

Vegetables

29 |

Fruits

30 |

Vegan

31 |

Essential Oils

32 |

Botanical

33 | 34 |
35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | 45 | 46 | 47 |
48 | ) 49 | } 50 | 51 | export default Ingridients -------------------------------------------------------------------------------- /src/components/JournalPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import "../styles/JournalPage.css" 3 | import hair from "../assets/hair.jpeg"; 4 | import better from "../assets/better.jpeg"; 5 | import { FaShippingFast } from "react-icons/fa"; 6 | import { FaLock } from "react-icons/fa"; 7 | import { BsCurrencyDollar } from "react-icons/bs"; 8 | import JournalPageFooter from './JournalPageFooter'; 9 | 10 | const JournalPage = () => { 11 | return (
12 |
13 |

THE SUKIN JOURNAL

14 | 15 |
16 |

Discover the world of natural through our eyes! From skincare tips, 17 | lifestyle and environmental hacks to inspirational interviews! 18 | Explore it all. 19 |

20 |
21 | 22 |

April Blog: Protective Haircare Styles and Tips

23 | 24 |
25 | hey 26 |
27 | 28 |
29 | 30 |

We recently launched our new Deep Cleanse Hair Care regimen which is all about cleansing your hair deeply to remove years of build up from harsh products, pollutants, dirt and oils. To achieve luscious locks, cleansing your scalp is a step you won’t want to miss! Deep Cleanse is formulated with Apple Cider Vinegar, Australian River Mint and sustainably-sourced Algae to purify your scalp and leave your hair healthy and refreshed! 31 | Using natural products and maintain a healthy scalp are both great steps you can take towards achieving your hair goals, but there is even more you can be doing to prevent damage and protect your hair long term. 32 |

33 | 34 | 35 |

  • AVOID HEATING TOOLS
    • Have you been using hot styling products like straighteners or curlers to style your hair? Uh oh… this can lead to dry, damaged, and brittle hair. When your hair is exposed to high heat, that can change the shape of your hair’s keratin strands. Temperatures over 300-degree Fahrenheit, convert your ⍺-keratin to β-keratin, which eventually leads to weaker hair that has lost its elasticity and become more prone to damage. Try utilizing braids or plastic curlers to create waves and curls in your hair 36 | 37 | Tip: Embrace your natural beauty and show off your hair without styling!! 38 | 39 |

    40 | 41 | 42 | 43 |

  • SCALP HEALTH + STYLING
    • Like many of us, you may be focusing more on your scalp health to improve the look of your hair. For this you’ll likely be applying your hair serum, which tends to make your hair looking slightly greasy. A great way to conceal this is by putting your hair into a slicked back bun. 44 | 45 | Step 1: After applying your serum, you can part hair down the middle and separate the front sections of your hair on either side. 46 | 47 | Step 2: Gather the rest of your hair and brush into a ponytail. After securing your hair tie, twist your hair into a knotted bun and pin. 48 | 49 | Step 3: Then brush your front pieces into the bun, leaving the part in the middle. 50 | 51 | Tip: You can complete the look by applying hair spray or gel to lock in this look.

    52 | 53 | 54 | 55 |

  • YOUR PILLOWCASE
    • If your pillowcase hasn’t been changed in a month, its time to do so!! Or treat yourself, and upgrade your cotton pillowcase to a silk one. By switching to a silky smooth pillowcase, you can help prevent split ends and frizz! Good Housekeeping Institute Textile Lab tested this overnight miracle and now they swear by silk pillowcases, with one saying, “I realize my cheap pillowcase was the real culprit behind my bad hair days.”* 56 | 57 |

    58 | 59 |
    60 | 61 | 62 | 63 |
    64 | 65 | 66 | 67 | hey 68 |
    69 | 70 |
    71 |

    2 DAY DELIVERY

    72 |

    secure checkout

    73 |

    royalty points

    74 |

    easy returns

    75 |
    76 | 77 |
    78 | 79 |
    80 | 81 | 82 |
    83 |
    84 | ) 85 | } 86 | 87 | export default JournalPage -------------------------------------------------------------------------------- /src/components/JournalPageFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const JournalPageFooter = () => { 4 | return ( 5 |
    6 | 7 | 29 |
    30 |
    31 | 32 |

    BUILT BY GOVIND.

    33 |
    34 |
    35 |
    36 | 37 | 38 | 39 |
    40 |
    41 |
    42 |
    43 | ) 44 | } 45 | 46 | export default JournalPageFooter -------------------------------------------------------------------------------- /src/components/JournalSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "../styles/JournalSection.css" 3 | import { Link } from 'react-router-dom' 4 | 5 | const JournalSection = () => { 6 | 7 | return ( 8 |
    9 | 10 |
    11 | hey 12 |

    Discover the world of natural through our
    13 | eyes! From skincare tips, lifestyle and
    14 | environmental hacks to inspirational
    15 | interviews! Explore it all.

    16 | 17 | 18 | 19 | 20 |
    21 | 22 |
    23 | 24 | 25 | hey 26 | 27 | 28 | hey 29 | 30 | 31 |
    32 | 33 |
    34 |

    APRIL BLOG: PROTECTIVE HAIRCARE
    STYLE AND TIPS

    35 |

    SUKINS GUIDE TO A BACKYARD BBQ

    36 | 37 | 38 |
    39 |
    40 | ) 41 | } 42 | 43 | export default JournalSection -------------------------------------------------------------------------------- /src/components/MobileJournalSinglePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | const MobileJournalSinglePage = () => { 5 | return ( 6 |
    7 |
    8 | 9 |
    10 | hey 11 |

    Discover the world of natural through our
    12 | eyes! From skincare tips, lifestyle and
    13 | environmental hacks to inspirational
    14 | interviews! Explore it all.

    15 | 16 | 17 | 18 | 19 |
    20 | 21 |
    22 | 23 | 24 | hey 25 | 26 | 27 | hey 28 | 29 | 30 |
    31 | 32 |
    33 |

    APRIL BLOG: PROTECTIVE HAIRCARE
    STYLE AND TIPS

    34 |

    SUKINS GUIDE TO A BACKYARD BBQ

    35 | 36 | 37 |
    38 |
    39 |
    40 | ) 41 | } 42 | 43 | export default MobileJournalSinglePage -------------------------------------------------------------------------------- /src/components/MobileNav.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaShoppingBag } from "react-icons/fa"; 3 | import logo from "../assets/cara.png"; 4 | import "../styles/Navbar.css"; 5 | import { Link } from 'react-router-dom'; 6 | import { useState } from 'react'; 7 | 8 | 9 | const MobileNav = () => { 10 | return ( 11 |
    12 | 13 |
    14 |
    15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
    24 |
    25 |
    26 | ) 27 | } 28 | 29 | export default MobileNav -------------------------------------------------------------------------------- /src/components/NavBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "../styles/Navbar.css"; 3 | import logo from "../assets/cara.png"; 4 | import { useState } from 'react'; 5 | import BestSellers from './BestSellers'; 6 | import GiftSets from './GiftSets'; 7 | import Body from './Body'; 8 | import { FaShoppingBag } from "react-icons/fa"; 9 | import { Link } from 'react-router-dom'; 10 | import { useSelector } from 'react-redux'; 11 | 12 | const NavBar = () => { 13 | const [show, setShow] = useState(false); 14 | const [show2, setShow2] = useState(false); 15 | const [show3, setShow3] = useState(false); 16 | const [show4, setShow4] = useState(false); 17 | 18 | 19 | const showHandler = () => { 20 | setShow(true) 21 | setShow2(false) 22 | setShow3(false) 23 | setShow4(false) 24 | 25 | } 26 | 27 | const showHandler2 = () => { 28 | setShow2(true) 29 | setShow(false) 30 | setShow3(false) 31 | setShow4(false) 32 | 33 | } 34 | 35 | const showHandler3 = () => { 36 | setShow3(true) 37 | setShow(false) 38 | setShow2(false) 39 | setShow4(false) 40 | } 41 | 42 | const showHandler4 = () => { 43 | setShow4(true) 44 | setShow(false) 45 | setShow2(false) 46 | setShow3(false) 47 | 48 | } 49 | 50 | 51 | const dontShowHandler = () => { 52 | setShow(false) 53 | setShow2(false) 54 | setShow3(false) 55 | setShow4(false) 56 | 57 | 58 | } 59 | 60 | return ( 61 |
    62 | 63 | 64 | 114 | 115 | 116 | 117 |
    118 | ) 119 | } 120 | 121 | export default NavBar 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | /* 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 |
    153 |
    154 | 155 |
    156 | {show && } 157 |
    158 |
    159 | 160 |
    161 | 162 |
    163 | {show2 && } 164 |
    165 |
    166 | 167 | 168 |
    169 | 170 |
    171 | Link 1 172 | Link 2 173 | Link 3 174 |
    175 |
    176 | 177 | 178 | Link 179 |
    180 | 181 |

    Dropdown Menu inside a Navigation Bar

    182 |

    Hover over the "Dropdown" link to see the dropdown menu.

    183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | */ 197 | 198 | -------------------------------------------------------------------------------- /src/components/OurBestSellers.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { store } from '../productsStore/Store' 3 | import "../styles/OurBestSellers.css" 4 | import { useDispatch } from 'react-redux' 5 | import { cartActions } from '../redux-state/CartState' 6 | 7 | import { Link } from 'react-router-dom' 8 | import { useToast } from '@chakra-ui/react' 9 | 10 | 11 | const OurBestSellers = (props) => { 12 | 13 | const { title, price, id, image } = props; 14 | 15 | const dispacth = useDispatch(); 16 | 17 | const addItemToCartHandler = (e) => { 18 | 19 | dispacth( 20 | cartActions.addItemToCart({ 21 | id, 22 | price, 23 | title, 24 | image, 25 | }) 26 | ) 27 | } 28 | 29 | const toast = useToast(); 30 | 31 | 32 | 33 | 34 | return ( 35 |
    36 |
    37 | 38 |
    39 | 40 | 41 |
    42 | Shoes 43 |
    44 | 45 | 46 |
    47 |

    {title}

    48 |

    ${price}

    49 | 50 | 51 |
    52 | toast({ 53 | title: '', 54 | description: "Successfully Added", 55 | status: 'success', 56 | duration: 1500, 57 | isClosable: true, 58 | }) 59 | }> 60 | 61 |
    62 | 63 |
    64 | 65 |
    66 | 67 |
    68 | 69 | 70 | 71 |
    72 | ) 73 | } 74 | 75 | export default OurBestSellers 76 | -------------------------------------------------------------------------------- /src/components/Products.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { store } from "../productsStore/Store"; 3 | import OurBestSellers from './OurBestSellers'; 4 | 5 | const Products = () => { 6 | return ( 7 |
    8 | {store.map(((item) => { 9 | if (item.type === "ourBestSellers") { 10 | return ( 11 | 12 | 19 | ) 20 | 21 | } 22 | 23 | }))} 24 |
    25 | ) 26 | } 27 | 28 | export default Products -------------------------------------------------------------------------------- /src/components/Review1.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { AiFillStar } from "react-icons/ai" 3 | import feel from "../assets/feel.png"; 4 | 5 | 6 | const Review1 = (props) => { 7 | const starCalc = props.starCalc; 8 | const reviewes = props.rev; 9 | const oneDigit = Math.floor(Math.random() * 10); 10 | 11 | 12 | return ( 13 |
    14 | 15 |
    16 | 17 |
    18 | 19 |

    _____________________________________________________________________________________________________________________________________________________________________________________

    20 | 21 |
    22 |

    {starCalc}.{oneDigit}

    23 | {starCalc === 1 ?
    : ""} 24 | {starCalc === 2 ?
    : ""} 25 | {starCalc === 3 ?
    : ""} 26 | {starCalc === 4 ?
    : ""} 27 | {starCalc === 5 ?
    : ""} 28 |

    {reviewes} Reviews

    29 |
    30 | 31 |
    32 | ) 33 | } 34 | 35 | export default Review1 -------------------------------------------------------------------------------- /src/components/SPFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const SPFooter = () => { 4 | return ( 5 |
    6 | 28 |
    29 |
    30 | 31 |

    BUILT BY GOVIND.

    32 |
    33 |
    34 |
    35 | 36 | 37 | 38 |
    39 |
    40 |
    41 |
    42 | ) 43 | } 44 | 45 | export default SPFooter -------------------------------------------------------------------------------- /src/components/SingleAlsoLike.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Slider from "react-slick"; 3 | import { store } from "../productsStore/Store"; 4 | import { Link } from "react-router-dom"; 5 | export default class AutoPlayMethods extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.play = this.play.bind(this); 9 | this.pause = this.pause.bind(this); 10 | } 11 | play() { 12 | this.slider.slickPlay(); 13 | } 14 | pause() { 15 | this.slider.slickPause(); 16 | } 17 | render() { 18 | const settings = { 19 | dots: false, 20 | infinite: true, 21 | slidesToShow: 5, 22 | slidesToScroll: 1, 23 | autoplay: true, 24 | autoplaySpeed: 1500, 25 | arrows: false, 26 | responsive: [ 27 | { 28 | breakpoint: 991, 29 | settings: { 30 | slidesToShow: 3, 31 | } 32 | }, 33 | { 34 | breakpoint: 767, 35 | settings: { 36 | slidesToShow: 2, 37 | } 38 | } 39 | ] 40 | }; 41 | return ( 42 |
    43 | (this.slider = slider)} {...settings}> 44 | {store.map((item) => { 45 | if (item.type == "ourBestSellers") { 46 | return ( 47 | 48 |
    49 | 50 |
    51 | 52 | 53 | ) 54 | } 55 | })} 56 |     57 | 58 |
    59 | ); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/SingleJournal.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const SingleJournal = () => { 4 | return ( 5 |
    SingleJournal
    6 | ) 7 | } 8 | 9 | export default SingleJournal -------------------------------------------------------------------------------- /src/components/SinglePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useParams } from 'react-router-dom'; 3 | import { store } from '../productsStore/Store'; 4 | import { useDispatch } from 'react-redux'; 5 | import { cartActions } from '../redux-state/CartState'; 6 | import { useState } from 'react'; 7 | import { Link } from 'react-router-dom'; 8 | import BreadCrumb from './BreadCrumb'; 9 | import "../styles/SinglePage.css"; 10 | import { AiFillStar } from "react-icons/ai"; 11 | import SinglePageFAQ from './SinglePageFAQ'; 12 | 13 | import AutoPlayMethods from './SingleAlsoLike'; 14 | import JournalSection from "./JournalSection" 15 | import SearchBox from './SearchBox'; 16 | import Review1 from './Review1'; 17 | 18 | import better from "../assets/better.jpeg"; 19 | import { FaShippingFast } from "react-icons/fa"; 20 | import { FaLock } from "react-icons/fa"; 21 | import { BsCurrencyDollar } from "react-icons/bs"; 22 | import SPFooter from './SPFooter'; 23 | import {GiCardboardBoxClosed} from "react-icons/gi"; 24 | import { useToast } from '@chakra-ui/react' 25 | import Marquee from "react-fast-marquee"; 26 | 27 | 28 | const SinglePage = () => { 29 | 30 | 31 | const params = useParams(); 32 | 33 | const { id } = params; 34 | 35 | const dispacth = useDispatch(); 36 | 37 | const addItemToCartHandler = (e) => { 38 | 39 | dispacth( 40 | cartActions.addItemToCart({ 41 | id, 42 | price, 43 | title, 44 | image, 45 | }) 46 | ) 47 | } 48 | 49 | 50 | const prodClicked = store.find((item) => item.id === id) 51 | 52 | var { name, price, primaryImage, hoverImg } = prodClicked; 53 | 54 | 55 | let title = name; 56 | 57 | var image = primaryImage; 58 | 59 | let tempImage = image; 60 | 61 | 62 | 63 | 64 | 65 | const [activeImg, SetActiveImg] = useState(primaryImage); 66 | const [imgChnage, SetImgChange] = useState(false); 67 | 68 | 69 | 70 | const imgSrcTarget = (e) => { 71 | SetActiveImg(e.target.src); 72 | SetImgChange(true); 73 | 74 | } 75 | 76 | const defaultImageSrc = () => { 77 | SetActiveImg(primaryImage) 78 | SetImgChange(false) 79 | } 80 | 81 | 82 | let numOfRev = Math.floor(Math.random() * (4 - 4 + 1)) + 4; 83 | let reviews = Math.floor(Math.random() * (999 - 100 + 1) + 100); 84 | 85 | 86 | const toast = useToast() 87 | 88 | return ( 89 |
    90 | 91 |
    92 | 93 |
    94 | 95 | 96 | 97 |
    98 | {imgChnage === true ? : } 99 |
    100 | 101 | 102 | 103 | 104 |
    105 | 106 | 107 |
    108 | 109 |
    110 | 111 | 112 |
    113 | 114 | 115 |
    116 |

    {name}

    117 |

    ${price}

    118 |
    119 | 120 |

    ___________________________________________________________________

    121 | 122 | 123 | 124 | 125 |
    126 | {numOfRev === 1 ?
    : ""} 127 | {numOfRev === 2 ?
    : ""} 128 | {numOfRev === 3 ?
    : ""} 129 | {numOfRev === 4 ?
    : ""} 130 | {numOfRev === 5 ?
    : ""} 131 | 132 |

    {Math.floor(Math.random() * (999 - 100 + 1) + 100)} reviewes

    133 |
    134 | 135 | 136 |

    YOU CAN EARN 50 LOAYLTY POINTS

    137 | 138 |
    139 | toast({ 140 | title: '', 141 | description: "Successfully Added", 142 | status: 'success', 143 | duration: 1500, 144 | isClosable: true, 145 | }) 146 | }> 147 | 148 |
    149 | 150 |
    151 | 152 |
    153 | 154 |

    YOU MAY ALSO LIKE

    155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
    163 | 164 |
    165 | 166 | 167 | 168 | 169 | 170 |
    171 | 172 | 173 | 174 | 175 |
    176 | 177 |
    178 |

    2 DAY DELIVERY

    179 |

    secure checkout

    180 |

    royalty points

    181 |

    easy returns

    182 |
    183 | 184 |
    185 | 186 |
    187 | 188 |
    189 | ) 190 | } 191 | 192 | export default SinglePage 193 | -------------------------------------------------------------------------------- /src/components/SinglePageFAQ.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { 4 | Accordion, 5 | AccordionItem, 6 | AccordionButton, 7 | AccordionPanel, 8 | AccordionIcon, 9 | Box 10 | } from '@chakra-ui/react' 11 | 12 | import aus from "../assets/aus.png"; 13 | 14 | const SinglePageFAQ = () => { 15 | return ( 16 |
    17 | 18 | 19 | 20 |

    21 | 22 | 23 | PRODUCT INFO 24 | 25 | 26 | 27 |

    28 | 29 | Did you know that 1 Sukin Hydrating Mist Toner is sold every 40 seconds!? 30 | Yep- if you haven't tried it, you need to. Our alcohol-free Mist Toner blends 31 | Chamomile and Rosewater to help soothe, purify and cool your tired skin. And 32 | did we mention it is the ultimate multi use product? It can be used before 33 | and after cleansing, in the office as a 3pm pick me up, after makeup application 34 | to give you a dewy complexion or just anytime your skin is feeling stressed or 35 | overheated! TIP: Keep in the refrigerator to instantly refresh skin on hot days. 36 | It is also amazing at blending concealer under the eyes with a beauty sponge! 37 | 38 | 39 |     40 | 41 | 42 |

    43 | 44 | 45 | HOW TO USE 46 | 47 | 48 | 49 |

    50 | 51 | Close eyes, spray onto face and neck. Use throughout the day to refresh and hydrate dry skin. 52 | 53 | 54 | 55 |     56 | 57 | 58 |

    59 | 60 | 61 | THE INGREDIENTS 62 | 63 | 64 | 65 |

    66 | 67 | Water (Aqua), Rosa Damascena Flower Water (Rose), Glycerin, Chamomilla Recutita (Matricaria) Flower Extract (Chamomile), Citric Acid, Phenoxyethanol. 68 | 69 | 70 |     71 | 72 | 73 | 74 |

    75 | 76 | 77 | BRAND VALUES 78 | 79 | 80 | 81 |

    82 | 83 | 84 | 85 |     86 | 87 | 88 |     89 |
    90 | ) 91 | } 92 | 93 | export default SinglePageFAQ -------------------------------------------------------------------------------- /src/components/Under10.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import u20bg from "../assets/u20bg.png"; 3 | import "../styles/Under20.css"; 4 | import { 5 | Breadcrumb, 6 | BreadcrumbItem, 7 | BreadcrumbLink, 8 | BreadcrumbSeparator, 9 | } from '@chakra-ui/react' 10 | import { ChevronRightIcon } from '@chakra-ui/icons'; 11 | import { Link } from 'react-router-dom'; 12 | import filterBtn from "../assets/filterBtn.png"; 13 | import sortBtn from "../assets/sortBtn.png" 14 | import { useState } from 'react'; 15 | import { store } from "../productsStore/Store"; 16 | import HoverImage from 'react-hover-image/build'; 17 | import JournalSection from "./JournalSection" 18 | import Features2 from './Features2'; 19 | 20 | import { FaShippingFast } from "react-icons/fa" 21 | import { FaLock } from 'react-icons/fa'; 22 | import { BsCurrencyDollar } from "react-icons/bs"; 23 | import better from "../assets/better.jpeg"; 24 | import SPFooter from './SPFooter'; 25 | 26 | 27 | 28 | const Under10 = () => { 29 | const [filter, SetFilter] = useState(false); 30 | 31 | const [sort, SetSort] = useState(false); 32 | 33 | const [bodyLotionShow, SetBodyLotionShow] = useState(false); 34 | 35 | const [bodyScrubShow, SetBodyScrubShow] = useState(false); 36 | 37 | const [bodyWashShow, SetBodyWashShow] = useState(false); 38 | 39 | const [allShow, SetAllShow] = useState(true); 40 | 41 | const [lowTOHigh, SetLowTOHigh] = useState(false); 42 | 43 | 44 | 45 | 46 | const filterShowHandler = () => { 47 | SetFilter(!filter) 48 | 49 | } 50 | 51 | const toggleSortHandler = () => { 52 | SetSort(!sort) 53 | } 54 | 55 | 56 | const bodyLotionHandler = () => { 57 | SetBodyLotionShow(true); 58 | SetAllShow(false) 59 | 60 | SetBodyScrubShow(false); 61 | SetBodyWashShow(false); 62 | } 63 | 64 | const bodyScrubHandler = () => { 65 | SetBodyScrubShow(true) 66 | SetAllShow(false) 67 | 68 | SetBodyLotionShow(false); 69 | SetBodyWashShow(false) 70 | } 71 | 72 | const bodyWashHandler = () => { 73 | SetBodyWashShow(true) 74 | SetAllShow(false) 75 | 76 | SetBodyLotionShow(false) 77 | SetBodyScrubShow(false) 78 | } 79 | 80 | const allShowHandler = () => { 81 | SetAllShow(true) 82 | 83 | SetBodyWashShow(false) 84 | SetBodyLotionShow(false) 85 | SetBodyScrubShow(false) 86 | } 87 | 88 | 89 | 90 | var bodyLotionProducts = store.filter(product => product.type.includes('bodyLotion')); 91 | 92 | var bodyScrubProducts = store.filter(produt => produt.type.includes("bodyScrub")); 93 | 94 | var bodyWashProducts = store.filter(product => product.type.includes("bodywash")); 95 | 96 | var under40Products = store.filter(product => product.price > 16 && product.price < 40) 97 | 98 | 99 | const bgAddHandler = (e) => { 100 | 101 | e.target.classList.add("whi"); 102 | 103 | 104 | } 105 | 106 | const bgRemoveHandler = (e) => { 107 | e.target.classList.remove("whi"); 108 | 109 | 110 | 111 | } 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | return ( 121 |
    122 |

    123 | 124 |
    125 | 126 |
    127 | 128 |
    129 |

    Under $40

    130 |

    Shop Sukin natural and vegan collection of skincare and hair care gifts under $20.

    131 |
    132 | 133 |
    134 | }> 135 | 136 | Home 137 | 138 | 139 | 140 | 141 | Under 40 142 | 143 | 144 |
    145 | 146 |
    147 | 148 | 149 | 150 | {/**/} 151 |
    152 | 153 |
    154 | {filter &&
    155 |

    Body Lotion

    156 |

    Body Wash

    157 |

    Body Scrub

    158 |

    All Products

    159 | 160 |
    } 161 |
    162 | 163 | 164 | 165 | { /* ALL PRODUCTS */} 166 | 167 | 168 | {allShow &&
    169 | {under40Products.map((item) => { 170 | 171 | if (item.type.includes("all")) { 172 | return ( 173 |
    174 | 175 |
    176 | 177 |
    178 | 179 | 180 |
    181 |

    {item.name}

    182 | 183 | 184 | 185 |
    186 | 187 |

    188 |

    ${item.price}

    189 |
    190 | 191 | 192 | 193 |
    194 |
    195 | 196 | 197 | ) 198 | } 199 | })} 200 |
    201 | } 202 | 203 | 204 | {/* BODY LOTION */} 205 | 206 | {bodyLotionShow &&
    207 | {bodyLotionProducts.map((item) => { 208 | 209 | if (item.type.includes("all")) { 210 | return ( 211 |
    212 | 213 |
    214 | 215 |
    216 | 217 | 218 |
    219 |

    {item.name}

    220 | 221 | 222 |
    223 | 224 |

    225 |

    ${item.price}

    226 |
    227 | 228 |
    229 |
    230 | ) 231 | } 232 | })} 233 |
    234 | } 235 | 236 | 237 | {/* BODY WASH */} 238 | 239 | {bodyWashShow &&
    240 | {bodyWashProducts.map((item) => { 241 | 242 | if (item.type.includes("all")) { 243 | return ( 244 |
    245 | 246 |
    247 | 248 |
    249 | 250 | 251 |
    252 |

    {item.name}

    253 | 254 | 255 |
    256 | 257 |

    258 |

    ${item.price}

    259 |
    260 | 261 | 262 |
    263 |
    264 | ) 265 | 266 | } 267 | })} 268 |
    269 | } 270 | 271 | 272 | { /* BODY SCRUB */} 273 | 274 | {bodyScrubShow &&
    275 | {bodyScrubProducts.map((item) => { 276 | 277 | if (item.type.includes("all")) { 278 | return ( 279 |
    280 | 281 |
    282 | 283 |
    284 | 285 | 286 |
    287 |

    {item.name}

    288 | 289 | 290 |
    291 | 292 |

    293 |

    ${item.price}

    294 |
    295 | 296 | 297 |
    298 | 299 |
    300 | ) 301 | 302 | } 303 | })} 304 | 305 | 306 |
    307 | } 308 | 309 |
    310 | 311 |
    312 | 313 |
    314 | 315 |
    316 | 317 | 318 | 319 | 320 |
    321 | 322 |
    323 |

    2 DAY DELIVERY

    324 |

    secure checkout

    325 |

    royalty points

    326 |

    easy returns

    327 |
    328 | 329 |
    330 | 331 |
    332 | 333 |
    334 | 335 | 336 | 337 | 338 | 339 |
    340 | 341 | 342 | ) 343 | 344 | } 345 | 346 | 347 | export default Under10; -------------------------------------------------------------------------------- /src/components/Under20.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import u20bg from "../assets/u20bg.png"; 3 | import "../styles/Under20.css"; 4 | import { 5 | Breadcrumb, 6 | BreadcrumbItem, 7 | BreadcrumbLink, 8 | BreadcrumbSeparator, 9 | } from '@chakra-ui/react' 10 | import { ChevronRightIcon } from '@chakra-ui/icons'; 11 | import { Link } from 'react-router-dom'; 12 | import filterBtn from "../assets/filterBtn.png"; 13 | import sortBtn from "../assets/sortBtn.png" 14 | import { useState } from 'react'; 15 | import { store } from "../productsStore/Store"; 16 | import HoverImage from 'react-hover-image/build'; 17 | import JournalSection from "./JournalSection" 18 | import Features2 from './Features2'; 19 | 20 | import { FaShippingFast } from "react-icons/fa" 21 | import { FaLock } from 'react-icons/fa'; 22 | import { BsCurrencyDollar } from "react-icons/bs"; 23 | import better from "../assets/better.jpeg"; 24 | import SPFooter from './SPFooter'; 25 | 26 | 27 | 28 | const Under20 = () => { 29 | const [filter, SetFilter] = useState(false); 30 | 31 | const [sort, SetSort] = useState(false); 32 | 33 | const [bodyLotionShow, SetBodyLotionShow] = useState(false); 34 | 35 | const [bodyScrubShow, SetBodyScrubShow] = useState(false); 36 | 37 | const [bodyWashShow, SetBodyWashShow] = useState(false); 38 | 39 | const [allShow, SetAllShow] = useState(true); 40 | 41 | const [lowTOHigh, SetLowTOHigh] = useState(false); 42 | 43 | 44 | 45 | 46 | const filterShowHandler = () => { 47 | SetFilter(!filter) 48 | 49 | } 50 | 51 | const toggleSortHandler = () => { 52 | SetSort(!sort) 53 | } 54 | 55 | 56 | const bodyLotionHandler = () => { 57 | SetBodyLotionShow(true); 58 | SetAllShow(false) 59 | 60 | SetBodyScrubShow(false); 61 | SetBodyWashShow(false); 62 | } 63 | 64 | const bodyScrubHandler = () => { 65 | SetBodyScrubShow(true) 66 | SetAllShow(false) 67 | 68 | SetBodyLotionShow(false); 69 | SetBodyWashShow(false) 70 | } 71 | 72 | const bodyWashHandler = () => { 73 | SetBodyWashShow(true) 74 | SetAllShow(false) 75 | 76 | SetBodyLotionShow(false) 77 | SetBodyScrubShow(false) 78 | } 79 | 80 | const allShowHandler = () => { 81 | SetAllShow(true) 82 | 83 | SetBodyWashShow(false) 84 | SetBodyLotionShow(false) 85 | SetBodyScrubShow(false) 86 | } 87 | 88 | 89 | 90 | var bodyLotionProducts = store.filter(product => product.type.includes('bodyLotion')); 91 | 92 | var bodyScrubProducts = store.filter(produt => produt.type.includes("bodyScrub")); 93 | 94 | var bodyWashProducts = store.filter(product => product.type.includes("bodywash")); 95 | 96 | 97 | const bgAddHandler = (e) => { 98 | 99 | e.target.classList.add("whi"); 100 | 101 | } 102 | 103 | const bgRemoveHandler = (e) => { 104 | e.target.classList.remove("whi"); 105 | 106 | } 107 | 108 | 109 | 110 | 111 | return ( 112 |
    113 |

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

    Under $20

    121 |

    Shop Sukin natural and vegan collection of skincare and hair care gifts under $20.

    122 |
    123 | 124 |
    125 | }> 126 | 127 | Home 128 | 129 | 130 | 131 | 132 | Under 20 133 | 134 | 135 |
    136 | 137 |
    138 | 139 | 140 | 141 | {/**/} 142 |
    143 | 144 |
    145 | {filter &&
    146 |

    Body Lotion

    147 |

    Body Wash

    148 |

    Body Scrub

    149 |

    All Products

    150 | 151 |
    } 152 |
    153 | 154 | 155 | { /* ALL PRODUCTS */} 156 | 157 | 158 | {allShow &&
    159 | {store.map((item) => { 160 | 161 | if (item.type.includes("all")) { 162 | return ( 163 |
    164 | 165 |
    166 | 167 |
    168 | 169 | 170 |
    171 |

    {item.name}

    172 | 173 | 174 | 175 |
    176 | 177 |

    178 |

    ${item.price}

    179 |
    180 | 181 |
    182 |
    183 | ) 184 | } 185 | })} 186 |
    187 | } 188 | 189 | 190 | {/* BODY LOTION */} 191 | 192 | {bodyLotionShow &&
    193 | {bodyLotionProducts.map((item) => { 194 | 195 | if (item.type.includes("all")) { 196 | return ( 197 |
    198 | 199 |
    200 | 201 |
    202 | 203 | 204 |
    205 |

    {item.name}

    206 | 207 | 208 |
    209 | 210 |

    211 |

    ${item.price}

    212 |
    213 | 214 |
    215 |
    216 | ) 217 | } 218 | })} 219 |
    220 | } 221 | 222 | 223 | {/* BODY WASH */} 224 | 225 | {bodyWashShow &&
    226 | {bodyWashProducts.map((item) => { 227 | 228 | if (item.type.includes("all")) { 229 | return ( 230 |
    231 | 232 |
    233 | 234 |
    235 | 236 | 237 |
    238 |

    {item.name}

    239 | 240 | 241 |
    242 | 243 |

    244 |

    ${item.price}

    245 |
    246 | 247 | 248 |
    249 |
    250 | ) 251 | 252 | } 253 | })} 254 |
    255 | } 256 | 257 | 258 | { /* BODY SCRUB */} 259 | 260 | {bodyScrubShow &&
    261 | {bodyScrubProducts.map((item) => { 262 | 263 | if (item.type.includes("all")) { 264 | return ( 265 |
    266 | 267 |
    268 | 269 |
    270 | 271 | 272 |
    273 |

    {item.name}

    274 | 275 | 276 |
    277 | 278 |

    279 |

    ${item.price}

    280 |
    281 | 282 | 283 |
    284 | 285 |
    286 | ) 287 | 288 | } 289 | })} 290 | 291 | 292 |
    293 | } 294 | 295 |
    296 | 297 |
    298 | 299 |
    300 | 301 |
    302 | 303 | 304 | 305 | 306 |
    307 | 308 |
    309 |

    2 DAY DELIVERY

    310 |

    secure checkout

    311 |

    royalty points

    312 |

    easy returns

    313 |
    314 | 315 |
    316 | 317 |
    318 | 319 |
    320 | 321 | 322 | 323 | 324 | 325 |
    326 | 327 | 328 | ) 329 | 330 | } 331 | 332 | 333 | export default Under20; 334 | 335 | 336 | -------------------------------------------------------------------------------- /src/components/YouMayAlsoLike.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Slider from "react-slick"; 3 | import { store } from "../productsStore/Store"; 4 | import { Link } from "react-router-dom"; 5 | import Marquee from "react-fast-marquee"; 6 | 7 | 8 | export default class AutoPlayMethods extends Component { 9 | constructor(props) { 10 | super(props); 11 | this.play = this.play.bind(this); 12 | this.pause = this.pause.bind(this); 13 | } 14 | play() { 15 | this.slider.slickPlay(); 16 | } 17 | pause() { 18 | this.slider.slickPause(); 19 | } 20 | render() { 21 | const settings = { 22 | dots: false, 23 | infinite: true, 24 | slidesToShow: 6, 25 | slidesToScroll: 1, 26 | autoplay: true, 27 | autoplaySpeed: 1500, 28 | arrows: false, 29 | responsive: [ 30 | { 31 | breakpoint: 991, 32 | settings: { 33 | slidesToShow: 3, 34 | } 35 | }, 36 | { 37 | breakpoint: 767, 38 | settings: { 39 | slidesToShow: 2, 40 | } 41 | } 42 | ] 43 | }; 44 | return ( 45 |
    46 | 47 | {store.map((item) => { 48 | if (item.type == "ourBestSellers") { 49 | return (
    50 | 51 | 52 | 53 |
    ) 54 | } 55 | })} 56 |     57 | 58 |
    59 | ); 60 | } 61 | } 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /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 | overflow-x: hidden !important ; 9 | } 10 | 11 | .linHei { 12 | line-height: 4rem !important; 13 | } 14 | 15 | .linHei2 { 16 | line-height: 2rem !important; 17 | } 18 | 19 | .bla { 20 | background-color: #252525 !important; 21 | } 22 | 23 | * { 24 | box-sizing: border-box !important; 25 | } 26 | 27 | img { 28 | max-width: 100%; 29 | height: auto; 30 | } 31 | 32 | .cg { 33 | left: 37rem; 34 | } 35 | 36 | .hei { 37 | height: 3rem; 38 | } 39 | 40 | .bor { 41 | border: 1px solid #dddddd; 42 | } 43 | 44 | .cartName { 45 | width: 13rem; 46 | top: -14.4rem; 47 | left: 31.5rem; 48 | font-size: 17px !important; 49 | 50 | } 51 | 52 | .cartPrice { 53 | width: 6rem; 54 | top: -13rem; 55 | left: 34.5rem; 56 | } 57 | 58 | .cartImaegHold { 59 | left: 19rem; 60 | top: -4rem; 61 | 62 | } 63 | 64 | .qtyhChangehold { 65 | position: relative; 66 | left: 31rem; 67 | top: -12rem; 68 | display: flex !important; 69 | flex-direction: column !important; 70 | } 71 | 72 | .cartProductsHold { 73 | top: 40rem !important; 74 | 75 | } 76 | 77 | /* chnageing "cartProductsHold" from 3 rem to 40rem */ 78 | 79 | 80 | 81 | .totLine { 82 | left: 2rem; 83 | top: -5rem; 84 | } 85 | 86 | .totLine2 { 87 | left: 2rem; 88 | top: -3.5rem; 89 | } 90 | 91 | .middleLine { 92 | top: -5rem; 93 | left: 18rem; 94 | } 95 | 96 | .youMay { 97 | top: 28.5rem !important; 98 | position: relative !important; 99 | } 100 | 101 | .paypal-button::before { 102 | content: "PAY WITH PAYPAL" !important; 103 | } 104 | 105 | .paypal-button::after { 106 | content: "PAY WITH PAYPAL" !important; 107 | } 108 | 109 | .urCartItem { 110 | left: 18rem; 111 | top: 2rem; 112 | gap: 23rem !important; 113 | } 114 | 115 | .lin { 116 | line-height: 3rem !important; 117 | } 118 | 119 | .mobHold{ 120 | position: relative !important; 121 | } 122 | 123 | .cartTotalMainParent { 124 | box-shadow: rgb(0 0 0 / 12%) 0px 6px 16px; 125 | background-color: white; 126 | border: 2px solid whitesmoke; 127 | width: 28rem; 128 | height: 37rem; 129 | position: absolute !important; 130 | left: 62rem; 131 | top: 16rem; 132 | border-radius: 15px; 133 | } 134 | 135 | /* changes "cartTotalMainParent" from relative to absolute */ 136 | 137 | .idk { 138 | top: 80rem !important; 139 | position: relative !important; 140 | } 141 | 142 | .chParent { 143 | 144 | position: relative; 145 | top: -30rem; 146 | left: 0rem; 147 | } 148 | 149 | .calcHold { 150 | top: -6.5rem; 151 | left: 20rem; 152 | } 153 | 154 | .topLine { 155 | top: 32rem; 156 | left: 18rem; 157 | } 158 | 159 | .paypal-button-container { 160 | width: 74% !important; 161 | } 162 | 163 | .ctActualToatal { 164 | left: 10rem; 165 | top: -4rem; 166 | } 167 | 168 | .licart { 169 | line-height: 5rem; 170 | } 171 | 172 | .payc { 173 | position: relative; 174 | top: -5rem; 175 | left: 11.4rem; 176 | color: white; 177 | z-index: 9999999999; 178 | background-color: #2C2E2F; 179 | width: 7rem; 180 | } 181 | 182 | 183 | .featHeadingHold { 184 | top: -20rem; 185 | left: 12rem; 186 | } 187 | 188 | .gpayHold { 189 | position: relative; 190 | top: -0.5rem; 191 | } 192 | 193 | .gpay-card-info-container.black, 194 | .gpay-card-info-animation-container.black { 195 | width: 27.4rem; 196 | } 197 | 198 | 199 | 200 | 201 | 202 | /*.searchItemsHold{ 203 | height: 20rem !important; 204 | }*/ 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | /* PYAPAL BUTTON */ 219 | 220 | .paypal-button.paypal-button-color-gold, 221 | .paypal-button-row.paypal-button-color-gold .menu-button { 222 | background-color: black !important; 223 | } 224 | 225 | .paypal-button.paypal-button-color-gold, 226 | .paypal-button-row.paypal-button-color-gold .menu-button { 227 | background: black !important; 228 | } 229 | 230 | /* YOU MAY ALSO LIKE AUTO SCROLLING */ 231 | 232 | 233 | .alsoLikeText { 234 | top: 27rem; 235 | left: 29.5rem; 236 | font-size: 45px !important; 237 | } 238 | 239 | .cpf{ 240 | top: 39rem !important; 241 | } 242 | 243 | .boxImg { 244 | box-shadow: 10px 10px 5px #ccc; 245 | -moz-box-shadow: 10px 10px 5px #ccc; 246 | -webkit-box-shadow: 10px 10px 5px #ccc; 247 | -khtml-box-shadow: 10px 10px 5px #ccc; 248 | } 249 | 250 | .faqParent { 251 | top: 34rem; 252 | right: -14rem; 253 | width: 70vw; 254 | position: relative !important; 255 | } 256 | 257 | 258 | 259 | @tailwind base; 260 | @tailwind components; 261 | @tailwind utilities; 262 | 263 | 264 | .zi { 265 | z-index: 9999999999; 266 | } 267 | 268 | code { 269 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 270 | monospace; 271 | } 272 | 273 | .car-pic { 274 | width: 100vw; 275 | max-width: 100% !important; 276 | object-fit: cover; 277 | } 278 | 279 | .slick-prev { 280 | display: block !important; 281 | left: 2rem !important; 282 | top: 19rem !important; 283 | z-index: 99999999; 284 | width: 4rem !important; 285 | } 286 | 287 | .slick-next { 288 | right: 3.5rem !important; 289 | z-index: 9999999999999999 !important; 290 | top: 19.7rem !important; 291 | 292 | } 293 | 294 | .slick-prev:before { 295 | content: url("../src/assets/prevv.png") !important; 296 | } 297 | 298 | .slick-next:before { 299 | content: url("../src/assets/nf.png") !important; 300 | } -------------------------------------------------------------------------------- /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 | 7 | import { Provider } from 'react-redux'; 8 | import store from './redux-state/CartState'; 9 | import { ChakraProvider } from '@chakra-ui/react'; 10 | 11 | const root = ReactDOM.createRoot(document.getElementById('root')); 12 | root.render( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | 24 | // If you want to start measuring performance in your app, pass a function 25 | // to log results (for example: reportWebVitals(console.log)) 26 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 27 | reportWebVitals(); 28 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/redux-state/CartState.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import { createSlice } from "@reduxjs/toolkit"; 3 | 4 | const cartSlice = createSlice({ 5 | name: 'cart', 6 | initialState: { 7 | items: [], 8 | totalQuantity: 0, 9 | 10 | }, 11 | reducers: { 12 | addItemToCart(state, action) { 13 | const newItem = action.payload; 14 | const existingItem = state.items.find((item) => item.id === newItem.id); 15 | state.totalQuantity++; 16 | 17 | if (!existingItem) { 18 | state.items.push({ 19 | id: newItem.id, 20 | price: newItem.price, 21 | quantity: 1, 22 | totalPrice: newItem.price, 23 | name: newItem.title, 24 | picture:newItem.image, 25 | 26 | }); 27 | } 28 | else { 29 | existingItem.quantity++; 30 | existingItem.totalPrice = existingItem.totalPrice + newItem.price 31 | } 32 | }, 33 | 34 | removeItemFromCart(state, action) { 35 | const id = action.payload; 36 | const existingItem = state.items.find(item => item.id === id); 37 | state.totalQuantity--; 38 | if (existingItem.quantity === 1) { 39 | state.items = state.items.filter(item => item.id !== id); 40 | } else { 41 | existingItem.quantity--; 42 | existingItem.totalPrice = existingItem.totalPrice - existingItem.price; 43 | } 44 | }, 45 | } 46 | }) 47 | 48 | const store = configureStore({ reducer: { cart: cartSlice.reducer } }) 49 | 50 | export default store; 51 | export const cartActions=cartSlice.actions; 52 | -------------------------------------------------------------------------------- /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/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/styles/Body.css: -------------------------------------------------------------------------------- 1 | .lineHold { 2 | top: 3.4rem !important; 3 | position: absolute !important; 4 | left: 6.7rem !important; 5 | gap: 6.5rem !important; 6 | } 7 | 8 | .lineHold2 { 9 | position: absolute; 10 | top: 4rem; 11 | gap: 6.5rem; 12 | } 13 | 14 | .p { 15 | width: 8rem; 16 | height: 3rem; 17 | } 18 | 19 | .bodyContent { 20 | position: absolute; 21 | top: 3rem; 22 | left: 18rem; 23 | margin-right: 3rem; 24 | display: flex; 25 | flex-direction: column; 26 | gap: 2.4rem; 27 | } 28 | 29 | .hairContent { 30 | position: absolute; 31 | top: 9rem; 32 | left: 22rem; 33 | z-index: 100 !important; 34 | opacity: 0; 35 | } 36 | 37 | .transition { 38 | transform: translateY(-20px); 39 | transition: all 300ms ease-out; 40 | opacity: 1; 41 | } 42 | 43 | .transition2 { 44 | transform: translateY(-30px); 45 | transition: all 300ms ease-out; 46 | opacity: 1; 47 | } 48 | 49 | .lineHeight { 50 | line-height: 5rem; 51 | } 52 | 53 | .categoryHold { 54 | 55 | top: 0.1rem; 56 | gap: 1rem; 57 | left: 9rem; 58 | } 59 | 60 | .bodyTypeImage { 61 | width: 10rem; 62 | object-fit: cover; 63 | } 64 | 65 | .bodyTypeIndivitual { 66 | display: flex !important; 67 | flex-direction: row !important; 68 | position: relative; 69 | top: -25rem; 70 | gap: 0rem !important; 71 | left: 9rem; 72 | } 73 | 74 | .bodyTypeHold { 75 | flex-wrap: wrap; 76 | flex-wrap: wrap; 77 | width: 50rem; 78 | justify-content: center; 79 | gap: 2rem; 80 | } 81 | 82 | .fs { 83 | font-size: 15px; 84 | } 85 | 86 | .bodyTypeName { 87 | position: relative; 88 | top: 11rem; 89 | left: -10rem; 90 | font-weight: 400; 91 | font-size: 17px; 92 | } 93 | 94 | .hairTypeCategoryONE { 95 | color: #808080d6; 96 | font-size: 17px; 97 | position: absolute; 98 | top: -5rem; 99 | left: -5rem; 100 | width: 51rem; 101 | height: 24rem; 102 | } 103 | 104 | .hairTypeCategoryTWO { 105 | color: #808080; 106 | font-size: 19px; 107 | position: absolute; 108 | top: -5.3rem; 109 | left: 7rem; 110 | gap: 3rem; 111 | white-space: nowrap; 112 | font-size: 17px; 113 | } 114 | 115 | .hairImageHold { 116 | position: relative; 117 | top: -1rem; 118 | left: 17.8rem; 119 | } 120 | 121 | .hairTextHold { 122 | font-size: 16px; 123 | gap: 3rem; 124 | /* flex-wrap: wrap; */ 125 | /* width: 14rem; */ 126 | left: 18rem; 127 | 128 | } 129 | 130 | .transition3 { 131 | transform: translateY(-30px); 132 | transition: all 300ms ease-out; 133 | opacity: 1; 134 | } 135 | 136 | .travelContent { 137 | position: relative; 138 | top: 8rem; 139 | left: 15.8rem; 140 | 141 | } 142 | 143 | .px { 144 | font-size: 15px; 145 | } 146 | 147 | .color { 148 | color: #808080; 149 | } 150 | 151 | .newContent { 152 | opacity: 0; 153 | } 154 | 155 | 156 | .transition4 { 157 | transform: translateY(-30px); 158 | transition: all 300ms ease-out; 159 | opacity: 1; 160 | } 161 | 162 | .newTypeHold { 163 | top: -13rem; 164 | left: 14rem; 165 | } 166 | 167 | .w56rem{ 168 | width: 56rem; 169 | } 170 | 171 | 172 | 173 | 174 | /* UNDERLINE EFFECT */ 175 | 176 | .hover-underline-animation { 177 | display: inline-block; 178 | position: relative; 179 | color: #031D44; 180 | } 181 | 182 | .hover-underline-animation:after { 183 | content: ''; 184 | position: absolute; 185 | width: 100%; 186 | transform: scaleX(0); 187 | height: 5px; 188 | bottom: 0; 189 | left: 0; 190 | background-color: 191 | #031D44; 192 | transform-origin: bottom right; 193 | transition: transform 0.25s ease-out; 194 | } 195 | 196 | .hover-underline-animation:hover:after { 197 | transform: scaleX(1); 198 | transform-origin: bottom left; 199 | } -------------------------------------------------------------------------------- /src/styles/FollowONIG.css: -------------------------------------------------------------------------------- 1 | .alice-carousel__stage { 2 | position: relative; 3 | z-index: 99999999999999 !important; 4 | } 5 | 6 | .carouselIMg { 7 | width: 20rem; 8 | height: 20rem; 9 | float: left; 10 | object-fit: cover; 11 | border-radius: 30px !important; 12 | 13 | } 14 | 15 | .mrMl { 16 | padding-right: 2rem; 17 | padding-left: 2rem; 18 | } 19 | 20 | .igText { 21 | font-family: Arapey, Helvetica, Arial, sans-serif; 22 | font-weight: 500; 23 | font-style: italic; 24 | font-size: 2.9rem; 25 | letter-spacing: -.5px; 26 | top: 3rem; 27 | left: 29rem; 28 | position: relative; 29 | } 30 | 31 | 32 | 33 | /*.alice-carousel { 34 | position: relative; 35 | width: 100%; 36 | margin: auto; 37 | direction: ltr; 38 | top: 4rem; 39 | left: 3rem; 40 | height: 52rem; 41 | 42 | } 43 | */ -------------------------------------------------------------------------------- /src/styles/GiftSets.css: -------------------------------------------------------------------------------- 1 | .categoryText{ 2 | top: 2rem; 3 | position: absolute; 4 | } 5 | 6 | .bestSellerPriceHolder{ 7 | position: absolute; 8 | top: 5.5rem; 9 | width: 8rem; 10 | text-transform: capitalize; 11 | font-weight: 400; 12 | } 13 | 14 | .giftSetMainParent{ 15 | position: absolute; 16 | left: 2.5rem; 17 | } 18 | 19 | .giftHold{ 20 | position: relative; 21 | top: 3rem; 22 | left: 16rem; 23 | } 24 | 25 | .giftName{ 26 | font-size: 15px; 27 | font-weight: 500; 28 | } -------------------------------------------------------------------------------- /src/styles/HeroSection.css: -------------------------------------------------------------------------------- 1 | 2 | .heroDescription{ 3 | left: 25rem; 4 | width: 43rem; 5 | text-align: center; 6 | top: -1rem; 7 | } 8 | 9 | .heroPicHold{ 10 | margin-top: 4rem; 11 | gap: 20rem; 12 | position: relative; 13 | left: 12.7rem; 14 | width: 85vw; 15 | } 16 | 17 | .heroHeadingHold{ 18 | position: relative; 19 | left: 19rem; 20 | gap: 15rem; 21 | top: -5rem; 22 | } 23 | 24 | .heroDescHold{ 25 | gap: 10.8rem; 26 | left: 19rem; 27 | top: -4rem; 28 | font-size: 17px; 29 | } 30 | 31 | 32 | 33 | /* ===== Scrollbar CSS ===== */ 34 | /* Firefox */ 35 | * { 36 | scrollbar-width: auto; 37 | scrollbar-color: #8f54a0 #ffffff; 38 | } 39 | 40 | /* Chrome, Edge, and Safari */ 41 | *::-webkit-scrollbar { 42 | width: 16px; 43 | } 44 | 45 | *::-webkit-scrollbar-track { 46 | background: #d9cbcb72; 47 | } 48 | 49 | *::-webkit-scrollbar-thumb { 50 | background-color: #173f35; 51 | border-radius: 40px; 52 | } -------------------------------------------------------------------------------- /src/styles/Ingridients.css: -------------------------------------------------------------------------------- 1 | .ingMainParent { 2 | position: relative; 3 | top: 11rem; 4 | } 5 | 6 | .ingTextHold { 7 | left: 2.5rem; 8 | position: relative; 9 | gap: 9rem; 10 | margin-top: 1rem; 11 | } 12 | 13 | .ingImgHold { 14 | position: relative; 15 | left: 2rem; 16 | } 17 | 18 | .zoom2{ 19 | transition: all 400ms ease; 20 | } 21 | 22 | .zoom2:hover{ 23 | transform: scale(1.2); 24 | } -------------------------------------------------------------------------------- /src/styles/JournalPage.css: -------------------------------------------------------------------------------- 1 | .sjText { 2 | position: absolute; 3 | font-size: 1.625rem; 4 | letter-spacing: 6.7px; 5 | line-height: 1.92; 6 | font-weight: 700; 7 | text-transform: uppercase; 8 | font-family: Avenir, Helvetica, Arial, sans-serif; 9 | width: 50rem; 10 | left: 35rem; 11 | } 12 | 13 | .journalPageMainParent { 14 | position: absolute; 15 | top: 13rem; 16 | } 17 | 18 | .paraHold { 19 | font-size: .9375rem; 20 | letter-spacing: .5px; 21 | line-height: 1.45; 22 | width: 40rem; 23 | left: 29rem; 24 | top: 5rem; 25 | font-weight: 400; 26 | } 27 | 28 | .aprilBlogHeading { 29 | width: 35rem; 30 | left: 30rem; 31 | top: 10rem; 32 | 33 | } 34 | 35 | .hairImg { 36 | width: 30rem; 37 | object-fit: cover; 38 | height: 29rem; 39 | } 40 | 41 | .hairImgHold { 42 | position: relative; 43 | top: 19rem; 44 | left: 32rem; 45 | } 46 | 47 | .jhold{ 48 | top: 52rem; 49 | width: 50rem; 50 | text-align: center; 51 | left: 20rem; 52 | gap: 3rem; 53 | } 54 | 55 | .footerFeatures3{ 56 | top: 110rem; 57 | left: 10rem; 58 | gap: 17rem 59 | } 60 | 61 | .footerFeatures3TextHold{ 62 | top: 111.5rem; 63 | left: 15rem; 64 | gap: 12rem; 65 | white-space: nowrap; 66 | } 67 | 68 | .jfHold{ 69 | width: 100vw; 70 | top: 120rem; 71 | } 72 | 73 | 74 | .journalPageMainParent-1{ 75 | width: 100rem; 76 | height: 100rem; 77 | position: relative; 78 | top: -6rem; 79 | } -------------------------------------------------------------------------------- /src/styles/JournalSection.css: -------------------------------------------------------------------------------- 1 | .jsMainParent { 2 | width: 100vw; 3 | height: 73vh; 4 | background-color: #f4f3f0; 5 | } 6 | 7 | .jsLeft { 8 | position: relative; 9 | top: 5rem; 10 | left: 13rem; 11 | } 12 | 13 | .readBtn { 14 | border: none; 15 | background-color: #252525; 16 | width: 11rem; 17 | height: 3rem; 18 | color: white; 19 | transition: 350ms ease; 20 | left: 1.8rem; 21 | top: 3rem; 22 | position: relative; 23 | } 24 | 25 | .readBtn:hover { 26 | background-color: #173f35; 27 | color: rgb(255, 255, 255); 28 | } 29 | 30 | .jsImg { 31 | position: relative; 32 | top: -10rem; 33 | left: 40rem; 34 | width: 22rem; 35 | object-fit: cover; 36 | } 37 | 38 | .jsRightText{ 39 | left: 43rem; 40 | top: -8rem; 41 | } 42 | 43 | .lh6{ 44 | line-height: 6.5rem; 45 | } -------------------------------------------------------------------------------- /src/styles/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 3 | background: rgba(244, 243, 240, 0.8); 4 | display: flex; 5 | align-items: center; 6 | height: 8rem; 7 | } 8 | 9 | .logo { 10 | display: inline-block; 11 | padding: 0.5rem; 12 | text-decoration: none; 13 | font-size: 1.5rem; 14 | } 15 | 16 | li { 17 | color: #173f35; 18 | } 19 | 20 | .menuNav { 21 | margin: 0; 22 | display: flex; 23 | list-style: none; 24 | } 25 | .menuNav li { 26 | position: relative; 27 | z-index: 2; 28 | display: block; 29 | letter-spacing: 0.01rem; 30 | padding: 1rem 1rem; 31 | text-decoration: none; 32 | font-weight: 600; 33 | font-size: 1.25rem; 34 | transition: 0.2s; 35 | } 36 | 37 | .dropdown > li { 38 | display: flex; 39 | align-items: center; 40 | font-size: 0.8125rem; 41 | } 42 | 43 | .dropdown:hover .dropdown-nav { 44 | opacity: 1; 45 | transform: translateY(0); 46 | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 47 | } 48 | 49 | .dropdown-nav { 50 | opacity: 0; 51 | transition: transform 0.3s cubic-bezier(0.88, -0.72, 0, 1), opacity 0.3s ease-in-out; 52 | transform: translateY(-4rem); 53 | list-style: none; 54 | margin: 0; 55 | padding: 0; 56 | position: absolute; 57 | z-index: 1; 58 | top: 6.7rem; 59 | left: -12.5rem; 60 | width: 82rem; 61 | margin-top: 1rem !important; 62 | height: 30rem; 63 | background-color: white; 64 | border-radius: 25px; 65 | } 66 | .dropdown-nav li { 67 | font-weight: 300; 68 | font-size: 1.2rem; 69 | } 70 | 71 | .dropdown-nav2 { 72 | opacity: 0; 73 | transition: transform 0.3s cubic-bezier(0.88, -0.72, 0, 1), opacity 0.3s ease-in-out; 74 | transform: translateY(-4rem); 75 | list-style: none; 76 | margin: 0; 77 | padding: 0; 78 | position: absolute; 79 | z-index: 1; 80 | top: 6.7rem; 81 | left: -20rem; 82 | width: 68rem; 83 | height: 28rem; 84 | background-color: white; 85 | } 86 | .dropdown-nav2 li { 87 | font-weight: 300; 88 | font-size: 1.2rem; 89 | } 90 | 91 | .dropdown-nav3 { 92 | opacity: 0; 93 | transition: transform 0.3s cubic-bezier(0.88, -0.72, 0, 1), opacity 0.3s ease-in-out; 94 | transform: translateY(-4rem); 95 | list-style: none; 96 | margin: 0; 97 | padding: 0; 98 | position: absolute; 99 | z-index: 1; 100 | top: 6.7rem; 101 | left: -33rem; 102 | width: 71rem; 103 | height: 28rem; 104 | background-color: white; 105 | } 106 | .dropdown-nav3 li { 107 | font-weight: 300; 108 | font-size: 1.2rem; 109 | } 110 | 111 | .dropdown-nav4 { 112 | opacity: 0; 113 | transition: transform 0.3s cubic-bezier(0.88, -0.72, 0, 1), opacity 0.3s ease-in-out; 114 | transform: translateY(-4rem); 115 | list-style: none; 116 | margin: 0; 117 | padding: 0; 118 | position: absolute; 119 | z-index: 1; 120 | top: 6.7rem; 121 | left: -37rem; 122 | width: 71rem; 123 | height: 28rem; 124 | background-color: white; 125 | } 126 | .dropdown-nav4 li { 127 | font-weight: 300; 128 | font-size: 1.2rem; 129 | } 130 | 131 | /* UNDSELINE */ 132 | .nav-link { 133 | font-weight: bold; 134 | font-size: 14px; 135 | text-transform: uppercase; 136 | text-decoration: none; 137 | color: #031D44; 138 | padding: 60px 0px; 139 | margin: 0px 20px; 140 | display: inline-block; 141 | position: relative; 142 | opacity: 0.75; 143 | padding: 1.8rem !important; 144 | } 145 | 146 | .nav-link-fade-up:hover::before { 147 | bottom: 10px; 148 | opacity: 1; 149 | } 150 | 151 | .nav-link-fade-up::before { 152 | width: 80%; 153 | bottom: 5px; 154 | opacity: 0; 155 | } 156 | 157 | .nav-link:hover { 158 | opacity: 1; 159 | } 160 | 161 | .nav-link::before { 162 | transition: 400ms; 163 | height: 5px; 164 | content: ""; 165 | position: absolute; 166 | background-color: #031D44; 167 | } 168 | 169 | .navLine { 170 | left: 56.8rem; 171 | width: 1.5px !important; 172 | top: 2.8rem !important; 173 | background-color: #031D44; 174 | }/*# sourceMappingURL=Navbar.css.map */ -------------------------------------------------------------------------------- /src/styles/Navbar.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["Navbar.scss","Navbar.css"],"names":[],"mappings":"AAAA;EACI,4EAAA;EACA,oCAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;ACCJ;;ADIA;EACI,qBAAA;EACA,eAAA;EACA,qBAAA;EACA,iBAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ;;ADIA;EACI,SAAA;EACA,aAAA;EACA,gBAAA;ACDJ;ADGI;EACI,kBAAA;EACA,UAAA;EACA,cAAA;EACA,uBAAA;EACA,kBAAA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,gBAAA;ACDR;;ADKA;EACI,aAAA;EACA,mBAAA;EACA,oBAAA;ACFJ;;ADOI;EACI,UAAA;EACA,wBAAA;EACA,iFAAA;ACJR;;ADWA;EACI,UAAA;EACA,oFAAA;EACA,4BAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,cAAA;EACA,YAAA;EACA,2BAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACRJ;ADSI;EACI,gBAAA;EACA,iBAAA;ACPR;;ADaA;EACI,UAAA;EACA,oFAAA;EACA,4BAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;ACVJ;ADWI;EACI,gBAAA;EACA,iBAAA;ACTR;;ADeA;EACI,UAAA;EACA,oFAAA;EACA,4BAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;ACZJ;ADaI;EACI,gBAAA;EACA,iBAAA;ACXR;;ADiBA;EACI,UAAA;EACA,oFAAA;EACA,4BAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;ACdJ;ADeI;EACI,gBAAA;EACA,iBAAA;ACbR;;ADqBA,iBAAA;AAGA;EACI,iBAAA;EACA,eAAA;EACA,yBAAA;EACA,qBAAA;EACA,cAAA;EACA,iBAAA;EACA,gBAAA;EACA,qBAAA;EACA,kBAAA;EACA,aAAA;EACA,0BAAA;ACpBJ;;ADwBA;EACI,YAAA;EACA,UAAA;ACrBJ;;ADyBA;EACI,UAAA;EACA,WAAA;EACA,UAAA;ACtBJ;;AD0BA;EACI,UAAA;ACvBJ;;AD2BA;EACI,iBAAA;EACA,WAAA;EACA,WAAA;EACA,kBAAA;EACA,yBAAA;ACxBJ;;AD2BA;EACI,aAAA;EACA,uBAAA;EACA,sBAAA;EACA,yBAAA;ACxBJ","file":"Navbar.css"} -------------------------------------------------------------------------------- /src/styles/Navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | box-shadow: 0 4px 20px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%); 3 | background: #f4f3f0cc; 4 | display: flex; 5 | align-items: center; 6 | height: 8rem; 7 | 8 | 9 | } 10 | 11 | .logo { 12 | display: inline-block; 13 | padding: 0.5rem; 14 | text-decoration: none; 15 | font-size: 1.5rem; 16 | } 17 | 18 | li { 19 | color: #173f35; 20 | } 21 | 22 | .menuNav { 23 | margin: 0; 24 | display: flex; 25 | list-style: none; 26 | 27 | li { 28 | position: relative; 29 | z-index: 2; 30 | display: block; 31 | letter-spacing: 0.01rem; 32 | padding: 1rem 1rem; 33 | text-decoration: none; 34 | font-weight: 600; 35 | font-size: 1.25rem; 36 | transition: 0.2s; 37 | } 38 | } 39 | 40 | .dropdown>li { 41 | display: flex; 42 | align-items: center; 43 | font-size: .8125rem; 44 | } 45 | 46 | 47 | .dropdown:hover { 48 | .dropdown-nav { 49 | opacity: 1; 50 | transform: translateY(0); 51 | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 52 | } 53 | } 54 | 55 | 56 | 57 | // drop down for best sellers 58 | .dropdown-nav { 59 | opacity: 0; 60 | transition: transform .3s cubic-bezier(0.88, -0.72, 0, 1), opacity .3s ease-in-out; 61 | transform: translateY(-4rem); 62 | list-style: none; 63 | margin: 0; 64 | padding: 0; 65 | position: absolute; 66 | z-index: 1; 67 | top: 6.7rem; 68 | left: -12.5rem; 69 | width: 82rem; 70 | margin-top: 1rem !important; 71 | height: 30rem; 72 | background-color: white; 73 | border-radius: 25px; 74 | li { 75 | font-weight: 300; 76 | font-size: 1.2rem; 77 | } 78 | } 79 | 80 | // drop down for gift sets 81 | 82 | .dropdown-nav2 { 83 | opacity: 0; 84 | transition: transform .3s cubic-bezier(0.88, -0.72, 0, 1), opacity .3s ease-in-out; 85 | transform: translateY(-4rem); 86 | list-style: none; 87 | margin: 0; 88 | padding: 0; 89 | position: absolute; 90 | z-index: 1; 91 | top: 6.7rem; 92 | left: -20rem; 93 | width: 68rem; 94 | height: 28rem; 95 | background-color: white; 96 | li { 97 | font-weight: 300; 98 | font-size: 1.2rem; 99 | } 100 | } 101 | 102 | // drop down for shop range 103 | 104 | .dropdown-nav3 { 105 | opacity: 0; 106 | transition: transform .3s cubic-bezier(0.88, -0.72, 0, 1), opacity .3s ease-in-out; 107 | transform: translateY(-4rem); 108 | list-style: none; 109 | margin: 0; 110 | padding: 0; 111 | position: absolute; 112 | z-index: 1; 113 | top: 6.7rem; 114 | left: -33rem; 115 | width: 71rem; 116 | height: 28rem; 117 | background-color: white; 118 | li { 119 | font-weight: 300; 120 | font-size: 1.2rem; 121 | } 122 | } 123 | 124 | // drop down for image ( journal pic) 125 | 126 | .dropdown-nav4 { 127 | opacity: 0; 128 | transition: transform .3s cubic-bezier(0.88, -0.72, 0, 1), opacity .3s ease-in-out; 129 | transform: translateY(-4rem); 130 | list-style: none; 131 | margin: 0; 132 | padding: 0; 133 | position: absolute; 134 | z-index: 1; 135 | top: 6.7rem; 136 | left: -37rem; 137 | width: 71rem; 138 | height: 28rem; 139 | background-color: white; 140 | li { 141 | font-weight: 300; 142 | font-size: 1.2rem; 143 | } 144 | } 145 | 146 | 147 | 148 | 149 | 150 | /* UNDSELINE */ 151 | 152 | 153 | .nav-link { 154 | font-weight: bold; 155 | font-size: 14px; 156 | text-transform: uppercase; 157 | text-decoration: none; 158 | color: #031D44; 159 | padding: 60px 0px; 160 | margin: 0px 20px; 161 | display: inline-block; 162 | position: relative; 163 | opacity: 0.75; 164 | padding: 1.8rem !important; 165 | } 166 | 167 | 168 | .nav-link-fade-up:hover::before { 169 | bottom: 10px; 170 | opacity: 1; 171 | } 172 | 173 | 174 | .nav-link-fade-up::before { 175 | width: 80%; 176 | bottom: 5px; 177 | opacity: 0; 178 | } 179 | 180 | 181 | .nav-link:hover { 182 | opacity: 1; 183 | } 184 | 185 | 186 | .nav-link::before { 187 | transition: 400ms; 188 | height: 5px; 189 | content: ""; 190 | position: absolute; 191 | background-color: #031D44; 192 | } 193 | 194 | .navLine { 195 | left: 56.8rem; 196 | width: 1.5px !important; 197 | top: 2.8rem !important; 198 | background-color: #031D44; 199 | } -------------------------------------------------------------------------------- /src/styles/OurBestSellers.css: -------------------------------------------------------------------------------- 1 | .ourBestSellersImg { 2 | width: 19rem !important; 3 | object-fit: contain !important; 4 | } 5 | 6 | .ourBestSellersMainParent { 7 | display: flex; 8 | flex-wrap: wrap; 9 | flex-direction: row; 10 | gap: 85px; 11 | position: relative; 12 | width: 104vw; 13 | margin-top: 3rem; 14 | right: -6.5rem; 15 | 16 | } 17 | 18 | :root{ 19 | --p: 293 194% 8% !important; 20 | --pf: 293 194% 8% !important; 21 | 22 | } 23 | 24 | 25 | .zoom{ 26 | transition: all 360ms ease; 27 | } 28 | 29 | .zoom:hover{ 30 | transform: scale(1.08); 31 | } 32 | 33 | .fof{ 34 | font-family: Arapey, Helvetica, Arial, sans-serif; 35 | 36 | } -------------------------------------------------------------------------------- /src/styles/SearchBox.css: -------------------------------------------------------------------------------- 1 | .searchBox { 2 | background-color: transparent !important; 3 | border: 1px solid grey; 4 | width: 20rem; 5 | height: 2.1rem; 6 | outline: none; 7 | } 8 | 9 | .starLine { 10 | margin-top: 0.5rem; 11 | } 12 | 13 | .starLine2 { 14 | margin-top: 0.7rem; 15 | } 16 | 17 | .fs30 { 18 | font-size: 30px; 19 | } 20 | 21 | .revLine1 { 22 | position: absolute; 23 | top: 88rem; 24 | left: 9rem; 25 | } 26 | 27 | .revSize { 28 | font-size: 3rem; 29 | } 30 | 31 | .starHold2 { 32 | position: absolute; 33 | top: 93rem; 34 | left: 37rem; 35 | } 36 | 37 | 38 | .feelHold { 39 | top: -52rem; 40 | left: 35rem; 41 | } 42 | 43 | .feelImg { 44 | width: 24rem; 45 | } 46 | 47 | .filterRevHold { 48 | top: -46rem; 49 | left: 11rem; 50 | } 51 | 52 | /* here height can be used be as gap */ 53 | .searchList { 54 | top: -32rem; 55 | left: 11.5rem; 56 | 57 | width: 70rem; 58 | height: 12rem; 59 | display: flex; 60 | flex-direction: column; 61 | flex-wrap: wrap; 62 | width: 80rem; 63 | 64 | } 65 | 66 | .w50rem{ 67 | width: 50rem; 68 | } 69 | 70 | .firstLetterHold { 71 | background-color: #83b6ddc9; 72 | width: 35px; 73 | height: 35px; 74 | left: -3.7rem; 75 | top: -6.9rem; 76 | 77 | } 78 | 79 | 80 | 81 | .keyWord { 82 | padding: 8px 9px 8px 11px; 83 | background-color: rgba(48, 133, 199, 0.07); 84 | cursor: pointer; 85 | } 86 | 87 | .w40rem { 88 | width: 40rem; 89 | /* position: relative; */ 90 | top: 117rem; 91 | left: 11rem; 92 | position: absolute; 93 | 94 | } 95 | 96 | 97 | .popularKeyWordsText { 98 | top: 111.3rem; 99 | left: 32rem; 100 | margin-bottom: 0rem; 101 | } -------------------------------------------------------------------------------- /src/styles/SinglePage.css: -------------------------------------------------------------------------------- 1 | .bgGrey { 2 | background-color: #f8f9fc; 3 | } 4 | 5 | .sinLih { 6 | line-height: 3rem; 7 | position: relative; 8 | left: 1rem; 9 | width: 100vw; 10 | top: -8.9rem; 11 | text-align: center; 12 | } 13 | 14 | 15 | .singlePageMainPic { 16 | width: 32rem; 17 | height: 35rem; 18 | } 19 | 20 | .singlePageMainPicHold { 21 | left: 30rem; 22 | top: -4rem; 23 | } 24 | 25 | .sideImageHold { 26 | position: relative; 27 | top: -39rem; 28 | left: 12.5rem; 29 | } 30 | 31 | .bottomImgHold { 32 | top: -37.5rem; 33 | left: 12.5rem; 34 | gap: 1rem; 35 | } 36 | 37 | .sp { 38 | position: relative; 39 | left: 7rem; 40 | } 41 | 42 | .namePriceSP { 43 | top: -92rem; 44 | left: 69rem; 45 | display: flex; 46 | 47 | } 48 | 49 | .singleLinetop { 50 | top: -92rem; 51 | left: 64rem; 52 | } 53 | 54 | .starHold { 55 | top: -90rem; 56 | left: 71rem; 57 | } 58 | 59 | .l1rem { 60 | line-height: 1rem; 61 | } 62 | 63 | .loyalty { 64 | left: 66rem; 65 | top: -89rem; 66 | letter-spacing: 2px; 67 | font-weight: 600; 68 | } 69 | 70 | .spBtnHold { 71 | top: -84.5rem; 72 | left: 70rem; 73 | } 74 | 75 | .spAddTOCart { 76 | background-color: black; 77 | width: 14rem; 78 | color: white; 79 | height: 3rem; 80 | transition: all 400ms ease; 81 | } 82 | 83 | .spAddTOCart:hover { 84 | transform: scale(1.08); 85 | } 86 | 87 | .chakra-accordion { 88 | width: 30vw; 89 | position: relative; 90 | top: -80rem; 91 | left: 64rem; 92 | display: flex; 93 | flex-direction: column; 94 | gap: 1rem; 95 | } 96 | 97 | .singleMainParentSlider { 98 | position: relative; 99 | top: -65rem; 100 | box-shadow: 0px !important; 101 | 102 | } 103 | 104 | .singleMainParentSlider2 { 105 | position: absolute !important; 106 | } 107 | 108 | .sec { 109 | top: -70rem !important; 110 | } 111 | 112 | 113 | 114 | 115 | .jsParent { 116 | position: absolute; 117 | top: 191rem; 118 | } 119 | 120 | 121 | 122 | .spText { 123 | top: 66rem; 124 | left: 35rem; 125 | } 126 | 127 | .footerFeatures2 { 128 | gap: 15rem; 129 | top: 233rem; 130 | left: 15rem; 131 | } 132 | 133 | .footerFeatures2TextHold { 134 | gap: 10.5rem; 135 | top: 235rem; 136 | left: 20rem; 137 | white-space: nowrap; 138 | } 139 | 140 | 141 | .spfooterHold { 142 | top: 243rem; 143 | width: 100vw; 144 | } 145 | 146 | .fotBg { 147 | background-color: #173f35; 148 | color: white; 149 | border-top: none; 150 | } 151 | 152 | 153 | .cartPageFooter { 154 | top: 380rem !important; 155 | } 156 | 157 | 158 | .css-8zqf8h{ 159 | justify-content: center; 160 | align-items: center; 161 | margin-left: auto; 162 | margin-right: auto; 163 | width: 14rem !important; 164 | } 165 | 166 | @media(max-width:620px){ 167 | 168 | .followOnInstaMarqueeConatiner{ 169 | top: -33rem; 170 | position: relative; 171 | 172 | } 173 | 174 | .overlay{ 175 | --gradient-color: transparent !important; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /src/styles/Under20.css: -------------------------------------------------------------------------------- 1 | .u20Hold { 2 | position: absolute; 3 | top: 8rem; 4 | background-color: #f4f3f0; 5 | 6 | } 7 | 8 | .u20Pic { 9 | width: 100vw; 10 | height: 50vh; 11 | object-fit: cover; 12 | } 13 | 14 | .w100vw { 15 | width: 100vw; 16 | height: 0.6rem; 17 | 18 | } 19 | 20 | .u20Heading { 21 | font-family: Arapey, Helvetica, Arial, sans-serif; 22 | font-weight: 00; 23 | font-style: italic; 24 | font-size: 5rem; 25 | letter-spacing: -1px; 26 | line-height: 1; 27 | } 28 | 29 | .u20HeadingHold { 30 | top: 5rem; 31 | text-align: center; 32 | justify-content: center; 33 | } 34 | 35 | .u20Desc { 36 | font-size: .9375rem; 37 | letter-spacing: .5px; 38 | line-height: 1.45; 39 | 40 | } 41 | 42 | .u20BreadCrumbHold { 43 | top: 31.5rem; 44 | left: 10rem; 45 | 46 | } 47 | 48 | 49 | 50 | .filterSortHold { 51 | top: 14rem; 52 | position: relative; 53 | left: 8rem; 54 | 55 | } 56 | 57 | /*.filterOptionsHold{ 58 | transition: all 400ms ease-in; 59 | transform: translateY(-11rem); 60 | }*/ 61 | 62 | 63 | .boxSh { 64 | box-shadow: rgb(0 0 0 / 12%) 0px 6px 16px; 65 | background-color: #f4f3f0; 66 | top: 14rem; 67 | width: 12rem; 68 | height: 14rem; 69 | justify-content: center; 70 | left: 8rem; 71 | z-index: 999999; 72 | background: url("../assets/u20bg.png"); 73 | object-fit: cover; 74 | } 75 | 76 | .boxSh2 { 77 | box-shadow: rgb(0 0 0 / 12%) 0px 6px 16px; 78 | background-color: #f4f3f0; 79 | top: 14rem; 80 | background: url("../assets/u20bg.png"); 81 | object-fit: cover; 82 | width: 12rem; 83 | height: 14rem; 84 | justify-content: center; 85 | left: 22rem; 86 | z-index: 999999; 87 | } 88 | 89 | .scale { 90 | transition: all 350ms ease; 91 | } 92 | 93 | .scale:hover { 94 | transform: scale(1.08); 95 | } 96 | 97 | .ggg { 98 | top: 30rem; 99 | } 100 | 101 | .u20prodsHold { 102 | top: 18.4rem; 103 | left: -2.5rem; 104 | flex-wrap: wrap; 105 | width: 100rem; 106 | gap: 6rem; 107 | 108 | } 109 | 110 | .u20img { 111 | width: 22rem; 112 | object-fit: cover; 113 | border-radius: 10px; 114 | } 115 | 116 | .u20Name { 117 | font-family: Avenir, Helvetica, Arial, sans-serif; 118 | font-size: 1.25rem; 119 | font-weight: 800; 120 | 121 | } 122 | 123 | .knmBtn { 124 | background-color: transparent !important; 125 | color: black !important; 126 | font-weight: 400; 127 | font: normal; 128 | border-radius: 0; 129 | width: 17rem; 130 | transition: all 200ms ease-out; 131 | padding-right: 6rem; 132 | } 133 | 134 | 135 | 136 | 137 | .whi { 138 | color: white !important; 139 | padding-left: 5rem !important; 140 | transition: all 400ms ease; 141 | 142 | } 143 | 144 | 145 | 146 | 147 | /*.btnLine::before{ 148 | content: ""; 149 | background-color: #000000; 150 | } 151 | 152 | .btnLine:hover, 153 | .btnLine::after{ 154 | background-color: white !important; 155 | }*/ 156 | 157 | .btnLine { 158 | width: 0.7px !important; 159 | left: -6rem; 160 | top: 0.4rem; 161 | z-index: 9999999; 162 | } 163 | 164 | 165 | 166 | .u20Price { 167 | position: relative; 168 | top: 0.7rem; 169 | left: -4.4rem; 170 | font-size: 18px; 171 | 172 | } 173 | 174 | .whiteColor { 175 | color: white; 176 | } 177 | 178 | 179 | /* Sweep To Bottom */ 180 | .knmBtn { 181 | display: inline-block; 182 | vertical-align: middle; 183 | -webkit-transform: perspective(1px) translateZ(0); 184 | transform: perspective(1px) translateZ(0); 185 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 186 | position: relative; 187 | -webkit-transition-property: color; 188 | transition-property: color; 189 | -webkit-transition-duration: 0.3s; 190 | transition-duration: 0.3s; 191 | } 192 | 193 | .knmBtn:before { 194 | content: ""; 195 | position: absolute; 196 | z-index: -1; 197 | top: 0; 198 | left: 0; 199 | right: 0; 200 | bottom: 0; 201 | background: #000000; 202 | -webkit-transform: scaleY(0); 203 | transform: scaleY(0); 204 | -webkit-transform-origin: 50% 0; 205 | transform-origin: 50% 0; 206 | -webkit-transition-property: transform; 207 | transition-property: transform; 208 | -webkit-transition-duration: 0.3s; 209 | transition-duration: 0.3s; 210 | -webkit-transition-timing-function: ease-out; 211 | transition-timing-function: ease-out; 212 | } 213 | 214 | .knmBtn:hover, 215 | .knmBtn:focus, 216 | .knmBtn:active { 217 | color: white; 218 | } 219 | 220 | .knmBtn:hover:before, 221 | .knmBtn:focus:before, 222 | .knmBtn:active:before { 223 | -webkit-transform: scaleY(1); 224 | transform: scaleY(1); 225 | } 226 | 227 | 228 | 229 | .u20Des { 230 | width: 20rem; 231 | transition: 400ms ease; 232 | position: relative; 233 | justify-content: center; 234 | text-align: center; 235 | display: flex; 236 | opacity: 0; 237 | } 238 | 239 | 240 | .u20Des2 { 241 | transform: translateY(-1rem); 242 | position: relative; 243 | 244 | transition: cubic-bezier(0.075, 0.82, 0.165, 1); 245 | transition: 400ms ease; 246 | opacity: 1; 247 | } 248 | 249 | 250 | .u20Js { 251 | top: 19rem; 252 | } 253 | 254 | 255 | .u20Featyres { 256 | top: 22rem !important; 257 | } 258 | 259 | .u20FeaturesHold { 260 | gap: 17rem; 261 | left: 10rem; 262 | } 263 | 264 | .u20TextFeatureHold { 265 | white-space: nowrap; 266 | left: 16rem; 267 | top: -3.5rem; 268 | gap: 12rem; 269 | 270 | } 271 | 272 | .u20footer { 273 | top: 25rem; 274 | } -------------------------------------------------------------------------------- /src/styles/YouMayAlsoLike.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Govind783/react-e-commerce-/b65530c93db728caa0d6b3450526a96cbcf17253/src/styles/YouMayAlsoLike.css -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{html,js}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [require("daisyui")], 8 | 9 | 10 | daisyui: { 11 | themes: false, 12 | }, 13 | } 14 | --------------------------------------------------------------------------------