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

Merge branch 'dev' into 'main'

Browse Source 
implement UI

See merge request d3/landing-page/sgpt-token!1
main
Bui Thanh Tuan 2 years ago
parent 4987bc6275 6c78596790
commit 070d1484f5
26 changed files with 432 additions and 1439 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. 10
      index.html
  2. 1369
      package-lock.json
  3. 5
      package.json
  4. 0
      src/App.css
  5. 1
      src/App.tsx
  6. BIN
      src/assets/images/bgr9.jpeg
  7. BIN
      src/assets/images/coin.png
  8. BIN
      src/assets/images/logo-robot.png
  9. BIN
      src/assets/images/poker-chips.webp
  10. BIN
      src/assets/images/robot-2.png
  11. BIN
      src/assets/images/robot-bgr.png
  12. BIN
      src/assets/images/robot-coin1.png
  13. BIN
      src/assets/images/robot-coin2.png
  14. BIN
      src/assets/images/robot.png
  15. BIN
      src/assets/images/robot32.png
  16. BIN
      src/assets/images/tokenomic-chart.png
  17. 8
      src/index.css
  18. 2
      src/pages/Home.tsx
  19. 29
      src/shared/components/Footer.tsx
  20. 79
      src/shared/components/Header.tsx
  21. 51
      src/shared/components/home/AboutSection.tsx
  22. 146
      src/shared/components/home/FirstSection.tsx
  23. 80
      src/shared/components/home/RoadMap.tsx
  24. 87
      src/shared/components/home/TokenomicsSection.tsx
  25. 1
      tailwind.config.cjs
  26. 3
      vite.config.ts

10
index.html
Unescape View File

@ -5,6 +5,16 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SGPT</title> <title>SGPT</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

1369
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
Unescape View File

@ -13,14 +13,15 @@
"match-sorter": "^6.3.1", "match-sorter": "^6.3.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-router-dom": "^6.8.2", "react-router-dom": "^6.8.2",
"sort-by": "^1.2.0" "sort-by": "^0.0.2",
"tailwindcss-brand-colors": "^0.3.3"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.27", "@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10", "@types/react-dom": "^18.0.10",
"@types/react-router-dom": "^5.3.3", "@types/react-router-dom": "^5.3.3",
"@vitejs/plugin-react-swc": "^3.0.0",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"postcss": "^8.4.21", "postcss": "^8.4.21",
"postcss-import": "^15.1.0", "postcss-import": "^15.1.0",

0
src/App.css
Unescape View File

1
src/App.tsx
Unescape View File

@ -1,4 +1,3 @@
import "./App.css";
import RouterProviderComponent from "./shared/providers/RouterProviderComponent"; import RouterProviderComponent from "./shared/providers/RouterProviderComponent";
function App() { function App() {

BIN
src/assets/images/bgr9.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 445 KiB

BIN
src/assets/images/coin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 605 KiB

BIN
src/assets/images/logo-robot.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

BIN
src/assets/images/poker-chips.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 618 KiB

BIN
src/assets/images/robot-2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

BIN
src/assets/images/robot-bgr.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 564 KiB

BIN
src/assets/images/robot-coin1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

BIN
src/assets/images/robot-coin2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 KiB

BIN
src/assets/images/robot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 220 KiB

BIN
src/assets/images/robot32.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

BIN
src/assets/images/tokenomic-chart.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

8
src/index.css
Unescape View File

@ -1,5 +1,3 @@
@import "tailwindcss/base"; @tailwind base;
@tailwind components;
@import "tailwindcss/components"; @tailwind utilities;
@import "tailwindcss/utilities";

2
src/pages/Home.tsx
Unescape View File

@ -1,6 +1,7 @@
import AboutSection from "../shared/components/home/AboutSection"; import AboutSection from "../shared/components/home/AboutSection";
import FirstSection from "../shared/components/home/FirstSection"; import FirstSection from "../shared/components/home/FirstSection";
import RoadMap from "../shared/components/home/RoadMap"; import RoadMap from "../shared/components/home/RoadMap";
import TokenomicsSection from "../shared/components/home/TokenomicsSection";
type Props = {}; type Props = {};
@ -10,6 +11,7 @@ const Home = (props: Props) => {
<FirstSection /> <FirstSection />
<AboutSection /> <AboutSection />
<RoadMap /> <RoadMap />
<TokenomicsSection />
</div> </div>
); );
}; };

29
src/shared/components/Footer.tsx
Unescape View File

