Thuong_e
2 years ago
parent
9fe7b4e40a
commit
9fbee934fc
@ -0,0 +1,115 @@ |
|||||||
|
{ |
||||||
|
"data": [ |
||||||
|
{ |
||||||
|
"id": 1, |
||||||
|
"title": "What is Fight Out?", |
||||||
|
"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" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
{ |
||||||
|
"array": [ |
||||||
|
{ |
||||||
|
"phase": "Phase 1", |
||||||
|
"listTitle": [ |
||||||
|
"Development of CEO Ideology", |
||||||
|
"Website Development and Release", |
||||||
|
"Whitepaper Launch", |
||||||
|
"Subscription Presale", |
||||||
|
"Marketing Partners Advisory Board Formed" |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": "Phase 2", |
||||||
|
"listTitle": [ |
||||||
|
"CEO DEX Token Launch", |
||||||
|
"Massive Marketing Campaign", |
||||||
|
"Real Time Suprise Buybacks", |
||||||
|
"NFT Staking and APR Staking Launch", |
||||||
|
"5 Million Marketcap Milestone CoinGecko Listing" |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": "Phase 3", |
||||||
|
"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 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." |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -1,7 +1,6 @@ |
|||||||
{ |
{ |
||||||
"title1": "SGPT là gì?", |
"title1": "SGPT là gì?", |
||||||
"title2": "Giải pháp SGPT ", |
"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.", |
"content1": "SGPT Token là một 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." |
"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." |
||||||
|
|
||||||
} |
} |
||||||
@ -0,0 +1,115 @@ |
|||||||
|
{ |
||||||
|
"data": [ |
||||||
|
{ |
||||||
|
"id": 1, |
||||||
|
"title": "Fight Out là gì?", |
||||||
|
"bgcolor": "bg-[#CC99FF]", |
||||||
|
"contents": [ |
||||||
|
{ |
||||||
|
"id": 1, |
||||||
|
"content": "Fight Out đang thay đổi kế hoạch chi tiết cho metaverse. Về bản chất, Fight Out là một nền tảng trò chơi thưởng cho người dùng khi thi đấu và giành chiến thắng trong nhiều chế độ thi đấu. Khả năng cạnh tranh của người chơi và số tiền họ được thưởng được xác định một phần bởi các thuộc tính của hình đại diện của họ. Chỉ số được tăng lên thông qua ứng dụng Fight Out bằng cách luyện tập ngoài đời thực.", |
||||||
|
"bgcolor": "bg-[#9999FF]" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 2, |
||||||
|
"content": "Fight Out đang thay đổi kế hoạch chi tiết cho metaverse. Về bản chất, Fight Out là một nền tảng trò chơi thưởng cho người dùng khi thi đấu và giành chiến thắng trong nhiều chế độ thi đấu. Khả năng cạnh tranh của người chơi và số tiền họ được thưởng được xác định một phần bởi các thuộc tính của hình đại diện của họ. Chỉ số được tăng lên thông qua ứng dụng Fight Out bằng cách luyện tập ngoài đời thực.", |
||||||
|
"bgcolor": "bg-[#6699FF]" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 3, |
||||||
|
"content": "Fight Out đang thay đổi kế hoạch chi tiết cho metaverse. Về bản chất, Fight Out là một nền tảng trò chơi thưởng cho người dùng khi thi đấu và giành chiến thắng trong nhiều chế độ thi đấu. Khả năng cạnh tranh của người chơi và số tiền họ được thưởng được xác định một phần bởi các thuộc tính của hình đại diện của họ. Chỉ số được tăng lên thông qua ứng dụng Fight Out bằng cách luyện tập ngoài đời thực.", |
||||||
|
"bgcolor": "bg-[#3399FF]" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 4, |
||||||
|
"content": "Fight Out đang thay đổi kế hoạch chi tiết cho metaverse. Về bản chất, Fight Out là một nền tảng trò chơi thưởng cho người dùng khi thi đấu và giành chiến thắng trong nhiều chế độ thi đấu. Khả năng cạnh tranh của người chơi và số tiền họ được thưởng được xác định một phần bởi các thuộc tính của hình đại diện của họ. Chỉ số được tăng lên thông qua ứng dụng Fight Out bằng cách luyện tập ngoài đời thực.", |
||||||
|
"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" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
{ |
||||||
|
"array": [ |
||||||
|
{ |
||||||
|
"phase": "Giai đoạn 1", |
||||||
|
"listTitle": [ |
||||||
|
"Sự phát triển của tư tưởng CEO", |
||||||
|
"Phát triển và phát hành trang web", |
||||||
|
"Ra mắt Whitepaper", |
||||||
|
"Đăng ký bán trước", |
||||||
|
"Ban cố vấn đối tác tiếp thị được thành lập" |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": "Giai đoạn 2", |
||||||
|
"listTitle": [ |
||||||
|
"CEO DEX ra mắt Token", |
||||||
|
"Chiến dịch tiếp thị lớn", |
||||||
|
"Mua lại theo thời gian thực", |
||||||
|
"Ra mắt NFT Staking và APR Staking", |
||||||
|
"Cột mốc 5 triệu vốn hóa thị trường niêm yết CoinGecko" |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": "Giai đoạn 3", |
||||||
|
"listTitle": [ |
||||||
|
"Phát triển và triển khai hoán đổi", |
||||||
|
"Ra mắt Merchandise", |
||||||
|
"Tier 1 CEX Listings", |
||||||
|
"Cầu nối CEO tới ETH, Arbitrium và Polygon", |
||||||
|
"Cột mốc vốn hóa thị trường 10 triệu", |
||||||
|
"CEOAI Bot Creator và tích hợp với AI." |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
function qs(selector: any, all = false) { |
||||||
|
return all |
||||||
|
? document.querySelectorAll(selector) |
||||||
|
: document.querySelector(selector); |
||||||
|
} |
||||||
|
|
||||||
|
const sections = qs(".section", true); |
||||||
|
const timeline = qs(".timeline"); |
||||||
|
const line = qs(".line"); |
||||||
|
line.style.bottom = `calc(100% - 20px)`; |
||||||
|
let prevScrollY = window.scrollY; |
||||||
|
let up, down; |
||||||
|
let full = false; |
||||||
|
let set = 0; |
||||||
|
const targetY = window.innerHeight * 0.8; |
||||||
|
|
||||||
|
function scrollHandler(e?: any) { |
||||||
|
const { scrollY } = window; |
||||||
|
up = scrollY < prevScrollY; |
||||||
|
down = !up; |
||||||
|
const timelineRect = timeline.getBoundingClientRect(); |
||||||
|
const lineRect = line.getBoundingClientRect(); // const lineHeight = lineRect.bottom - lineRect.top;
|
||||||
|
|
||||||
|
const dist = targetY - timelineRect.top; |
||||||
|
console.log(dist); |
||||||
|
|
||||||
|
if (down && !full) { |
||||||
|
set = Math.max(set, dist); |
||||||
|
line.style.bottom = `calc(100% - ${set}px)`; |
||||||
|
} |
||||||
|
|
||||||
|
if (dist > timeline.offsetHeight + 50 && !full) { |
||||||
|
full = true; |
||||||
|
line.style.bottom = `-50px`; |
||||||
|
} |
||||||
|
|
||||||
|
sections.forEach((item: any) => { |
||||||
|
// console.log(item);
|
||||||
|
const rect = item.getBoundingClientRect(); // console.log(rect);
|
||||||
|
|
||||||
|
if (rect.top + item.offsetHeight / 5 < targetY) { |
||||||
|
item.classList.add("show-me"); |
||||||
|
} |
||||||
|
}); // console.log(up, down);
|
||||||
|
|
||||||
|
prevScrollY = window.scrollY; |
||||||
|
} |
||||||
|
|
||||||
|
scrollHandler(); |
||||||
|
line.style.display = "block"; |
||||||
|
window.addEventListener("scroll", scrollHandler); |
||||||
@ -1,541 +0,0 @@ |
|||||||
// <!-- <div> |
|
||||||
// <div className="timeline"> |
|
||||||
// <div className="timeline-container primary"> |
|
||||||
// <div className="timeline-icon"> |
|
||||||
// {index + 1} |
|
||||||
// {/* <i className="far fa-grin-wink"></i> */} |
|
||||||
// </div> |
|
||||||
// <div className="timeline-body"> |
|
||||||
// <h4 className="timeline-title">{item.phase}</h4> |
|
||||||
// <ol className="flex flex-col gap-2"> |
|
||||||
// {item.listTitle.map((listItem, index) => { |
|
||||||
// return ( |
|
||||||
// <li |
|
||||||
// key={index} |
|
||||||
// className="flex items-center gap-3 text-lg" |
|
||||||
// > |
|
||||||
// <VscDebugBreakpointLog /> |
|
||||||
// <p className="font-medium font-body">{listItem}</p> |
|
||||||
// </li> |
|
||||||
// ); |
|
||||||
// })} |
|
||||||
// </ol> |
|
||||||
// </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; |
|
||||||
Loading…
Reference in new issue