tuanbt
/
SGPT
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix responsive & animation

Browse Source
main
Thuong_e 2 years ago
parent 11cb40299e
commit f676a7b1ac
21 changed files with 199 additions and 147 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 33
      package-lock.json
  2. 2
      package.json
  3. 22
      src/i18n/en/home/roadmap.json
  4. 38
      src/i18n/vi/home/qna.json
  5. 44
      src/index.css
  6. 2
      src/shared/components/Footer.tsx
  7. 14
      src/shared/components/Header.tsx
  8. 2
      src/shared/components/backtotop/index.tsx
  9. 15
      src/shared/components/css/QnASection.css
  10. 10
      src/shared/components/css/Roadmap.css
  11. 6
      src/shared/components/healthcare/ApproachSection.tsx
  12. 2
      src/shared/components/healthcare/Competitions.tsx
  13. 18
      src/shared/components/healthcare/CustomerInsight.tsx
  14. 34
      src/shared/components/healthcare/FirstSection.tsx
  15. 14
      src/shared/components/healthcare/ProblemsSection.tsx
  16. 53
      src/shared/components/healthcare/SolutionsOfProduct​.tsx
  17. 4
      src/shared/components/home/AboutSection.tsx
  18. 8
      src/shared/components/home/FirstSection.tsx
  19. 12
      src/shared/components/home/QnASection.tsx
  20. 11
      src/shared/components/home/RoadMap.tsx
  21. 2
      src/shared/components/home/TokenomicsSection.tsx

33
package-lock.json generated
Unescape View File

@ -11,6 +11,7 @@
"@react-spring/parallax": "^9.7.1", "@react-spring/parallax": "^9.7.1",
"@react-spring/web": "^9.7.1", "@react-spring/web": "^9.7.1",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"aos": "^2.3.4",
"chart.js": "^3.9.1", "chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.2.0", "chartjs-plugin-datalabels": "^2.2.0",
"i18next": "^22.4.14", "i18next": "^22.4.14",
@ -30,6 +31,7 @@
"sort-by": "^0.0.2" "sort-by": "^0.0.2"
}, },
"devDependencies": { "devDependencies": {
"@types/aos": "^3.0.4",
"@types/react": "^18.0.27", "@types/react": "^18.0.27",
"@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",
@ -607,6 +609,12 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@types/aos": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.4.tgz",
"integrity": "sha512-mna6Jd6bdK1NpwarLopGvXOgUoCfj0470IwLxuVOFDElTGI0JTd7xSGQ0AjbAEnHErC/b3fA9t2uB3IXVKmckA==",
"dev": true
},
"node_modules/@types/d3-array": { "node_modules/@types/d3-array": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.4.tgz",
@ -790,6 +798,16 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/aos": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
"integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
"dependencies": {
"classlist-polyfill": "^1.0.3",
"lodash.debounce": "^4.0.6",
"lodash.throttle": "^4.0.1"
}
},
"node_modules/arg": { "node_modules/arg": {
"version": "5.0.2", "version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@ -963,6 +981,11 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/classlist-polyfill": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
"integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
},
"node_modules/classnames": { "node_modules/classnames": {
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
@ -1474,6 +1497,16 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}, },
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
},
"node_modules/loose-envify": { "node_modules/loose-envify": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",

2
package.json
Unescape View File

@ -12,6 +12,7 @@
"@react-spring/parallax": "^9.7.1", "@react-spring/parallax": "^9.7.1",
"@react-spring/web": "^9.7.1", "@react-spring/web": "^9.7.1",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"aos": "^2.3.4",
"chart.js": "^3.9.1", "chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.2.0", "chartjs-plugin-datalabels": "^2.2.0",
"i18next": "^22.4.14", "i18next": "^22.4.14",
@ -31,6 +32,7 @@
"sort-by": "^0.0.2" "sort-by": "^0.0.2"
}, },
"devDependencies": { "devDependencies": {
"@types/aos": "^3.0.4",
"@types/react": "^18.0.27", "@types/react": "^18.0.27",
"@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",

22
src/i18n/en/home/roadmap.json
Unescape View File

@ -30,28 +30,6 @@
"10 Million MarketCap Milestone", "10 Million MarketCap Milestone",
"CEOAI Bot Creator and integration with AI." "CEOAI Bot Creator and integration with AI."
] ]
},
{
"phase": "Phase 4",
"listTitle": [
"Swap Development and Launch",
"Merchandise Launch",
"Tier 1 CEX Listings",
"CEO Bridge to ETH, Arbitrium and Polygon",
"10 Million MarketCap Milestone",
"CEOAI Bot Creator and integration with AI."
]
},
{
"phase": "Phase 5",
"listTitle": [
"Swap Development and Launch",
"Merchandise Launch",
"Tier 1 CEX Listings",
"CEO Bridge to ETH, Arbitrium and Polygon",
"10 Million MarketCap Milestone",
"CEOAI Bot Creator and integration with AI."
]
} }
] ]
} }

