Compare commits
4 Commits
e53ae4858d
...
9550031481
| Author | SHA1 | Date | |
|---|---|---|---|
|
9550031481 | ||
|
|
520ad38f8d | ||
|
|
21d8e8289f | ||
|
|
f31f40ad3e |
288
package-lock.json
generated
288
package-lock.json
generated
@ -10,12 +10,18 @@
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"handlebars-loader": "^1.7.3",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"webpack": "^5.98.0",
|
||||
"webpack-cli": "^6.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.1.1",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"copy-webpack-plugin": "^13.0.0",
|
||||
"css-loader": "^7.1.2",
|
||||
"html-webpack-plugin": "^5.6.3",
|
||||
"style-loader": "^4.0.0",
|
||||
"ts-loader": "^9.5.2",
|
||||
"typescript": "^5.8.2"
|
||||
}
|
||||
@ -135,6 +141,26 @@
|
||||
"undici-types": "~6.20.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.1.tgz",
|
||||
"integrity": "sha512-ePapxDL7qrgqSF67s0h9m412d9DbXyC1n59O2st+9rjuuamWsZuD2w55rqY12CbzsZ7uVXb5Nw0gEp9Z8MMutQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "19.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.2.tgz",
|
||||
"integrity": "sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@webassemblyjs/ast": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
|
||||
@ -660,6 +686,42 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/css-loader": {
|
||||
"version": "7.1.2",
|
||||
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
|
||||
"integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"icss-utils": "^5.1.0",
|
||||
"postcss": "^8.4.33",
|
||||
"postcss-modules-extract-imports": "^3.1.0",
|
||||
"postcss-modules-local-by-default": "^4.0.5",
|
||||
"postcss-modules-scope": "^3.2.0",
|
||||
"postcss-modules-values": "^4.0.0",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"semver": "^7.5.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18.12.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@rspack/core": "0.x || 1.x",
|
||||
"webpack": "^5.27.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@rspack/core": {
|
||||
"optional": true
|
||||
},
|
||||
"webpack": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/css-select": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
|
||||
@ -690,6 +752,26 @@
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"cssesc": "bin/cssesc"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dom-converter": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
|
||||
@ -1161,6 +1243,19 @@
|
||||
"entities": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/icss-utils": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
|
||||
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >= 14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/import-local": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
|
||||
@ -1426,6 +1521,25 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.11",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
||||
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/neo-async": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
|
||||
@ -1594,6 +1708,119 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
|
||||
"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.8",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-modules-extract-imports": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
|
||||
"integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >= 14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-modules-local-by-default": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
|
||||
"integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"icss-utils": "^5.0.0",
|
||||
"postcss-selector-parser": "^7.0.0",
|
||||
"postcss-value-parser": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >= 14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-modules-scope": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
|
||||
"integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"postcss-selector-parser": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >= 14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-modules-values": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
|
||||
"integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"icss-utils": "^5.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >= 14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-selector-parser": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
|
||||
"integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-value-parser": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/pretty-error": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
|
||||
@ -1614,6 +1841,27 @@
|
||||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
|
||||
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
|
||||
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"scheduler": "^0.26.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rechoir": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
|
||||
@ -1720,6 +1968,12 @@
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.26.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
|
||||
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/schema-utils": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
|
||||
@ -1803,6 +2057,16 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-support": {
|
||||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||
@ -1826,6 +2090,23 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/style-loader": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
|
||||
"integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 18.12.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "^5.27.0"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
|
||||
@ -2046,6 +2327,13 @@
|
||||
"browserslist": ">= 4.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/utila": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
|
||||
|
||||
@ -11,12 +11,18 @@
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"handlebars-loader": "^1.7.3",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"webpack": "^5.98.0",
|
||||
"webpack-cli": "^6.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.1.1",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"copy-webpack-plugin": "^13.0.0",
|
||||
"css-loader": "^7.1.2",
|
||||
"html-webpack-plugin": "^5.6.3",
|
||||
"style-loader": "^4.0.0",
|
||||
"ts-loader": "^9.5.2",
|
||||
"typescript": "^5.8.2"
|
||||
}
|
||||
|
||||
6
src/creators.hbs
Normal file
6
src/creators.hbs
Normal file
@ -0,0 +1,6 @@
|
||||
{{#> views/layout}}
|
||||
{{> views/header }}
|
||||
<main>
|
||||
Creators
|
||||
</main>
|
||||
{{/views/layout}}
|
||||
@ -1,33 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../dist/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header container">
|
||||
<a href="../dist/index.html"><img class="logo" src="images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="discover.html">Discover</a></li>
|
||||
<li><a href="creators.html">creators</a></li>
|
||||
<li><a href="creators.html">Sell</a></li>
|
||||
<li><a href="creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
<main>
|
||||
Creators
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
6
src/discover.hbs
Normal file
6
src/discover.hbs
Normal file
@ -0,0 +1,6 @@
|
||||
{{#> views/layout}}
|
||||
{{> views/header }}
|
||||
<main>
|
||||
Discover
|
||||
</main>
|
||||
{{/views/layout}}
|
||||
@ -1,33 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../dist/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header container">
|
||||
<a href="../dist/index.html"><img class="logo" src="images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="discover.html">Discover</a></li>
|
||||
<li><a href="creators.html">creators</a></li>
|
||||
<li><a href="creators.html">Sell</a></li>
|
||||
<li><a href="creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
<main>
|
||||
Discover
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/images/img.png
Normal file
BIN
src/images/img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
src/images/img_1.png
Normal file
BIN
src/images/img_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
@ -13,12 +13,8 @@
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
{{> views/header }}
|
||||
<main>
|
||||
{{> views/carusel }}
|
||||
</main>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,8 +0,0 @@
|
||||
import { initCarusel } from './components/carusel'
|
||||
|
||||
const container = document.querySelector<HTMLElement>('.nft-card-container')
|
||||
const btnLeft = document.querySelector<HTMLButtonElement>('.top-nft .btn-left')
|
||||
const btnRight = document.querySelector<HTMLButtonElement>('.top-nft .btn-right')
|
||||
if (container && btnLeft && btnRight) {
|
||||
initCarusel(container, btnLeft, btnRight)
|
||||
}
|
||||
19
src/index.tsx
Normal file
19
src/index.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import {createRoot} from "react-dom/client"
|
||||
import React from 'react';
|
||||
import './style.css'
|
||||
import HomePage from "./pages/home";
|
||||
|
||||
const rootHtmlElement = document.getElementById('root')
|
||||
if (rootHtmlElement) {
|
||||
const root = createRoot(rootHtmlElement);
|
||||
root.render(<HomePage />);
|
||||
}
|
||||
|
||||
// import { initCarusel } from './components/carusel'
|
||||
//
|
||||
// const container = document.querySelector<HTMLElement>('.nft-card-container')
|
||||
// const btnLeft = document.querySelector<HTMLButtonElement>('.top-nft .btn-left')
|
||||
// const btnRight = document.querySelector<HTMLButtonElement>('.top-nft .btn-right')
|
||||
// if (container && btnLeft && btnRight) {
|
||||
// initCarusel(container, btnLeft, btnRight)
|
||||
// }
|
||||
163
src/pages/home/banner/arrow.tsx
Normal file
163
src/pages/home/banner/arrow.tsx
Normal file
@ -0,0 +1,163 @@
|
||||
import React from "react";
|
||||
|
||||
export const arrowEl = <svg className="hero-dots" width="120" height="400" viewBox="0 0 120 400" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.5">
|
||||
<rect y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="339.989" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="396.805" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<rect width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="132.566" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="189.382" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
</g>
|
||||
</svg>
|
||||
61
src/pages/home/banner/index.tsx
Normal file
61
src/pages/home/banner/index.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import React from "react";
|
||||
import {arrowEl} from "./arrow";
|
||||
import './style.css'
|
||||
|
||||
const Banner = () => {
|
||||
return (
|
||||
<div className="container hero">
|
||||
<div className="hero-main">
|
||||
<div className="hero-line"></div>
|
||||
<h1 className="hero-title">Discover And Create NFTs</h1>
|
||||
<p className="hero-description">Discover, Create and Sell NFTs On Our NFT Marketplace With Over
|
||||
Thousands Of NFTs
|
||||
And Get a <span className="hero-description__bold">$20 bonus</span>.</p>
|
||||
<div className="hero-buttons">
|
||||
<button className="button">Explore More</button>
|
||||
<button className="button button-secondary">create NFT</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="hero-cubs">
|
||||
<div className="hero-cub1">
|
||||
<svg className="cub1-arrow" width="131" height="136" viewBox="0 0 131 136" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.6507 43.2949C32.4339 30.7255 51.9743 23.0115 72.683 28.6293C91.3749 33.7001 103.143 49.6308 90.5396 69.3323C84.5735 78.6586 71.8706 85.1866 61.8852 79.874C50.7606 73.9554 59.5288 59.017 66.6505 54.7089C83.2839 44.6468 106.696 49.3237 118.212 68.8676C131.849 92.0121 108.785 103.532 108.769 103.344"
|
||||
stroke="black" stroke-width="3.37884" stroke-miterlimit="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
<path
|
||||
d="M19.2682 18.3819C19.8774 20.8064 19.5256 23.2335 19.2862 25.677C18.5006 33.7006 15.3552 42.0307 9.71151 47.2931C17.1379 44.0369 27.7921 42.6188 34.5374 48.3345"
|
||||
stroke="black" stroke-width="3.37884" stroke-miterlimit="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div className="hero-cub2"></div>
|
||||
</div>
|
||||
<div className="lr-button">
|
||||
<button className="lr-button-left">
|
||||
<svg width="27" height="27" viewBox="0 0 27 27" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M11.2397 8.39036C10.8023 7.98657 10.1203 8.01384 9.71654 8.45128L6.23402 12.224C5.85287 12.6369 5.85287 13.2733 6.23401 13.6862L9.71653 17.459C10.1203 17.8965 10.8023 17.9237 11.2397 17.5199C11.6772 17.1161 11.7045 16.4342 11.3007 15.9967L9.48802 14.033L19.9611 14.033C20.5565 14.033 21.0391 13.5504 21.0391 12.9551C21.0391 12.3598 20.5565 11.8772 19.9611 11.8772L9.48805 11.8772L11.3007 9.91356C11.7044 9.47612 11.6772 8.79416 11.2397 8.39036Z"
|
||||
fill="#929292"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div className="lr-button-delimiter"></div>
|
||||
<button className="lr-button-right">
|
||||
<svg width="27" height="27" viewBox="0 0 27 27" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M15.7603 8.39036C16.1977 7.98657 16.8797 8.01384 17.2835 8.45128L20.766 12.224C21.1471 12.6369 21.1471 13.2733 20.766 13.6862L17.2835 17.459C16.8797 17.8965 16.1977 17.9237 15.7603 17.5199C15.3228 17.1161 15.2955 16.4342 15.6993 15.9967L17.512 14.033L7.03886 14.033C6.44354 14.033 5.96094 13.5504 5.96094 12.9551C5.96094 12.3598 6.44354 11.8772 7.03886 11.8772L17.5119 11.8772L15.6993 9.91356C15.2956 9.47612 15.3228 8.79416 15.7603 8.39036Z"
|
||||
fill="#23262F"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{arrowEl}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Banner
|
||||
115
src/pages/home/banner/style.css
Normal file
115
src/pages/home/banner/style.css
Normal file
@ -0,0 +1,115 @@
|
||||
.hero {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding-top: 54px;
|
||||
padding-bottom: 143px;
|
||||
}
|
||||
|
||||
.hero-main {
|
||||
margin-right: 48px;
|
||||
}
|
||||
|
||||
.hero-line {
|
||||
width: 195px;
|
||||
border-top: 1px solid #201F1F;
|
||||
opacity: 0.2;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 75px;
|
||||
line-height: 120%;
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-family: var(--font-inter);
|
||||
padding: 0;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.hero-description__bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
margin-top: 45px;
|
||||
display: flex;
|
||||
gap: 23px;
|
||||
}
|
||||
|
||||
.hero-cub1 {
|
||||
position: relative;
|
||||
width: 391px;
|
||||
height: 394px;
|
||||
border-radius: 25px;
|
||||
background: center / cover no-repeat url('../../../images/img.png'), #F8F8F8;
|
||||
}
|
||||
.hero-cub1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 25px;
|
||||
background: center / cover no-repeat url('../../../images/img.png'), #F8F8F8;
|
||||
transform: translateY(25px);
|
||||
|
||||
filter: blur(83.7px);
|
||||
}
|
||||
|
||||
.hero-cub2 {
|
||||
position: absolute;
|
||||
top: 181px;
|
||||
left: calc(100% + 38px);
|
||||
width: 320px;
|
||||
height: 322px;
|
||||
border-radius: 25px;
|
||||
background: center / cover no-repeat url('../../../images/img_1.png'), #F8F8F8;
|
||||
}
|
||||
.hero-cub2::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 25px;
|
||||
background: center / cover no-repeat url('../../../images/img_1.png'), #F8F8F8;
|
||||
transform: translateY(25px);
|
||||
|
||||
filter: blur(83.7px);
|
||||
}
|
||||
|
||||
.cub1-arrow {
|
||||
position: absolute;
|
||||
left: calc(100% + 23px);
|
||||
top: 41px;
|
||||
transform: rotate(-3.08deg);
|
||||
}
|
||||
|
||||
.hero-dots {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-cubs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.hero-cubs .lr-button {
|
||||
margin-top: 71px;
|
||||
}
|
||||
16
src/pages/home/index.tsx
Normal file
16
src/pages/home/index.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import Header from "../../widgets/header";
|
||||
import Banner from "./banner";
|
||||
|
||||
|
||||
const HomePage = (): React.ReactElement => {
|
||||
return (<>
|
||||
<Header/>
|
||||
<main>
|
||||
<Banner/>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomePage
|
||||
@ -1,3 +1,8 @@
|
||||
body {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
--color-dark: #141416;
|
||||
--text-dark: var(--color-dark);
|
||||
@ -10,7 +15,8 @@ html {
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 97px;
|
||||
padding-left: 97px;
|
||||
padding-right: 97px;
|
||||
}
|
||||
|
||||
.button {
|
||||
@ -24,7 +30,12 @@ html {
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border: 1.5px solid #000000;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background-color: white;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
@ -36,6 +47,8 @@ html {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-inter);
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@ -95,7 +108,7 @@ html {
|
||||
border-radius: 24px;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background: center / cover no-repeat url('https://s3-alpha-sig.figma.com/img/b82f/55d0/61c522d86567e3c5ea1f39ddf68ae4bc?Expires=1743379200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=UlO4-Fsc27zhQo9T9Tl8fhCSVyxM4GHu6DkUtWgi881ggrnY9uHKNdVvhg2GuSS7ItYldxw9FhYRjgcBrwKBvnf4XLjw8YjkZ8584NLVxfH-POsN8O2eh9gyxEBEgaF~AVwwnNmnRpPN2JFnfcRUIihkRrhZA7IjDRxNY1CbPHB5j~AP9wlWhI6P2TqaXaJj~8JRZPx1YBpGWfrSCgLfgQejNNi58FvkkX1Hkvm0aICdebCSqwFrq~sLI6Rbj5H-QgF~2AxU3EGiBzdaCvMXfBx3xpZIvHGkuSeYlhdlU-KFNmjF9u3VPg7c5S~IvPMIOmvWhwX-GguAGxPZe4tksw__'), #F8F8F8;
|
||||
background: center / cover no-repeat url('./images/img.png'), #F8F8F8;
|
||||
}
|
||||
|
||||
.nft-card__content {
|
||||
@ -175,3 +188,24 @@ html {
|
||||
.nft-card-container .nft-card {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lr-button {
|
||||
width: 166px;
|
||||
height: 69px;
|
||||
box-shadow: 0px 43.12px 34.49px -25.87px #0F0F0F1F;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #FCFCFD;
|
||||
border-radius: 17.25px;
|
||||
}
|
||||
.lr-button button {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.lr-button-delimiter {
|
||||
width: 2px;
|
||||
height: 25px;
|
||||
background: #E6E8EC;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
|
||||
<a href="index.html"><img class="logo" src="./images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="../src/discover.html">Discover</a></li>
|
||||
<li><a href="../src/creators.html">creators</a></li>
|
||||
<li><a href="../src/creators.html">Sell</a></li>
|
||||
<li><a href="../src/creators.html">stats</a></li>
|
||||
<li><a href="./discover.html">Discover</a></li>
|
||||
<li><a href="./creators.html">creators</a></li>
|
||||
<li><a href="./creators.html">Sell</a></li>
|
||||
<li><a href="./creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
|
||||
20
src/views/layout.hbs
Normal file
20
src/views/layout.hbs
Normal file
@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{#if title}}{{title}}{{else}}Document{{/if}}</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
|
||||
rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
{{> @partial-block }}
|
||||
</body>
|
||||
</html>
|
||||
20
src/widgets/header/index.tsx
Normal file
20
src/widgets/header/index.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from 'react'
|
||||
|
||||
const Header = (): React.ReactElement => {
|
||||
return (
|
||||
<header className="header container">
|
||||
<a href="index.html"><img className="logo" src="./images/logo.svg" alt=""/></a>
|
||||
<nav>
|
||||
<ul className="nav-list">
|
||||
<li><a href="./discover.html">Discover</a></li>
|
||||
<li><a href="./creators.html">creators</a></li>
|
||||
<li><a href="./creators.html">Sell</a></li>
|
||||
<li><a href="./creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button className="button">Connect Wallet</button>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -13,7 +13,7 @@
|
||||
/* Language and Environment */
|
||||
"target": "ES2022", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
// "jsx": "preserve", /* Specify what JSX code is generated. */
|
||||
"jsx": "react", /* Specify what JSX code is generated. */
|
||||
// "libReplacement": true, /* Enable lib replacement. */
|
||||
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
|
||||
@ -3,33 +3,35 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.ts',
|
||||
entry: './src/index.tsx',
|
||||
output: {
|
||||
filename: 'index.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
clean: true
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.ts']
|
||||
extensions: ['.js', '.ts', '.jsx', '.tsx']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{ test: /\.(ts|tsx)$/, loader: "ts-loader" },
|
||||
{
|
||||
test: /\.hbs$/,
|
||||
test: /\.hbs|html$/,
|
||||
loader: 'handlebars-loader',
|
||||
},
|
||||
]
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{ loader: "style-loader" },
|
||||
{ loader: "css-loader" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: "./src/index.hbs"
|
||||
}),
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
{from: "./src/style.css", to: "style.css"},
|
||||
{from: "./src/images", to: "images"},
|
||||
],
|
||||
template: "./src/index.html",
|
||||
filename: "index.html"
|
||||
})
|
||||
]
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user