tuanbt
/
SGPT
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: package-lock.json

Browse Source 
modified:   package.json
new file:   src/i18n/en/aboutSection.json
new file:   src/i18n/en/firstSection.json
new file:   src/i18n/i18n.ts
new file:   src/i18n/vi/aboutSection.json
new file:   src/i18n/vi/firstSection.json
modified:   src/index.css
modified:   src/main.tsx
modified:   src/shared/components/Header.tsx
modified:   src/shared/components/animated/QnASection.css
modified:   src/shared/components/backtotop/index.tsx
modified:   src/shared/components/home/AboutSection.tsx
modified:   src/shared/components/home/FirstSection.tsx
modified:   src/shared/components/home/QnASection.tsx
modified:   src/shared/components/home/RoadMap.tsx
modified:   src/shared/components/home/TokenomicsSection.tsx
modified:   src/shared/components/home/text
modified:   tailwind.config.cjs
main
Thuong_e 2 years ago
parent 3cb558ad6a
commit bc26398673
19 changed files with 1473 additions and 193 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 459
      package-lock.json
  2. 7
      package.json
  3. 7
      src/i18n/en/aboutSection.json
  4. 7
      src/i18n/en/firstSection.json
  5. 25
      src/i18n/i18n.ts
  6. 7
      src/i18n/vi/aboutSection.json
  7. 7
      src/i18n/vi/firstSection.json
  8. 34
      src/index.css
  9. 1
      src/main.tsx
  10. 59
      src/shared/components/Header.tsx
  11. 32
      src/shared/components/animated/QnASection.css
  12. 24
      src/shared/components/backtotop/index.tsx
  13. 4
      src/shared/components/home/AboutSection.tsx
  14. 95
      src/shared/components/home/FirstSection.tsx
  15. 117
      src/shared/components/home/QnASection.tsx
  16. 55
      src/shared/components/home/RoadMap.tsx
  17. 150
      src/shared/components/home/TokenomicsSection.tsx
  18. 567
      src/shared/components/home/text
  19. 9
      tailwind.config.cjs

459
package-lock.json generated
Unescape View File

@ -10,19 +10,26 @@
"dependencies": { "dependencies": {
"@react-spring/parallax": "^9.7.1", "@react-spring/parallax": "^9.7.1",
"@react-spring/web": "^9.7.1", "@react-spring/web": "^9.7.1",
"animate.css": "^4.1.1",
"chart.js": "^3.9.1", "chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.2.0",
"i18next": "^22.4.14",
"localforage": "^1.10.0", "localforage": "^1.10.0",
"match-sorter": "^6.3.1", "match-sorter": "^6.3.1",
"randomcolor": "^0.6.2", "randomcolor": "^0.6.2",
"react": "^18.2.0", "react": "^18.2.0",
"react-chartjs-2": "^4.3.1", "react-chartjs-2": "^4.3.1",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-i18next": "^12.2.0",
"react-icons": "^4.7.1", "react-icons": "^4.7.1",
"react-router-dom": "^6.8.2", "react-router-dom": "^6.8.2",
"recharts": "^2.5.0",
"sort-by": "^0.0.2" "sort-by": "^0.0.2"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.27", "@types/react": "^18.0.27",
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^18.0.10", "@types/react-dom": "^18.0.10",
"@types/react-router-dom": "^5.3.3", "@types/react-router-dom": "^5.3.3",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
@ -597,6 +604,60 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@types/d3-array": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.4.tgz",
"integrity": "sha512-nwvEkG9vYOc0Ic7G7kwgviY4AQlTfYGIZ0fqB7CQHXGyYM6nO7kJh5EguSNA3jfh4rq7Sb7eMVq8isuvg2/miQ=="
},
"node_modules/@types/d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
},
"node_modules/@types/d3-ease": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
"integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA=="
},
"node_modules/@types/d3-interpolate": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
"dependencies": {
"@types/d3-color": "*"
}
},
"node_modules/@types/d3-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
"integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg=="
},
"node_modules/@types/d3-scale": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.3.tgz",
"integrity": "sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==",
"dependencies": {
"@types/d3-time": "*"
}
},
"node_modules/@types/d3-shape": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.1.tgz",
"integrity": "sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==",
"dependencies": {
"@types/d3-path": "*"
}
},
"node_modules/@types/d3-time": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
"integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg=="
},
"node_modules/@types/d3-timer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
"integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g=="
},
"node_modules/@types/history": { "node_modules/@types/history": {
"version": "4.7.11", "version": "4.7.11",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
@ -620,6 +681,15 @@
"csstype": "^3.0.2" "csstype": "^3.0.2"
} }
}, },
"node_modules/@types/react-copy-to-clipboard": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz",
"integrity": "sha512-otTJsJpofYAeaIeOwV5xBUGpo6exXG2HX7X4nseToCB2VgPEBxGBHCm/FecZ676doNR7HCSTVtmohxfG2b3/yQ==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-dom": { "node_modules/@types/react-dom": {
"version": "18.0.11", "version": "18.0.11",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
@ -688,6 +758,11 @@
"node": ">=0.4.0" "node": ">=0.4.0"
} }
}, },
"node_modules/animate.css": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
},
"node_modules/anymatch": { "node_modules/anymatch": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@ -827,6 +902,14 @@
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
"integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==" "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
}, },
"node_modules/chartjs-plugin-datalabels": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
"integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
"peerDependencies": {
"chart.js": ">=3.0.0"
}
},
"node_modules/chokidar": { "node_modules/chokidar": {
"version": "3.5.3", "version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -866,6 +949,11 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"node_modules/color-name": { "node_modules/color-name": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@ -880,6 +968,19 @@
"optional": true, "optional": true,
"peer": true "peer": true
}, },
"node_modules/copy-to-clipboard": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
"integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
"dependencies": {
"toggle-selection": "^1.0.6"
}
},
"node_modules/css-unit-converter": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
},
"node_modules/cssesc": { "node_modules/cssesc": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -898,6 +999,121 @@
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
"dev": true "dev": true
}, },
"node_modules/d3-array": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.3.tgz",
"integrity": "sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==",
"dependencies": {
"internmap": "1 - 2"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-ease": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-format": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-interpolate": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
"dependencies": {
"d3-color": "1 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-path": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-scale": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
"dependencies": {
"d3-array": "2.10.0 - 3",
"d3-format": "1 - 3",
"d3-interpolate": "1.2.0 - 3",
"d3-time": "2.1.1 - 3",
"d3-time-format": "2 - 4"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-shape": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
"dependencies": {
"d3-path": "^3.1.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-time": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
"dependencies": {
"d3-array": "2 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-time-format": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
"dependencies": {
"d3-time": "1 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-timer": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
"engines": {
"node": ">=12"
}
},
"node_modules/decimal.js-light": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
},
"node_modules/defined": { "node_modules/defined": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz", "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
@ -936,6 +1152,14 @@
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
"dev": true "dev": true
}, },
"node_modules/dom-helpers": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
"integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
"dependencies": {
"@babel/runtime": "^7.1.2"
}
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.317", "version": "1.4.317",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.317.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.317.tgz",
@ -988,6 +1212,16 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
},
"node_modules/fast-equals": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz",
"integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg=="
},
"node_modules/fast-glob": { "node_modules/fast-glob": {
"version": "3.2.12", "version": "3.2.12",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@ -1094,11 +1328,49 @@
"node": ">= 0.4.0" "node": ">= 0.4.0"
} }
}, },
"node_modules/html-parse-stringify": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
"dependencies": {
"void-elements": "3.1.0"
}
},
"node_modules/i18next": {
"version": "22.4.14",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.14.tgz",
"integrity": "sha512-VtLPtbdwGn0+DAeE00YkiKKXadkwg+rBUV+0v8v0ikEjwdiJ0gmYChVE4GIa9HXymY6wKapkL93vGT7xpq6aTw==",
"funding": [
{
"type": "individual",
"url": "https://locize.com"
},
{
"type": "individual",
"url": "https://locize.com/i18next.html"
},
{
"type": "individual",
"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
}
],
"dependencies": {
"@babel/runtime": "^7.20.6"
}
},
"node_modules/immediate": { "node_modules/immediate": {
"version": "3.0.6", "version": "3.0.6",
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
}, },
"node_modules/internmap": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
"engines": {
"node": ">=12"
}
},
"node_modules/is-binary-path": { "node_modules/is-binary-path": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@ -1183,6 +1455,11 @@
"lie": "3.1.1" "lie": "3.1.1"
} }
}, },
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/loose-envify": { "node_modules/loose-envify": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@ -1270,6 +1547,14 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/object-hash": { "node_modules/object-hash": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
@ -1439,6 +1724,16 @@
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true "dev": true
}, },
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.13.1"
}
},
"node_modules/queue-microtask": { "node_modules/queue-microtask": {
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -1496,6 +1791,18 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0" "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
} }
}, },
"node_modules/react-copy-to-clipboard": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
"integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
"dependencies": {
"copy-to-clipboard": "^3.3.1",
"prop-types": "^15.8.1"
},
"peerDependencies": {
"react": "^15.3.0 || 16 || 17 || 18"
}
},
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "18.2.0", "version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -1508,6 +1815,27 @@
"react": "^18.2.0" "react": "^18.2.0"
} }
}, },
"node_modules/react-i18next": {
"version": "12.2.0",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.2.0.tgz",
"integrity": "sha512-5XeVgSygaGfyFmDd2WcXvINRw2WEC1XviW1LXY/xLOEMzsCFRwKqfnHN+hUjla8ZipbVJR27GCMSuTr0BhBBBQ==",
"dependencies": {
"@babel/runtime": "^7.20.6",
"html-parse-stringify": "^3.0.1"
},
"peerDependencies": {
"i18next": ">= 19.0.0",
"react": ">= 16.8.0"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
}
}
},
"node_modules/react-icons": { "node_modules/react-icons": {
"version": "4.8.0", "version": "4.8.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
@ -1516,6 +1844,28 @@
"react": "*" "react": "*"
} }
}, },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"node_modules/react-resize-detector": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-8.1.0.tgz",
"integrity": "sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==",
"dependencies": {
"lodash": "^4.17.21"
},
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-router": { "node_modules/react-router": {
"version": "6.8.2", "version": "6.8.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.2.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.2.tgz",
@ -1546,6 +1896,35 @@
"react-dom": ">=16.8" "react-dom": ">=16.8"
} }
}, },
"node_modules/react-smooth": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.2.tgz",
"integrity": "sha512-pgqSp1q8rAGtF1bXQE0m3CHGLNfZZh5oA5o1tsPLXRHnKtkujMIJ8Ws5nO1mTySZf1c4vgwlEk+pHi3Ln6eYLw==",
"dependencies": {
"fast-equals": "^4.0.3",
"react-transition-group": "2.9.0"
},
"peerDependencies": {
"prop-types": "^15.6.0",
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-transition-group": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
"integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
"dependencies": {
"dom-helpers": "^3.4.0",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2",
"react-lifecycles-compat": "^3.0.4"
},
"peerDependencies": {
"react": ">=15.0.0",
"react-dom": ">=15.0.0"
}
},
"node_modules/read-cache": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -1567,6 +1946,52 @@
"node": ">=8.10.0" "node": ">=8.10.0"
} }
}, },
"node_modules/recharts": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.5.0.tgz",
"integrity": "sha512-0EQYz3iA18r1Uq8VqGZ4dABW52AKBnio37kJgnztIqprELJXpOEsa0SzkqU1vjAhpCXCv52Dx1hiL9119xsqsQ==",
"dependencies": {
"classnames": "^2.2.5",
"eventemitter3": "^4.0.1",
"lodash": "^4.17.19",
"react-is": "^16.10.2",
"react-resize-detector": "^8.0.4",
"react-smooth": "^2.0.2",
"recharts-scale": "^0.4.4",
"reduce-css-calc": "^2.1.8",
"victory-vendor": "^36.6.8"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"prop-types": "^15.6.0",
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/recharts-scale": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
"integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
"dependencies": {
"decimal.js-light": "^2.4.1"
}
},
"node_modules/reduce-css-calc": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
"integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
"dependencies": {
"css-unit-converter": "^1.1.1",
"postcss-value-parser": "^3.3.0"
}
},
"node_modules/reduce-css-calc/node_modules/postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
},
"node_modules/regenerator-runtime": { "node_modules/regenerator-runtime": {
"version": "0.13.11", "version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@ -1804,6 +2229,11 @@
"node": ">=8.0" "node": ">=8.0"
} }
}, },
"node_modules/toggle-selection": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
"integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
},
"node_modules/typescript": { "node_modules/typescript": {
"version": "4.9.5", "version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
@ -1849,6 +2279,27 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true "dev": true
}, },
"node_modules/victory-vendor": {
"version": "36.6.8",
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.6.8.tgz",
"integrity": "sha512-H3kyQ+2zgjMPvbPqAl7Vwm2FD5dU7/4bCTQakFQnpIsfDljeOMDojRsrmJfwh4oAlNnWhpAf+mbAoLh8u7dwyQ==",
"dependencies": {
"@types/d3-array": "^3.0.3",
"@types/d3-ease": "^3.0.0",
"@types/d3-interpolate": "^3.0.1",
"@types/d3-scale": "^4.0.2",
"@types/d3-shape": "^3.1.0",
"@types/d3-time": "^3.0.0",
"@types/d3-timer": "^3.0.0",
"d3-array": "^3.1.6",
"d3-ease": "^3.0.1",
"d3-interpolate": "^3.0.1",
"d3-scale": "^4.0.2",
"d3-shape": "^3.1.0",
"d3-time": "^3.0.0",
"d3-timer": "^3.0.1"
}
},
"node_modules/vite": { "node_modules/vite": {
"version": "4.1.4", "version": "4.1.4",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz",
@ -1898,6 +2349,14 @@
} }
} }
}, },
"node_modules/void-elements": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/xtend": { "node_modules/xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

