2025-02-12 17:38:06 +05:30

93 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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;