├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── assets │ └── images │ │ ├── bestsellingImages │ │ ├── BookSelf.png │ │ ├── Cooler.png │ │ ├── bag.png │ │ └── coat.png │ │ ├── flashsalesImages │ │ ├── Chair.png │ │ ├── Gamepad.png │ │ ├── Keyboard.png │ │ └── Monitor.png │ │ ├── newarrivalImages │ │ ├── Perfume.png │ │ ├── PlayStation.png │ │ ├── Speakers.png │ │ └── Womens-Collections.png │ │ ├── ourproductsImages │ │ ├── Car.png │ │ ├── Dog-Food.png │ │ ├── Gamepad.png │ │ ├── Jacket.png │ │ ├── Product-Set.png │ │ ├── Soccer-Cleats.png │ │ ├── camera.png │ │ └── laptop.png │ │ ├── ourstoryImages │ │ ├── ourstory.png │ │ ├── person1.png │ │ ├── person2.png │ │ └── person3.png │ │ └── swiperImages │ │ └── Frame560.png └── screenshots │ ├── Screenshot1.png │ ├── Screenshot2.png │ └── Screenshot3.png ├── src ├── App.css ├── App.jsx ├── components │ ├── About │ │ ├── ManagerBox.jsx │ │ └── StatisticItem.jsx │ ├── Footer.jsx │ ├── Header │ │ ├── Header.jsx │ │ ├── MobileMenu.jsx │ │ └── NavLinks.jsx │ ├── Home │ │ ├── CategoryItem.jsx │ │ ├── FlashSalesSlider.jsx │ │ ├── HomeMenu.jsx │ │ ├── HomeSlider │ │ │ ├── HomeSlider.css │ │ │ └── HomeSlider.jsx │ │ ├── NewArrivalBox.jsx │ │ ├── ProductBox.jsx │ │ └── SectionHeader.jsx │ ├── Logo.jsx │ ├── OurServices │ │ ├── OurServices.jsx │ │ └── OurServicesItem.jsx │ ├── SiteBtn.jsx │ └── ToggleThemeBtn.jsx ├── index.css ├── main.jsx ├── pages │ ├── About.jsx │ ├── Contact.jsx │ ├── Home.jsx │ └── Page404.jsx └── routes.jsx ├── tailwind.config.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # E-Commerce React App 2 | 3 | [DEMO](https://ecommerce-template-omega.vercel.app/) 4 | 5 | ## Description 6 | 7 | A single-page application (SPA) for an e-commerce website, developed using React, React Router, and Tailwind CSS. The app provides a seamless shopping experience with features like responsive design and dark mode. 8 | 9 | ## Features 10 | 11 | - **Home Page**: Includes a slider, flash sales, and product categories. 12 | - **Responsive Design**: Fully responsive layout with dark mode support. 13 | - **SPA Architecture**: Smooth navigation using React Router. 14 | - **Custom Icons**: Integrated with React Icons for consistent and scalable iconography. 15 | 16 | ## Technologies Used 17 | 18 | - **React**: For building user interfaces. 19 | - **React Router**: For client-side routing. 20 | - **Tailwind CSS**: For responsive styling. 21 | - **Vite**: Used instead of CRA for faster project setup and build times. 22 | - **React Icons**: For incorporating scalable icons. 23 | 24 | ## Installation 25 | 26 | ### Prerequisites 27 | 28 | - Node.js (v14.x or higher) 29 | - npm or yarn 30 | 31 | ### Setup 32 | 33 | 1. Clone the repository: 34 | ```bash 35 | git clone https://github.com/parsa-sbg/Ecommerce-template.git 36 | 37 | 2. install dependencies: 38 | ```bash 39 | npm install 40 | or 41 | yarn install 42 | 43 | 3. run the development server: 44 | ```bash 45 | npm run dev 46 | or 47 | yarn run dev 48 | ## screenshots : 49 | 50 |
51 | 52 | 53 | 54 |
55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { 9 | files: ['**/*.{js,jsx}'], 10 | ignores: ['dist'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ecommerce template 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecommerce-template", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "prop-types": "^15.8.1", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-icons": "^5.2.1", 17 | "react-router-dom": "^6.26.0", 18 | "swiper": "^11.1.9" 19 | }, 20 | "devDependencies": { 21 | "@eslint/js": "^9.8.0", 22 | "@types/react": "^18.3.3", 23 | "@types/react-dom": "^18.3.0", 24 | "@vitejs/plugin-react": "^4.3.1", 25 | "autoprefixer": "^10.4.20", 26 | "daisyui": "^4.12.10", 27 | "eslint": "^9.8.0", 28 | "eslint-plugin-react": "^7.35.0", 29 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 30 | "eslint-plugin-react-refresh": "^0.4.9", 31 | "globals": "^15.9.0", 32 | "postcss": "^8.4.41", 33 | "tailwindcss": "^3.4.9", 34 | "vite": "^5.4.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/assets/images/bestsellingImages/BookSelf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/bestsellingImages/BookSelf.png -------------------------------------------------------------------------------- /public/assets/images/bestsellingImages/Cooler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/bestsellingImages/Cooler.png -------------------------------------------------------------------------------- /public/assets/images/bestsellingImages/bag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/bestsellingImages/bag.png -------------------------------------------------------------------------------- /public/assets/images/bestsellingImages/coat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/bestsellingImages/coat.png -------------------------------------------------------------------------------- /public/assets/images/flashsalesImages/Chair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/flashsalesImages/Chair.png -------------------------------------------------------------------------------- /public/assets/images/flashsalesImages/Gamepad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/flashsalesImages/Gamepad.png -------------------------------------------------------------------------------- /public/assets/images/flashsalesImages/Keyboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/flashsalesImages/Keyboard.png -------------------------------------------------------------------------------- /public/assets/images/flashsalesImages/Monitor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/flashsalesImages/Monitor.png -------------------------------------------------------------------------------- /public/assets/images/newarrivalImages/Perfume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/newarrivalImages/Perfume.png -------------------------------------------------------------------------------- /public/assets/images/newarrivalImages/PlayStation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/newarrivalImages/PlayStation.png -------------------------------------------------------------------------------- /public/assets/images/newarrivalImages/Speakers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/newarrivalImages/Speakers.png -------------------------------------------------------------------------------- /public/assets/images/newarrivalImages/Womens-Collections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/newarrivalImages/Womens-Collections.png -------------------------------------------------------------------------------- /public/assets/images/ourproductsImages/Car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourproductsImages/Car.png -------------------------------------------------------------------------------- /public/assets/images/ourproductsImages/Dog-Food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourproductsImages/Dog-Food.png -------------------------------------------------------------------------------- /public/assets/images/ourproductsImages/Gamepad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourproductsImages/Gamepad.png -------------------------------------------------------------------------------- /public/assets/images/ourproductsImages/Jacket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourproductsImages/Jacket.png -------------------------------------------------------------------------------- /public/assets/images/ourproductsImages/Product-Set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourproductsImages/Product-Set.png -------------------------------------------------------------------------------- /public/assets/images/ourproductsImages/Soccer-Cleats.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourproductsImages/Soccer-Cleats.png -------------------------------------------------------------------------------- /public/assets/images/ourproductsImages/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourproductsImages/camera.png -------------------------------------------------------------------------------- /public/assets/images/ourproductsImages/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourproductsImages/laptop.png -------------------------------------------------------------------------------- /public/assets/images/ourstoryImages/ourstory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourstoryImages/ourstory.png -------------------------------------------------------------------------------- /public/assets/images/ourstoryImages/person1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourstoryImages/person1.png -------------------------------------------------------------------------------- /public/assets/images/ourstoryImages/person2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourstoryImages/person2.png -------------------------------------------------------------------------------- /public/assets/images/ourstoryImages/person3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/ourstoryImages/person3.png -------------------------------------------------------------------------------- /public/assets/images/swiperImages/Frame560.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/assets/images/swiperImages/Frame560.png -------------------------------------------------------------------------------- /public/screenshots/Screenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/screenshots/Screenshot1.png -------------------------------------------------------------------------------- /public/screenshots/Screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/screenshots/Screenshot2.png -------------------------------------------------------------------------------- /public/screenshots/Screenshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/public/screenshots/Screenshot3.png -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parsa-sbg/Ecommerce-template/bfbde6f478a331889a2fa29c35f44b797ada122a/src/App.css -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import Header from './components/Header/Header' 3 | import Routes from './routes' 4 | import Footer from './components/Footer' 5 | import { useEffect, useState } from 'react' 6 | import ToggleThemeBtn from './components/ToggleThemeBtn' 7 | 8 | 9 | function App() { 10 | 11 | const [isDark, setIsDark] = useState(true) 12 | 13 | useEffect(() => { 14 | const theme = JSON.parse(localStorage.getItem('theme')) 15 | setIsDark(theme) 16 | }, []) 17 | 18 | useEffect(() => { 19 | localStorage.setItem('theme', isDark) 20 | }, [isDark]) 21 | 22 | 23 | // [#1d232a] 24 | return ( 25 | 26 |
27 |
28 |
29 | 30 |
31 |
34 | 35 | ) 36 | } 37 | 38 | export default App 39 | -------------------------------------------------------------------------------- /src/components/About/ManagerBox.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | import { LuTwitter } from "react-icons/lu"; 3 | import { FaInstagram } from "react-icons/fa"; 4 | import { FaLinkedin } from "react-icons/fa6"; 5 | 6 | 7 | 8 | 9 | export default function ManagerBox({ imageUrl, name, jobPosition }) { 10 | return ( 11 |
12 |
13 | 14 |
15 |
{name}
16 | {jobPosition} 17 |
18 | 19 | 20 | 21 |
22 |
23 | ) 24 | } 25 | 26 | ManagerBox.propTypes = { 27 | imageUrl: propTypes.string, 28 | name: propTypes.string, 29 | jobPosition: propTypes.string 30 | } 31 | -------------------------------------------------------------------------------- /src/components/About/StatisticItem.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | 3 | 4 | export default function StatisticItem({ Icon, number, desc }) { 5 | return ( 6 |
7 | {} 8 | {number}k 9 | {desc} 10 |
11 | ) 12 | } 13 | 14 | StatisticItem.propTypes = { 15 | Icon: propTypes.func, 16 | number: propTypes.number, 17 | desc: propTypes.string 18 | } -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { FaTelegram } from "react-icons/fa"; 2 | import { FaInstagram } from "react-icons/fa"; 3 | import { FaLinkedin } from "react-icons/fa6"; 4 | import { Link } from "react-router-dom"; 5 | 6 | 7 | 8 | 9 | export default function Footer() { 10 | return ( 11 | ) 43 | } 44 | -------------------------------------------------------------------------------- /src/components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import Logo from '../Logo' 2 | import NavLinks from './NavLinks' 3 | import { FaSearch } from "react-icons/fa"; 4 | import { FaRegHeart } from "react-icons/fa"; 5 | import { AiOutlineShoppingCart } from "react-icons/ai"; 6 | import { useCallback, useState } from 'react'; 7 | import MobileMenu from './MobileMenu'; 8 | 9 | 10 | 11 | 12 | export default function Header() { 13 | 14 | const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) 15 | 16 | 17 | const toggleMenu = useCallback(() => { 18 | setIsMobileMenuOpen((prevState) => !prevState) 19 | }, []) 20 | 21 | return ( 22 | 23 | 24 |
25 | 26 |
27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 | 35 |
36 | 37 | 38 |
39 | 40 | 41 | 42 |
43 |
46 |
47 |
48 | 49 |
50 | 51 | 52 | 53 |
54 | 55 |
56 | 57 | 58 |
59 | 60 | ) 61 | } 62 | -------------------------------------------------------------------------------- /src/components/Header/MobileMenu.jsx: -------------------------------------------------------------------------------- 1 | import NavLinks from "./NavLinks" 2 | import { FaRegHeart } from "react-icons/fa" 3 | import propTypes from 'prop-types' 4 | import HomeMenu from "../Home/HomeMenu" 5 | 6 | export default function MobileMenu({ isOpen, toggleMenu }) { 7 | return ( 8 | 9 |
10 | 11 |
12 |
13 |

categories :

14 | 15 |
16 |
17 |

pages :

18 | 19 | fovrates 20 | 21 |
22 |
23 |
24 | 25 | ) 26 | } 27 | 28 | MobileMenu.propTypes = { 29 | isOpen: propTypes.bool, 30 | toggleMenu: propTypes.func 31 | } 32 | 33 | -------------------------------------------------------------------------------- /src/components/Header/NavLinks.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | import { memo } from 'react' 3 | import { Link } from 'react-router-dom' 4 | 5 | 6 | const NavLinks = memo(({ className, toggleMenu }) => { 7 | 8 | return ( 9 | 17 | ) 18 | }) 19 | 20 | NavLinks.displayName = 'NavLinks' 21 | 22 | NavLinks.propTypes = { 23 | className: propTypes.string, 24 | toggleMenu: propTypes.func 25 | } 26 | 27 | export default NavLinks -------------------------------------------------------------------------------- /src/components/Home/CategoryItem.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | 3 | export default function CategoryItem({Svg, name}) { 4 | 5 | return ( 6 |
7 | 8 | {name} 9 |
10 | ) 11 | } 12 | 13 | CategoryItem.propTypes = { 14 | Svg: propTypes.func, 15 | name: propTypes.string 16 | } -------------------------------------------------------------------------------- /src/components/Home/FlashSalesSlider.jsx: -------------------------------------------------------------------------------- 1 | import { Swiper, SwiperSlide} from "swiper/react" 2 | import { Autoplay } from "swiper/modules" 3 | import ProductBox from "./ProductBox" 4 | 5 | 6 | 7 | export default function FlashSalesSlider() { 8 | return ( 9 |
10 | 28 |
29 |
30 |
31 |
32 |
33 | 34 | 35 | 36 |
37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /src/components/Home/HomeMenu.jsx: -------------------------------------------------------------------------------- 1 | import { memo, useState } from "react"; 2 | import { FaAngleRight } from "react-icons/fa6"; 3 | 4 | 5 | export default memo(function HomeMenu() { 6 | 7 | const [openMenuIds, setOpenMenuIds] = useState([]) 8 | 9 | const allMenus = [ 10 | { 11 | id: 1, 12 | name: 'Woman’s Fashion', 13 | subMenus: [ 14 | { 15 | id: 10, 16 | name: 'sub menu 1', 17 | }, 18 | 19 | { 20 | id: 11, 21 | name: 'sub menu 2', 22 | subSubMenus: [ 23 | { 24 | id: 10020, 25 | name: 'sub sub menu 1' 26 | } 27 | ] 28 | }, 29 | { 30 | id: 30, 31 | name: 'sub menu 3', 32 | } 33 | ] 34 | }, 35 | { 36 | id: 2, 37 | name: 'Men’s Fashion', 38 | subMenus: [ 39 | { 40 | id: 13, 41 | name: 'subMenu 4', 42 | subSubMenus: [ 43 | { 44 | id: 100, 45 | name: 'sub sub menu 2' 46 | } 47 | ] 48 | } 49 | ] 50 | }, 51 | { 52 | id: 1000, 53 | name: 'Electronics' 54 | }, 55 | { 56 | id: 1001, 57 | name: 'Home & Lifestyle' 58 | }, 59 | { 60 | id: 1002, 61 | name: 'Medicine' 62 | }, 63 | { 64 | id: 1003, 65 | name: 'Sports & Outdoor' 66 | } 67 | ] 68 | 69 | function toggleMenu(menuId) { 70 | setOpenMenuIds(prevState => { 71 | if (prevState.some(id => id == menuId)) { 72 | return prevState.filter(item => item != menuId) 73 | } else { 74 | return [...prevState, menuId] 75 | } 76 | }) 77 | } 78 | 79 | 80 | return ( 81 | 107 | ) 108 | }) -------------------------------------------------------------------------------- /src/components/Home/HomeSlider/HomeSlider.css: -------------------------------------------------------------------------------- 1 | .swiper-pagination-bullet{ 2 | background-color: #F5F5F5 !important; 3 | border: 2px solid #F5F5F5; 4 | } 5 | 6 | .swiper-pagination-bullet-active{ 7 | background-color: red !important; 8 | } -------------------------------------------------------------------------------- /src/components/Home/HomeSlider/HomeSlider.jsx: -------------------------------------------------------------------------------- 1 | import { Pagination, Scrollbar, A11y } from 'swiper/modules'; 2 | import './HomeSlider.css' 3 | import { Swiper, SwiperSlide } from 'swiper/react'; 4 | 5 | 6 | import 'swiper/css'; 7 | import 'swiper/css/pagination'; 8 | import 'swiper/css/scrollbar'; 9 | 10 | 11 | export default function HomeSlider() { 12 | return ( 13 |
14 | 19 | 20 | 21 | 22 | 23 |
24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /src/components/Home/NewArrivalBox.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | 3 | 4 | export default function NewArrivalBox({ title, desc, imageUrl, imageRight }) { 5 | 6 | return ( 7 |
8 | 9 |
10 |

{title}

11 |

{desc}

12 | 13 |
14 |
15 | ) 16 | } 17 | 18 | 19 | NewArrivalBox.propTypes = { 20 | title: propTypes.string, 21 | desc: propTypes.string, 22 | imageUrl: propTypes.string, 23 | imageRight: propTypes.bool 24 | } -------------------------------------------------------------------------------- /src/components/Home/ProductBox.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | import { FaStar } from "react-icons/fa"; 3 | import { CiHeart } from "react-icons/ci"; 4 | import { IoEyeOutline } from "react-icons/io5"; 5 | 6 | 7 | 8 | 9 | export default function ProductBox({ imageUrl, title, price, priceBeforeOff, offPercent, isNew}) { 10 | return ( 11 |
12 | 13 |
14 | product image 15 | 16 |
17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 | {offPercent && 25 | -{offPercent}% 26 | } 27 | 28 | {isNew && 29 | new 30 | } 31 | 32 | 33 |
34 | 35 |
36 |

{title}

37 |
38 | ${price} 39 | {priceBeforeOff && ${priceBeforeOff}} 40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 |
48 |
49 |
50 | ) 51 | } 52 | 53 | ProductBox.propTypes = { 54 | imageUrl: propTypes.string, 55 | title: propTypes.string, 56 | price: propTypes.number, 57 | priceBeforeOff: propTypes.number, 58 | offPercent: propTypes.number, 59 | isNew: propTypes.bool 60 | 61 | } -------------------------------------------------------------------------------- /src/components/Home/SectionHeader.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | import SiteBtn from '../SiteBtn' 3 | 4 | 5 | export default function SectionHeader({ flagName, title, isNeedViewAllBtn }) { 6 | return ( 7 |
8 | 9 | {flagName} 10 | 11 |
12 |

{title}

13 | {isNeedViewAllBtn &&
} 14 |
15 |
16 | ) 17 | } 18 | 19 | SectionHeader.propTypes = { 20 | flagName: propTypes.string, 21 | title: propTypes.string, 22 | isNeedTimer: propTypes.bool, 23 | isNeedViewAllBtn: propTypes.bool 24 | } 25 | -------------------------------------------------------------------------------- /src/components/Logo.jsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react" 2 | import { Link } from "react-router-dom" 3 | 4 | export default memo(function Logo() { 5 | return ( 6 | Exclusive 7 | ) 8 | }) 9 | -------------------------------------------------------------------------------- /src/components/OurServices/OurServices.jsx: -------------------------------------------------------------------------------- 1 | import OurServicesItem from "./OurServicesItem" 2 | import { TbTruckDelivery } from "react-icons/tb"; 3 | import { TfiHeadphoneAlt } from "react-icons/tfi"; 4 | import { RiShieldCheckLine } from "react-icons/ri"; 5 | 6 | 7 | 8 | 9 | 10 | export default function OurServices() { 11 | return ( 12 |
13 | 14 | 15 | 16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/components/OurServices/OurServicesItem.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | 3 | 4 | export default function OurServicesItem({ Icon, title, desc }) { 5 | return ( 6 |
7 | 8 | {} 9 |
{title}
10 |

{desc}

11 | 12 |
13 | ) 14 | } 15 | 16 | OurServicesItem.propTypes = { 17 | Icon: propTypes.func, 18 | title: propTypes.string, 19 | desc: propTypes.string 20 | } 21 | -------------------------------------------------------------------------------- /src/components/SiteBtn.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | 3 | export default function SiteBtn({text, noMargin}) { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | SiteBtn.propTypes = { 10 | text: propTypes.string, 11 | noMargin: propTypes.bool 12 | } -------------------------------------------------------------------------------- /src/components/ToggleThemeBtn.jsx: -------------------------------------------------------------------------------- 1 | import propTypes from 'prop-types' 2 | import { IoMdMoon } from "react-icons/io"; 3 | import { IoMdSunny } from "react-icons/io"; 4 | 5 | 6 | 7 | export default function ToggleThemeBtn({ isDark, setIsDark }) { 8 | 9 | 10 | const changeTheme = () => { 11 | setIsDark(prev => !prev) 12 | } 13 | 14 | return ( 15 |
17 | {isDark ? : } 18 |
19 | ) 20 | } 21 | 22 | ToggleThemeBtn.propTypes = { 23 | isDark: propTypes.bool, 24 | setIsDark: propTypes.func 25 | } 26 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | * { 7 | @apply select-none 8 | } 9 | } -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | import { BrowserRouter } from 'react-router-dom' 6 | 7 | createRoot(document.getElementById('root')).render( 8 | 9 | {/* */} 10 | 11 | {/* */} 12 | 13 | ) 14 | -------------------------------------------------------------------------------- /src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | import StatisticItem from "../components/About/StatisticItem" 2 | import { CiShop } from "react-icons/ci"; 3 | import { PiCurrencyCircleDollarLight } from "react-icons/pi"; 4 | import { IoGiftSharp } from "react-icons/io5"; 5 | import { FaSackDollar } from "react-icons/fa6"; 6 | import ManagerBox from "../components/About/ManagerBox"; 7 | import OurServices from '../components/OurServices/OurServices' 8 | 9 | 10 | export default function About() { 11 | return ( 12 |
13 | 14 | 15 | {/* our story section */} 16 |
17 |
18 |

Our Story

19 |

Launced in 2015, Exclusive is South Asia’s premier online shopping makterplace with an active presense in Bangladesh. Supported by wide range of tailored marketing, data and service solutions, Exclusive has 10,500 sallers and 300 brands and serves 3 millioons customers across the region.

20 |

Exclusive has more than 1 Million products to offer, growing at a very fast. Exclusive offers a diverse assotment in categories ranging from consumer.

21 |
22 |
23 | 24 |
25 |
26 | 27 | 28 | {/* statistics */} 29 |
30 |
31 |
32 |
33 |
34 | 35 |
36 | 37 | 38 | {/* managers */} 39 |
40 |
41 |
42 |
43 |
44 |
45 | 46 | 47 | {/* services */} 48 |
49 | 50 |
51 | 52 |
53 | ) 54 | } 55 | -------------------------------------------------------------------------------- /src/pages/Contact.jsx: -------------------------------------------------------------------------------- 1 | import { PiPhone } from "react-icons/pi"; 2 | import { MdOutlineMail } from "react-icons/md"; 3 | import SiteBtn from '../components/SiteBtn' 4 | 5 | 6 | 7 | export default function Contact() { 8 | return ( 9 |
10 | 11 |
12 |
13 |
14 | 15 | Call To Us 16 |
17 |

We are available 24/7, 7 days a week.

18 |

Phone: +8801611112222

19 |
20 |
21 |
22 | 23 | Write To US 24 |
25 |

Fill out our form and we will contact you within 24 hours.

26 |

Emails: customer@exclusive.com

27 |

Emails: support@exclusive.com

28 |
29 |
30 | 31 |
{e.preventDefault()}}> 32 |
33 | 34 | 35 | 36 |
37 | 38 | 39 | 40 |
41 | 42 |
43 |
44 | 45 |
46 | ) 47 | } 48 | -------------------------------------------------------------------------------- /src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import HomeMenu from "../components/Home/HomeMenu" 2 | import HomeSlider from "../components/Home/HomeSlider/HomeSlider" 3 | import SectionHeader from "../components/Home/SectionHeader" 4 | import FlashSalesSlider from "../components/Home/FlashSalesSlider" 5 | import SiteBtn from "../components/SiteBtn" 6 | 7 | import CategoryItem from "../components/Home/CategoryItem" 8 | import { CiMobile4 } from "react-icons/ci"; 9 | import { HiOutlineComputerDesktop } from "react-icons/hi2"; 10 | import { BsSmartwatch } from "react-icons/bs"; 11 | import { CiCamera } from "react-icons/ci"; 12 | import { CiHeadphones } from "react-icons/ci"; 13 | import { LuGamepad } from "react-icons/lu"; 14 | 15 | import ProductBox from "../components/Home/ProductBox" 16 | import NewArrivalBox from "../components/Home/NewArrivalBox" 17 | import OurServices from "../components/OurServices/OurServices" 18 | 19 | 20 | export default function Home() { 21 | return ( 22 |
23 | 24 | 25 | {/* home section */} 26 |
27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 | 39 | {/* flash sales */} 40 |
41 | 42 | 43 | 44 |
45 | 46 |
47 |
48 | 49 | 50 | {/* Categories */} 51 |
52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | {/* best selling */} 65 |
66 | 67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | 75 | 76 | {/* Our Products */} 77 |
78 | 79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | 91 |
92 |
93 | 94 | 95 | {/* New Arrival */} 96 |
97 | 98 | 99 |
100 | 101 |
102 | 103 |
104 | 105 |
106 |
107 | 108 |
109 | 110 |
111 | 112 |
113 |
114 | 115 |
116 |
117 | 118 |
119 | 120 |
121 | 122 | {/* our services */} 123 |
124 | 125 |
126 | 127 |
128 | ) 129 | } 130 | -------------------------------------------------------------------------------- /src/pages/Page404.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from 'react-router-dom' 2 | import SiteBtn from '../components/SiteBtn' 3 | 4 | 5 | export default function Page404() { 6 | return ( 7 |
8 |

404 Not Found

9 | Your visited page not found. You may go home page. 10 | 11 | 12 | 13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/routes.jsx: -------------------------------------------------------------------------------- 1 | import { useRoutes } from "react-router-dom" 2 | import Home from "./pages/Home" 3 | import Page404 from "./pages/Page404" 4 | import About from "./pages/About" 5 | import Contact from "./pages/Contact" 6 | 7 | export default function Routes() { 8 | const routes = useRoutes([ 9 | { 10 | path: '/', 11 | element: , 12 | }, 13 | { 14 | path: '/about', 15 | element: 16 | }, 17 | { 18 | path: '/contact', 19 | element: 20 | }, 21 | { 22 | path: '*', 23 | element: 24 | } 25 | ]) 26 | 27 | return routes 28 | } -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | import daisyui from "daisyui" 3 | 4 | export default { 5 | content: [ 6 | "./index.html", 7 | "./src/**/*.{js,ts,jsx,tsx}", 8 | ], 9 | darkMode: 'selector', 10 | theme: { 11 | extend: {}, 12 | container: { 13 | center: true, 14 | padding: { 15 | DEFAULT: '0.5rem', 16 | 'lg': '2rem', 17 | 'xl': '5rem' 18 | } 19 | 20 | }, 21 | }, 22 | plugins: [daisyui,], 23 | } 24 | 25 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | --------------------------------------------------------------------------------