fix: change ui sgpt healthcare

main
dothuong 1 year ago
parent bdbb716e6a
commit 91ce5fc70c
  1. 9
      public/images/line1.svg
  2. 3
      public/images/line2.svg
  3. 10
      public/images/line3.svg
  4. 3
      public/images/line4.svg
  5. BIN
      src/assets/images/JoinsCoM1.png
  6. BIN
      src/assets/images/JoinsCoM2.png
  7. BIN
      src/assets/images/JoinsCoM3.png
  8. BIN
      src/assets/images/JoinsCoM4.png
  9. BIN
      src/assets/images/JoinsCoM5.png
  10. BIN
      src/assets/images/buildforgrowth.png
  11. BIN
      src/assets/images/howitword.png
  12. BIN
      src/assets/images/logoGoogle.png
  13. BIN
      src/assets/images/logoMicrosoft.png
  14. BIN
      src/assets/images/vector.png
  15. 50
      src/i18n/en/healthCare/approachSection.json
  16. 35
      src/i18n/en/healthCare/buildForGrowthSection.json
  17. 7
      src/i18n/en/healthCare/customerInsight.json
  18. 8
      src/i18n/en/healthCare/firstSection.json
  19. 3
      src/i18n/en/healthCare/howItWorksSection.json
  20. 9
      src/i18n/en/healthCare/joinACommunityOfMillions.json
  21. 26
      src/i18n/en/healthCare/massAdoptionSection.json
  22. 23
      src/i18n/en/healthCare/problemsSection.json
  23. 25
      src/i18n/en/healthCare/secondSection.json
  24. 22
      src/i18n/en/healthCare/solutionsOfProduct​.json
  25. 4
      src/i18n/en/home/firstSection.json
  26. 36
      src/i18n/i18n.ts
  27. 50
      src/i18n/vi/healthCare/approachSection.json
  28. 35
      src/i18n/vi/healthCare/buildForGrowthSection.json
  29. 7
      src/i18n/vi/healthCare/customerInsight.json
  30. 7
      src/i18n/vi/healthCare/firstSection.json
  31. 3
      src/i18n/vi/healthCare/howItWorksSection.json
  32. 9
      src/i18n/vi/healthCare/joinACommunityOfMillions.json
  33. 26
      src/i18n/vi/healthCare/massAdoptionSection.json
  34. 23
      src/i18n/vi/healthCare/problemsSection.json
  35. 25
      src/i18n/vi/healthCare/secondSection.json
  36. 22
      src/i18n/vi/healthCare/solutionsOfProduct​.json
  37. 27
      src/pages/SGPTProducts/Healthcare.tsx
  38. 2
      src/shared/components/Header.tsx
  39. 6
      src/shared/components/css/ApproachSection.css
  40. 46
      src/shared/components/css/Competitions.css
  41. 8
      src/shared/components/css/TokenomicsSection.css
  42. 111
      src/shared/components/healthcare/ApproachSection.tsx
  43. 87
      src/shared/components/healthcare/BuildForGrowth.tsx
  44. 45
      src/shared/components/healthcare/Competitions.tsx
  45. 87
      src/shared/components/healthcare/CustomerInsight.tsx
  46. 45
      src/shared/components/healthcare/FirstSection.tsx
  47. 34
      src/shared/components/healthcare/HowItWorksSection.tsx
  48. 72
      src/shared/components/healthcare/JoinACommunityOfMillions.tsx
  49. 107
      src/shared/components/healthcare/MassAdoption​Section.tsx
  50. 109
      src/shared/components/healthcare/ProblemsSection.tsx
  51. 56
      src/shared/components/healthcare/SecondSection.tsx
  52. 128
      src/shared/components/healthcare/SolutionsOfProduct​.tsx
  53. 2
      src/shared/components/home/FirstSection.tsx
  54. 116
      src/shared/components/home/QnASection.tsx
  55. 133
      src/shared/components/home/TokenomicsSection.tsx

@ -0,0 +1,9 @@
<svg width="4" height="30" viewBox="0 0 4 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2.6532L2 27.3467" stroke="url(#paint0_linear_87_31)" stroke-width="4" stroke-linecap="round"/>
<defs>
<linearGradient id="paint0_linear_87_31" x1="-0.178571" y1="0.653198" x2="-26.6338" y2="8.13548" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFB55E"/>
<stop offset="1" stop-color="#40E9AC"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 439 B

@ -0,0 +1,3 @@
<svg width="4" height="30" viewBox="0 0 4 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2.65326L2 27.3468" stroke="#8000FF" stroke-width="4" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 191 B

@ -0,0 +1,10 @@
<svg width="4" height="30" viewBox="0 0 4 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2.6532L2 27.3467" stroke="url(#paint0_linear_87_63)" stroke-width="4" stroke-linecap="round"/>
<defs>
<linearGradient id="paint0_linear_87_63" x1="1.82143" y1="2.6532" x2="-10.6785" y2="16.8269" gradientUnits="userSpaceOnUse">
<stop stop-color="#DF30FD"/>
<stop offset="0.807292" stop-color="#0DEBF9"/>
<stop offset="1" stop-color="#40E9CB"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 482 B

@ -0,0 +1,3 @@
<svg width="4" height="30" viewBox="0 0 4 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2.65326L2 27.3468" stroke="#4DB20E" stroke-width="4" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 191 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 918 KiB

@ -1,50 +0,0 @@
{
"data": [
{
"id": 1,
"title": "Step 1",
"contents": [
{
"content": "Build MVP version of product that provides a free chatbot service on diseases for users."
},
{
"content": "Attract a large number of users to experience the best features of the product."
},
{
"content": "Become an application that users use before they use Google."
}
]
},
{
"id": 2,
"title": "Step 2",
"contents": [
{
"content": "Add more accurate and reliable data sources."
},
{
"content": "For each answer, additional questions will be asked to encourage users to provide more information."
},
{
"content": "Enhance the ability to synthesize disease information from conversation history with users."
}
]
},
{
"id": 3,
"title": "Step 3",
"contents": [
{
"content": "Refine the product based on user feedback."
},
{
"content": "Provide additional valuable services such as:",
"navcontent": [
"Suggesting reputable clinics to users.",
"Booking medical appointments."
]
}
]
}
]
}

