"use client"; import { useState } from "react"; import { TypingAnimation } from "@/components/home/magicui/typing-animation"; import { motion, AnimatePresence } from "framer-motion"; export default function TokenomicsSection() { const [activeState, setActiveState] = useState(1); const handleStateChange = (state: number) => { setActiveState(state); }; const tabs = [ { id: 1, color: "#F3BA2F", title: "CIRCULATING SUPPLY", percentage: "95%", content: { title: "CIRCULATING SUPPLY (95%)", background: "tokenomics-section-bg.png", text: "The circulating supply represents the total amount of tokens that are currently available in the market. This ensures liquidity and accessibility for all participants. Our commitment to transparency and fairness is reflected in the high percentage of tokens allocated for circulation.", bullets: [ "Ensures liquidity and accessibility for all participants.", "Reflects our commitment to transparency and fairness.", "Supports the growth and sustainability of our community." ] } }, { id: 2, color: "#FBBC05", title: "TEAM ALLOCATIONS", percentage: "2%", content: { title: "TEAM ALLOCATIONS (2%)", background: "tokenomics-section-bg-2.png", text: "The team allocation represents a small portion of the total supply, dedicated to rewarding the team for their hard work and commitment. This ensures that the team remains motivated and aligned with the project's long-term goals.", bullets: [ "Rewards the team for their dedication and hard work.", "Aligns the team's interests with the project's success.", "Supports the ongoing development and growth of the project." ] } }, { id: 3, color: "#EA4335", title: "MARKETING OPERATIONS", percentage: "1%", content: { title: "MARKETING OPERATIONS (1%)", background: "tokenomics-section-bg-3.png", text: "The marketing operations allocation is dedicated to promoting our project and expanding our reach. This ensures that we can effectively communicate our vision and attract new participants.", bullets: [ "Supports promotional activities and campaigns.", "Helps in expanding our community and user base.", "Ensures effective communication of our project's vision and goals." ] } }, { id: 4, color: "#2AD458", title: "TREASURY", percentage: "2%", content: { title: "TREASURY (2%)", background: "tokenomics-section-bg-4.png", text: "The treasury allocation is reserved for the long-term sustainability and growth of the project. This fund will be used for future development, partnerships, and unforeseen expenses.", bullets: [ "Ensures the project's long-term sustainability and growth.", "Provides funds for future development and partnerships.", "Covers unforeseen expenses and emergencies." ] } } ]; return (

Tokenomics

GREAT TOKENS SIMPLE TOKENOMICS

Discover the transparent and fair distribution of our tokens, designed to ensure
sustainability and growth for our community.

{tabs.map((tab) => (
handleStateChange(tab.id)} className={`border-r border-[#eee] py-5 px-7 cursor-pointer transition-all duration-300 ${activeState === tab.id ? 'bg-gray-50' : 'hover:bg-gray-50/50'}`} >

{tab.title}

{tab.percentage}

))}
{tabs.map((tab) => ( activeState === tab.id && (

{tab.content.title}

{tab.content.text}

    {tab.content.bullets.map((bullet, index) => (
  • • {bullet}
  • ))}
) ))}
); }