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

fix: responsive and add i18n roadmap

Browse Source
main
dothuong 1 year ago
parent af40649448
commit c71217dd45
8 changed files with 450 additions and 208 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. 3
      package.json
  2. 38
      src/i18n/en/home/roadmap.json
  3. 38
      src/i18n/vi/home/roadmap.json
  4. 16
      src/shared/components/css/Roadmap.css
  5. 4
      src/shared/components/home/QnASection.tsx
  6. 549
      src/shared/components/home/RoadMap.tsx
  7. 1
      tailwind.config.cjs
  8. 9
      yarn.lock

3
package.json
Unescape View File

@ -29,7 +29,8 @@
"react-router-dom": "^6.8.2", "react-router-dom": "^6.8.2",
"react-router-hash-link": "^2.4.3", "react-router-hash-link": "^2.4.3",
"recharts": "^2.5.0", "recharts": "^2.5.0",
"sort-by": "^0.0.2" "sort-by": "^0.0.2",
"tailwindcss-filters": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/aos": "^3.0.4", "@types/aos": "^3.0.4",

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

@ -31,5 +31,41 @@
"CEOAI Bot Creator and integration with AI." "CEOAI Bot Creator and integration with AI."
] ]
} }
] ],
"Q2-2023-Header": "Q2 2023",
"Q2-2023-Title1": "Form teams",
"Q2-2023-Title2": "Ideas & concept",
"T7-2023-Header": "July 2023",
"T7-2023-Title1": "Complete POC ",
"T7-2023-Title2": "Launch Hospital Contract Testnet V1",
"T7-2023-Title3": "Publish Blue Paper in International Conference",
"T7-2023-Title4": "Pitch Deck Release",
"T8-2023-Header": "Aug 2023",
"T8-2023-Title1": "Participate world finalist of WSEEC",
"T8-2023-Title2": "Publish White Paper",
"T8-2023-Title3": "Alpha Launching",
"T8-2023-Title4": "Design Marketplace",
"T9&10-2023-Header": "Sep & Oct 2023",
"T9&10-2023-Title1": "Launch Marketplace Testnet",
"T9&10-2023-Title2": "Partnership expansion with clinics",
"T9&10-2023-Title3": "Fund raising (Angel)",
"T9&10-2023-Title4": "Community growth",
"T9&10-2023-Title5": "ERC-20 Token Airdrop Campaign",
"T11-2023-Header": "Nov 2023",
"T11-2023-Title1": "Launch Marketplace V2 Testnet",
"T11-2023-Title2": "IDO and Token Listing",
"T11-2023-Title3": "Staking",
"T11-2023-Title4": "Customize products for hospitals and clinics",
"T12-2023-Header": "Dec 2023",
"T12-2023-Title1": "Beta Launching",
"T12-2023-Title2": "Partnership expansion with hospitals",
"T12-2023-Title3": "Co-branding Partnerships",
"T1-2024-Header": "Jan 2024",
"T1-2024-Title1": "Launch Mainnet V1"
} }

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

@ -31,5 +31,41 @@
"CEOAI Bot Creator và tích hợp với AI." "CEOAI Bot Creator và tích hợp với AI."
] ]
} }
] ],
"Q2-2023-Header": "Quý 2 - 2023",
"Q2-2023-Title1": "Hình thành nhóm",
"Q2-2023-Title2": "Ý tưởng và khái niệm",
"T7-2023-Header": "7 - 2023",
"T7-2023-Title1": "Hoàn thành POC",
"T7-2023-Title2": "Phát hành Hospital Contract Testnet V1",
"T7-2023-Title3": "Xuất bản Blue Paper tại Hội nghị Quốc tế",
"T7-2023-Title4": "Phát hành Pitch Deck (Bài thuyết trình) ",
"T8-2023-Header": "8 - 2023",
"T8-2023-Title1": "Tham gia vòng chung kết thế giới WSEEC",
"T8-2023-Title2": "Xuất bản White Paper (Báo cáo trắng)",
"T8-2023-Title3": "Ra mắt Alpha (Phiên bản thử nghiệm đầu tiên)",
"T8-2023-Title4": "Thiết kế Thị trường",
"T9&10-2023-Header": "9 & 10 - 2023",
"T9&10-2023-Title1": "Phát hành Marketplace Testnet ",
"T9&10-2023-Title2": "Mở rộng đối tác với các phòng khám",
"T9&10-2023-Title3": "Gây quỹ (Angel)",
"T9&10-2023-Title4": "Mở rộng cộng đồng",
"T9&10-2023-Title5": "Chiến dịch Airdrop ERC-20 Token ",
"T11-2023-Header": "11 - 2023",
"T11-2023-Title1": "Phát hành Marketplace V2 Testnet",
"T11-2023-Title2": "IDO và Đưa Token lên sàn",
"T11-2023-Title3": "Staking (Tham gia giao dịch đặt cọc)",
"T11-2023-Title4": "Tùy chỉnh sản phẩm cho bệnh viện và phòng khám",
"T12-2023-Header": "12 - 2023",
"T12-2023-Title1": "Ra mắt Beta (Phiên bản thử nghiệm cuối cùng)",
"T12-2023-Title2": "Mở rộng đối tác với các bệnh viện",
"T12-2023-Title3": "Đối tác cùng thương hiệu ",
"T1-2024-Header": "1 - 2024",
"T1-2024-Title1": "Ra mắt Mainnet V1"
} }

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