@ -0,0 +1,35 @@
{
"title": "Build for growth",
"array": [
{
"button": "Gaming",
"title": "Lorem ipsum1",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem",
"link": "https://sgpt-ai.org/"
},
{
"button": "Lorem",
"title": "Lorem ipsum2",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem",
"link": "https://sgpt-ai.org/"
},
{
"button": "Ipsum",
"title": "Lorem ipsum3",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem",
"link": "https://sgpt-ai.org/"
},
{
"button": "Dolor sit",
"title": "Lorem ipsum4",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem",
"link": "https://sgpt-ai.org/"
},
{
"button": "Amet",
"title": "Lorem ipsum5",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem",
"link": "https://sgpt-ai.org/"
}
]
}

@ -1,7 +0,0 @@
{
"title": "Customer Insight",
"content1": "Users need a reliable and easy-to-understand source of information.",
"content2": "Users dislike having to synthesize complex information after conducting searches.",
"content3": "Users prefer to search for information about illnesses as a reference before seeing a doctor.",
"content4": "People with mental health issues tend to prefer texting about their problems."
}

@ -1,3 +1,9 @@
{
"title": "SGPT for Healthcare"
"title1": "A",
"title2": "digital currency payment",
"title3": "for chat bot services",
"content": "The SGPT Token is a digital currency designed to facilitate payments for services provided by the SGPT chat bot. The chat bot is a powerful tool that utilizes artificial intelligence to communicate with users and provide valuable information and services.",
"button1": "Adress on BSC",
"button2": "How it works"
}

@ -0,0 +1,3 @@
{
"heading": "How it works"
}

@ -0,0 +1,9 @@
{
"heading": "Join a community of millions",
"number1": "11,000",
"content1": "Lorem ipsum dolor sit",
"number2": "11,000",
"content2": "Lorem ipsum dolor sit",
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio",
"button": "Button name"
}

@ -0,0 +1,26 @@
{
"heading": "Made for mass adoption",
"title1": "Fast",
"content1_1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac blandit elit. Sed eu tincidunt sem. Mauris iaculis posuere lorem a venenatis. Pellentesque hendrerit facilisis ante eget tempus",
"content1_2": "4,824",
"content1_3": "TRANSACTIONS PER SECOND",
"line1": "/images/line1.svg",
"title2": "Fast",
"content2_1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac blandit elit. Sed eu tincidunt sem. Mauris iaculis posuere lorem a venenatis. Pellentesque hendrerit facilisis ante eget tempus",
"content2_2": "4,824",
"content2_3": "TRANSACTIONS PER SECOND",
"line2": "/images/line2.svg",
"title3": "Fast",
"content3_1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac blandit elit. Sed eu tincidunt sem. Mauris iaculis posuere lorem a venenatis. Pellentesque hendrerit facilisis ante eget tempus",
"content3_2": "4,824",
"content3_3": "TRANSACTIONS PER SECOND",
"line3": "/images/line3.svg",
"title4": "Fast",
"content4_1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac blandit elit. Sed eu tincidunt sem. Mauris iaculis posuere lorem a venenatis. Pellentesque hendrerit facilisis ante eget tempus",
"content4_2": "4,824",
"content4_3": "TRANSACTIONS PER SECOND",
"line4": "/images/line4.svg"
}

@ -1,23 +0,0 @@
{
"title": "The Problems",
"data": [
{
"id": 1,
"src": "images/image19.png",
"title": "User behavior",
"content": "Satisfying the habit of searching for any unusual signs related to the user's health"
},
{
"id": 2,
"src": "images/image20.png",
"title": "User Information",
"content": "Providing accurate and easy-to-understand information for users"
},
{
"id": 3,
"src": "images/image21.png",
"title": "Interaction",
"content": "Providing a good user experience with high interactivity, encourage users to provide more valuable information about their illness"
}
]
}

@ -0,0 +1,25 @@
{
"title": "Join a community of millions",
"data": [
{
"id": 1,
"title": "50K",
"content": "Protocols"
},
{
"id": 2,
"title": "43K",
"content": "Requested processed"
},
{
"id": 3,
"title": "38K",
"content": "Service uptime"
},
{
"id": 4,
"title": "34K",
"content": "Community members"
}
]
}

@ -1,22 +0,0 @@
{
"data1": {
"title": "DATA",
"contents": {
"content1": "Reliable and authoritative data sources.",
"content2": "The data is certified by hospitals and specialist doctors."
}
},
"data2": {
"title": "TECHNOLOGY",
"contents": {
"content1": "The development and research team has extensive experience in developing products in the healthcare industry."
}
},
"data3": {
"title": "CUSTOMIZATION",
"contents": {
"content1": "The server is designed to handle large amounts of data and has high scalabilit.",
"content2": "The system is highly customizable and adaptable to each business and hospital."
}
}
}

@ -2,6 +2,6 @@
"title": "A digital currency payment for chat bot services",
"content": "The SGPT Token is a digital currency designed to facilitate payments for services provided by the SGPT chat bot. The chat bot is a powerful tool that utilizes artificial intelligence to communicate with users and provide valuable information and services.",
"addressBSC": "Address on BSC",
"address": "0x3c97331438e90680a17c35905ffc2b8ef760f844",
"address": "0xdB66FC64263F86744985A9D0d64dca1A4FfDe038",
"joinOur": "Join Our Community"
}
}

