├── .editorconfig ├── .eslintrc.cjs ├── .gitignore ├── .prettierrc ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.jsx ├── Pages │ ├── Home │ │ └── Home.jsx │ ├── Profile │ │ ├── Profile.jsx │ │ ├── components │ │ │ ├── Filters.jsx │ │ │ └── SubPages │ │ │ │ ├── Created.jsx │ │ │ │ ├── Favorited.jsx │ │ │ │ ├── MyCollection.jsx │ │ │ │ └── Offers.jsx │ │ └── styles │ │ │ ├── Button │ │ │ ├── Button.jsx │ │ │ └── CategoryButton.jsx │ │ │ ├── Card │ │ │ └── CardWrapper.jsx │ │ │ ├── Input │ │ │ ├── FilterMenu.jsx │ │ │ ├── Search │ │ │ │ ├── SearchIcon.jsx │ │ │ │ ├── SearchInput.jsx │ │ │ │ └── SearchWrapper.jsx │ │ │ └── SelectInput.jsx │ │ │ ├── PageWrapper.jsx │ │ │ ├── Profile │ │ │ ├── ProfileBanner.jsx │ │ │ ├── ProfileImage.jsx │ │ │ └── ProfileWrapper.jsx │ │ │ └── Sections │ │ │ ├── AboutMe.jsx │ │ │ ├── CardSection.jsx │ │ │ ├── CreatedForm.jsx │ │ │ ├── SectionTile.jsx │ │ │ └── Sections.jsx │ └── Sign │ │ └── Sign.jsx ├── Ui │ ├── Components │ │ ├── Header │ │ │ ├── assets │ │ │ │ └── NFTART.png │ │ │ ├── index.jsx │ │ │ └── styles.js │ │ ├── Button │ │ │ └── Button.jsx │ │ ├── Cards │ │ │ ├── CardCollection │ │ │ │ ├── index.jsx │ │ │ │ └── styles.js │ │ │ ├── CardHome │ │ │ │ ├── index.jsx │ │ │ │ └── styles.js │ │ │ └── assets │ │ │ │ ├── avatar.svg │ │ │ │ ├── avatar1.svg │ │ │ │ ├── avatar2.svg │ │ │ │ ├── avatar3.svg │ │ │ │ ├── avatar4.svg │ │ │ │ ├── collection.svg │ │ │ │ ├── ethereum.svg │ │ │ │ └── image.svg │ │ ├── Footer │ │ │ ├── Footer.jsx │ │ │ ├── Index.jsx │ │ │ └── style.css │ │ └── Input │ │ │ └── Input.jsx │ └── Img │ │ ├── Selo.png │ │ ├── icons │ │ ├── card-tick.png │ │ ├── chart-square.png │ │ └── file.svg │ │ ├── img-card-hover │ │ ├── CardHoverCinco.png │ │ ├── CardHoverDois.png │ │ ├── CardHoverQuatro.png │ │ ├── CardHoverTreis.png │ │ ├── CardHoverUm.png │ │ ├── ImgAdventureTime.png │ │ ├── ImgCardHomeArt.png │ │ ├── ImgHomeUm.png │ │ └── ImgPerfilUsuarioArt.png │ │ └── logo.png ├── global.css ├── main.jsx └── variable.css ├── vite.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = crlf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | import { ESLint } from 'eslint'; 2 | 3 | // eslint-disable-next-line no-undef 4 | module.exports = { 5 | env: { browser: true, es2020: true }, 6 | extends: [ 7 | 'eslint:recommended', 8 | 'plugin:react/recommended', 9 | 'plugin:react/jsx-runtime', 10 | 'plugin:react-hooks/recommended', 11 | ], 12 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 13 | settings: { react: { version: '18.2' } }, 14 | plugins: ['react-refresh', 'prettier'], 15 | extends: ['prettier'], 16 | rules: { 17 | 'react-refresh/only-export-components': 'warn', 18 | 'react/prop-types': 'off', 19 | 'prettier/prettier': 'warn', 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Vite + React 16 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "marketplace-nft-frontend", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "format": "prettier --write src", 11 | "preview": "vite preview" 12 | }, 13 | "dependencies": { 14 | "lucide-react": "^0.240.0", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-icons": "^4.9.0", 18 | "react-router-dom": "^6.11.2", 19 | "styled-components": "^5.3.11" 20 | }, 21 | "devDependencies": { 22 | "@types/react": "^18.0.37", 23 | "@types/react-dom": "^18.0.11", 24 | "@types/styled-components": "^5.1.26", 25 | "@vitejs/plugin-react": "^4.0.0", 26 | "eslint": "^8.41.0", 27 | "eslint-config-prettier": "^8.8.0", 28 | "eslint-plugin-prettier": "^4.2.1", 29 | "eslint-plugin-react": "^7.32.2", 30 | "eslint-plugin-react-hooks": "^4.6.0", 31 | "eslint-plugin-react-refresh": "^0.3.4", 32 | "prettier": "^2.8.8", 33 | "prettier-eslint": "^15.0.1", 34 | "vite": "^4.3.9" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import Profile from './Pages/Profile/Profile'; 2 | import Favorited from './Pages/Profile/components/SubPages/Favorited'; 3 | import MyCollection from './Pages/Profile/components/SubPages/MyCollection'; 4 | import Offers from './Pages/Profile/components/SubPages/Offers'; 5 | import Created from './Pages/Profile/components/SubPages/Created'; 6 | 7 | import Register from './Pages/Sign/Sign'; 8 | 9 | import Main from './Pages/Home/Home'; 10 | 11 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 12 | import { Header } from './Ui/Components/ Header'; 13 | 14 | const App = () => { 15 | return ( 16 | 17 | 18 | } /> 19 | 20 | 24 | 25 | 26 | } 27 | /> 28 | 32 | 33 | 34 | } 35 | /> 36 | 40 | 41 | 42 | } 43 | /> 44 | 48 | 49 | 50 | } 51 | /> 52 | 56 | 57 | 58 | } 59 | /> 60 | 61 | } /> 62 | } /> 63 | 64 | 65 | ); 66 | }; 67 | 68 | export default App; 69 | -------------------------------------------------------------------------------- /src/Pages/Home/Home.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { SiEthereum } from 'react-icons/si'; 3 | import imgSelo from '../../Ui/Img/Selo.png'; 4 | import iconFast from '../../Ui/Img/icons/card-tick.png'; 5 | import iconSafe from '../../Ui/Img/icons/chart-square.png'; 6 | import cardHoverUm from '../../Ui/Img/img-card-hover/CardHoverUm.png'; 7 | import cardHoverDois from '../../Ui/Img/img-card-hover/CardHoverDois.png'; 8 | import cardHoverTres from '../../Ui/Img/img-card-hover/CardHoverTreis.png'; 9 | import cardHoverQuatro from '../../Ui/Img/img-card-hover/CardHoverQuatro.png'; 10 | import cardHoverCinco from '../../Ui/Img/img-card-hover/CardHoverCinco.png'; 11 | import { useState } from 'react'; 12 | import Footer from '../../Ui/Components/Footer/Footer'; 13 | import { Header } from '../../Ui/Components/ Header'; 14 | 15 | 16 | const HeaderPagina = styled.div` 17 | background: rgb(0, 0, 0); 18 | background: linear-gradient( 19 | 180deg, 20 | rgba(0, 0, 0, 1) 0%, 21 | rgba(0, 0, 0, 1) 87%, 22 | rgba(198, 42, 234, 1) 100% 23 | ); 24 | height: 90vh; 25 | display: flex; 26 | `; 27 | 28 | const Headerbox1 = styled.div` 29 | width: 60%; 30 | `; 31 | 32 | const TextTitle = styled.div` 33 | font-family: 'Poppins'; 34 | font-style: normal; 35 | font-weight: 700; 36 | font-size: 35px; 37 | line-height: 46px; 38 | letter-spacing: 0.015em; 39 | color: #ffffff; 40 | padding-top: 180px; 41 | padding-left: 100px; 42 | `; 43 | 44 | const TextDecoder = styled.div` 45 | padding-left: 100px; 46 | font-family: 'DM Sans', sans-serif; 47 | font-weight: 200; 48 | font-size: 17px; 49 | line-height: 160%; 50 | color: #ffffff; 51 | `; 52 | 53 | const ButtonColletion = styled.div` 54 | background: #531885; 55 | padding: 10px; 56 | width: 30%; 57 | border-radius: 10px; 58 | margin-left: 170px; 59 | text-align: center; 60 | color: white; 61 | font-family: 'Poppins'; 62 | margin-top: 30px; 63 | font-weight: 700; 64 | `; 65 | 66 | const Flex = styled.div` 67 | display: flex; 68 | `; 69 | 70 | const CardBoxDado = styled.div` 71 | width: 50%; 72 | margin-left: 100px; 73 | margin-top: 40px; 74 | `; 75 | 76 | const Box = styled.div``; 77 | 78 | const NunberValor = styled.div` 79 | font-family: 'Poppins'; 80 | color: #531885; 81 | font-size: 40px; 82 | font-weight: 800; 83 | `; 84 | 85 | const NameArt = styled.div` 86 | color: white; 87 | font-size: 20px; 88 | `; 89 | 90 | const Headerbox2 = styled.div` 91 | width: 40%; 92 | `; 93 | 94 | const BoxImg1 = styled.div` 95 | height: 400px; 96 | margin-top: 150px; 97 | width: 400px; 98 | background-size: cover; 99 | border-radius: 20px; 100 | background-image: url('/src/Ui/Img/img-card-hover/ImgAdventureTime.png'); 101 | `; 102 | 103 | const CardNftName = styled.div` 104 | color: white; 105 | font-family: 'DM Sans'; 106 | font-style: normal; 107 | letter-spacing: -0.05em; 108 | margin-top: 20px; 109 | margin-left: 20px; 110 | font-size: 30px; 111 | `; 112 | 113 | const CardImgArtista = styled.div` 114 | background-image: url('/src/Ui/Img/img-card-hover/ImgPerfilUsuarioArt.png'); 115 | border-radius: 100%; 116 | background-size: cover; 117 | margin-left: 20px; 118 | height: 50px; 119 | width: 66px; 120 | `; 121 | 122 | const CardNomeArtista = styled.div` 123 | color: white; 124 | width: 100%; 125 | padding-top: 15px; 126 | padding-left: 10px; 127 | font-size: 20px; 128 | font-weight: 800; 129 | `; 130 | 131 | const CardBoxDados = styled.div` 132 | background: rgba(255, 255, 255, 0.2); 133 | backdrop-filter: blur(25px); 134 | border-radius: 10px; 135 | padding: 10px 20px; 136 | margin: 10px; 137 | height: 70px; 138 | margin-top: 180px; 139 | `; 140 | 141 | const CardText = styled.div` 142 | color: white; 143 | font-family: 'DM Sans'; 144 | font-style: normal; 145 | font-weight: 500; 146 | `; 147 | 148 | const CardPrice = styled.div` 149 | color: white; 150 | padding-top: 15px; 151 | font-family: 'DM Sans'; 152 | font-style: normal; 153 | font-weight: 700; 154 | font-size: 16px; 155 | `; 156 | 157 | const CardDate = styled.div` 158 | color: white; 159 | padding-top: 15px; 160 | font-family: 'DM Sans'; 161 | font-style: normal; 162 | font-weight: 700; 163 | font-size: 16px; 164 | `; 165 | 166 | const Boximg2 = styled.div` 167 | background-image: url('/src/Ui/Img/img-card-hover/ImgCardHomeArt.png'); 168 | background-size: cover; 169 | height: 360px; 170 | margin-top: 170px; 171 | border-radius: 0px 20px 20px 0px; 172 | width: 35px; 173 | `; 174 | 175 | const Boximg3 = styled.div` 176 | background-image: url('/src/Ui/Img/img-card-hover/ImgHomeUm.png'); 177 | background-size: cover; 178 | height: 320px; 179 | margin-top: 190px; 180 | border-radius: 0px 20px 20px 0px; 181 | width: 35px; 182 | `; 183 | 184 | const SeloEtheriun = styled.div` 185 | background-image: url(${imgSelo}); 186 | background-size: cover; 187 | height: 120px; 188 | width: 120px; 189 | position: absolute; 190 | top: -120px; 191 | left: -70px; 192 | `; 193 | 194 | const ContainerTransaction = styled.div` 195 | height: 25vh; 196 | background: rgb(0, 0, 0); 197 | background: linear-gradient( 198 | 0deg, 199 | rgba(0, 0, 0, 1) 0%, 200 | rgba(198, 42, 234, 1) 95%, 201 | rgba(198, 42, 234, 1) 100% 202 | ); 203 | `; 204 | 205 | const ItemStart = styled.div` 206 | width: 40%; 207 | font-family: 'Poppins'; 208 | font-style: normal; 209 | font-weight: 700; 210 | font-size: 40px; 211 | text-align: start; 212 | padding-left: 10%; 213 | color: #fff; 214 | margin-top: -13px; 215 | `; 216 | 217 | const ItemMid = styled.div` 218 | width: 30%; 219 | font-family: 'Poppins'; 220 | font-style: normal; 221 | font-size: 18px; 222 | text-align: start; 223 | color: #fff; 224 | margin-top: -28px; 225 | `; 226 | 227 | const IconFast = styled.div` 228 | background-image: url(${iconFast}); 229 | background-size: cover; 230 | height: 35px; 231 | width: 35px; 232 | margin-top: 25px; 233 | margin-right: 17px; 234 | `; 235 | 236 | const IconSafe = styled.div` 237 | background-size: cover; 238 | height: 35px; 239 | width: 35px; 240 | margin-top: 25px; 241 | margin-right: 17px; 242 | background-image: url(${iconSafe}); 243 | `; 244 | 245 | const ItemEnd = styled.div` 246 | width: 30%; 247 | font-family: 'Poppins'; 248 | font-style: normal; 249 | font-size: 18px; 250 | text-align: start; 251 | color: #fff; 252 | margin-top: -27px; 253 | `; 254 | 255 | const ComponenteCardHover = styled.div` 256 | background-color: #000000; 257 | height: auto; 258 | `; 259 | 260 | const TitleCard = styled.div` 261 | color: #fff; 262 | font-family: 'Poppins'; 263 | font-style: normal; 264 | font-weight: 700; 265 | font-size: 25px; 266 | text-align: center; 267 | padding-top: 90px; 268 | `; 269 | 270 | const ParagrafoCard = styled.div` 271 | color: #fff; 272 | font-family: 'DM Sans'; 273 | font-style: normal; 274 | font-weight: 400; 275 | font-size: 30px; 276 | text-align: center; 277 | margin-top: -30px; 278 | margin-bottom: 90px; 279 | `; 280 | 281 | const CardHoverUm = styled.div` 282 | background-image: url(${cardHoverUm}); 283 | background-size: cover; 284 | width: 230px; 285 | height: 320px; 286 | margin-top: 55px; 287 | margin-right: -60px; 288 | border-radius: 20px; 289 | &:hover { 290 | transition: 0.4s; 291 | transform: scale(1.1, 1.1); 292 | z-index: 3; 293 | } 294 | `; 295 | 296 | const CardHoverDois = styled.div` 297 | background-image: url(${cardHoverDois}); 298 | background-size: cover; 299 | width: 270px; 300 | height: 380px; 301 | margin-top: 25px; 302 | margin-right: -30px; 303 | border-radius: 20px; 304 | box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); 305 | &:hover { 306 | transition: 0.4s; 307 | transform: scale(1.1, 1.1); 308 | z-index: 3; 309 | } 310 | `; 311 | 312 | const CardHoverTres = styled.div` 313 | background-image: url(${cardHoverTres}); 314 | background-size: cover; 315 | width: 320px; 316 | height: 430px; 317 | z-index: 2; 318 | border-radius: 30px; 319 | box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); 320 | &:hover { 321 | transition: 0.4s; 322 | transform: scale(1.1, 1.1); 323 | z-index: 3; 324 | } 325 | `; 326 | 327 | const CardHoverQuatro = styled.div` 328 | background-image: url(${cardHoverQuatro}); 329 | background-size: cover; 330 | width: 270px; 331 | height: 380px; 332 | margin-top: 25px; 333 | margin-left: -30px; 334 | border-radius: 20px; 335 | z-index: 1; 336 | box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); 337 | &:hover { 338 | transition: 0.4s; 339 | transform: scale(1.1, 1.1); 340 | z-index: 3; 341 | } 342 | `; 343 | 344 | const CardHoverCinco = styled.div` 345 | background-image: url(${cardHoverCinco}); 346 | background-size: cover; 347 | width: 230px; 348 | height: 320px; 349 | margin-top: 55px; 350 | margin-left: -60px; 351 | border-radius: 20px; 352 | &:hover { 353 | transition: 0.4s; 354 | transform: scale(1.1, 1.1); 355 | z-index: 3; 356 | } 357 | `; 358 | 359 | const ContainerCenter = styled.div` 360 | display: flex; 361 | justify-content: center; 362 | `; 363 | 364 | const ContainerButton = styled.div` 365 | background: black; 366 | padding-top: 90px; 367 | `; 368 | 369 | const ButtonExplore = styled.div` 370 | border-radius: 14px; 371 | color: white; 372 | text-align: center; 373 | background: #531885; 374 | padding: 20px; 375 | width: 200px; 376 | margin: auto; 377 | font-family: 'Poppins'; 378 | font-style: normal; 379 | font-weight: 400; 380 | font-size: 20px; 381 | letter-spacing: 2px; 382 | `; 383 | 384 | const ContainerFilterSection = styled.div` 385 | background: linear-gradient( 386 | 180deg, 387 | rgba(0, 0, 0, 0.2) 0%, 388 | rgba(79, 21, 91, 0.2) 96.73% 389 | ), 390 | linear-gradient(180deg, #000000 0%, #3c0c46 92.36%), #000000; 391 | height: 100vh; 392 | padding: 100px; 393 | `; 394 | 395 | const Discovery = styled.div` 396 | color: white; 397 | font-family: 'Poppins'; 398 | font-style: normal; 399 | font-weight: 700; 400 | font-size: 34px; 401 | line-height: 51px; 402 | `; 403 | 404 | const ButtonsFilter = styled.div` 405 | margin-top: 20px; 406 | `; 407 | 408 | const BoxCategory = styled.div``; 409 | 410 | const MenuFilter = styled.div` 411 | color: white; 412 | margin-right: 100px; 413 | background: rgba(220, 220, 220, 0.2); 414 | border-radius: 100px; 415 | padding: 10px 20px; 416 | font-family: 'DM Sans'; 417 | font-style: normal; 418 | font-weight: 500; 419 | font-size: 14px; 420 | `; 421 | 422 | function ButtonCategory({ init, children }) { 423 | const [cor, setCor] = useState(''); 424 | return ( 425 | setCor(init)} backgroundColor={cor}> 426 | {children} 427 | 428 | ); 429 | } 430 | 431 | const ButtonWrapper = styled.div` 432 | color: white; 433 | margin-right: 10px; 434 | background: rgba(220, 220, 220, 0.2); 435 | border-radius: 100px; 436 | padding: 10px 20px; 437 | font-family: 'DM Sans'; 438 | font-style: normal; 439 | font-weight: 500; 440 | font-size: 14px; 441 | background-color: ${(props) => props.backgroundColor}; 442 | `; 443 | 444 | const ContainerSectionExplorer = styled.div` 445 | background: #000; 446 | display: flex; 447 | justify-content: center; 448 | align-items: center; 449 | flex-direction: column; 450 | height: 70vh; 451 | `; 452 | 453 | const TitleSectionExplorer = styled.div` 454 | color: #fff; 455 | font-family: 'DM Sans'; 456 | font-style: normal; 457 | font-weight: 500; 458 | font-size: 35px; 459 | `; 460 | 461 | const DescriptionSectionExplorer = styled.div` 462 | color: #fff; 463 | font-family: 'DM Sans'; 464 | font-style: normal; 465 | font-weight: 400; 466 | font-size: 18px; 467 | margin-top: 5px; 468 | `; 469 | 470 | const ButtonExplorer = styled.button` 471 | border-radius: 14px; 472 | color: white; 473 | background: #531885; 474 | font-weight: 400; 475 | font-size: 20px; 476 | margin-top: 30px; 477 | padding: 1.5rem 4rem; 478 | `; 479 | 480 | const Main = () => { 481 | const [category, setCategory] = useState('blue'); 482 | 483 | return ( 484 | <> 485 |
486 | 487 | 488 | 489 | DISCOVER, AND COLLECT 490 |
DIGITAL ART NFT 491 |
492 | 493 | Digital marketplace for crypto collectibles and non-fungible 494 |
tokens (NFTs). Buy, Sell, and discover exclusive digital 495 | assets. 496 |
497 | Explore Collection 498 | 499 | 500 | 501 | 98K+ 502 | Artwork 503 | 504 | 505 | 12K+ 506 | Auction 507 | 508 | 509 | 15K+ 510 | Artist 511 | 512 | 513 | 514 |
515 | 516 | 517 | 518 | Art A.nft 519 | 520 | 521 | ArtLian 522 | 523 | 524 | 525 | Current Bid 526 | Ends in 527 | 528 | 529 | 530 | 0.25 ETH 531 | 532 | 12h 43m 42s 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 |
543 | {/* Componente do card */} 544 | 545 | 546 | 547 | The amazing NFT art
of the world here 548 |
549 | 550 | 551 | 552 |
553 |

