|
|
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/icon-user-behavior.png";
|
|
|
import userInformation from "../../../assets/images/image20.png";
|
|
|
import userInteraction from "../../../assets/images/image21.png";
|
|
|
|
|
|
const listProblems = [
|
|
|
{
|
|
|
title: "User behavior",
|
|
|
content:
|
|
|
"Satisfying the habit of searching for any unusual signs related to the user's health",
|
|
|
},
|
|
|
{
|
|
|
title: "Information",
|
|
|
content:
|
|
|
"Providing accurate and easy-to-understand information for users",
|
|
|
},
|
|
|
{
|
|
|
icon: "HiOutlineUserGroup",
|
|
|
title: "Interaction",
|
|
|
content:
|
|
|
"Providing a good user experience with high interactivity, encourage users to provide more valuable information about their illness",
|
|
|
},
|
|
|
];
|
|
|
const ProblemsSection = () => {
|
|
|
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="problems"
|
|
|
>
|
|
|
<h1 className="text-4xl font-bold text-center pb-20 relative">
|
|
|
{t("title")}
|
|
|
</h1>
|
|
|
<div
|
|
|
className="flex flex-col items-center
|
|
|
md:flex-row md:items-start md:absolute md:top-[50%] md:left-[50%] md:translate-x-[-50%]
|
|
|
md:translate-y-[-50%] md:w-full md:shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] md:rounded-lg relative
|
|
|
border-black "
|
|
|
>
|
|
|
{/* [&>*:not(:first-child)]:border-l-2 */}
|
|
|
{problemsSectionData.map((item: any, index) => {
|
|
|
return (
|
|
|
<>
|
|
|
<p className="line-problems first:hidden my-auto w-[2px] h-[150px] bg-slate-400"></p>
|
|
|
<div className="flex h-full justify-around [&>*:first-child]:items-center flex-1 ">
|
|
|
<div className="relative flex flex-col items-center gap-y-4 flex:1 text-black p-8 rounded-lg">
|
|
|
<div className="flex flex-col gap-y-2 items-center">
|
|
|
<img className="w-[44px] h-[44px] " src={item.src} alt="" />
|
|
|
|
|
|
<span
|
|
|
className="text-xl font-semibold text-center"
|
|
|
key={item.title + index}
|
|
|
>
|
|
|
{item.title}
|
|
|
</span>
|
|
|
</div>
|
|
|
<span className="text-center">{item.content}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</>
|
|
|
);
|
|
|
})}
|
|
|
{/*
|
|
|
<div className="flex flex-col gap-y-4 w-[250px] text-black p-8 rounded-lg">
|
|
|
<div className="flex flex-col gap-y-2 items-center">
|
|
|
<img
|
|
|
className="w-[44px] h-[44px]"
|
|
|
src={userInformation}
|
|
|
alt=""
|
|
|
></img>
|
|
|
<p className="text-xl font-semibold">User Information</p>
|
|
|
</div>
|
|
|
<p className="text-center">
|
|
|
Providing accurate and easy-to-understand information for users
|
|
|
</p>
|
|
|
</div>
|
|
|
<div className="my-auto w-[2px] h-[150px] bg-slate-400"></div>
|
|
|
<div className="flex flex-col gap-y-4 w-[250px] text-black p-8 rounded-lg">
|
|
|
<div className="flex flex-col gap-y-2 items-center">
|
|
|
<img className="w-[44px] h-[44px]" src={userInteraction} alt="" />
|
|
|
<p className="text-xl font-semibold">Interaction</p>
|
|
|
</div>
|
|
|
<p className="text-center">
|
|
|
Providing a good user experience with high interactivity, encourage
|
|
|
users to provide more valuable information about their illness
|
|
|
</p>
|
|
|
</div> */}
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default ProblemsSection;
|
|
|
|