38
src/i18n/vi/home/qna.json
Unescape View File

@ -46,44 +46,6 @@
"id": 2, "id": 2,
"bgcolor": "bg-[#6666FF]", "bgcolor": "bg-[#6666FF]",
"content": "SGPT Token cũng sẽ được sử dụng để thưởng cho các thành viên có đóng góp tích cực cho hệ thống." "content": "SGPT Token cũng sẽ được sử dụng để thưởng cho các thành viên có đóng góp tích cực cho hệ thống."
},
{
"id": 3,
"bgcolor": "bg-[#3366FF]",
"content": "ádasffj12k"
},
{
"id": 4,
"bgcolor": "bg-[#0066FF]",
"content": "ádasffj123k"
}
]
},
{
"id": 4,
"title": "Điều gì tiếp theo cho Fight Out?",
"bgcolor": "bg-[#CC66FF]",
"contents": [
{
"id": 1,
"bgcolor": "bg-[#9966FF]",
"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,
"bgcolor": "bg-[#6666FF]",
"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,
"bgcolor": "bg-[#3366FF]",
"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,
"bgcolor": "bg-[#0066FF]",
"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."
} }
] ]
} }

44
src/index.css
Unescape View File

@ -60,36 +60,48 @@ html {
} }
} }
/* .text-container {
white-space: nowrap;
overflow: hidden;
}
.text-container span {
display: inline-block;
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
} */
.back-to-top { .back-to-top {
position: fixed; position: fixed;
bottom: 20px;
right: 20px;
color: #fff; color: #fff;
width: 60px;
height: 60px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
transition: opacity 0.4s ease-in-out; transition: all 0.3s ease-in-out;
} }
.back-to-top.visible { .back-to-top.visible {
opacity: 1; opacity: 1;
} }
/* .animation__showLine {
animation: showline 2s linear;
}
@keyframes showline {
0% {
max-height: 0;
opacity: 0;
}
100% {
opacity: 1;
max-height: 100vh;
}
} */
[data-aos="animation__showLine"] {
opacity: 0;
max-height: 0px;
transition-property: max-height, opacity;
}
[data-aos="animation__showLine"].aos-animate {
opacity: 1;
max-height: 100vh;
}
@keyframes TopToBottom { @keyframes TopToBottom {
0% { 0% {
transform: translate(50%, -20px); transform: translate(50%, -20px);

2
src/shared/components/Footer.tsx
Unescape View File

@ -4,7 +4,7 @@ type Props = {};
const Footer = (props: Props) => { const Footer = (props: Props) => {
return ( return (
<div className="container mx-auto md: px-4 flex flex-col gap-4 items-center md:flex-row justify-between text-white py-12"> <div className="container xl:w-[90%] mx-auto md: px-4 flex flex-col gap-4 items-center md:flex-row justify-between text-white py-12">
<div className="md:w-1/4 flex gap-2 items-center"> <div className="md:w-1/4 flex gap-2 items-center">
<div className="bg-white rounded-full overflow-hidden p-1"> <div className="bg-white rounded-full overflow-hidden p-1">
<img <img

14
src/shared/components/Header.tsx
Unescape View File

@ -94,7 +94,7 @@ const Header = (props: Props) => {
<> <>
{isScrolled ? ( {isScrolled ? (
<div className="fixed w-full z-30 p-4 transition-all duration-150 bg-gray-800"> <div className="fixed w-full z-30 p-4 transition-all duration-150 bg-gray-800">
<div className="container md:gap-2 mx-auto flex justify-between items-center "> <div className="container md:gap-2 mx-auto flex justify-between items-center xl:w-[90%] ">
<div <div
className="flex gap-2 items-center cursor-pointer hover:text-orange-400" className="flex gap-2 items-center cursor-pointer hover:text-orange-400"
onClick={() => backToHome()} onClick={() => backToHome()}
@ -125,7 +125,7 @@ const Header = (props: Props) => {
) : ( ) : (
<> <>
<div className="flex lg:gap-4 gap-10 items-center"> <div className="flex lg:gap-4 gap-10 items-center">
<ul className="flex lg:gap-4 "> <ul className="flex lg:gap-8 ">
{menuItems.map((item) => ( {menuItems.map((item) => (
<HashLink <HashLink
to={`${item.path}#${item.id}`} to={`${item.path}#${item.id}`}
@ -144,7 +144,7 @@ const Header = (props: Props) => {
))} ))}
<li className="inline-block group relative"> <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"> <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{" "} SGPT Products
</p> </p>
<div className=" h-10 w-[140px] absolute top-3"></div> <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"> <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">
@ -171,7 +171,7 @@ const Header = (props: Props) => {
{currentLanguage} {currentLanguage}
</span> </span>
<div className=" h-10 w-[140px] absolute top-3"></div> <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"> <ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 bg-slate-800 w-[120px] rounded z-10">
{languages.map((lng, index) => ( {languages.map((lng, index) => (
<> <>
<li <li
@ -187,7 +187,7 @@ const Header = (props: Props) => {
</ul> </ul>
</div> </div>
</ul> </ul>
<div className="flex gap-4"> <div className="flex gap-4 z-20">
<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">
<BsNewspaper /> <BsNewspaper />
@ -300,7 +300,7 @@ const Header = (props: Props) => {
</div> </div>
) : ( ) : (
<div className="fixed z-30 w-full p-5 transition-all duration-150"> <div className="fixed z-30 w-full p-5 transition-all duration-150">
<div className="container mx-auto flex justify-between items-center"> <div className="container mx-auto flex justify-between items-center xl:w-[90%]">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<div className="bg-white w-12 rounded-full overflow-hidden p-1"> <div className="bg-white w-12 rounded-full overflow-hidden p-1">
<img <img
@ -356,7 +356,7 @@ const Header = (props: Props) => {
{currentLanguage} {currentLanguage}
</span> </span>
<div className=" h-9 w-[140px] absolute top-3"></div> <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 "> <ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 lg:w-[120px] lg:pb-[12px] z-10 ">
{languages.map((lng, index) => ( {languages.map((lng, index) => (
<> <>
<li <li

2
src/shared/components/backtotop/index.tsx
Unescape View File

@ -32,7 +32,7 @@ const BackToTopButton = () => {
return ( return (
<div <div
className={`bg-orange-500 back-to-top ${ className={`bg-orange-500 back-to-top hover:scale-[1.1] transition-all duration-1000 ease-in-out right-0 md:right-[20px] bottom-[10px] md:bottom-[20px] w-[40px] h-[40px] sm:w-[60px] sm:h-[60px] ${
isVisible ? "visible" : "" isVisible ? "visible" : ""
} group relative m-12 flex justify-center z-[1000]`} } group relative m-12 flex justify-center z-[1000]`}
onClick={scrollToTop} onClick={scrollToTop}

15
src/shared/components/css/QnASection.css
Unescape View File

@ -1,17 +1,26 @@
.iconDropDown { .iconDropDown {
transform: rotate(0deg); transform: rotate(0deg);
transition: transform 2.5s; /* transition: transform 2.5s; */
} }
.iconDropUp { .iconDropUp {
transform: rotate(180deg); transform: rotate(180deg);
transition: transform 1s; /* transition: transform 1s; */
} }
.listItem__QnA { .listItem__QnA {
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: all 1.5s ease-in-out; /* transition: all 1s ease-in; */
} }
.listItem__QnA-active { .listItem__QnA-active {
max-height: 150vh; max-height: 150vh;
} }
.transitionHoverArrow {
transition-property: font-size;
transition-duration: 300ms;
}
.transitionArrowUpAndDown {
transition-property: rotate;
transition-duration: 3000ms;
}

10
src/shared/components/css/Roadmap.css
Unescape View File

@ -6,14 +6,14 @@
} }
#timeline:hover .tl-item { #timeline:hover .tl-item {
width: 20%; /* width: 25%; */
} }
.tl-item { .tl-item {
width: 100%; width: 100%;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
position: relative; position: relative;
height: 80vh; height: 70vh;
color: #fff; color: #fff;
overflow: hidden; overflow: hidden;
transition: width 0.5s ease; transition: width 0.5s ease;
@ -61,11 +61,11 @@
.tl-item:hover .tl-content { .tl-item:hover .tl-content {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
transition: all 0.75s ease 0.5s; transition: all 0.5s ease 0.5s;
} }
.tl-item:hover .tl-title { .tl-item:hover .tl-title {
top: 15%; top: 15%;
transition: all 0.75s ease 0.5s; transition: all 0.5s ease 0.5s;
} }
.tl-item:hover .tl-bg { .tl-item:hover .tl-bg {
filter: grayscale(0); filter: grayscale(0);
@ -112,7 +112,7 @@
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
#timeline { #timeline {
width: 75%; width: 85%;
margin: 0 auto; margin: 0 auto;
} }
.tl-item:hover { .tl-item:hover {

6
src/shared/components/healthcare/ApproachSection.tsx
Unescape View File

@ -65,7 +65,7 @@ const Approach = () => {
}, [t]); }, [t]);
return ( return (
<div <div
className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative" className="container lg:w-[94%] mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
id="appRoach" id="appRoach"
> >
<h1 className="text-4xl font-bold text-center pb-20 ">The Approach​ ​</h1> <h1 className="text-4xl font-bold text-center pb-20 ">The Approach​ ​</h1>
@ -73,9 +73,11 @@ const Approach = () => {
{appRoachData.map((item: any) => { {appRoachData.map((item: any) => {
return ( return (
<div <div
data-aos="zoom-in"
data-aos-duration="500"
className="flex flex-col shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] 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)] 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%] " 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"> <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}> <p className=" text-2xl text-center" key={item.title}>

2
src/shared/components/healthcare/Competitions.tsx
Unescape View File

@ -4,7 +4,7 @@ const Competitions = () => {
return ( return (
<div <div
id="competitions" id="competitions"
className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative" 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> <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="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%] ">

18
src/shared/components/healthcare/CustomerInsight.tsx
Unescape View File

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

34
src/shared/components/healthcare/FirstSection.tsx
Unescape View File

@ -5,26 +5,26 @@ const FirstSection = () => {
return ( return (
<div <div
id="firstSection" id="firstSection"
className="flex items-center justify-around min-h-[100vh] bg-gradient-to-r from-cyan-500 to-blue-500" className=" flex items-center min-h-[100vh] bg-gradient-to-r from-cyan-500 to-blue-500"
> >
<h1 className="pl-12 text-white text-5xl font-bold"> <div className="container w-[94%] flex justify-between mx-auto">
SGPT for Healthcare <h1 className="text-white text-5xl font-bold">SGPT for Healthcare</h1>
</h1> <div className=" lg:h-full lg:w-1/5 hidden lg:flex justify-center items-center relative">
<div className="lg:h-full lg:w-1/5 hidden lg:flex justify-center items-center relative"> <img
<img src={robotImage2}
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"
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"
alt="robot-ai" />
/>
<img <img
src={robotImage} 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" 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" 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 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="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> </div>
</div> </div>
); );

14
src/shared/components/healthcare/ProblemsSection.tsx
Unescape View File

@ -2,7 +2,8 @@ import React, { useState, useEffect } from "react";
import { HiOutlineUserGroup } from "react-icons/hi"; import { HiOutlineUserGroup } from "react-icons/hi";
import { TbReportSearch } from "react-icons/tb"; import { TbReportSearch } from "react-icons/tb";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Aos from "aos";
import "aos/dist/aos.css";
import userBehavior from "../../../assets/images/icon-user-behavior.png"; import userBehavior from "../../../assets/images/icon-user-behavior.png";
import userInformation from "../../../assets/images/image20.png"; import userInformation from "../../../assets/images/image20.png";
import userInteraction from "../../../assets/images/image21.png"; import userInteraction from "../../../assets/images/image21.png";
@ -26,6 +27,9 @@ const listProblems = [
}, },
]; ];
const ProblemsSection = () => { const ProblemsSection = () => {
useEffect(() => {
Aos.init();
}, []);
const { t } = useTranslation("problemsSectionHealthCare"); const { t } = useTranslation("problemsSectionHealthCare");
const [problemsSectionData, setProblemsSectionData] = useState([]); const [problemsSectionData, setProblemsSectionData] = useState([]);
useEffect(() => { useEffect(() => {
@ -33,7 +37,7 @@ const ProblemsSection = () => {
}, [t]); }, [t]);
return ( return (
<div <div
className="container mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative" className="container w-[94%] mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative"
id="problems" id="problems"
> >
<h1 className="text-4xl font-bold text-center pb-20 relative"> <h1 className="text-4xl font-bold text-center pb-20 relative">
@ -50,7 +54,11 @@ const ProblemsSection = () => {
return ( return (
<> <>
<p className="line-problems first:hidden my-auto w-[2px] h-[150px] bg-slate-400"></p> <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
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="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"> <div className="flex flex-col gap-y-2 items-center">
<img className="w-[44px] h-[44px] " src={item.src} alt="" /> <img className="w-[44px] h-[44px] " src={item.src} alt="" />

53
src/shared/components/healthcare/SolutionsOfProduct​.tsx
Unescape View File

@ -1,12 +1,14 @@
import React from "react"; import React, { useEffect } from "react";
import { BiSearchAlt } from "react-icons/bi"; import { BiSearchAlt } from "react-icons/bi";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { TbFileDislike, TbFileLike } from "react-icons/tb"; import { TbFileDislike, TbFileLike } from "react-icons/tb";
import { AiOutlineMessage } from "react-icons/ai"; import { AiOutlineMessage } from "react-icons/ai";
import customerInsight from "../../../assets/images/image22.png";
import { BsDatabaseCheck } from "react-icons/bs"; import { BsDatabaseCheck } from "react-icons/bs";
import { RiCodeSSlashLine, RiSettings4Line } from "react-icons/ri"; 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 = [ const listSolutions = [
{ {
title: "DATA", title: "DATA",
@ -30,17 +32,24 @@ const listSolutions = [
}, },
]; ];
const SolutionsOfProduct = () => { const SolutionsOfProduct = () => {
useEffect(() => {
Aos.init();
}, []);
const { t } = useTranslation("solutionsOfProductHealthCare"); const { t } = useTranslation("solutionsOfProductHealthCare");
return ( return (
<div <div
className="container mx-auto text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg px-10" className="w-full text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg px-10"
id="solutionsOfProduct" id="solutionsOfProduct"
> >
<h1 className="text-4xl font-bold text-center pb-20 relative"> <h1 className="text-4xl font-bold text-center pb-20 relative">
The Solutions of Product​ The Solutions of Product​
</h1> </h1>
<div className="flex flex-col gap-y-10 w-[100%] md:w-[60%] h-full"> <div className="container w-[94%] mx-auto flex flex-col gap-y-10 h-full">
<div className="flex items-center w-full gap-x-8"> <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"> <div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
<BsDatabaseCheck <BsDatabaseCheck
className="text-white text-[32px] group-hover:rotateY transition-all className="text-white text-[32px] group-hover:rotateY transition-all
@ -55,8 +64,20 @@ const SolutionsOfProduct = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div className="w-[2px] h-[40px] ml-[40px] bg-black"></div> <div
<div className="flex items-center w-full gap-x-8"> 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"> <div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
<RiCodeSSlashLine <RiCodeSSlashLine
className="text-white text-[32px] group-hover:rotateY transition-all className="text-white text-[32px] group-hover:rotateY transition-all
@ -70,9 +91,21 @@ const SolutionsOfProduct = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div className="w-[2px] h-[40px] ml-[40px] bg-black"></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 className="flex items-center w-full gap-x-8"> <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"> <div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
<RiSettings4Line <RiSettings4Line
className="text-white text-[32px] group-hover:rotateY transition-all className="text-white text-[32px] group-hover:rotateY transition-all

4
src/shared/components/home/AboutSection.tsx
Unescape View File

@ -16,13 +16,13 @@ const AboutSection = (props: Props) => {
return ( return (
<div <div
className="container mx-auto text-white py-2 lg:flex-row flex-col flex relative scroll-mt-16 " className="container mx-auto text-white py-2 lg:flex-row flex-col flex relative scroll-mt-16 w-[94%] "
id="about" id="about"
style={{ style={{
backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`, backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`,
}} }}
> >
<div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8 pt-2 order-1"> <div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8 pt-2 order-1 xl:px-0 ">
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<h4 className="text-3xl uppercase font-bold hover:text-orange-400"> <h4 className="text-3xl uppercase font-bold hover:text-orange-400">
{t("title1")} {t("title1")}

8
src/shared/components/home/FirstSection.tsx
Unescape View File

@ -68,7 +68,7 @@ const FirstSection = () => {
}); });
return ( return (
<animated.div <animated.div
className=" lg:min-h-screen sm:px-1 md:px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative" className=" lg:min-h-screen sm:px-1 md:px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative"
id="home" id="home"
style={springs} style={springs}
> >
@ -86,8 +86,8 @@ const FirstSection = () => {
<source src={VideoSGPTBg} type="video/mp4" /> <source src={VideoSGPTBg} type="video/mp4" />
</video> </video>
</div> </div>
<div className="absolute top-0 left-0 w-full h-full bg-black opacity-60 "></div> <div className="absolute top-0 left-0 w-full h-full bg-black opacity-60 "></div>
<div className="container flex mx-auto min-h-[70vh] justify-center text-white z-20 mt-20"> <div className="container flex mx-auto min-h-[70vh] justify-center text-white z-20 mt-20 w-[94%] ">
<div className="lg:w-4/5 w-[99%] sm:w-full flex flex-col justify-center lg:pb-0 gap-16 pb-20 z-50 px-1"> <div className="lg:w-4/5 w-[99%] sm:w-full flex flex-col justify-center lg:pb-0 gap-16 pb-20 z-50 px-1">
<div className="flex flex-col gap-10 "> <div className="flex flex-col gap-10 ">
<h4 className="lg:w-3/4 lg:text-5xl md:text-5xl text-3xl font-bold hover:text-orange-400"> <h4 className="lg:w-3/4 lg:text-5xl md:text-5xl text-3xl font-bold hover:text-orange-400">
@ -132,7 +132,7 @@ const FirstSection = () => {
key={social.name} key={social.name}
onClick={() => window.open(social.link, "_blank")} onClick={() => window.open(social.link, "_blank")}
> >
<div className="flex items-center gap-2 transform motion-safe:hover:scale-110"> <div className="flex items-center gap-2 transform motion-safe:hover:scale-110 transition-all duration-500">
{social.icon} {social.icon}
{social.name} {social.name}
</div> </div>

12
src/shared/components/home/QnASection.tsx
Unescape View File

@ -183,14 +183,14 @@ const QnASection = (props: Props) => {
return ( return (
<div <div
className="container animate-[5s_ease] min-h-[400px] mb-[100px] lg:justify-center lg:flex mx-auto py-2 text-white " className="container flex flex-col lg:flex-row w-[94%] animate-[5s_ease] min-h-[400px] mb-[100px] lg:justify-center mx-auto py-2 text-white "
id="qna" id="qna"
> >
<div className="w-full lg:w-[50%] min-h-[100px]"> <div className="w-full lg:w-[50%] min-h-[100px] ">
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> <h1 className="text-4xl font-bold text-center hover:text-orange-400">
FAQS FAQS
</h1> </h1>
<h2 className="text-center "> <h2 className="text-center">
{t("navtitle")} {t("navtitle")}
{/* Out here. Got a question that’s not on the list? Let us know {/* Out here. Got a question that’s not on the list? Let us know
below! */} below! */}
@ -214,7 +214,7 @@ const QnASection = (props: Props) => {
showListItem("title" + item.id, index + item.title) showListItem("title" + item.id, index + item.title)
} }
> >
<div className="w-full min-h-[20px] flex justify-between items-center p-2 z-10 relative "> <div className="w-full min-h-[20px] flex justify-between items-center p-2 z-10 relative group ">
{/* <div {/* <div
className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`} className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`}
></div> */} ></div> */}
@ -224,11 +224,11 @@ const QnASection = (props: Props) => {
<div className="listQnA h-6 w-6 flex cursor-pointer "> <div className="listQnA h-6 w-6 flex cursor-pointer ">
<VscChevronDown <VscChevronDown
id={index + item.title} id={index + item.title}
className="iconDropDown iconActive hover:text-2xl m-auto text-orange-500" className="iconDropDown iconActive group-hover:text-2xl m-auto text-orange-500 transition-all duration-500 ease-in-out"
/> />
</div> </div>
</div> </div>
<ul className="listItem__QnA flex-col w-full list-answer "> <ul className="listItem__QnA flex-col w-full transition-all duration-1000 ease-in">
{item.contents.map((list: any, index: any) => { {item.contents.map((list: any, index: any) => {
return ( return (
<li <li

11
src/shared/components/home/RoadMap.tsx
Unescape View File

@ -51,7 +51,7 @@ const RoadMap = (props: Props) => {
return ( return (
<div <div
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20" className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20 w-[94%] "
id="roadmap" id="roadmap"
> >
<h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20 relative"> <h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20 relative">
@ -61,7 +61,7 @@ const RoadMap = (props: Props) => {
<animated.div <animated.div
id="timeline" id="timeline"
style={{ ...styles }} style={{ ...styles }}
className="w-full flex flex-col gap-y-4 md:flex-row" className="w-full flex flex-col gap-y-4 lg:flex-row"
> >
{/* <animated.div {/* <animated.div
style={{ ...styles1 }} style={{ ...styles1 }}
@ -69,7 +69,10 @@ const RoadMap = (props: Props) => {
></animated.div> */} ></animated.div> */}
{roadMapData.map((item: any, index: any) => { {roadMapData.map((item: any, index: any) => {
return ( return (
<div key={index} className="tl-item md:hover:w-[35%!important] "> <div
key={index}
className="tl-item w-[80%]mx-auto lg:hover:w-[150%!important] "
>
<div <div
className="tl-bg" className="tl-bg"
style={{ style={{
@ -77,7 +80,7 @@ const RoadMap = (props: Props) => {
}} }}
></div> ></div>
<h4 className="tl-title">{item.phase}</h4> <h4 className="tl-title">{item.phase}</h4>
<ol className="tl-content flex flex-col gap-y-[12px]"> <ol className="tl-content w-[90%] md:w-[60%] lg:w-[90%] mx-auto flex flex-col gap-y-[12px]">
{item.listTitle.map((listItem: any, index: any) => { {item.listTitle.map((listItem: any, index: any) => {
return ( return (
<li key={index} className="flex items-center gap-x-[20px]"> <li key={index} className="flex items-center gap-x-[20px]">

2
src/shared/components/home/TokenomicsSection.tsx
Unescape View File

@ -185,7 +185,7 @@ const TokenomicsSection = (props: Props) => {
ChartJS.register(ChartDataLabels); ChartJS.register(ChartDataLabels);
return ( return (
<div className="w-full pb-24 scroll-mt-16" id="tokenomics"> <div className="w-full pb-24 scroll-mt-16" id="tokenomics">
<div className="container mx-auto"> <div className="container w-[94%] mx-auto">
<h1 className="text-4xl text-white font-bold text-center mb-16 hover:text-orange-400"> <h1 className="text-4xl text-white font-bold text-center mb-16 hover:text-orange-400">
Tokenomics Tokenomics
</h1> </h1>

Write Preview
Loading…
Cancel
Save