├── src ├── App.css ├── index.css ├── Layout │ └── LayoutOne.jsx ├── main.jsx ├── Home │ ├── Home.jsx │ └── Components │ │ ├── Brand.jsx │ │ ├── Banner.jsx │ │ ├── Product.jsx │ │ └── Navbar.jsx ├── App.jsx └── assets │ └── react.svg ├── public ├── images │ ├── hopin.png │ ├── logo.png │ ├── banner.png │ ├── feedly.png │ ├── lattice.png │ ├── spotify.png │ └── upwork.png └── vite.svg ├── postcss.config.js ├── vite.config.js ├── .gitignore ├── README.md ├── tailwind.config.js ├── index.html ├── package.json └── eslint.config.js /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /public/images/hopin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/E_Commerce-Website/HEAD/public/images/hopin.png -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/E_Commerce-Website/HEAD/public/images/logo.png -------------------------------------------------------------------------------- /public/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/E_Commerce-Website/HEAD/public/images/banner.png -------------------------------------------------------------------------------- /public/images/feedly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/E_Commerce-Website/HEAD/public/images/feedly.png -------------------------------------------------------------------------------- /public/images/lattice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/E_Commerce-Website/HEAD/public/images/lattice.png -------------------------------------------------------------------------------- /public/images/spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/E_Commerce-Website/HEAD/public/images/spotify.png -------------------------------------------------------------------------------- /public/images/upwork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/E_Commerce-Website/HEAD/public/images/upwork.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/Layout/LayoutOne.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Outlet } from 'react-router-dom' 3 | 4 | const LayoutOne = () => { 5 | return ( 6 | <> 7 | 8 | 9 | ) 10 | } 11 | 12 | export default LayoutOne -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/Home/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from './Components/Navbar' 3 | import Banner from './Components/Banner' 4 | import Brand from './Components/Brand' 5 | import Product from './Components/Product' 6 | 7 | const Home = () => { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default Home -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Route, Routes } from 'react-router-dom' 2 | import './App.css' 3 | import LayoutOne from './Layout/LayoutOne' 4 | import Home from './Home/Home' 5 | 6 | function App() { 7 | 8 | return ( 9 | <> 10 | 11 | 12 | } /> 13 | }/> 14 | 15 | 16 | 17 | ) 18 | } 19 | 20 | export default App 21 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], 4 | theme: { 5 | extend: { 6 | container: { 7 | center: true, 8 | }, 9 | fontFamily: { 10 | jakarta: ['Plus Jakarta Sans', 'serif'], 11 | }, 12 | colors: { 13 | 'black': '#000000', 14 | 'secondary': '#7E7E7E', 15 | 'primary': '#2EBB77', 16 | }, 17 | }, 18 | }, 19 | plugins: [], 20 | } 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | E commerce 8 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "e-commerce-website", 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 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-icons": "^5.4.0", 16 | "react-router-dom": "^7.1.2" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.17.0", 20 | "@types/react": "^18.3.18", 21 | "@types/react-dom": "^18.3.5", 22 | "@vitejs/plugin-react": "^4.3.4", 23 | "autoprefixer": "^10.4.20", 24 | "eslint": "^9.17.0", 25 | "eslint-plugin-react": "^7.37.2", 26 | "eslint-plugin-react-hooks": "^5.0.0", 27 | "eslint-plugin-react-refresh": "^0.4.16", 28 | "globals": "^15.14.0", 29 | "postcss": "^8.5.1", 30 | "tailwindcss": "^3.4.17", 31 | "vite": "^6.0.5" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /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 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 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 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Home/Components/Brand.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Brand = () => { 4 | return ( 5 | <> 6 |
7 |
8 |

9 | “We've got custom T-shirts in a range of fits and sizes, so everyone can wear your brand or message.” 10 |

11 |
12 |
    13 |
  • 14 | spotify 15 |
    • 16 |
  • 17 | spotify 18 |
    • 19 |
  • 20 | spotify 21 |
    • 22 |
  • 23 | spotify 24 |
    • 25 |
26 |
27 |
28 |
29 | 30 | ) 31 | } 32 | 33 | export default Brand -------------------------------------------------------------------------------- /src/Home/Components/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { IoMdArrowForward } from "react-icons/io"; 4 | 5 | 6 | const Banner = () => { 7 | return ( 8 | <> 9 |
10 |
11 |

12 | Make the most of o 13 |
14 | printing 15 |

16 |

17 | What’s more, we do it right! A full administration printing background. Print shirts for yourself or your online business 18 |

19 |
20 | 21 | Shop Now 22 | 23 |
24 |
25 |
26 | banner 27 |
28 |
29 | 30 | ) 31 | } 32 | 33 | export default Banner -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Home/Components/Product.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | 4 | // =========== api part 5 | 6 | const products = [ 7 | { 8 | id: 1, 9 | name: 'Basic Tee', 10 | href: '#', 11 | imageSrc: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-01-related-product-01.jpg', 12 | imageAlt: "Front of men's Basic Tee in black.", 13 | price: '$35', 14 | color: 'Black', 15 | }, 16 | { 17 | id: 1, 18 | name: 'Basic Tee', 19 | href: '#', 20 | imageSrc: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-01-related-product-01.jpg', 21 | imageAlt: "Front of men's Basic Tee in black.", 22 | price: '$35', 23 | color: 'Black', 24 | }, 25 | { 26 | id: 1, 27 | name: 'Basic Tee', 28 | href: '#', 29 | imageSrc: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-01-related-product-01.jpg', 30 | imageAlt: "Front of men's Basic Tee in black.", 31 | price: '$35', 32 | color: 'Black', 33 | }, 34 | { 35 | id: 1, 36 | name: 'Basic Tee', 37 | href: '#', 38 | imageSrc: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-01-related-product-01.jpg', 39 | imageAlt: "Front of men's Basic Tee in black.", 40 | price: '$35', 41 | color: 'Black', 42 | }, 43 | { 44 | id: 1, 45 | name: 'Basic Tee', 46 | href: '#', 47 | imageSrc: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-01-related-product-01.jpg', 48 | imageAlt: "Front of men's Basic Tee in black.", 49 | price: '$35', 50 | color: 'Black', 51 | }, 52 | { 53 | id: 1, 54 | name: 'Basic Tee', 55 | href: '#', 56 | imageSrc: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-01-related-product-01.jpg', 57 | imageAlt: "Front of men's Basic Tee in black.", 58 | price: '$35', 59 | color: 'Black', 60 | }, 61 | { 62 | id: 1, 63 | name: 'Basic Tee', 64 | href: '#', 65 | imageSrc: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-01-related-product-01.jpg', 66 | imageAlt: "Front of men's Basic Tee in black.", 67 | price: '$35', 68 | color: 'Black', 69 | }, 70 | { 71 | id: 1, 72 | name: 'Basic Tee', 73 | href: '#', 74 | imageSrc: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-01-related-product-01.jpg', 75 | imageAlt: "Front of men's Basic Tee in black.", 76 | price: '$35', 77 | color: 'Black', 78 | }, 79 | ] 80 | 81 | const Product = () => { 82 | return ( 83 | <> 84 |
85 |
86 |

Customers also purchased

87 | 88 |
89 | {products.map((product) => ( 90 |
91 | {product.imageAlt} 96 |
97 |
98 |

99 | 100 | 103 |

104 |

{product.color}

105 |
106 |

{product.price}

107 |
108 |
109 | ))} 110 |
111 |
112 |
113 | 114 | ) 115 | } 116 | 117 | export default Product -------------------------------------------------------------------------------- /src/Home/Components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { IoIosArrowDown } from "react-icons/io"; 4 | 5 | 6 | 7 | 8 | const Navbar = () => { 9 | const [state, setState] = useState(false) 10 | const navRef = useRef() 11 | 12 | 13 | 14 | useEffect(() => { 15 | 16 | const body = document.body 17 | 18 | // Disable scrolling 19 | const customBodyStyle = ["overflow-hidden", "lg:overflow-visible"] 20 | if (state) body.classList.add(...customBodyStyle) 21 | // Enable scrolling 22 | else body.classList.remove(...customBodyStyle) 23 | 24 | // Sticky strick 25 | const customStyle = ["sticky-nav", "fixed", "border-b"] 26 | window.onscroll = () => { 27 | if (window.scrollY > 80) navRef.current.classList.add(...customStyle) 28 | else navRef.current.classList.remove(...customStyle) 29 | } 30 | }, [state]) 31 | 32 | return ( 33 | <> 34 | 115 | 116 | ) 117 | } 118 | 119 | export default Navbar --------------------------------------------------------------------------------