dothuong
1 year ago
parent
bdbb716e6a
commit
91ce5fc70c
|
After Width: | Height: | Size: 439 B |
|
After Width: | Height: | Size: 191 B |
|
After Width: | Height: | Size: 482 B |
|
After Width: | Height: | Size: 191 B |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 197 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 918 KiB |
@ -0,0 +1,35 @@ |
|||||||
|
{ |
||||||
|
"title": "Build for growth", |
||||||
|
"array": [ |
||||||
|
{ |
||||||
|
"button": "Gaming", |
||||||
|
"title": "Lorem ipsum1", |
||||||
|
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"button": "Lorem", |
||||||
|
"title": "Lorem ipsum2", |
||||||
|
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"button": "Ipsum", |
||||||
|
"title": "Lorem ipsum3", |
||||||
|
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"button": "Dolor sit", |
||||||
|
"title": "Lorem ipsum4", |
||||||
|
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"button": "Amet", |
||||||
|
"title": "Lorem ipsum5", |
||||||
|
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio. Nunc in mauris eu libero gravida varius. Integer finibus orci porta, facilisis erat in, interdum sem", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -1,3 +1,9 @@ |
|||||||
{ |
{ |
||||||
"title": "SGPT for Healthcare" |
|
||||||
|
"title1": "A", |
||||||
|
"title2": "digital currency payment", |
||||||
|
"title3": "for chat bot services", |
||||||
|
"content": "The SGPT Token is a digital currency designed to facilitate payments for services provided by the SGPT chat bot. The chat bot is a powerful tool that utilizes artificial intelligence to communicate with users and provide valuable information and services.", |
||||||
|
"button1": "Adress on BSC", |
||||||
|
"button2": "How it works" |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"heading": "How it works" |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"heading": "Join a community of millions", |
||||||
|
"number1": "11,000", |
||||||
|
"content1": "Lorem ipsum dolor sit", |
||||||
|
"number2": "11,000", |
||||||
|
"content2": "Lorem ipsum dolor sit", |
||||||
|
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a euismod risus, at vestibulum odio", |
||||||
|
"button": "Button name" |
||||||
|
} |
||||||
@ -1,22 +0,0 @@ |
|||||||
{ |
|
||||||
"data1": { |
|
||||||
"title": "DATA", |
|
||||||
"contents": { |
|
||||||
"content1": "Reliable and authoritative data sources.", |
|
||||||
"content2": "The data is certified by hospitals and specialist doctors." |
|
||||||
} |
|
||||||
}, |
|
||||||
"data2": { |
|
||||||
"title": "TECHNOLOGY", |
|
||||||
"contents": { |
|
||||||
"content1": "The development and research team has extensive experience in developing products in the healthcare industry." |
|
||||||
} |
|
||||||
}, |
|
||||||
"data3": { |
|
||||||
"title": "CUSTOMIZATION", |
|
||||||
"contents": { |
|
||||||
"content1": "The server is designed to handle large amounts of data and has high scalabilit.", |
|
||||||
"content2": "The system is highly customizable and adaptable to each business and hospital." |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,35 @@ |
|||||||
|
{ |
||||||
|
"title": "Xây dựng cho sự phát triển", |
||||||
|
"array": [ |
||||||
|
{ |
||||||
|
"button": "Gaming", |
||||||
|
"title": "Lorem ipsum", |
||||||
|
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"button": "Lorem", |
||||||
|
"title": "Lorem ipsum1", |
||||||
|
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"button": "Ipsum", |
||||||
|
"title": "Lorem ipsum2", |
||||||
|
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"button": "Dolor sit3", |
||||||
|
"title": "Lorem ipsum", |
||||||
|
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"button": "Amet", |
||||||
|
"title": "Lorem ipsum", |
||||||
|
"content": "Token SGPT được xây dựng với mục tiêu hỗ trợ cho việc phát triển ứng dụng trò chơi. Trò chơi là một phạm trù mà SGPT Token có thể được sử dụng để thực hiện thanh toán và tạo ra trải nghiệm thú vị cho người chơi. Với khả năng xử lý giao dịch nhanh chóng và hiệu quả, SGPT Token đảm bảo rằng việc thanh toán trong trò chơi diễn ra một cách suôn sẻ.", |
||||||
|
"link": "https://sgpt-ai.org/" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -1,3 +1,8 @@ |
|||||||
{ |
{ |
||||||
"title": "SGPT for Healthcare" |
"title1": "", |
||||||
|
"title2": "Thanh toán bằng tiền tệ số hóa", |
||||||
|
"title3": "cho dịch vụ trợ lý ảo", |
||||||
|
"content": "Token SGPT là một loại tiền tệ số hóa được thiết kế để hỗ trợ thanh toán cho các dịch vụ được cung cấp bởi trợ lý ảo SGPT. Trợ lý ảo này là một công cụ mạnh mẽ sử dụng trí tuệ nhân tạo để giao tiếp với người dùng và cung cấp thông tin và dịch vụ có giá trị.", |
||||||
|
"button1": "Địa chỉ trên BSC", |
||||||
|
"button2": "Cách hoạt động" |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"heading": "Cách hoạt động" |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"heading": "Tham gia cộng đồng hàng triệu người", |
||||||
|
"number1": "11.000", |
||||||
|
"content1": "Lorem ipsum dolor sit", |
||||||
|
"number2": "11.000", |
||||||
|
"content2": "Lorem ipsum dolor sit", |
||||||
|
"title": "Khách hàng rất quan trọng, khách hàng sẽ được khách hàng theo đuổi. Sân khấu rộn tiếng cười nhưng tiền sảnh bị ghét", |
||||||
|
"button": "Tên nút" |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
{ |
||||||
|
"heading": "Dành cho sự tiếp nhận rộng rãi", |
||||||
|
"title1": "Nhanh", |
||||||
|
"content1_1": "Token SGPT được thiết kế với mục tiêu tối ưu hóa tốc độ giao dịch và khả năng xử lý. Sử dụng công nghệ tiên tiến, Token SGPT cho phép thực hiện các giao dịch một cách nhanh chóng và hiệu quả. Điều này đảm bảo rằng việc thanh toán và sử dụng dịch vụ của trợ lý ảo SGPT diễn ra một cách trôi chảy và thuận tiện cho người dùng.", |
||||||
|
"content1_2": "4.824", |
||||||
|
"content1_3": "GIAO DỊCH MỖI GIÂY", |
||||||
|
"line1": "/images/line1.svg", |
||||||
|
|
||||||
|
"title2": "Nhanh", |
||||||
|
"content2_1": "Token SGPT được thiết kế với mục tiêu tối ưu hóa tốc độ giao dịch và khả năng xử lý. Sử dụng công nghệ tiên tiến, Token SGPT cho phép thực hiện các giao dịch một cách nhanh chóng và hiệu quả. Điều này đảm bảo rằng việc thanh toán và sử dụng dịch vụ của trợ lý ảo SGPT diễn ra một cách trôi chảy và thuận tiện cho người dùng.", |
||||||
|
"content2_2": "4.824", |
||||||
|
"content2_3": "GIAO DỊCH MỖI GIÂY", |
||||||
|
"line2": "/images/line2.svg", |
||||||
|
|
||||||
|
"title3": "Nhanh", |
||||||
|
"content3_1": "Token SGPT được thiết kế với mục tiêu tối ưu hóa tốc độ giao dịch và khả năng xử lý. Sử dụng công nghệ tiên tiến, Token SGPT cho phép thực hiện các giao dịch một cách nhanh chóng và hiệu quả. Điều này đảm bảo rằng việc thanh toán và sử dụng dịch vụ của trợ lý ảo SGPT diễn ra một cách trôi chảy và thuận tiện cho người dùng.", |
||||||
|
"content3_2": "4.824", |
||||||
|
"content3_3": "GIAO DỊCH MỖI GIÂY", |
||||||
|
"line3": "/images/line3.svg", |
||||||
|
|
||||||
|
"title4": "Nhanh", |
||||||
|
"content4_1": "Token SGPT được thiết kế với mục tiêu tối ưu hóa tốc độ giao dịch và khả năng xử lý. Sử dụng công nghệ tiên tiến, Token SGPT cho phép thực hiện các giao dịch một cách nhanh chóng và hiệu quả. Điều này đảm bảo rằng việc thanh toán và sử dụng dịch vụ của trợ lý ảo SGPT diễn ra một cách trôi chảy và thuận tiện cho người dùng.", |
||||||
|
"content4_2": "4.824", |
||||||
|
"content4_3": "GIAO DỊCH MỖI GIÂY", |
||||||
|
"line4": "/images/line4.svg" |
||||||
|
} |
||||||
@ -1,22 +0,0 @@ |
|||||||
{ |
|
||||||
"data1": { |
|
||||||
"title": "Dữ liệu", |
|
||||||
"contents": { |
|
||||||
"content1": "Nguồn dữ liệu đáng tin cậy và có thẩm quyền..", |
|
||||||
"content2": "Số liệu được xác nhận bởi các bệnh viện và bác sĩ chuyên khoa." |
|
||||||
} |
|
||||||
}, |
|
||||||
"data2": { |
|
||||||
"title": "CÔNG NGHỆ", |
|
||||||
"contents": { |
|
||||||
"content1": "Nhóm nghiên cứu và phát triển có nhiều kinh nghiệm trong việc phát triển các sản phẩm trong ngành chăm sóc sức khỏe." |
|
||||||
} |
|
||||||
}, |
|
||||||
"data3": { |
|
||||||
"title": "TÙY CHỈNH", |
|
||||||
"contents": { |
|
||||||
"content1": "Máy chủ được thiết kế để xử lý lượng dữ liệu lớn và có khả năng mở rộng cao.", |
|
||||||
"content2": "Hệ thống có khả năng tùy biến cao và thích ứng với từng doanh nghiệp, bệnh viện." |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,6 @@ |
|||||||
|
.border-gradient { |
||||||
|
border-right: 2px solid transparent; /* Đặt border ban đầu thành trong suốt */ |
||||||
|
border-image: linear-gradient(120deg, #ffb55e 0%, #40e9ac 100%); |
||||||
|
border-image-slice: 1; /* Hiển thị toàn bộ border gradient */ |
||||||
|
border-radius: 0.375rem; |
||||||
|
} |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
@keyframes marquee { |
||||||
|
0% { |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
100% { |
||||||
|
left: -900%; |
||||||
|
} |
||||||
|
} |
||||||
|
.animate { |
||||||
|
width: 1800%; |
||||||
|
animation: marquee 20s linear infinite; |
||||||
|
top: 50%; |
||||||
|
transform: translate(0, -50%); |
||||||
|
} |
||||||
|
.logo img { |
||||||
|
width: 80px; |
||||||
|
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); |
||||||
|
} |
||||||
|
@screen lg { |
||||||
|
@keyframes marquee { |
||||||
|
0% { |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
100% { |
||||||
|
left: -375%; |
||||||
|
} |
||||||
|
} |
||||||
|
.animate { |
||||||
|
width: 750%; |
||||||
|
animation: marquee 20s linear infinite; |
||||||
|
top: 50%; |
||||||
|
transform: translate(0, -50%); |
||||||
|
} |
||||||
|
.logo a { |
||||||
|
width: 100px; |
||||||
|
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.animate:hover { |
||||||
|
animation-play-state: paused; |
||||||
|
} |
||||||
|
|
||||||
|
.logo a:hover { |
||||||
|
transform: scale(1.3); |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
.chartjs-tooltip { |
||||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||||
|
border: 1px solid #000; |
||||||
|
border-radius: 4px; |
||||||
|
padding: 6px 10px; |
||||||
|
color: #fff; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import { useTranslation } from "react-i18next"; |
||||||
|
import { AiOutlineArrowRight } from "react-icons/Ai"; |
||||||
|
import buildofgrowth from "../../../assets/images/buildforgrowth.png"; |
||||||
|
import logoGoogle from "../../../assets/images/logoGoogle.png"; |
||||||
|
import logoMicrosoft from "../../../assets/images/logoMicrosoft.png"; |
||||||
|
import "../css/Competitions.css"; |
||||||
|
|
||||||
|
const BuildForGrowth = () => { |
||||||
|
const { t } = useTranslation("buildForGrowthSectionHealthCare"); |
||||||
|
const [competitionsData, setCompetitionsData] = useState([]); |
||||||
|
const [growthBtn, setGrowthBtn] = useState(0); |
||||||
|
const [growthIndex, setGrowthIndex] = useState(""); |
||||||
|
|
||||||
|
const handleSelectedGrowth = (item: any, index: any) => { |
||||||
|
setGrowthIndex(`${-20 * index}%`); |
||||||
|
setGrowthBtn(index); |
||||||
|
}; |
||||||
|
useEffect(() => { |
||||||
|
setCompetitionsData(t("array", { returnObjects: true })); |
||||||
|
}, [t]); |
||||||
|
console.log(competitionsData); |
||||||
|
return ( |
||||||
|
<div id="competitions" className="bg-[#212B30]"> |
||||||
|
<div className="container w-[100%] mx-auto text-white animate-on-scroll my-20 relative "> |
||||||
|
<div className="flex flex-col justify-between gap-6 "> |
||||||
|
<div className="flex justify-between"> |
||||||
|
<h1 className="text-4xl font-bold ">{t("title")}</h1> |
||||||
|
<div className="flex items-center w-[55%]"> |
||||||
|
{competitionsData.map((item: any, index) => ( |
||||||
|
<div |
||||||
|
key={index} |
||||||
|
className={ |
||||||
|
"cursor-pointer " + |
||||||
|
(growthBtn === index |
||||||
|
? "rounded-lg bg-gradient-to-r from-[#FFB55E] to-[#40E9AC] p-[1px]" |
||||||
|
: "rounded-lg p-[1px]") |
||||||
|
} |
||||||
|
onClick={() => handleSelectedGrowth(item.button, index)} |
||||||
|
> |
||||||
|
<p className="w-full h-full px-5 bg-[#212B30] py-2 rounded-lg"> |
||||||
|
{item?.button} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="flex justify-between "> |
||||||
|
<div className="w-[40%]"> |
||||||
|
<img src={buildofgrowth} alt="" /> |
||||||
|
</div> |
||||||
|
<div className="w-[55%] overflow-hidden"> |
||||||
|
<div |
||||||
|
style={{ transform: `translateX(${growthIndex})` }} |
||||||
|
className={`flex w-[500%] transition-all `} |
||||||
|
> |
||||||
|
{competitionsData.map((item: any, index) => ( |
||||||
|
<div className="flex flex-col gap-3 w-full"> |
||||||
|
<h3 className="font-semibold text-2xl">{item.title}</h3> |
||||||
|
<span>{item.content}</span> |
||||||
|
<div className="text-[#FFB55D] flex gap-6 items-center pt-3 group"> |
||||||
|
<a className=" underline" href={item.link}> |
||||||
|
Lorem ipsum dolor sit amet |
||||||
|
</a> |
||||||
|
<AiOutlineArrowRight className="group-hover:translate-x-2 transition-all" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className=" flex gap-20 justify-around items-center "> |
||||||
|
<img src={logoGoogle} alt="" /> |
||||||
|
<img src={logoMicrosoft} alt="" /> |
||||||
|
<img src={logoGoogle} alt="" /> |
||||||
|
<img src={logoMicrosoft} alt="" /> |
||||||
|
<img src={logoGoogle} alt="" /> |
||||||
|
<img src={logoMicrosoft} alt="" /> |
||||||
|
<img src={logoGoogle} alt="" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default BuildForGrowth; |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
import { useEffect } from "react"; |
||||||
|
import { useTranslation } from "react-i18next"; |
||||||
|
import { BsDatabaseCheck } from "react-icons/bs"; |
||||||
|
import { RiCodeSSlashLine, RiSettings4Line } from "react-icons/ri"; |
||||||
|
import ImgJoin1 from "../../../assets/images/JoinsCoM1.png"; |
||||||
|
import ImgJoin2 from "../../../assets/images/JoinsCoM2.png"; |
||||||
|
import ImgJoin3 from "../../../assets/images/JoinsCoM3.png"; |
||||||
|
import ImgJoin4 from "../../../assets/images/JoinsCoM4.png"; |
||||||
|
import ImgJoin5 from "../../../assets/images/JoinsCoM5.png"; |
||||||
|
import React from "react"; |
||||||
|
import Aos from "aos"; |
||||||
|
import "aos/dist/aos.css"; |
||||||
|
const JoinACommunityOfMillions = () => { |
||||||
|
useEffect(() => { |
||||||
|
Aos.init(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const { t } = useTranslation("joinACommunityOfMillionsHealthCare"); |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="w-full text-white bg-[#22353F] md:min-h-[60vh] animate-on-scroll py-20 rounded-lg px-10" |
||||||
|
id="solutionsOfProduct" |
||||||
|
> |
||||||
|
<div className=" mx-auto flex flex-col gap-y-10 h-full"> |
||||||
|
<h1 className="text-4xl font-bold text-center pb-20 relative"> |
||||||
|
{t("heading")} |
||||||
|
</h1> |
||||||
|
<div className="flex flex-col gap-10 justify-center text-center"> |
||||||
|
<div className="flex gap-5 justify-center"> |
||||||
|
<div className=""> |
||||||
|
<img className="" src={ImgJoin1} alt="" /> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col justify-between "> |
||||||
|
<img className="" src={ImgJoin2} alt="" /> |
||||||
|
<div className="h-1/2 flex flex-col justify-center gap-3"> |
||||||
|
<span className="text-[#FFB55D] text-3xl font-semibold"> |
||||||
|
{t("number1")} |
||||||
|
</span> |
||||||
|
<span className="text-xl max-w-[242px]">{t("content1")}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className=" "> |
||||||
|
<img className="" src={ImgJoin3} alt="" /> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col justify-between "> |
||||||
|
<div className="h-1/2 flex flex-col justify-center gap-3"> |
||||||
|
<span className="text-[#65DD9B] text-3xl font-semibold"> |
||||||
|
{t("number2")} |
||||||
|
</span> |
||||||
|
<span className="text-xl max-w-[242px]">{t("content2")}</span> |
||||||
|
</div> |
||||||
|
<img className="" src={ImgJoin4} alt="" /> |
||||||
|
</div> |
||||||
|
<div className=""> |
||||||
|
<img className="" src={ImgJoin5} alt="" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p>{t("title")}</p> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<button className="bg-gradient-to-r from-[#FFB55E] to-[#40E9AC] px-4 py-2 rounded-lg min-w-[102px]"> |
||||||
|
{t("button")} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default JoinACommunityOfMillions; |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import { useState, useEffect } from "react"; |
||||||
|
import { useTranslation } from "react-i18next"; |
||||||
|
import Aos from "aos"; |
||||||
|
import "aos/dist/aos.css"; |
||||||
|
|
||||||
|
const SectionSection = () => { |
||||||
|
useEffect(() => { |
||||||
|
Aos.init(); |
||||||
|
}, []); |
||||||
|
const { t } = useTranslation("secondSectionHealthCare"); |
||||||
|
const [problemsSectionData, setProblemsSectionData] = useState([]); |
||||||
|
useEffect(() => { |
||||||
|
setProblemsSectionData(t("data", { returnObjects: true })); |
||||||
|
}, [t]); |
||||||
|
return ( |
||||||
|
<div className="bg-[#22353F]"> |
||||||
|
<div |
||||||
|
className="container flex flex-col w-[100%] mx-auto min-h-[175px] py-20 text-white animate-on-scroll relative gap-10" |
||||||
|
id="problems" |
||||||
|
> |
||||||
|
<h1 className="text-4xl font-bold text-center">{t("title")}</h1> |
||||||
|
<div |
||||||
|
className="flex flex-col items-center justify-between md:flex-row gap-14
|
||||||
|
" |
||||||
|
> |
||||||
|
{problemsSectionData.map((item: any, index) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<p className="line-problems first:hidden my-auto w-1 h-[99px] bg-gradient-to-b from-[#FFB55E] to-[#40E9AC]"></p> |
||||||
|
<div |
||||||
|
data-aos="flip-left" |
||||||
|
data-aos-duration="500" |
||||||
|
className="flex h-full [&>*:first-child]:items-center w-1/4 " |
||||||
|
> |
||||||
|
<div className="relative flex items-center gap-2 justify-center "> |
||||||
|
<span |
||||||
|
className="text-5xl text-[#FFB55D] font-[600]" |
||||||
|
key={item.title + index} |
||||||
|
> |
||||||
|
{item.title} |
||||||
|
</span> |
||||||
|
<span className="text-base leading-snug font-[600]"> |
||||||
|
{item.content} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default SectionSection; |
||||||
Loading…
Reference in new issue