├── src
    ├── App.css
    ├── assets
    │   └── images
    │   │   ├── boy.png
    │   │   ├── eye.png
    │   │   ├── home.png
    │   │   ├── mail.png
    │   │   ├── pin.png
    │   │   ├── plus.png
    │   │   ├── side.png
    │   │   ├── wifi.png
    │   │   ├── Frame.png
    │   │   ├── Prefix.png
    │   │   ├── Topbar.png
    │   │   ├── bells.png
    │   │   ├── logooo.png
    │   │   ├── orders.png
    │   │   ├── side2.png
    │   │   ├── signal.png
    │   │   ├── upload.png
    │   │   ├── Analytics.png
    │   │   ├── Finances.png
    │   │   ├── Product.png
    │   │   ├── battery.png
    │   │   ├── builder.png
    │   │   ├── content.png
    │   │   ├── coolicon.png
    │   │   ├── coolionss.png
    │   │   ├── customers.png
    │   │   ├── discounts.png
    │   │   ├── dustbin.png
    │   │   ├── marketing.png
    │   │   ├── potrait.png
    │   │   ├── shopify.png
    │   │   ├── sidebar.png
    │   │   └── playbutton.png
    ├── index.css
    ├── App.jsx
    ├── main.jsx
    └── components
    │   ├── centre.jsx
    │   ├── top-bar.jsx
    │   ├── dropdown.jsx
    │   ├── Banner.jsx
    │   ├── side-bar.jsx
    │   ├── Blocks.jsx
    │   └── Homescreen.jsx
├── postcss.config.js
├── vite.config.js
├── .gitignore
├── tailwind.config.js
├── README.md
├── index.html
├── package.json
├── eslint.config.js
└── public
    └── vite.svg


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/assets/images/boy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/boy.png


--------------------------------------------------------------------------------
/src/assets/images/eye.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/eye.png


--------------------------------------------------------------------------------
/src/assets/images/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/home.png


--------------------------------------------------------------------------------
/src/assets/images/mail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/mail.png


--------------------------------------------------------------------------------
/src/assets/images/pin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/pin.png


--------------------------------------------------------------------------------
/src/assets/images/plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/plus.png


--------------------------------------------------------------------------------
/src/assets/images/side.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/side.png


--------------------------------------------------------------------------------
/src/assets/images/wifi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/wifi.png


--------------------------------------------------------------------------------
/src/assets/images/Frame.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/Frame.png


--------------------------------------------------------------------------------
/src/assets/images/Prefix.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/Prefix.png


--------------------------------------------------------------------------------
/src/assets/images/Topbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/Topbar.png


--------------------------------------------------------------------------------
/src/assets/images/bells.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/bells.png


--------------------------------------------------------------------------------
/src/assets/images/logooo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/logooo.png


--------------------------------------------------------------------------------
/src/assets/images/orders.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/orders.png


--------------------------------------------------------------------------------
/src/assets/images/side2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/side2.png


--------------------------------------------------------------------------------
/src/assets/images/signal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/signal.png


--------------------------------------------------------------------------------
/src/assets/images/upload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/upload.png


--------------------------------------------------------------------------------
/src/assets/images/Analytics.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/Analytics.png


--------------------------------------------------------------------------------
/src/assets/images/Finances.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/Finances.png


--------------------------------------------------------------------------------
/src/assets/images/Product.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/Product.png


--------------------------------------------------------------------------------
/src/assets/images/battery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/battery.png


--------------------------------------------------------------------------------
/src/assets/images/builder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/builder.png


--------------------------------------------------------------------------------
/src/assets/images/content.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/content.png


--------------------------------------------------------------------------------
/src/assets/images/coolicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/coolicon.png


--------------------------------------------------------------------------------
/src/assets/images/coolionss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/coolionss.png


--------------------------------------------------------------------------------
/src/assets/images/customers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/customers.png


--------------------------------------------------------------------------------
/src/assets/images/discounts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/discounts.png


--------------------------------------------------------------------------------
/src/assets/images/dustbin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/dustbin.png


--------------------------------------------------------------------------------
/src/assets/images/marketing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/marketing.png


--------------------------------------------------------------------------------
/src/assets/images/potrait.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/potrait.png


--------------------------------------------------------------------------------
/src/assets/images/shopify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/shopify.png


--------------------------------------------------------------------------------
/src/assets/images/sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/sidebar.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/assets/images/playbutton.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mustajaaab/Dashboard/HEAD/src/assets/images/playbutton.png


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | html {
6 |     font-family: 'Inter', sans-serif;
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/App.jsx:
--------------------------------------------------------------------------------
 1 | import Topbar from './components/top-bar'
 2 | import Centre from './components/centre'
 3 | import './App.css'
 4 | 
 5 | function App() {
 6 | 
 7 |   return (
 8 |     <>
 9 |       <Topbar/>
10 |       <Centre/>
11 |     </>
12 |   )
13 | }
14 | 
15 | export default App
16 | 


--------------------------------------------------------------------------------
/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 |   <StrictMode>
 8 |     <App />
 9 |   </StrictMode>,
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 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {
 9 |       fontFamily: {
10 |         sans: ['Inter', 'sans-serif'], // Set Inter as the default sans font
11 |       },
12 |     },
13 |   },
14 |   plugins: [],
15 | }
16 | 
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 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 8 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 9 |     <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Martian+Mono:wght@100..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Raleway:ital,wght@0,100..900;1,100..900&family=Satisfy&family=Syne:wght@400..800&display=swap" rel="stylesheet">
10 | 
11 |     <title>Dashboard</title>
12 |   </head>
13 |   <body>
14 |     <div id="root"></div>
15 |     <script type="module" src="/src/main.jsx"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dashboard",
 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 |     "@shopify/polaris": "^13.9.2",