7
package.json
Unescape View File

@ -11,19 +11,26 @@
"dependencies": { "dependencies": {
"@react-spring/parallax": "^9.7.1", "@react-spring/parallax": "^9.7.1",
"@react-spring/web": "^9.7.1", "@react-spring/web": "^9.7.1",
"animate.css": "^4.1.1",
"chart.js": "^3.9.1", "chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.2.0",
"i18next": "^22.4.14",
"localforage": "^1.10.0", "localforage": "^1.10.0",
"match-sorter": "^6.3.1", "match-sorter": "^6.3.1",
"randomcolor": "^0.6.2", "randomcolor": "^0.6.2",
"react": "^18.2.0", "react": "^18.2.0",
"react-chartjs-2": "^4.3.1", "react-chartjs-2": "^4.3.1",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-i18next": "^12.2.0",
"react-icons": "^4.7.1", "react-icons": "^4.7.1",
"react-router-dom": "^6.8.2", "react-router-dom": "^6.8.2",
"recharts": "^2.5.0",
"sort-by": "^0.0.2" "sort-by": "^0.0.2"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.27", "@types/react": "^18.0.27",
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^18.0.10", "@types/react-dom": "^18.0.10",
"@types/react-router-dom": "^5.3.3", "@types/react-router-dom": "^5.3.3",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",

7
src/i18n/en/aboutSection.json
Unescape View File

@ -0,0 +1,7 @@
{
"title1": "WHAT IS SGPT?",
"title2": "SGPT SOLUTION",
"content1": "SGPT Token is a complementary token created on the blockchain platform to provide a platform for small and medium-sized businesses (SMBs) to create and manage an internal Q&A system. SGPT Token will be used to conduct transactions on the platform and provide benefits to members of the internal Q&A system. SGPT Token will also be used to reward members who make positive contributions to the system.",
"content2": "The SGPT Token is a solution to the problems associated with traditional payment methods for chat bot services. The token is built on blockchain technology, which ensures that transactions are fast, secure, and transparent. Moreover, the use of the SGPT Token eliminates the need for traditional payment methods, which are often costly and inconvenient."
}

7
src/i18n/en/firstSection.json
Unescape View File

@ -0,0 +1,7 @@
{
"title": "A digital currency payment for chat bot services",
"content": "The SGPT Token is a digital currency designed to facilitate payments for services provided by the SGPT chat bot. The chat bot is a powerful tool that utilizes artificial intelligence to communicate with users and provide valuable information and services.",
"addressBSC": "Address on BSC",
"address": "0x3c97331438e90680a17c35905ffc2b8ef760f844",
"joinOur": "Join Our Community"
}

25
src/i18n/i18n.ts
Unescape View File

@ -0,0 +1,25 @@
import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";
import FirstSection_EN from "./en/firstSection.json"
import FirstSection_VI from "./vi/firstSection.json"
export const locales = {
en: 'English',
vi: 'Việt Nam'
}
export const resources = {
en: {
firstSection: FirstSection_EN
},
vi: {
firstSection: FirstSection_VI
},
};
i18n.use(initReactI18next).init({
resources,
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false, // react already safes from xss
},
});

7
src/i18n/vi/aboutSection.json
Unescape View File

@ -0,0 +1,7 @@
{
"title1": "SGPT là gì?",
"title2": "Giải pháp SGPT ",
"content1": "SGPT Token là mã thông báo bổ sung được tạo trên nền tảng chuỗi khối để cung cấp nền tảng cho các doanh nghiệp vừa và nhỏ (SMBs) tạo và quản lý hệ thống hỏi đáp nội bộ. SGPT token sẽ được sử dụng để thực hiện các giao dịch trên nền tảng và cung cấp lợi ích cho các thành viên của hệ thống hỏi đáp nội bộ. SGPT token cũng sẽ được sử dụng để thưởng cho các thành viên có đóng góp tích cực cho hệ thống.",
"content2": "SGPT Token là một giải pháp cho các vấn đề liên quan đến phương thức thanh toán truyền thống cho các dịch vụ chatbot trò chuyện. Mã thông báo được xây dựng trên công nghệ chuỗi khối, đảm bảo rằng các giao dịch diễn ra nhanh chóng, an toàn và minh bạch. Hơn nữa, việc sử dụng SGPT Token giúp loại bỏ nhu cầu về các phương thức thanh toán truyền thống, thường tốn kém và bất tiện."
}

7
src/i18n/vi/firstSection.json
Unescape View File

@ -0,0 +1,7 @@
{
"title": "Thanh toán bằng tiền kỹ thuật số cho các dịch vụ chatbot",
"content": "SGPT Token là một loại tiền kỹ thuật số được thiết kế để hỗ trợ thanh toán cho các dịch vụ do chatbot SGPT cung cấp. Chat bot là một công cụ mạnh mẽ sử dụng trí tuệ nhân tạo để giao tiếp với người dùng và cung cấp thông tin và dịch vụ có giá trị",
"addressBSC": "Địa chỉ trên BSC",
"address": "0x3c97331438e90680a17c35905ffc2b8ef760f844",
"joinOur": "Tham gia cùng chúng tôi"
}

34
src/index.css
Unescape View File

@ -13,7 +13,41 @@
transform: translateX(0); transform: translateX(0);
} }
} }
@keyframes show-list-language {
0% {
opacity: 0;
transform: translateY(-80%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes show-list-line {
0% {
opacity: 0;
width: 0%;
}
100% {
opacity: 1;
width: 100%;
}
}
.animate-show{
transition: all 0.3s ease ;
}
.animate-show-list-language{
transition: animation 0.5s ease;
animation: show-list-language 0.3s ease;
}
.animate-show-line{
animation: show-list-line 0.3s ease;
}
.animate-slide-loop { .animate-slide-loop {
animation-name: slide-loop; animation-name: slide-loop;
animation-duration: 3s; animation-duration: 3s;

1
src/main.tsx
Unescape View File

@ -2,6 +2,7 @@ import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import App from "./App"; import App from "./App";
import "./index.css"; import "./index.css";
import "./i18n/i18n";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode> <React.StrictMode>

59
src/shared/components/Header.tsx
Unescape View File

@ -1,8 +1,12 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import {useTranslation } from "react-i18next";
import Button from "./Button"; import Button from "./Button";
import robotLogo from "../../assets/images/robot-logo.png"; import robotLogo from "../../assets/images/robot-logo.png";
import { BsNewspaper, BsGithub } from "react-icons/bs"; import { BsNewspaper, BsGithub } from "react-icons/bs";
import Whitepaper from "../../assets/Whitepaper.pdf"; import Whitepaper from "../../assets/Whitepaper.pdf";
import { MdLanguage } from "react-icons/md";
import { locales, resources } from "../../i18n/i18n";
type Props = {}; type Props = {};
const menuItems = [ const menuItems = [
@ -32,7 +36,11 @@ const Header = (props: Props) => {
const [isScrolled, setIsScrolled] = React.useState(false); const [isScrolled, setIsScrolled] = React.useState(false);
const [isOpenMenu, setIsOpenMenu] = React.useState(false); const [isOpenMenu, setIsOpenMenu] = React.useState(false);
const [isMobile, setIsMobile] = React.useState(false); const [isMobile, setIsMobile] = React.useState(false);
const { i18n } = useTranslation();
const currentLanguage = locales[i18n.language as keyof typeof locales ]
const languages = Object.keys(resources)
console.log(Object.keys(resources));
console.log(currentLanguage);
React.useEffect(() => { React.useEffect(() => {
// check is mobile // check is mobile
if (window.innerWidth <= 768) { if (window.innerWidth <= 768) {
@ -40,6 +48,7 @@ const Header = (props: Props) => {
} else { } else {
setIsMobile(false); setIsMobile(false);
} }
console.log(window.innerWidth);
if (window.innerWidth <= 1024) { if (window.innerWidth <= 1024) {
setIsScrolled(true); setIsScrolled(true);
@ -52,7 +61,7 @@ const Header = (props: Props) => {
} }
}); });
} }
}, []); }, [window.innerWidth]);
const jumpToSection = (section: string) => { const jumpToSection = (section: string) => {
console.log("section", section); console.log("section", section);
@ -61,26 +70,37 @@ const Header = (props: Props) => {
element.scrollIntoView({ behavior: "smooth" }); element.scrollIntoView({ behavior: "smooth" });
} }
}; };
const backToHome = () => {
const element = document.getElementById("home");
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
};
const openLocalPdf = () => { const openLocalPdf = () => {
const pdf = Whitepaper; const pdf = Whitepaper;
window.open(pdf); window.open(pdf);
}; };
const changeLanguage = (lng: string)=>{
i18n.changeLanguage(lng)
}
return ( return (
<> <>
{isScrolled ? ( {isScrolled ? (
<div className="fixed w-full z-30 p-1 transition-all duration-150 bg-gray-800"> <div className="fixed w-full z-30 p-4 transition-all duration-150 bg-gray-800">
<div className="container mx-auto flex justify-between items-center"> <div className="container mx-auto flex justify-between items-center ">
<div className="flex gap-2 items-center"> <div
<div className="bg-white w-8 rounded-full overflow-hidden p-1"> className="flex gap-2 items-center cursor-pointer hover:text-orange-400"
onClick={() => backToHome()}
>
<div className="bg-white w-8 rounded-full overflow-hidden p-1 ">
<img <img
src={robotLogo} src={robotLogo}
className="w-full transition-all duration-150 rounded-full" className="w-full transition-all duration-150 rounded-full"
alt="" alt=""
/> />
</div> </div>
<h4 className="text-xl transition-all duration-150 text-white uppercase font-bold"> <h4 className="text-xl transition-all duration-150 text-white hover:text-orange-400 uppercase font-bold">
SGPT SGPT
</h4> </h4>
</div> </div>
@ -133,7 +153,7 @@ const Header = (props: Props) => {
{ {
// Mobile menu // Mobile menu
isMobile && isOpenMenu ? ( isMobile && isOpenMenu ? (
<div className="fixed top-11 right-5 p-4 bg-gray-800 z-40 rounded-xl"> <div className="fixed top-12 right-0 py-4 pl-6 pr-10 bg-gray-800 z-40 rounded-xl">
<div className="flex flex-col items-center justify-center h-full"> <div className="flex flex-col items-center justify-center h-full">
<ul className="flex flex-col gap-3"> <ul className="flex flex-col gap-3">
{menuItems.map((item) => ( {menuItems.map((item) => (
@ -182,16 +202,31 @@ const Header = (props: Props) => {
SGPT SGPT
</h4> </h4>
</div> </div>
<div className="flex text-white items-center gap-x-2 cursor-pointer group relative" >
<MdLanguage className="text-[24px]" />
<span className="group-hover:text-orange-400">{currentLanguage}</span>
<div className=" h-40 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 ">
{languages.map((lng)=>(
<>
<li className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show" onClick={()=>changeLanguage(lng)}>
{locales[lng as keyof typeof locales]}
<div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
</li>
</>
))}
</ul>
</div>
<div className="flex gap-10 items-center"> <div className="flex gap-10 items-center">
<ul className="flex gap-10"> <ul className="flex gap-10">
{menuItems.map((item) => ( {menuItems.map((item) => (
<li <li
className="inline-block" className="inline-block "
key={item.path} key={item.path}
onClick={() => jumpToSection(item.id)} onClick={() => jumpToSection(item.id)}
> >
<p className="text-white text-md transition-all duration-150 cursor-pointer"> <p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
{item.name} {item.name}
</p> </p>
</li> </li>

32
src/shared/components/animated/QnASection.css
Unescape View File

@ -1,15 +1,19 @@
/* .list-answer { .iconDropDown {
animation: modalFadeIn ease 0.5s; transform: rotate(0deg);
background-color: red; transition: transform 1.5s;
} }
@keyframes modalFadeIn { .iconDropUp {
0% { transition: transform 1.5s;
opacity: 0; transform: rotate(180deg);
transform: translateY(-150px); }
}
.listItem__QnA{
max-height: 0;
overflow: hidden;
transition: all 1.5s ease;
}
.listItem__QnA-active{
max-height: 100vh;
}
100% {
opacity: 1;
transform: translateY(0px);
}
} */

24
src/shared/components/backtotop/index.tsx
Unescape View File

@ -1,7 +1,15 @@
import { useState } from "react"; import { useState } from "react";
import robotLogo from "../../../assets/images/robot-coin1.png"; import robotLogo from "../../../assets/images/robot-coin1.png";
import { MdOutlineKeyboardDoubleArrowUp } from "react-icons/md"; import { MdOutlineKeyboardDoubleArrowUp } from "react-icons/md";
import { VscFoldUp } from "react-icons/vsc"; import {
VscArrowCircleUp,
VscArrowUp,
VscFoldUp,
VscGroupByRefType,
VscThumbsup,
VscTriangleUp,
VscVariableGroup,
} from "react-icons/vsc";
const BackToTopButton = () => { const BackToTopButton = () => {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
@ -26,17 +34,17 @@ const BackToTopButton = () => {
<div <div
className={`bg-orange-500 back-to-top ${ className={`bg-orange-500 back-to-top ${
isVisible ? "visible" : "" isVisible ? "visible" : ""
} group relative m-12 flex justify-center`} } group relative m-12 flex justify-center z-[1000]`}
onClick={scrollToTop} onClick={scrollToTop}
> >
<VscFoldUp <VscArrowCircleUp
className="absolute top-[-18px] right-[50%] translate-x-[50%] opacity-70 w-4 h-4 transition-all rounded text-center" className="absolute top-[50%] right-[50%] text-orange-500 translate-y-[-50%] translate-x-[50%] opacity-70 w-8 h-8 transition-all text-center"
width={50} width={100}
></VscFoldUp> ></VscArrowCircleUp>
<img src={robotLogo} className="rounded-full" alt="back" /> <img src={robotLogo} className="rounded-full" alt="back" />
<span className="absolute scale-0 transition-all rounded bg-orange-500 group-hover:scale-100 p-1 text-center"> {/* <span className="absolute scale-0 transition-all rounded bg-orange-500 group-hover:scale-100 p-1 text-center">
👆 👆
</span> </span> */}
</div> </div>
); );
}; };

4
src/shared/components/home/AboutSection.tsx
Unescape View File

@ -26,7 +26,7 @@ const AboutSection = (props: Props) => {
{/* <div> {/* <div>
<h1>{typedText}</h1> <h1>{typedText}</h1>
</div> */} </div> */}
<p className="text-gray-100 md:w-4/5 text-lg min-h-[255px]"> <p className="text-gray-100 w-full md:w-full lg:w-4/5 text-lg min-h-[255px] text-justify">
<TypingText> <TypingText>
SGPT Token is a complementary token created on the blockchain SGPT Token is a complementary token created on the blockchain
platform to provide a platform for small and medium-sized platform to provide a platform for small and medium-sized
@ -45,7 +45,7 @@ const AboutSection = (props: Props) => {
<h4 className="text-3xl uppercase font-bold hover:text-orange-400"> <h4 className="text-3xl uppercase font-bold hover:text-orange-400">
SGPT Solution SGPT Solution
</h4> </h4>
<p className="text-gray-100 md:w-4/5 text-lg min-h-[225px]"> <p className="text-gray-100 w-full md:w-full lg:w-4/5 text-lg min-h-[225px] text-justify">
{/* <h1>{typedText}</h1> */} {/* <h1>{typedText}</h1> */}
<TypingText> <TypingText>
The SGPT Token is a solution to the problems associated with The SGPT Token is a solution to the problems associated with

95
src/shared/components/home/FirstSection.tsx
Unescape View File

@ -1,8 +1,11 @@
import { CopyToClipboard } from "react-copy-to-clipboard";
import { useTranslation } from "react-i18next";
import robotImage from "../../../assets/images/robot-2.png"; import robotImage from "../../../assets/images/robot-2.png";
import robotImage2 from "../../../assets/images/robot-coin1.png"; import robotImage2 from "../../../assets/images/robot-coin1.png";
import robotBgr from "../../../assets/images/robot-bgr.png"; import robotBgr from "../../../assets/images/robot-bgr.png";
import VideoSGPTBg from "../../../assets/sgpt-bg.mp4"; import VideoSGPTBg from "../../../assets/sgpt-bg.mp4";
import Button from "../Button"; import Button from "../Button";
import { import {
BsFacebook, BsFacebook,
BsDiscord, BsDiscord,
@ -49,6 +52,7 @@ const socials = [
]; ];
const FirstSection = () => { const FirstSection = () => {
const {t} = useTranslation('firstSection')
const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844"; const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844";
const truncateAddress = (address: string) => { const truncateAddress = (address: string) => {
return address.slice(0, 5) + "......" + address.slice(-5); return address.slice(0, 5) + "......" + address.slice(-5);
@ -64,7 +68,7 @@ const FirstSection = () => {
}); });
return ( return (
<animated.div <animated.div
className="lg:min-h-screen px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative" className=" lg:min-h-screen sm:px-1 md:px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative"
id="home" id="home"
style={springs} style={springs}
> >
@ -82,67 +86,62 @@ const FirstSection = () => {
<source src={VideoSGPTBg} type="video/mp4" /> <source src={VideoSGPTBg} type="video/mp4" />
</video> </video>
</div> </div>
<div className="absolute top-0 left-0 w-full h-full bg-black opacity-60"></div> <div className="absolute top-0 left-0 w-full h-full bg-black opacity-60 "></div>
<div className="container flex mx-auto min-h-[70vh] text-white z-20 mt-20"> <div className="container flex mx-auto min-h-[70vh] justify-center text-white z-20 mt-20">
<div className="lg:w-4/5 flex flex-col justify-center lg:pb-0 gap-16 pb-20 z-50"> <div className="lg:w-4/5 w-[99%] sm:w-full flex flex-col justify-center lg:pb-0 gap-16 pb-20 z-50 px-1">
<div className="flex flex-col gap-10 "> <div className="flex flex-col gap-10 ">
<h4 className="lg:w-3/4 lg:text-5xl md:text-5xl text-3xl font-bold hover:text-orange-400"> <h4 className="lg:w-3/4 lg:text-5xl md:text-5xl text-3xl font-bold hover:text-orange-400">
A digital currency payment for chat bot services {t('title')}
{/* A digital currency payment for chat bot services */}
</h4> </h4>
<p className="lg:w-2/3 w-full font-body"> <p className="lg:w-2/3 w-full font-body">
The SGPT Token is a digital currency designed to facilitate {t('content')}
payments for services provided by the SGPT chat bot. The chat bot
is a powerful tool that utilizes artificial intelligence to
communicate with users and provide valuable information and
services.
</p> </p>
</div> </div>
<div className=" flex flex-col gap-y-8 ">
<div className=""> <div className=" flex items-center justify-around flex-wrap lg:w-3/4">
<div className="border border-orange-500 rounded-md flex items-center justify-between lg:w-3/4"> <div className="flex rounded items-center gap-4">
<div className="flex rounded items-center w-1/2 gap-4">
<TbAddressBook className="text-orange-500" size={22} /> <TbAddressBook className="text-orange-500" size={22} />
<h2 className="text-gray-100 text-2xl font-bold hover:text-orange-400"> <h2 className="text-gray-100 text-2xl font-bold hover:text-orange-400">
Address on BSC{" "} {t('addressBSC')}
</h2> </h2>
<TbAddressBook className="text-orange-500" size={22} /> <TbAddressBook className="text-orange-500" size={22} />
</div> </div>
<div className="text-gray-100 text-2xl flex gap-3 items-center w-1/2"> <div className="text-gray-100 text-2xl flex gap-3 items-center ">
{truncateAddress(address)} {truncateAddress(address)}
<IoCopyOutline size={24} /> <CopyToClipboard text={address}>
<button title="Copy">
<IoCopyOutline
className="hover:text-orange-500 "
size={24}
/>
</button>
</CopyToClipboard>
</div>
</div>
<div className="border sm:w-full border-orange-500 p-4 pb-6 pt-0 rounded-md lg:w-3/4">
<div className="flex justify-start rounded md:animate-slide-loop items-center gap-4 py-6">
<BsRocketFill className="text-orange-500" size={22} />
<h2 className=" sm:text-3xl font-bold hover:text-orange-400">
{t('Community')}
</h2>
<BsRocketFill className="text-orange-500" size={22} />
</div>
<div className="flex flex-wrap gap-4">
{socials.map((social) => (
<Button
bgColor={social.background}
key={social.name}
onClick={() => window.open(social.link, "_blank")}
>
<div className="flex items-center gap-2 transform motion-safe:hover:scale-110">
{social.icon}
{social.name}
</div>
</Button>
))}
</div> </div>
</div> </div>
{/* <div className="border border-orange-500">
<div className="flex rounded animate-slide-loop items-center gap-4 py-6">
<BsRocketFill
className="text-orange-500"
size={22}
/>
<h2 className="text-3xl font-bold hover:text-orange-400">
Join Our Community{' '}
</h2>
<BsRocketFill
className="text-orange-500"
size={22}
/>
</div>
<div className="flex lg:w-2/3 flex-wrap gap-4">
{socials.map((social) => (
<Button
bgColor={social.background}
key={social.name}
onClick={() =>
window.open(social.link, '_blank')
}
>
<div className="flex items-center gap-2 transform motion-safe:hover:scale-110">
{social.icon}
{social.name}
</div>
</Button>
))}
</div>
</div> */}
</div> </div>
</div> </div>
<div className="lg:w-1/5 hidden lg:flex justify-center items-center relative"> <div className="lg:w-1/5 hidden lg:flex justify-center items-center relative">

117
src/shared/components/home/QnASection.tsx
Unescape View File

@ -13,27 +13,32 @@ const QnASection = (props: Props) => {
const listQnA = [ const listQnA = [
{ {
id: 1, id: 1,
title: "Abc", title:
"What is Fight Out?",
bgcolor: "bg-[#CC99FF]", bgcolor: "bg-[#CC99FF]",
contents: [ contents: [
{ {
id: 1, id: 1,
content: "12sdfsd3", content:
"Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
bgcolor: "bg-[#9999FF]", bgcolor: "bg-[#9999FF]",
}, },
{ {
id: 2, id: 2,
content: "123ádsa", content:
"Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
bgcolor: "bg-[#6699FF]", bgcolor: "bg-[#6699FF]",
}, },
{ {
id: 3, id: 3,
content: "123ádas", content:
"Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
bgcolor: "bg-[#3399FF]", bgcolor: "bg-[#3399FF]",
}, },
{ {
id: 4, id: 4,
content: "123ádasd", content:
"Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
bgcolor: "bg-[#0099FF]", bgcolor: "bg-[#0099FF]",
}, },
], ],
@ -43,6 +48,62 @@ const QnASection = (props: Props) => {
title: "Abcd", title: "Abcd",
bgcolor: "bg-[#CC66FF]", bgcolor: "bg-[#CC66FF]",
contents: [
{
id: 1,
bgcolor: "bg-[#9966FF]",
content: "ádasffjk12",
},
{
id: 2,
bgcolor: "bg-[#6666FF]",
content: "ádasffj1k",
},
{
id: 3,
bgcolor: "bg-[#3366FF]",
content: "ádasffj12k",
},
{
id: 4,
bgcolor: "bg-[#0066FF]",
content: "ádasffj123k",
},
],
},
{
id: 3,
title: "Abcd",
bgcolor: "bg-[#CC66FF]",
contents: [
{
id: 1,
bgcolor: "bg-[#9966FF]",
content: "ádasffjk12",
},
{
id: 2,
bgcolor: "bg-[#6666FF]",
content: "ádasffj1k",
},
{
id: 3,
bgcolor: "bg-[#3366FF]",
content: "ádasffj12k",
},
{
id: 4,
bgcolor: "bg-[#0066FF]",
content: "ádasffj123k",
},
],
},
{
id: 4,
title: "Abcd",
bgcolor: "bg-[#CC66FF]",
contents: [ contents: [
{ {
id: 1, id: 1,
@ -67,13 +128,16 @@ const QnASection = (props: Props) => {
], ],
}, },
]; ];
const showListItem = (id: string) => { const showListItem = (id: string, iconDropDown: string) => {
const element = document.getElementById(`${id}`); const iconDropDownid = document.getElementById(`${iconDropDown}`);
// const ulhidden = document.querySelector(`#${id} ul`); // const ulhidden = document.querySelector(`#${id} ul`);
const ulhidden = document.querySelector(`#${id}>ul`); const ulhidden = document.querySelector(`#${id}>ul`);
console.log(ulhidden); console.log(ulhidden);
ulhidden?.classList.toggle("hidden"); ulhidden?.classList.toggle("listItem__QnA-active");
ulhidden?.classList.toggle("flex"); // ulhidden?.classList.toggle("showListQnA");
// ulhidden?.classList.toggle("hiddenListQnA");
iconDropDownid?.classList.toggle("iconDropUp");
iconDropDownid?.classList.toggle("iconDropDown");
}; };
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
@ -83,7 +147,7 @@ const QnASection = (props: Props) => {
([entry]) => { ([entry]) => {
setIsVisible(entry.isIntersecting); setIsVisible(entry.isIntersecting);
}, },
{ threshold: 0.5 } { threshold: 0.2 }
); );
if (!section) { if (!section) {
@ -108,7 +172,6 @@ const QnASection = (props: Props) => {
to: { to: {
opacity: isVisible ? 1 : 0, opacity: isVisible ? 1 : 0,
}, },
config: { config: {
duration: 1000, duration: 1000,
}, },
@ -116,10 +179,10 @@ const QnASection = (props: Props) => {
return ( return (
<div <div
className="container min-h-[400px] mb-[100px] flex flex-wrap lg:justify-between justify-center items-start mx-auto py-2 text-white " className="container animate-[5s_ease] min-h-[400px] mb-[100px] lg:justify-center lg:flex mx-auto py-2 text-white "
id="qna" id="qna"
> >
<div className="w-full lg:w-[50%]"> <div className="w-full lg:w-[50%] min-h-[100px]">
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> <h1 className="text-4xl font-bold text-center hover:text-orange-400">
FAQS FAQS
</h1> </h1>
@ -131,44 +194,50 @@ const QnASection = (props: Props) => {
</div> </div>
<animated.div <animated.div
className="w-1/2 flex justify-end overflow-hidden" className="w-full lg:w-[50%] mx-auto overflow-hidden"
style={{ style={{
...styles, ...styles,
}} }}
> >
<ul className="flex flex-col items-center gap-4 lg:w-3/4 w-full "> <ul className="flex flex-col items-center gap-4 lg:w-full w-full">
{listQnA.map((item, index) => { {listQnA.map((item, index) => {
return ( return (
<li <li
id={item.title} id={"title" + item.id}
key={item.id} key={item.id}
className="w-full items-center flex flex-col pl-3 pr-3 " className="w-full md:w-3/4 lg:w-full items-center flex flex-col pl-3 pr-3 h-full cursor-pointer"
onClick={() =>
showListItem("title" + item.id, index + item.title)
}
> >
<div className="w-full h-[52px] flex justify-between items-center bg-slate-200 pl-3 pr-3 z-10 relative "> <div className="w-full min-h-[52px] flex justify-between items-center bg-slate-200 p-3 z-10 relative ">
<div <div
className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`} className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`}
></div> ></div>
<span className="text-xl font-bold text-gray-700"> <span className="text-2xl pl-2 font-bold text-gray-700">
{item.title} {item.title}
</span> </span>
<div <div
className="listQnA h-6 w-6 flex cursor-pointer " className="listQnA h-6 w-6 flex cursor-pointer "
onClick={() => showListItem(item.title)}
> >
<VscChevronDown className="hover:text-2xl m-auto text-gray-700" /> <VscChevronDown
id={index + item.title}
className="iconDropDown iconActive hover:text-2xl m-auto text-gray-700"
/>
</div> </div>
</div> </div>
<ul className="hidden ul-hidden flex-col gap-y-0.5 pt-1 pl-0.5 w-full list-answer animate-[listShowdown_0.75s_ease] animate-[listHidden_0.75s_ease]"> <ul className="listItem__QnA flex-col w-full list-answer ">
{item.contents.map((list, index) => { {item.contents.map((list, index) => {
return ( return (
<li <li
key={list.id} key={list.id}
className=" w-full h-10 flex items-center border-t-2 border-gray-400 pl-3 pr-3 bg-slate-200 relative" className=" w-full min-h-10 flex items-center p-3 bg-slate-200 relative"
> >
<div <div
className={`absolute h-full left-0 top-0 w-2 ${list.bgcolor}`} className={`absolute h-full left-0 top-0 w-2 ${list.bgcolor}`}
></div> ></div>
<span className="text-lg font-bold text-gray-700"> <span className="text-lg pl-2 font-bold text-gray-700">
{list.content} {list.content}
</span> </span>
</li> </li>

55
src/shared/components/home/RoadMap.tsx
Unescape View File

@ -37,18 +37,40 @@ const roadMapData = [
"CEOAI Bot Creator and integration with AI.", "CEOAI Bot Creator and integration with AI.",
], ],
}, },
{
phase: "Phase 4",
listTitle: [
"Swap Development and Launch",
"Merchandise Launch",
"Tier 1 CEX Listings",
"CEO Bridge to ETH, Arbitrium and Polygon",
"10 Million MarketCap Milestone",
"CEOAI Bot Creator and integration with AI.",
],
},
{
phase: "Phase 5",
listTitle: [
"Swap Development and Launch",
"Merchandise Launch",
"Tier 1 CEX Listings",
"CEO Bridge to ETH, Arbitrium and Polygon",
"10 Million MarketCap Milestone",
"CEOAI Bot Creator and integration with AI.",
],
},
]; ];
const RoadMap = (props: Props) => { const RoadMap = (props: Props) => {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
useEffect(() => { useEffect(() => {
const section = document.querySelector(".animate-on-scroll"); const section = document.getElementById("roadmap");
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
setIsVisible(entry.isIntersecting); setIsVisible(entry.isIntersecting);
}, },
{ threshold: 0.5 } { threshold: 0.1 }
); );
if (!section) { if (!section) {
@ -67,7 +89,14 @@ const RoadMap = (props: Props) => {
const styles = useSpring({ const styles = useSpring({
opacity: isVisible ? 1 : 0, opacity: isVisible ? 1 : 0,
transform: isVisible ? "translateX(0)" : "translateX(100px)", transform: isVisible ? "scaleX(1)" : "scaleX(0)",
config: {
duration: 500,
},
});
const styles1 = useSpring({
opacity: isVisible ? 1 : 0,
transform: isVisible ? "scaleY(1)" : "scaleY(0)",
config: { config: {
duration: 500, duration: 500,
}, },
@ -78,21 +107,27 @@ const RoadMap = (props: Props) => {
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20 relative" className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20 relative"
id="roadmap" id="roadmap"
> >
<div className="absolute top-[150px] left-[50%] w-2 h-[80%] bg-gradient-to-b from-violet-500 to-fuchsia-500"></div> <animated.div
style={{ ...styles1 }}
className="absolute top-[200px] rounded-lg left-[50%] translate-x-[50%] w-2 h-[80%] lg:h-[89%] bg-gradient-to-b from-violet-500 to-fuchsia-500"
></animated.div>
<h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20"> <h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20">
Road Map Road Map
</h1> </h1>
{/* <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> */} {/* <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> */}
<animated.div style={styles}> <animated.div style={{ ...styles }} className="px-3 ">
{roadMapData.map((item, index) => { {roadMapData.map((item, index) => {
return ( return (
<div <div
key={index} key={index}
className="relative roadmapphase w-1/2 bg-white text-black rounded-lg [&:nth-child(odd)>div]:right-[-25%] [&:nth-child(odd)]:float-left [&:nth-child(odd)]:clear-right [&:nth-child(odd)]:translate-x-[-30px] [&:nth-child(even)]:float-right [&:nth-child(even)]:clear-left [&:nth-child(even)]:translate-x-12" className="relative w-full sm:w-3/4 md:w-4/5 sm:mx-auto [&:first-child]:top-[-30px] [&:first-child]:mb-[30px] mb-[60px]
lg:m-0 lg:w-[40%] lg:[&:first-child]:top-[0px] lg:[&:nth-child(even)>div]:left-0 lg:[&:nth-child(even)>div]:bg-gradient-to-t
lg:[&:nth-child(odd)]:float-left lg:[&:nth-child(odd)]:clear-right lg:[&:nth-child(odd)]:left-20
lg:[&:nth-child(even)]:float-right lg:[&:nth-child(even)]:clear-left lg:[&:nth-child(even)]:right-[4.5rem]
roadmapphase bg-white text-black rounded-lg"
> >
<div className="absolute h-[30px] w-[30px] rounded-[50%] bg-gradient-to-b from-violet-500 to-fuchsia-500"></div> <div className="hidden lg:block absolute lg:right-0 h-[100%] w-[8px] bg-gradient-to-b to-violet-500 from-fuchsia-500"></div>
<h4 className="timeline-title p-4 lg:pl-8 text-[28px] text-[#6a06ec] font-medium">
<h4 className="timeline-title p-2 text-[28px] text-[#6a06ec] font-medium">
{item.phase} {item.phase}
</h4> </h4>
<ol className="flex flex-col gap-2"> <ol className="flex flex-col gap-2">
@ -100,7 +135,7 @@ const RoadMap = (props: Props) => {
return ( return (
<li <li
key={index} key={index}
className="flex items-center gap-3 p-2 text-lg" className="flex items-center gap-3 p-4 lg:pl-8 text-lg"
> >
<VscDebugBreakpointLog <VscDebugBreakpointLog
style={{ style={{

150
src/shared/components/home/TokenomicsSection.tsx
Unescape View File

@ -1,12 +1,24 @@
import { useSpring, animated } from "@react-spring/web"; import { useSpring, animated } from "@react-spring/web";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
import { Pie } from "react-chartjs-2"; import { Pie } from "react-chartjs-2";
import "chart.js/auto"; import "chart.js/auto";
type Props = {}; import {
Chart as ChartJS,
ArcElement,
Tooltip,
Legend,
ChartData,
} from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { Context } from "chartjs-plugin-datalabels";
import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
import "animate.css";
type Props = {};
ChartJS.register(ArcElement, Tooltip, Legend);
const tokenomics = [ const tokenomics = [
{ {
name: "Liquidity",
title: "Liquidity - 5% 1,000,000 SGPT", title: "Liquidity - 5% 1,000,000 SGPT",
precent: "5", precent: "5",
description: " ", description: " ",
@ -14,6 +26,7 @@ const tokenomics = [
bgcolor: "bg-[#86eae9]", bgcolor: "bg-[#86eae9]",
}, },
{ {
name: "Private Sale",
title: "Private Sale - 17% 3,400,000 SGPT", title: "Private Sale - 17% 3,400,000 SGPT",
description: " ", description: " ",
precent: "17", precent: "17",
@ -21,6 +34,7 @@ const tokenomics = [
bgcolor: "bg-[#5dbdd3]", bgcolor: "bg-[#5dbdd3]",
}, },
{ {
name: "Stacking & Farming",
title: "Stacking & Farming - 15% 3,000,000 SGPT", title: "Stacking & Farming - 15% 3,000,000 SGPT",
description: " ", description: " ",
precent: "15", precent: "15",
@ -28,6 +42,7 @@ const tokenomics = [
bgcolor: "bg-[#4591b8]", bgcolor: "bg-[#4591b8]",
}, },
{ {
name: "Marketing & Promotion",
title: "Marketing & Promotion - 15% 3,000,000 SGPT", title: "Marketing & Promotion - 15% 3,000,000 SGPT",
description: " ", description: " ",
precent: "15", precent: "15",
@ -35,6 +50,7 @@ const tokenomics = [
bgcolor: "bg-[#3b6696]", bgcolor: "bg-[#3b6696]",
}, },
{ {
name: "Public Sale",
title: "Public Sale - 14% 2,800,000 SGPT", title: "Public Sale - 14% 2,800,000 SGPT",
description: " ", description: " ",
precent: "14", precent: "14",
@ -42,6 +58,7 @@ const tokenomics = [
bgcolor: "bg-[#353c6e]", bgcolor: "bg-[#353c6e]",
}, },
{ {
name: "Reward & Q&A",
title: "Reward & Q&A - 10% 2,000,000 SGPT", title: "Reward & Q&A - 10% 2,000,000 SGPT",
description: " ", description: " ",
precent: "10", precent: "10",
@ -49,6 +66,7 @@ const tokenomics = [
bgcolor: "bg-[#705788]", bgcolor: "bg-[#705788]",
}, },
{ {
name: "Advisor",
title: "Advisor - 10% 2,000,000 SGPT", title: "Advisor - 10% 2,000,000 SGPT",
description: " ", description: " ",
precent: "10", precent: "10",
@ -56,6 +74,7 @@ const tokenomics = [
bgcolor: "bg-[#a5769e]", bgcolor: "bg-[#a5769e]",
}, },
{ {
name: "Treasury",
title: "Treasury - 14% 2,800,000 SGPT", title: "Treasury - 14% 2,800,000 SGPT",
description: " ", description: " ",
precent: "14", precent: "14",
@ -63,7 +82,6 @@ const tokenomics = [
bgcolor: "bg-[#d59ab3]", bgcolor: "bg-[#d59ab3]",
}, },
]; ];
const TokenomicsSection = (props: Props) => { const TokenomicsSection = (props: Props) => {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
@ -73,7 +91,7 @@ const TokenomicsSection = (props: Props) => {
([entry]) => { ([entry]) => {
setIsVisible(entry.isIntersecting); setIsVisible(entry.isIntersecting);
}, },
{ threshold: 0.5 } { threshold: 0.4 }
); );
if (!section) { if (!section) {
@ -92,83 +110,131 @@ const TokenomicsSection = (props: Props) => {
const styles = useSpring({ const styles = useSpring({
opacity: isVisible ? 1 : 0, opacity: isVisible ? 1 : 0,
transform: isVisible ? "translateY(0)" : "translateY(100px)", transform: isVisible ? "scaleX(1)" : "scaleX(0.5)",
config: { config: {
duration: 500, duration: 300,
}, },
}); });
const textCenter = {
const plugins = {
id: "textCenter", id: "textCenter",
beforeDatasetsDraw(chart: any, arg: any, pluginsOptions: any) { datalabels: {},
const { ctx, data } = chart; // beforeDatasetsDraw(chart: any, arg: any, pluginsOptions: any) {
ctx.save(); // const { ctx, data } = chart;
ctx.fillStyle = "#fff"; // ctx.save();
ctx.font = "bolder 30px sen"; // ctx.fillStyle = "#fff";
ctx.textAlign = "center"; // ctx.font = "bolder 30px sen";
ctx.textBaseline = "middle"; // ctx.textAlign = "center";
ctx.fillText( // ctx.textBaseline = "middle";
`TOTAL SUPPLE`, // ctx.fillText(
chart.getDatasetMeta(0).data[0].x, // `TOTAL SUPPLE`,
chart.getDatasetMeta(0).data[0].y - 20 // chart.getDatasetMeta(0).data[0].x,
); // chart.getDatasetMeta(0).data[0].y - 20
ctx.fillText( // );
`20,000,000 SGPT`, // ctx.fillText(
chart.getDatasetMeta(0).data[0].x, // `20,000,000 SGPT`,
chart.getDatasetMeta(0).data[0].y + 25 // chart.getDatasetMeta(0).data[0].x,
); // chart.getDatasetMeta(0).data[0].y + 25
}, // );
// },
}; };
const [userData, setUserData] = useState({ const [userData, setUserData] = useState({
labels: tokenomics.map((data) => data.title), labels: tokenomics.map((data) => data.name),
datasets: [ datasets: [
{ {
// label: "text", label: "text",
data: tokenomics.map((data) => data.precent), data: tokenomics.map((data) => data.precent),
backgroundColor: tokenomics.map((data) => data.color), backgroundColor: tokenomics.map((data) => data.color),
// cutout: "10%", // cutout: "40%",
borderWidth: 2, borderWidth: 1,
delay: 100, datalabels: {
font: {
weight: "bold",
},
anchor: "center", //start, center, end
rotation: function (ctx: any) {
const valuesBefore = ctx.dataset.data
.slice(0, ctx.dataIndex)
.reduce(
(a: number, b: number) => Number(a) + Number(b),
1 as number
);
const sum = ctx.dataset.data.reduce(
(a: number, b: number) => Number(a) + Number(b),
1 as number
);
const rotation =
((valuesBefore + ctx.dataset.data[ctx.dataIndex] / 2) / sum) *
360;
return rotation < 180 ? rotation - 95 : rotation + 90;
},
// formatter: function (value: any, context: any) {
// return context.chart.data.labels[context.dataIndex];
// },
// anchor: "end",
align: "center",
offset: -30,
},
}, },
], ],
}); });
const labelText = { const options = {
layout: {},
hoverBorderWidth: 4, hoverBorderWidth: 4,
plugins: { plugins: {
legend: { legend: {
display: false, display: false,
}, },
datalabels: {
font: {
size: window.innerWidth > 1024 ? 20 : window.innerWidth > 768 ? 16 : 10,
},
color: "#fff",
formatter: (context: any, agrs: any) => {
const index = agrs.dataIndex;
return agrs.chart.data.labels[index];
},
},
tooltip: { tooltip: {
callbacks: { callbacks: {
label: (context: any) => { label: (context: any) => {
return ` ${context.label}`; return ` ${tokenomics[context.dataIndex].title}`;
}, },
}, },
}, },
}, },
}; };
ChartJS.register(ChartDataLabels);
return ( return (
<div className="w-full pb-24" id="tokenomics"> <div className="w-full pb-24" id="tokenomics">
<div className="container mx-auto"> <div className="container mx-auto">
<h1 className="text-4xl text-white font-bold text-center mb-20"> <h1 className="text-4xl text-white font-bold text-center mb-20 hover:text-orange-400">
Tokenomics Tokenomics
</h1> </h1>
<div className="w-full flex justify-center items-center lg:justify-between flex-col gap-y-12 gap-x-4 lg:flex-row"> <div className="w-full flex justify-center items-center lg:justify-between lg:flex-row">
<div className="w-full lg:w-1/2 flex justify-center"> <div className="w-full flex justify-center">
<animated.div style={{ width: "500px", ...styles }}> <animated.div
<Pie data={userData} plugins={[textCenter]} options={labelText} /> style={{ ...styles }}
className="w-[300px] sm:w-[350px] md:w-[500px] lg:w-[700px]"
>
<Pie
data={userData as any}
plugins={[plugins]}
options={options}
/>
</animated.div> </animated.div>
</div> </div>
<div className="w-full justify-center"> {/* <div className="w-full justify-center">
<ul className="flex flex-col items-end justify-center h-full gap-3 px-3 max-sm:pt-10 cursor-pointer"> <ul className="flex flex-col items-end justify-center h-full gap-3 px-3 max-sm:pt-10 cursor-pointer">
{tokenomics.map((item, index) => { {tokenomics.map((item, index) => {
return ( return (
<animated.li <animated.li
key={index} key={index}
className={`text-center w-full lg:w-3/4 bg-slate-200 py-3 relative`} className={`text-center w-full lg:w-3/4 bg-slate-200 py-3 relative animate__backInDown`}
style={styles} style={{ ...styles1 }}
> >
<div <div
className={`absolute h-full top-0 w-2 ${item.bgcolor}`} className={`absolute h-full top-0 w-2 ${item.bgcolor}`}
@ -181,7 +247,7 @@ const TokenomicsSection = (props: Props) => {
); );
})} })}
</ul> </ul>
</div> </div> */}
</div> </div>
</div> </div>
</div> </div>

567
src/shared/components/home/text
Unescape View File

@ -1,26 +1,541 @@
<div> // <!-- <div>
<div className="timeline"> // <div className="timeline">
<div className="timeline-container primary"> // <div className="timeline-container primary">
<div className="timeline-icon"> // <div className="timeline-icon">
{index + 1} // {index + 1}
{/* <i className="far fa-grin-wink"></i> */} // {/* <i className="far fa-grin-wink"></i> */}
</div> // </div>
<div className="timeline-body"> // <div className="timeline-body">
<h4 className="timeline-title">{item.phase}</h4> // <h4 className="timeline-title">{item.phase}</h4>
<ol className="flex flex-col gap-2"> // <ol className="flex flex-col gap-2">
{item.listTitle.map((listItem, index) => { // {item.listTitle.map((listItem, index) => {
return ( // return (
<li // <li
key={index} // key={index}
className="flex items-center gap-3 text-lg" // className="flex items-center gap-3 text-lg"
> // >
<VscDebugBreakpointLog /> // <VscDebugBreakpointLog />
<p className="font-medium font-body">{listItem}</p> // <p className="font-medium font-body">{listItem}</p>
</li> // </li>
); // );
})} // })}
</ol> // </ol>
</div> // </div>
</div> // </div>
</div> // </div>
</div> // </div>
// -->
// <!-- roadmap -->
// <!-- [&:nth-child(odd)>div]:right-[-25%] md:[&:nth-child(odd)]:float-left md:[&:nth-child(odd)]:clear-right md:[&:nth-child(odd)]:translate-x-[-30px] md:[&:nth-child(even)]:float-right md:[&:nth-child(even)]:clear-left md:[&:nth-child(even)]:translate-x-1 -->
// <!-- token -->
// import { useSpring, animated } from "@react-spring/web";
// import { useEffect, useState } from "react";
// import { Pie } from "react-chartjs-2";
// import "chart.js/auto";
// import {
// Chart as ChartJS,
// ArcElement,
// Tooltip,
// Legend,
// ChartData,
// } from "chart.js";
// import ChartDataLabels from "chartjs-plugin-datalabels";
// import { Context } from "chartjs-plugin-datalabels";
// import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
// import "animate.css";
// type Props = {};
// ChartJS.register(ArcElement, Tooltip, Legend);
// const tokenomics = [
// {
// name: "Liquidity",
// title: "Liquidity - 5% 1,000,000 SGPT",
// precent: "5",
// description: " ",
// color: "#86eae9",
// bgcolor: "bg-[#86eae9]",
// },
// {
// name: "Private Sale",
// title: "Private Sale - 17% 3,400,000 SGPT",
// description: " ",
// precent: "17",
// color: "#5dbdd3",
// bgcolor: "bg-[#5dbdd3]",
// },
// {
// name: "Stacking & Farming",
// title: "Stacking & Farming - 15% 3,000,000 SGPT",
// description: " ",
// precent: "15",
// color: "#4591b8",
// bgcolor: "bg-[#4591b8]",
// },
// {
// name: "Marketing & Promotion",
// title: "Marketing & Promotion - 15% 3,000,000 SGPT",
// description: " ",
// precent: "15",
// color: "#3b6696",
// bgcolor: "bg-[#3b6696]",
// },
// {
// name: "Public Sale",
// title: "Public Sale - 14% 2,800,000 SGPT",
// description: " ",
// precent: "14",
// color: "#353c6e",
// bgcolor: "bg-[#353c6e]",
// },
// {
// name: "Reward & Q&A",
// title: "Reward & Q&A - 10% 2,000,000 SGPT",
// description: " ",
// precent: "10",
// color: "#705788",
// bgcolor: "bg-[#705788]",
// },
// {
// name: "Advisor",
// title: "Advisor - 10% 2,000,000 SGPT",
// description: " ",
// precent: "10",
// color: "#a5769e",
// bgcolor: "bg-[#a5769e]",
// },
// {
// name: "Treasury",
// title: "Treasury - 14% 2,800,000 SGPT",
// description: " ",
// precent: "14",
// color: "#d59ab3",
// bgcolor: "bg-[#d59ab3]",
// },
// ];
// const TokenomicsSection = (props: Props) => {
// const [isVisible, setIsVisible] = useState(false);
// useEffect(() => {
// const section = document.getElementById("tokenomics");
// const observer = new IntersectionObserver(
// ([entry]) => {
// setIsVisible(entry.isIntersecting);
// },
// { threshold: 0 }
// );
// if (!section) {
// return;
// }
// observer.observe(section);
// return () => {
// observer.unobserve(section);
// };
// }, []);
// useEffect(() => {
// console.log("isVisible", isVisible);
// }, [isVisible]);
// const styles = useSpring({
// opacity: isVisible ? 1 : 0,
// transform: isVisible ? "scaleX(1)" : "scaleX(0.5)",
// config: {
// duration: 300,
// },
// });
// const styles1 = useSpring({
// opacity: isVisible ? 1 : 0,
// transform: isVisible ? "scaleX(1)" : "scaleX(0.3)",
// config: {
// duration: 500,
// },
// });
// const plugins = {
// id: "textCenter",
// // beforeDatasetsDraw(chart: any, arg: any, pluginsOptions: any) {
// // const { ctx, data } = chart;
// // ctx.save();
// // ctx.fillStyle = "#fff";
// // ctx.font = "bolder 30px sen";
// // ctx.textAlign = "center";
// // ctx.textBaseline = "middle";
// // ctx.fillText(
// // `TOTAL SUPPLE`,
// // chart.getDatasetMeta(0).data[0].x,
// // chart.getDatasetMeta(0).data[0].y - 20
// // );
// // ctx.fillText(
// // `20,000,000 SGPT`,
// // chart.getDatasetMeta(0).data[0].x,
// // chart.getDatasetMeta(0).data[0].y + 25
// // );
// // },
// };
// const [userData, setUserData] = useState({
// labels: tokenomics.map((data) => data.name),
// datasets: [
// {
// label: "text",
// data: tokenomics.map((data) => data.precent),
// backgroundColor: tokenomics.map((data) => data.color),
// // cutout: "40%",
// borderWidth: 1,
// datalabels: {
// font: {
// weight: "bold",
// },
// anchor: "end",
// align: "start",
// offset: -30,
// },
// },
// ],
// });
// const options = {
// layout: {
// padding: {
// top: 50,
// bottom: 50,
// right: 50,
// left: 50,
// },
// },
// hoverBorderWidth: 4,
// plugins: {
// legend: {
// display: false,
// },
// datalabels: {
// font: {
// size: 22,
// },
// color: "#fff",
// formatter: (context: any, agrs: any) => {
// const index = agrs.dataIndex;
// console.log(agrs);
// return agrs.chart.data.labels[index];
// },
// },
// tooltip: {
// callbacks: {
// label: (context: any) => {
// const num = ((20000000 * context.parsed) / 100).toLocaleString(
// "en-us"
// );
// return ` ${context.label} ${context.parsed}% - ${num} SGPT`;
// },
// },
// },
// },
// };
// ChartJS.register(ChartDataLabels);
// return (
// <div className="w-full pb-24" id="tokenomics">
// <div className="container mx-auto">
// <h1 className="text-4xl text-white font-bold text-center mb-20">
// Tokenomics
// </h1>
// <div className="w-full flex justify-center items-center lg:justify-between flex-col gap-y-12 gap-x-4 lg:flex-row">
// <div className="w-full flex justify-center">
// <animated.div
// style={{ ...styles }}
// className="w-[400px] md:w-[500px] lg:w-[700px]"
// >
// <Pie
// data={userData as any}
// plugins={[plugins]}
// options={options}
// />
// </animated.div>
// </div>
// {/* <div className="w-full justify-center">
// <ul className="flex flex-col items-end justify-center h-full gap-3 px-3 max-sm:pt-10 cursor-pointer">
// {tokenomics.map((item, index) => {
// return (
// <animated.li
// key={index}
// className={`text-center w-full lg:w-3/4 bg-slate-200 py-3 relative animate__backInDown`}
// style={{ ...styles1 }}
// >
// <div
// className={`absolute h-full top-0 w-2 ${item.bgcolor}`}
// ></div>
// <h4 className="text-xl font-bold text-gray-700">
// {item.title}
// </h4>
// <p className="text-gray-500">{item.description}</p>
// </animated.li>
// );
// })}
// </ul>
// </div> */}
// </div>
// </div>
// </div>
// );
// };
// export default TokenomicsSection; -->
// // Qna
// // import { useSpring, animated } from "@react-spring/web";
// // import React, { useEffect, useRef, useState } from "react";
// // import {
// // VscArrowDown,
// // VscChevronDown,
// // VscDebugBreakpointLog,
// // VscDiffAdded,
// // } from "react-icons/vsc";
// // import "../animated/QnASection.css";
// // type Props = {};
// // const QnASection = (props: Props) => {
// // const listQnA = [
// // {
// // id: 1,
// // title:
// // "What is Fight Out dfgbdjka dfgh dfsgdfsh dfhsdf dfhjfsgjrt eryery dfhdfh jytjrty dfhdfh sdgsdg?",
// // bgcolor: "bg-[#CC99FF]",
// // contents: [
// // {
// // id: 1,
// // content:
// // "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
// // bgcolor: "bg-[#9999FF]",
// // },
// // {
// // id: 2,
// // content:
// // "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
// // bgcolor: "bg-[#6699FF]",
// // },
// // {
// // id: 3,
// // content:
// // "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
// // bgcolor: "bg-[#3399FF]",
// // },
// // {
// // id: 4,
// // content:
// // "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
// // bgcolor: "bg-[#0099FF]",
// // },
// // ],
// // },
// // {
// // id: 2,
// // title: "Abcd",
// // bgcolor: "bg-[#CC66FF]",
// // contents: [
// // {
// // id: 1,
// // bgcolor: "bg-[#9966FF]",
// // content: "ádasffjk12",
// // },
// // {
// // id: 2,
// // bgcolor: "bg-[#6666FF]",
// // content: "ádasffj1k",
// // },
// // {
// // id: 3,
// // bgcolor: "bg-[#3366FF]",
// // content: "ádasffj12k",
// // },
// // {
// // id: 4,
// // bgcolor: "bg-[#0066FF]",
// // content: "ádasffj123k",
// // },
// // ],
// // },
// // {
// // id: 3,
// // title: "Abcd",
// // bgcolor: "bg-[#CC66FF]",
// // contents: [
// // {
// // id: 1,
// // bgcolor: "bg-[#9966FF]",
// // content: "ádasffjk12",
// // },
// // {
// // id: 2,
// // bgcolor: "bg-[#6666FF]",
// // content: "ádasffj1k",
// // },
// // {
// // id: 3,
// // bgcolor: "bg-[#3366FF]",
// // content: "ádasffj12k",
// // },
// // {
// // id: 4,
// // bgcolor: "bg-[#0066FF]",
// // content: "ádasffj123k",
// // },
// // ],
// // },
// // {
// // id: 4,
// // title: "Abcd",
// // bgcolor: "bg-[#CC66FF]",
// // contents: [
// // {
// // id: 1,
// // bgcolor: "bg-[#9966FF]",
// // content: "ádasffjk12",
// // },
// // {
// // id: 2,
// // bgcolor: "bg-[#6666FF]",
// // content: "ádasffj1k",
// // },
// // {
// // id: 3,
// // bgcolor: "bg-[#3366FF]",
// // content: "ádasffj12k",
// // },
// // {
// // id: 4,
// // bgcolor: "bg-[#0066FF]",
// // content: "ádasffj123k",
// // },
// // ],
// // },
// // ];
// // const showListItem = (id: string, iconDropDown: string) => {
// // const iconDropDownid = document.getElementById(`${iconDropDown}`);
// // // const ulhidden = document.querySelector(`#${id} ul`);
// // const ulhidden = document.querySelector(`#${id}>ul`);
// // console.log(ulhidden);
// // ulhidden?.classList.toggle("block");
// // ulhidden?.classList.toggle("showListQnA");
// // ulhidden?.classList.toggle("hiddenListQnA");
// // iconDropDownid?.classList.toggle("iconDropUp");
// // iconDropDownid?.classList.toggle("iconDropDown");
// // };
// // const [isVisible, setIsVisible] = useState(false);
// // useEffect(() => {
// // const section = document.querySelector("#qna");
// // const observer = new IntersectionObserver(
// // ([entry]) => {
// // setIsVisible(entry.isIntersecting);
// // },
// // { threshold: 0.2 }
// // );
// // if (!section) {
// // return;
// // }
// // observer.observe(section);
// // return () => {
// // observer.unobserve(section);
// // };
// // }, []);
// // useEffect(() => {
// // console.log("isVisible", isVisible);
// // }, [isVisible]);
// // const styles = useSpring({
// // opacity: isVisible ? 1 : 0,
// // from: {
// // opacity: 0,
// // },
// // to: {
// // opacity: isVisible ? 1 : 0,
// // },
// // config: {
// // duration: 1000,
// // },
// // });
// // return (
// // <div
// // className="container animate-[5s_ease] min-h-[400px] mb-[100px] lg:justify-center lg:flex mx-auto py-2 text-white "
// // id="qna"
// // >
// // <div className="w-full lg:w-[50%] min-h-[100px]">
// // <h1 className="text-4xl font-bold text-center hover:text-orange-400">
// // FAQS
// // </h1>
// // <h2 className="text-center ">
// // See some of the most frequently asked questions about Fight
// // {/* Out here. Got a question that’s not on the list? Let us know
// // below! */}
// // </h2>
// // </div>
// // <animated.div
// // className="w-full lg:w-[50%] mx-auto overflow-hidden"
// // style={{
// // ...styles,
// // }}
// // >
// // <ul className="flex flex-col items-center gap-4 lg:w-full w-full">
// // {listQnA.map((item, index) => {
// // return (
// // <li
// // id={"title" + item.id}
// // key={item.id}
// // className="w-full md:w-3/4 lg:w-full items-center flex flex-col pl-3 pr-3 h-full"
// // >
// // <div className="w-full min-h-[52px] flex justify-between items-center bg-slate-200 p-3 z-10 relative ">
// // <div
// // className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`}
// // ></div>
// // <span className="text-2xl pl-2 font-bold text-gray-700">
// // {item.title}
// // </span>
// // <div
// // className="listQnA h-6 w-6 flex cursor-pointer "
// // onClick={() =>
// // showListItem("title" + item.id, index + item.title)
// // }
// // >
// // <VscChevronDown
// // id={index + item.title}
// // className="iconDropDown iconActive hover:text-2xl m-auto text-gray-700"
// // />
// // </div>
// // </div>
// // <ul className="flex-col w-full list-answer hiddenListQnA">
// // {item.contents.map((list, index) => {
// // return (
// // <li
// // key={list.id}
// // className=" w-full min-h-10 flex items-center p-3 bg-slate-200 relative"
// // >
// // <div
// // className={`absolute h-full left-0 top-0 w-2 ${list.bgcolor}`}
// // ></div>
// // <span className="text-lg pl-2 font-bold text-gray-700">
// // {list.content}
// // </span>
// // </li>
// // );
// // })}
// // </ul>
// // </li>
// // );
// // })}
// // </ul>
// // </animated.div>
// // </div>
// // );
// // };
// // export default QnASection;

9
tailwind.config.cjs
Unescape View File

@ -5,13 +5,8 @@ module.exports = {
extend: { extend: {
keyframes: { keyframes: {
listShowdown: { listShowdown: {
"0%": { opacity: 0, transform: "translateY(-150px)" }, "0%": { height: "0px", opacity: 0, transform: "translateY(-150px)" },
"50%": { opacity: 0, transform: "translateY(-75px)" }, "100%": { height: "164px", opacity: 1, transform: "translateY(0px)" },
"100%": { opacity: 1, transform: "translateY(0px)" },
},
listHidden: {
"100%": { opacity: 0, transform: "translateY(-150px)" },
"0%": { opacity: 1, transform: "translateY(0px)" },
}, },
}, },
}, },

Write Preview
Loading…
Cancel
Save