updated tokenomics
This commit is contained in:
parent
3d5bd99ab2
commit
07a02b50c4
BIN
client/public/tokenomics.png
Normal file
BIN
client/public/tokenomics.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.4 MiB |
@ -19,72 +19,58 @@ const vestingData = [
|
||||
|
||||
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>
|
||||
<div className="container mx-auto">
|
||||
<div id="tokenomics" className="grid grid-cols-1 gap-10 items-center justify-center p-10 w-full">
|
||||
{/* Animated Pie Chart */}
|
||||
<h2 className="text-4xl text-center font-orbitron font-bold mb-4">Tokenomics</h2>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex justify-center"
|
||||
>
|
||||
|
||||
{/* 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>
|
||||
<img src={'/tokenomics.png'} alt="tokenomics" className="bg-cover scale-90 hover:scale-95 transition-all duration-300" />
|
||||
</motion.div>
|
||||
|
||||
<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>
|
||||
{/* 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>
|
||||
|
||||
<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 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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user