@ -1,7 +1,34 @@
import robotLogo from "../../assets/images/logo-robot.png";
type Props = {}; type Props = {};
const Footer = (props: Props) => { const Footer = (props: Props) => {
return <div className="container mx-auto bg-white">Footer</div>; return (
<div className="container mx-auto flex justify-between text-white py-12">
<div className="md:w-1/4 flex gap-2 items-center">
<div className="bg-white rounded-full overflow-hidden p-1">
<img
src={robotLogo}
className="w-10 transition-all duration-150 rounded-full"
alt=""
/>
</div>
<h4 className="text-xl transition-all duration-150 text-white uppercase font-bold">
SGPT
</h4>
</div>
<div className="md:w-1/4 flex gap-2 items-center">
Copyright 2023 SGPT
</div>
<div className="md:w-2/5 flex justify-between items-center">
<p>NFT Systems</p>
<p>Team</p>
<p>Privacy Policy</p>
<p>Terms & Conditions</p>
</div>
</div>
);
}; };
export default Footer; export default Footer;

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

@ -1,5 +1,7 @@
import React from "react"; import React from "react";
import Button from "./Button"; import Button from "./Button";
import robotLogo from "../../assets/images/logo-robot.png";
import { BsNewspaper, BsGithub } from "react-icons/bs";
type Props = {}; type Props = {};
@ -7,18 +9,22 @@ const menuItems = [
{ {
name: "Home", name: "Home",
path: "/", path: "/",
id: "home",
}, },
{ {
name: "About", name: "About",
path: "", path: "",
id: "about",
}, },
{ {
name: "Tokenomics", name: "Tokenomics",
path: "", path: "",
id: "tokenomics",
}, },
{ {
name: "Roadmap", name: "Roadmap",
path: "", path: "",
id: "roadmap",
}, },
]; ];
@ -35,34 +41,60 @@ const Header = (props: Props) => {
}); });
}, []); }, []);
const jumpToSection = (section: string) => {
console.log("section", section);
const element = document.getElementById(section);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
};
return ( return (
<> <>
{isScrolled ? ( {isScrolled ? (
<div className="fixed w-full z-30 p-1 transition-all duration-150 bg-gray-800"> <div className="fixed w-full z-30 p-1 transition-all duration-150 bg-gray-800">
<div className="container mx-auto flex justify-between items-center"> <div className="container mx-auto flex justify-between items-center">
<div> <div className="flex gap-2 items-center">
<h4 className="text-2xl transition-all duration-150 text-white uppercase font-bold"> <div className="bg-white rounded-full overflow-hidden p-1">
Logo <img
src={robotLogo}
className="w-6 transition-all duration-150 rounded-full"
alt=""
/>
</div>
<h4 className="text-xl transition-all duration-150 text-white uppercase font-bold">
SGPT
</h4> </h4>
</div> </div>
<div className="flex gap-10 items-center"> <div className="flex gap-10 items-center">
<ul className="flex gap-10"> <ul className="flex gap-10">
{menuItems.map((item) => ( {menuItems.map((item) => (
<li className="inline-block" key={item.path}> <li
<a className="inline-block"
href="#" key={item.path}
className="text-white text-md transition-all duration-150" onClick={() => jumpToSection(item.id)}
> >
<p className="text-white text-md transition-all duration-150">
{item.name} {item.name}
</a> </p>
</li> </li>
))} ))}
</ul> </ul>
<div className="flex gap-4"> <div className="flex gap-4">
<Button size="sm">Whitepaper</Button> <Button size="sm">
<Button size="sm">Audit</Button> <div className="flex items-center gap-2">
<BsNewspaper />
Whitepaper
</div>
</Button>
<Button size="sm">
<div className="flex items-center gap-2">
<BsGithub />
Audit
</div>
</Button>
</div> </div>
</div> </div>
</div> </div>
@ -70,9 +102,16 @@ const Header = (props: Props) => {
) : ( ) : (
<div className="fixed z-30 w-full p-5 transition-all duration-150"> <div className="fixed z-30 w-full p-5 transition-all duration-150">
<div className="container mx-auto flex justify-between items-center"> <div className="container mx-auto flex justify-between items-center">
<div> <div className="flex gap-2 items-center">
<div className="bg-white rounded-full overflow-hidden p-1">
<img
src={robotLogo}
className="w-10 transition-all duration-150 rounded-full"
alt=""
/>
</div>
<h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold"> <h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold">
Logo SGPT
</h4> </h4>
</div> </div>
@ -91,8 +130,18 @@ const Header = (props: Props) => {
</ul> </ul>
<div className="flex gap-4"> <div className="flex gap-4">
<Button size="md">Whitepaper</Button> <Button size="md">
<Button size="md">Audit</Button> <div className="flex items-center gap-2">
<BsNewspaper />
Whitepaper
</div>
</Button>
<Button size="md">
<div className="flex items-center gap-2">
<BsGithub />
Audit
</div>
</Button>
</div> </div>
</div> </div>
</div> </div>

51
src/shared/components/home/AboutSection.tsx
Unescape View File

@ -1,48 +1,41 @@
import React from "react"; import React from "react";
import pokerChips from "../../../assets/images/poker-chips.webp"; import aboutImage from "../../../assets/images/robot32.png";
type Props = {}; type Props = {};
const AboutSection = (props: Props) => { const AboutSection = (props: Props) => {
const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address);
};
return ( return (
<div className="container mx-auto text-white py-20 flex"> <div className="container mx-auto text-white py-20 flex relative">
<div className="flex flex-col gap-10 w-1/2"> <div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<h4 className="text-5xl uppercase font-bold">What is SGPT?</h4> <h4 className="text-5xl uppercase font-bold">What is SGPT?</h4>
<p className="text-gray-300 md:w-4/5 text-lg"> <p className="text-gray-300 md:w-4/5 text-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto SGPT Token is a complementary token created on the blockchain
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque platform to provide a platform for small and medium-sized businesses
voluptatibus corporis animi ab. Quisquam alias error labore iste (SMBs) to create and manage an internal Q&A system. SGPT Token will
dolores necessitatibus mollitia officia! be used to conduct transactions on the platform and provide benefits
</p> to members of the internal Q&A system. SGPT Token will also be used
to reward members who make positive contributions to the system.
<p className="text-gray-300 md:w-4/5 text-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque
voluptatibus corporis animi ab. Quisquam alias error labore iste
dolores necessitatibus mollitia officia!
</p> </p>
</div> </div>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<h4 className="text-5xl uppercase font-bold">What is SGPT?</h4> <h4 className="text-5xl uppercase font-bold">SGPT Solution</h4>
<p className="text-gray-300 md:w-4/5 text-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque
voluptatibus corporis animi ab. Quisquam alias error labore iste
dolores necessitatibus mollitia officia!
</p>
<p className="text-gray-300 md:w-4/5 text-lg"> <p className="text-gray-300 md:w-4/5 text-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto The SGPT Token is a solution to the problems associated with
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque traditional payment methods for chat bot services. The token is
voluptatibus corporis animi ab. Quisquam alias error labore iste built on blockchain technology, which ensures that transactions are
dolores necessitatibus mollitia officia! fast, secure, and transparent. Moreover, the use of the SGPT Token
eliminates the need for traditional payment methods, which are often
costly and inconvenient.
</p> </p>
</div> </div>
</div> </div>
<div className="w-1/2 flex justify-center items-center"> <div className="md:w-1/2 md:flex hidden justify-center items-center">
<img className="w-2/3" src={pokerChips} /> <img className="w-2/3 rounded-md" src={aboutImage} />
</div> </div>
</div> </div>
); );

146
src/shared/components/home/FirstSection.tsx
Unescape View File

@ -1,39 +1,129 @@
import robotImage from "../../../assets/images/robot.png"; import robotImage from "../../../assets/images/robot-2.png";
import robotImage2 from "../../../assets/images/robot-coin1.png";
import robotBgr from "../../../assets/images/robot-bgr.png";
import Button from "../Button"; import Button from "../Button";
import {
BsFacebook,
BsDiscord,
BsTwitter,
BsTelegram,
BsInstagram,
} from "react-icons/bs";
type Props = {}; import { MdContentCopy } from "react-icons/md";
const FirstSection = (props: Props) => { const FirstSection = () => {
const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844";
const truncateAddress = (address: string) => {
return address.slice(0, 8) + "......" + address.slice(-7);
};
const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address);
};
return ( return (
<div <div className="min-h-screen flex bg-cover bg-center bg-no-repeat relative">
// style={{ backgroundImage: `url(${background})` }} <div
className="min-h-screen flex bg-cover bg-center bg-no-repeat relative" style={{ backgroundImage: `url(${robotBgr})` }}
> className="blur-sm absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
<div className="container flex mx-auto text-white z-20 mt-20"> ></div>
<div className="md:w-1/2 flex flex-col justify-center gap-10 pb-20"> <div className="absolute top-0 left-0 w-full h-full bg-black opacity-60"></div>
<h4 className="text-6xl font-bold"> <div className="container flex mx-auto min-h-[70vh] text-white z-20 mt-20">
Lorem ipsum dolor sit amet consectetur adipisicing elit. <div className="md:w-4/5 flex flex-col justify-center lg:pb-48 gap-14 pb-20 z-50">
</h4> <div className="flex flex-col gap-10">
<p className="w-3/4 font-body"> <h4 className="w-3/4 lg:text-8xl text-7xl font-bold">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique A digital currency payment for SGPT chat bot services.
amet eveniet fugiat pariatur, illo in est officiis labore ad </h4>
corrupti obcaecati asperiores! Quos ratione tempore dolorum <p className="lg:w-2/3 font-body">
temporibus tenetur quaerat. The SGPT Token is a digital currency designed to facilitate
</p> payments for services provided by the SGPT chat bot. The chat bot
is a powerful tool that utilizes artificial intelligence to
<div className="flex w-2/3 flex-wrap gap-4"> communicate with users and provide valuable information and
<Button>Telegram</Button> services.
<Button>Telegram</Button> </p>
<Button>Telegram</Button> </div>
<Button>Telegram</Button>
<Button>Telegram</Button> <div>
<h2 className="text-3xl mb-4 font-bold">Join Our Community</h2>
<div className="flex w-2/3 flex-wrap gap-4">
<Button bgColor="bg-telegram">
<div className="flex items-center gap-2">
<BsTelegram size={18} />
Telegram
</div>
</Button>
<Button bgColor="bg-discord">
<div className="flex items-center gap-2">
<BsDiscord size={18} />
Discord
</div>
</Button>
<Button bgColor="bg-facebook">
<div className="flex items-center gap-2">
<BsFacebook size={18} />
Facebook
</div>
</Button>
<Button bgColor="bg-twitter">
<div className="flex items-center gap-2">
<BsTwitter size={18} />
Twitter
</div>
</Button>
<Button bgColor="bg-instagram">
<div className="flex items-center gap-2">
<BsInstagram size={18} />
Instagram
</div>
</Button>
</div>
</div> </div>
</div> </div>
<div className="md:w-1/2 flex justify-center items-center"> <div className="md:w-1/5 flex justify-center items-center relative">
<img src={robotImage} className="w-4/5" /> <img
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"
alt=""
/>
<img
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"
alt=""
/>
<div className="absolute w-10 aspect-square blur-sm bg-gradient-to-br from-rose-500 to-indigo-700 rounded-full top-32 -left-10"></div>
<div className="absolute w-10 aspect-square bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900 blur-sm rounded-full bottom-56 right-10"></div>
</div>
</div>
{/* <div className="w-full h-full bg-black absolute opacity-75 z-10"></div> */}
<div className="absolute z-50 rounded-full border-2 p-7 overflow-hidden text-white flex gap-4 items-center bottom-10 left-1/2 -translate-x-1/2 max-w-4xl min-h-[80px] mx-auto container">
<div className="w-1/3 flex items-center gap-3 justify-center font-semibold">
<p>{truncateAddress(address)}</p>
<button
className="hover:cursor-pointer bg-white/50 text-white rounded-full p-2"
onClick={() => copyToClipboard(address)}
type="button"
>
<MdContentCopy size={18} />
</button>
</div>
<div className="w-1/3 flex justify-center items-center gap-3 font-semibold">
<p>{truncateAddress(address)}</p>
<button
className="hover:cursor-pointer bg-white/50 text-white rounded-full p-2"
onClick={() => copyToClipboard(address)}
type="button"
>
<MdContentCopy size={18} />
</button>
</div>
<div className="w-1/3 flex justify-center font-semibold">
Audited By
</div> </div>
</div> </div>
<div className="w-full h-full bg-black absolute opacity-75 z-10"></div>
</div> </div>
); );
}; };

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

@ -1,30 +1,72 @@
import React from "react"; import React from "react";
import { VscDebugBreakpointLog } from "react-icons/vsc";
type Props = {}; type Props = {};
const roadMapData = [
{
phase: "Phase 1",
listTitle: [
"Development of CEO Ideology",
"Website Development and Release",
"Whitepaper Launch",
"Subscription Presale",
"Marketing Partners Advisory Board Formed",
],
},
{
phase: "Phase 2",
listTitle: [
"CEO DEX Token Launch",
"Massive Marketing Campaign",
"Real Time Suprise Buybacks",
"NFT Staking and APR Staking Launch",
"5 Million Marketcap Milestone CoinGecko Listing",
],
},
{
phase: "Phase 3",
listTitle: [
"Swap Development and Launch",
"Merchandise Launch",
"Tier 1 CEX Listings",
"CEO Bridge to ETH, Arbitrium and Polygon",
"10 Million MarketCap Milestone",
"CEOAI Bot Creator and integration with AI.",
],
},
];
const RoadMap = (props: Props) => { const RoadMap = (props: Props) => {
return ( return (
<div className="container mx-auto text-white md:min-h-[40vh]"> <div className="container mx-auto text-white md:min-h-[60vh]" id="roadmap">
<h1 className="text-5xl font-bold text-center">RoadMap</h1> <h1 className="text-5xl font-bold text-center">RoadMap</h1>
<div className="flex gap-10 mt-20"> <div className="flex gap-10 mt-20 justify-center">
<div className="w-1/4 bg-[conic-gradient(at_left,_var(--tw-gradient-stops))] from-orange-400 to-rose-400 rounded-lg min-h-[200px] p-5"> {roadMapData.map((item, index) => {
<h4 className="text-center text-2xl text-gray-100 font-semibold mb-3"> return (
Phase 1 <div
</h4> key={index}
<ol> className="w-1/4 bg-[conic-gradient(at_left,_var(--tw-gradient-stops))] from-orange-400 to-rose-400 rounded-lg min-h-[250px] p-5"
<li> >
<p> <h4 className="text-center text-3xl text-gray-100 font-semibold mb-6">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. vitae. {item.phase}
</p> </h4>
</li> <ol className="flex flex-col gap-2">
<li> {item.listTitle.map((listItem, index) => {
<p> return (
Lorem ipsum, dolor sit amet consectetur adipisicing elit. vitae. <li key={index} className="flex items-center gap-3">
</p> <VscDebugBreakpointLog width={18} />
</li> <p className="font-medium font-body">{listItem}</p>
</ol> </li>
</div> );
})}
</ol>
</div>
);
})}
</div> </div>
</div> </div>
); );

87
src/shared/components/home/TokenomicsSection.tsx
Unescape View File

@ -0,0 +1,87 @@
import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
type Props = {};
const tokenomics = [
{
title: "Liquidity - 5% 1,000,000 SGPT",
description: " ",
color: "bg-[#86eae9]",
},
{
title: "Private Sale - 17% 3,400,000 SGPT",
description: " ",
color: "bg-[#5dbdd3]",
},
{
title: "Stacking & Farming - 15% 3,000,000 SGPT",
description: " ",
color: "bg-[#4591b8]",
},
{
title: "Marketing & Promotion - 15% 3,000,000 SGPT",
description: " ",
color: "bg-[#3b6696]",
},
{
title: "Public Sale - 14% 2,800,000 SGPT",
description: " ",
color: "bg-[#353c6e]",
},
{
title: "Reward & Q&A - 10% 2,000,000 SGPT",
description: " ",
color: "bg-[#705788]",
},
{
title: "Advisor - 10% 2,000,000 SGPT",
description: " ",
color: "bg-[#a5769e]",
},
{
title: "Treasury - 14% 2,800,000 SGPT",
description: " ",
color: "bg-[#d59ab3]",
},
];
const TokenomicsSection = (props: Props) => {
return (
<div className="w-full bg-white py-24" id="tokenomics">
<div className="container mx-auto">
<h1 className="text-5xl font-bold text-center text-black mb-20">
Tokenomics
</h1>
<div className="w-full flex flex-col md:flex-row">
<div className="md:w-1/2">
<img src={tokenomicChart} alt="" />
</div>
<div className="md:w-1/2">
<ul className="flex flex-col items-end justify-center h-full gap-3 px-3">
{tokenomics.map((item, index) => {
return (
<li
key={index}
className={`text-center w-full md:w-2/3 bg-slate-200 py-3 relative`}
>
<div
className={`absolute h-full top-0 w-2 ${item.color}`}
></div>
<h4 className="text-xl font-bold text-gray-700">
{item.title}
</h4>
<p className="text-gray-500">{item.description}</p>
</li>
);
})}
</ul>
</div>
</div>
</div>
</div>
);
};
export default TokenomicsSection;

1
tailwind.config.cjs
Unescape View File

@ -14,5 +14,6 @@ module.exports = {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
require("tailwindcss-brand-colors"),
], ],
}; };

3
vite.config.ts
Unescape View File

@ -1,9 +1,8 @@
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [],
server: { server: {
port: 5000, port: 5000,
host: "0.0.0.0", host: "0.0.0.0",

Write Preview
Loading…
Cancel
Save