From 9fbee934fc109ccf970be0eb19f1353ce3484841 Mon Sep 17 00:00:00 2001 From: Thuong_e Date: Mon, 17 Apr 2023 10:49:07 +0700 Subject: [PATCH] add i18n --- src/App.tsx | 1 + src/i18n/en/qna.json | 115 ++++ src/i18n/en/roadmap.json | 57 ++ src/i18n/i18n.ts | 28 +- src/i18n/vi/aboutSection.json | 11 +- src/i18n/vi/qna.json | 115 ++++ src/i18n/vi/roadmap.json | 35 ++ src/shared/components/Header.tsx | 174 ++++-- src/shared/components/animated/QnASection.css | 10 +- .../components/animated/RoadmadAnimation.tsx | 51 ++ src/shared/components/animated/TypingText.tsx | 4 +- src/shared/components/home/AboutSection.tsx | 34 +- src/shared/components/home/FirstSection.tsx | 16 +- src/shared/components/home/QnASection.tsx | 42 +- src/shared/components/home/RoadMap.tsx | 17 +- .../components/home/TokenomicsSection.tsx | 28 +- src/shared/components/home/text | 541 ------------------ 17 files changed, 577 insertions(+), 702 deletions(-) create mode 100644 src/i18n/en/qna.json create mode 100644 src/i18n/en/roadmap.json create mode 100644 src/i18n/vi/qna.json create mode 100644 src/i18n/vi/roadmap.json create mode 100644 src/shared/components/animated/RoadmadAnimation.tsx delete mode 100644 src/shared/components/home/text diff --git a/src/App.tsx b/src/App.tsx index 5bcc66c..2a1cce2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,4 @@ +import { useTranslation } from "react-i18next"; import RouterProviderComponent from "./shared/providers/RouterProviderComponent"; function App() { diff --git a/src/i18n/en/qna.json b/src/i18n/en/qna.json new file mode 100644 index 0000000..d86defb --- /dev/null +++ b/src/i18n/en/qna.json @@ -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" + } + ] + } + ] +} diff --git a/src/i18n/en/roadmap.json b/src/i18n/en/roadmap.json new file mode 100644 index 0000000..abfb529 --- /dev/null +++ b/src/i18n/en/roadmap.json @@ -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." + ] + } + ] +} diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts index 6b37f92..3cb22b8 100644 --- a/src/i18n/i18n.ts +++ b/src/i18n/i18n.ts @@ -1,18 +1,30 @@ import i18n from "i18next"; import { useTranslation, initReactI18next } from "react-i18next"; -import FirstSection_EN from "./en/firstSection.json" -import FirstSection_VI from "./vi/firstSection.json" +import FirstSection_EN from "./en/firstSection.json"; +import FirstSection_VI from "./vi/firstSection.json"; +import AboutSection_EN from "./en/aboutSection.json"; +import AboutSection_VI from "./vi/aboutSection.json"; +import RoadMap_EN from "./en/roadmap.json"; +import RoadMap_VI from "./vi/roadmap.json"; +import QnA_EN from "./en/qna.json"; +import QnA_VI from "./vi/qna.json"; + export const locales = { - en: 'English', - vi: 'Việt Nam' -} + en: "English", + vi: "Việt Nam", +}; export const resources = { en: { - firstSection: FirstSection_EN + firstSection: FirstSection_EN, + aboutSection: AboutSection_EN, + roadmap: RoadMap_EN, + qna: QnA_EN, }, vi: { - firstSection: FirstSection_VI - + firstSection: FirstSection_VI, + aboutSection: AboutSection_VI, + roadmap: RoadMap_VI, + qna: QnA_VI, }, }; i18n.use(initReactI18next).init({ diff --git a/src/i18n/vi/aboutSection.json b/src/i18n/vi/aboutSection.json index 33830ad..736a508 100644 --- a/src/i18n/vi/aboutSection.json +++ b/src/i18n/vi/aboutSection.json @@ -1,7 +1,6 @@ { - "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." - -} \ No newline at end of file + "title1": "SGPT là gì?", + "title2": "Giải pháp SGPT ", + "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." +} diff --git a/src/i18n/vi/qna.json b/src/i18n/vi/qna.json new file mode 100644 index 0000000..13672dc --- /dev/null +++ b/src/i18n/vi/qna.json @@ -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" + } + ] + } + ] +} diff --git a/src/i18n/vi/roadmap.json b/src/i18n/vi/roadmap.json new file mode 100644 index 0000000..588db6c --- /dev/null +++ b/src/i18n/vi/roadmap.json @@ -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." + ] + } + ] +} diff --git a/src/shared/components/Header.tsx b/src/shared/components/Header.tsx index 4b1e4bb..8e96940 100644 --- a/src/shared/components/Header.tsx +++ b/src/shared/components/Header.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import {useTranslation } from "react-i18next"; +import { useTranslation } from "react-i18next"; import Button from "./Button"; import robotLogo from "../../assets/images/robot-logo.png"; import { BsNewspaper, BsGithub } from "react-icons/bs"; @@ -37,10 +37,8 @@ const Header = (props: Props) => { const [isOpenMenu, setIsOpenMenu] = 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); + const currentLanguage = locales[i18n.language as keyof typeof locales]; + const languages = Object.keys(resources); React.useEffect(() => { // check is mobile if (window.innerWidth <= 768) { @@ -68,6 +66,7 @@ const Header = (props: Props) => { const element = document.getElementById(section); if (element) { element.scrollIntoView({ behavior: "smooth" }); + setIsOpenMenu(!isOpenMenu); } }; const backToHome = () => { @@ -81,14 +80,14 @@ const Header = (props: Props) => { const pdf = Whitepaper; window.open(pdf); }; - const changeLanguage = (lng: string)=>{ - i18n.changeLanguage(lng) - } + const changeLanguage = (lng: string) => { + i18n.changeLanguage(lng); + }; return ( <> {isScrolled ? (
-
+
backToHome()} @@ -117,52 +116,75 @@ const Header = (props: Props) => {
) : ( -
-
    - {menuItems.map((item) => ( -
  • jumpToSection(item.id)} - > -

    - {item.name} -

    -
    • - ))} -
+ <> +
+ + + {currentLanguage} + +
+
    + {languages.map((lng, index) => ( + <> +
  • changeLanguage(lng)} + > + {locales[lng as keyof typeof locales]} +
    +
    • + + ))} +
