add Healthcare

main
Thuong_e 2 years ago
parent fc4a4c1a4e
commit 83f7c84b58
  1. 35
      package-lock.json
  2. 3
      package.json
  3. BIN
      public/images/image19.png
  4. BIN
      public/images/image20.png
  5. BIN
      public/images/image21.png
  6. BIN
      public/images/image22.png
  7. BIN
      src/assets/images/image19.png
  8. BIN
      src/assets/images/image20.png
  9. BIN
      src/assets/images/image21.png
  10. BIN
      src/assets/images/image22.png
  11. 50
      src/i18n/en/healthCare/approachSection.json
  12. 7
      src/i18n/en/healthCare/customerInsight.json
  13. 3
      src/i18n/en/healthCare/firstSection.json
  14. 23
      src/i18n/en/healthCare/problemsSection.json
  15. 22
      src/i18n/en/healthCare/solutionsOfProduct​.json
  16. 0
      src/i18n/en/home/aboutSection.json
  17. 0
      src/i18n/en/home/firstSection.json
  18. 116
      src/i18n/en/home/qna.json
  19. 0
      src/i18n/en/home/roadmap.json
  20. 115
      src/i18n/en/qna.json
  21. 52
      src/i18n/i18n.ts
  22. 50
      src/i18n/vi/healthCare/approachSection.json
  23. 7
      src/i18n/vi/healthCare/customerInsight.json
  24. 3
      src/i18n/vi/healthCare/firstSection.json
  25. 23
      src/i18n/vi/healthCare/problemsSection.json
  26. 22
      src/i18n/vi/healthCare/solutionsOfProduct​.json
  27. 0
      src/i18n/vi/home/aboutSection.json
  28. 0
      src/i18n/vi/home/firstSection.json
  29. 23
      src/i18n/vi/home/qna.json
  30. 0
      src/i18n/vi/home/roadmap.json
  31. 22
      src/index.css
  32. 25
      src/pages/SGPTProducts/Healthcare.tsx
  33. 241
      src/shared/components/Header.tsx
  34. 2
      src/shared/components/css/QnASection.css
  35. 1
      src/shared/components/css/Roadmap.css
  36. 110
      src/shared/components/healthcare/ApproachSection.tsx
  37. 42
      src/shared/components/healthcare/Competitions.tsx
  38. 77
      src/shared/components/healthcare/CustomerInsight.tsx
  39. 30
      src/shared/components/healthcare/FirstSection.tsx
  40. 97
      src/shared/components/healthcare/ProblemsSection.tsx
  41. 95
      src/shared/components/healthcare/SolutionsOfProduct​.tsx
  42. 2
      src/shared/components/home/AboutSection.tsx
  43. 4
      src/shared/components/home/FirstSection.tsx
  44. 6
      src/shared/components/home/QnASection.tsx
  45. 4
      src/shared/components/home/RoadMap.tsx
  46. 5
      src/shared/providers/RouterProviderComponent.tsx
  47. 16
      tailwind.config.cjs

35
package-lock.json generated

@ -21,9 +21,11 @@
"react-chartjs-2": "^4.3.1", "react-chartjs-2": "^4.3.1",
"react-copy-to-clipboard": "^5.1.0", "react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-google-charts": "^4.0.0",
"react-i18next": "^12.2.0", "react-i18next": "^12.2.0",
"react-icons": "^4.7.1", "react-icons": "^4.7.1",
"react-router-dom": "^6.8.2", "react-router-dom": "^6.8.2",
"react-router-hash-link": "^2.4.3",
"recharts": "^2.5.0", "recharts": "^2.5.0",
"sort-by": "^0.0.2" "sort-by": "^0.0.2"
}, },
@ -32,6 +34,7 @@
"@types/react-copy-to-clipboard": "^5.0.4", "@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^18.0.10", "@types/react-dom": "^18.0.10",
"@types/react-router-dom": "^5.3.3", "@types/react-router-dom": "^5.3.3",
"@types/react-router-hash-link": "^2.4.6",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"postcss": "^8.4.21", "postcss": "^8.4.21",
"postcss-import": "^15.1.0", "postcss-import": "^15.1.0",
@ -720,6 +723,17 @@
"@types/react-router": "*" "@types/react-router": "*"
} }
}, },
"node_modules/@types/react-router-hash-link": {
"version": "2.4.6",
"resolved": "https://registry.npmjs.org/@types/react-router-hash-link/-/react-router-hash-link-2.4.6.tgz",
"integrity": "sha512-JOV4Q1N60tJJUPisS/u1jiXn8c4jX7ThQf8XavzZYIWOIv0RP17nbyI9YgEZh1r3APXpP9ZkU1ytrlv+1+8jcw==",
"dev": true,
"dependencies": {
"@types/history": "^4.7.11",
"@types/react": "*",
"@types/react-router-dom": "^5.3.0"
}
},
"node_modules/@types/scheduler": { "node_modules/@types/scheduler": {
"version": "0.16.2", "version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@ -1815,6 +1829,15 @@
"react": "^18.2.0" "react": "^18.2.0"
} }
}, },
"node_modules/react-google-charts": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.0.tgz",
"integrity": "sha512-9OG0EkBb9JerKEPQYdhmAXnhGLzOdOHOPS9j7l+P1a3z1kcmq9mGDa7PUoX/VQUY4IjZl2/81nsO4o+1cuYsuw==",
"peerDependencies": {
"react": ">=16.3.0",
"react-dom": ">=16.3.0"
}
},
"node_modules/react-i18next": { "node_modules/react-i18next": {
"version": "12.2.0", "version": "12.2.0",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.2.0.tgz", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.2.0.tgz",
@ -1896,6 +1919,18 @@
"react-dom": ">=16.8" "react-dom": ">=16.8"
} }
}, },
"node_modules/react-router-hash-link": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-2.4.3.tgz",
"integrity": "sha512-NU7GWc265m92xh/aYD79Vr1W+zAIXDWp3L2YZOYP4rCqPnJ6LI6vh3+rKgkidtYijozHclaEQTAHaAaMWPVI4A==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": ">=15",
"react-router-dom": ">=4"
}
},
"node_modules/react-smooth": { "node_modules/react-smooth": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.2.tgz", "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.2.tgz",

@ -22,9 +22,11 @@
"react-chartjs-2": "^4.3.1", "react-chartjs-2": "^4.3.1",
"react-copy-to-clipboard": "^5.1.0", "react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-google-charts": "^4.0.0",
"react-i18next": "^12.2.0", "react-i18next": "^12.2.0",
"react-icons": "^4.7.1", "react-icons": "^4.7.1",
"react-router-dom": "^6.8.2", "react-router-dom": "^6.8.2",
"react-router-hash-link": "^2.4.3",
"recharts": "^2.5.0", "recharts": "^2.5.0",
"sort-by": "^0.0.2" "sort-by": "^0.0.2"
}, },
@ -33,6 +35,7 @@
"@types/react-copy-to-clipboard": "^5.0.4", "@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^18.0.10", "@types/react-dom": "^18.0.10",
"@types/react-router-dom": "^5.3.3", "@types/react-router-dom": "^5.3.3",
"@types/react-router-hash-link": "^2.4.6",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"postcss": "^8.4.21", "postcss": "^8.4.21",
"postcss-import": "^15.1.0", "postcss-import": "^15.1.0",

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

