102 lines
5.2 KiB
TypeScript
102 lines
5.2 KiB
TypeScript
"use client";
|
|
|
|
import { Users, Megaphone, Building, CircleDollarSign } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
const tokenomicsData = [
|
|
{
|
|
title: "Circulating Supply (90%)",
|
|
description:
|
|
"The majority of tokens are allocated for general circulation, ensuring wide accessibility and active participation in the ecosystem. This design reduces centralization risks, enhances market liquidity, and ensures a fair launch.",
|
|
buttons: ["[ DETAILS ]", "[ DETAILS ]", "[ DETAILS ]"],
|
|
className: "md:col-span-2",
|
|
icon: CircleDollarSign,
|
|
},
|
|
{
|
|
title: "Team Allocation (4.5%)",
|
|
description:
|
|
"A portion of tokens is reserved for the project team to support ongoing development, attract top talent, and ensure continuous innovation. These tokens are vested over a multi-year period to align incentives with long-term platform success.",
|
|
buttons: ["[ DETAILS ]"],
|
|
icon: Users,
|
|
},
|
|
{
|
|
title: "Marketing Operations (1%)",
|
|
description:
|
|
"Dedicated to promoting the platform and driving adoption through campaigns, community programs, and partnerships.",
|
|
buttons: ["[ DETAILS ]"],
|
|
icon: Megaphone,
|
|
},
|
|
{
|
|
title: "Treasury & Ecosystem Development (4.5%)",
|
|
description:
|
|
"Reserved for research, grants, and maintaining operational resilience to ensure long-term platform sustainability. This allocation supports community incentives, expansions, and bounties.",
|
|
buttons: ["[ DETAILS ]", "[ DETAILS ]", "[ DETAILS ]"],
|
|
className: "md:col-span-2",
|
|
icon: Building,
|
|
},
|
|
];
|
|
|
|
export function Tokenomics() {
|
|
const [activeCard, setActiveCard] = useState<number | null>(null);
|
|
|
|
return (
|
|
<section id="tokenomics" className="relative py-20 bg-[#101014]">
|
|
<div className="container mx-auto px-4">
|
|
<div className="mb-12 space-y-5 text-center">
|
|
<h2 className="text-sm text-[#5e51ec] font-fk-grotesk-mono" data-aos="fade-up">
|
|
[ TOKENOMICS ]
|
|
</h2>
|
|
<h3
|
|
className="uppercase text-5xl font-extralight max-w-md mx-auto"
|
|
data-aos="fade-up"
|
|
data-aos-delay="100"
|
|
>
|
|
Simple <span className="font-pp-mondwest font-normal">Tokenomics</span>
|
|
</h3>
|
|
<p className="max-w-lg mx-auto text-lg font-semi-light" data-aos="fade-up" data-aos-delay="200">
|
|
Our tokenomics model is straightforward and transparent, designed to align with the interests of
|
|
our community and stakeholders. Detailed information about token distribution and allocation
|
|
will be provided to ensure clarity and trust.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{tokenomicsData.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`relative ${item.className || ""}`}
|
|
data-aos="fade-up"
|
|
data-aos-delay={index * 100}
|
|
onMouseEnter={() => setActiveCard(index)}
|
|
onMouseLeave={() => setActiveCard(null)}
|
|
>
|
|
<div
|
|
className={`p-6 rounded-md bg-[#1c1b20] flex flex-col h-full relative overflow-hidden group transition-all duration-300 ease-in-out ${
|
|
activeCard === index ? "ring-2 ring-[#5e51ec] shadow-lg shadow-[#5e51ec]/20" : ""
|
|
}`}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent -translate-x-full group-hover:translate-x-full transition-all duration-700 ease-in-out opacity-10"></div>
|
|
<div className="space-y-6 flex-grow relative z-10">
|
|
<div className="w-12 h-12 rounded-md bg-[#28272c] flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300">
|
|
{item.icon && <item.icon className="w-6 h-6 text-white" />}
|
|
</div>
|
|
<h3 className="text-2xl font-fk-grotesk-mono font-normal uppercase">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-[#838383] text-xl font-semi-light">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<img
|
|
src="/images/3d-tokenomics.webp"
|
|
alt="3D Tokenomics Illustration"
|
|
className="absolute z-50 -top-[70px] right-14 w-[250px]"
|
|
data-aos="fade-up"
|
|
data-aos-delay="400"
|
|
/>
|
|
</section>
|
|
);
|
|
}
|