change style roadmap

src/assets/images/dot-orange.svg

@@ -0,0 +1,9 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6.74658C12 10.0603 9.31371 12.7466 6 12.7466C2.68629 12.7466 0 10.0603 0 6.74658C0 3.43287 2.68629 0.746582 6 0.746582C9.31371 0.746582 12 3.43287 12 6.74658ZM2.24564 6.74658C2.24564 8.82006 3.92652 10.5009 6 10.5009C8.07348 10.5009 9.75436 8.82006 9.75436 6.74658C9.75436 4.6731 8.07348 2.99222 6 2.99222C3.92652 2.99222 2.24564 4.6731 2.24564 6.74658Z" fill="url(#paint0_radial_1688_6754)"/>
+<defs>
+<radialGradient id="paint0_radial_1688_6754" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.625 3.74658) rotate(53.1301) scale(11.25)">
+<stop offset="0.189398" stop-color="#FFCC77"/>
+<stop offset="0.895896" stop-color="#FF612F"/>
+</radialGradient>
+</defs>
+</svg>

src/shared/components/home/RoadMap.tsx

@@ -3,6 +3,10 @@ import React, { useEffect, useRef, useState } from "react";
 import { VscDebugBreakpointLog } from "react-icons/vsc";
 import { useTranslation } from "react-i18next";
 import "../css/Roadmap.css";
+import backgroundRoadMap from "../../../assets/images/home-roadmap-road.png";
+import boderItem from "../../../assets/images/bt-bg.png";
+import dotOrange from "../../../assets/images/dot-orange.svg";
+
 type Props = {};
 
 const RoadMap = (props: Props) => {
@@ -57,16 +61,242 @@ const RoadMap = (props: Props) => {
       <h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20 relative">
         Road Map
       </h1>
-      {/* <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> */}
+      <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
+          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]"
+          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="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+            style={{ backgroundImage: `url(${boderItem})` }}
+          >
+            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+              Q2 2023
+            </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="" />
+              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                Form teams
+              </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]">
+                Ideas & concept
+              </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="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+            style={{ backgroundImage: `url(${boderItem})` }}
+          >
+            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+              July 2023
+            </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="" />
+              <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>
+            </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]">
+                Pitch Deck Release
+              </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="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+            style={{ backgroundImage: `url(${boderItem})` }}
+          >
+            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+              Aug 2023
+            </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="" />
+              <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>
+            </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]">
+                Design Marketplace
+              </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="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+            style={{ backgroundImage: `url(${boderItem})` }}
+          >
+            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+              Sep & Oct 2023
+            </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="" />
+              <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>
+            </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]">
+                ERC-20 Token Airdrop Campaign
+              </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="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+            style={{ backgroundImage: `url(${boderItem})` }}
+          >
+            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+              Nov 2023
+            </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="" />
+              <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>
+            </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]">
+                Staking
+              </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]">
+                Customize products for hospitals and clinics
+              </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="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+            style={{ backgroundImage: `url(${boderItem})` }}
+          >
+            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+              Dec 2023
+            </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="" />
+              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                Beta Launching
+              </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 hospitals
+              </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]">
+                Co-branding Partnerships
+              </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="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+            style={{ backgroundImage: `url(${boderItem})` }}
+          >
+            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+              Jan 2024
+            </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="" />
+              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                Launch Mainnet V1
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* <animated.div
         id="timeline"
         style={{ ...styles }}
         className="w-full flex flex-col gap-y-4 lg:flex-row"
       >
-        {/* <animated.div
-          style={{ ...styles1 }}
-          className="absolute rounded-lg left-[50%] translate-x-[50%] w-2 h-[100%] bg-gradient-to-b from-violet-500 to-fuchsia-500"
-        ></animated.div> */}
         {roadMapData.map((item: any, index: any) => {
           return (
             <div
@@ -97,9 +327,8 @@ const RoadMap = (props: Props) => {
             </div>
           );
         })}
-      </animated.div>
+      </animated.div> */}
     </div>
-    // </div>
   );
 };
 

tailwind.config.cjs

@@ -2,16 +2,18 @@
 module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    // screens: {
+    screens: {
-    //   mb: "320px",
+      mb: "320px",
-    //   sm: "640px",
+      sm: "640px",
-    //   // => @media (min-width: 640px) { ... }
+      // => @media (min-width: 640px) { ... }
-    //   md: "768px",
+      md: "768px",
-    //   lg: "1024px",
+      lg: "1024px",
-    //   // => @media (min-width: 1024px) { ... }
+      // => @media (min-width: 1024px) { ... }
-    //   desktop: "1280px",
+      tablet: "960px",
-    //   // => @media (min-width: 1280px) { ... }
+      tablet1: "1060px",
-    // },
+      desktop: "1200px",
+      // => @media (min-width: 1280px) { ... }
+    },
     extend: {
       keyframes: {
         listShowdown: {