@ -0,0 +1,50 @@
{
"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,7 @@
{
"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."
}

@ -0,0 +1,3 @@
{
"title": "SGPT for Healthcare"
}

@ -0,0 +1,23 @@
{
"title": "The Problems",
"data": [
{
"id": 1,
"src": "../../../../public/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": "../../../../public/images/image20.png",
"title": "User Information",
"content": "Providing accurate and easy-to-understand information for users"
},
{
"id": 3,
"src": "../../../../public/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,22 @@
{
"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."
}
}
}

@ -0,0 +1,116 @@
{
"navtitle": "See some of the most frequently asked questions about Fight",
"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": "Why Include Train-and-Earn?",
"bgcolor": "bg-[#CC66FF]",
"contents": [
{
"id": 1,
"bgcolor": "bg-[#9966FF]",
"content": "Play-to-Earn Web3 projects typically lack mainstream adoption due to requiring large upfront financial investments and Web3 knowledge. As Fight Out’s innovative Train-and-Earn mechanism has been specifically designed to avoid these pitfalls, it will allow Fight Out to differentiate itself in the market and be a powerful user acquisition strategy contributing to the success of the project and upward pressure on the value of $FGHT."
},
{
"id": 2,
"bgcolor": "bg-[#6666FF]",
"content": "Play-to-Earn Web3 projects typically lack mainstream adoption due to requiring large upfront financial investments and Web3 knowledge. As Fight Out’s innovative Train-and-Earn mechanism has been specifically designed to avoid these pitfalls, it will allow Fight Out to differentiate itself in the market and be a powerful user acquisition strategy contributing to the success of the project and upward pressure on the value of $FGHT."
},
{
"id": 3,
"bgcolor": "bg-[#3366FF]",
"content": "Play-to-Earn Web3 projects typically lack mainstream adoption due to requiring large upfront financial investments and Web3 knowledge. As Fight Out’s innovative Train-and-Earn mechanism has been specifically designed to avoid these pitfalls, it will allow Fight Out to differentiate itself in the market and be a powerful user acquisition strategy contributing to the success of the project and upward pressure on the value of $FGHT."
},
{
"id": 4,
"bgcolor": "bg-[#0066FF]",
"content": "Play-to-Earn Web3 projects typically lack mainstream adoption due to requiring large upfront financial investments and Web3 knowledge. As Fight Out’s innovative Train-and-Earn mechanism has been specifically designed to avoid these pitfalls, it will allow Fight Out to differentiate itself in the market and be a powerful user acquisition strategy contributing to the success of the project and upward pressure on the value of $FGHT."
}
]
},
{
"id": 3,
"title": "What is the Fight Out avatar?",
"bgcolor": "bg-[#CC66FF]",
"contents": [
{
"id": 1,
"bgcolor": "bg-[#9966FF]",
"content": "Người dùng Fight Out sẽ có thể đúc hình đại diện NFT của riêng họ khi tạo tài khoản Fight Out. Hình đại diện này là linh hồn, có nghĩa là nó không thể được bán hoặc chuyển nhượng. Dữ liệu được thu thập từ đào tạo IRL và thành tích được chuyển đổi trực tiếp thành điểm chỉ số cho hình đại diện của họ. Hình đại diện của người dùng sẽ là hình ảnh kỹ thuật số của họ trong siêu vũ trụ Fight Out, nơi họ có thể giao lưu với các thành viên khác trong cộng đồng Fight Out và cạnh tranh với những người khác để giành giải thưởng."
},
{
"id": 2,
"bgcolor": "bg-[#6666FF]",
"content": "Người dùng Fight Out sẽ có thể đúc hình đại diện NFT của riêng họ khi tạo tài khoản Fight Out. Hình đại diện này là linh hồn, có nghĩa là nó không thể được bán hoặc chuyển nhượng. Dữ liệu được thu thập từ đào tạo IRL và thành tích được chuyển đổi trực tiếp thành điểm chỉ số cho hình đại diện của họ. Hình đại diện của người dùng sẽ là hình ảnh kỹ thuật số của họ trong siêu vũ trụ Fight Out, nơi họ có thể giao lưu với các thành viên khác trong cộng đồng Fight Out và cạnh tranh với những người khác để giành giải thưởng."
},
{
"id": 3,
"bgcolor": "bg-[#3366FF]",
"content": "Người dùng Fight Out sẽ có thể đúc hình đại diện NFT của riêng họ khi tạo tài khoản Fight Out. Hình đại diện này là linh hồn, có nghĩa là nó không thể được bán hoặc chuyển nhượng. Dữ liệu được thu thập từ đào tạo IRL và thành tích được chuyển đổi trực tiếp thành điểm chỉ số cho hình đại diện của họ. Hình đại diện của người dùng sẽ là hình ảnh kỹ thuật số của họ trong siêu vũ trụ Fight Out, nơi họ có thể giao lưu với các thành viên khác trong cộng đồng Fight Out và cạnh tranh với những người khác để giành giải thưởng."
},
{
"id": 4,
"bgcolor": "bg-[#0066FF]",
"content": "Người dùng Fight Out sẽ có thể đúc hình đại diện NFT của riêng họ khi tạo tài khoản Fight Out. Hình đại diện này là linh hồn, có nghĩa là nó không thể được bán hoặc chuyển nhượng. Dữ liệu được thu thập từ đào tạo IRL và thành tích được chuyển đổi trực tiếp thành điểm chỉ số cho hình đại diện của họ. Hình đại diện của người dùng sẽ là hình ảnh kỹ thuật số của họ trong siêu vũ trụ Fight Out, nơi họ có thể giao lưu với các thành viên khác trong cộng đồng Fight Out và cạnh tranh với những người khác để giành giải thưởng."
}
]
},
{
"id": 4,
"title": "What’s next for Fight Out?",
"bgcolor": "bg-[#CC66FF]",
"contents": [
{
"id": 1,
"bgcolor": "bg-[#9966FF]",
"content": "We have big plans for Fight Out following our presale! Developing the Fight Out platform and metaverse, and continued onboarding of Fight Out ambassadors for bespoke training programs are all outlined in our whitepaper."
},
{
"id": 2,
"bgcolor": "bg-[#6666FF]",
"content": "We have big plans for Fight Out following our presale! Developing the Fight Out platform and metaverse, and continued onboarding of Fight Out ambassadors for bespoke training programs are all outlined in our whitepaper."
},
{
"id": 3,
"bgcolor": "bg-[#3366FF]",
"content": "We have big plans for Fight Out following our presale! Developing the Fight Out platform and metaverse, and continued onboarding of Fight Out ambassadors for bespoke training programs are all outlined in our whitepaper."
},
{
"id": 4,
"bgcolor": "bg-[#0066FF]",
"content": "We have big plans for Fight Out following our presale! Developing the Fight Out platform and metaverse, and continued onboarding of Fight Out ambassadors for bespoke training programs are all outlined in our whitepaper."
}
]
}
]
}

