93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
import React from "react";
|
||
import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
|
||
import { motion } from "framer-motion";
|
||
|
||
const COLORS = ["#F7A600", "#FFD700", "#FFEC80", "#D3D3D3"];
|
||
|
||
const data = [
|
||
{ name: "Developer Wallet Allocation", value: 5, color: "#F7A600" },
|
||
{ name: "Team", value: 2, color: "#FFD700" },
|
||
{ name: "Marketing & Operations", value: 1, color: "#FFEC80" },
|
||
{ name: "Treasury & Ecosystem", value: 2, color: "#D3D3D3" },
|
||
];
|
||
|
||
const vestingData = [
|
||
{ name: "2% Locked (2 Years)", color: "#D3D3D3" },
|
||
{ name: "0.5% for Marketing", color: "#E0E0E0" },
|
||
{ name: "0.5% Treasury Liquidity", color: "#F0F0F0" },
|
||
];
|
||
|
||
const Tokenomics: React.FC = () => {
|
||
return (
|
||
<div id="tokenomics" className="grid md:grid-cols-2 gap-10 items-center justify-center p-10 w-full">
|
||
{/* Animated Pie Chart */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="flex justify-center"
|
||
>
|
||
<ResponsiveContainer width={600} height={600}>
|
||
<PieChart>
|
||
<Pie
|
||
data={data}
|
||
cx="50%"
|
||
cy="50%"
|
||
innerRadius={120}
|
||
outerRadius={180}
|
||
fill="#8884d8"
|
||
paddingAngle={5}
|
||
dataKey="value"
|
||
className="w-full h-full"
|
||
>
|
||
{data.map((entry, index) => (
|
||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||
))}
|
||
</Pie>
|
||
</PieChart>
|
||
</ResponsiveContainer>
|
||
</motion.div>
|
||
|
||
{/* Tokenomics Info */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-left"
|
||
>
|
||
<h2 className="text-4xl font-orbitron font-bold mb-4">Tokenomics</h2>
|
||
<p className="text-gray-500 mb-4">
|
||
Transparent Allocation – Designed for Growth and Sustainability
|
||
</p>
|
||
|
||
<div className="mb-6 space-y-2">
|
||
{data.map((item, index) => (
|
||
<div key={index} className="flex items-center">
|
||
<div
|
||
className="w-4 h-4 rounded mr-2"
|
||
style={{ backgroundColor: item.color }}
|
||
></div>
|
||
<p className="text-lg">{item.name} ({item.value}%)</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<h3 className="text-xl font-semibold mb-3">Vesting Plan</h3>
|
||
<div className="space-y-2">
|
||
{vestingData.map((item, index) => (
|
||
<div key={index} className="flex items-center">
|
||
<div
|
||
className="w-4 h-4 rounded mr-2"
|
||
style={{ backgroundColor: item.color }}
|
||
></div>
|
||
<p className="text-lg">{item.name}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Tokenomics;
|