@ -11,15 +11,17 @@ 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 SecondSection_healthCare_EN from "./en/healthCare/secondSection.json";
import FirstSection_healthCare_VI from "./vi/healthCare/firstSection.json";
import ProblemsSection_healthCare_VI from "./vi/healthCare/problemsSection.json";
import CustomerInsight_healthCare_EN from "./en/healthCare/customerInsight.json";
import CustomerInsight_healthCare_VI from "./vi/healthCare/customerInsight.json";
import ApproachSection_healthCare_EN from "./en/healthCare/approachSection.json";
import ApproachSection_healthCare_VI from "./vi/healthCare/approachSection.json";
import SolutionsOfProduct_healthCare_EN from "./en/healthCare/solutionsOfProduct.json";
import SolutionsOfProduct_healthCare_VI from "./vi/healthCare/solutionsOfProduct.json";
import SecondSection_healthCare_VI from "./vi/healthCare/secondSection.json";
import MassAdoptionSection_healthCare_EN from "./en/healthCare/massAdoptionSection.json";
import MassAdoptionSection_healthCare_VI from "./vi/healthCare/massAdoptionSection.json";
import HowItWorksSection_healthCare_EN from "./en/healthCare/howItWorksSection.json";
import HowItWorksSection_healthCare_VI from "./vi/healthCare/howItWorksSection.json";
import JoinACommunityOfMillions_healthCare_EN from "./en/healthCare/JoinACommunityOfMillions.json";
import JoinACommunityOfMillions_healthCare_VI from "./vi/healthCare/JoinACommunityOfMillions.json";
import BuildForGrowthSection_healthCare_EN from "./en/healthCare/buildForGrowthSection.json";
import BuildForGrowthSection_healthCare_VI from "./vi/healthCare/buildForGrowthSection.json";
export const locales = {
en: "English",
@ -33,10 +35,11 @@ export const resources = {
qnaHome: QnA_home_EN,
tokenomicHome: TokenomicsSection_home_EN,
firstSectionHealthCare: FirstSection_healthCare_EN,
problemsSectionHealthCare: ProblemsSection_healthCare_EN,
customerInsightHealthCare: CustomerInsight_healthCare_EN,
approachSectionHealthCare: ApproachSection_healthCare_EN,
solutionsOfProductHealthCare: SolutionsOfProduct_healthCare_EN,
secondSectionHealthCare: SecondSection_healthCare_EN,
massAdoptionInsightHealthCare: MassAdoptionSection_healthCare_EN,
howItWorksSectionHealthCare: HowItWorksSection_healthCare_EN,
joinACommunityOfMillionsHealthCare: JoinACommunityOfMillions_healthCare_EN,
buildForGrowthSectionHealthCare: BuildForGrowthSection_healthCare_EN,
},
vi: {
firstSectionHome: FirstSection_home_VI,
@ -45,10 +48,11 @@ export const resources = {
qnaHome: QnA_home_VI,
tokenomicHome: TokenomicsSection_home_VI,
firstSectionHealthCare: FirstSection_healthCare_VI,
problemsSectionHealthCare: ProblemsSection_healthCare_VI,
customerInsightHealthCare: CustomerInsight_healthCare_VI,
approachSectionHealthCare: ApproachSection_healthCare_VI,
solutionsOfProductHealthCare: SolutionsOfProduct_healthCare_VI,
secondSectionHealthCare: SecondSection_healthCare_VI,
massAdoptionInsightHealthCare: MassAdoptionSection_healthCare_VI,
howItWorksSectionHealthCare: HowItWorksSection_healthCare_VI,
joinACommunityOfMillionsHealthCare: JoinACommunityOfMillions_healthCare_VI,
buildForGrowthSectionHealthCare: BuildForGrowthSection_healthCare_VI,
},
};
i18n.use(initReactI18next).init({

@ -1,50 +0,0 @@
{
"data": [
{
"id": 1,
"title": "Giai đoạn 1",
"contents": [
{
"content": "Xây dựng phiên bản sản phẩm MVP cung cấp dịch vụ chatbot miễn phí về bệnh tật cho người dùng."
},
{
"content": "Thu hút một lượng lớn người dùng để trải nghiệm những tính năng tốt nhất của sản phẩm."
},
{
"content": "Trở thành một ứng dụng mà người dùng sử dụng trước khi họ sử dụng Google."
}
]
},
{
"id": 2,
"title": "Giai đoạn 2",
"contents": [
{
"content": "Bổ sung thêm nguồn dữ liệu chính xác và đáng tin cậy."
},
{
"content": "Đối với mỗi câu trả lời, các câu hỏi bổ sung sẽ được đặt ra để khuyến khích người dùng cung cấp thêm thông tin."
},
{
"content": "Nâng cao khả năng tổng hợp thông tin bệnh từ lịch sử hội thoại với người dùng."
}
]
},
{
"id": 3,
"title": "Giai đoạn 3",
"contents": [
{
"content": "Tinh chỉnh sản phẩm dựa trên phản hồi của người dùng."
},
{
"content": "Cung cấp các dịch vụ có giá trị bổ sung như:",
"navcontent": [
"Gợi ý phòng khám uy tín cho người dùng.",
"Đặt lịch hẹn y tế."
]
}
]
}
]
}

@ -0,0 +1,35 @@
{
"title": "Xây dựng cho sự phát triển",
"array": [
{
"button": "Gaming",
"title": "Lorem ipsum",
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.",
"link": "https://sgpt-ai.org/"
},
{
"button": "Lorem",
"title": "Lorem ipsum1",
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.",
"link": "https://sgpt-ai.org/"
},
{
"button": "Ipsum",
"title": "Lorem ipsum2",
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.",
"link": "https://sgpt-ai.org/"
},
{
"button": "Dolor sit3",
"title": "Lorem ipsum",
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.",
"link": "https://sgpt-ai.org/"
},
{
"button": "Amet",
"title": "Lorem ipsum",
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.",
"link": "https://sgpt-ai.org/"
}
]
}

@ -1,7 +0,0 @@
{
"title": "Thông tin chi tiết về khách hàng",
"content1": "Người dùng cần một nguồn thông tin đáng tin cậy và dễ hiểu.",
"content2": "Người dùng không thích phải tổng hợp thông tin phức tạp sau khi tiến hành tìm kiếm.",
"content3": "Người dùng thích tìm kiếm thông tin về bệnh tật để tham khảo trước khi gặp bác sĩ.",
"content4": "Những người có vấn đề về sức khỏe tâm thần có xu hướng thích nhắn tin về các vấn đề của họ hơn."
}

@ -1,3 +1,8 @@
{
"title": "SGPT for Healthcare"
"title1": "",
"title2": "Thanh toán bằng tiền tệ số hóa",
"title3": "cho dịch vụ trợ lý ảo",
"content": "Token SGPT là một loại tiền tệ số hóa được thiết kế để hỗ trợ thanh toán cho các dịch vụ được cung cấp bởi trợ lý ảo SGPT. Trợ lý ảo này là một công cụ mạnh mẽ sử dụng trí tuệ nhân tạo để giao tiếp với người dùng và cung cấp thông tin và dịch vụ có giá trị.",
"button1": "Địa chỉ trên BSC",
"button2": "Cách hoạt động"
}

@ -0,0 +1,3 @@
{
"heading": "Cách hoạt động"
}

@ -0,0 +1,9 @@
{
"heading": "Tham gia cộng đồng hàng triệu người",
"number1": "11.000",
"content1": "Lorem ipsum dolor sit",
"number2": "11.000",
"content2": "Lorem ipsum dolor sit",
"title": "Khách hàng rất quan trọng, khách hàng sẽ được khách hàng theo đuổi. Sân khấu rộn tiếng cười nhưng tiền sảnh bị ghét",
"button": "Tên nút"
}

@ -0,0 +1,26 @@
{
"heading": "Dành cho sự tiếp nhận rộng rãi",
"title1": "Nhanh",
"content1_1": "Token SGPT được thiết kế với mục tiêu tối ưu hóa tốc độ giao dịch và khả năng xử lý. Sử dụng công nghệ tiên tiến, Token SGPT cho phép thực hiện các giao dịch một cách nhanh chóng và hiệu quả. Điều này đảm bảo rằng việc thanh toán và sử dụng dịch vụ của trợ lý ảo SGPT diễn ra một cách trôi chảy và thuận tiện cho người dùng.",
"content1_2": "4.824",
"content1_3": "GIAO DỊCH MỖI GIÂY",
"line1": "/images/line1.svg",
"title2": "Nhanh",
"content2_1": "Token SGPT được thiết kế với mục tiêu tối ưu hóa tốc độ giao dịch và khả năng xử lý. Sử dụng công nghệ tiên tiến, Token SGPT cho phép thực hiện các giao dịch một cách nhanh chóng và hiệu quả. Điều này đảm bảo rằng việc thanh toán và sử dụng dịch vụ của trợ lý ảo SGPT diễn ra một cách trôi chảy và thuận tiện cho người dùng.",
"content2_2": "4.824",
"content2_3": "GIAO DỊCH MỖI GIÂY",
"line2": "/images/line2.svg",
"title3": "Nhanh",
"content3_1": "Token SGPT được thiết kế với mục tiêu tối ưu hóa tốc độ giao dịch và khả năng xử lý. Sử dụng công nghệ tiên tiến, Token SGPT cho phép thực hiện các giao dịch một cách nhanh chóng và hiệu quả. Điều này đảm bảo rằng việc thanh toán và sử dụng dịch vụ của trợ lý ảo SGPT diễn ra một cách trôi chảy và thuận tiện cho người dùng.",
"content3_2": "4.824",
"content3_3": "GIAO DỊCH MỖI GIÂY",
"line3": "/images/line3.svg",
"title4": "Nhanh",
"content4_1": "Token SGPT được thiết kế với mục tiêu tối ưu hóa tốc độ giao dịch và khả năng xử lý. Sử dụng công nghệ tiên tiến, Token SGPT cho phép thực hiện các giao dịch một cách nhanh chóng và hiệu quả. Điều này đảm bảo rằng việc thanh toán và sử dụng dịch vụ của trợ lý ảo SGPT diễn ra một cách trôi chảy và thuận tiện cho người dùng.",
"content4_2": "4.824",
"content4_3": "GIAO DỊCH MỖI GIÂY",
"line4": "/images/line4.svg"
}

@ -1,23 +0,0 @@
{
"title": "Các vấn đề",
"data": [
{
"id": 1,
"src": "images/image19.png",
"title": "Hành vi người dùng",
"content": "Thỏa mãn thói quen tìm kiếm mọi dấu hiệu bất thường liên quan đến sức khỏe của người dùng"
},
{
"id": 2,
"src": "images/image20.png",
"title": "Thông tin người dùng",
"content": "Cung cấp thông tin chính xác, dễ hiểu cho người dùng"
},
{
"id": 3,
"src": "images/image21.png",
"title": "Sự tương tác",
"content": "Mang lại trải nghiệm tốt cho người dùng với tính tương tác cao, khuyến khích người dùng cung cấp thêm thông tin giá trị về bệnh tật của họ"
}
]
}

@ -0,0 +1,25 @@
{
"title": "Join a community of millions",
"data": [
{
"id": 1,
"title": "50K",
"content": "Giao thức"
},
{
"id": 2,
"title": "43K",
"content": "Yêu cầu đã được xử lý"
},
{
"id": 3,
"title": "38K",
"content": "Thời gian hoạt động của dịch vụ"
},
{
"id": 4,
"title": "34K",
"content": "Các thành viên trong cộng đồng"
}
]
}

@ -1,22 +0,0 @@
{
"data1": {
"title": "Dữ liệu",
"contents": {
"content1": "Nguồn dữ liệu đáng tin cậy và có thẩm quyền..",
"content2": "Số liệu được xác nhận bởi các bệnh viện và bác sĩ chuyên khoa."
}
},
"data2": {
"title": "CÔNG NGHỆ",
"contents": {
"content1": "Nhóm nghiên cứu và phát triển có nhiều kinh nghiệm trong việc phát triển các sản phẩm trong ngành chăm sóc sức khỏe."
}
},
"data3": {
"title": "TÙY CHỈNH",
"contents": {
"content1": "Máy chủ được thiết kế để xử lý lượng dữ liệu lớn và có khả năng mở rộng cao.",
"content2": "Hệ thống có khả năng tùy biến cao và thích ứng với từng doanh nghiệp, bệnh viện."
}
}
}

@ -1,22 +1,27 @@
import BackToTopButton from "../../shared/components/backtotop";
import Approach from "../../shared/components/healthcare/ApproachSection";
import Competitions from "../../shared/components/healthcare/Competitions";
import CustomerInsight from "../../shared/components/healthcare/CustomerInsight";
import Approach from "../../shared/components/healthcare/HowItWorksSection";
import Competitions from "../../shared/components/healthcare/BuildForGrowth";
import CustomerInsight from "../../shared/components/healthcare/MassAdoptionSection";
import FirstSection from "../../shared/components/healthcare/FirstSection";
import ProblemsSection from "../../shared/components/healthcare/ProblemsSection";
import SolutionsOfProduct from "../../shared/components/healthcare/SolutionsOfProduct";
import SectionSection from "../../shared/components/healthcare/SecondSection";
import ProblemsSection from "../../shared/components/healthcare/SecondSection";
import SolutionsOfProduct from "../../shared/components/healthcare/JoinACommunityOfMillions";
import MassAdoptionSection from "../../shared/components/healthcare/MassAdoptionSection";
import HowItWorksSection from "../../shared/components/healthcare/HowItWorksSection";
import BuildForGrowth from "../../shared/components/healthcare/BuildForGrowth";
import JoinACommunityOfMillions from "../../shared/components/healthcare/JoinACommunityOfMillions";
type Props = {};
const Healthcare = (props: Props) => {
return (
<div className="flex flex-col gap-4 bg-white ">
<div className="flex flex-col">
<FirstSection />
<ProblemsSection />
<CustomerInsight />
<Approach />
<SolutionsOfProduct />
<Competitions />
<SectionSection />
<MassAdoptionSection />
<HowItWorksSection/>
<BuildForGrowth />
<JoinACommunityOfMillions />
<BackToTopButton />
</div>
);

@ -165,7 +165,7 @@ const Header = (props: Props) => {
))}
</ul>
</li>
<div className="flex text-white items-center gap-x-2 cursor-pointer group relative">
<div className="flex text-white items-center gap-x-2 cursor-pointer group relative w-[120px] ">
<MdLanguage className="text-[24px]" />
<span className="group-hover:text-orange-400">
{currentLanguage}

@ -0,0 +1,6 @@
.border-gradient {
border-right: 2px solid transparent; /* Đặt border ban đầu thành trong suốt */
border-image: linear-gradient(120deg, #ffb55e 0%, #40e9ac 100%);
border-image-slice: 1; /* Hiển thị toàn bộ border gradient */
border-radius: 0.375rem;
}

@ -0,0 +1,46 @@
@keyframes marquee {
0% {
left: 0;
}
100% {
left: -900%;
}
}
.animate {
width: 1800%;
animation: marquee 20s linear infinite;
top: 50%;
transform: translate(0, -50%);
}
.logo img {
width: 80px;
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
@screen lg {
@keyframes marquee {
0% {
left: 0;
}
100% {
left: -375%;
}
}
.animate {
width: 750%;
animation: marquee 20s linear infinite;
top: 50%;
transform: translate(0, -50%);
}
.logo a {
width: 100px;
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
}
.animate:hover {
animation-play-state: paused;
}
.logo a:hover {
transform: scale(1.3);
}

@ -0,0 +1,8 @@
.chartjs-tooltip {
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid #000;
border-radius: 4px;
padding: 6px 10px;
color: #fff;
font-size: 12px;
}

@ -1,111 +0,0 @@
import React, { useState, useEffect } from "react";
import { HiOutlineUserGroup } from "react-icons/hi";
import { useTranslation } from "react-i18next";
import { TbReportSearch } from "react-icons/tb";
import userBehavior from "../../../assets/images/image19.png";
import userInformation from "../../../assets/images/image20.png";
import userInteraction from "../../../assets/images/image21.png";
// const listApproach = [
// {
// title: "Step 1",
// contents: [
// {
// content:
// "Build MVP version of product that provides a free chatbot service on diseases for users.",
// },
// {
// content:
// "Attract a large number of users to experience the best features of the product.",
// },
// {
// content:
// "Become an application that users use before they use Google.",
// },
// ],
// },
// {
// title: "Step 2",
// contents: [
// {
// content: "Add more accurate and reliable data sources.",
// },
// {
// content:
// "For each answer, additional questions will be asked to encourage users to provide more information.",
// },
// {
// content:
// "Enhance the ability to synthesize disease information from conversation history with users.",
// },
// ],
// },
// {
// title: "Step 3",
// contents: [
// {
// content: "Refine the product based on user feedback.",
// },
// {
// content: "Provide additional valuable services such as: ",
// navcontent: [
// "Suggesting reputable clinics to users.",
// "Booking medical appointments.",
// ],
// },
// ],
// },
// ];
const Approach = () => {
const { t } = useTranslation("approachSectionHealthCare");
const [appRoachData, setAppRoachData] = useState([]);
useEffect(() => {
setAppRoachData(t("data", { returnObjects: true }));
console.log(appRoachData);
}, [t]);
return (
<div
className="container lg:w-[94%] mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
id="appRoach"
>
<h1 className="text-4xl font-bold text-center pb-20 ">The Approach </h1>
<div className="flex flex-col items-center gap-y-6 md:flex-row md:justify-around md:absolute md:top-[50%] md:translate-y-[-50%]">
{appRoachData.map((item: any) => {
return (
<div
data-aos="zoom-in"
data-aos-duration="500"
className="flex flex-col shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)]
hover:shadow-[0_0px_16px_4px_rgba(0,0,0,0.3)]
transition-all duration-500 group w-[60%] p-4 rounded-lg md:w-[30%] md:min-h-[360px] lg:w-[25%] "
>
<div className=" transition-all duration-500 ease-in-out md flex flex-col gap-y-4">
<p className=" text-2xl text-center" key={item.title}>
{item.title}
</p>
<ul className="">
{item.contents.map((item: any, index: any) => {
return (
<>
<li className="pb-2">
{item.content}
<ul>
{item.navcontent?.map((item: any, index: any) => {
return <li key={item + index}>+ {item}</li>;
})}
</ul>
</li>
</>
);
})}
</ul>
</div>
</div>
);
})}
</div>
</div>
);
};
export default Approach;

@ -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 (
<div id="competitions" className="bg-[#212B30]">
<div className="container w-[100%] mx-auto text-white animate-on-scroll my-20 relative ">
<div className="flex flex-col justify-between gap-6 ">
<div className="flex justify-between">
<h1 className="text-4xl font-bold ">{t("title")}</h1>
<div className="flex items-center w-[55%]">
{competitionsData.map((item: any, index) => (
<div
key={index}
className={
"cursor-pointer " +
(growthBtn === index
? "rounded-lg bg-gradient-to-r from-[#FFB55E] to-[#40E9AC] p-[1px]"
: "rounded-lg p-[1px]")
}
onClick={() => handleSelectedGrowth(item.button, index)}
>
<p className="w-full h-full px-5 bg-[#212B30] py-2 rounded-lg">
{item?.button}
</p>
</div>
))}
</div>
</div>
<div className="flex justify-between ">
<div className="w-[40%]">
<img src={buildofgrowth} alt="" />
</div>
<div className="w-[55%] overflow-hidden">
<div
style={{ transform: `translateX(${growthIndex})` }}
className={`flex w-[500%] transition-all `}
>
{competitionsData.map((item: any, index) => (
<div className="flex flex-col gap-3 w-full">
<h3 className="font-semibold text-2xl">{item.title}</h3>
<span>{item.content}</span>
<div className="text-[#FFB55D] flex gap-6 items-center pt-3 group">
<a className=" underline" href={item.link}>
Lorem ipsum dolor sit amet
</a>
<AiOutlineArrowRight className="group-hover:translate-x-2 transition-all" />
</div>
</div>
))}
</div>
</div>
</div>
<div className=" flex gap-20 justify-around items-center ">
<img src={logoGoogle} alt="" />
<img src={logoMicrosoft} alt="" />
<img src={logoGoogle} alt="" />
<img src={logoMicrosoft} alt="" />
<img src={logoGoogle} alt="" />
<img src={logoMicrosoft} alt="" />
<img src={logoGoogle} alt="" />
</div>
</div>
</div>
</div>
);
};
export default BuildForGrowth;

@ -1,45 +0,0 @@
import React from "react";
const Competitions = () => {
return (
<div
id="competitions"
className="container w-[94%] mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
>
<h1 className="text-4xl font-bold text-center pb-20 ">Competitions</h1>
<div className="w-[330px] h-[220px] md:w-[600px] md:h-[400px] lg:w-[800px] lg:h-[500px] border-l-2 border-b-2 border-black mx-auto relative md:absolute md:top-[50%] md:translate-y-[-50%] md:left-[50%] md:translate-x-[-50%] ">
<div className="absolute top-[-15px] left-[-9px] h-0 w-0 border-x-8 border-x-transparent border-b-[16px] border-black"></div>
<div className="absolute bottom-[-9px] right-[-9px] h-0 w-0 border-y-8 border-y-transparent border-l-[16px] border-black"></div>
<span className="absolute top-[16%] left-[-16%] md:top-[10%] md:left-[-10%] rotate-[-90deg]">
Innovative
</span>
<span className="absolute bottom-[-10%] right-[6%] md:bottom-[-10%] md:right-[10%] ">
Specialization
</span>
<div className="absolute top-0 left-[10%] w-[80px] h-[60px] md:top-0 md:left-[10%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
<span className="text-center text-xs md:text-lg">Google</span>
</div>
<div className="absolute top-[10%] left-[35%] w-[80px] h-[60px] md:top-[10%] md:left-[30%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
<span className="text-center text-xs md:text-lg">ChatGPT</span>
</div>
<div className="absolute top-[15%] right-[10%] w-[80px] h-[60px] md:top-[20%] md:right-[10%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-gradient-to-r from-cyan-400 to-blue-400">
<span className="text-center text-white font-bold text-xs md:text-lg">
Us
</span>
</div>
<div className="absolute bottom-[15%] right-[25%] w-[80px] h-[60px] md:bottom-[15%] md:right-[20%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
<span className="text-center text-xs md:text-lg">
Traditional Chatbot
</span>
</div>
<div className="absolute bottom-[15%] right-[0%] w-[80px] h-[60px] md:bottom-[15%] md:right-[0%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
<span className="text-center text-xs md:text-lg">
Chat Application
</span>
</div>
</div>
</div>
);
};
export default Competitions;

@ -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 (
<div
className="w-full text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg"
id="customerInsight"
>
<h1 className="text-4xl font-bold text-center pb-20 relative">
{t("title")}
</h1>
<div
data-aos="fade-up"
data-aos-easing="ease-out-cubic"
data-aos-duration="500"
className="container w-[94%] mx-auto flex flex-wrap gap-y-10 sm:flex-row sm:items-start justify-around sm:gap-y-4 min-h-[50vh] relative "
>
<div className="hidden md:block absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] border w-[150px] h-[150px] md:w-[200px] md:h-[200px] lg:w-[300px] lg:h-[300px] bg-white rounded-[50%] overflow-hidden">
<div className="absolute top-[0%] left-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px] border-r-[1.5px] border-b-[1.5px] border-slate-400 group ">
<BiSearchAlt className="text-black absolute top-[50%] left-[50%] text-[16px] md:text-[20px] lg:text-[24px] group-hover:text-orange-500 motion-safe:group-hover:scale-110" />
</div>
<div className="absolute top-[0%] right-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px] border-b-[1.5px] border-slate-400 group">
<TbFileDislike className="text-black absolute top-[50%] right-[50%] text-[16px] md:text-[20px] lg:text-[24px] group-hover:text-orange-500 motion-safe:group-hover:scale-110" />
</div>
<div className="absolute bottom-[0%] left-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px] border-r-[1.5px] border-slate-400 group">
<TbFileLike className="text-black absolute bottom-[50%] left-[50%] text-[16px] md:text-[20px] lg:text-[24px] group-hover:text-orange-500 motion-safe:group-hover:scale-110" />
</div>
<div className="absolute bottom-[0%] right-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px] group">
<AiOutlineMessage className="text-black absolute bottom-[50%] right-[50%] text-[16px] md:text-[20px] lg:text-[24px] group-hover:text-orange-500 motion-safe:group-hover:scale-110" />
</div>
<img
className="md:w-[40px] md:h-[40px] lg:w-[75px] lg:h-[75px] absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] z-10 bg-white"
src={customerInsight}
alt=""
/>
</div>
<div className="flex items-center w-[60%] min-h-[150px] sm:w-[45%] rounded-lg p-2 shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] relative md:shadow-none md:absolute md:top-[0%] md:left-[5%] md:w-[35%] ">
<BiSearchAlt className="md:hidden absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] opacity-30 text-6xl " />
<p className="text-black text-[20px] text-center">{t("content1")}</p>
</div>
<div className="flex items-center w-[60%] min-h-[150px] sm:w-[45%] rounded-lg p-2 shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] relative md:shadow-none md:absolute md:top-[0%] md:right-[5%] md:w-[35%]">
<TbFileDislike className="md:hidden absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] opacity-30 text-6xl " />
<p className="text-black text-[20px] text-center">{t("content2")}</p>
</div>
<div className="flex items-center w-[60%] min-h-[150px] sm:w-[45%] rounded-lg p-2 shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] relative md:shadow-none md:absolute md:bottom-[-10%] md:left-[5%] md:w-[35%]">
<TbFileLike className="md:hidden absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] opacity-30 text-6xl " />
<p className="text-black text-[20px] text-center">{t("content3")}</p>
</div>
<div className="flex items-center w-[60%] min-h-[150px] sm:w-[45%] rounded-lg p-2 shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] relative md:shadow-none md:absolute md:bottom-[-10%] md:right-[5%] md:w-[35%]">
<AiOutlineMessage className="md:hidden absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] opacity-30 text-6xl " />
<p className="text-black text-[20px] text-center">{t("content4")}</p>
</div>
</div>
</div>
);
};
export default CustomerInsight;

@ -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 (
<div
id="firstSection"
className=" flex items-center min-h-[100vh] bg-gradient-to-r from-cyan-500 to-blue-500"
className=" flex items-center min-h-[100vh] bg-[#212B30]"
>
<div className="container w-[94%] flex justify-between mx-auto">
<h1 className="text-white text-5xl font-bold">SGPT for Healthcare</h1>
<div className=" lg:h-full lg:w-1/5 hidden lg:flex justify-center items-center relative">
<img
src={robotImage2}
className="object-cover absolute left-30 border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-full aspect-square transition-all duration-500 cursor-pointer filter hover:border-orange-500"
alt="robot-ai"
/>
<img
src={robotImage}
className="object-cover absolute top-36 left-[-20%] border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-40 aspect-square hover:border-orange-500"
alt="robot-ai"
/>
<div className="absolute w-10 aspect-square blur-sm bg-gradient-to-br from-rose-500 to-indigo-700 rounded-full top-32 -left-10"></div>
<div className="absolute w-10 aspect-square bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900 blur-sm rounded-full bottom-56 right-10"></div>
<div className="container w-full flex justify-between mx-auto items-center relative ">
<div className="flex flex-col gap-8 flex-1 text-white z-10 max-w-[700px]">
<h1 className="leading-[56px] text-5xl font-bold ">
{t("title1")}{" "}
<span className="bg-gradient-to-r from-[#FFB55E] to-[#0DEBF9] via-[#40E9CB] bg-clip-text text-transparent">
{t("title2")}
</span>{" "}
{t("title3")}
</h1>
<span className="text-xl leading-snug ">{t("content")}</span>
<div className="flex gap-4 ">
<button className="bg-gradient-to-r from-[#FFB55E] to-[#40E9AC] px-4 py-2 rounded-lg hover:opacity-80">
{t("button1")}
</button>
<button className="flex items-center bg-gradient-to-r from-[#FFB55E] to-[#40E9AC] p-[1px] rounded-lg hover:opacity-80">
<div className="flex items-center text-center w-full h-full px-4 bg-[#212B30] rounded-lg">
<span className="text-center">{t("button2")}</span>
</div>
</button>
</div>
</div>
<div className=" w-[490px] absolute right-0 z-0">
<img src={vector} alt="robot-ai" />
</div>
</div>
</div>

@ -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 (
<div className="bg-[#22353F] text-white">
<div
className="container lg:w-[94%] mx-auto md:min-h-[100vh] animate-on-scroll my-20 relative"
id="appRoach"
>
<h1 className="text-4xl font-bold text-center pb-20 ">
{firstWord} {remainingText}
</h1>
<div>
<img className="w-3/4 mx-auto" src={HowItWorkImg} alt="" />
</div>
</div>
</div>
);
};
export default HowItWorksSection;

@ -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 (
<div
className="w-full text-white bg-[#22353F] md:min-h-[60vh] animate-on-scroll py-20 rounded-lg px-10"
id="solutionsOfProduct"
>
<div className=" mx-auto flex flex-col gap-y-10 h-full">
<h1 className="text-4xl font-bold text-center pb-20 relative">
{t("heading")}
</h1>
<div className="flex flex-col gap-10 justify-center text-center">
<div className="flex gap-5 justify-center">
<div className="">
<img className="" src={ImgJoin1} alt="" />
</div>
<div className="flex flex-col justify-between ">
<img className="" src={ImgJoin2} alt="" />
<div className="h-1/2 flex flex-col justify-center gap-3">
<span className="text-[#FFB55D] text-3xl font-semibold">
{t("number1")}
</span>
<span className="text-xl max-w-[242px]">{t("content1")}</span>
</div>
</div>
<div className=" ">
<img className="" src={ImgJoin3} alt="" />
</div>
<div className="flex flex-col justify-between ">
<div className="h-1/2 flex flex-col justify-center gap-3">
<span className="text-[#65DD9B] text-3xl font-semibold">
{t("number2")}
</span>
<span className="text-xl max-w-[242px]">{t("content2")}</span>
</div>
<img className="" src={ImgJoin4} alt="" />
</div>
<div className="">
<img className="" src={ImgJoin5} alt="" />
</div>
</div>
<div>
<p>{t("title")}</p>
</div>
<div>
<button className="bg-gradient-to-r from-[#FFB55E] to-[#40E9AC] px-4 py-2 rounded-lg min-w-[102px]">
{t("button")}
</button>
</div>
</div>
</div>
</div>
);
};
export default JoinACommunityOfMillions;

@ -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 (
<div className=" py-20 bg-[#212B30] text-white md:min-h-[60vh] ">
<div
className="container w-full mx-auto flex justify-between animate-on-scroll"
id="customerInsight"
>
<div className="w-[222px] pt-[100px]">
<h1 className="text-3xl font-semibold leading-9">{t("heading")}</h1>
</div>
<div className="flex justify-end gap-20">
<div className="flex flex-col justify-end mt-[100px] gap-20 max-w-[344px]">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-3">
<div className="flex gap-3">
<img src={t("line1") || ""} alt="" />
<span className="text-2xl font-semibold leading-9">
{t("title1")}
</span>
</div>
<span>{t("content1_1")}</span>
</div>
<div className="flex flex-col gap-3">
<span className="text-3xl font-semibold leading-7">
{t("content1_2")}
</span>
<span className="text-xl font-normal leading-6">
{t("content1_3")}
</span>
</div>
</div>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-3">
<div className="flex gap-3">
<img src={t("line2") || ""} alt="" />
<span className="text-2xl font-semibold leading-9">
{t("title1")}
</span>
</div>
<span>{t("content2_1")}</span>
</div>
<div className="flex flex-col gap-3">
<span className="text-3xl font-semibold leading-7">
{t("content2_2")}
</span>
<span className="text-xl font-normal leading-6">
{t("content2_3")}
</span>
</div>
</div>
</div>
<div className="flex flex-col justify-start gap-20 max-w-[344px]">
<div className="flex flex-col gap-6 ">
<div className="flex flex-col gap-3">
<div className="flex gap-3">
<img src={t("line3") || ""} alt="" />
<span className="text-2xl font-semibold leading-9">
{t("title3")}
</span>
</div>
<span>{t("content3_1")}</span>
</div>
<div className="flex flex-col gap-3">
<span className="text-3xl font-semibold leading-7">
{t("content3_2")}
</span>
<span className="text-xl font-normal leading-6">
{t("content3_3")}
</span>
</div>
</div>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-3">
<div className="flex gap-3">
<img src={t("line4") || ""} alt="" />
<span className="text-2xl font-semibold leading-9">
{t("title4")}
</span>
</div>
<span>{t("content4_1")}</span>
</div>
<div className="flex flex-col gap-3">
<span className="text-3xl font-semibold leading-7">
{t("content4_2")}
</span>
<span className="text-xl font-normal leading-6">
{t("content4_3")}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default MassAdoptionSection;

@ -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 (
<div
className="container w-[94%] mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative"
id="problems"
>
<h1 className="text-4xl font-bold text-center pb-20 relative">
{t("title")}
</h1>
<div
className="flex flex-col items-center
md:flex-row md:items-start md:absolute md:top-[50%] md:left-[50%] md:translate-x-[-50%]
md:translate-y-[-50%] md:w-full md:shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] md:rounded-lg relative
border-black "
>
{/* [&>*:not(:first-child)]:border-l-2 */}
{problemsSectionData.map((item: any, index) => {
return (
<>
<p className="line-problems first:hidden my-auto w-[2px] h-[150px] bg-slate-400"></p>
<div
data-aos="flip-left"
data-aos-duration="500"
className="flex h-full justify-around [&>*:first-child]:items-center flex-1 "
>
<div className="relative flex flex-col items-center gap-y-4 flex:1 text-black p-8 rounded-lg">
<div className="flex flex-col gap-y-2 items-center">
<img className="w-[44px] h-[44px] " src={item.src} alt="" />
<span
className="text-xl font-semibold text-center"
key={item.title + index}
>
{item.title}
</span>
</div>
<span className="text-center">{item.content}</span>
</div>
</div>
</>
);
})}
{/*
<div className="flex flex-col gap-y-4 w-[250px] text-black p-8 rounded-lg">
<div className="flex flex-col gap-y-2 items-center">
<img
className="w-[44px] h-[44px]"
src={userInformation}
alt=""
></img>
<p className="text-xl font-semibold">User Information</p>
</div>
<p className="text-center">
Providing accurate and easy-to-understand information for users
</p>
</div>
<div className="my-auto w-[2px] h-[150px] bg-slate-400"></div>
<div className="flex flex-col gap-y-4 w-[250px] text-black p-8 rounded-lg">
<div className="flex flex-col gap-y-2 items-center">
<img className="w-[44px] h-[44px]" src={userInteraction} alt="" />
<p className="text-xl font-semibold">Interaction</p>
</div>
<p className="text-center">
Providing a good user experience with high interactivity, encourage
users to provide more valuable information about their illness
</p>
</div> */}
</div>
</div>
);
};
export default ProblemsSection;

@ -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 (
<div className="bg-[#22353F]">
<div
className="container flex flex-col w-[100%] mx-auto min-h-[175px] py-20 text-white animate-on-scroll relative gap-10"
id="problems"
>
<h1 className="text-4xl font-bold text-center">{t("title")}</h1>
<div
className="flex flex-col items-center justify-between md:flex-row gap-14
"
>
{problemsSectionData.map((item: any, index) => {
return (
<>
<p className="line-problems first:hidden my-auto w-1 h-[99px] bg-gradient-to-b from-[#FFB55E] to-[#40E9AC]"></p>
<div
data-aos="flip-left"
data-aos-duration="500"
className="flex h-full [&>*:first-child]:items-center w-1/4 "
>
<div className="relative flex items-center gap-2 justify-center ">
<span
className="text-5xl text-[#FFB55D] font-[600]"
key={item.title + index}
>
{item.title}
</span>
<span className="text-base leading-snug font-[600]">
{item.content}
</span>
</div>
</div>
</>
);
})}
</div>
</div>
</div>
);
};
export default SectionSection;

