fix: responsive and add i18n roadmap

package.json

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

src/i18n/en/home/roadmap.json

@@ -31,5 +31,41 @@
         "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"
 }

src/i18n/vi/home/roadmap.json

@@ -31,5 +31,41 @@
         "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"
 }

src/shared/components/css/Roadmap.css

@@ -132,3 +132,19 @@
     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; 
+} */

src/shared/components/home/QnASection.tsx

@@ -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 "
       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">
           FAQS
         </h1>
@@ -203,7 +203,7 @@ const QnASection = (props: Props) => {
           ...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) => {
             return (
               <li

src/shared/components/home/RoadMap.tsx

@@ -47,9 +47,9 @@ const RoadMap = (props: Props) => {
   });
   const styles1 = useSpring({
     opacity: isVisible ? 1 : 0,
-    transform: isVisible ? "scaleY(1)" : "scaleY(0)",
+    transform: isVisible ? "translateX(0%)" : "translateX(-100%)",
     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%] "
       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
       </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
+        style={{
+          ...styles1,
+        }}
+      >
+        <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
-          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]"
+            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(${backgroundRoadMap})` }}
+            style={{
+              backgroundImage: `url(${backgroundRoadMap})`,
+              filter: "hue-rotate(183deg)",
+            }}
           ></div>
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[360px] tablet:left-[0px] desktop:top-[460px] desktop:left-[40px]">
+          <div className=" tablet:absolute tablet:top-[360px] tablet:left-[0px] desktop:top-[460px] desktop:left-[00px]">
             <div
               className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
             >
               <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Q2 2023
+                {t("Q2-2023-Header")}
               </span>
             </div>
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Form teams
+                  {t("Q2-2023-Title1")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Ideas & concept
+                  {t("Q2-2023-Title2")}
                 </span>
               </div>
             </div>
           </div>
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[40px] tablet:left-[60px] desktop:top-[120px] desktop:left-[100px]">
+          <div className="   tablet:absolute tablet:top-[20px] tablet:left-[60px] desktop:top-[100px] desktop:left-[100px]">
             <div
               className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
+              style={{
+                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
+                {t("T7-2023-Header")}
               </span>
             </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} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Complete POC{" "}
+                  {t("T7-2023-Title1")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Launch Hospital Contract Testnet V1
+                  {t("T7-2023-Title2")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Publish Blue Paper in International Conference
+                  {t("T7-2023-Title3")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Pitch Deck Release
+                  {t("T7-2023-Title4")}
                 </span>
               </div>
             </div>
           </div>
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[530px] tablet:left-[140px] desktop:top-[620px] desktop:left-[240px] ">
+          <div className="   tablet:absolute tablet:top-[530px] tablet:left-[100px] desktop:top-[620px] desktop:left-[140px] ">
             <div
               className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
+              style={{
+                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
+                {t("T8-2023-Header")}
               </span>
             </div>
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Participate world finalist of WSEEC
+                  {t("T8-2023-Title1")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Publish White Paper
+                  {t("T8-2023-Title2")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Alpha Launching
+                  {t("T8-2023-Title3")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Design Marketplace
+                  {t("T8-2023-Title4")}
                 </span>
               </div>
             </div>
           </div>
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[340px] tablet:left-[340px] tablet1:left-[400px] desktop:top-[424px] desktop:left-[444px] ">
+          <div className="   tablet:absolute tablet:top-[340px] tablet:left-[340px] tablet1:left-[400px] desktop:top-[424px] desktop:left-[420px] ">
             <div
               className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
+              style={{
+                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
+                {t("T9&10-2023-Header")}
               </span>
             </div>
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Launch Marketplace Testnet
+                  {t("T9&10-2023-Title1")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Partnership expansion with clinics
+                  {t("T9&10-2023-Title2")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Fund raising (Angel)
+                  {t("T9&10-2023-Title3")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Community growth
+                  {t("T9&10-2023-Title4")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                ERC-20 Token Airdrop Campaign
+                  {t("T9&10-2023-Title5")}
                 </span>
               </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
               className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
             >
               <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Nov 2023
+                {t("T11-2023-Header")}
               </span>
             </div>
             <div className="flex flex-col gap-3 max-w-[280px] desktop:max-w-[350px]">
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Launch Marketplace V2 Testnet
+                  {t("T11-2023-Title1")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                IDO and Token Listing
+                  {t("T11-2023-Title2")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Staking
+                  {t("T11-2023-Title3")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Customize products for hospitals and clinics
+                  {t("T11-2023-Title4")}
                 </span>
               </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
               className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
             >
               <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Dec 2023
+                {t("T12-2023-Header")}
               </span>
             </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} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Beta Launching
+                  {t("T12-2023-Title1")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Partnership expansion with hospitals
+                  {t("T12-2023-Title2")}
                 </span>
               </div>
               <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Co-branding Partnerships
+                  {t("T12-2023-Title3")}
                 </span>
               </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
               className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
             >
               <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Jan 2024
+                {t("T1-2024-Header")}
               </span>
             </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} alt="" />
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
                 <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Launch Mainnet V1
+                  {t("T1-2024-Title1")}
                 </span>
               </div>
             </div>
           </div>
         </div>
+      </animated.div>
       {/* <animated.div
         id="timeline"
         style={{ ...styles }}

tailwind.config.cjs

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

yarn.lock

@@ -841,7 +841,7 @@ lodash.throttle@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   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"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   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"
   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:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"