@ -1,115 +0,0 @@
{
"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"
}
]
}
]
}

@ -1,13 +1,23 @@
import i18n from "i18next"; import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next"; import { useTranslation, initReactI18next } from "react-i18next";
import FirstSection_EN from "./en/firstSection.json"; import FirstSection_home_EN from "./en/home/firstSection.json";
import FirstSection_VI from "./vi/firstSection.json"; import FirstSection_home_VI from "./vi/home/firstSection.json";
import AboutSection_EN from "./en/aboutSection.json"; import AboutSection_home_EN from "./en/home/aboutSection.json";
import AboutSection_VI from "./vi/aboutSection.json"; import AboutSection_home_VI from "./vi/home/aboutSection.json";
import RoadMap_EN from "./en/roadmap.json"; import RoadMap_home_EN from "./en/home/roadmap.json";
import RoadMap_VI from "./vi/roadmap.json"; import RoadMap_home_VI from "./vi/home/roadmap.json";
import QnA_EN from "./en/qna.json"; import QnA_home_EN from "./en/home/qna.json";
import QnA_VI from "./vi/qna.json"; import QnA_home_VI from "./vi/home/qna.json";
import FirstSection_healthCare_EN from "./en/healthCare/firstSection.json";
import ProblemsSection_healthCare_EN from "./en/healthCare/problemsSection.json";
import FirstSection_healthCare_VI from "./vi/healthCare/firstSection.json";
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";
export const locales = { export const locales = {
en: "English", en: "English",
@ -15,16 +25,26 @@ export const locales = {
}; };
export const resources = { export const resources = {
en: { en: {
firstSection: FirstSection_EN, firstSectionHome: FirstSection_home_EN,
aboutSection: AboutSection_EN, aboutSectionHome: AboutSection_home_EN,
roadmap: RoadMap_EN, roadmapHome: RoadMap_home_EN,
qna: QnA_EN, qnaHome: QnA_home_EN,
firstSectionHealthCare: FirstSection_healthCare_EN,
problemsSectionHealthCare: ProblemsSection_healthCare_EN,
customerInsightHealthCare: CustomerInsight_healthCare_EN,
approachSectionHealthCare: ApproachSection_healthCare_EN,
solutionsOfProductHealthCare: SolutionsOfProduct_healthCare_EN,
}, },
vi: { vi: {
firstSection: FirstSection_VI, firstSectionHome: FirstSection_home_VI,
aboutSection: AboutSection_VI, aboutSectionHome: AboutSection_home_VI,
roadmap: RoadMap_VI, roadmapHome: RoadMap_home_VI,
qna: QnA_VI, qnaHome: QnA_home_VI,
firstSectionHealthCare: FirstSection_healthCare_VI,
problemsSectionHealthCare: ProblemsSection_healthCare_VI,
customerInsightHealthCare: CustomerInsight_healthCare_VI,
approachSectionHealthCare: ApproachSection_healthCare_VI,
solutionsOfProductHealthCare: SolutionsOfProduct_healthCare_VI,
}, },
}; };
i18n.use(initReactI18next).init({ i18n.use(initReactI18next).init({

@ -0,0 +1,50 @@
{
"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,7 @@
{
"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."
}

@ -0,0 +1,3 @@
{
"title": "SGPT for Healthcare"
}

@ -0,0 +1,23 @@
{
"title": "Các vấn đề",
"data": [
{
"id": 1,
"src": "../../../../public/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": "../../../../public/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": "../../../../public/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,22 @@
{
"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,4 +1,5 @@
{ {
"navtitle": "Xem một số câu hỏi thường gặp nhất về Fight",
"data": [ "data": [
{ {
"id": 1, "id": 1,
@ -29,35 +30,35 @@
}, },
{ {
"id": 2, "id": 2,
"title": "Abcd", "title": "Tại sao lại bao gồm Đào tạo và Kiếm tiền?",
"bgcolor": "bg-[#CC66FF]", "bgcolor": "bg-[#CC66FF]",
"contents": [ "contents": [
{ {
"id": 1, "id": 1,
"bgcolor": "bg-[#9966FF]", "bgcolor": "bg-[#9966FF]",
"content": "ádasffjk12" "content": "Các dự án Web3 chơi để kiếm tiền thường thiếu sự áp dụng chính thống do yêu cầu đầu tư tài chính trả trước lớn và kiến thức về Web3. Vì cơ chế Đào tạo và Kiếm tiền sáng tạo của Fight Out đã được thiết kế đặc biệt để tránh những cạm bẫy này, nó sẽ cho phép Fight Out tạo sự khác biệt trên thị trường và trở thành một chiến lược thu hút người dùng hiệu quả, góp phần vào sự thành công của dự án và tăng áp lực lên giá trị của $FGHT."
}, },
{ {
"id": 2, "id": 2,
"bgcolor": "bg-[#6666FF]", "bgcolor": "bg-[#6666FF]",
"content": "ádasffj1k" "content": "Các dự án Web3 chơi để kiếm tiền thường thiếu sự áp dụng chính thống do yêu cầu đầu tư tài chính trả trước lớn và kiến thức về Web3. Vì cơ chế Đào tạo và Kiếm tiền sáng tạo của Fight Out đã được thiết kế đặc biệt để tránh những cạm bẫy này, nó sẽ cho phép Fight Out tạo sự khác biệt trên thị trường và trở thành một chiến lược thu hút người dùng hiệu quả, góp phần vào sự thành công của dự án và tăng áp lực lên giá trị của $FGHT."
}, },
{ {
"id": 3, "id": 3,
"bgcolor": "bg-[#3366FF]", "bgcolor": "bg-[#3366FF]",
"content": "ádasffj12k" "content": "Các dự án Web3 chơi để kiếm tiền thường thiếu sự áp dụng chính thống do yêu cầu đầu tư tài chính trả trước lớn và kiến thức về Web3. Vì cơ chế Đào tạo và Kiếm tiền sáng tạo của Fight Out đã được thiết kế đặc biệt để tránh những cạm bẫy này, nó sẽ cho phép Fight Out tạo sự khác biệt trên thị trường và trở thành một chiến lược thu hút người dùng hiệu quả, góp phần vào sự thành công của dự án và tăng áp lực lên giá trị của $FGHT."
}, },
{ {
"id": 4, "id": 4,
"bgcolor": "bg-[#0066FF]", "bgcolor": "bg-[#0066FF]",
"content": "ádasffj123k" "content": "Các dự án Web3 chơi để kiếm tiền thường thiếu sự áp dụng chính thống do yêu cầu đầu tư tài chính trả trước lớn và kiến thức về Web3. Vì cơ chế Đào tạo và Kiếm tiền sáng tạo của Fight Out đã được thiết kế đặc biệt để tránh những cạm bẫy này, nó sẽ cho phép Fight Out tạo sự khác biệt trên thị trường và trở thành một chiến lược thu hút người dùng hiệu quả, góp phần vào sự thành công của dự án và tăng áp lực lên giá trị của $FGHT."
} }
] ]
}, },
{ {
"id": 3, "id": 3,
"title": "Abcd", "title": "Hình đại diện Fight Out là gì?",
"bgcolor": "bg-[#CC66FF]", "bgcolor": "bg-[#CC66FF]",
"contents": [ "contents": [
@ -85,29 +86,29 @@
}, },
{ {
"id": 4, "id": 4,
"title": "Abcd", "title": "Điều gì tiếp theo cho Fight Out?",
"bgcolor": "bg-[#CC66FF]", "bgcolor": "bg-[#CC66FF]",
"contents": [ "contents": [
{ {
"id": 1, "id": 1,
"bgcolor": "bg-[#9966FF]", "bgcolor": "bg-[#9966FF]",
"content": "ádasffjk12" "content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
}, },
{ {
"id": 2, "id": 2,
"bgcolor": "bg-[#6666FF]", "bgcolor": "bg-[#6666FF]",
"content": "ádasffj1k" "content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
}, },
{ {
"id": 3, "id": 3,
"bgcolor": "bg-[#3366FF]", "bgcolor": "bg-[#3366FF]",
"content": "ádasffj12k" "content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
}, },
{ {
"id": 4, "id": 4,
"bgcolor": "bg-[#0066FF]", "bgcolor": "bg-[#0066FF]",
"content": "ádasffj123k" "content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
} }
] ]
} }

@ -1,7 +1,9 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html {
scroll-behavior: smooth;
}
@keyframes slide-loop { @keyframes slide-loop {
0% { 0% {
transform: translateX(0); transform: translateX(0);
@ -22,10 +24,8 @@
opacity: 1; opacity: 1;
transform: translateY(0%); transform: translateY(0%);
} }
} }
@keyframes show-list-line { @keyframes show-list-line {
0% { 0% {
opacity: 0; opacity: 0;
@ -35,17 +35,16 @@
opacity: 1; opacity: 1;
width: 100%; width: 100%;
} }
} }
.animate-show{ .animate-show {
transition: all 0.3s ease ; transition: all 0.3s ease;
} }
.animate-show-list-language{ .animate-show-list-language {
transition: animation 0.5s ease; transition: animation 0.5s ease;
animation: show-list-language 0.3s ease; animation: show-list-language 0.3s ease;
} }
.animate-show-line{ .animate-show-line {
animation: show-list-line 0.3s ease; animation: show-list-line 0.3s ease;
} }
.animate-slide-loop { .animate-slide-loop {
@ -55,6 +54,11 @@
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
} }
@layer utilities {
.rotateY {
transform: rotateY(180deg);
}
}
/* .text-container { /* .text-container {
white-space: nowrap; white-space: nowrap;

@ -0,0 +1,25 @@
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 FirstSection from "../../shared/components/healthcare/FirstSection";
import ProblemsSection from "../../shared/components/healthcare/ProblemsSection";
import SolutionsOfProduct from "../../shared/components/healthcare/SolutionsOfProduct";
type Props = {};
const Healthcare = (props: Props) => {
return (
<div className="flex flex-col gap-4 bg-white ">
<FirstSection />
<ProblemsSection />
<CustomerInsight />
<Approach />
<SolutionsOfProduct />
<Competitions />
<BackToTopButton />
</div>
);
};
export default Healthcare;

@ -6,6 +6,7 @@ import { BsNewspaper, BsGithub } from "react-icons/bs";
import Whitepaper from "../../assets/Whitepaper.pdf"; import Whitepaper from "../../assets/Whitepaper.pdf";
import { MdLanguage } from "react-icons/md"; import { MdLanguage } from "react-icons/md";
import { locales, resources } from "../../i18n/i18n"; import { locales, resources } from "../../i18n/i18n";
import { HashLink as Link } from "react-router-hash-link";
type Props = {}; type Props = {};
@ -17,20 +18,26 @@ const menuItems = [
}, },
{ {
name: "About", name: "About",
path: "", path: "/",
id: "about", id: "about",
}, },
{ {
name: "Roadmap", name: "Roadmap",
path: "", path: "/",
id: "roadmap", id: "roadmap",
}, },
{ {
name: "Tokenomics", name: "Tokenomics",
path: "", path: "/",
id: "tokenomics", id: "tokenomics",
}, },
]; ];
const menuSGPTProducts = [
{
name: "SGPT for Healthcare",
path: "healthcare",
},
];
const Header = (props: Props) => { const Header = (props: Props) => {
const [isScrolled, setIsScrolled] = React.useState(false); const [isScrolled, setIsScrolled] = React.useState(false);
@ -41,7 +48,7 @@ const Header = (props: Props) => {
const languages = Object.keys(resources); const languages = Object.keys(resources);
React.useEffect(() => { React.useEffect(() => {
// check is mobile // check is mobile
if (window.innerWidth <= 768) { if (window.innerWidth <= 1024) {
setIsMobile(true); setIsMobile(true);
} else { } else {
setIsMobile(false); setIsMobile(false);
@ -62,7 +69,6 @@ const Header = (props: Props) => {
}, [window.innerWidth]); }, [window.innerWidth]);
const jumpToSection = (section: string) => { const jumpToSection = (section: string) => {
console.log("section", section);
const element = document.getElementById(section); const element = document.getElementById(section);
if (element) { if (element) {
element.scrollIntoView({ behavior: "smooth" }); element.scrollIntoView({ behavior: "smooth" });
@ -117,42 +123,66 @@ const Header = (props: Props) => {
</div> </div>
) : ( ) : (
<> <>
<div className="flex text-white items-center gap-x-2 cursor-pointer group relative"> <div className="flex lg:gap-4 gap-10 items-center">
<MdLanguage className="text-[24px]" /> <ul className="flex lg:gap-4 ">
<span className="group-hover:text-orange-400"> {menuItems.map((item) => (
{currentLanguage} <Link
</span> to={`${item.path}#${item.id}`}
<div className=" h-40 w-[140px] absolute top-3"></div> className="flex my-auto item-center"
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 bg-slate-800 w-[120px] rounded"> >
{languages.map((lng, index) => (
<>
<li <li
key={lng + index} className="flex my-auto item-center"
className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show pl-2 mr-4 my-2" key={item.path}
onClick={() => changeLanguage(lng)} onClick={() => jumpToSection(item.id)}
> >
{locales[lng as keyof typeof locales]} <p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:hover:scale-110 hover:text-orange-500">
<div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div> {item.name}
</p>
</li> </li>
</> </Link>
))}
</ul>
</div>
<div className="flex md:gap-4 gap-10 items-center">
<ul className="flex md:gap-4 lg:gap-10">
{menuItems.map((item) => (
<li
className="inline-block "
key={item.path}
onClick={() => jumpToSection(item.id)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:hover:scale-110 hover:text-orange-500">
{item.name}
</p>
</li>
))} ))}
<li className="inline-block group relative">
<p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:group-hover:scale-110 group-hover:text-orange-500">
SGPT Products{" "}
</p>
<div className=" h-10 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 left-[-8px] flex-col gap-y-4 pt-2 bg-slate-800 w-[200px] min-h-[50px] rounded">
{menuSGPTProducts.map((item) => (
<Link to="/healthcare">
<li
className="inline-block pl-2 "
key={item.path}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer transform hover:text-orange-500">
{item.name}
</p>
</li>
</Link>
))}
</ul>
</li>
<div className="flex text-white items-center gap-x-2 cursor-pointer group relative">
<MdLanguage className="text-[24px]" />
<span className="group-hover:text-orange-400">
{currentLanguage}
</span>
<div className=" h-10 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 bg-slate-800 w-[120px] rounded">
{languages.map((lng, index) => (
<>
<li
key={lng + index}
className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show pl-2 mr-4 my-2"
onClick={() => changeLanguage(lng)}
>
{locales[lng as keyof typeof locales]}
<div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
</li>
</>
))}
</ul>
</div>
</ul> </ul>
<div className="flex gap-4"> <div className="flex gap-4">
<Button size="sm" onClick={() => openLocalPdf()}> <Button size="sm" onClick={() => openLocalPdf()}>
<div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110"> <div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110">
@ -179,29 +209,58 @@ const Header = (props: Props) => {
<div className="flex flex-col pl-[20px] h-full"> <div className="flex flex-col pl-[20px] h-full">
<ul className="flex flex-col gap-3 "> <ul className="flex flex-col gap-3 ">
{menuItems.map((item, index) => ( {menuItems.map((item, index) => (
<li <Link to={`${item.path}#${item.id}`}>
className="inline-block" <li
key={item.path} className="inline-block"
onClick={() => jumpToSection(item.id)} key={item.path}
> onClick={() => jumpToSection(item.id)}
<p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400"> >
{item.name} <p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
</p> {item.name}
</li> </p>
</li>
</Link>
))} ))}
<li <li
className="inline-block" className="inline-block"
onClick={() => openLocalPdf()} onClick={() => (
openLocalPdf(), setIsOpenMenu(!isOpenMenu)
)}
> >
<p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400"> <p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
Whitepaper Whitepaper
</p> </p>
</li> </li>
<li className="inline-block"> <li
className="inline-block"
onClick={() => setIsOpenMenu(!isOpenMenu)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400"> <p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
Audit Audit
</p> </p>
</li> </li>
<div className="flex flex-col text-white gap-y-2 cursor-pointer group relative">
<div className="flex flex-row gap-x-1">
<span className="group-hover:text-orange-400">
SGPT Products
</span>
</div>
{/* <div className=" h-40 w-[140px] absolute top-3"></div> */}
<ul className="hidden group-hover:flex animate-show-list-language flex-col gap-y-4 ">
{menuSGPTProducts.map((item, index) => (
<Link to="/healthcare">
<li
className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show"
key={index}
onClick={() => setIsOpenMenu(!isOpenMenu)}
>
{item.name}
<div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
</li>
</Link>
))}
</ul>
</div>
<div className="flex flex-col text-white gap-y-2 cursor-pointer group relative"> <div className="flex flex-col text-white gap-y-2 cursor-pointer group relative">
<div className="flex flex-row gap-x-1"> <div className="flex flex-row gap-x-1">
<MdLanguage className="text-[24px]" /> <MdLanguage className="text-[24px]" />
@ -243,54 +302,72 @@ const Header = (props: Props) => {
alt="" alt=""
/> />
</div> </div>
<h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold"> <h4 className="text-3xl transition-all duration-150 text-white uppercase font-bold">
SGPT SGPT
</h4> </h4>
</div> </div>
<div className="flex text-white items-center gap-x-2 cursor-pointer group relative"> <div className="flex gap-6 items-center">
<MdLanguage className="text-[24px]" /> <ul className="flex gap-6">
<span className="group-hover:text-orange-400"> {menuItems.map((item, index) => (
{currentLanguage} <Link to={`${item.path}#${item.id}`}>
</span>
<div className=" h-40 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 ">
{languages.map((lng, index) => (
<>
<li <li
key={index} className="inline-block "
className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show" key={item.path + index}
onClick={() => changeLanguage(lng)} onClick={() => jumpToSection(item.id)}
> >
{locales[lng as keyof typeof locales]} <p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
<div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div> {item.name}
</p>
</li> </li>
</> </Link>
))}
</ul>
</div>
<div className="flex gap-10 items-center">
<ul className="flex gap-10">
{menuItems.map((item, index) => (
<li
className="inline-block "
key={item.path + index}
onClick={() => jumpToSection(item.id)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
{item.name}
</p>
</li>
))} ))}
<li className="inline-block group relative">
<p className="text-white text-md transition-all duration-150 cursor-pointer transform group-hover:text-orange-400">
SGPT Products
</p>
<div className=" h-10 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language w-[250px] absolute top-10 flex-col gap-y-4 ">
{menuSGPTProducts.map((item) => (
<Link to="/healthcare">
<li className="inline-block " key={item.path}>
<p className="text-white text-md transition-all duration-150 cursor-pointer transform hover:text-orange-500">
{item.name}
</p>
</li>
</Link>
))}
</ul>
</li>
<div className="flex text-white items-center gap-x-2 cursor-pointer group relative">
<MdLanguage className="text-[24px]" />
<span className="group-hover:text-orange-400">
{currentLanguage}
</span>
<div className=" h-9 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 ">
{languages.map((lng, index) => (
<>
<li
key={index}
className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show"
onClick={() => changeLanguage(lng)}
>
{locales[lng as keyof typeof locales]}
<div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
</li>
</>
))}
</ul>
</div>
</ul> </ul>
<div className="flex gap-4"> <div className="flex gap-4">
<Button size="md" onClick={() => openLocalPdf()}> <Button size="sm" onClick={() => openLocalPdf()}>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<BsNewspaper /> <BsNewspaper />
Whitepaper Whitepaper11
</div> </div>
</Button> </Button>
<Button size="md"> <Button size="sm">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<BsGithub /> <BsGithub />
Audit Audit

@ -4,7 +4,7 @@
} }
.iconDropUp { .iconDropUp {
transition: transform 1.5s; transition: transform 1.5s;
transform: rotate(180deg); transform: rotateY(180deg);
} }
.listItem__QnA { .listItem__QnA {

@ -1,7 +1,6 @@
#timeline { #timeline {
display: flex; display: flex;
column-gap: 12px; column-gap: 12px;
background-color: #031625;
justify-content: space-between; justify-content: space-between;
flex: 1; flex: 1;
} }

@ -0,0 +1,110 @@
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 mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
id="problems"
>
<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
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 ease-in-out 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">{item.title}</p>
<ul className="">
{item.contents.map((item: any) => {
return (
<>
<li className="pb-2">
{item.content}
<ul>
{item.navcontent?.map((item: any) => {
return <li>+ {item}</li>;
})}
</ul>
</li>
</>
);
})}
</ul>
</div>
</div>
);
})}
</div>
</div>
);
};
export default Approach;

@ -0,0 +1,42 @@
import React from "react";
const Competitions = () => {
return (
<div className="container 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-[15%] 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;

@ -0,0 +1,77 @@
import React from "react";
import { BiSearchAlt } from "react-icons/bi";
import { TbFileDislike, TbFileLike } from "react-icons/tb";
import { AiOutlineMessage } from "react-icons/ai";
import customerInsight from "../../../assets/images/image22.png";
import { useTranslation } from "react-i18next";
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 = () => {
const { t } = useTranslation("customerInsightHealthCare");
return (
<div
className="container mx-auto text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg"
id="problems"
>
<h1 className="text-4xl font-bold text-center pb-20 relative">
{t("title")}
</h1>
<div className="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;

@ -0,0 +1,30 @@
import React from "react";
import robotImage from "../../../assets/images/robot-2.png";
import robotImage2 from "../../../assets/images/robot-coin1.png";
const FirstSection = () => {
return (
<div className="flex items-center justify-around min-h-[100vh] bg-gradient-to-r from-cyan-500 to-blue-500">
<h1 className="pl-12 text-white text-5xl font-bold">
SGPT for Healthcare
</h1>
<div className="lg:w-1/5 hidden lg:flex justify-center items-center relative">
<img
src={robotImage2}
className="object-cover absolute -left-40 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-28 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>
</div>
);
};
export default FirstSection;

@ -0,0 +1,97 @@
import React, { useState, useEffect } from "react";
import { HiOutlineUserGroup } from "react-icons/hi";
import { TbReportSearch } from "react-icons/tb";
import { useTranslation } from "react-i18next";
import userBehavior from "../../../assets/images/image19.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 = () => {
const { t } = useTranslation("problemsSectionHealthCare");
const [problemsSectionData, setProblemsSectionData] = useState([]);
useEffect(() => {
setProblemsSectionData(t("data", { returnObjects: true }));
}, [t]);
return (
<div
className="container mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative"
id="roadmap"
>
<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) => {
return (
<>
<p className="line-problems first:hidden my-auto w-[2px] h-[150px] bg-slate-400"></p>
<div 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">
{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,95 @@
import React 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 customerInsight from "../../../assets/images/image22.png";
import { BsDatabaseCheck } from "react-icons/bs";
import { RiCodeSSlashLine, RiSettings4Line } from "react-icons/ri";
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 = () => {
const { t } = useTranslation("solutionsOfProductHealthCare");
return (
<div
className="container mx-auto text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg px-10"
id="problems"
>
<h1 className="text-4xl font-bold text-center pb-20 relative">
The Solutions of Product
</h1>
<div className="flex flex-col gap-y-10 w-[100%] md:w-[60%] h-full">
<div 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 className="w-[2px] h-[40px] ml-[40px] bg-black"></div>
<div 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 className="w-[2px] h-[40px] ml-[40px] bg-black"></div>
<div 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;

@ -8,7 +8,7 @@ import TypingText from "../animated/TypingText";
type Props = {}; type Props = {};
const AboutSection = (props: Props) => { const AboutSection = (props: Props) => {
const { t } = useTranslation("aboutSection"); const { t } = useTranslation("aboutSectionHome");
const copyToClipboard = (address: string) => { const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address); navigator.clipboard.writeText(address);

@ -52,7 +52,7 @@ const socials = [
]; ];
const FirstSection = () => { const FirstSection = () => {
const { t } = useTranslation("firstSection"); const { t } = useTranslation("firstSectionHome");
const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844"; const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844";
const truncateAddress = (address: string) => { const truncateAddress = (address: string) => {
return address.slice(0, 5) + "......" + address.slice(-5); return address.slice(0, 5) + "......" + address.slice(-5);
@ -117,7 +117,7 @@ const FirstSection = () => {
</CopyToClipboard> </CopyToClipboard>
</div> </div>
</div> </div>
<div className="border sm:w-full border-orange-500 p-4 pb-6 pt-0 rounded-md lg:w-3/4"> <div className="sm:w-full p-4 pb-6 pt-0 lg:w-3/4">
<div className="flex justify-start rounded w-fit animate-slide-loop items-center gap-4 py-6"> <div className="flex justify-start rounded w-fit animate-slide-loop items-center gap-4 py-6">
<BsRocketFill className="text-orange-500" size={22} /> <BsRocketFill className="text-orange-500" size={22} />
<h2 className=" sm:text-3xl font-bold hover:text-orange-400"> <h2 className=" sm:text-3xl font-bold hover:text-orange-400">

@ -129,7 +129,7 @@ const QnASection = (props: Props) => {
// ], // ],
// }, // },
// ]; // ];
const { t } = useTranslation("qna"); const { t } = useTranslation("qnaHome");
const [qnaData, setQnaData] = useState([]); const [qnaData, setQnaData] = useState([]);
const showListItem = (id: string, iconDropDown: string) => { const showListItem = (id: string, iconDropDown: string) => {
const iconDropDownid = document.getElementById(`${iconDropDown}`); const iconDropDownid = document.getElementById(`${iconDropDown}`);
@ -191,7 +191,7 @@ const QnASection = (props: Props) => {
FAQS FAQS
</h1> </h1>
<h2 className="text-center "> <h2 className="text-center ">
See some of the most frequently asked questions about Fight {t("navtitle")}
{/* Out here. Got a question thats not on the list? Let us know {/* Out here. Got a question thats not on the list? Let us know
below! */} below! */}
</h2> </h2>
@ -203,7 +203,7 @@ const QnASection = (props: Props) => {
...styles, ...styles,
}} }}
> >
<ul className="flex flex-col items-center gap-4 lg:w-full w-full"> <ul className="flex flex-col items-center gap-4 w-[75%] mx-auto md:w-[85%] lg:w-full">
{qnaData.map((item: any, index: any) => { {qnaData.map((item: any, index: any) => {
return ( return (
<li <li

@ -7,7 +7,7 @@ type Props = {};
const RoadMap = (props: Props) => { const RoadMap = (props: Props) => {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const { t } = useTranslation("roadmap"); const { t } = useTranslation("roadmapHome");
const [roadMapData, setRoadmapData] = useState([]); const [roadMapData, setRoadmapData] = useState([]);
useEffect(() => { useEffect(() => {
@ -61,7 +61,7 @@ const RoadMap = (props: Props) => {
<animated.div <animated.div
id="timeline" id="timeline"
style={{ ...styles }} style={{ ...styles }}
className="w-full flex sm:flex-col sm:gap-y-4 md:flex-row" className="w-full flex flex-col gap-y-4 md:flex-row"
> >
{/* <animated.div {/* <animated.div
style={{ ...styles1 }} style={{ ...styles1 }}

@ -3,6 +3,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Animated from "../../pages/Animated"; import Animated from "../../pages/Animated";
import Home from "../../pages/Home"; import Home from "../../pages/Home";
import HomeLayout from "../components/layouts/HomeLayout"; import HomeLayout from "../components/layouts/HomeLayout";
import Healthcare from "../../pages/SGPTProducts/Healthcare";
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
@ -17,6 +18,10 @@ const router = createBrowserRouter([
path: "", path: "",
element: <Home />, element: <Home />,
}, },
{
path: "healthcare",
element: <Healthcare />,
},
], ],
}, },
]); ]);

@ -2,6 +2,16 @@
module.exports = { module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: { theme: {
// screens: {
// mb: "320px",
// sm: "640px",
// // => @media (min-width: 640px) { ... }
// md: "768px",
// lg: "1024px",
// // => @media (min-width: 1024px) { ... }
// desktop: "1280px",
// // => @media (min-width: 1280px) { ... }
// },
extend: { extend: {
keyframes: { keyframes: {
listShowdown: { listShowdown: {
@ -9,6 +19,12 @@ module.exports = {
"100%": { height: "164px", opacity: 1, transform: "translateY(0px)" }, "100%": { height: "164px", opacity: 1, transform: "translateY(0px)" },
}, },
}, },
boxShadow: {
custom: "0px 0px 8px 2px rgba(0,0,0,0.75);",
},
rotate: {
17: "17deg",
},
}, },
fontFamily: { fontFamily: {
sans: ["Sen", "sans-serif"], sans: ["Sen", "sans-serif"],

Loading…
Cancel
Save