├── .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 |
47 |
77 |
91 |
92 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/src/Pages/Profile/components/SubPages/Favorited.jsx:
--------------------------------------------------------------------------------
1 | import { Button } from '../../styles/Button/Button';
2 | import { CategoryButton } from '../../styles/Button/CategoryButton';
3 | import { CardWrapper } from '../../styles/Card/CardWrapper';
4 | import { CardSection } from '../../styles/Sections/CardSection';
5 | import Filters from '../Filters';
6 |
7 | export default function Favorited() {
8 | return (
9 | <>
10 |
11 |
12 |
13 |
14 |
15 |
![]()
16 |
17 |
18 |
19 |
Nome
20 |
21 | Auction Time
22 | Current Bid
23 |
24 |
0.05 ETH
25 |
26 | 3h 1m 50s
27 | 0.15ETH
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
![]()
36 |
37 |
38 |
39 |
Nome
40 |
41 | Auction Time
42 | Current Bid
43 |
44 |
0.05 ETH
45 |
46 | 3h 1m 50s
47 | 0.15ETH
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
![]()
56 |
57 |
58 |
59 |
Nome
60 |
61 | Auction Time
62 | Current Bid
63 |
64 |
0.05 ETH
65 |
66 | 3h 1m 50s
67 | 0.15ETH
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
![]()
76 |
77 |
78 |
79 |
Nome
80 |
81 | Auction Time
82 | Current Bid
83 |
84 |
0.05 ETH
85 |
86 | 3h 1m 50s
87 | 0.15ETH
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
![]()
96 |
97 |
98 |
99 |
Nome
100 |
101 | Auction Time
102 | Current Bid
103 |
104 |
0.05 ETH
105 |
106 | 3h 1m 50s
107 | 0.15ETH
108 |
109 |
110 |
111 |
112 |
113 |
114 |
121 |
122 |
130 |
Discover other categories:
131 |
132 | All
133 | Artwork
134 | Book
135 |
136 |
137 |
138 |
139 |
140 |
141 | Nome
142 |
143 |
144 |
145 |
146 |
147 | Nome
148 |
149 |
150 |
151 |
152 |
153 | Nome
154 |
155 |
156 |
157 |
158 |
159 | Nome
160 |
161 |
162 |
163 |
164 |
165 | >
166 | );
167 | }
168 |
--------------------------------------------------------------------------------
/src/Pages/Profile/components/SubPages/MyCollection.jsx:
--------------------------------------------------------------------------------
1 | import { Button } from '../../styles/Button/Button';
2 | import { CardSection } from '../../styles/Sections/CardSection';
3 | import { CardWrapper } from '../../styles/Card/CardWrapper';
4 | import { CategoryButton } from '../../styles/Button/CategoryButton';
5 | import Filters from '../Filters';
6 |
7 | export default function MyCollection() {
8 | return (
9 | <>
10 |
11 |
12 |
21 |
22 |
30 |
Collections:
31 |
Welcome Collections Page
32 |
33 | All
34 | Artwork
35 | Book
36 |
37 |
38 |
39 |
40 |
41 |
42 |
![]()
43 |
44 |
45 |
Nome
46 |
47 | Auction Time
48 | Current Bid
49 |
50 |
0.05 ETH
51 |
52 | 3h 1m 50s
53 | 0.15ETH
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
![]()
62 |
63 |
64 |
65 |
Nome
66 |
67 | Auction Time
68 | Current Bid
69 |
70 |
0.05 ETH
71 |
72 | 3h 1m 50s
73 | 0.15ETH
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
![]()
82 |
83 |
84 |
85 |
Nome
86 |
87 | Auction Time
88 | Current Bid
89 |
90 |
0.05 ETH
91 |
92 | 3h 1m 50s
93 | 0.15ETH
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
![]()
102 |
103 |
104 |
105 |
Nome
106 |
107 | Auction Time
108 | Current Bid
109 |
110 |
0.05 ETH
111 |
112 | 3h 1m 50s
113 | 0.15ETH
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
![]()
122 |
123 |
124 |
125 |
Nome
126 |
127 | Auction Time
128 | Current Bid
129 |
130 |
0.05 ETH
131 |
132 | 3h 1m 50s
133 | 0.15ETH
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 | >
142 | );
143 | }
144 |
--------------------------------------------------------------------------------
/src/Pages/Profile/components/SubPages/Offers.jsx:
--------------------------------------------------------------------------------
1 | import { Button } from '../../styles/Button/Button';
2 | import { CategoryButton } from '../../styles/Button/CategoryButton';
3 | import { CardWrapper } from '../../styles/Card/CardWrapper';
4 | import { CardSection } from '../../styles/Sections/CardSection';
5 | import Filters from '../Filters';
6 |
7 | export default function Offers() {
8 | return (
9 | <>
10 |
11 |
12 |
20 |
21 | All
22 | Artwork
23 | Book
24 |
25 |
26 |
27 |
28 |
29 |
![]()
30 |
31 |
32 |
33 |
Nome
34 |
35 | Auction Time
36 | Current Bid
37 |
38 |
0.05 ETH
39 |
40 | 3h 1m 50s
41 | 0.15ETH
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
![]()
50 |
51 |
52 |
53 |
Nome
54 |
55 | Auction Time
56 | Current Bid
57 |
58 |
0.05 ETH
59 |
60 | 3h 1m 50s
61 | 0.15ETH
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
![]()
70 |
71 |
72 |
73 |
Nome
74 |
75 | Auction Time
76 | Current Bid
77 |
78 |
0.05 ETH
79 |
80 | 3h 1m 50s
81 | 0.15ETH
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
![]()
90 |
91 |
92 |
93 |
Nome
94 |
95 | Auction Time
96 | Current Bid
97 |
98 |
0.05 ETH
99 |
100 | 3h 1m 50s
101 | 0.15ETH
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
![]()
110 |
111 |
112 |
113 |
Nome
114 |
115 | Auction Time
116 | Current Bid
117 |
118 |
0.05 ETH
119 |
120 | 3h 1m 50s
121 | 0.15ETH
122 |
123 |
124 |
125 |
126 |
127 |
128 | >
129 | );
130 | }
131 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Button/Button.jsx:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 |
3 | export const Button = styled.button`
4 | padding: 0.5rem 1rem;
5 | width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
6 | max-width: 100%;
7 | height: 2.5rem;
8 |
9 | color: var(--default-text-color);
10 | background-color: ${(props) =>
11 | props.fullWidth ? 'var(--btnColor)' : 'rgba(152, 152, 152, 0.2)'};
12 |
13 | border: none;
14 |
15 | border-radius: ${(props) =>
16 | props.roundedSide === 'left'
17 | ? '0.4rem 0 0 0.4rem'
18 | : props.roundedSide === 'right'
19 | ? '0 0.4rem 0.4rem 0'
20 | : '0.4rem'};
21 | `;
22 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Button/CategoryButton.jsx:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 |
3 | export const CategoryButton = styled.button`
4 | padding: 0.325rem 1rem;
5 | height: fit-content;
6 |
7 | font-size: 0.75rem;
8 | color: var(--default-text-color);
9 |
10 | background-color: ${(props) =>
11 | props.transparent ? 'transparent' : 'var(--btnColor)'};
12 |
13 | border: none;
14 | border-radius: 0.4rem;
15 | `;
16 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Card/CardWrapper.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const CardWrapper = styled.div`
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | align-items: center;
8 | gap: 0.825rem;
9 |
10 | width: fit-content;
11 | padding: 1.15rem;
12 |
13 | background-color: rgba(152, 152, 152, 0.2);
14 | border-radius: 1.125rem;
15 |
16 | img {
17 | width: 13rem;
18 | height: 11.25rem;
19 |
20 | background-color: grey;
21 |
22 | border-radius: 1rem;
23 | border: none;
24 | }
25 |
26 | .cardInfo {
27 | display: flex;
28 | flex-direction: column;
29 |
30 | width: 100%;
31 | gap: 0.15rem;
32 | }
33 |
34 | .cardInfo h3 {
35 | font-weight: 500;
36 | margin: 0;
37 | }
38 | .headers,
39 | .originalPrice,
40 | .auditionRow {
41 | font-weight: 400;
42 | font-size: 0.825rem;
43 | }
44 |
45 | .headers,
46 | .auditionRow {
47 | display: flex;
48 | justify-content: space-between;
49 | }
50 |
51 | .cardInfo .originalPrice {
52 | text-align: right;
53 | color: #6f4ff2;
54 | }
55 |
56 | .cardInfo .auditionRow {
57 | font-size: 1rem;
58 | color: #6c7aa0;
59 | }
60 |
61 | button {
62 | margin-top: 1rem;
63 | }
64 | `;
65 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Input/FilterMenu.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const FilterMenu = styled.div`
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 |
8 | div {
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 |
13 | width: 80%;
14 | }
15 | `;
16 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Input/Search/SearchIcon.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Search } from 'lucide-react';
3 |
4 | export const SearchIcon = styled(Search)`
5 | position: absolute;
6 | right: 1.5rem;
7 | width: 20px;
8 | height: 20px;
9 | `;
10 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Input/Search/SearchInput.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const SearchInput = styled.input`
4 | height: 1.5rem;
5 |
6 | padding: 0.5rem 1rem;
7 | margin-right: 0.5rem;
8 |
9 | width: 100%;
10 |
11 | color: var(--default-text-color);
12 | background-color: rgba(152, 152, 152, 0.2);
13 |
14 | border: none;
15 | border-radius: 0.8rem;
16 |
17 | &::placeholder {
18 | color: var(--default-text-color);
19 | }
20 | `;
21 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Input/Search/SearchWrapper.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const SearchWrapper = styled.div`
4 | position: relative;
5 |
6 | max-width: 50rem;
7 | min-width: 8rem;
8 | `;
9 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Input/SelectInput.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const SelectInput = styled.select`
4 | padding: 0.5rem 1rem;
5 | margin-right: 0.5rem;
6 |
7 | width: 9rem;
8 | height: 2.5rem;
9 |
10 | color: var(--default-text-color);
11 | background-color: rgba(152, 152, 152, 0.2);
12 |
13 | border: none;
14 | border-radius: 0.8rem;
15 | `;
16 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/PageWrapper.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const PageWrapper = styled.div`
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | align-items: center;
8 |
9 | width: 100%;
10 | height: 100%;
11 |
12 | overflow-x: hidden;
13 |
14 | color: var(--text-color);
15 | background-color: var(--background-color);
16 | `;
17 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Profile/ProfileBanner.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ProfileBanner = styled.div`
4 | width: 100vw;
5 | height: 18rem;
6 |
7 | background-color: darkblue;
8 | `;
9 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Profile/ProfileImage.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ProfileImage = styled.div`
4 | position: relative;
5 | bottom: calc(10rem / 2);
6 |
7 | width: 10rem;
8 | height: 10rem;
9 |
10 | background-color: darkgray;
11 |
12 | border-radius: 50%;
13 | `;
14 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Profile/ProfileWrapper.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ProfileWrapper = styled.div`
4 | position: relative;
5 |
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: center;
9 | align-items: center;
10 | `;
11 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Sections/AboutMe.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const AboutMe = styled.div`
4 | position: relative;
5 | bottom: 2.5rem;
6 | text-align: center;
7 | margin-bottom: 2.5rem;
8 |
9 | h2 {
10 | font-size: 2rem;
11 | font-weight: 500;
12 |
13 | margin: 0;
14 | margin-bottom: 0.5rem;
15 | }
16 |
17 | h3 {
18 | font-weight: 400;
19 | font-size: 1rem;
20 |
21 | margin: 0;
22 | }
23 | `;
24 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Sections/CardSection.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const CardSection = styled.section`
4 | display: grid;
5 | grid-template-columns: max-content max-content max-content;
6 | justify-content: center;
7 |
8 | gap: 4rem 11rem;
9 |
10 | padding: 5.25rem 11.25rem;
11 | `;
12 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Sections/CreatedForm.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const CreatedForm = styled.form`
4 | max-width: 68.6875rem;
5 | width: 100%;
6 | margin-left: auto;
7 | margin-right: auto;
8 | color: #fff;
9 | margin-top: 3rem;
10 | margin-bottom: 20.4375rem;
11 | display: flex;
12 | align-items: center;
13 | flex-direction: column;
14 |
15 | form {
16 | width: 100%;
17 | .files-upload {
18 | label {
19 | width: 100%;
20 | min-height: 45.5625rem;
21 | height: 100%;
22 | background-color: rgba(255, 255, 255, 0.17);
23 | display: flex;
24 | flex-direction: column;
25 | justify-content: center;
26 | align-items: center;
27 | border-radius: 1.375rem;
28 | cursor: pointer;
29 |
30 | span {
31 | margin-top: 8.5625rem;
32 | color: #2d64fa;
33 | }
34 |
35 | img {
36 | width: 3.875rem;
37 | height: 4.3125rem;
38 | }
39 |
40 | p {
41 | color: var(--default-text-color);
42 | }
43 | input {
44 | display: none;
45 | }
46 | }
47 | }
48 | }
49 |
50 | .area-inputs {
51 | width: 100%;
52 | display: flex;
53 | justify-content: space-between;
54 | margin-top: 7.125rem;
55 | margin-bottom: 2.75rem;
56 | span {
57 | display: flex;
58 | flex-direction: column;
59 | gap: 1.4375rem;
60 | min-width: 27.875rem;
61 | width: 100%;
62 | input,
63 | textarea {
64 | margin-bottom: 53px;
65 | color: var(--default-text-color);
66 | background-color: rgba(152, 152, 152, 0.2);
67 | border: none;
68 | border-radius: 4px;
69 | font-size: 16px;
70 | padding: 0.875rem 0.5rem;
71 | :focus {
72 | outline: none;
73 | }
74 | }
75 | textarea {
76 | resize: none;
77 | height: 7rem;
78 | }
79 | }
80 | }
81 | `;
82 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Sections/SectionTile.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const SectionTitle = styled.nav`
4 | font-weight: 600;
5 |
6 | transition: color 0.3s;
7 |
8 | &:hover {
9 | cursor: pointer;
10 | color: #224abb;
11 | }
12 |
13 | .selected {
14 | color: #224abb;
15 | }
16 | `;
17 |
--------------------------------------------------------------------------------
/src/Pages/Profile/styles/Sections/Sections.jsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const Sections = styled.nav`
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | gap: 4.5rem;
8 |
9 | width: 100%;
10 | padding-bottom: 1rem;
11 | margin-bottom: 1rem;
12 | border-bottom: 1px solid rgba(135, 135, 135, 0.2);
13 | `;
14 |
--------------------------------------------------------------------------------
/src/Pages/Sign/Sign.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import styled from 'styled-components';
3 | import { Button } from '../../Ui/Components/Button/Button.jsx';
4 | import { Input } from '../../Ui/Components/Input/Input.jsx';
5 |
6 | const Title = styled.div`
7 | padding-top: 150px;
8 | text-align: center;
9 | font-size: 30px;
10 | font-family: 'Poppins', sans-serif;
11 | color: #0a0a0a;
12 | font-weight: 500;
13 | @media only screen and (max-width: 700px) {
14 | padding-top: 50px;
15 | }
16 | `;
17 |
18 | const MenuLateral = styled.div`
19 | width: 50%;
20 | position: fixed;
21 | top: 0px;
22 | right: 0px;
23 | background: #f5f5f5;
24 | height: 100vh;
25 | @media only screen and (max-width: 1000px) {
26 | width: 100%;
27 | bottom: 0px;
28 | height: 70vh;
29 | }
30 | `;
31 |
32 | const FullScream = styled.div`
33 | background-image: url('https://images.unsplash.com/photo-1645516484419-35a747c99474?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3MjAxN3wwfDF8c2VhcmNofDMwfHxuZnR8ZW58MHx8fHwxNjg1OTg4Nzg5fDA&ixlib=rb-4.0.3&q=85&q=85&fmt=jpg&crop=entropy&cs=tinysrgb&w=450');
34 | background-repeat: no-repeat;
35 | background-position: center;
36 | background-size: cover;
37 | background: rgb(42, 42, 42);
38 | background: radial-gradient(
39 | circle,
40 | rgba(42, 42, 42, 1) 0%,
41 | rgba(0, 0, 0, 1) 100%
42 | );
43 | height: 100vh;
44 | width: 50%;
45 |
46 | @media only screen and (max-width: 1000px) {
47 | width: 100%;
48 | background-size: cover;
49 | height: 30vh;
50 | }
51 | `;
52 |
53 | const Login = styled.div`
54 | margin-top: 60px;
55 |
56 | Button {
57 | margin-top: 40px;
58 | font-size: 20px;
59 | line-height: 30px;
60 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
61 | }
62 |
63 | @media (max-width: 980px) {
64 | Button {
65 | font-size: 16px;
66 | padding: 10px;
67 | }
68 | }
69 | `;
70 |
71 | const TextField = styled.input`
72 | display: block;
73 | width: 40%;
74 | margin: auto;
75 | background: #d9d9d9;
76 | padding: 15px;
77 | margin-bottom: 20px;
78 | text-align: center;
79 | font-weight: 700;
80 | border: none;
81 | border-radius: 10px;
82 | `;
83 |
84 | const Span = styled.div`
85 | font-weight: 600;
86 | `;
87 |
88 | const ContaNova = styled.div`
89 | margin-top: 30px;
90 | font-family: 'Poppins';
91 | font-style: normal;
92 | font-weight: 400;
93 | font-size: 12px;
94 | line-height: 24px;
95 | text-align: center;
96 | letter-spacing: 0.065em;
97 | `;
98 |
99 | const CopyRigth = styled.div`
100 | font-size: 10px;
101 | position: absolute;
102 | bottom: 10px;
103 | width: 100%;
104 | text-align: center;
105 | `;
106 |
107 | const TextInput = styled.div`
108 | width: 40%;
109 | margin: auto;
110 | font-family: 'Poppins';
111 | font-style: normal;
112 | font-weight: 400;
113 | font-size: 16px;
114 | line-height: 24px;
115 | letter-spacing: 0.065em;
116 | `;
117 |
118 | const MenuTitle = styled.div``;
119 |
120 | const TitleLogo = styled.div`
121 | padding-top: 300px;
122 | width: 100%;
123 | padding-left: 15%;
124 | font-family: 'Poppins', sans-serif;
125 | font-style: normal;
126 | font-weight: 700;
127 | font-size: 32px;
128 | line-height: 48px;
129 | color: #531885;
130 | text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
131 | `;
132 |
133 | const TitleComentario = styled.div`
134 | font-family: 'Poppins', sans-serif;
135 | font-style: normal;
136 | font-weight: 400;
137 | font-size: 40px;
138 | margin-top: 10px;
139 | line-height: 53px;
140 | padding-left: 15%;
141 | color: #ffffff;
142 |
143 | text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
144 | `;
145 |
146 | const Titlefundo = styled.div`
147 | font-family: 'Pavanam', sans-serif;
148 | font-style: normal;
149 | font-weight: 400;
150 | margin-top: 20px;
151 | font-size: 17px;
152 | line-height: 26px;
153 | color: #ffffff;
154 | padding-left: 15%;
155 | text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
156 | `;
157 |
158 | const Register = () => {
159 | const [values, setValues] = useState('');
160 |
161 | const handleChangeValues = (value) => {
162 | setValues((prevValue) => ({
163 | ...prevValue,
164 | [value.target.name]: value.target.value,
165 | }));
166 | };
167 |
168 | const handleClickButton = () => {
169 | console.log(values);
170 | };
171 |
172 | return (
173 | <>
174 |
175 |
176 | NFTART
177 |
178 | Create a new world
179 |
180 | with your creativity.
181 |
182 | Access and check out all the advantages!
183 |
184 |
185 | SIGN IN
186 |
187 |
202 |
203 |
204 | Não tenho conta
205 |
206 | Clique aqui
207 |
208 | Copyrigth 2022 NFTART.All rigths reserved.
209 |
210 |
211 | >
212 | );
213 | };
214 |
215 | export default Register;
216 |
--------------------------------------------------------------------------------
/src/Ui/Components/ Header/assets/NFTART.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Components/ Header/assets/NFTART.png
--------------------------------------------------------------------------------
/src/Ui/Components/ Header/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Button, Container, ContainerNav, Nav } from "./styles";
3 |
4 | import logo from './assets/NFTART.png'
5 |
6 | export function Header() {
7 | return (
8 |
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 |
21 |
22 | )
23 | }
--------------------------------------------------------------------------------
/src/Ui/Components/ Header/styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | export const Container = styled.div`
4 | width: 100vw;
5 | padding-top: 2.63rem;
6 | padding-left: 7.06rem;
7 | padding-right: 8.13rem;
8 |
9 | background-color: black;
10 |
11 | display: flex;
12 | justify-content: space-between;
13 | align-items: center;
14 | `
15 |
16 | export const ContainerNav = styled.div`
17 | display: flex;
18 | align-items: center;
19 | gap: 4rem;
20 | `
21 |
22 | export const Nav = styled.nav`
23 | display: flex;
24 | gap: 1.24rem;
25 |
26 | a {
27 | color: white;
28 | text-decoration: none;
29 |
30 | &:hover {
31 | text-decoration: underline;
32 | }
33 | }
34 |
35 | margin-right: 2.2rem;
36 | `
37 |
38 | export const Button = styled.button`
39 | display: inline-flex;
40 | padding: 1.125rem 1.375rem;
41 | justify-content: center;
42 | align-items: center;
43 |
44 | color: #531885;
45 |
46 | background-color: transparent;
47 | border: 2px solid #531885;
48 | box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
49 | border-radius: 3.75rem;
50 |
51 | &:hover {
52 | color: white;
53 | background-color: #531885;
54 | transition: 0.5s;
55 | }
56 | `
--------------------------------------------------------------------------------
/src/Ui/Components/Button/Button.jsx:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import '../../../variable.css';
3 |
4 | const Button = ({ transparent, selected, rounded, children }) => {
5 | return (
6 |
11 | {' '}
12 | {children}
13 |
14 | );
15 | };
16 |
17 | const ButtonWrapper = styled.button`
18 | background-color: ${(props) =>
19 | props.transparent ? 'transparent' : 'var(--btnColor)'};
20 | border: 1px solid
21 | ${(props) => (props.transparent ? 'var(--btnColor)' : 'transparent')};
22 | border-radius: ${(props) => (props.rounded ? '60px' : '9px')};
23 | width: 30%;
24 | display: flex;
25 | align-items: center;
26 | justify-content: center;
27 | color: ${(props) => (props.transparent ? 'var(--btnColor)' : 'white')};
28 | padding: 15px;
29 | font-size: 12px;
30 | margin: auto;
31 | text-align: center;
32 | font-weight: 700;
33 | font-family: 'Poppins' sans-serif;
34 | letter-spacing: 0.2em;
35 | cursor: pointer;
36 | transition: 0.3s ease;
37 |
38 | ${(props) =>
39 | props.selected &&
40 | css`
41 | background-color: var(--btnColor);
42 | `}
43 |
44 | &:hover {
45 | transform: scale(1.05);
46 | }
47 | `;
48 |
49 | export { Button };
50 |
--------------------------------------------------------------------------------
/src/Ui/Components/Cards/CardCollection/index.jsx:
--------------------------------------------------------------------------------
1 | import collectionImage from '../assets/collection.svg'
2 | import { CardButton, CardContainer, CardEthereumText, CardFooter, CardInformation } from './styles'
3 |
4 | export function CardCollection() {
5 | return (
6 |
7 |
8 |
9 | ManBand
10 |
11 | Auction time
12 | Current Bid
13 |
14 | 0.05 ETH
15 |
16 | 3h 1m 50s
17 | 0.15 ETH
18 |
19 |
20 | Place a Bid
21 |
22 | )
23 | }
--------------------------------------------------------------------------------
/src/Ui/Components/Cards/CardCollection/styles.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const CardContainer = styled.div`
4 | width: 282px;
5 | height: 433px;
6 |
7 | background: rgba(255, 255, 255, 0.14);
8 | border-radius: 18px;
9 |
10 | img {
11 | width: 243px;
12 | height: 187px;
13 |
14 | margin: 20px;
15 | }
16 |
17 | > div strong {
18 | margin-top: 10px;
19 | margin-left: 22px;
20 |
21 | font-size: 18px;
22 | line-height: 27px;
23 | font-weight: 600;
24 | font-family: 'Poppins', sans-serif;
25 | }
26 | `
27 |
28 | export const CardInformation = styled.div`
29 | display: flex;
30 | align-items: center;
31 | justify-content: space-between;
32 |
33 | margin-top: 20px;
34 | margin-left: 20px;
35 | margin-right: 20px;
36 |
37 | span {
38 | font-size: 14px;
39 | font-weight: 400;
40 | line-height: 21px;
41 | font-family: 'Poppins', sans-serif;
42 | }
43 | `
44 |
45 | export const CardEthereumText = styled.p`
46 | font-size: 14px;
47 | line-height: 21px;
48 | font-weight: 400;
49 | font-family: 'Poppins', sans-serif;
50 |
51 | margin-top: 11px;
52 | margin-right: 20px;
53 |
54 | color: #6F4FF2;
55 | text-align: right;
56 | `
57 |
58 | export const CardFooter = styled.div`
59 | display: flex;
60 | align-items: center;
61 | justify-content: space-between;
62 |
63 | margin: 5px 20px;
64 |
65 | span {
66 | font-family: 'Poppins', sans-serif;
67 | font-size: 16px;
68 | line-height: 24px;
69 | font-weight: 400;
70 |
71 | color: #6C7AA0;
72 | }
73 | `
74 |
75 | export const CardButton = styled.button`
76 | display: flex;
77 | align-items: center;
78 | justify-content: center;
79 |
80 | width: 242px;
81 | height: 40px;
82 |
83 | border: 0;
84 | border-radius: 9px;
85 | background: #531885;
86 |
87 | margin: 20px 22px;
88 |
89 | font-size: 14px;
90 | font-weight: 600;
91 | line-height: 21px;
92 | font-family: 'Poppins', sans-serif;
93 |
94 | color: #fff;
95 | cursor: pointer;
96 | `
--------------------------------------------------------------------------------
/src/Ui/Components/Cards/CardHome/index.jsx:
--------------------------------------------------------------------------------
1 | import ethereumImage from '../assets/ethereum.svg'
2 | import previewImage from '../assets/image.svg'
3 | import avatar1 from '../assets/avatar1.svg'
4 | import avatar2 from '../assets/avatar2.svg'
5 | import avatar3 from '../assets/avatar3.svg'
6 | import avatar4 from '../assets/avatar4.svg'
7 | import avatarImage from '../assets/avatar.svg'
8 | import { CardAvatares, CardContainer, CardDivider, CardFooter, CardInformation } from './styles'
9 |
10 | export function CardHome() {
11 | return (
12 |
13 |
14 |

15 |
16 |
22 |
23 |
24 |
25 |
PrismaArt
26 |
27 |
28 |

29 |
0.25 ETH
30 |
31 | 1 of 321
32 |
33 |
34 |
35 |
38 | Place a bid
39 |
40 |
41 |
42 | )
43 | }
--------------------------------------------------------------------------------
/src/Ui/Components/Cards/CardHome/styles.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export const CardContainer = styled.div`
4 |
5 | .card-header {
6 | position: relative;
7 | }
8 |
9 | width: 284px;
10 | height: 374px;
11 |
12 | background: rgba(255, 255, 255, 0.14);
13 | border: 1px solid rgba(242, 242, 242, 0.5);
14 | border-radius: 14px;
15 |
16 | img {
17 | margin: 10px 12px;
18 | }
19 |
20 | > div strong {
21 | font-size: 20px;
22 | line-height: 20px;
23 |
24 | margin-left: 25px;
25 | }
26 | `
27 | export const CardAvatares = styled.div`
28 | display: flex;
29 | padding-left: 24px !important;
30 | position: absolute;
31 | bottom: -12px;
32 | align-items: center;
33 | margin-bottom: 11px !important;
34 |
35 | .avatares-img {
36 | img {
37 | width: 32.25px;
38 | height: 30.73px;
39 | margin: 0;
40 | }
41 |
42 | img:nth-child(n+2) {
43 | margin-left: -10px;
44 | }
45 | }
46 | `;
47 |
48 | export const CardInformation = styled.div`
49 | display: flex;
50 | align-items: center;
51 | justify-content: space-between;
52 |
53 | > div {
54 | display: flex;
55 | align-items: center;
56 |
57 | img {
58 | margin-left: 25px;
59 | }
60 |
61 | span {
62 | font-size: 14px;
63 | line-height: 15px;
64 | font-weight: 700;
65 |
66 | color: #00AC4F;
67 | }
68 | }
69 |
70 | span {
71 | margin-right: 28px;
72 |
73 | font-size: 14px;
74 | line-height: 20px;
75 | font-weight: 500;
76 |
77 | color: #838383;
78 | }
79 | `
80 |
81 | export const CardDivider = styled.div`
82 | margin: 10px 24px !important;
83 |
84 | border: 1px solid #F4F4F4;
85 | border-radius: 2px;
86 | `
87 |
88 | export const CardFooter = styled.div`
89 | display: flex;
90 | align-items: center;
91 | justify-content: space-between;
92 |
93 | button {
94 | width: 97px;
95 | height: 29px;
96 | border: none;
97 | margin-left: 26px;
98 |
99 | background: #f5f5f5;
100 | border-radius: 110px;
101 |
102 | font-size: 10px;
103 | line-height: 20px;
104 | font-weight: 700;
105 | color: #2D64FA;
106 |
107 | cursor: pointer;
108 | }
109 |
110 | a {
111 | font-size: 15px;
112 | left: 20px;
113 | font-weight: 500;
114 |
115 | text-decoration: none;
116 |
117 | color: #2D64FA;
118 | margin-right: 28px;
119 |
120 | cursor: pointer;
121 | }
122 | `
--------------------------------------------------------------------------------
/src/Ui/Components/Cards/assets/avatar.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/Ui/Components/Cards/assets/avatar1.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/Ui/Components/Cards/assets/ethereum.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/Ui/Components/Footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components';
3 | import { Link } from 'react-router-dom';
4 | import './style.css';
5 |
6 |
7 | const Fuut = styled.div`
8 | background: #1E1F28;
9 | height: 20vh;
10 | padding-top: 100px;
11 | text-align: center;
12 | color: #FFF;
13 | text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
14 | font-size: 16px;
15 | font-family: "DM Sans";
16 | line-height: 22px;
17 | font-weight: 300;
18 |
19 | `
20 | const Fuuter = styled.div`
21 | margin-top: 4%;
22 | color: white;
23 | font-family: 'DM Sans';
24 | font-style: normal;
25 | font-weight: 400;
26 | font-size: 13px;
27 | line-height: 22px;
28 | `
29 |
30 |
31 | const Footer = () => {
32 | return (
33 |
34 | FAQ
35 | Privacy Policy
36 | Terms & Conditions
37 | Whitepaper
38 | Team
39 | Collections
40 | Home
41 | Market
42 | About
43 | Copyright © 2022 NFTART. All rights reserved.
44 |
45 | );
46 | };
47 |
48 | export default Footer;
49 |
50 |
--------------------------------------------------------------------------------
/src/Ui/Components/Footer/Index.jsx:
--------------------------------------------------------------------------------
1 | import { Copyright } from 'lucide-react';
2 | import React from 'react';
3 | import { NavLink } from 'react-router-dom';
4 | import styled from 'styled-components';
5 |
6 | const FooterWrapper = styled.footer`
7 | padding: 5vh 0;
8 | background: #1e1f28;
9 | color: #ffffff;
10 | font-size: 0.7rem;
11 | `;
12 |
13 | const FooterExtra = styled.footer`
14 | margin-bottom: -35px;
15 | padding-bottom: 15px;
16 | background: #000000;
17 | `;
18 |
19 | const NavFooter = styled.footer`
20 | padding: 20px;
21 | display: flex;
22 | flex-wrap: wrap;
23 | justify-content: center;
24 | `;
25 |
26 | const NavegacaoLink = styled.footer`
27 | color: #ffffff;
28 | margin: 10px;
29 | `;
30 |
31 | const RightHome = styled.footer`
32 | display: flex;
33 | justify-content: center;
34 | padding-bottom: 47px;
35 | `;
36 |
37 | const Footer = () => {
38 | return (
39 |
40 |
41 | FAQ
42 | Privacy Policy
43 | Terms & Conditions
44 | Whitepaper
45 | Team
46 | Collections
47 | Home
48 | Market
49 | About
50 |
51 | Copyright © 2022 NFTART. All rights reserved.
52 |
53 |
54 | );
55 | };
56 |
57 | export default Footer;
58 |
--------------------------------------------------------------------------------
/src/Ui/Components/Footer/style.css:
--------------------------------------------------------------------------------
1 | .Link--Footer{
2 | color: white;
3 | text-decoration: none;
4 | justify-content: space-between;
5 | margin: 2%;
6 | }
--------------------------------------------------------------------------------
/src/Ui/Components/Input/Input.jsx:
--------------------------------------------------------------------------------
1 | import { EyeIcon, EyeOffIcon } from 'lucide-react';
2 |
3 | import { useState } from 'react';
4 | import styled from 'styled-components';
5 |
6 | /* type,title,name */
7 |
8 | const Input = ({ type, onChanged, name, display }) => {
9 | const [isPasswordDisplayed, setPasswordDisplay] = useState(false);
10 | const [inputType, setInputType] = useState(type);
11 | function handlePasswordDisplay() {
12 | setPasswordDisplay(!isPasswordDisplayed);
13 | setInputType(isPasswordDisplayed ? type : 'text');
14 | }
15 | return (
16 |
17 | {display}
18 |
19 |
20 | {type === 'password' ? (
21 |
25 | ) : (
26 | ''
27 | )}
28 |
29 |
30 | );
31 | };
32 |
33 | const InputTitle = styled.div`
34 | font-family: 'Poppins';
35 | font-style: normal;
36 | font-weight: 400;
37 | font-size: 16px;
38 | line-height: 24px;
39 | letter-spacing: 0.065em;
40 | `;
41 | function MostraSenha({ passwordDisplay, onCheck }) {
42 | return passwordDisplay ? (
43 |
44 | ) : (
45 |
46 | );
47 | }
48 |
49 | const InputWrapper = styled.div`
50 | width: 50%;
51 | margin: auto;
52 | margin-bottom: 20px;
53 | display: flex;
54 | flex-direction: column;
55 | align-items: left;
56 | `;
57 | const InputFieldWrapper = styled.div`
58 | display: flex;
59 | align-items: center;
60 | flex-shrink: 0;
61 | width: 100%;
62 | background: #d9d9d9;
63 | border-radius: 10px;
64 | box-shadow: 0px 2px 5px rgba(18, 18, 18, 0.65);
65 | `;
66 |
67 | const InputField = styled.input`
68 | type: ${(props) => props.type};
69 | padding: 15px;
70 | text-align: left;
71 | font-weight: 700;
72 | font-size: x-large;
73 | border: none;
74 | border-radius: 10px;
75 | width: 80%;
76 | height: 2rem;
77 | background: #d9d9d9;
78 | &:focus {
79 | outline: none;
80 | }
81 | `;
82 | export { Input };
83 |
--------------------------------------------------------------------------------
/src/Ui/Img/Selo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/Selo.png
--------------------------------------------------------------------------------
/src/Ui/Img/icons/card-tick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/icons/card-tick.png
--------------------------------------------------------------------------------
/src/Ui/Img/icons/chart-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/icons/chart-square.png
--------------------------------------------------------------------------------
/src/Ui/Img/icons/file.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/Ui/Img/img-card-hover/CardHoverCinco.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/img-card-hover/CardHoverCinco.png
--------------------------------------------------------------------------------
/src/Ui/Img/img-card-hover/CardHoverDois.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/img-card-hover/CardHoverDois.png
--------------------------------------------------------------------------------
/src/Ui/Img/img-card-hover/CardHoverQuatro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/img-card-hover/CardHoverQuatro.png
--------------------------------------------------------------------------------
/src/Ui/Img/img-card-hover/CardHoverTreis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/img-card-hover/CardHoverTreis.png
--------------------------------------------------------------------------------
/src/Ui/Img/img-card-hover/CardHoverUm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/img-card-hover/CardHoverUm.png
--------------------------------------------------------------------------------
/src/Ui/Img/img-card-hover/ImgAdventureTime.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/img-card-hover/ImgAdventureTime.png
--------------------------------------------------------------------------------
/src/Ui/Img/img-card-hover/ImgCardHomeArt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/img-card-hover/ImgCardHomeArt.png
--------------------------------------------------------------------------------
/src/Ui/Img/img-card-hover/ImgHomeUm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/img-card-hover/ImgHomeUm.png
--------------------------------------------------------------------------------
/src/Ui/Img/img-card-hover/ImgPerfilUsuarioArt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/img-card-hover/ImgPerfilUsuarioArt.png
--------------------------------------------------------------------------------
/src/Ui/Img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toca-do-javascript/marketplace-nft-frontend/4ab80b2d9fe3d643f2b66610144c2b486ead9178/src/Ui/Img/logo.png
--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Poppins', sans-serif;
9 | font-style: normal;
10 | font-weight: 400;
11 | }
12 |
13 | button,
14 | select,
15 | a {
16 | cursor: pointer;
17 | }
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom/client';
2 | import App from './App';
3 | import './global.css';
4 | ReactDOM.createRoot(document.getElementById('root')).render();
5 |
--------------------------------------------------------------------------------
/src/variable.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --btnColor: #531885;
3 | --default-background-color: #000000;
4 | --default-text-color: #ffffff;
5 | }
6 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------