@ -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 (
<div
className="w-full text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg px-10"
id="solutionsOfProduct"
>
<h1 className="text-4xl font-bold text-center pb-20 relative">
The Solutions of Product
</h1>
<div className="container w-[94%] mx-auto flex flex-col gap-y-10 h-full">
<div
data-aos="fade-left"
data-aos-duration="1000"
className="flex items-center w-full gap-x-8"
>
<div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
<BsDatabaseCheck
className="text-white text-[32px] group-hover:rotateY transition-all
duration-500 ease-in-out"
/>
</div>
<div className="flex-1">
<span className="font-bold text-lg">{t("data1.title")}</span>
<ul>
<li>{t("data1.contents.content1")}</li>
<li>{t("data1.contents.content2")}</li>
</ul>
</div>
</div>
<div
data-aos="animation__showLine"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-delay="100"
className="w-[2px] h-[40px] ml-[40px] bg-black"
></div>
<div
data-aos="fade-left"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-delay="300"
className="flex items-center w-full gap-x-8"
>
<div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
<RiCodeSSlashLine
className="text-white text-[32px] group-hover:rotateY transition-all
duration-500 ease-in-out"
/>
</div>
<div className="flex-1">
<p className="font-bold text-lg">{t("data2.title")}</p>
<ul>
<li>{t("data2.contents.content1")}</li>
</ul>
</div>
</div>
<div
data-aos="animation__showLine"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-delay="100"
className="w-[2px] h-[40px] ml-[40px] bg-black overflow-hidden"
></div>
<div
data-aos="fade-left"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-delay="300"
className="flex items-center w-full gap-x-8"
>
<div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
<RiSettings4Line
className="text-white text-[32px] group-hover:rotateY transition-all
duration-500 ease-in-out"
/>
</div>
<div className="flex-1">
<p className="font-bold text-lg">{t("data3.title")}</p>
<ul>
<li>{t("data3.contents.content1")}</li>
<li>{t("data3.contents.content2")}</li>
</ul>
</div>
</div>
</div>
</div>
);
};
export default SolutionsOfProduct;

@ -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);
};

@ -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) => {

@ -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 (
<div className="w-full pb-24 scroll-mt-16" id="tokenomics">
@ -242,7 +213,7 @@ const TokenomicsSection = (props: Props) => {
Tokenomics
</h1>
<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">
<div className="w-full flex justify-center">
<animated.div
style={{ ...styles }}
className="w-[300px] sm:w-[350px] md:w-[500px] lg:w-[550px]"
@ -254,7 +225,7 @@ const TokenomicsSection = (props: Props) => {
/>
</animated.div>
</div>
<div className="w-full lg:w-[45%] justify-center">
{/* <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")}
@ -276,7 +247,7 @@ const TokenomicsSection = (props: Props) => {
})}
</ul>
</animated.li>
</div>
</div> */}
</div>
</div>
</div>

Loading…
Cancel
Save