+
-
- );
-};
-
-export default Approach;
diff --git a/src/shared/components/healthcare/BuildForGrowth.tsx b/src/shared/components/healthcare/BuildForGrowth.tsx
new file mode 100644
index 0000000..c5efc0a
--- /dev/null
+++ b/src/shared/components/healthcare/BuildForGrowth.tsx
@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { AiOutlineArrowRight } from "react-icons/Ai";
+import buildofgrowth from "../../../assets/images/buildforgrowth.png";
+import logoGoogle from "../../../assets/images/logoGoogle.png";
+import logoMicrosoft from "../../../assets/images/logoMicrosoft.png";
+import "../css/Competitions.css";
+
+const BuildForGrowth = () => {
+ const { t } = useTranslation("buildForGrowthSectionHealthCare");
+ const [competitionsData, setCompetitionsData] = useState([]);
+ const [growthBtn, setGrowthBtn] = useState(0);
+ const [growthIndex, setGrowthIndex] = useState("");
+
+ const handleSelectedGrowth = (item: any, index: any) => {
+ setGrowthIndex(`${-20 * index}%`);
+ setGrowthBtn(index);
+ };
+ useEffect(() => {
+ setCompetitionsData(t("array", { returnObjects: true }));
+ }, [t]);
+ console.log(competitionsData);
+ return (
+ The Approach
-
- {appRoachData.map((item: any) => {
- return (
-
-
-
- );
- })}
-
-
- - {item.title} -
--
- {item.contents.map((item: any, index: any) => {
- return (
- <>
-
-
- {item.content}
-
-
- {item.navcontent?.map((item: any, index: any) => {
- return
- + {item} ; - })} -
-
- );
- })}
-
+
+ );
+};
+
+export default BuildForGrowth;
diff --git a/src/shared/components/healthcare/Competitions.tsx b/src/shared/components/healthcare/Competitions.tsx
deleted file mode 100644
index 9941978..0000000
--- a/src/shared/components/healthcare/Competitions.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-
-const Competitions = () => {
- return (
-
+
+
+
+
+
+ {t("title")}
+
+ {competitionsData.map((item: any, index) => (
+
+ handleSelectedGrowth(item.button, index)}
+ >
+
+ ))}
+ + {item?.button} +
+
+
+
+ 
+
+
+
+
+ {competitionsData.map((item: any, index) => (
+
+ ))}
+
+
+ 
+ 
+
+
+
+
+
+
+
-
- );
-};
-
-export default Competitions;
diff --git a/src/shared/components/healthcare/CustomerInsight.tsx b/src/shared/components/healthcare/CustomerInsight.tsx
deleted file mode 100644
index 6427241..0000000
--- a/src/shared/components/healthcare/CustomerInsight.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useEffect } from "react";
-import { BiSearchAlt } from "react-icons/bi";
-import { TbFileDislike, TbFileLike } from "react-icons/tb";
-import { AiOutlineMessage } from "react-icons/ai";
-import Aos from "aos";
-import "aos/dist/aos.css";
-import { useTranslation } from "react-i18next";
-import customerInsight from "../../../assets/images/image22.png";
-
-const listInsight = [
- {
- content:
- "Users need a reliable and easy-to-understand source of information.",
- },
- {
- content:
- "Users dislike having to synthesize complex information after conducting searches.",
- },
- {
- content:
- "Users prefer to search for information about illnesses as a reference before seeing a doctor.",
- },
- {
- content:
- "People with mental health issues tend to prefer texting about their problems.",
- },
-];
-const CustomerInsight = () => {
- useEffect(() => {
- Aos.init();
- }, []);
- const { t } = useTranslation("customerInsightHealthCare");
- return (
- Competitions
-
-
-
-
- Innovative
-
-
- Specialization
-
-
-
- Google
-
-
- ChatGPT
-
-
-
- Us
-
-
-
-
- Traditional Chatbot
-
-
-
-
- Chat Application
-
-
-
-
- );
-};
-
-export default CustomerInsight;
diff --git a/src/shared/components/healthcare/FirstSection.tsx b/src/shared/components/healthcare/FirstSection.tsx
index 0600b39..2624f15 100644
--- a/src/shared/components/healthcare/FirstSection.tsx
+++ b/src/shared/components/healthcare/FirstSection.tsx
@@ -1,29 +1,38 @@
import React from "react";
import robotImage from "../../../assets/images/robot-2.png";
import robotImage2 from "../../../assets/images/robot-coin1.png";
+import vector from "../../../assets/images/vector.png";
+import { useTranslation } from "react-i18next";
const FirstSection = () => {
+ const { t } = useTranslation("firstSectionHealthCare");
return (
- {t("title")} -
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
- {t("content1")}
-
-
- {t("content2")}
-
-
- {t("content3")}
-
-
- {t("content4")}
-
-
-
SGPT for Healthcare
-
- 
-
- 
-
-
-
+
diff --git a/src/shared/components/healthcare/HowItWorksSection.tsx b/src/shared/components/healthcare/HowItWorksSection.tsx
new file mode 100644
index 0000000..ea96d7a
--- /dev/null
+++ b/src/shared/components/healthcare/HowItWorksSection.tsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import HowItWorkImg from "../../../assets/images/howitword.png";
+import "../css/ApproachSection.css";
+const HowItWorksSection = () => {
+ const { t } = useTranslation("howItWorksSectionHealthCare");
+ const [appRoachData, setAppRoachData] = useState([]);
+ useEffect(() => {
+ setAppRoachData(t("data", { returnObjects: true }));
+ }, [t]);
+ console.log(t);
+ const heading = t("heading");
+ const firstSpaceIndex = heading.indexOf(" ");
+ const firstWord = heading.substring(0, firstSpaceIndex);
+ const remainingText = heading.substring(firstSpaceIndex + 1);
+
+ return (
+
+
+
+ + {t("title1")}{" "} + + {t("title2")} + {" "} + {t("title3")} +
+ {t("content")} +
+
+
+
+
+ 
+
+ );
+};
+
+export default HowItWorksSection;
diff --git a/src/shared/components/healthcare/JoinACommunityOfMillions.tsx b/src/shared/components/healthcare/JoinACommunityOfMillions.tsx
new file mode 100644
index 0000000..7d819fb
--- /dev/null
+++ b/src/shared/components/healthcare/JoinACommunityOfMillions.tsx
@@ -0,0 +1,72 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { BsDatabaseCheck } from "react-icons/bs";
+import { RiCodeSSlashLine, RiSettings4Line } from "react-icons/ri";
+import ImgJoin1 from "../../../assets/images/JoinsCoM1.png";
+import ImgJoin2 from "../../../assets/images/JoinsCoM2.png";
+import ImgJoin3 from "../../../assets/images/JoinsCoM3.png";
+import ImgJoin4 from "../../../assets/images/JoinsCoM4.png";
+import ImgJoin5 from "../../../assets/images/JoinsCoM5.png";
+import React from "react";
+import Aos from "aos";
+import "aos/dist/aos.css";
+const JoinACommunityOfMillions = () => {
+ useEffect(() => {
+ Aos.init();
+ }, []);
+
+ const { t } = useTranslation("joinACommunityOfMillionsHealthCare");
+ return (
+
+
+ + {firstWord} {remainingText} +
+
+ 
+
+
+
+ );
+};
+
+export default JoinACommunityOfMillions;
diff --git a/src/shared/components/healthcare/MassAdoptionSection.tsx b/src/shared/components/healthcare/MassAdoptionSection.tsx
new file mode 100644
index 0000000..9cde6f5
--- /dev/null
+++ b/src/shared/components/healthcare/MassAdoptionSection.tsx
@@ -0,0 +1,107 @@
+import React, { useEffect } from "react";
+import Aos from "aos";
+import "aos/dist/aos.css";
+import { useTranslation } from "react-i18next";
+
+const MassAdoptionSection = () => {
+ useEffect(() => {
+ Aos.init();
+ }, []);
+ const { t } = useTranslation("massAdoptionInsightHealthCare");
+ return (
+
+
+ + {t("heading")} +
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+ {t("number1")}
+
+ {t("content1")}
+
+
+ 
+
+
+ 
+
+
+
+ {t("number2")}
+
+ {t("content2")}
+
+
+ 
+
+
+
+ {t("title")}
+
+
+
+
+
+ );
+};
+
+export default MassAdoptionSection;
diff --git a/src/shared/components/healthcare/ProblemsSection.tsx b/src/shared/components/healthcare/ProblemsSection.tsx
deleted file mode 100644
index 628f4fe..0000000
--- a/src/shared/components/healthcare/ProblemsSection.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { HiOutlineUserGroup } from "react-icons/hi";
-import { TbReportSearch } from "react-icons/tb";
-import { useTranslation } from "react-i18next";
-import Aos from "aos";
-import "aos/dist/aos.css";
-import userBehavior from "../../../assets/images/icon-user-behavior.png";
-import userInformation from "../../../assets/images/image20.png";
-import userInteraction from "../../../assets/images/image21.png";
-
-const listProblems = [
- {
- title: "User behavior",
- content:
- "Satisfying the habit of searching for any unusual signs related to the user's health",
- },
- {
- title: "Information",
- content:
- "Providing accurate and easy-to-understand information for users",
- },
- {
- icon: "HiOutlineUserGroup",
- title: "Interaction",
- content:
- "Providing a good user experience with high interactivity, encourage users to provide more valuable information about their illness",
- },
-];
-const ProblemsSection = () => {
- useEffect(() => {
- Aos.init();
- }, []);
- const { t } = useTranslation("problemsSectionHealthCare");
- const [problemsSectionData, setProblemsSectionData] = useState([]);
- useEffect(() => {
- setProblemsSectionData(t("data", { returnObjects: true }));
- }, [t]);
- return (
-
+
+
+
+ {t("heading")}
+
+
+
+
+
+
+
+
+
+ ![]({t("line1"))
+
+ {t("title1")}
+
+
+ {t("content1_1")}
+
+
+ {t("content1_2")}
+
+
+ {t("content1_3")}
+
+
+
+
+
+
+
+ ![]({t("line2"))
+
+ {t("title1")}
+
+
+ {t("content2_1")}
+
+
+ {t("content2_2")}
+
+
+ {t("content2_3")}
+
+
+
+
+
+
+
+
+
+ ![]({t("line3"))
+
+ {t("title3")}
+
+
+ {t("content3_1")}
+
+
+ {t("content3_2")}
+
+
+ {t("content3_3")}
+
+
+
+
+
+
+
+ ![]({t("line4"))
+
+ {t("title4")}
+
+
+ {t("content4_1")}
+
+
+ {t("content4_2")}
+
+
+ {t("content4_3")}
+
+
+
-
- );
-};
-
-export default ProblemsSection;
diff --git a/src/shared/components/healthcare/SecondSection.tsx b/src/shared/components/healthcare/SecondSection.tsx
new file mode 100644
index 0000000..4654a77
--- /dev/null
+++ b/src/shared/components/healthcare/SecondSection.tsx
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import Aos from "aos";
+import "aos/dist/aos.css";
+
+const SectionSection = () => {
+ useEffect(() => {
+ Aos.init();
+ }, []);
+ const { t } = useTranslation("secondSectionHealthCare");
+ const [problemsSectionData, setProblemsSectionData] = useState([]);
+ useEffect(() => {
+ setProblemsSectionData(t("data", { returnObjects: true }));
+ }, [t]);
+ return (
+ - {t("title")} -
-
- {/* [&>*:not(:first-child)]:border-l-2 */}
- {problemsSectionData.map((item: any, index) => {
- return (
- <>
-
-
-
-
-
- );
- })}
- {/*
-
-
-
- 
-
-
- {item.title}
-
-
- {item.content}
-
-
-
-
- 
-
- User Information
-- Providing accurate and easy-to-understand information for users -
-
-
*/}
-
- 
-
- Interaction
-- Providing a good user experience with high interactivity, encourage - users to provide more valuable information about their illness -
-
+
+ );
+};
+
+export default SectionSection;
diff --git a/src/shared/components/healthcare/SolutionsOfProduct.tsx b/src/shared/components/healthcare/SolutionsOfProduct.tsx
deleted file mode 100644
index 328b19c..0000000
--- a/src/shared/components/healthcare/SolutionsOfProduct.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { useEffect } from "react";
-import { BiSearchAlt } from "react-icons/bi";
-import { useTranslation } from "react-i18next";
-import { TbFileDislike, TbFileLike } from "react-icons/tb";
-import { AiOutlineMessage } from "react-icons/ai";
-import { BsDatabaseCheck } from "react-icons/bs";
-import { RiCodeSSlashLine, RiSettings4Line } from "react-icons/ri";
-import Aos from "aos";
-import "aos/dist/aos.css";
-import customerInsight from "../../../assets/images/image22.png";
-// import "../../../index.css";
-const listSolutions = [
- {
- title: "DATA",
- content: [
- "Reliable and authoritative data sources.",
- "The data is certified by hospitals and specialist doctors.",
- ],
- },
- {
- title: "TECHNOLOGY",
- content: [
- "The development and research team has extensive experience in developing products in the healthcare industry.",
- ],
- },
- {
- title: "CUSTOMIZATION",
- content: [
- "The server is designed to handle large amounts of data and has high scalability.",
- "The system is highly customizable and adaptable to each business and hospital",
- ],
- },
-];
-const SolutionsOfProduct = () => {
- useEffect(() => {
- Aos.init();
- }, []);
- const { t } = useTranslation("solutionsOfProductHealthCare");
- return (
-
+
+ {t("title")}
+
+ {problemsSectionData.map((item: any, index) => {
+ return (
+ <>
+
+
+
+
+
+ );
+ })}
+
+
+ {item.title}
+
+
+ {item.content}
+
+
+
-
- );
-};
-
-export default SolutionsOfProduct;
diff --git a/src/shared/components/home/FirstSection.tsx b/src/shared/components/home/FirstSection.tsx
index 278fed7..7565280 100644
--- a/src/shared/components/home/FirstSection.tsx
+++ b/src/shared/components/home/FirstSection.tsx
@@ -53,7 +53,7 @@ const socials = [
const FirstSection = () => {
const { t } = useTranslation("firstSectionHome");
- const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844";
+ const address = "0xdB66FC64263F86744985A9D0d64dca1A4FfDe038";
const truncateAddress = (address: string) => {
return address.slice(0, 5) + "......" + address.slice(-5);
};
diff --git a/src/shared/components/home/QnASection.tsx b/src/shared/components/home/QnASection.tsx
index 8e5a851..ee54197 100644
--- a/src/shared/components/home/QnASection.tsx
+++ b/src/shared/components/home/QnASection.tsx
@@ -12,123 +12,7 @@ import "../css/QnASection.css";
type Props = {};
const QnASection = (props: Props) => {
- // const listQnA = [
- // {
- // 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",
- // },
- // ],
- // },
- // ];
const { t } = useTranslation("qnaHome");
const [qnaData, setQnaData] = useState([]);
const showListItem = (id: string, iconDropDown: string) => {
diff --git a/src/shared/components/home/TokenomicsSection.tsx b/src/shared/components/home/TokenomicsSection.tsx
index c659032..3d00dc0 100644
--- a/src/shared/components/home/TokenomicsSection.tsx
+++ b/src/shared/components/home/TokenomicsSection.tsx
@@ -12,126 +12,84 @@ import {
import ChartDataLabels from "chartjs-plugin-datalabels";
import { Context } from "chartjs-plugin-datalabels";
import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
-
+import "../css/TokenomicsSection.css";
import "animate.css";
import { useTranslation } from "react-i18next";
type Props = {};
ChartJS.register(ArcElement, Tooltip, Legend);
const tokenomics = [
{
- name: "Treasury",
- title: "Treasury - 14%",
- precent: "14",
+ name: "Ecosystem Growth",
+ title:
+ "4 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from year 2.",
+ precent: "20",
description: " ",
color: "#86eae9",
bgcolor: "bg-[#86eae9]",
},
{
- name: "Liquidity",
- title: "Liquidity - 5%",
- precent: "5",
+ name: "Community",
+ title:
+ "4 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from the 2nd year.",
+ precent: "20",
description: " ",
color: "#5dbdd3",
bgcolor: "bg-[#5dbdd3]",
},
{
- name: "Private sale",
- title: "Private sale - 15%",
- precent: "15",
+ name: "Team",
+ title:
+ "4 years vesting, 1 year course, and lock pattern are in each block from the 2nd year.",
+ precent: "18",
description: " ",
color: "#4591b8",
bgcolor: "bg-[#4591b8]",
},
{
- name: "Seed sale",
- title: "Seed sale - 19%",
- precent: "19",
- description: " ",
- color: "#3b6696",
- bgcolor: "bg-[#3b6696]",
- },
- {
- name: "Public sale",
- title: "Public sale - 5%",
- precent: "5",
+ name: "Strategic Sale",
+ title:
+ "2 years vesting, 1 year course, and lock pattern are all block by block from 2nd year.",
+ precent: "15",
description: " ",
color: "#353c6e",
bgcolor: "bg-[#353c6e]",
},
{
- name: "Staking & Farming",
- title: "Staking & Farming - 15%",
- precent: "15",
+ name: "Treasury",
+ title:
+ "4 years vesting, 10% release at TGE, 1 year lock and unlock in each block from the 2nd year.",
+ precent: "12",
description: " ",
color: "#705788",
bgcolor: "bg-[#705788]",
},
{
- name: "Team",
- title: "Team - 10%",
- precent: "10",
+ name: "Seed Sale",
+ title:
+ "3 years vesting, 1 year lock and unlock in each block from the 2nd year.",
+ precent: "5",
description: " ",
color: "#a5769e",
bgcolor: "bg-[#a5769e]",
},
{
- name: "Marketing",
- title: "Marketing - 15%",
- precent: "15",
- description: " ",
+ name: "Binance Launchpad Sale",
+ title: "100% key at TGE.",
+ precent: "5",
+ description: "vxcvdvsdfsdf ",
color: "#d59ab3",
bgcolor: "bg-[#d59ab3]",
},
{
name: "Advisor",
- title: "Advisor - 2%",
- precent: "2",
+ title:
+ "3 years vesting, 1 year lock, and lock pattern are all block by block from 2nd year.",
+ precent: "5",
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);
@@ -219,21 +177,34 @@ const TokenomicsSection = (props: Props) => {
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];
+ formatter: (context: any, args: any) => {
+ const index = args.dataIndex;
+ return args.chart.data.labels[index];
},
},
tooltip: {
callbacks: {
label: (context: any) => {
- return ` ${tokenomics[context.dataIndex].title}`;
+ const dataIndex = context.dataIndex;
+ const title = tokenomics[dataIndex].title;
+ const words = title.split(" "); // Split by space
+ const groupedLabels = [];
+
+ for (let i = 0; i < words.length; i += 10) {
+ const group = words.slice(i, i + 10).join(" ");
+ groupedLabels.push(group);
+ }
+
+ return groupedLabels;
},
},
+ displayColors: false,
},
},
};
+
ChartJS.register(ChartDataLabels);
return (
- The Solutions of Product -
-
-
-
-
-
-
-
-
- {t("data1.title")}
-
- -
-
- {t("data1.contents.content1")} -
- {t("data1.contents.content2")} -
-
-
-
-
-
-
-
- {t("data2.title")}
--
-
- {t("data2.contents.content1")} -
-
-
-
-
-
- {t("data3.title")}
--
-
- {t("data3.contents.content1")} -
- {t("data3.contents.content2")} -
@@ -242,7 +213,7 @@ const TokenomicsSection = (props: Props) => {
Tokenomics
-
+
{
/>
-
+ {/*
-
+
*/}