fix image problemsSection

src/i18n/en/healthCare/problemsSection.json

@@ -3,19 +3,19 @@
   "data": [
     {
       "id": 1,
-      "src": "../../../../public/images/image19.png",
+      "src": "/src/assets/images/icon-user-behavior.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",
+      "src": "/src/assets/images/image20.png",
       "title": "User Information​",
       "content": "Providing accurate and easy-to-understand information for users​"
     },
     {
       "id": 3,
-      "src": "../../../../public/images/image21.png",
+      "src": "/src/assets/images/image21.png",
       "title": "Interaction",
       "content": "Providing a good user experience with high interactivity, encourage users to provide more valuable information about their illness​"
     }

src/shared/components/Header.tsx

@@ -6,7 +6,8 @@ import { BsNewspaper, BsGithub } from "react-icons/bs";
 import Whitepaper from "../../assets/Whitepaper.pdf";
 import { MdLanguage } from "react-icons/md";
 import { locales, resources } from "../../i18n/i18n";
-import { HashLink as Link } from "react-router-hash-link";
+import { HashLink } from "react-router-hash-link";
+import { Link } from "react-router-dom";
 
 type Props = {};
 
@@ -126,7 +127,7 @@ const Header = (props: Props) => {
                   <div className="flex lg:gap-4 gap-10 items-center">
                     <ul className="flex lg:gap-4   ">
                       {menuItems.map((item) => (
-                        <Link
+                        <HashLink
                           to={`${item.path}#${item.id}`}
                           className="flex my-auto item-center"
                         >
@@ -139,7 +140,7 @@ const Header = (props: Props) => {
                               {item.name}
                             </p>
                           </li>
-                        </Link>
+                        </HashLink>
                       ))}
                       <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">
@@ -148,7 +149,10 @@ const Header = (props: Props) => {
                         <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">
+                            <HashLink
+                              to="/healthcare#firstSection"
+                              preventScrollReset={false}
+                            >
                               <li
                                 className="inline-block pl-2 "
                                 key={item.path}
@@ -157,7 +161,7 @@ const Header = (props: Props) => {
                                   {item.name}
                                 </p>
                               </li>
-                            </Link>
+                            </HashLink>
                           ))}
                         </ul>
                       </li>
@@ -209,7 +213,7 @@ const Header = (props: Props) => {
                   <div className="flex flex-col pl-[20px] h-full">
                     <ul className="flex flex-col gap-3 ">
                       {menuItems.map((item, index) => (
-                        <Link to={`${item.path}#${item.id}`}>
+                        <HashLink to={`${item.path}#${item.id}`}>
                           <li
                             className="inline-block"
                             key={item.path}
@@ -219,7 +223,7 @@ const Header = (props: Props) => {
                               {item.name}
                             </p>
                           </li>
-                        </Link>
+                        </HashLink>
                       ))}
                       <li
                         className="inline-block"
@@ -248,7 +252,10 @@ const Header = (props: Props) => {
                         {/* <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">
+                            <HashLink
+                              to="/healthcare#firstSection"
+                              preventScrollReset={false}
+                            >
                               <li
                                 className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show"
                                 key={index}
@@ -257,7 +264,7 @@ const Header = (props: Props) => {
                                 {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>
+                            </HashLink>
                           ))}
                         </ul>
                       </div>
@@ -309,17 +316,19 @@ const Header = (props: Props) => {
             <div className="flex gap-6 items-center">
               <ul className="flex gap-6">
                 {menuItems.map((item, index) => (
-                  <Link to={`${item.path}#${item.id}`}>
+                  <HashLink
+                    to={`${item.path}#${item.id}`}
+                    key={item.path + 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>
-                  </Link>
+                  </HashLink>
                 ))}
                 <li className="inline-block group relative">
                   <p className="text-white text-md transition-all duration-150 cursor-pointer transform group-hover:text-orange-400">
@@ -328,13 +337,16 @@ const Header = (props: Props) => {
                   <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">
+                      <HashLink
+                        to="/healthcare#firstSection"
+                        preventScrollReset={false}
+                      >
                         <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>
+                      </HashLink>
                     ))}
                   </ul>
                 </li>
@@ -364,7 +376,7 @@ const Header = (props: Props) => {
                 <Button size="sm" onClick={() => openLocalPdf()}>
                   <div className="flex items-center gap-2">
                     <BsNewspaper />
-                    Whitepaper11
+                    Whitepaper
                   </div>
                 </Button>
                 <Button size="sm">

src/shared/components/healthcare/ApproachSection.tsx

@@ -66,7 +66,7 @@ const Approach = () => {
   return (
     <div
       className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
-      id="problems"
+      id="appRoach"
     >
       <h1 className="text-4xl font-bold text-center pb-20 ">The Approach​ ​</h1>
       <div className="flex flex-col items-center gap-y-6 md:flex-row md:justify-around md:absolute md:top-[50%] md:translate-y-[-50%]">
@@ -77,20 +77,19 @@ const Approach = () => {
             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>
+              <div className=" transition-all duration-500 ease-in-out md flex flex-col gap-y-4">
+                <p className=" text-2xl text-center" key={item.title}>
+                  {item.title}
+                </p>
                 <ul className="">
-                  {item.contents.map((item: any) => {
+                  {item.contents.map((item: any, index: any) => {
                     return (
                       <>
                         <li className="pb-2">
                           {item.content}
                           <ul>
-                            {item.navcontent?.map((item: any) => {
-                              return <li>+ {item}</li>;
+                            {item.navcontent?.map((item: any, index: any) => {
+                              return <li key={item + index}>+ {item}</li>;
                             })}
                           </ul>
                         </li>

src/shared/components/healthcare/Competitions.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 const Competitions = () => {
   return (
-    <div className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative">
+    <div
+      id="competitions"
+      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>
@@ -19,7 +22,7 @@ const Competitions = () => {
         <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">
+        <div className="absolute top-[15%] right-[10%] w-[80px] h-[60px] md:top-[20%] md:right-[10%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-gradient-to-r from-cyan-400 to-blue-400">
           <span className="text-center text-white font-bold text-xs md:text-lg">
             Us
           </span>

src/shared/components/healthcare/CustomerInsight.tsx

@@ -28,7 +28,7 @@ const CustomerInsight = () => {
   return (
     <div
       className="container mx-auto text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg"
-      id="problems"
+      id="customerInsight"
     >
       <h1 className="text-4xl font-bold text-center pb-20 relative">
         {t("title")}​

src/shared/components/healthcare/FirstSection.tsx

@@ -3,20 +3,23 @@ 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">
+    <div
+      id="firstSection"
+      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">
+      <div className="lg:h-full lg:w-1/5 hidden lg:flex justify-center items-center relative">
         <img
           src={robotImage2}
-          className="object-cover absolute -left-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"
+          className="object-cover absolute left-30 border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-full aspect-square transition-all duration-500 cursor-pointer filter  hover:border-orange-500"
           alt="robot-ai"
         />
 
         <img
           src={robotImage}
-          className="object-cover absolute top-28 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"
         />
 

src/shared/components/healthcare/ProblemsSection.tsx

@@ -3,7 +3,7 @@ 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 userBehavior from "../../../assets/images/icon-user-behavior.png";
 import userInformation from "../../../assets/images/image20.png";
 import userInteraction from "../../../assets/images/image21.png";
 
@@ -34,7 +34,7 @@ const ProblemsSection = () => {
   return (
     <div
       className="container mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative"
-      id="roadmap"
+      id="problems"
     >
       <h1 className="text-4xl font-bold text-center pb-20 relative">
         {t("title")}
@@ -46,7 +46,7 @@ const ProblemsSection = () => {
        border-black  "
       >
         {/* [&>*:not(:first-child)]:border-l-2 */}
-        {problemsSectionData.map((item: any) => {
+        {problemsSectionData.map((item: any, index) => {
           return (
             <>
               <p className="line-problems first:hidden my-auto w-[2px] h-[150px] bg-slate-400"></p>
@@ -54,7 +54,10 @@ const ProblemsSection = () => {
                 <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">
+                    <span
+                      className="text-xl font-semibold text-center"
+                      key={item.title + index}
+                    >
                       {item.title}
                     </span>
                   </div>

src/shared/components/healthcare/SolutionsOfProduct​.tsx

@@ -34,7 +34,7 @@ const SolutionsOfProduct = () => {
   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"
+      id="solutionsOfProduct"
     >
       <h1 className="text-4xl font-bold text-center pb-20 relative">
         The Solutions of Product​

src/shared/providers/RouterProviderComponent.tsx

@@ -19,7 +19,7 @@ const router = createBrowserRouter([
         element: <Home />,
       },
       {
-        path: "healthcare",
+        path: "/healthcare",
         element: <Healthcare />,
       },
     ],