You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.2 KiB
88 lines
2.2 KiB
2 years ago
|
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% 1,000,000 SGPT",
|
||
|
|
description: " ",
|
||
|
|
color: "bg-[#5dbdd3]",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Stacking & Farming - 5% 1,000,000 SGPT",
|
||
|
|
description: " ",
|
||
|
|
color: "bg-[#4591b8]",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Marketing & Promotion - 5% 1,000,000 SGPT",
|
||
|
|
description: " ",
|
||
|
|
color: "bg-[#3b6696]",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Public Sale - 5% 1,000,000 SGPT",
|
||
|
|
description: " ",
|
||
|
|
color: "bg-[#353c6e]",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Reward & Q&A - 5% 1,000,000 SGPT",
|
||
|
|
description: " ",
|
||
|
|
color: "bg-[#705788]",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Advisor - 5% 1,000,000 SGPT",
|
||
|
|
description: " ",
|
||
|
|
color: "bg-[#a5769e]",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Treasury - 5% 1,000,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;
|