@ -132,3 +132,19 @@
top: 30%; top: 30%;
} }
} }
/* .image-container {
position: relative;
}
.image-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(6, 182, 212, 1);
mix-blend-mode: screen;
opacity: 0.5;
} */

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

@ -186,7 +186,7 @@ const QnASection = (props: Props) => {
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 " 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] pb-10 ">
<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>
@ -203,7 +203,7 @@ const QnASection = (props: Props) => {
...styles, ...styles,
}} }}
> >
<ul className="flex flex-col items-center gap-4 w-[75%] mx-auto md:w-[85%] lg:w-full"> <ul className="flex flex-col items-center gap-4 w-[90%] mx-auto md:w-[85%] lg:w-full">
{qnaData.map((item: any, index: any) => { {qnaData.map((item: any, index: any) => {
return ( return (
<li <li

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

@ -47,9 +47,9 @@ const RoadMap = (props: Props) => {
}); });
const styles1 = useSpring({ const styles1 = useSpring({
opacity: isVisible ? 1 : 0, opacity: isVisible ? 1 : 0,
transform: isVisible ? "scaleY(1)" : "scaleY(0)", transform: isVisible ? "translateX(0%)" : "translateX(-100%)",
config: { config: {
duration: 500, duration: 700,
}, },
}); });
@ -58,240 +58,385 @@ const RoadMap = (props: Props) => {
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20 w-[94%] " 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-8 relative">
Road Map Road Map
</h1> </h1>
<div className="max-tablet:flex max-tablet:flex-wrap max-tablet:justify-between max-tablet:pl-4 gap-5 max-tablet:h-full relative tablet:h-[716px] desktop:h-[895px]"> <animated.div
<div style={{
className="hidden tablet:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] tablet:w-[880px] tablet:h-[280px] bg-cover bg-no-repeat bg-center desktop:w-[1020px] desktop:h-[325px]" ...styles1,
style={{ backgroundImage: `url(${backgroundRoadMap})` }} }}
></div> >
<div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[360px] tablet:left-[0px] desktop:top-[460px] desktop:left-[40px]"> <div className="flex flex-wrap justify-between sm:px-8 sm:grid sm:grid-cols-2 grid-flow-row gap-5 max-tablet:h-full relative tablet:h-[716px] desktop:h-[895px]">
<div <div
className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain" className="image-container hidden tablet:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] tablet:w-[880px] tablet:h-[280px] bg-cover bg-no-repeat bg-center desktop:w-[1026px] desktop:h-[327px]"
style={{ backgroundImage: `url(${boderItem})` }} style={{
> backgroundImage: `url(${backgroundRoadMap})`,
<span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold"> filter: "hue-rotate(183deg)",
Q2 2023 }}
</span> ></div>
</div> <div className=" tablet:absolute tablet:top-[360px] tablet:left-[0px] desktop:top-[460px] desktop:left-[00px]">
<div className="flex flex-col gap-3"> <div
<div className="flex items-center gap-2"> className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" /> style={{
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]"> backgroundImage: `url(${boderItem})`,
Form teams filter: "hue-rotate(180deg)",
}}
>
<span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold">
{t("Q2-2023-Header")}
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-col gap-3">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" /> <div className="flex items-center gap-2">
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]"> <img
Ideas & concept className="w-[14px] h-[12px]"
</span> src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("Q2-2023-Title1")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("Q2-2023-Title2")}
</span>
</div>
</div> </div>
</div> </div>
</div> <div className=" tablet:absolute tablet:top-[20px] tablet:left-[60px] desktop:top-[100px] desktop:left-[100px]">
<div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[40px] tablet:left-[60px] desktop:top-[120px] desktop:left-[100px]"> <div
<div className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain" style={{
style={{ backgroundImage: `url(${boderItem})` }} backgroundImage: `url(${boderItem})`,
> filter: "hue-rotate(180deg)",
<span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold"> }}
July 2023 >
</span> <span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold">
</div> {t("T7-2023-Header")}
<div className="flex flex-col gap-3 max-w-[280px]">
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Complete POC{" "}
</span>
</div>
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Launch Hospital Contract Testnet V1
</span>
</div>
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Publish Blue Paper in International Conference
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-col gap-3 max-w-[280px]">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" /> <div className="flex items-center gap-2">
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]"> <img
Pitch Deck Release className="w-[14px] h-[12px]"
</span> src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T7-2023-Title1")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T7-2023-Title2")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T7-2023-Title3")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T7-2023-Title4")}
</span>
</div>
</div> </div>
</div> </div>
</div> <div className=" tablet:absolute tablet:top-[530px] tablet:left-[100px] desktop:top-[620px] desktop:left-[140px] ">
<div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[530px] tablet:left-[140px] desktop:top-[620px] desktop:left-[240px] "> <div
<div className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain" style={{
style={{ backgroundImage: `url(${boderItem})` }} backgroundImage: `url(${boderItem})`,
> filter: "hue-rotate(180deg)",
<span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold"> }}
Aug 2023 >
</span> <span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold">
</div> {t("T8-2023-Header")}
<div className="flex flex-col gap-3">
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Participate world finalist of WSEEC
</span>
</div>
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Publish White Paper
</span>
</div>
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Alpha Launching
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-col gap-3">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" /> <div className="flex items-center gap-2">
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]"> <img
Design Marketplace className="w-[14px] h-[12px]"
</span> src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T8-2023-Title1")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T8-2023-Title2")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T8-2023-Title3")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T8-2023-Title4")}
</span>
</div>
</div> </div>
</div> </div>
</div> <div className=" tablet:absolute tablet:top-[340px] tablet:left-[340px] tablet1:left-[400px] desktop:top-[424px] desktop:left-[420px] ">
<div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[340px] tablet:left-[340px] tablet1:left-[400px] desktop:top-[424px] desktop:left-[444px] "> <div
<div className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain" style={{
style={{ backgroundImage: `url(${boderItem})` }} backgroundImage: `url(${boderItem})`,
> filter: "hue-rotate(180deg)",
<span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold"> }}
Sep & Oct 2023 >
</span> <span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold">
</div> {t("T9&10-2023-Header")}
<div className="flex flex-col gap-3">
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Launch Marketplace Testnet
</span>
</div>
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Partnership expansion with clinics
</span>
</div>
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Fund raising (Angel)
</span>
</div>
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Community growth
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-col gap-3">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" /> <div className="flex items-center gap-2">
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]"> <img
ERC-20 Token Airdrop Campaign className="w-[14px] h-[12px]"
</span> src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T9&10-2023-Title1")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T9&10-2023-Title2")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T9&10-2023-Title3")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T9&10-2023-Title4")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T9&10-2023-Title5")}
</span>
</div>
</div> </div>
</div> </div>
</div>
<div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[20px] tablet:left-[362px] desktop:top-[90px] desktop:left-[500px] "> <div className=" tablet:absolute tablet:top-[20px] tablet:left-[362px] desktop:top-[80px] desktop:left-[500px] ">
<div <div
className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain" className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
style={{ backgroundImage: `url(${boderItem})` }} style={{
> backgroundImage: `url(${boderItem})`,
<span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold"> filter: "hue-rotate(180deg)",
Nov 2023 }}
</span> >
</div> <span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold">
<div className="flex flex-col gap-3 max-w-[280px] desktop:max-w-[350px]"> {t("T11-2023-Header")}
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Launch Marketplace V2 Testnet
</span>
</div>
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
IDO and Token Listing
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-col gap-3 max-w-[280px] desktop:max-w-[350px]">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" /> <div className="flex items-center gap-2">
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]"> <img
Staking className="w-[14px] h-[12px]"
</span> src={dotOrange}
</div> style={{ filter: "hue-rotate(180deg)" }}
<div className="flex items-center gap-2"> alt=""
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" /> />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]"> <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Customize products for hospitals and clinics {t("T11-2023-Title1")}
</span> </span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T11-2023-Title2")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T11-2023-Title3")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T11-2023-Title4")}
</span>
</div>
</div> </div>
</div> </div>
</div>
<div className=" max-tablet:w-[40%] tablet:absolute tablet:bottom-[130px] tablet:right-[20px] desktop:right-[80px] desktop:bottom-[160px] "> <div className=" tablet:absolute tablet:bottom-[110px] tablet:right-[10px] desktop:right-[60px] desktop:bottom-[140px] ">
<div <div
className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain" className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
style={{ backgroundImage: `url(${boderItem})` }} style={{
> backgroundImage: `url(${boderItem})`,
<span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold"> filter: "hue-rotate(180deg)",
Dec 2023 }}
</span> >
</div> <span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold">
<div className="flex flex-col gap-3 max-w-[280px]"> {t("T12-2023-Header")}
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Beta Launching
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-col gap-3 max-w-[280px]">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" /> <div className="flex items-center gap-2">
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]"> <img
Partnership expansion with hospitals className="w-[14px] h-[12px]"
</span> src={dotOrange}
</div> style={{ filter: "hue-rotate(180deg)" }}
<div className="flex items-center gap-2"> alt=""
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" /> />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]"> <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Co-branding Partnerships {t("T12-2023-Title1")}
</span> </span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T12-2023-Title2")}
</span>
</div>
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T12-2023-Title3")}
</span>
</div>
</div> </div>
</div> </div>
</div>
<div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[80px] tablet:right-[0px] desktop:right-[20px] desktop:top-[140px]"> <div className=" tablet:absolute tablet:top-[80px] tablet:right-[0px] desktop:right-[20px] desktop:top-[160px]">
<div <div
className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain" className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
style={{ backgroundImage: `url(${boderItem})` }} style={{
> backgroundImage: `url(${boderItem})`,
<span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold"> filter: "hue-rotate(180deg)",
Jan 2024 }}
</span> >
</div> <span className="m-1 max-tablet:text-2xl tablet:text-[18px] desktop:text-[20px] font-bold">
<div className="flex flex-col gap-3 max-w-[280px]"> {t("T1-2024-Header")}
<div className="flex items-center gap-2">
<img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
Launch Mainnet V1
</span> </span>
</div> </div>
<div className="flex flex-col gap-3 max-w-[280px]">
<div className="flex items-center gap-2">
<img
className="w-[14px] h-[12px]"
src={dotOrange}
style={{ filter: "hue-rotate(180deg)" }}
alt=""
/>
<span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
{t("T1-2024-Title1")}
</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </animated.div>
{/* <animated.div {/* <animated.div
id="timeline" id="timeline"
style={{ ...styles }} style={{ ...styles }}

1
tailwind.config.cjs
Unescape View File

@ -34,6 +34,7 @@ module.exports = {
}, },
}, },
plugins: [ plugins: [
require("tailwindcss-filters"),
{ {
"postcss-import": {}, "postcss-import": {},
tailwindcss: {}, tailwindcss: {},

9
yarn.lock
Unescape View File

@ -841,7 +841,7 @@ lodash.throttle@^4.0.1:
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ== integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
lodash@^4.17.19, lodash@^4.17.21: lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21:
version "4.17.21" version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -1254,6 +1254,13 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
tailwindcss-filters@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/tailwindcss-filters/-/tailwindcss-filters-3.0.0.tgz#d5d40ca018a54b1aa2bdc57aeb6677529c24c8d8"
integrity sha512-xhortqs8fSp9id17EnneYhmruA5DfU6K0zvN6/mgDlEXKaHthjXlR74Ta+4lrX5Lp7tp6YigB09WO0TOWn7VEQ==
dependencies:
lodash "^4.17.15"
tailwindcss@^3.2.7: tailwindcss@^3.2.7:
version "3.3.3" version "3.3.3"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"

Write Preview
Loading…
Cancel
Save