172 lines
9.4 KiB
TypeScript
172 lines
9.4 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import IconBox from "@/components/IconBox";
|
|
import tokenomicsImg from "@/assets/images/tokenomics.png";
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function TokenomicsSection() {
|
|
const [activeState, setActiveState] = useState<number>(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setActiveState((prev) => (prev === 1 ? 0 : prev + 1));
|
|
}, 5000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<section id="tokenomics" className="border-b border-white/10">
|
|
<div className="mx-auto container max-w-[1435px] px-8">
|
|
<div className="p-24 flex flex-col items-center">
|
|
<motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }}>
|
|
<IconBox
|
|
icon={
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6.43069 12.8335C8.93914 12.8335 11.0377 11.0789 11.5663 8.73015C11.6746 8.24908 11.7287 8.00851 11.5531 7.789C11.3775 7.5695 11.0933 7.5695 10.5249 7.5695H6.43069M6.43069 12.8335C3.52346 12.8335 1.16669 10.4767 1.16669 7.5695C1.16669 5.06107 2.92123 2.96244 5.27003 2.43388C5.75111 2.32562 5.99167 2.27149 6.21118 2.4471C6.43069 2.62271 6.43069 2.9069 6.43069 3.47528V7.5695M6.43069 12.8335V7.5695"
|
|
stroke="#0CE77E"
|
|
strokeWidth="0.875"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M12.5732 4.09898C12.0928 2.87947 11.1207 1.90743 9.90123 1.42701C9.26236 1.17532 8.94293 1.04947 8.55478 1.31371C8.16669 1.57796 8.16669 2.01015 8.16669 2.87456V4.05815C8.16669 4.89508 8.16669 5.31354 8.42668 5.57354C8.68667 5.83354 9.10515 5.83354 9.94206 5.83354H11.1256C11.9901 5.83354 12.4223 5.83354 12.6865 5.44543C12.9508 5.05732 12.8249 4.73787 12.5732 4.09898Z"
|
|
stroke="#0CE77E"
|
|
strokeWidth="0.875"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
}
|
|
text="Tokenomics"
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.h2
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="my-4 font-serif text-[42px] font-medium leading-[64px] text-white"
|
|
>
|
|
<span className="text-[#0CE77E]">Fair</span> distribution at prority
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="mb-12 max-w-[900px] text-lg font-light text-center text-white/75"
|
|
>
|
|
Our share is designed to ensure equitable access and rewards for all participants. Through a
|
|
transparent and decentralized approach, we incentivize contributors.
|
|
</motion.p>
|
|
|
|
<div className="w-full grid grid-cols-[480px_auto] gap-5">
|
|
<div>
|
|
<Image src={tokenomicsImg} alt="" className="w-full" />
|
|
</div>
|
|
|
|
<div>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="min-h-[384px] p-6 border border-white/5 bg-[#0E1618]"
|
|
>
|
|
{activeState === 0 && (
|
|
<>
|
|
<h3 className="mb-2.5 text-lg font-medium text-white">
|
|
Circulating Supply <span className="text-[#0CE77E]">(95%)</span>
|
|
</h3>
|
|
|
|
<p className="mb-1.5 text-white/75">
|
|
The majority of tokens are allocated for general circulation, enabling wide
|
|
accessibility and active ecosystem participation.
|
|
</p>
|
|
|
|
<ul className="mb-1.5 pl-4 flex flex-col items-center gap-1.5">
|
|
<li className="list-disc text-white/75">
|
|
Transactions: Facilitating payments between GPU renters and providers.
|
|
</li>
|
|
|
|
<li className="list-disc text-white/75">
|
|
Liquidity: Supporting smooth trading on decentralized exchanges and
|
|
maintaining token stability.
|
|
</li>
|
|
</ul>
|
|
|
|
<p className="text-white/75">
|
|
Empowers community & the platform's core functionality.
|
|
</p>
|
|
</>
|
|
)}
|
|
|
|
{activeState === 1 && (
|
|
<>
|
|
<h3 className="mb-2.5 text-lg font-medium text-white">
|
|
Team Allocations <span className="text-[#0CE77E]">(2%)</span>
|
|
</h3>
|
|
|
|
<p className="mb-3.5 text-white/75">
|
|
A small portion of tokens is reserved for the project team, vested over a
|
|
multi-year period to align incentives with long-term platform success. These
|
|
funds support ongoing development, attract top talent, and ensure continuous
|
|
innovation.
|
|
</p>
|
|
|
|
<h3 className="mb-2.5 text-lg font-medium text-white">
|
|
Marketing Operations <span className="text-[#0CE77E]">(1%)</span>
|
|
</h3>
|
|
|
|
<p className="mb-3.5 text-white/75">
|
|
Dedicated to promoting the platform and driving adoption through campaigns,
|
|
community programs, and partnerships.
|
|
</p>
|
|
|
|
<h3 className="mb-2.5 text-lg font-medium text-white">
|
|
Treasury & Ecosystem Development{" "}
|
|
<span className="text-[#0CE77E]">(2%)</span>
|
|
</h3>
|
|
|
|
<p className="text-white/75">
|
|
Reserved for research, grants, and maintaining operational resilience to
|
|
ensure long-term platform sustainability.
|
|
</p>
|
|
</>
|
|
)}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ delay: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="mt-4 flex justify-center gap-2.5"
|
|
>
|
|
{[1, 2].map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setActiveState(index)}
|
|
className={`w-[5px] h-[5px] ${
|
|
activeState === index ? "bg-[#0CE77E]" : "bg-[#D9D9D9]/25"
|
|
} duration-200`}
|
|
></button>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|