├── src ├── index.css ├── App.jsx ├── main.jsx ├── pages │ └── Home.jsx ├── components │ ├── home │ │ ├── CollectionCard.jsx │ │ ├── Collection.jsx │ │ ├── SellerCard.jsx │ │ ├── Banner.jsx │ │ ├── Seller.jsx │ │ └── Fashion.jsx │ └── Navbar.jsx └── assets │ └── react.svg ├── public ├── logo.png ├── banner.png ├── fashion.png ├── collection_1.png ├── collection_2.png ├── collection_3.png ├── footer_img_1.png ├── footer_img_2.png └── vite.svg ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md └── eslint.config.js /src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/class-32-project-fresh/HEAD/public/logo.png -------------------------------------------------------------------------------- /public/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/class-32-project-fresh/HEAD/public/banner.png -------------------------------------------------------------------------------- /public/fashion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/class-32-project-fresh/HEAD/public/fashion.png -------------------------------------------------------------------------------- /public/collection_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/class-32-project-fresh/HEAD/public/collection_1.png -------------------------------------------------------------------------------- /public/collection_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/class-32-project-fresh/HEAD/public/collection_2.png -------------------------------------------------------------------------------- /public/collection_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/class-32-project-fresh/HEAD/public/collection_3.png -------------------------------------------------------------------------------- /public/footer_img_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/class-32-project-fresh/HEAD/public/footer_img_1.png -------------------------------------------------------------------------------- /public/footer_img_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamShimanto/class-32-project-fresh/HEAD/public/footer_img_2.png -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import Home from "./pages/Home" 2 | 3 | 4 | function App() { 5 | 6 | return ( 7 | <> 8 | 9 | 10 | ) 11 | } 12 | 13 | export default App 14 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from '@tailwindcss/vite' 4 | 5 | // https://vite.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(),tailwindcss(),], 8 | }) 9 | -------------------------------------------------------------------------------- /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/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from '../components/Navbar' 3 | import Banner from '../components/home/banner' 4 | import Collection from '../components/home/Collection' 5 | import Fashion from '../components/home/Fashion' 6 | import Seller from '../components/home/Seller' 7 | 8 | const Home = () => { 9 | return ( 10 | <> 11 | 12 | 13 | 14 | 15 | 16 | 17 | ) 18 | } 19 | 20 | export default Home -------------------------------------------------------------------------------- /src/components/home/CollectionCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const CollectionCard = ({image , name}) => { 4 | return ( 5 | <> 6 |
7 | 8 | {name} 9 |
10 | 11 | ) 12 | } 13 | 14 | export default CollectionCard -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class 32 8 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "class-32", 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 | "@tailwindcss/vite": "^4.1.4", 14 | "react": "^19.0.0", 15 | "react-dom": "^19.0.0", 16 | "react-icons": "^5.5.0", 17 | "tailwindcss": "^4.1.4" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.22.0", 21 | "@types/react": "^19.0.10", 22 | "@types/react-dom": "^19.0.4", 23 | "@vitejs/plugin-react": "^4.3.4", 24 | "eslint": "^9.22.0", 25 | "eslint-plugin-react-hooks": "^5.2.0", 26 | "eslint-plugin-react-refresh": "^0.4.19", 27 | "globals": "^16.0.0", 28 | "vite": "^6.3.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /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) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. 13 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | 6 | export default [ 7 | { ignores: ['dist'] }, 8 | { 9 | files: ['**/*.{js,jsx}'], 10 | languageOptions: { 11 | ecmaVersion: 2020, 12 | globals: globals.browser, 13 | parserOptions: { 14 | ecmaVersion: 'latest', 15 | ecmaFeatures: { jsx: true }, 16 | sourceType: 'module', 17 | }, 18 | }, 19 | plugins: { 20 | 'react-hooks': reactHooks, 21 | 'react-refresh': reactRefresh, 22 | }, 23 | rules: { 24 | ...js.configs.recommended.rules, 25 | ...reactHooks.configs.recommended.rules, 26 | 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], 27 | 'react-refresh/only-export-components': [ 28 | 'warn', 29 | { allowConstantExport: true }, 30 | ], 31 | }, 32 | }, 33 | ] 34 | -------------------------------------------------------------------------------- /src/components/home/Collection.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CollectionCard from './CollectionCard' 3 | 4 | const Collection = () => { 5 | return ( 6 | <> 7 |
8 |
9 |
10 |

New Collection

11 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

12 |
13 |
14 | 15 | 16 | 17 |
18 |
19 |
20 | 21 | ) 22 | } 23 | 24 | export default Collection -------------------------------------------------------------------------------- /src/components/home/SellerCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { IoIosStar } from "react-icons/io"; 3 | 4 | 5 | const SellerCard = ({image , productName , price1 , price2}) => { 6 | return ( 7 | <> 8 |
9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 |

{productName}

19 |
20 |

{price1}

21 |

{price2}

22 |
23 |
24 |
25 | 26 | ) 27 | } 28 | 29 | export default SellerCard -------------------------------------------------------------------------------- /src/components/home/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Banner = () => { 4 | return ( 5 | <> 6 | 22 | 23 | ) 24 | } 25 | 26 | export default Banner -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/home/Seller.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SellerCard from './SellerCard' 3 | 4 | const Seller = () => { 5 | return ( 6 | <> 7 | 24 | 25 | ) 26 | } 27 | 28 | export default Seller -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Navbar = () => { 4 | return ( 5 | <> 6 | 38 | 39 | ) 40 | } 41 | 42 | export default Navbar -------------------------------------------------------------------------------- /src/components/home/Fashion.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Fashion = () => { 4 | return ( 5 | <> 6 |
7 |
8 |
9 |
10 | 11 |
12 |
13 |

Best Fashion 14 | Since 2010

15 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu, odio pellentesque mattis pulvinar felis. At arcu ornare 16 | rhoncus, elementum non viverra.

17 |
18 |
19 |

2010

20 |

Founded

21 |
22 |
23 |

5000+

24 |

Product Sold

25 |
26 |
27 |

4500+

28 |

Best Reviews

29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 | ) 37 | } 38 | 39 | export default Fashion -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------