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

fix image problemsSection

Browse Source
main
Thuong_e 3 years ago
parent 83f7c84b58
commit 3caa10fe8f
10 changed files with 60 additions and 40 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. 0
      src/assets/images/icon-user-behavior.png
  2. 6
      src/i18n/en/healthCare/problemsSection.json
  3. 42
      src/shared/components/Header.tsx
  4. 17
      src/shared/components/healthcare/ApproachSection.tsx
  5. 7
      src/shared/components/healthcare/Competitions.tsx
  6. 2
      src/shared/components/healthcare/CustomerInsight.tsx
  7. 11
      src/shared/components/healthcare/FirstSection.tsx
  8. 11
      src/shared/components/healthcare/ProblemsSection.tsx
  9. 2
      src/shared/components/healthcare/SolutionsOfProduct​.tsx
  10. 2
      src/shared/providers/RouterProviderComponent.tsx

0
src/assets/images/image19.png → src/assets/images/icon-user-behavior.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

6
src/i18n/en/healthCare/problemsSection.json
Unescape View File

@ -3,19 +3,19 @@
"data": [ "data": [
{ {
"id": 1, "id": 1,
"src": "../../../../public/images/image19.png", "src": "/src/assets/images/icon-user-behavior.png",
"title": "User behavior", "title": "User behavior",
"content": "Satisfying the habit of searching for any unusual signs related to the user's health" "content": "Satisfying the habit of searching for any unusual signs related to the user's health"
}, },
{ {
"id": 2, "id": 2,
"src": "../../../../public/images/image20.png", "src": "/src/assets/images/image20.png",
"title": "User Information​", "title": "User Information​",
"content": "Providing accurate and easy-to-understand information for users​" "content": "Providing accurate and easy-to-understand information for users​"
}, },
{ {
"id": 3, "id": 3,
"src": "../../../../public/images/image21.png", "src": "/src/assets/images/image21.png",
"title": "Interaction", "title": "Interaction",
"content": "Providing a good user experience with high interactivity, encourage users to provide more valuable information about their illness​" "content": "Providing a good user experience with high interactivity, encourage users to provide more valuable information about their illness​"
} }

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

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

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

@ -66,7 +66,7 @@ const Approach = () => {
return ( return (
<div <div
className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative" 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> <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%]"> <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)] 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 ease-in-out group w-[60%] p-4 rounded-lg md:w-[30%] md:min-h-[360px] lg:w-[25%] "
> >
<div <div className=" transition-all duration-500 ease-in-out md flex flex-col gap-y-4">
className=" transition-all <p className=" text-2xl text-center" key={item.title}>
duration-500 ease-in-out md flex flex-col gap-y-4" {item.title}
> </p>
<p className=" text-2xl text-center">{item.title}</p>
<ul className=""> <ul className="">
{item.contents.map((item: any) => { {item.contents.map((item: any, index: any) => {
return ( return (
<> <>
<li className="pb-2"> <li className="pb-2">
{item.content} {item.content}
<ul> <ul>
{item.navcontent?.map((item: any) => { {item.navcontent?.map((item: any, index: any) => {
return <li>+ {item}</li>; return <li key={item + index}>+ {item}</li>;
})} })}
</ul> </ul>
</li> </li>

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

@ -2,7 +2,10 @@ import React from "react";
const Competitions = () => { const Competitions = () => {
return ( 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> <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%] ">
<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 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 "> <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> <span className="text-center text-xs md:text-lg">ChatGPT</span>
</div> </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"> <span className="text-center text-white font-bold text-xs md:text-lg">
Us Us
</span> </span>

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

@ -28,7 +28,7 @@ const CustomerInsight = () => {
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="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"> <h1 className="text-4xl font-bold text-center pb-20 relative">
{t("title")}​ {t("title")}​

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

@ -3,20 +3,23 @@ import robotImage from "../../../assets/images/robot-2.png";
import robotImage2 from "../../../assets/images/robot-coin1.png"; import robotImage2 from "../../../assets/images/robot-coin1.png";
const FirstSection = () => { const FirstSection = () => {
return ( 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"> <h1 className="pl-12 text-white text-5xl font-bold">
SGPT for Healthcare SGPT for Healthcare
</h1> </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 <img
src={robotImage2} 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" alt="robot-ai"
/> />
<img <img
src={robotImage} 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" alt="robot-ai"
/> />

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

@ -3,7 +3,7 @@ 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 userBehavior from "../../../assets/images/image19.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";
@ -34,7 +34,7 @@ const ProblemsSection = () => {
return ( return (
<div <div
className="container mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative" 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"> <h1 className="text-4xl font-bold text-center pb-20 relative">
{t("title")} {t("title")}
@ -46,7 +46,7 @@ const ProblemsSection = () => {
border-black " border-black "
> >
{/* [&>*:not(:first-child)]:border-l-2 */} {/* [&>*:not(:first-child)]:border-l-2 */}
{problemsSectionData.map((item: any) => { {problemsSectionData.map((item: any, index) => {
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>
@ -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="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="" />
<span className="text-xl font-semibold text-center"> <span
className="text-xl font-semibold text-center"
key={item.title + index}
>
{item.title} {item.title}
</span> </span>
</div> </div>

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

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

2
src/shared/providers/RouterProviderComponent.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save