├── .eslintrc.cjs ├── .gitignore ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── App.css ├── App.jsx ├── assets │ ├── ..svg │ ├── Thumbs.db │ ├── appstore.png │ ├── arrow.svg │ ├── arrowdown.svg │ ├── arrowup.svg │ ├── avatar-1.jpg │ ├── avatar-10.png │ ├── avatar-11.png │ ├── avatar-12.png │ ├── avatar-13.png │ ├── avatar-2.jpg │ ├── avatar-3.jpg │ ├── avatar-4.jpg │ ├── avatar-5.jpg │ ├── avatar-6.gif │ ├── avatar-7.jpg │ ├── avatar-8.jpg │ ├── avatar-9.png │ ├── bolt.svg │ ├── check.png │ ├── close.svg │ ├── ethereum.svg │ ├── index.js │ ├── logo-small.svg │ ├── logo.svg │ ├── menu.svg │ ├── nft.png │ ├── playstore.png │ ├── profile.jpg │ ├── register.png │ ├── showcase-1.jpg │ ├── showcase-10.png │ ├── showcase-11.png │ ├── showcase-12.png │ ├── showcase-13.jpg │ ├── showcase-2.jpg │ ├── showcase-3.jpg │ ├── showcase-4.jpg │ ├── showcase-5.jpg │ ├── showcase-6.gif │ ├── showcase-7.jpg │ ├── showcase-8.gif │ ├── showcase-9.jpg │ └── verified.svg ├── components │ ├── Hero.jsx │ ├── Q&A.css │ ├── Q&A.jsx │ ├── ani.css │ ├── cards.jsx │ ├── collection.jsx │ ├── collection_card.css │ ├── collection_cards.jsx │ ├── contact.jsx │ ├── creators_seller.jsx │ ├── footer.jsx │ ├── hero.css │ ├── item-card.jsx │ ├── item_card.css │ ├── items.jsx │ ├── navbar.jsx │ ├── seller.css │ ├── seller.jsx │ ├── seller_Card.css │ ├── seller_card.jsx │ └── top_collection.jsx ├── constants │ └── index.js ├── index.css └── main.jsx ├── tailwind.config.js └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Metalink - Discover rate collection or Arts & NFTs 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Metalink 20 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "homepage": "https://AbdullahAssi.github.io/MetaLink", 3 | "name": "metalink", 4 | "private": true, 5 | "version": "0.0.0", 6 | "type": "module", 7 | "scripts": { 8 | "dev": "vite", 9 | "predeploy": "npm run build", 10 | "deploy": "gh-pages -d build", 11 | "build": "vite build", 12 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 13 | "preview": "vite preview" 14 | }, 15 | "dependencies": { 16 | "framer-motion": "^10.12.18", 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0", 19 | "react-icons": "^4.10.1", 20 | "react-intersection-observer": "^9.5.2" 21 | }, 22 | "devDependencies": { 23 | "@types/react": "^18.0.37", 24 | "@types/react-dom": "^18.0.11", 25 | "@vitejs/plugin-react": "^4.0.0", 26 | "autoprefixer": "^10.4.14", 27 | "eslint": "^8.38.0", 28 | "eslint-plugin-react": "^7.32.2", 29 | "eslint-plugin-react-hooks": "^4.6.0", 30 | "eslint-plugin-react-refresh": "^0.3.4", 31 | "gh-pages": "^5.0.0", 32 | "postcss": "^8.4.24", 33 | "tailwindcss": "^3.3.2", 34 | "vite": "^4.3.9" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --oxford-blue-2: hsla(222, 47%, 11%, 1); 3 | --cadet-grey: hsla(215, 20%, 65%, 1); 4 | --linear-gradient-1: linear-gradient(to top left, hsla(0, 72%, 51%, 0.4) 0%, hsla(262, 83%, 58%, 0.4)); 5 | --linear-gradient-2: linear-gradient(to right, hsla(262, 83%, 58%, 1), hsla(0, 72%, 51%, 1)); 6 | --linear-gradient-3: linear-gradient(to top right, hsla(0, 72%, 51%, 0.4) 0%, hsla(262, 83%, 58%, 0.4),hsla(0, 72%, 51%, 1), hsla(262, 83%, 58%, 1)); 7 | --border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb); 8 | } 9 | 10 | 11 | *, 12 | *::before, 13 | *::after { 14 | margin: 0; 15 | padding: 0; 16 | box-sizing: border-box; 17 | } 18 | 19 | li { list-style: none; } 20 | 21 | a, 22 | img, 23 | span, 24 | input, 25 | button { display: block; } 26 | 27 | a { 28 | text-decoration: none; 29 | color: inherit; 30 | } 31 | 32 | img { height: auto; } 33 | 34 | input, 35 | button { 36 | background: none; 37 | border: none; 38 | font: inherit; 39 | } 40 | 41 | input { width: 100%; } 42 | 43 | button { cursor: pointer; } 44 | 45 | 46 | html { 47 | font-family: var(--ff-urbanist); 48 | font-size: 10px; 49 | scroll-behavior: smooth; 50 | } 51 | 52 | body { 53 | background-color: var(--oxford-blue-2); 54 | color: var(--cadet-grey); 55 | } 56 | 57 | .body-bg-shape { 58 | position: fixed; 59 | top: 50%; 60 | left: 50%; 61 | transform: translate(-50%, -50%); 62 | width: 600px; 63 | height: 600px; 64 | background-image: var(--linear-gradient-1); 65 | border-radius: 50%; 66 | filter: blur(200px); 67 | z-index: -1; 68 | } 69 | 70 | .text-gradient{ 71 | display: inline; 72 | background-image: var(--linear-gradient-2); 73 | background-clip: text; 74 | -webkit-background-clip: text; 75 | -webkit-text-fill-color: transparent; 76 | } 77 | 78 | .btn { 79 | --border-width: .125em; 80 | --curve-size: .5em; 81 | --blur: 30px; 82 | --bg: #080312; 83 | --color: #afffff; 84 | color: var(--color); 85 | /* use position: relative; so that BG is only for .btn */ 86 | position: relative; 87 | isolation: isolate; 88 | z-index: 5; 89 | display: inline-grid; 90 | place-content: center; 91 | padding: .5em 1.5em; 92 | font-size: 17px; 93 | border: 0; 94 | text-transform: uppercase; 95 | box-shadow: 10px 10px 20px rgba(0, 0, 0, .6); 96 | clip-path: polygon( 97 | /* Top-left */ 98 | 0% var(--curve-size), 99 | 100 | var(--curve-size) 0, 101 | /* top-right */ 102 | 100% 0, 103 | 100% calc(100% - var(--curve-size)), 104 | 105 | /* bottom-right 1 */ 106 | calc(100% - var(--curve-size)) 100%, 107 | /* bottom-right 2 */ 108 | 0 100%); 109 | transition: color 250ms; 110 | } 111 | 112 | .btn::after, 113 | .btn::before { 114 | content: ''; 115 | position: absolute; 116 | inset: 0; 117 | } 118 | 119 | .btn::before { 120 | background: var(--border-color); 121 | background-size: 300% 300%; 122 | animation: move-bg7234 5s ease infinite; 123 | z-index: -2; 124 | } 125 | 126 | @keyframes move-bg7234 { 127 | 0% { 128 | background-position: 31% 0% 129 | } 130 | 131 | 50% { 132 | background-position: 70% 100% 133 | } 134 | 135 | 100% { 136 | background-position: 31% 0% 137 | } 138 | } 139 | 140 | .btn::after { 141 | background: var(--bg); 142 | z-index: -1; 143 | clip-path: polygon( 144 | /* Top-left */ 145 | var(--border-width) 146 | calc(var(--curve-size) + var(--border-width) * .5), 147 | 148 | calc(var(--curve-size) + var(--border-width) * .5) var(--border-width), 149 | 150 | /* top-right */ 151 | calc(100% - var(--border-width)) 152 | var(--border-width), 153 | 154 | calc(100% - var(--border-width)) 155 | calc(100% - calc(var(--curve-size) + var(--border-width) * .5)), 156 | 157 | /* bottom-right 1 */ 158 | calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)), 159 | /* bottom-right 2 */ 160 | var(--border-width) calc(100% - var(--border-width))); 161 | transition: clip-path 500ms; 162 | } 163 | 164 | .btn:where(:hover, :focus)::after { 165 | clip-path: polygon( 166 | /* Top-left */ 167 | calc(100% - var(--border-width)) 168 | 169 | calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)), 170 | 171 | calc(100% - var(--border-width)) 172 | 173 | var(--border-width), 174 | 175 | /* top-right */ 176 | calc(100% - var(--border-width)) 177 | 178 | var(--border-width), 179 | 180 | calc(100% - var(--border-width)) 181 | 182 | calc(100% - calc(var(--curve-size) + var(--border-width) * .5)), 183 | 184 | /* bottom-right 1 */ 185 | calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) 186 | calc(100% - var(--border-width)), 187 | 188 | /* bottom-right 2 */ 189 | calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) 190 | calc(100% - var(--border-width))); 191 | transition: 200ms; 192 | } 193 | 194 | .btn:where(:hover, :focus) { 195 | color: #fff; 196 | } 197 | 198 | @media (max-width:564px){ 199 | .btn{ 200 | font-size: 10px; 201 | } 202 | } 203 | 204 | body::-webkit-scrollbar { 205 | width:.61rem; 206 | } 207 | 208 | body::-webkit-scrollbar-track { 209 | box-shadow: inset 0 0 6px rgba(85, 33, 176, 0.646); 210 | } 211 | 212 | body::-webkit-scrollbar-thumb { 213 | background-image: var(--linear-gradient-3); 214 | border-radius: 5px 0px 0px 5px; 215 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import Navbar from './components/navbar' 2 | import './App.css' 3 | import Hero from './components/Hero' 4 | import Collection from './components/collection' 5 | import Top_Collection from './components/top_collection' 6 | import Creators_seller from './components/creators_seller' 7 | import Accordion from './components/Q&A' 8 | import Footer from './components/footer' 9 | import Contact from './components/contact' 10 | 11 | function App() { 12 | return ( 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
24 | ) 25 | } 26 | 27 | export default App 28 | -------------------------------------------------------------------------------- /src/assets/..svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | arrow_down [#338] Created with Sketch. 11 | 12 | -------------------------------------------------------------------------------- /src/assets/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/Thumbs.db -------------------------------------------------------------------------------- /src/assets/appstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/appstore.png -------------------------------------------------------------------------------- /src/assets/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/arrowdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | arrow_down [#338] Created with Sketch. 7 | -------------------------------------------------------------------------------- /src/assets/arrowup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | arrow_up [#337] Created with Sketch. 7 | -------------------------------------------------------------------------------- /src/assets/avatar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-1.jpg -------------------------------------------------------------------------------- /src/assets/avatar-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-10.png -------------------------------------------------------------------------------- /src/assets/avatar-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-11.png -------------------------------------------------------------------------------- /src/assets/avatar-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-12.png -------------------------------------------------------------------------------- /src/assets/avatar-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-13.png -------------------------------------------------------------------------------- /src/assets/avatar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-2.jpg -------------------------------------------------------------------------------- /src/assets/avatar-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-3.jpg -------------------------------------------------------------------------------- /src/assets/avatar-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-4.jpg -------------------------------------------------------------------------------- /src/assets/avatar-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-5.jpg -------------------------------------------------------------------------------- /src/assets/avatar-6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-6.gif -------------------------------------------------------------------------------- /src/assets/avatar-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-7.jpg -------------------------------------------------------------------------------- /src/assets/avatar-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-8.jpg -------------------------------------------------------------------------------- /src/assets/avatar-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/avatar-9.png -------------------------------------------------------------------------------- /src/assets/bolt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/check.png -------------------------------------------------------------------------------- /src/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/ethereum.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/index.js: -------------------------------------------------------------------------------- 1 | import menu from "./menu.svg"; 2 | import close from "./close.svg"; 3 | import nft from "./nft.png" 4 | import appstore from "./appstore.png" 5 | import avatar1 from './avatar-1.jpg'; 6 | import avatar2 from './avatar-2.jpg'; 7 | import avatar3 from './avatar-3.jpg'; 8 | import avatar4 from './avatar-4.jpg'; 9 | import avatar5 from './avatar-5.jpg'; 10 | import avatar6 from './avatar-6.gif'; 11 | import avatar7 from './avatar-7.jpg'; 12 | import avatar8 from './avatar-8.jpg'; 13 | import avatar9 from './avatar-9.png'; 14 | import avatar10 from './avatar-10.png'; 15 | import avatar11 from './avatar-11.png'; 16 | import avatar12 from './avatar-12.png'; 17 | import avatar13 from './avatar-13.png'; 18 | import showcase1 from './showcase-1.jpg'; 19 | import showcase2 from './showcase-2.jpg'; 20 | import showcase3 from './showcase-3.jpg'; 21 | import showcase4 from './showcase-4.jpg'; 22 | import showcase5 from './showcase-5.jpg'; 23 | import showcase6 from './showcase-6.gif'; 24 | import showcase7 from './showcase-7.jpg'; 25 | import showcase8 from './showcase-8.gif'; 26 | import showcase9 from './showcase-9.jpg'; 27 | import showcase10 from './showcase-10.png'; 28 | import showcase11 from './showcase-11.png'; 29 | import showcase12 from './showcase-12.png'; 30 | import showcase13 from './showcase-13.jpg'; 31 | import arrowup from './arrowup.svg'; 32 | import arrowdown from './arrowdown.svg'; 33 | import ethereum from './ethereum.svg'; 34 | import logosmall from './logo-small.svg'; 35 | import playstore from './playstore.png'; 36 | import profile from './profile.jpg'; 37 | import bolt from './bolt.svg'; 38 | import check from './check.png' 39 | import checked from './register.png' 40 | import verified from './verified.svg' 41 | import logo from './logo.svg' 42 | 43 | export{ 44 | logo, 45 | verified, 46 | checked, 47 | check, 48 | bolt, 49 | profile, 50 | playstore, 51 | logosmall, 52 | ethereum, 53 | appstore, 54 | avatar1, 55 | avatar2, 56 | avatar3, 57 | avatar4, 58 | avatar5, 59 | avatar6, 60 | avatar7, 61 | avatar8, 62 | avatar9, 63 | avatar10, 64 | avatar11, 65 | avatar12, 66 | avatar13, 67 | showcase1, 68 | showcase2, 69 | showcase3, 70 | showcase4, 71 | showcase5, 72 | showcase6, 73 | showcase7, 74 | showcase8, 75 | showcase9, 76 | showcase10, 77 | showcase11, 78 | showcase12, 79 | showcase13, 80 | menu, 81 | nft, 82 | close, 83 | arrowdown, 84 | arrowup 85 | }; -------------------------------------------------------------------------------- /src/assets/logo-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/assets/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/nft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/nft.png -------------------------------------------------------------------------------- /src/assets/playstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/playstore.png -------------------------------------------------------------------------------- /src/assets/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/profile.jpg -------------------------------------------------------------------------------- /src/assets/register.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/register.png -------------------------------------------------------------------------------- /src/assets/showcase-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-1.jpg -------------------------------------------------------------------------------- /src/assets/showcase-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-10.png -------------------------------------------------------------------------------- /src/assets/showcase-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-11.png -------------------------------------------------------------------------------- /src/assets/showcase-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-12.png -------------------------------------------------------------------------------- /src/assets/showcase-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-13.jpg -------------------------------------------------------------------------------- /src/assets/showcase-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-2.jpg -------------------------------------------------------------------------------- /src/assets/showcase-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-3.jpg -------------------------------------------------------------------------------- /src/assets/showcase-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-4.jpg -------------------------------------------------------------------------------- /src/assets/showcase-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-5.jpg -------------------------------------------------------------------------------- /src/assets/showcase-6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-6.gif -------------------------------------------------------------------------------- /src/assets/showcase-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-7.jpg -------------------------------------------------------------------------------- /src/assets/showcase-8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-8.gif -------------------------------------------------------------------------------- /src/assets/showcase-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/MetaLink/bb97e4fdd6267d862932c1ca398eb3b07d0f7edd/src/assets/showcase-9.jpg -------------------------------------------------------------------------------- /src/assets/verified.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {nft} from '../assets' 3 | import './hero.css' 4 | 5 | function Hero() { 6 | return ( 7 |
8 | 9 |
10 |

Discover rate collection or Arts & NFTS

11 |

We are a huge marketplace dedicated to connecting great artists of all Metalink with their fans and unique token collectors!

12 | 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Hero -------------------------------------------------------------------------------- /src/components/Q&A.css: -------------------------------------------------------------------------------- 1 | .qa{ 2 | margin-top: 5rem; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | align-items: center ; 7 | } 8 | /* .wrapper{ 9 | display: flex; 10 | justify-items: center; 11 | align-items: center; 12 | overflow: hidden; 13 | } */ 14 | 15 | .accordion{ 16 | max-width: 700px; 17 | } 18 | 19 | .Accordion-items{ 20 | background-color: transparent; 21 | margin-bottom: 10px; 22 | padding: 20px; 23 | border: 1px solid rgba(99, 98, 98, 0.6); 24 | border-radius: 5px; 25 | } 26 | .title{ 27 | width: 100%; 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | padding: 10px; 32 | font-size: 20px; 33 | color: white; 34 | cursor: pointer; 35 | } 36 | .sign{ 37 | font-size: 20px; 38 | margin-right: 10px; 39 | } 40 | .content{ 41 | font-weight: 400; 42 | font-size: 17px; 43 | padding-left: 10px; 44 | max-height: 0; 45 | overflow: hidden; 46 | transition: all 0.5s cubic-bezier(0,1,0,1); 47 | } 48 | .content.show{ 49 | height: auto; 50 | max-height: 9999px; 51 | transition: all 0.5s cubic-bezier(1,0,1,0); 52 | } 53 | 54 | @media (max-width: 564px){ 55 | .qa{ 56 | margin-top: 3rem; 57 | padding: 20px; 58 | } 59 | .title{ 60 | font-size: 16px; 61 | } 62 | .content{ 63 | font-size: 13px; 64 | } 65 | } -------------------------------------------------------------------------------- /src/components/Q&A.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react"; 2 | import { QA } from "../constants"; 3 | import './Q&A.css'; 4 | 5 | function Accordion (){ 6 | 7 | const [open , setopen] = useState(null) 8 | 9 | const toggle = (index) => { 10 | if (open === index ){ 11 | return setopen(null) 12 | } 13 | 14 | setopen(index) 15 | } 16 | return( 17 |
18 | 19 |

Q&A

20 |

We are a huge marketplace dedicated to connecting great artists of all Metalink with their fans and unique token collectors!

21 |
22 |
23 | {QA.map(( items , index )=> ( 24 |
25 |
toggle(index)}> 26 |

{items.title}

27 | 28 |
29 |
30 |

{items.ans}

31 |
32 |
33 | ))} 34 |
35 |
36 |
37 | ) 38 | } 39 | 40 | export default Accordion -------------------------------------------------------------------------------- /src/components/ani.css: -------------------------------------------------------------------------------- 1 | 2 | .top_collection::-webkit-scrollbar-track{ 3 | background: white; 4 | outline: 2px solid black; 5 | border-radius: 10px; 6 | } 7 | .top_collection::-webkit-scrollbar-thumb{ 8 | background-color: black; 9 | border: 1px solid red; 10 | border-radius: 10px; 11 | } 12 | .top_collection::-webkit-scrollbar-button{ 13 | width: 10%; 14 | } -------------------------------------------------------------------------------- /src/components/cards.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import {card} from "../constants"; 3 | import Collection_cards from "./collection_cards"; 4 | import { motion } from "framer-motion"; 5 | import { useInView } from 'react-intersection-observer'; 6 | 7 | function Card() { 8 | const [visible, setVisible] = useState(4); 9 | const [ref, inView] = useInView({ 10 | triggerOnce: true, 11 | threshold: 0.2, 12 | }); 13 | 14 | const showMoreItems = () => { 15 | setVisible(prevState => prevState + 4); 16 | }; 17 | 18 | return ( 19 |
20 | {card.slice(0, visible).map((cards, i) => ( 21 |
25 | {inView && ( 26 | 31 | 41 | 42 | )} 43 |
44 | ))} 45 | 46 | 49 |
50 | ); 51 | } 52 | export default Card -------------------------------------------------------------------------------- /src/components/collection.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Card from './cards'; 3 | 4 | const Collection = (props) => { 5 | return ( 6 |
7 |
8 |
Discover Items
9 |
10 | 11 |
12 | 13 |
14 |
15 | ); 16 | } 17 | 18 | export default Collection; 19 | -------------------------------------------------------------------------------- /src/components/collection_card.css: -------------------------------------------------------------------------------- 1 | 2 | .collection_Card{ 3 | display: flex; 4 | flex-direction: column; 5 | background-color: #0f1729; 6 | padding: 1rem; 7 | max-width: 250px; 8 | border-radius: 10px; 9 | transition: 5s ease-in; 10 | box-shadow: 00 5px 13px hsl(217, 19%, 27%); 11 | } 12 | .collection_Card:hover{ 13 | transform: translateY(-8px); 14 | } 15 | .nft_img{ 16 | width: 100%; 17 | border-radius: 9px; 18 | /* position: relative; */ 19 | } 20 | .btn-card{ 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | padding: .5rem; 25 | background-color: #6b26d9; 26 | width: 40%; 27 | font-size: 15px; 28 | color: white; 29 | border-radius: 10px; 30 | cursor: pointer; 31 | position: absolute; 32 | top: calc(-15% + 50px); 33 | left: 50%; 34 | transform: translate(-50%, -50%); 35 | transition: 500ms ease-in; 36 | } 37 | .collection_Card:is(:hover,:focus) .btn-card{ 38 | top: 30%; 39 | } 40 | .btn-card:hover{ 41 | background-color: #6b26d9c7; 42 | } 43 | .profile{ 44 | margin-top: 10px; 45 | display: flex; 46 | align-items: center; 47 | font-size: 1.5rem; 48 | } 49 | .profile>img{ 50 | border-radius: 50%; 51 | margin-right: 5px; 52 | width: 20%; 53 | } 54 | 55 | .des{ 56 | margin: 10px 0px; 57 | font-size: 1.8rem; 58 | font-weight: 700; 59 | color: #ffffff; 60 | } 61 | .price_bid{ 62 | display: flex; 63 | justify-content: space-between; 64 | background-color: #1d283a; 65 | padding: 10px; 66 | border-radius: 10px; 67 | } 68 | .price_title{ 69 | font-size: 20px; 70 | } 71 | .price{ 72 | display: flex; 73 | flex-direction: row-reverse; 74 | font-size: 20px; 75 | color: #ffffff; 76 | font-weight: 500; 77 | } 78 | 79 | @media (max-width:764px){ 80 | .price_title{ 81 | font-size: 18px; 82 | } 83 | .price{ 84 | font-size: 18px; 85 | } 86 | } 87 | 88 | @media (max-width:564px){ 89 | .price_title{ 90 | font-size: 14px; 91 | font-weight: 500; 92 | } 93 | .price{ 94 | font-size: 14px; 95 | } 96 | } -------------------------------------------------------------------------------- /src/components/collection_cards.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import './collection_card.css'; 3 | 4 | 5 | export default function Collection_cards(props){ 6 | return( 7 |
8 | 9 |
10 | 11 | nft 12 | 13 | 14 |
15 | seller 16 |

{props.seller}

17 |
18 | 19 |

{props.des}

20 | 21 |
22 |
23 |

Price

24 |
25 |

{props.price}

26 | eth 27 |
28 |
29 | 30 |
31 |

Highest Bid

32 |
33 |

{props.highestbid}

34 | eth 35 |
36 |
37 | 38 | 39 |
40 | 41 |
42 |
43 | ) 44 | } -------------------------------------------------------------------------------- /src/components/contact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Contact() { 4 | return ( 5 |
6 |

Get In Touch

7 |

We are a huge marketplace dedicated to connecting great artists of all Metalink with their fans and unique token collectors!

8 | 9 |
10 | ) 11 | } 12 | 13 | export default Contact -------------------------------------------------------------------------------- /src/components/creators_seller.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Seller from './seller' 3 | import './seller.css' 4 | 5 | function Creators_seller() { 6 | return ( 7 |
8 |

Best Creator & Sellers

9 | 10 |
11 | 12 |
13 |
14 | ) 15 | } 16 | 17 | export default Creators_seller -------------------------------------------------------------------------------- /src/components/footer.jsx: -------------------------------------------------------------------------------- 1 | import {logo, playstore, appstore } from '../assets'; 2 | import { footerLinks} from "../constants"; 3 | 4 | const Footer = () => ( 5 |
6 |
7 |
8 | hoobank 13 |

14 | Buy, sell and discover exclusive digital assets by the top artists of NFTs world. 15 |

16 |
17 | 18 |
19 | {footerLinks.map((footerlink) => ( 20 |
21 |

22 | {footerlink.title} 23 |

24 |
    25 | {footerlink.links.map((link, index) => ( 26 |
  • 32 | {link.name} 33 |
    • 34 | ))} 35 |
36 |
37 | ))} 38 |
39 |

Download the App

40 | APP 45 | 46 |
47 |
48 |
49 | 50 |

51 | ⒸM.Abdullah All Rights Reserved. 52 |

53 |
54 | ); 55 | 56 | export default Footer; -------------------------------------------------------------------------------- /src/components/hero.css: -------------------------------------------------------------------------------- 1 | .Hero_container{ 2 | height: 80vh; 3 | /* max-width: 1280px; */ 4 | margin-top: 5rem; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | text-align: center; 9 | /* flex-direction: column; */ 10 | } 11 | .hero_heading{ 12 | padding: 2rem; 13 | display: flex; 14 | align-items: center; 15 | flex-direction: column; 16 | } 17 | 18 | @media (max-width:764px){ 19 | .Hero_container{ 20 | padding: 2rem; 21 | } 22 | .hero_heading{ 23 | text-align: center; 24 | align-items: center; 25 | 26 | } 27 | } -------------------------------------------------------------------------------- /src/components/item-card.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import './item_card.css'; 3 | import Items from './items'; 4 | 5 | const Item_card = (props) => { 6 | return ( 7 |
8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 |

{props.des}

16 | by 17 |

{props.seller}

18 |

{props.item}

19 |
20 | ) 21 | } 22 | 23 | export default Item_card; 24 | -------------------------------------------------------------------------------- /src/components/item_card.css: -------------------------------------------------------------------------------- 1 | .item_container{ 2 | display: flex; 3 | flex-direction:column;; 4 | max-width: 250px; 5 | padding: 10px; 6 | background-color: #0f1729; 7 | border-radius: 10px; 8 | } 9 | .nft{ 10 | width: 100%; 11 | border-radius: 10px; 12 | } 13 | .pp{ 14 | width: 25%; 15 | margin-top: -20px; 16 | background-color: #0f1729; 17 | border-radius: 10px; 18 | margin-left: 10px; 19 | } 20 | .verified_icon{ 21 | margin-top: -16px; 22 | margin-left: 55px; 23 | } 24 | .verified_des{ 25 | color: white; 26 | font-size: 22px; 27 | font-weight: 500; 28 | } 29 | .verified_Seller{ 30 | color: #7c3bed; 31 | font-size: 16px; 32 | font-weight: 500; 33 | } 34 | .verified_items{ 35 | font-size: 12px; 36 | } 37 | -------------------------------------------------------------------------------- /src/components/items.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { collection } from "../constants"; 3 | import Item_card from "./item-card"; 4 | 5 | function Items() { 6 | return ( 7 | <> 8 | {collection.map((item) => ( 9 | 18 | ))} 19 | 20 | ); 21 | } 22 | 23 | export default Items; 24 | -------------------------------------------------------------------------------- /src/components/navbar.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import {logo, close, menu} from '../assets'; 3 | import { navLinks } from '../constants' 4 | 5 | const Navbar = () => { 6 | const [showMenu, setShowMenu] = useState(false) 7 | return ( 8 | 47 | ) 48 | }; 49 | 50 | export default Navbar; 51 | -------------------------------------------------------------------------------- /src/components/seller.css: -------------------------------------------------------------------------------- 1 | .seller_container{ 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-between; 5 | max-width: 350px; 6 | align-items: center; 7 | background-color: #0f1729; 8 | border-radius: 10px; 9 | } 10 | .verified{ 11 | margin-top: -25px; 12 | margin-left: 82%; 13 | } 14 | .seller_profile{ 15 | width: 25%; 16 | } 17 | .seller_pp{ 18 | width: 100%; 19 | border-radius: 10%; 20 | flex-shrink: 0; 21 | } 22 | 23 | .seller_details{ 24 | font-size: 18px; 25 | } 26 | 27 | .adduser{ 28 | margin-right: 10px; 29 | padding:15px; 30 | cursor: pointer; 31 | background-color: #112141; 32 | border-radius: 50%; 33 | box-shadow: inset; 34 | } 35 | .adduser:hover{ 36 | transform: scale(1.1); 37 | } 38 | 39 | @media (max-width: 375px){ 40 | .seller_details{ 41 | font-size: 11px; 42 | } 43 | .adduser{ 44 | margin-right: 5px; 45 | padding: 7px; 46 | } 47 | .verified{ 48 | width: 45%; 49 | } 50 | } -------------------------------------------------------------------------------- /src/components/seller.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { seller } from "../constants"; 3 | import Seller_Card from "./seller_card"; 4 | import './seller_Card.css' 5 | export default function Seller(){ 6 | return( 7 | 8 |
9 | {seller.map((sellers)=>( 10 | 18 | ))} 19 |
20 | ) 21 | } -------------------------------------------------------------------------------- /src/components/seller_Card.css: -------------------------------------------------------------------------------- 1 | .seller_cards{ 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: center; 5 | justify-content: center; 6 | align-items: center; 7 | padding: 20px; 8 | max-width: 1280px; 9 | gap: 24px; 10 | border-radius: 10px; 11 | } -------------------------------------------------------------------------------- /src/components/seller_card.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const Seller_Card = (props) => { 4 | const [isAdded, setIsAdded] = useState(false); 5 | 6 | const toggle = () => { 7 | setIsAdded(prevStat => !prevStat); 8 | }; 9 | 10 | return ( 11 |
12 |
13 | 14 | 15 |
16 | 17 |
18 |

{props.item.name}

19 |

{props.item.nick}

20 |
21 | 22 |
23 | 24 |
25 |
26 | ); 27 | }; 28 | 29 | export default Seller_Card; 30 | -------------------------------------------------------------------------------- /src/components/top_collection.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Item_card from './items' 3 | import './ani.css'; 4 | 5 | const Top_Collection = (props) => { 6 | return ( 7 |
8 |
9 |
Top Collection
10 |
11 | 12 |
13 | 14 |
15 |
16 | ); 17 | } 18 | 19 | export default Top_Collection; 20 | -------------------------------------------------------------------------------- /src/constants/index.js: -------------------------------------------------------------------------------- 1 | import { showcase1, avatar1 , playstore, logosmall,ethereum, 2 | appstore,avatar2, 3 | avatar3,avatar4,avatar5, avatar6, avatar7, avatar8, showcase2, showcase3,showcase4,showcase5,showcase6, showcase7, showcase8, bolt, showcase9, avatar9, showcase10, avatar10, showcase11, avatar11, showcase12, avatar12, showcase13, avatar13, verified, check, checked, arrowdown, arrowup } from "../assets"; 4 | export const card = [ 5 | { 6 | id: 1, 7 | nft: showcase8, 8 | seller: "@Street Boy", 9 | sellerProfile: avatar1, 10 | description: "Shibuya Scramble Punks", 11 | price: "3.5ETH", 12 | HighestBid: "4.5ETH", 13 | ethereum : ethereum, 14 | flash : bolt 15 | }, 16 | { 17 | id: 2, 18 | nft: showcase2, 19 | seller: "@gull dan", 20 | sellerProfile: avatar2, 21 | description: "Windchime #768", 22 | price: "3.5ETH", 23 | HighestBid: "4.5ETH", 24 | ethereum : ethereum, 25 | flash : bolt 26 | }, 27 | { 28 | id:3, 29 | nft: showcase3, 30 | seller: "@Street Boy", 31 | sellerProfile : avatar3, 32 | description: "Probably A label", 33 | price : "3.5ETH", 34 | HighestBid : "4.5ETH", 35 | ethereum : ethereum, 36 | flash : bolt 37 | }, 38 | 39 | { 40 | id:4, 41 | nft: showcase4, 42 | seller: "@Street Boy", 43 | sellerProfile : avatar4, 44 | description: "Probably A label", 45 | price : "3.5ETH", 46 | HighestBid : "4.5ETH", 47 | ethereum : ethereum, 48 | flash : bolt 49 | }, 50 | 51 | { 52 | id:5, 53 | nft: showcase5, 54 | seller: "@Angel", 55 | sellerProfile : avatar5, 56 | description: "Looki #0147", 57 | price : "3.5ETH", 58 | HighestBid : "4.5ETH", 59 | ethereum : ethereum, 60 | flash : bolt 61 | }, 62 | 63 | { 64 | id:6, 65 | nft: showcase6, 66 | seller: "@Sbigbull", 67 | sellerProfile : avatar6, 68 | description: "Poob #285", 69 | price : "33.5ETH", 70 | HighestBid : "44.5ETH", 71 | ethereum : ethereum, 72 | flash : bolt 73 | }, 74 | { 75 | id:7, 76 | nft: showcase7, 77 | seller: "@Butterfly", 78 | sellerProfile : avatar7, 79 | description: "Probably A label", 80 | price : "4.5ETH", 81 | HighestBid : "4ETH", 82 | ethereum : ethereum, 83 | flash : bolt 84 | }, 85 | { 86 | id:8, 87 | nft: showcase1, 88 | seller: "@CrazAnyone", 89 | sellerProfile : avatar8, 90 | description: "Probably A label", 91 | price : "2.5ETH", 92 | HighestBid : "7.5ETH", 93 | ethereum : ethereum, 94 | flash : bolt 95 | }, 96 | 97 | { 98 | id:10, 99 | nft: showcase10, 100 | seller: "@CrazAnyone", 101 | sellerProfile : avatar10, 102 | description: "Probably A label", 103 | price : "2.5ETH", 104 | HighestBid : "7.5ETH", 105 | ethereum : ethereum, 106 | flash : bolt 107 | }, 108 | { 109 | id:11, 110 | nft: showcase11, 111 | seller: "@BUtterfily", 112 | sellerProfile : avatar11, 113 | description: "Probably A label", 114 | price : "2.5ETH", 115 | HighestBid : "7.5ETH", 116 | ethereum : ethereum, 117 | flash : bolt 118 | }, 119 | { 120 | id:12, 121 | nft: showcase12, 122 | seller: "@CrazAnyone", 123 | sellerProfile : avatar12, 124 | description: "WindChine", 125 | price : "2.5ETH", 126 | HighestBid : "7.5ETH", 127 | ethereum : ethereum, 128 | flash : bolt 129 | }, 130 | { 131 | id:13, 132 | nft: showcase13, 133 | seller: "@BigBUll", 134 | sellerProfile : avatar13, 135 | description: "Undeaad", 136 | price : "2.5ETH", 137 | HighestBid : "7.5ETH", 138 | ethereum : ethereum, 139 | flash : bolt 140 | }, 141 | 142 | ] 143 | 144 | export const navLinks = [ 145 | { 146 | id: "home", 147 | title: "Home", 148 | }, 149 | { 150 | id: "features", 151 | title: "Features", 152 | }, 153 | { 154 | id: "product", 155 | title: "Product", 156 | }, 157 | { 158 | id: "clients", 159 | title: "Clients", 160 | }, 161 | ]; 162 | 163 | export const collection = [ 164 | { 165 | id:"collection1", 166 | nft: showcase8, 167 | seller: "@CrazAnyone", 168 | sellerProfile : avatar13, 169 | description: "Ape Collection", 170 | verified : verified, 171 | items: "25 Items" 172 | }, 173 | { 174 | id:"collection2", 175 | nft: showcase1, 176 | seller: "@Frostz", 177 | sellerProfile : avatar2, 178 | description: "Sports Collection", 179 | verified : verified, 180 | items: "25 Items" 181 | }, 182 | { 183 | id:"collection3", 184 | nft: showcase4, 185 | seller: "@BigBUll", 186 | sellerProfile : avatar4, 187 | description: "Illustration Collection", 188 | verified : verified, 189 | items: "25 Items" 190 | }, 191 | { 192 | id:"collection4", 193 | nft: showcase6, 194 | seller: "@CrazAnyone", 195 | sellerProfile : avatar6, 196 | description: "Animation Collection", 197 | verified : verified, 198 | items: "25 Items" 199 | } 200 | // { 201 | // id:"collection5", 202 | // nft: showcase7, 203 | // seller: "@CrazAnyone", 204 | // sellerProfile : avatar8, 205 | // description: "sports collection", 206 | // verified : verified, 207 | // items: "25 Items" 208 | // } 209 | // , 210 | // { 211 | // id:"collection6", 212 | // nft: showcase8, 213 | // seller: "@CrazAnyone", 214 | // sellerProfile : avatar8, 215 | // description: "sports collection", 216 | // verified : verified, 217 | // items: "25 Items" 218 | // } 219 | ] 220 | 221 | export const seller = [ 222 | { 223 | id: "seller1", 224 | profile : avatar1, 225 | name : "Steven Temnosd", 226 | nick : "@StreetBoy", 227 | verified : verified, 228 | adduser: check, 229 | addeduser : checked 230 | }, 231 | { 232 | id: "seller2", 233 | profile : avatar2, 234 | name : "Tiffany Betancourt", 235 | nick : "@cutiegirl", 236 | verified : verified, 237 | adduser: check, 238 | addeduser : checked 239 | }, 240 | { 241 | id: "seller3", 242 | profile : avatar3, 243 | name : "jacqueline Burns", 244 | nick : "@ANgel", 245 | verified : verified, 246 | adduser: check, 247 | addeduser : checked 248 | }, 249 | { 250 | id: "seller4", 251 | profile : avatar4, 252 | name : "Donna Schultz", 253 | nick : "@princes", 254 | verified : verified, 255 | adduser: check, 256 | addeduser : checked 257 | }, 258 | { 259 | id: "seller5", 260 | profile : avatar5, 261 | name : "Floyd Glasgow", 262 | nick : "@forstz", 263 | verified : verified, 264 | adduser: check, 265 | addeduser : checked 266 | }, 267 | { 268 | id: "seller6", 269 | profile : avatar1, 270 | name : "Mari Harrington", 271 | nick : "@cRaz", 272 | verified : verified, 273 | adduser: check, 274 | addeduser : checked 275 | }, 276 | { 277 | id: "seller7", 278 | profile : avatar7, 279 | name : "Joshua Morris", 280 | nick : "@bigbull", 281 | verified : verified, 282 | adduser: check, 283 | addeduser : checked 284 | }, 285 | { 286 | id: "seller8", 287 | profile : avatar8, 288 | name : "Rosaria Vargas", 289 | nick : "@LooserBrad", 290 | verified : verified, 291 | adduser: check, 292 | addeduser : checked 293 | }, 294 | { 295 | id: "seller9", 296 | profile : avatar1, 297 | name : "Carl Williams", 298 | nick : "Butterfily", 299 | verified : verified, 300 | adduser: check, 301 | addeduser : checked 302 | } 303 | ] 304 | 305 | export const QA = [ 306 | { 307 | id:"q!", 308 | title: "What is MetaLink?", 309 | ans : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", 310 | arrowDown : arrowdown, 311 | arrowUp : arrowup 312 | }, 313 | { 314 | id:"q2", 315 | title: "Do I need a designer to use Metalink?", 316 | ans : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", 317 | arrowDown : arrowdown, 318 | arrowUp : arrowup 319 | }, 320 | { 321 | id:"q3", 322 | title: "What do i need to start selling?", 323 | ans : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", 324 | arrowDown : arrowdown, 325 | arrowUp : arrowup 326 | }, 327 | { 328 | id:"q4", 329 | title: "What happens when i recieve order?", 330 | ans : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", 331 | arrowDown : arrowdown, 332 | arrowUp : arrowup 333 | } 334 | ] 335 | export const footerLinks = [ 336 | { 337 | title: "Useful Links", 338 | links: [ 339 | { 340 | name: "Content", 341 | link: "https://www.Metalink.com/content/", 342 | }, 343 | { 344 | name: "How it Works", 345 | link: "https://www.Metalink.com/how-it-works/", 346 | }, 347 | { 348 | name: "Create", 349 | link: "https://www.Metalink.com/create/", 350 | }, 351 | { 352 | name: "Explore", 353 | link: "https://www.Metalink.com/explore/", 354 | }, 355 | { 356 | name: "Terms & Services", 357 | link: "https://www.Metalink.com/terms-and-services/", 358 | }, 359 | ], 360 | }, 361 | { 362 | title: "Community", 363 | links: [ 364 | { 365 | name: "Help Center", 366 | link: "https://www.Metalink.com/help-center/", 367 | }, 368 | { 369 | name: "Partners", 370 | link: "https://www.Metalink.com/partners/", 371 | }, 372 | { 373 | name: "Suggestions", 374 | link: "https://www.Metalink.com/suggestions/", 375 | }, 376 | { 377 | name: "Blog", 378 | link: "https://www.Metalink.com/blog/", 379 | }, 380 | { 381 | name: "Newsletters", 382 | link: "https://www.Metalink.com/newsletters/", 383 | }, 384 | ], 385 | }, 386 | ]; 387 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{html,js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | 13 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | --------------------------------------------------------------------------------