Fast Transaction

554 |

555 | Create collections and sell
your works of art quickly. 556 |

557 |
558 |
559 |
560 | 561 | 562 | 563 |
564 |

Safe Transaction

565 |

566 | Make secure transactions
through our system. 567 |

568 |
569 |
570 |
571 |
572 |
573 | {/* Card hover */} 574 | 575 | 576 |

Discover a world of collections

577 |
578 | 579 |

and trade in just one place!

580 |
581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 |
591 | {/* Button Explore */} 592 | 593 | Explore Now 594 | 595 | {/* Section Filter */} 596 | 597 | Discover more NFTs 598 | 599 | 600 | 601 | 602 | All Categories 603 | Art 604 | Celebrities 605 | Gaming 606 | Sport 607 | 608 | 609 | Filter 610 | 611 | 612 | 613 | 614 | 615 | Check it out right now! 616 | 617 | Enter our world and get the best benefits for free. 618 | 619 | Explore Now 620 | 621 | 622 | 623 | ); 624 | }; 625 | 626 | export default Main; 627 | -------------------------------------------------------------------------------- /src/Pages/Profile/Profile.jsx: -------------------------------------------------------------------------------- 1 | import { ProfileWrapper } from './styles/Profile/ProfileWrapper'; 2 | import { ProfileBanner } from './styles/Profile/ProfileBanner'; 3 | import { ProfileImage } from './styles/Profile/ProfileImage'; 4 | import { AboutMe } from './styles/Sections/AboutMe'; 5 | import { SectionTitle } from './styles/Sections/SectionTile'; 6 | import { Sections } from './styles/Sections/Sections'; 7 | import { PageWrapper } from './styles/PageWrapper'; 8 | import { Link, useLocation } from 'react-router-dom'; 9 | 10 | const Profile = ({ children }) => { 11 | const { pathname } = useLocation(); 12 | 13 | const pageSections = [ 14 | { 15 | title: 'Favorited', 16 | url: 'favorited', 17 | }, 18 | { 19 | title: 'Traded', 20 | url: 'traded', 21 | }, 22 | { 23 | title: 'Offers', 24 | url: 'offers', 25 | }, 26 | { 27 | title: 'Created', 28 | url: 'created', 29 | }, 30 | { 31 | title: 'My Collection', 32 | url: 'collection', 33 | }, 34 | ]; 35 | 36 | return ( 37 | 38 | {/* header */} 39 | 40 |
41 | 42 | 43 | 44 | 45 |

John Doe

46 |

Discover my work by clicking on collection!

47 |
48 |
49 | 50 | 51 | {pageSections.map((section) => ( 52 | 62 | 70 | {section.title} 71 | 72 | 73 | ))} 74 | 75 | 76 | {children} 77 |
78 | 79 | {/* footer */} 80 |
81 | ); 82 | }; 83 | 84 | export default Profile; 85 | -------------------------------------------------------------------------------- /src/Pages/Profile/components/Filters.jsx: -------------------------------------------------------------------------------- 1 | import { SearchIcon } from 'lucide-react'; 2 | import { Button } from '../styles/Button/Button'; 3 | import { FilterMenu } from '../styles/Input/FilterMenu'; 4 | import { SearchInput } from '../styles/Input/Search/SearchInput'; 5 | import { SearchWrapper } from '../styles/Input/Search/SearchWrapper'; 6 | import { SelectInput } from '../styles/Input/SelectInput'; 7 | 8 | export default function Filters() { 9 | return ( 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/Pages/Profile/components/SubPages/Created.jsx: -------------------------------------------------------------------------------- 1 | import { CategoryButton } from '../../styles/Button/CategoryButton'; 2 | import { CreatedForm } from '../../styles/Sections/CreatedForm'; 3 | import iconFile from '../../../../Ui/Img/icons/file.svg'; 4 | import { SelectInput } from '../../styles/Input/SelectInput'; 5 | import { Button } from '../../styles/Button/Button'; 6 | 7 | export default function Created() { 8 | return ( 9 |
19 |
20 |
28 |

Collections

29 |

Create collection

30 |
31 | Collection 32 | image 33 |
34 |
35 |
36 | 37 |
38 |
39 | 45 |
46 |
47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |