├── src ├── App.css ├── common │ └── common_categories │ │ ├── comcategories.css │ │ └── ComCategries.jsx ├── Components │ ├── Homebanner │ │ ├── img │ │ │ └── banner.png │ │ ├── banner.css │ │ └── Banner.jsx │ ├── newArrivals │ │ ├── newarrivals.css │ │ └── NewArrivals.jsx │ ├── brand │ │ └── Brand.jsx │ ├── categories │ │ └── Categories.jsx │ └── Navbar │ │ └── Navbar.jsx ├── layout │ └── LayoutOne.jsx ├── main.jsx ├── index.css ├── Pages │ ├── 404 │ │ └── Error404.jsx │ └── Home │ │ └── Home.jsx ├── App.jsx └── assets │ └── react.svg ├── public ├── images │ ├── hp.png │ ├── msi.png │ ├── acer.png │ ├── asus.png │ ├── dell.png │ ├── icon.svg │ ├── imac.png │ ├── ipad.png │ ├── lenovo.png │ ├── logo.png │ ├── gigabyte.png │ ├── macbook.png │ ├── ultrabook.png │ ├── gaming_laptop.png │ └── business_laptop.png └── vite.svg ├── vite.config.js ├── .gitignore ├── README.md ├── package.json ├── index.html └── eslint.config.js /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/hp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/hp.png -------------------------------------------------------------------------------- /public/images/msi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/msi.png -------------------------------------------------------------------------------- /public/images/acer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/acer.png -------------------------------------------------------------------------------- /public/images/asus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/asus.png -------------------------------------------------------------------------------- /public/images/dell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/dell.png -------------------------------------------------------------------------------- /public/images/icon.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/icon.svg -------------------------------------------------------------------------------- /public/images/imac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/imac.png -------------------------------------------------------------------------------- /public/images/ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/ipad.png -------------------------------------------------------------------------------- /public/images/lenovo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/lenovo.png -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/logo.png -------------------------------------------------------------------------------- /public/images/gigabyte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/gigabyte.png -------------------------------------------------------------------------------- /public/images/macbook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/macbook.png -------------------------------------------------------------------------------- /public/images/ultrabook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/ultrabook.png -------------------------------------------------------------------------------- /src/common/common_categories/comcategories.css: -------------------------------------------------------------------------------- 1 | .comm_cate_card:hover .img{ 2 | transform: scale(1.1); 3 | } -------------------------------------------------------------------------------- /public/images/gaming_laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/gaming_laptop.png -------------------------------------------------------------------------------- /public/images/business_laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/public/images/business_laptop.png -------------------------------------------------------------------------------- /src/Components/Homebanner/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/vertech/HEAD/src/Components/Homebanner/img/banner.png -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from '@tailwindcss/vite' 4 | 5 | 6 | // https://vite.dev/config/ 7 | export default defineConfig({ 8 | plugins: [react(), tailwindcss(),], 9 | }) 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | @plugin "daisyui" { 3 | themes: light --default; 4 | } 5 | 6 | @utility container{ 7 | margin-inline : auto; 8 | padding-inline : 2rem; 9 | } 10 | 11 | @theme { 12 | --font-poppins: "Poppins", serif; 13 | --color-brand : #F28020; 14 | } -------------------------------------------------------------------------------- /.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/Components/newArrivals/newarrivals.css: -------------------------------------------------------------------------------- 1 | #newarrivals { 2 | margin-bottom: 80px; 3 | } 4 | #newarrivals .cart{ 5 | position: absolute; 6 | bottom: -40px; 7 | left: 50%; 8 | transform: translateX(-50%); 9 | visibility: hidden; 10 | opacity: 0; 11 | transition: ease-in-out .4s; 12 | } 13 | #newarrivals .single_card:hover .cart{ 14 | bottom: 10px; 15 | visibility: visible; 16 | opacity: 1; 17 | } -------------------------------------------------------------------------------- /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/Components/Homebanner/banner.css: -------------------------------------------------------------------------------- 1 | #banner{ 2 | background-image: url(./img/banner.png); 3 | background-position: center; 4 | background-repeat: no-repeat; 5 | background-size: cover; 6 | padding: 200px 0px 150px 100px; 7 | } 8 | 9 | @media only screen and (min-width: 200px) and (max-width: 575.98px) { 10 | #banner{ 11 | padding: 150px 0 120px 20px; 12 | } 13 | #banner p{ 14 | font-size: 14px; 15 | } 16 | #banner h1{ 17 | font-size: 32px; 18 | line-height: 40px; 19 | } 20 | } -------------------------------------------------------------------------------- /src/Pages/Home/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from '../../Components/Navbar/Navbar' 3 | import Banner from '../../Components/Homebanner/Banner' 4 | import Brand from '../../Components/brand/Brand' 5 | import Categories from '../../Components/categories/Categories' 6 | import NewArrivals from '../../Components/newArrivals/NewArrivals' 7 | 8 | const Home = () => { 9 | return ( 10 | <> 11 | 12 | 13 | 14 | 15 | 16 | 17 | ) 18 | } 19 | 20 | export default Home -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter, Route, Routes } from 'react-router-dom' 3 | import LayoutOne from './layout/LayoutOne' 4 | import Home from './Pages/Home/Home' 5 | import Error404 from './Pages/404/Error404' 6 | 7 | const App = () => { 8 | return ( 9 | <> 10 | 11 | 12 | }/> 13 | }/> 14 | }/> 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | export default App -------------------------------------------------------------------------------- /src/common/common_categories/ComCategries.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './comcategories.css' 3 | import { Link } from 'react-router-dom' 4 | 5 | const ComCategries = ({bgcolor = "bg-black", img, name, link}) => { 6 | return ( 7 | <> 8 |
9 |
10 | {img} 11 |
12 |
13 |