+
+
+
    + {menuItems.map((item) => ( +
  • jumpToSection(item.id)} + > +

    + {item.name} +

    +
    • + ))} +
-
- - +
+ + +
-
+ ) } { // Mobile menu isMobile && isOpenMenu ? ( -
-
-
    - {menuItems.map((item) => ( +
    +
    +
      + {menuItems.map((item, index) => (
    • jumpToSection(item.id)} > -

      +

      {item.name}

      • @@ -171,15 +193,38 @@ const Header = (props: Props) => { className="inline-block" onClick={() => openLocalPdf()} > -

      +

      Whitepaper

    • -

      +

      Audit

      • +
      +
      + + + {currentLanguage} + +
      + {/*
      */} +
        + {languages.map((lng, index) => ( + <> +
      • changeLanguage(lng)} + > + {locales[lng as keyof typeof locales]} +
        +
        • + + ))} +
      +
    @@ -202,28 +247,33 @@ const Header = (props: Props) => { SGPT
-
- - {currentLanguage} -
-
    - {languages.map((lng)=>( - <> -
  • changeLanguage(lng)}> - {locales[lng as keyof typeof locales]} -
    -
    • - - - ))} -
-
+
+ + + {currentLanguage} + +
+
    + {languages.map((lng, index) => ( + <> +
  • changeLanguage(lng)} + > + {locales[lng as keyof typeof locales]} +
    +
    • + + ))} +
+
    - {menuItems.map((item) => ( + {menuItems.map((item, index) => (
  • jumpToSection(item.id)} >

    diff --git a/src/shared/components/animated/QnASection.css b/src/shared/components/animated/QnASection.css index dfa07e7..3c9f2c3 100644 --- a/src/shared/components/animated/QnASection.css +++ b/src/shared/components/animated/QnASection.css @@ -7,13 +7,11 @@ transform: rotate(180deg); } -.listItem__QnA{ +.listItem__QnA { max-height: 0; overflow: hidden; - transition: all 1.5s ease; + transition: all 1.5s ease-in-out; } -.listItem__QnA-active{ - max-height: 100vh; +.listItem__QnA-active { + max-height: 150vh; } - - diff --git a/src/shared/components/animated/RoadmadAnimation.tsx b/src/shared/components/animated/RoadmadAnimation.tsx new file mode 100644 index 0000000..5c0e2a8 --- /dev/null +++ b/src/shared/components/animated/RoadmadAnimation.tsx @@ -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); diff --git a/src/shared/components/animated/TypingText.tsx b/src/shared/components/animated/TypingText.tsx index d2a5275..1566ee0 100644 --- a/src/shared/components/animated/TypingText.tsx +++ b/src/shared/components/animated/TypingText.tsx @@ -18,11 +18,11 @@ const TypingText = ({ children, ...props }: Props) => { const timeoutId = setTimeout(() => { setTypedText(text.slice(0, typedText.length + 1)); - }, 70); + }, 50); return () => clearTimeout(timeoutId); }, [text, typedText]); - return

    {typedText}

    ; + return {typedText}; }; export default TypingText; diff --git a/src/shared/components/home/AboutSection.tsx b/src/shared/components/home/AboutSection.tsx index 62a0381..4ff9697 100644 --- a/src/shared/components/home/AboutSection.tsx +++ b/src/shared/components/home/AboutSection.tsx @@ -1,4 +1,6 @@ import React, { useState, useEffect } from "react"; +import { useTranslation } from "react-i18next"; + import aboutImage from "../../../assets/images/robot32.png"; import VideoSGPT from "../../../assets/sgpt.mp4"; import MysteriousText from "../animated/MysteriousText"; @@ -6,13 +8,15 @@ import TypingText from "../animated/TypingText"; type Props = {}; const AboutSection = (props: Props) => { + const { t } = useTranslation("aboutSection"); + const copyToClipboard = (address: string) => { navigator.clipboard.writeText(address); }; return (
    {

    - What is SGPT? + {t("title1")}

    - {/*
    -

    {typedText}

    -
    */}

    - - 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. - - {/* - */} + {t("content1")}

    - SGPT Solution + {t("title2")}

    {/*

    {typedText}

    */} - - 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. - + {t("content2")} {/* */} diff --git a/src/shared/components/home/FirstSection.tsx b/src/shared/components/home/FirstSection.tsx index aa34e66..0f04eca 100644 --- a/src/shared/components/home/FirstSection.tsx +++ b/src/shared/components/home/FirstSection.tsx @@ -52,7 +52,7 @@ const socials = [ ]; const FirstSection = () => { - const {t} = useTranslation('firstSection') + const { t } = useTranslation("firstSection"); const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844"; const truncateAddress = (address: string) => { return address.slice(0, 5) + "......" + address.slice(-5); @@ -91,19 +91,17 @@ const FirstSection = () => {

    - {t('title')} + {t("title")} {/* A digital currency payment for chat bot services */}

    -

    - {t('content')} -

    +

    {t("content")}

    - {t('addressBSC')} + {t("addressBSC")}

    @@ -119,11 +117,11 @@ const FirstSection = () => {
    -
    -
    +
    +

    - {t('Community')} + {t("joinOur")}

    diff --git a/src/shared/components/home/QnASection.tsx b/src/shared/components/home/QnASection.tsx index 5d98af4..e2f788d 100644 --- a/src/shared/components/home/QnASection.tsx +++ b/src/shared/components/home/QnASection.tsx @@ -1,5 +1,7 @@ import { useSpring, animated } from "@react-spring/web"; import React, { useEffect, useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; + import { VscArrowDown, VscChevronDown, @@ -13,8 +15,7 @@ const QnASection = (props: Props) => { const listQnA = [ { id: 1, - title: - "What is Fight Out?", + title: "What is Fight Out?", bgcolor: "bg-[#CC99FF]", contents: [ { @@ -128,6 +129,8 @@ const QnASection = (props: Props) => { ], }, ]; + const { t } = useTranslation("qna"); + const [qnaData, setQnaData] = useState([]); const showListItem = (id: string, iconDropDown: string) => { const iconDropDownid = document.getElementById(`${iconDropDown}`); // const ulhidden = document.querySelector(`#${id} ul`); @@ -142,6 +145,7 @@ const QnASection = (props: Props) => { const [isVisible, setIsVisible] = useState(false); useEffect(() => { + setQnaData(t("data", { returnObjects: true })); const section = document.querySelector("#qna"); const observer = new IntersectionObserver( ([entry]) => { @@ -158,7 +162,7 @@ const QnASection = (props: Props) => { return () => { observer.unobserve(section); }; - }, []); + }, [t]); useEffect(() => { console.log("isVisible", isVisible); @@ -194,50 +198,44 @@ const QnASection = (props: Props) => {
      - {listQnA.map((item, index) => { + {qnaData.map((item: any, index: any) => { return (
    • showListItem("title" + item.id, index + item.title) } > -
      -
      + {/*
      - + >
      */} + {item.title} -
      +
      -
        - {item.contents.map((list, index) => { +
          + {item.contents.map((list: any, index: any) => { return (
        • -
          - + {list.content}
          • diff --git a/src/shared/components/home/RoadMap.tsx b/src/shared/components/home/RoadMap.tsx index 39dc876..08a82ef 100644 --- a/src/shared/components/home/RoadMap.tsx +++ b/src/shared/components/home/RoadMap.tsx @@ -1,6 +1,8 @@ import { useSpring, animated } from "@react-spring/web"; import React, { useEffect, useRef, useState } from "react"; import { VscDebugBreakpointLog } from "react-icons/vsc"; +import { useTranslation } from "react-i18next"; + type Props = {}; const roadMapData = [ @@ -63,8 +65,11 @@ const roadMapData = [ const RoadMap = (props: Props) => { const [isVisible, setIsVisible] = useState(false); + const { t } = useTranslation("roadmap"); + const [roadMapData, setRoadmapData] = useState([]); useEffect(() => { + setRoadmapData(t("array", { returnObjects: true })); const section = document.getElementById("roadmap"); const observer = new IntersectionObserver( ([entry]) => { @@ -81,7 +86,7 @@ const RoadMap = (props: Props) => { return () => { observer.unobserve(section); }; - }, []); + }, [t]); useEffect(() => { console.log("isVisible", isVisible); @@ -104,19 +109,19 @@ const RoadMap = (props: Props) => { return (
          -

          +

          Road Map

          {/*
          */} - {roadMapData.map((item, index) => { + {roadMapData.map((item: any, index: any) => { return (
          { {item.phase}
            - {item.listTitle.map((listItem, index) => { + {item.listTitle.map((listItem: any, index: any) => { return (
          1. { }, }); - const plugins = { id: "textCenter", datalabels: {}, - }; const [userData, setUserData] = useState({ labels: tokenomics.map((data) => data.name), @@ -134,7 +132,7 @@ const TokenomicsSection = (props: Props) => { font: { weight: "bold", }, - anchor: "center", + anchor: "center", rotation: function (ctx: any) { const valuesBefore = ctx.dataset.data .slice(0, ctx.dataIndex) @@ -166,8 +164,8 @@ const TokenomicsSection = (props: Props) => { }, datalabels: { font: { - - size: window.innerWidth > 1024 ? 20 : window.innerWidth > 768 ? 16 : 10, + size: + window.innerWidth > 1024 ? 20 : window.innerWidth > 768 ? 16 : 10, }, color: "#fff", formatter: (context: any, agrs: any) => { @@ -186,16 +184,16 @@ const TokenomicsSection = (props: Props) => { }; ChartJS.register(ChartDataLabels); return ( -
            +
            -

            +

            Tokenomics

            -//
            -//
            -//
            -// {index + 1} -// {/* */} -//
            -//
            -//

            {item.phase}

            -//
              -// {item.listTitle.map((listItem, index) => { -// return ( -//
            1. -// -//

              {listItem}

              -//
              2. -// ); -// })} -//
            -//
            -//
            -//
            -//
            - -// --> -// -// - -// -// 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 ( -//
            -//
            -//

            -// Tokenomics -//

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

              -// {item.title} -//

              -//

              {item.description}

              -//               -// ); -// })} -//
            -//
            */} -//
            -//
            -//
            -// ); -// }; - -// 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 ( -// //
            -// //
            -// //

            -// // FAQS -// //

            -// //

            -// // 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! */} -// //

            -// //
            - -// // -// //
              -// // {listQnA.map((item, index) => { -// // return ( -// //
            • -// //
              -// //
              -// // -// // {item.title} -// // -// //
              -// // showListItem("title" + item.id, index + item.title) -// // } -// // > -// // -// //
              -// //
              -// //
                -// // {item.contents.map((list, index) => { -// // return ( -// //
              • -// //
                -// // -// // {list.content} -// // -// //
                • -// // ); -// // })} -// //
              -// //
              • -// // ); -// // })} -// //
            -// //             -// //
            -// // ); -// // }; - -// // export default QnASection;