diff --git a/package-lock.json b/package-lock.json index 4143ad6..a954487 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,10 +10,14 @@ "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", @@ -137,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", @@ -741,6 +765,13 @@ "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", @@ -1810,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", @@ -1916,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", diff --git a/package.json b/package.json index 7df490b..b4e076f 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,14 @@ "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", diff --git a/src/index.hbs b/src/index.hbs deleted file mode 100644 index c36d3de..0000000 --- a/src/index.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{#> views/layout}} - {{> views/header }} -
- {{> views/main-banner.html }} - {{> views/carusel }} -
-{{/views/layout}} \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..1ded09b --- /dev/null +++ b/src/index.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + + + + + +
+ + \ No newline at end of file diff --git a/src/index.ts b/src/index.ts deleted file mode 100644 index e6a86b9..0000000 --- a/src/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import './style.css' -import { initCarusel } from './components/carusel' - -const container = document.querySelector('.nft-card-container') -const btnLeft = document.querySelector('.top-nft .btn-left') -const btnRight = document.querySelector('.top-nft .btn-right') -if (container && btnLeft && btnRight) { - initCarusel(container, btnLeft, btnRight) -} diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..d01d6e3 --- /dev/null +++ b/src/index.tsx @@ -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(); +} + +// import { initCarusel } from './components/carusel' +// +// const container = document.querySelector('.nft-card-container') +// const btnLeft = document.querySelector('.top-nft .btn-left') +// const btnRight = document.querySelector('.top-nft .btn-right') +// if (container && btnLeft && btnRight) { +// initCarusel(container, btnLeft, btnRight) +// } diff --git a/src/pages/home/banner/arrow.tsx b/src/pages/home/banner/arrow.tsx new file mode 100644 index 0000000..1db61d9 --- /dev/null +++ b/src/pages/home/banner/arrow.tsx @@ -0,0 +1,163 @@ +import React from "react"; + +export const arrowEl = + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/home/banner/index.tsx b/src/pages/home/banner/index.tsx new file mode 100644 index 0000000..93c6bc8 --- /dev/null +++ b/src/pages/home/banner/index.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import {arrowEl} from "./arrow"; +import './style.css' + +const Banner = () => { + return ( +
+
+
+

Discover And Create NFTs

+

Discover, Create and Sell NFTs On Our NFT Marketplace With Over + Thousands Of NFTs + And Get a $20 bonus.

+
+ + +
+
+
+
+
+ + + + +
+
+
+ +
+ +
+
+ {arrowEl} +
+
+ ) +} + +export default Banner \ No newline at end of file diff --git a/src/views/main-banner.css b/src/pages/home/banner/style.css similarity index 84% rename from src/views/main-banner.css rename to src/pages/home/banner/style.css index 949c42f..fbc7377 100644 --- a/src/views/main-banner.css +++ b/src/pages/home/banner/style.css @@ -52,7 +52,7 @@ width: 391px; height: 394px; border-radius: 25px; - background: center / cover no-repeat url('../images/img.png'), #F8F8F8; + background: center / cover no-repeat url('../../../images/img.png'), #F8F8F8; } .hero-cub1::after { content: ''; @@ -61,7 +61,7 @@ width: 100%; height: 100%; border-radius: 25px; - background: center / cover no-repeat url('../images/img.png'), #F8F8F8; + background: center / cover no-repeat url('../../../images/img.png'), #F8F8F8; transform: translateY(25px); filter: blur(83.7px); @@ -74,7 +74,7 @@ width: 320px; height: 322px; border-radius: 25px; - background: center / cover no-repeat url('../images/img_1.png'), #F8F8F8; + background: center / cover no-repeat url('../../../images/img_1.png'), #F8F8F8; } .hero-cub2::after { content: ''; @@ -83,7 +83,7 @@ width: 100%; height: 100%; border-radius: 25px; - background: center / cover no-repeat url('../images/img_1.png'), #F8F8F8; + background: center / cover no-repeat url('../../../images/img_1.png'), #F8F8F8; transform: translateY(25px); filter: blur(83.7px); diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx new file mode 100644 index 0000000..b0ea32c --- /dev/null +++ b/src/pages/home/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import Header from "../../widgets/header"; +import Banner from "./banner"; + + +const HomePage = (): React.ReactElement => { + return (<> +
+
+ +
+ + ) +} + +export default HomePage \ No newline at end of file diff --git a/src/style.css b/src/style.css index ea01f13..fcc6b28 100644 --- a/src/style.css +++ b/src/style.css @@ -209,5 +209,3 @@ html { background: #E6E8EC; flex-shrink: 0; } - -@import "views/main-banner.css"; \ No newline at end of file diff --git a/src/views/main-banner.html b/src/views/main-banner.html deleted file mode 100644 index 7cc39ce..0000000 --- a/src/views/main-banner.html +++ /dev/null @@ -1,203 +0,0 @@ -
-
-
-

Discover And Create NFTs

-

Discover, Create and Sell NFTs On Our NFT Marketplace With Over Thousands Of NFTs - And Get a $20 bonus.

-
- - -
-
-
-
-
- - - - -
-
-
- -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
\ No newline at end of file diff --git a/src/widgets/header/index.tsx b/src/widgets/header/index.tsx new file mode 100644 index 0000000..70e8dd5 --- /dev/null +++ b/src/widgets/header/index.tsx @@ -0,0 +1,20 @@ +import React from 'react' + +const Header = (): React.ReactElement => { + return ( +
+ + + +
+ ) +} + +export default Header \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 1c249ac..b22ac8b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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. */ diff --git a/webpack.config.js b/webpack.config.js index 4e42d06..a0bf5e6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,14 +3,14 @@ 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: [ @@ -30,21 +30,8 @@ module.exports = { }, plugins: [ new HtmlWebpackPlugin({ - template: "./src/index.hbs", + template: "./src/index.html", filename: "index.html" - }), - new HtmlWebpackPlugin({ - template: "./src/creators.hbs", - filename: "creators.html" - }), - new HtmlWebpackPlugin({ - template: "./src/discover.hbs", - filename: "discover.html" - }), - new CopyPlugin({ - patterns: [ - {from: "./src/images", to: "images"}, - ], }) ] }; \ No newline at end of file