fix: content tokenomic section

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."
+    }
+  ]
+}

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,

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."
+    }
+  ]
+}

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 (
     <div className="w-full pb-24 scroll-mt-16" id="tokenomics">
       <div className="container w-[94%] mx-auto">
-        <h1 className="text-4xl text-white font-bold text-center mb-16  hover:text-orange-400">
+        <h1 className="text-4xl text-white font-bold text-center mb-12  hover:text-orange-400">
           Tokenomics
         </h1>
-        <div className="w-full flex justify-center items-center lg:justify-between lg:flex-row">
-          <div className="w-full  flex justify-center">
+        <div className="w-full flex justify-center items-center lg:justify-between lg:flex-row flex-wrap  gap-10">
+          <div className="w-full lg:w-[45%] flex justify-center">
             <animated.div
               style={{ ...styles }}
               className="w-[300px] sm:w-[350px] md:w-[500px]  lg:w-[550px]"
@@ -202,28 +254,29 @@ const TokenomicsSection = (props: Props) => {
               />
             </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="w-full lg:w-[45%] justify-center">
+            <animated.li style={{ ...styles }} className={``}>
+              <h2 className="text-white text-center font-bold text-xl pb-4 md:pb-6  lg:pb-8">
+                {t("heading")}
+              </h2>
+              <ul className="flex flex-col items-end justify-center w-3/4 md:w-full h-full gap-8 px-3 mx-auto">
+                {tokenomicData.map((item: any, index) => {
+                  return (
                     <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> */}
+                      key={index + 1}
+                      className="w-full relative text-center  border-2 border-[#06B6D4] text-white py-3  animate__backInDown rounded-lg px-4"
+                    >
+                      <h4 className="text-xl font-bold">{item?.title}</h4>
+                      <p>{item?.description}</p>
+                      {index < tokenomicData.length - 1 && (
+                        <div className="absolute bottom-[-24px] left-1/2 translate-x-[-50%] h-3 w-3 bg-[#06B6D4] border-2 border-white rounded-[50%]"></div>
+                      )}
+                    </div>
+                  );
+                })}
+              </ul>
+            </animated.li>
+          </div>
         </div>
       </div>
     </div>