diff --git a/src/i18n/en/home/tokenomicsSection.json b/src/i18n/en/home/tokenomicsSection.json new file mode 100644 index 0000000..1a0c6fd --- /dev/null +++ b/src/i18n/en/home/tokenomicsSection.json @@ -0,0 +1,37 @@ +{ + "heading": "The SGPT token unlocking schedule will take in 5 years, specifically as follows:", + "array": [ + { + "title": "Ecosystem Growth", + "description": "5 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from year 2." + }, + { + "title": "Community Development", + "description": "5 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from the 2nd year." + }, + { + "title": "Team", + "description": "5 years vesting, 1 year course, and lock pattern are in each block from the 2nd year." + }, + { + "title": "Strategic Sale", + "description": "2 years vesting, 1 year course, and lock pattern are all block by block from 2nd year." + }, + { + "title": "Treasury", + "description": "5 years vesting, 10% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from year 2." + }, + { + "title": "Seed Sale", + "description": "3 years vesting, 1 year lock and unlock in each block from the 2nd year." + }, + { + "title": "Binance Launchpad Sale", + "description": "100% key at TGE." + }, + { + "title": "Advisors", + "description": "3 years vesting, 1-year lock, and lock pattern are all block by block from 2nd year." + } + ] +} diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts index d50ac12..c8e4025 100644 --- a/src/i18n/i18n.ts +++ b/src/i18n/i18n.ts @@ -8,6 +8,8 @@ import RoadMap_home_EN from "./en/home/roadmap.json"; import RoadMap_home_VI from "./vi/home/roadmap.json"; import QnA_home_EN from "./en/home/qna.json"; import QnA_home_VI from "./vi/home/qna.json"; +import TokenomicsSection_home_EN from "./en/home/tokenomicsSection.json"; +import TokenomicsSection_home_VI from "./vi/home/tokenomicsSection.json"; import FirstSection_healthCare_EN from "./en/healthCare/firstSection.json"; import ProblemsSection_healthCare_EN from "./en/healthCare/problemsSection.json"; import FirstSection_healthCare_VI from "./vi/healthCare/firstSection.json"; @@ -29,6 +31,7 @@ export const resources = { aboutSectionHome: AboutSection_home_EN, roadmapHome: RoadMap_home_EN, qnaHome: QnA_home_EN, + tokenomicHome: TokenomicsSection_home_EN, firstSectionHealthCare: FirstSection_healthCare_EN, problemsSectionHealthCare: ProblemsSection_healthCare_EN, customerInsightHealthCare: CustomerInsight_healthCare_EN, @@ -40,6 +43,7 @@ export const resources = { aboutSectionHome: AboutSection_home_VI, roadmapHome: RoadMap_home_VI, qnaHome: QnA_home_VI, + tokenomicHome: TokenomicsSection_home_VI, firstSectionHealthCare: FirstSection_healthCare_VI, problemsSectionHealthCare: ProblemsSection_healthCare_VI, customerInsightHealthCare: CustomerInsight_healthCare_VI, diff --git a/src/i18n/vi/home/tokenomicsSection.json b/src/i18n/vi/home/tokenomicsSection.json new file mode 100644 index 0000000..2390cff --- /dev/null +++ b/src/i18n/vi/home/tokenomicsSection.json @@ -0,0 +1,37 @@ +{ + "heading": "Lịch mở khóa token SGPT sẽ diễn ra trong vòng 5 năm, cụ thể như sau:", + "array": [ + { + "title": "Sự Phát Triển Hệ Sinh Thái", + "description": "5 năm với 30% được phát hành tại Sự Kiện Tạo Ra Token (TGE), sau đó bị khóa trong 1 năm và mở khóa mỗi khối từ năm thứ 2." + }, + { + "title": "Phát Triển Cộng Đồng", + "description": "5 năm với 30% được phát hành tại Sự Kiện Tạo Ra Token (TGE), sau đó bị khóa trong 1 năm và mở khóa mỗi khối từ năm thứ 2." + }, + { + "title": "Nhóm", + "description": "5 năm với mô hình khóa học 1 năm, và mô hình khóa học được áp dụng từ năm thứ 2." + }, + { + "title": "Bán Chiến Lược", + "description": "2 năm với mô hình khóa học 1 năm, và mô hình khóa học được áp dụng từ năm thứ 2." + }, + { + "title": "Kho Tài Chính", + "description": "5 năm với 10% được phát hành tại Sự Kiện Tạo Ra Token (TGE), sau đó bị khóa trong 1 năm và mở khóa mỗi khối từ năm thứ 2." + }, + { + "title": "Bán Giống", + "description": "3 năm với mô hình khóa học 1 năm, và mở khóa và khóa từng khối từ năm thứ 2." + }, + { + "title": "Sự Kiện Ra Mắt Binance Launchpad", + "description": "100% được phát hành tại TGE." + }, + { + "title": "Cố Vấn", + "description": "3 năm với mô hình khóa học 1 năm, và mô hình khóa học và khóa được áp dụng từ năm thứ 2." + } + ] +} diff --git a/src/shared/components/home/TokenomicsSection.tsx b/src/shared/components/home/TokenomicsSection.tsx index 284f138..c659032 100644 --- a/src/shared/components/home/TokenomicsSection.tsx +++ b/src/shared/components/home/TokenomicsSection.tsx @@ -14,84 +14,136 @@ import { Context } from "chartjs-plugin-datalabels"; import tokenomicChart from "../../../assets/images/tokenomic-chart.png"; import "animate.css"; +import { useTranslation } from "react-i18next"; type Props = {}; ChartJS.register(ArcElement, Tooltip, Legend); const tokenomics = [ { - name: "Liquidity", - title: "Liquidity - 5% 1,000,000 SGPT", - precent: "5", + name: "Treasury", + title: "Treasury - 14%", + precent: "14", description: " ", color: "#86eae9", bgcolor: "bg-[#86eae9]", }, { - name: "Private Sale", - title: "Private Sale - 17% 3,400,000 SGPT", - precent: "17", + name: "Liquidity", + title: "Liquidity - 5%", + precent: "5", description: " ", color: "#5dbdd3", bgcolor: "bg-[#5dbdd3]", }, { - name: "Stacking & Farming", - title: "Stacking & Farming - 15% 3,000,000 SGPT", + name: "Private sale", + title: "Private sale - 15%", precent: "15", description: " ", color: "#4591b8", bgcolor: "bg-[#4591b8]", }, { - name: "Marketing & Promotion", - title: "Marketing & Promotion - 15% 3,000,000 SGPT", - precent: "15", + name: "Seed sale", + title: "Seed sale - 19%", + precent: "19", description: " ", color: "#3b6696", bgcolor: "bg-[#3b6696]", }, { - name: "Public Sale", - title: "Public Sale - 14% 2,800,000 SGPT", - precent: "14", + name: "Public sale", + title: "Public sale - 5%", + precent: "5", description: " ", color: "#353c6e", bgcolor: "bg-[#353c6e]", }, { - name: "Reward & Q&A", - title: "Reward & Q&A - 10% 2,000,000 SGPT", - precent: "10", + name: "Staking & Farming", + title: "Staking & Farming - 15%", + precent: "15", description: " ", color: "#705788", bgcolor: "bg-[#705788]", }, { - name: "Advisor", - title: "Advisor - 10% 2,000,000 SGPT", + name: "Team", + title: "Team - 10%", precent: "10", description: " ", color: "#a5769e", bgcolor: "bg-[#a5769e]", }, { - name: "Treasury", - title: "Treasury - 14% 2,800,000 SGPT", - precent: "14", + name: "Marketing", + title: "Marketing - 15%", + precent: "15", description: " ", color: "#d59ab3", bgcolor: "bg-[#d59ab3]", }, + { + name: "Advisor", + title: "Advisor - 2%", + precent: "2", + description: " ", + color: "#705788", + bgcolor: "bg-[#705788]", + }, ]; +// const dataSchedule = [ +// { +// title: "Ecosystem Growth", +// description: +// "5 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from year 2.", +// }, +// { +// title: "Community Development", +// description: +// "5 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from the 2nd year.", +// }, +// { +// title: "Team", +// description: +// "5 years vesting, 1 year course, and lock pattern are in each block from the 2nd year.", +// }, +// { +// title: "Strategic Sale", +// description: +// "2 years vesting, 1 year course, and lock pattern are all block by block from 2nd year.", +// }, +// { +// title: "Treasury", +// description: +// "5 years vesting, 10% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from year 2.", +// }, +// { +// title: "Seed Sale", +// description: +// "3 years vesting, 1 year lock and unlock in each block from the 2nd year.", +// }, +// { +// title: "Binance Launchpad Sale", +// description: "100% key at TGE.", +// }, +// { +// title: "Advisors", +// description: +// "3 years vesting, 1-year lock, and lock pattern are all block by block from 2nd year.", +// }, +// ]; const TokenomicsSection = (props: Props) => { + const { t } = useTranslation("tokenomicHome"); const [isVisible, setIsVisible] = useState(false); - + const [tokenomicData, setTokenomicData] = useState([]); useEffect(() => { + setTokenomicData(t("array", { returnObjects: true })); const section = document.getElementById("tokenomics"); const observer = new IntersectionObserver( ([entry]) => { setIsVisible(entry.isIntersecting); }, - { threshold: 0.4 } + { threshold: 0.2 } ); if (!section) { @@ -102,7 +154,7 @@ const TokenomicsSection = (props: Props) => { return () => { observer.unobserve(section); }; - }, []); + }, [t]); useEffect(() => { console.log("isVisible", isVisible); @@ -186,11 +238,11 @@ const TokenomicsSection = (props: Props) => { return (
-

+

Tokenomics

-
-
+
+
{ />
- - {/*
-
    - {tokenomics.map((item, index) => { - return ( - +
    + +

    + {t("heading")} +

    +
      + {tokenomicData.map((item: any, index) => { + return (
      -

      - {item.title} -

      -

      {item.description}

      - - ); - })} -
    -
    */} + key={index + 1} + className="w-full relative text-center border-2 border-[#06B6D4] text-white py-3 animate__backInDown rounded-lg px-4" + > +

    {item?.title}

    +

    {item?.description}

    + {index < tokenomicData.length - 1 && ( +
    + )} +
+ ); + })} + + +