├── 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 |
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 |
7 |
8 |
9 |
10 |
Find The Best Fashion Style
11 | For You
12 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu, odio pellentesque mattis pulvinar felis. At arcu ornare
13 | rhoncus, elementum non viverra.
14 |
SHOP NOW
15 |
16 |
17 |
18 |
19 |
20 |
21 |
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 |
7 |
8 |
9 |
10 |
11 |
12 |
31 |
35 |
36 |
37 |
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 |
--------------------------------------------------------------------------------