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

change style roadmap

Browse Source
main
dothuong 1 year ago
parent 874e1b6c88
commit af40649448
5 changed files with 258 additions and 18 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. BIN
      src/assets/images/bt-bg.png
  2. 9
      src/assets/images/dot-orange.svg
  3. BIN
      src/assets/images/home-roadmap-road.png
  4. 245
      src/shared/components/home/RoadMap.tsx
  5. 22
      tailwind.config.cjs

BIN
src/assets/images/bt-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

9
src/assets/images/dot-orange.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 808 B

BIN
src/assets/images/home-roadmap-road.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

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

@ -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"> */}
<animated.div
<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]">
<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>
);
};

22
tailwind.config.cjs
Unescape View File

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

Write Preview
Loading…
Cancel
Save