{name}

14 | {link} 15 |
16 |
17 | 18 | ) 19 | } 20 | 21 | export default ComCategries -------------------------------------------------------------------------------- /src/Pages/404/Error404.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom'; 3 | 4 | const Error404 = () => { 5 | return ( 6 | <> 7 |
8 |
9 |

404

10 |

Page Not Found

11 |

12 | Oops! The page you're looking for has vanished into the digital void. 13 |

14 | 16 | Go Back Home 17 | 18 |
19 |
20 | 21 | ) 22 | } 23 | 24 | export default Error404 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vertech", 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": "^19.0.0", 14 | "react-dom": "^19.0.0", 15 | "slick-carousel": "^1.8.1" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.19.0", 19 | "@tailwindcss/vite": "^4.0.7", 20 | "@types/react": "^19.0.8", 21 | "@types/react-dom": "^19.0.3", 22 | "@vitejs/plugin-react": "^4.3.4", 23 | "daisyui": "^5.0.0-beta.8", 24 | "eslint": "^9.19.0", 25 | "eslint-plugin-react": "^7.37.4", 26 | "eslint-plugin-react-hooks": "^5.0.0", 27 | "eslint-plugin-react-refresh": "^0.4.18", 28 | "globals": "^15.14.0", 29 | "react-icons": "^5.5.0", 30 | "react-router-dom": "^7.2.0", 31 | "tailwindcss": "^4.0.7", 32 | "vite": "^6.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/Components/Homebanner/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './banner.css' 3 | import { Link } from 'react-router-dom' 4 | 5 | const Banner = () => { 6 | return ( 7 | <> 8 | 17 | 18 | ) 19 | } 20 | 21 | export default Banner -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vertech 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/Components/brand/Brand.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Brand = () => { 4 | return ( 5 | <> 6 |
7 |
8 |

FEATURED Brands

9 |
10 | acer 11 | asus 12 | dell 13 | gigabyte 14 | hp 15 | lenovo 16 | msi 17 |
18 |
19 |
20 | 21 | ) 22 | } 23 | 24 | export default Brand -------------------------------------------------------------------------------- /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/Components/categories/Categories.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ComCategries from '../../common/common_categories/ComCategries' 3 | 4 | const Categories = () => { 5 | return ( 6 | <> 7 |
8 |

Top Categories

9 |
10 | } name={"Business Class"} link={"Shop Now"}/> 11 | } name={"Business Class"} link={"Shop Now"}/> 12 | } name={"Business Class"} link={"Shop Now"}/> 13 | } name={"Business Class"} link={"Shop Now"}/> 14 | } name={"Business Class"} link={"Shop Now"}/> 15 | } name={"Business Class"} link={"Shop Now"}/> 16 |
17 |
18 | 19 | ) 20 | } 21 | 22 | export default Categories -------------------------------------------------------------------------------- /src/Components/newArrivals/NewArrivals.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import { Link } from 'react-router-dom' 3 | import './newarrivals.css' 4 | 5 | const NewArrivals = () => { 6 | const [userData , setUserData] = useState([]) 7 | 8 | 9 | useEffect(()=>{ 10 | fetch('https://api.npoint.io/87b76b1f84cb8afabf11') 11 | .then(response => response.json()) 12 | .then(json => setUserData(json)) 13 | } , []) 14 | 15 | return ( 16 | <> 17 |
18 |

New Arrival

19 |
20 | { 21 | userData.map((item)=>( 22 |
23 | image 24 |

{item.price}

25 |

{item.description}

26 | Add to Cart 27 |
28 | )) 29 | } 30 |
31 |
32 | 33 | ) 34 | } 35 | 36 | export default NewArrivals -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Components/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | const Navbar = () => { 5 | return ( 6 | <> 7 |
8 |
9 |
10 |
11 |
12 |
13 | 15 | 17 |
18 |
    20 |
  • 21 |
    22 | Gaming Laptop 23 |
      24 |
    • Submenu 1
      • 25 |
    • Submenu 2
      • 26 |
    27 |
    28 |
    • 29 |
  • 30 |
    31 | Business Laptop 32 |
      33 |
    • Submenu 1
      • 34 |
    • Submenu 2
      • 35 |
    36 |
    37 |
    • 38 |
  • 39 |
    40 | Ultrakook 41 |
      42 |
    • Submenu 1
      • 43 |
    • Submenu 2
      • 44 |
    45 |
    46 |
    • 47 |
  • 48 |
    49 | Macbook 50 |
      51 |
    • Submenu 1
      • 52 |
    • Submenu 2
      • 53 |
    54 |
    55 |
    • 56 |
  • 57 |
    58 | iMac & Mac mini 59 |
      60 |
    • Submenu 1
      • 61 |
    • Submenu 2
      • 62 |
    63 |
    64 |
    • 65 |
  • 66 |
    67 | iPad 68 |
      69 |
    • Submenu 1
      • 70 |
    • Submenu 2
      • 71 |
    72 |
    73 |
    • 74 |
  • 75 |
    76 | Blog 77 |
      78 |
    • Submenu 1
      • 79 |
    • Submenu 2
      • 80 |
    81 |
    82 |
    • 83 |
84 |
85 | 86 | logo 87 | 88 |
89 |
90 |
    91 |
  • 92 |
    93 | Gaming Laptop 94 |
      95 |
    • Submenu 1
      • 96 |
    • Submenu 2
      • 97 |
    98 |
    99 |
    • 100 |
  • 101 |
    102 | Business Laptop 103 |
      104 |
    • Submenu 1
      • 105 |
    • Submenu 2
      • 106 |
    107 |
    108 |
    • 109 |
  • 110 |
    111 | Ultrakook 112 |
      113 |
    • Submenu 1
      • 114 |
    • Submenu 2
      • 115 |
    116 |
    117 |
    • 118 |
  • 119 |
    120 | Macbook 121 |
      122 |
    • Submenu 1
      • 123 |
    • Submenu 2
      • 124 |
    125 |
    126 |
    • 127 |
  • 128 |
    129 | iMac & Mac mini 130 |
      131 |
    • Submenu 1
      • 132 |
    • Submenu 2
      • 133 |
    134 |
    135 |
    • 136 |
  • 137 |
    138 | iPad 139 |
      140 |
    • Submenu 1
      • 141 |
    • Submenu 2
      • 142 |
    143 |
    144 |
    • 145 |
  • 146 |
    147 | Blog 148 |
      149 |
    • Submenu 1
      • 150 |
    • Submenu 2
      • 151 |
    152 |
    153 |
    • 154 |
155 |
156 |
157 | Button 158 |
159 |
160 |
161 |
162 | 163 | ) 164 | } 165 | 166 | export default Navbar --------------------------------------------------------------------------------