14 |     "@shopify/polaris-icons": "^9.3.0",
15 |     "react": "^18.3.1",
16 |     "react-dom": "^18.3.1"
17 |   },
18 |   "devDependencies": {
19 |     "@eslint/js": "^9.17.0",
20 |     "@types/react": "^18.3.17",
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.13.0",
29 |     "postcss": "^8.4.49",
30 |     "tailwindcss": "^3.4.17",
31 |     "vite": "^6.0.3"
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 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/centre.jsx:
--------------------------------------------------------------------------------
 1 | import Logo from '../assets/images/logooo.png'
 2 | import Pin from '../assets/images/pin.png'
 3 | import Cooilon from '../assets/images/coolicon.png'
 4 | import Sidebar from './side-bar'
 5 | import Blocks from './Blocks'
 6 | import Homescreen from './Homescreen'
 7 | import Banner from './Banner'
 8 | 
 9 | function Centre() {
10 |     return (
11 |         <>
12 |         <div className='flex'>
13 |         <Sidebar/>
14 |             <div className='w-full'>
15 |                 {/* 2nd Navbar */}
16 |                 <div className='flex h-16 items-center justify-between w-full px-6'>
17 |                     <img src={Logo} alt="" className='w-[120px] h-7' />
18 |                     <div className='flex items-center gap-7'>
19 |                         <button className='py-2 px-4 text-sm bg-[#303030] rounded-md text-white font-semibold bg-gradient-to-b from-[#4a4a4a] to-[#1a1a1a] ring-1 ring-inset ring-gray-500 hover:from-[#5a5a5a] hover:to-[#2a2a2a] active:shadow-inner active:translate-y-[2px]'>Publish App</button>
20 |                         <button className='py-1 px-1 bg-[#303030] rounded-md bg-gradient-to-b from-[#4a4a4a] to-[#1a1a1a] ring-1 ring-inset ring-gray-500 hover:from-[#5a5a5a] hover:to-[#2a2a2a] active:shadow-inner active:translate-y-[2px] '>
21 |                             <img src={Pin} alt="" className='w-[17px] h-[17px]'/>
22 |                         </button>
23 |                         <img src={Cooilon} alt="" className='w-[20px] h-[6px] cursor-pointer'/>
24 |                     </div>
25 |                 </div>
26 |                 {/* Blocks Inventory Section */}
27 |                 <div className='flex'>
28 |                     <Blocks/>  
29 |                     <Homescreen/>
30 |                     <Banner/>
31 |                 </div>
32 |             </div>
33 |         </div>
34 |         
35 |             
36 |         </>
37 |     )
38 | }
39 | export default Centre


--------------------------------------------------------------------------------
/src/components/top-bar.jsx:
--------------------------------------------------------------------------------
 1 | import Shopify from '../assets/images/shopify.png'
 2 | import Prefix from  '../assets/images/Prefix.png'
 3 | import Portrait from '../assets/images/potrait.png'
 4 | import Bells from '../assets/images/bells.png'
 5 | import Boy from '../assets/images/boy.png'
 6 | 
 7 | 
 8 | function Topbar(){
 9 |     return(
10 |         <>
11 |         <div className='w-full h-[56px] bg-[#1A1A1A] px-3 flex'>
12 |             <div className='flex items-center h-full w-[60%] justify-between'>
13 |                 <img src={Shopify} alt="" className='w-[85px] h-[24px]'/>
14 |                 <div className="relative flex items-center">
15 |                     <img
16 |                     src={Prefix}
17 |                     alt=""
18 |                     className="absolute left-2 w-[20px] h-[20px]"
19 |                     />
20 |                     <input
21 |                     type="text"
22 |                     className="bg-transparent w-[450px] pl-8 pr-8 border border-gray-500 rounded text-gray-500"
23 |                     />
24 |                     <p className="absolute right-2 text-[#B5B5B5] text-[13px]">⌘K</p>
25 |                 </div>
26 |                 
27 |             </div>
28 |             <div className='flex items-center h-full w-[40%] justify-end gap-2'>
29 |                 <div className='h-[32px] w-[32px] bg-[#303030] rounded-md flex justify-center items-center cursor-pointer'>
30 |                     <img src={Boy} alt="" className='w-[20px] h-[20px] rounded-lg' />
31 |                 </div>
32 | 
33 |                 <div className='h-[32px] w-[32px] bg-[#303030] rounded-md flex justify-center items-center cursor-pointer'>
34 |                     <img src={Bells} alt="" className='w-[25px] h-[25px] rounded-lg' />
35 |                 </div>
36 | 
37 |                 <div className='flex items-center gap-2 bg-[#303030] h-[32px] w-[140px] justify-end rounded-md'>
38 |                     <p className='text-xs font-semibold font-sans text-white cursor-pointer'>Stellar Interiors</p>
39 |                     <img src={Portrait} alt="" className='w-[30px] h-[30px] rounded-lg cursor-pointer' />
40 |                 </div>
41 |                 
42 |             </div>
43 |         </div>
44 |         </>
45 |     )
46 | }
47 | export default Topbar 


--------------------------------------------------------------------------------
/src/components/dropdown.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | function Dropdown() {
 4 |   const [isOpen, setIsOpen] = useState(false);
 5 |   const [selectedOption, setSelectedOption] = useState("Home Screen");
 6 | 
 7 |   const toggleDropdown = () => setIsOpen(!isOpen);
 8 | 
 9 |   const handleOptionClick = (option) => {
10 |     setSelectedOption(option);
11 |     setIsOpen(false);
12 |   };
13 | 
14 |   return (
15 |     <div className="relative w-96 mx-auto mt-5">
16 |       {/* Dropdown Trigger */}
17 |       <button
18 |         onClick={toggleDropdown}
19 |         className="w-full bg-white text-gray-700 border border-gray-300 rounded-lg px-4 py-2 text-left flex items-center justify-between shadow-sm"
20 |       >
21 |         <span>{selectedOption}</span>
22 |         <svg
23 |           xmlns="http://www.w3.org/2000/svg"
24 |           className="h-5 w-5 text-gray-500"
25 |           viewBox="0 0 20 20"
26 |           fill="currentColor"
27 |         >
28 |           <path
29 |             fillRule="evenodd"
30 |             d="M5.23 7.21a.75.75 0 011.06-.02L10 10.67l3.72-3.48a.75.75 0 011.04 1.08l-4.25 4a.75.75 0 01-1.04 0l-4.25-4a.75.75 0 01-.02-1.06z"
31 |             clipRule="evenodd"
32 |           />
33 |         </svg>
34 |       </button>
35 | 
36 |       {/* Dropdown Options */}
37 |       {isOpen && (
38 |         <div className="absolute mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-lg z-10">
39 |           <ul className="py-1">
40 |             <li
41 |               className="px-4 py-2 hover:bg-gray-100 cursor-pointer text-gray-700"
42 |               onClick={() => handleOptionClick("Home Screen")}
43 |             >
44 |               Home Screen
45 |             </li>
46 |             <li
47 |               className="px-4 py-2 hover:bg-gray-100 cursor-pointer text-gray-700"
48 |               onClick={() => handleOptionClick("Get in Touch")}
49 |             >
50 |               Get in Touch
51 |             </li>
52 |             <li
53 |               className="px-4 py-2 hover:bg-gray-100 cursor-pointer text-gray-700"
54 |               onClick={() => handleOptionClick("About Us")}
55 |             >
56 |               About Us
57 |             </li>
58 |           </ul>
59 |         </div>
60 |       )}
61 |     </div>
62 |   );
63 | }
64 | 
65 | export default Dropdown;
66 | 


--------------------------------------------------------------------------------
/src/components/Banner.jsx:
--------------------------------------------------------------------------------
  1 | if (typeof window !== "undefined") {
  2 |   const style = document.createElement("style");
  3 |   style.textContent = `
  4 |     input[type="radio"]:checked::before {
  5 |       content: "";
  6 |       display: block;
  7 |       width: 6px;
  8 |       height: 6px;
  9 |       background-color: black;
 10 |       border-radius: 50%;
 11 |       position: absolute;
 12 |       top: 50%;
 13 |       left: 50%;
 14 |       transform: translate(-50%, -50%);
 15 |     }
 16 |   `;
 17 |   document.head.appendChild(style);
 18 | }
 19 | 
 20 | import Upload from "../assets/images/upload.png";
 21 | import Plus from "../assets/images/plus.png";
 22 | import  { useState } from "react";
 23 | 
 24 | function Banner() {
 25 |   const [selectedOption, setSelectedOption] = useState("Discount Per product Page 1");
 26 | 
 27 |   const handleOptionChange = (event) => {
 28 |     setSelectedOption(event.target.value);
 29 |   };
 30 | 
 31 |   return (
 32 |     <div className="w-[25%] px-4 py-4 border-[2px] border-[#DEDEDE]">
 33 |       <h1 className="font-bold text-xl font-sans">Banner Slider</h1>
 34 |       <p className="font-sans text-sm text-[#616161] mt-2">Please upload your Banners to Sliders</p>
 35 |       <div className="flex justify-between mt-[25px]">
 36 |         {Array(4)
 37 |           .fill(null)
 38 |           .map((_, index) => (
 39 |             <div
 40 |               key={index}
 41 |               className="w-16 h-12 bg-[#F5F4F4] rounded-lg flex justify-center items-center hover:border-[1px] hover:border-black ease-in-out duration-200"
 42 |             >
 43 |               <img src={Upload} alt={`Upload ${index + 1}`} className="w-6 h-6" />
 44 |             </div>
 45 |           ))}
 46 |         <div className="w-16 h-12 bg-[#F5F4F4] rounded-lg flex justify-center items-center hover:border-[1px] hover:border-black ease-in-out duration-200">
 47 |           <img src={Plus} alt="Add" className="w-6 h-6" />
 48 |         </div>
 49 |       </div>
 50 | 
 51 |       <div className="h-[220px] border-[2px] border-[#DEDEDE] rounded-xl mt-6 py-4 px-4">
 52 |         <h1 className="font-sans font-semibold text-base text-[#303030]">Image</h1>
 53 |         <div className="h-[138px] border-[2px] border-[#8A8A8A] border-dotted rounded-xl mt-4">
 54 |           <div className="flex justify-center mt-10">
 55 |             <button className="hover:border-[#303030] hover:border-[2px] border-[1px] border-[#a8a8a8] text-[#616161] font-sans py-2 px-3 rounded-xl mx-auto text-xs shadow-inner ease-in-out duration-200">
 56 |               Add Image
 57 |             </button>
 58 |           </div>
 59 |           <p className="text-xs text-[#616161] text-center font-sans mt-2">Recommended size: 500x290 px.</p>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <h1 className="mt-4 font-bold text-lg font-sans">Navigate to</h1>
 64 | 
 65 |       <div className="space-y-2 mt-4">
 66 |         <label className="flex items-center space-x-2">
 67 |           <input
 68 |             type="radio"
 69 |             name="page"
 70 |             value="Discount Per product Page 1"
 71 |             checked={selectedOption === "Discount Per product Page 1"}
 72 |             onChange={handleOptionChange}
 73 |             className="appearance-none h-4 w-4 rounded-full border-2 border-[#303030] focus:ring-2 focus:ring-[white] checked:bg-white checked:border-[#303030] relative"
 74 |           />
 75 |           <span className="text-[#616161] text-sm font-semibold">Discount Per product Page 1</span>
 76 |         </label>
 77 |         <label className="flex items-center space-x-2">
 78 |           <input
 79 |             type="radio"
 80 |             name="page"
 81 |             value="Deal 2 Page"
 82 |             checked={selectedOption === "Deal 2 Page"}
 83 |             onChange={handleOptionChange}
 84 |             className="appearance-none h-4 w-4 rounded-full border-2 border-[#303030] focus:ring-2 focus:ring-[white] checked:bg-white checked:border-[#303030] relative"
 85 |           />
 86 |           <span className="text-[#616161] text-sm font-semibold">Deal 2 Page</span>
 87 |         </label>
 88 |         <label className="flex items-center space-x-2">
 89 |           <input
 90 |             type="radio"
 91 |             name="page"
 92 |             value="Product Page"
 93 |             checked={selectedOption === "Product Page"}
 94 |             onChange={handleOptionChange}
 95 |             className="appearance-none h-4 w-4 rounded-full border-2 border-[#303030] focus:ring-2 focus:ring-[white] checked:bg-white checked:border-[#303030] relative"
 96 |           />
 97 |           <span className="text-[#616161] text-sm font-semibold">Product Page</span>
 98 |         </label>
 99 |       </div>
100 |     </div>
101 |   );
102 | }
103 | 
104 | export default Banner;
105 | 


--------------------------------------------------------------------------------
/src/components/side-bar.jsx:
--------------------------------------------------------------------------------
 1 | import Home from '../assets/images/home.png'
 2 | import Orders from '../assets/images/orders.png'
 3 | import Products from '../assets/images/Product.png'
 4 | import Customer from '../assets/images/customers.png'
 5 | import Content from '../assets/images/content.png'
 6 | import Finance from '../assets/images/Finances.png'
 7 | import Analytics from '../assets/images/Analytics.png'
 8 | import Marketing from '../assets/images/marketing.png'
 9 | import Discounts from '../assets/images/discounts.png'
10 | import Builder from '../assets/images/builder.png'
11 | import Mail from '../assets/images/mail.png'
12 | import Side from '../assets/images/side.png'
13 | import Side2 from '../assets/images/side2.png'
14 | function Sidebar(){
15 |     return(
16 |         <>
17 |         <div className='w-[19%] p-6 bg-[#EBEBEB] h-[1027px]'>
18 |             <div className='flex gap-3 '>
19 |                 <img src={Home} alt="" className='w-4 h-4'/>
20 |                 <h1 className='text-[14px] font-semibold font-sans text-[#303030] cursor-pointer'>Home</h1>
21 |             </div>
22 |             
23 |             <div className='flex items-center justify-between mt-[15px]'>
24 |                 <div className='flex gap-3'>
25 |                     <img src={Orders} alt="" className='w-4 h-4 '/>
26 |                     <h1 className='text-[14px] font-semibold font-sans text-[#303030] cursor-pointer'>Orders</h1>
27 |                 </div>
28 |                 <h2 className=' px-2 py-[2px] bg-[#616161] rounded-lg cursor-pointer'>15</h2>
29 |             </div>
30 |             <div className='flex gap-3 mt-[15px]'>
31 |                 <img src={Products} alt="" className='w-4 h-4 '/>
32 |                 <h1 className='text-[14px] font-semibold font-sans text-[#303030] cursor-pointer'>Products</h1>
33 |             </div>
34 |             <div className='flex gap-3 mt-[15px]'>
35 |                 <img src={Customer} alt="" className='w-4 h-4 '/>
36 |                 <h1 className='text-[14px] font-semibold font-sans text-[#303030] cursor-pointer'>Customers</h1>
37 |             </div>
38 |             <div className='flex gap-3 mt-[15px]'>
39 |                 <img src={Content} alt="" className='w-4 h-4 '/>
40 |                 <h1 className='text-[14px] font-semibold font-sans text-[#303030] cursor-pointer'>Content</h1>
41 |             </div>
42 |             <div className='flex gap-3 mt-[15px]'>
43 |                 <img src={Finance} alt="" className='w-4 h-4 '/>
44 |                 <h1 className='text-[14px] font-semibold font-sans text-[#303030] cursor-pointer'>Finances</h1>
45 |             </div>
46 |             <div className='flex gap-3 mt-[15px]'>
47 |                 <img src={Analytics} alt="" className='w-4 h-4 '/>
48 |                 <h1 className='text-[14px] font-semibold font-sans text-[#303030] cursor-pointer'>Analytics</h1>
49 |             </div>
50 |             <div className='flex gap-3 mt-[15px]'>
51 |                 <img src={Marketing} alt="" className='w-4 h-4 '/>
52 |                 <h1 className='text-[14px] font-semibold font-sans text-[#303030] cursor-pointer'>Marketing</h1>
53 |             </div>
54 |             <div className='flex gap-3 mt-[15px]'>
55 |                 <img src={Discounts} alt="" className='w-4 h-4 '/>
56 |                 <h1 className='text-[14px] font-semibold font-sans text-[#303030] cursor-pointer'>Discounts</h1>
57 |             </div>
58 | 
59 |             {/* Sales Channels */}
60 | 
61 |             <p className='text-xs font-semibold text-[#616161] mt-7 font-sans'>Sales Channels</p>
62 |             <div className='flex justify-between items-center'>
63 |                 <div className='flex gap-3 mt-3 items-center'>
64 |                     <img src={Builder} alt="" className='w-4 h-4'/>
65 |                     <h1 className='text-[13px] font-semibold font-sans cursor-pointer'>Our App Builder</h1>
66 |                 </div>
67 |                 <img src={Side2} alt="" className='w-[15px] h-[9px]'/>
68 |             </div>
69 |             <div className='px-7'>
70 |                 <h2 className='text-[#616161] font-sans text-xs mt-4 hover:font-bold ease-in-out duration-200 cursor-pointer'>Themes</h2>
71 |                 <h2 className='text-[#616161] font-sans text-xs font-bold ease-in-out duration-200 hover:font-bold mt-4 cursor-pointer'>Design Editor</h2>
72 |                 <h2 className='text-[#616161] font-sans text-xs mt-4 hover:font-bold ease-in-out duration-200 cursor-pointer'>Personalize Branding</h2>
73 |                 <h2 className='text-[#616161] font-sans text-xs mt-4 hover:font-bold ease-in-out duration-200 cursor-pointer'>Navigation</h2>
74 |                 <h2 className='text-[#616161] font-sans text-xs mt-4 hover:font-bold ease-in-out duration-200 cursor-pointer'>Push Campaigns</h2>
75 |                 <h2 className='text-[#616161] font-sans text-xs mt-4 hover:font-bold ease-in-out duration-200 cursor-pointer'>Plugins</h2>
76 |                 <h2 className='text-[#616161] font-sans text-xs mt-4 hover:font-bold ease-in-out duration-200 cursor-pointer'>Billing</h2>
77 |                 <h2 className='text-[#616161] font-sans text-xs mt-4 hover:font-bold ease-in-out duration-200 cursor-pointer'>Analytics</h2>
78 |                 <h2 className='text-[#616161] font-sans text-xs mt-4 hover:font-bold ease-in-out duration-200 cursor-pointer'>Settings</h2>
79 |             </div>
80 |             <div className='flex justify-between items-center mt-9'>
81 |                 <p className='text-[#616161] font-sans text-xs font-bold  cursor-pointer'>Apps</p>
82 |                 <img src={Side} alt="" className='w-[9px] h-[15px]'/>
83 |             </div>
84 |             <div className='flex gap-2 items-center mt-3'>
85 |                 <img src={Mail} alt="" className='w-4 h-4'/>
86 |                 <p className='text-[#616161] font-sans text-sm font-semibold cursor-pointer'>Shopify Email</p>
87 |             </div>
88 |         </div>
89 |         </>
90 |     )
91 | }
92 | export default Sidebar 


--------------------------------------------------------------------------------
/src/components/Blocks.jsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import Prefix from '../assets/images/Prefix.png'
  3 | import Coolions from '../assets/images/coolionss.png'
  4 | import Frame from '../assets/images/Frame.png'
  5 | 
  6 | function Blocks() {
  7 |     return (
  8 |         <>
  9 |         <div className='w-[25%]'>
 10 |                     <div className='border-[2px] border-b-0 border-[#DEDEDE] px-4 py-6'>
 11 |                         <h1 className='font-sans font-bold text-xl'>Blocks inventory</h1>
 12 |                         <p className='text-[#616161] text-sm mt-2'>Drag, drop max 5 blocks per design.</p>
 13 |                         <div className='flex items-center gap-[14px] mt-[16px]'>
 14 |                             <div className='flex items-center px-3 h-[32px] rounded-md border-[1px] border-[#DEDEDE]'>
 15 |                                 <img src={Prefix} alt="" className='w-[20px] h-[20px] mr-[4px]'/>
 16 |                                 <input type="text" name="" id="" placeholder='Search' className='text-[13px] font-semibold font-sans outline-none w-[240px]'/>
 17 |                             </div>
 18 |                             <button className='bg-gradient-to-b from-[#4a4a4a] to-[#1a1a1a] rounded-md h-[32px] px-4 text-[12px] text-white font-semibold font-sans  ring-1 ring-inset ring-gray-500 hover:from-[#5a5a5a] hover:to-[#2a2a2a] active:shadow-inner active:translate-y-[2px]'>
 19 |                              Search
 20 |                             </button>
 21 | 
 22 |                         </div>
 23 |                     </div>
 24 |                     <div className='py-4 px-3 border-[2px] border-[#DEDEDE] '>
 25 |                         <div className='border-[2px] border-[#DEDEDE] rounded-lg py-5 '>
 26 |                             
 27 |                             <div className='flex justify-between '>
 28 |                                 <span className='bg-[#F5F4F4] h-32 w-[3%] rounded-tr-xl rounded-br-xl'></span>
 29 |                                 <div className='h-32 w-[88%] flex justify-center items-center rounded-xl bg-[#F5F4F4]'>
 30 |                                     <img src={Frame} alt="" className='w-[48px] h-[48px] mx-auto'/>
 31 |                                 </div>
 32 |                                 <span className='bg-[#F5F4F4] h-32 w-[3%] rounded-tl-xl rounded-bl-xl'></span>
 33 |                             </div>
 34 |                             <div className='px-3'>
 35 |                             <img src={Coolions} alt="" className='w-[44px] h-[8px] cursor-pointer mx-auto mt-2' />
 36 |                             <h3 className='text-sm text-[#616161] font-semibold font-sans mt-[24px]'>Banner Slider</h3>
 37 |                             <p className='text-[#616161] font-sans font-normal text-sm '>Drag & Drop to your Design</p>
 38 |                             </div>
 39 |                         </div>
 40 | 
 41 |                         <div className='border-[2px] border-[#DEDEDE] rounded-lg py-6 mt-[16px]'>
 42 |                             <div className='h-32 w-[88%] flex justify-center items-center rounded-xl bg-[#F5F4F4] mx-auto'>
 43 |                                 <img src={Frame} alt="" className='w-[48px] h-[48px] mx-auto'/>
 44 |                             </div>
 45 |                             <div className='px-3'>
 46 |                             <h3 className='text-sm text-[#616161] font-semibold font-sans mt-[24px]'>Full Width Single Banner</h3>
 47 |                             <p className='text-[#616161] font-sans font-normal text-sm '>Drag & Drop to your Design</p>
 48 |                             </div>
 49 |                         </div>
 50 | 
 51 |                         <div className='border-[2px] border-[#DEDEDE] rounded-lg py-6 px-3 mt-[16px]'>
 52 |                             <div className=' flex justify-center items-center gap-2'>
 53 |                                 <p className='bg-[#F5F4F4] font-sans px-5 py-3 text-xs rounded-md text-[#616161]'>Text 1</p>
 54 |                                 <p className='bg-[#F5F4F4] font-sans px-5 py-3 text-xs rounded-md text-[#616161]'>Text 2</p>
 55 |                                 <p className='bg-[#F5F4F4] font-sans px-5 py-3 text-xs rounded-md text-[#616161]'>Text 3</p>
 56 |                                 <p className='bg-[#F5F4F4] font-sans px-5 py-3 text-xs rounded-md text-[#616161]'>Text 4</p>
 57 |                             </div>
 58 |                             <h3 className='text-sm text-[#616161] font-semibold font-sans mt-[24px]'>Four Category Labels</h3>
 59 |                             <p className='text-[#616161] font-sans font-normal text-sm mt-1'>Drag & Drop to your Design</p>
 60 |                         </div>
 61 | 
 62 |                         <div className='border-[2px] border-[#DEDEDE] rounded-lg py-5 px-3 mt-[16px]'>
 63 |                             <div className=' flex justify-center items-center gap-4'>
 64 |                                 <div className='text-center'>
 65 |                                     <div className='px-6 py-6 rounded-full bg-[#F5F4F4]'>
 66 |                                         <img src={Frame} alt="" className='w-[19px] h-[19px] '/>
 67 |                                     </div>
 68 |                                     <p className='font-sans text-[12px] text-[#616161] mt-2'>Text</p>
 69 |                                 </div>
 70 |                                 <div className='text-center'>
 71 |                                     <div className='px-6 py-6 rounded-full bg-[#F5F4F4]'>
 72 |                                         <img src={Frame} alt="" className='w-[19px] h-[19px] '/>
 73 |                                     </div>
 74 |                                     <p className='font-sans text-[12px] text-[#616161] mt-2'>Text</p>
 75 |                                 </div>
 76 |                                 <div className='text-center'>
 77 |                                     <div className='px-6 py-6 rounded-full bg-[#F5F4F4]'>
 78 |                                         <img src={Frame} alt="" className='w-[19px] h-[19px] '/>
 79 |                                     </div>
 80 |                                     <p className='font-sans text-[12px] text-[#616161] mt-2'>Text</p>
 81 |                                 </div>
 82 |                                 <div className='text-center'>
 83 |                                     <div className='px-6 py-6 rounded-full bg-[#F5F4F4]'>
 84 |                                         <img src={Frame} alt="" className='w-[19px] h-[19px] '/>
 85 |                                     </div>
 86 |                                     <p className='font-sans text-[12px] text-[#616161] mt-2'>Text</p>
 87 |                                 </div>
 88 |                             </div>
 89 |                             <h3 className='text-sm text-[#616161] font-semibold font-sans mt-[24px]'>Image with text for categories</h3>
 90 |                             <p className='text-[#616161] font-sans font-normal text-sm mt-1'>Drag & Drop to your Design</p>
 91 |                         </div>
 92 |                         <div className='border-[2px] border-[#DEDEDE] rounded-lg py-5 px-3 mt-[16px]'>
 93 |                             <div className=' flex justify-evenly items-center gap-2'>
 94 |                                 <div>
 95 |                                     <div className='bg-[#F5F4F4] w-[159px] h-[178px] flex justify-center items-center rounded-lg'>
 96 |                                         <img src={Frame} alt="" className='w-[38px] h-[38px]'/>
 97 |                                     </div>
 98 |                                     <h1 className='text-sm text-[#616161] font-semibold mt-3'>Product name</h1>
 99 |                                     <p className='text-[#616161] text-sm mt-1'>Price</p>
100 |                                 </div>
101 |                                 <div>
102 |                                     <div className='bg-[#F5F4F4] w-[159px] h-[178px] flex justify-center items-center rounded-lg'>
103 |                                         <img src={Frame} alt="" className='w-[38px] h-[38px]'/>
104 |                                     </div>
105 |                                     <h1 className='text-sm text-[#616161] font-semibold mt-3'>Product name</h1>
106 |                                     <p className='text-[#616161] text-sm mt-1'>Price</p>
107 |                                 </div>
108 |                             </div>
109 |                             <h3 className='text-sm text-[#616161] font-semibold font-sans mt-[24px]'>New Arrival - Product Tiles</h3>
110 |                             <p className='text-[#616161] font-sans font-normal text-sm mt-1'>Drag & Drop to your Design</p>
111 |                         </div>
112 |                         <div className='border-[2px] border-[#DEDEDE] rounded-lg py-5 px-3 mt-[16px]'>
113 |                             <div className=' flex justify-center items-center gap-2'>
114 |                                 <div>
115 |                                     <div className='bg-[#F5F4F4] w-[330px] h-[178px] flex justify-center items-center rounded-lg'>
116 |                                         <img src={Frame} alt="" className='w-[38px] h-[38px]'/>
117 |                                     </div>
118 |                                     <h1 className='text-sm text-[#616161] font-semibold mt-3'>Product name</h1>
119 |                                     <p className='text-[#616161] text-sm mt-1'>Price</p>
120 |                                 </div>
121 |                             </div>
122 |                             <h3 className='text-sm text-[#616161] font-semibold font-sans mt-[24px]'>New Arrival - Product Tiles</h3>
123 |                             <p className='text-[#616161] font-sans font-normal text-sm mt-1'>Drag & Drop to your Design</p>
124 |                         </div>
125 |                     </div>  
126 |                 </div>
127 |         </>
128 |     )
129 | }
130 | export default Blocks


--------------------------------------------------------------------------------
/src/components/Homescreen.jsx:
--------------------------------------------------------------------------------
  1 | import Dropdown from "./dropdown"
  2 | import Signal from '../assets/images/signal.png'
  3 | import Wifi from '../assets/images/wifi.png'
  4 | import Battery from '../assets/images/battery.png'
  5 | import Prefix from '../assets/images/Prefix.png'
  6 | import Play from '../assets/images/playbutton.png'
  7 | import Frame from '../assets/images/Frame.png'
  8 | import Dust from '../assets/images/dustbin.png'
  9 | import Eye from '../assets/images/eye.png'
 10 | 
 11 | function Homescreen(){
 12 |     return (
 13 |         <div className="w-[50%] bg-[#EBEBEB]">
 14 |             <Dropdown/>
 15 |             <div className="w-[600px] bg-[#181A20] mx-auto mt-6">
 16 |                 <div className="px-6 py-2">
 17 |                     <div className="flex justify-between items-center">
 18 |                         <p className="text-white font-sans">9:41</p>
 19 |                         <div className="flex gap-[6px]">
 20 |                             <img src={Signal} alt="" className="w-[18px] h-[10px]"/>
 21 |                             <img src={Wifi} alt="" className="w-[15px] h-[10px]"/>
 22 |                             <img src={Battery} alt="" className="w-[27px] h-[13px]"/>
 23 |                         </div>
 24 |                     </div>
 25 | 
 26 |                     <div className="flex border-[2px] border-gray-700 rounded-xl px-4 h-[80px] bg-[#424242] justify-between items-center mt-[38px]">
 27 |                         
 28 |                          <div className="flex items-center">
 29 |                             <img src={Prefix} alt="" className="w-[35px] h-[35px]" />
 30 |                             <input
 31 |                              type="text"
 32 |                              placeholder="Search Trends..."
 33 |                              name="search" id="" 
 34 |                              className="placeholder:text-[#BDBDBD] text-xl  bg-transparent outline-none text-white ml-3" />
 35 |                          </div>
 36 |                          <div className="bg-[#1A1A1A] w-[40px] h-[40px] rounded-full flex justify-center items-center">
 37 |                             <img src={Play} alt="" className="w-[18px] h-[18px] ml-[4px]" />
 38 |                          </div>
 39 |                     </div>
 40 |                 </div>
 41 |                 <div className='w-[95%] ml-auto flex justify-between mt-7'>
 42 |                     <div className=" bg-[#F5F4F4] w-[95%] pt-20 rounded-xl x-auto pb-7">
 43 |                         <img src={Frame} alt="" className="w-16 h-16 mx-auto"/>
 44 |                         <div className="flex bg-[#181A20] py-3 justify-center items-center gap-4 w-[80px] mx-auto rounded-xl mt-5 ">
 45 |                             <img src={Eye} alt="" className="w-[19px] h-[15px]"/>
 46 |                             <img src={Dust} alt="" className="w-[17px] h-[19px]"/>
 47 |                         </div>
 48 |                     </div>
 49 |                     <div></div>
 50 | 
 51 |                     <div className="bg-[#F5F4F4] w-[2%] rounded-tl-xl rounded-bl-xl">
 52 |                         <p className="text-[#F5F4F4]">.</p>
 53 |                     </div>
 54 |                 </div>
 55 | 
 56 |                 <div className="relative w-full h-12">
 57 |                     <div className="absolute inset-0"></div>
 58 |                     <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center space-x-2">
 59 |                         <div className="w-[7px] h-2 bg-white rounded-full"></div>
 60 |                         <div className="w-2 h-2 bg-[#424242] rounded-full"></div>
 61 |                         <div className="w-2 h-2 bg-[#424242] rounded-full"></div>
 62 |                         <div className="w-2 h-2 bg-[#424242] rounded-full"></div>
 63 |                     </div>
 64 |                 </div>
 65 | 
 66 |                 <div className="flex justify-center gap-10 mt-9">
 67 |                     <div>
 68 |                         <div className="p-9 bg-white rounded-full">
 69 |                             <img src={Frame} alt="" className="w-7 h-7"/>
 70 |                         </div>
 71 |                         <h1 className="text-white text-sm font-sans text-center mt-3">Category 1</h1>
 72 |                     </div>
 73 |                     <div>
 74 |                         <div className="p-9 bg-white rounded-full">
 75 |                             <img src={Frame} alt="" className="w-7 h-7"/>
 76 |                         </div>
 77 |                         <h1 className="text-white text-sm font-sans text-center mt-3">Category 2</h1>
 78 |                     </div>
 79 |                     <div>
 80 |                         <div className="p-9 bg-white rounded-full">
 81 |                             <img src={Frame} alt="" className="w-7 h-7"/>
 82 |                         </div>
 83 |                         <h1 className="text-white text-sm font-sans text-center mt-3">Category 3</h1>
 84 |                     </div>
 85 |                     <div>
 86 |                         <div className="p-9 bg-white rounded-full">
 87 |                             <img src={Frame} alt="" className="w-7 h-7"/>
 88 |                         </div>
 89 |                         <h1 className="text-white text-sm font-sans text-center mt-3">Category 4</h1>
 90 |                     </div>
 91 |                 </div>
 92 | 
 93 |                 <div className="flex justify-between items-center px-6 mt-9">
 94 |                     <h1 className="font-bold text-xl font-sans text-white">New Arrival</h1>
 95 |                     <h2 className="font-bold text-lg font-sans text-[#528F65]">View All</h2>
 96 |                 </div>
 97 | 
 98 |                 <div className="px-6 mt-5 flex justify-between">
 99 |                     <div>
100 |                         <div className="w-[263px] h-[287px] flex justify-center items-center rounded-t-xl bg-white">
101 |                             <img src={Frame} alt="" className="w-14 h-14"/>
102 |                         </div>
103 |                         <h1 className="font-semibold text-base text-white font-sans mt-2">Urban Blend Long...</h1>
104 |                         <h2 className="font-semibold text-sm text-[#528F65] font-sans mt-1">$185.00</h2>
105 |                     </div>
106 |                     <div>
107 |                         <div className="w-[263px] h-[287px] flex justify-center items-center rounded-t-xl bg-white">
108 |                             <img src={Frame} alt="" className="w-14 h-14"/>
109 |                         </div>
110 |                         <h1 className="font-semibold text-base text-white font-sans mt-2">Urban Blend Long...</h1>
111 |                         <h2 className="font-semibold text-sm text-[#528F65] font-sans mt-1">$185.00</h2>
112 |                     </div>
113 |                 </div>
114 | 
115 |                 <div className="px-6 mt-5 flex justify-between">
116 |                     <div>
117 |                         <div className="w-[263px] h-[287px] flex justify-center items-center rounded-t-xl bg-white">
118 |                             <img src={Frame} alt="" className="w-14 h-14"/>
119 |                         </div>
120 |                         <h1 className="font-semibold text-base text-white font-sans mt-2">Urban Blend Long...</h1>
121 |                         <h2 className="font-semibold text-sm text-[#528F65] font-sans mt-1">$185.00</h2>
122 |                     </div>
123 |                     <div>
124 |                         <div className="w-[263px] h-[287px] flex justify-center items-center rounded-t-xl bg-white">
125 |                             <img src={Frame} alt="" className="w-14 h-14"/>
126 |                         </div>
127 |                         <h1 className="font-semibold text-base text-white font-sans mt-2">Urban Blend Long...</h1>
128 |                         <h2 className="font-semibold text-sm text-[#528F65] font-sans mt-1">$185.00</h2>
129 |                     </div>
130 |                 </div>
131 | 
132 |                 <div className="flex justify-between items-center px-6 mt-9">
133 |                     <h1 className="font-bold text-xl font-sans text-white">Collections</h1>
134 |                     <h2 className="font-bold text-lg font-sans text-[#528F65]">View All</h2>
135 |                 </div>
136 | 
137 |                 <div className="px-6 mt-5 flex justify-between">
138 |                     <div>
139 |                         <div className="w-[263px] h-[287px] flex justify-center items-center rounded-t-xl bg-white">
140 |                             <img src={Frame} alt="" className="w-14 h-14"/>
141 |                         </div>
142 |                         <h1 className="font-semibold text-base text-white font-sans mt-2">Urban Blend Long...</h1>
143 |                     </div>
144 |                     <div>
145 |                         <div className="w-[263px] h-[287px] flex justify-center items-center rounded-t-xl bg-white">
146 |                             <img src={Frame} alt="" className="w-14 h-14"/>
147 |                         </div>
148 |                         <h1 className="font-semibold text-base text-white font-sans mt-2">Urban Blend Long...</h1>
149 |                     </div>
150 |                 </div>
151 | 
152 |                 <div className="px-6 mt-5 flex justify-between">
153 |                     <div>
154 |                         <div className="w-[263px] h-[287px] flex justify-center items-center rounded-t-xl bg-white">
155 |                             <img src={Frame} alt="" className="w-14 h-14"/>
156 |                         </div>
157 |                         <h1 className="font-semibold text-base text-white font-sans mt-2">Urban Blend Long...</h1>
158 |                     </div>
159 |                     <div>
160 |                         <div className="w-[263px] h-[287px] flex justify-center items-center rounded-t-xl bg-white">
161 |                             <img src={Frame} alt="" className="w-14 h-14"/>
162 |                         </div>
163 |                         <h1 className="font-semibold text-base text-white font-sans mt-2">Urban Blend Long...</h1>
164 |                     </div>
165 |                 </div>
166 | 
167 |                 <div className="flex justify-between items-center px-6 mt-9">
168 |                     <h1 className="font-bold text-xl font-sans text-white">Our Stores</h1>
169 |                     <h2 className="font-bold text-lg font-sans text-[#528F65]">View All</h2>
170 |                 </div>
171 | 
172 |                 <div className="flex justify-center gap-10 mt-9 pb-16">
173 |                     <div>
174 |                         <div className="p-9 bg-white rounded-full">
175 |                             <img src={Frame} alt="" className="w-7 h-7"/>
176 |                         </div>
177 |                         <h1 className="text-white text-sm font-sans text-center mt-3">Store 1</h1>
178 |                     </div>
179 |                     <div>
180 |                         <div className="p-9 bg-white rounded-full">
181 |                             <img src={Frame} alt="" className="w-7 h-7"/>
182 |                         </div>
183 |                         <h1 className="text-white text-sm font-sans text-center mt-3">Store 2</h1>
184 |                     </div>
185 |                     <div>
186 |                         <div className="p-9 bg-white rounded-full">
187 |                             <img src={Frame} alt="" className="w-7 h-7"/>
188 |                         </div>
189 |                         <h1 className="text-white text-sm font-sans text-center mt-3">Store 3</h1>
190 |                     </div>
191 |                     <div>
192 |                         <div className="p-9 bg-white rounded-full">
193 |                             <img src={Frame} alt="" className="w-7 h-7"/>
194 |                         </div>
195 |                         <h1 className="text-white text-sm font-sans text-center mt-3">Store 4</h1>
196 |                     </div>
197 |                 </div>
198 |             </div>
199 |         </div>
200 |     )
201 | }
202 | export default Homescreen


--------------------------------------------------------------------------------