{"id":29,"date":"2026-07-09T18:04:19","date_gmt":"2026-07-09T18:04:19","guid":{"rendered":"http:\/\/fluxxecosystem.xyz\/?page_id=29"},"modified":"2026-07-12T23:55:00","modified_gmt":"2026-07-12T23:55:00","slug":"homepage","status":"publish","type":"page","link":"http:\/\/fluxxecosystem.xyz\/","title":{"rendered":"Home"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>FLUXX \u2014 The Utility Token Powering Web3<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Geist+Mono:wght@400;500;600;700&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap\" rel=\"stylesheet\">\n<script crossorigin=\"\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/18.2.0\/umd\/react.production.min.js\"><\/script>\n<script crossorigin=\"\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react-dom\/18.2.0\/umd\/react-dom.production.min.js\"><\/script>\n<script crossorigin=\"\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/7.23.5\/babel.min.js\"><\/script>\n<style>\n  * { box-sizing: border-box; }\n  html { scroll-behavior: smooth; }\n  html, body { margin: 0; padding: 0; background: #030402; }\n  #root { min-height: 100vh; }\n  ::selection { background: #22c55e; color: #00190A; }\n\n  \/* ---- gradient text ---- *\/\n  .grad-emerald {\n    background: linear-gradient(100deg, #bff7d0 0%, #4ade80 35%, #22c55e 65%, #15803d 100%);\n    -webkit-background-clip: text; background-clip: text; color: transparent;\n  }\n  .grad-gold {\n    background: linear-gradient(100deg, #fde9a8 0%, #f5c542 35%, #f5b700 65%, #b8860b 100%);\n    -webkit-background-clip: text; background-clip: text; color: transparent;\n  }\n\n  \/* ---- glass surfaces ---- *\/\n  .glass {\n    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));\n    border: 1px solid rgba(255,255,255,0.09);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -24px rgba(0,0,0,0.6);\n    transition: transform .35s cubic-bezier(.16,.8,.24,1), box-shadow .35s ease, border-color .35s ease;\n  }\n  .glass-hover:hover {\n    transform: translateY(-4px);\n    border-color: rgba(34,197,94,0.35);\n    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 48px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(34,197,94,0.08);\n  }\n\n  \/* ---- buttons ---- *\/\n  .btn { position: relative; overflow: hidden; cursor: pointer; isolation: isolate; }\n  .btn:active { transform: scale(0.98); }\n  .btn-primary {\n    background: linear-gradient(135deg, #4ade80, #16a34a 65%);\n    color: #04170a; box-shadow: 0 10px 30px -10px rgba(34,197,94,0.55), inset 0 1px 0 rgba(255,255,255,0.3);\n    transition: box-shadow .3s ease, transform .3s ease, filter .3s ease;\n  }\n  .btn-primary:hover { box-shadow: 0 14px 36px -8px rgba(34,197,94,0.7), inset 0 1px 0 rgba(255,255,255,0.35); transform: translateY(-2px); filter: brightness(1.04); }\n  .btn-outline {\n    background: rgba(255,255,255,0.02); color: #f5f6f7; border: 1px solid rgba(255,255,255,0.16);\n    transition: border-color .3s ease, background .3s ease, transform .3s ease;\n  }\n  .btn-outline:hover { border-color: rgba(245,183,0,0.55); background: rgba(255,255,255,0.05); transform: translateY(-2px); }\n  .btn-ghost {\n    background: transparent; color: #9aa1ad; border: 1px solid rgba(255,255,255,0.1);\n    transition: border-color .3s ease, color .3s ease, transform .3s ease;\n  }\n  .btn-ghost:hover { color: #f5f6f7; border-color: rgba(255,255,255,0.28); transform: translateY(-2px); }\n\n  .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35); transform: scale(0); animation: rippleAnim .6s linear; pointer-events: none; }\n  @keyframes rippleAnim { to { transform: scale(2.6); opacity: 0; } }\n\n  \/* ---- scroll reveal ---- *\/\n  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1); }\n  .reveal.in-view { opacity: 1; transform: translateY(0); }\n\n  @keyframes heroFade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }\n  .hero-anim > * { animation: heroFade .9s cubic-bezier(.16,.8,.24,1) both; }\n  .hero-anim > *:nth-child(1) { animation-delay: .05s; }\n  .hero-anim > *:nth-child(2) { animation-delay: .15s; }\n  .hero-anim > *:nth-child(3) { animation-delay: .25s; }\n  .hero-anim > *:nth-child(4) { animation-delay: .35s; }\n\n  @keyframes glowPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }\n  .glow-dot { animation: glowPulse 2.4s ease-in-out infinite; }\n\n  a:focus-visible, button:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }\n\n  @media (prefers-reduced-motion: reduce) {\n    .reveal, .hero-anim > * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }\n  }\n\n  @media (max-width: 900px) {\n    .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }\n    .grid-3, .grid-5, .grid-4, .grid-2, .grid-3-tight { grid-template-columns: 1fr !important; }\n    .nav-links { display: none !important; }\n    .hero-title { font-size: clamp(32px, 8vw, 44px) !important; }\n  }\n  @media (max-width: 560px) {\n    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }\n  }\n<\/style>\n\n\n<div id=\"root\"><\/div>\n<script type=\"text\/babel\" data-presets=\"react,env\">\nconst { useState, useRef, useEffect } = React;\n\n\/* ---------------------------------------------------------\n   Token system \u2014 premium Web3 dark dashboard\n--------------------------------------------------------- *\/\nconst C = {\n  bg: \"#030402\",\n  card: \"rgba(255,255,255,0.035)\",\n  card2: \"rgba(255,255,255,0.06)\",\n  line: \"rgba(255,255,255,0.09)\",\n  green: \"#22c55e\",\n  greenSoft: \"#4ade80\",\n  greenDeep: \"#15803d\",\n  red: \"#ef4444\",\n  gold: \"#f5b700\",\n  goldSoft: \"#fbbf24\",\n  blue: \"#5B8DEF\",\n  text: \"#f5f6f7\",\n  muted: \"#9aa1ad\",\n};\nconst sans = \"'Plus Jakarta Sans', sans-serif\";\nconst mono = \"'Geist Mono', monospace\";\n\n\/* ---------------------------------------------------------\n   Minimal line-icon set (no emoji, no third-party icon lib)\n--------------------------------------------------------- *\/\nconst Icon = {\n  Coin: (p) => (<svg width={p.size||18} height={p.size||18} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M9.5 15.2c.4.7 1.3 1.1 2.5 1.1 1.7 0 2.8-.8 2.8-2 0-1.3-1.2-1.7-2.8-2.1-1.6-.4-2.8-.9-2.8-2.1 0-1.1 1.1-1.9 2.6-1.9 1.1 0 2 .4 2.4 1\"\/><path d=\"M12 7v1.2M12 15.8V17\"\/><\/svg>),\n  Play: (p) => (<svg width={p.size||18} height={p.size||18} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M7 5.5v13l11-6.5-11-6.5Z\"\/><\/svg>),\n  Doc: (p) => (<svg width={p.size||18} height={p.size||18} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M7 3.5h7l4 4V20a.6.6 0 0 1-.6.6H7A.6.6 0 0 1 6.4 20V4.1A.6.6 0 0 1 7 3.5Z\"\/><path d=\"M14 3.5V8h4\"\/><path d=\"M9 12.5h6M9 15.5h6M9 9.5h2\"\/><\/svg>),\n  Controller: (p) => (<svg width={p.size||24} height={p.size||24} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M7 9.5h9a4.5 4.5 0 0 1 4.4 5.5l-.3 1.2a2.4 2.4 0 0 1-4.3.9l-1-1.4a2 2 0 0 0-1.6-.8h-3.4a2 2 0 0 0-1.6.8l-1 1.4a2.4 2.4 0 0 1-4.3-.9L2.6 15A4.5 4.5 0 0 1 7 9.5Z\"\/><path d=\"M7.2 12v3M5.7 13.5h3M15.5 12.8h.01M18 11.3h.01\"\/><\/svg>),\n  Book: (p) => (<svg width={p.size||24} height={p.size||24} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M4 5.2c2-1 5-1.2 8 .3v13.3c-3-1.5-6-1.3-8-.3V5.2Z\"\/><path d=\"M20 5.2c-2-1-5-1.2-8 .3v13.3c3-1.5 6-1.3 8-.3V5.2Z\"\/><\/svg>),\n  Briefcase: (p) => (<svg width={p.size||24} height={p.size||24} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"3.2\" y=\"7.5\" width=\"17.6\" height=\"11.5\" rx=\"1.6\"\/><path d=\"M8.5 7.5V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v1.5\"\/><path d=\"M3.2 12.5h17.6\"\/><\/svg>),\n  Trophy: (p) => (<svg width={p.size||24} height={p.size||24} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M7 4h10v5.5a5 5 0 0 1-10 0V4Z\"\/><path d=\"M7 5.5H4a3 3 0 0 0 3 4.5M17 5.5h3a3 3 0 0 1-3 4.5\"\/><path d=\"M12 14.5v3M9 20.5h6M9.5 20.5c0-1.7.9-2.5 2.5-2.5s2.5.8 2.5 2.5\"\/><\/svg>),\n  Gift: (p) => (<svg width={p.size||24} height={p.size||24} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"3.5\" y=\"9\" width=\"17\" height=\"4\" rx=\"0.6\"\/><rect x=\"4.5\" y=\"13\" width=\"15\" height=\"7.2\" rx=\"0.6\"\/><path d=\"M12 9v11.2\"\/><path d=\"M12 9c-1-3-3-4.2-4.5-3.2S6.5 9 12 9Zm0 0c1-3 3-4.2 4.5-3.2S17.5 9 12 9Z\"\/><\/svg>),\n  Flame: (p) => (<svg width={p.size||24} height={p.size||24} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M12 21c-3.6 0-6-2.3-6-5.6 0-2.6 1.6-4 2.6-6 .5 1 1.4 1.6 2 1 .5-2.6-.6-4.6.4-7.4 3 1.4 6 5 6 9.3 0 .8-.2 1.6-.5 2.3.7-.3 1.3-.9 1.7-1.7.5 1 .8 2.1.8 3.2 0 2.9-2.4 5-7 5Z\"\/><\/svg>),\n  Check: (p) => (<svg width={p.size||16} height={p.size||16} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M5 12.8 9.5 17 19 6.5\"\/><\/svg>),\n  Telegram: (p) => (<svg width={p.size||18} height={p.size||18} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m3 11.2 17-7.5-3 16-6-4.3-3 3-.6-5Z\"\/><path d=\"M20 3.7 8.4 14.5\"\/><\/svg>),\n  XLogo: (p) => (<svg width={p.size||18} height={p.size||18} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M4.5 4.5l15 15M19.5 4.5l-15 15\"\/><\/svg>),\n  Discord: (p) => (<svg width={p.size||18} height={p.size||18} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M6.5 16.5c3.5 1.6 7.5 1.6 11 0\"\/><path d=\"M7 6.5C9.5 5.5 14.5 5.5 17 6.5c1.6 2 2.4 5.4 2.2 9-2 1.4-2 1.4-2 1.4l-1-2M7 6.5C4.5 8.5 3.7 11.9 3.9 15.5c2 1.4 2 1.4 2 1.4l1-2\"\/><ellipse cx=\"9\" cy=\"13\" rx=\"1.2\" ry=\"1.5\"\/><ellipse cx=\"15\" cy=\"13\" rx=\"1.2\" ry=\"1.5\"\/><\/svg>),\n  YouTube: (p) => (<svg width={p.size||18} height={p.size||18} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"3\" y=\"6.5\" width=\"18\" height=\"11\" rx=\"3\"\/><path d=\"M10.5 10v4l3.6-2Z\" fill={p.color||\"currentColor\"} stroke=\"none\"\/><\/svg>),\n  Mic: (p) => (<svg width={p.size||18} height={p.size||18} viewBox=\"0 0 24 24\" fill=\"none\" stroke={p.color||\"currentColor\"} strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"9.5\" y=\"3\" width=\"5\" height=\"10\" rx=\"2.5\"\/><path d=\"M6 11a6 6 0 0 0 12 0M12 17v3.5M9 20.5h6\"\/><\/svg>),\n};\n\n\/* ---------------------------------------------------------\n   Scroll-reveal hook + wrapper\n--------------------------------------------------------- *\/\nfunction useInView(threshold = 0.14) {\n  const ref = useRef(null);\n  const [inView, setInView] = useState(false);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const obs = new IntersectionObserver((entries) => {\n      entries.forEach((e) => {\n        if (e.isIntersecting) { setInView(true); obs.unobserve(el); }\n      });\n    }, { threshold });\n    obs.observe(el);\n    return () => obs.disconnect();\n  }, []);\n  return [ref, inView];\n}\nfunction Reveal({ children, style }) {\n  const [ref, inView] = useInView();\n  return <div ref={ref} className={`reveal${inView ? \" in-view\" : \"\"}`} style={style}>{children}<\/div>;\n}\n\n\/* ---------------------------------------------------------\n   Animated number (counts up when scrolled into view)\n--------------------------------------------------------- *\/\nfunction AnimatedNumber({ value, duration = 1300 }) {\n  const [ref, inView] = useInView(0.4);\n  const [display, setDisplay] = useState(null);\n  useEffect(() => {\n    if (!inView) return;\n    const m = String(value).match(\/^([^0-9]*)([0-9,.]+)(.*)$\/);\n    if (!m) { setDisplay(value); return; }\n    const [, prefix, numStr, suffix] = m;\n    const target = parseFloat(numStr.replace(\/,\/g, \"\"));\n    const decimals = (numStr.split(\".\")[1] || \"\").length;\n    const start = performance.now();\n    let raf;\n    const tick = (now) => {\n      const t = Math.min(1, (now - start) \/ duration);\n      const eased = 1 - Math.pow(1 - t, 3);\n      const cur = target * eased;\n      const formatted = cur.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });\n      setDisplay(`${prefix}${formatted}${suffix}`);\n      if (t < 1) raf = requestAnimationFrame(tick);\n    };\n    raf = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(raf);\n  }, [inView]);\n  return <span ref={ref}>{display === null ? \"0\" : display}<\/span>;\n}\n\n\/* ---------------------------------------------------------\n   Ripple handler for buttons\n--------------------------------------------------------- *\/\nfunction addRipple(e) {\n  const btn = e.currentTarget;\n  const rect = btn.getBoundingClientRect();\n  const diameter = Math.max(rect.width, rect.height);\n  const circle = document.createElement(\"span\");\n  circle.style.width = circle.style.height = `${diameter}px`;\n  circle.style.left = `${e.clientX - rect.left - diameter \/ 2}px`;\n  circle.style.top = `${e.clientY - rect.top - diameter \/ 2}px`;\n  circle.className = \"ripple\";\n  const existing = btn.querySelector(\".ripple\");\n  if (existing) existing.remove();\n  btn.appendChild(circle);\n}\n\n\/* ---------------------------------------------------------\n   Shared building blocks\n--------------------------------------------------------- *\/\nfunction Section({ id, eyebrow, title, sub, children, style }) {\n  return (\n    <section id={id} style={{ padding: \"88px 24px\", maxWidth: 1180, margin: \"0 auto\", ...style }}>\n      <Reveal>\n        <div style={{ marginBottom: 44 }}>\n          {eyebrow && (\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, color: C.blue, fontFamily: mono, fontSize: 12, letterSpacing: 2.5, textTransform: \"uppercase\", marginBottom: 14 }}>\n              <span className=\"glow-dot\" style={{ width: 5, height: 5, borderRadius: \"50%\", background: C.blue, display: \"inline-block\" }} \/>\n              {eyebrow}\n            <\/div>\n          )}\n          {title && (\n            <h2 style={{ fontFamily: sans, fontWeight: 800, fontSize: \"clamp(26px,3.6vw,40px)\", color: C.text, margin: 0, letterSpacing: -0.6, lineHeight: 1.15 }}>\n              {title}\n            <\/h2>\n          )}\n          {sub && <p style={{ color: C.muted, marginTop: 14, fontSize: 16, maxWidth: 640, lineHeight: 1.7 }}>{sub}<\/p>}\n        <\/div>\n      <\/Reveal>\n      {children}\n    <\/section>\n  );\n}\n\nfunction Card({ children, style, accent, hover = true }) {\n  return (\n    <div className={`glass${hover ? \" glass-hover\" : \"\"}`} style={{\n      borderRadius: 18, padding: 22,\n      borderColor: accent || undefined,\n      ...style,\n    }}>\n      {children}\n    <\/div>\n  );\n}\n\nfunction Pill({ children, color }) {\n  return (\n    <span style={{\n      display: \"inline-flex\", alignItems: \"center\", gap: 6, fontSize: 12.5,\n      color: color || C.muted, border: `1px solid ${color ? color + \"55\" : C.line}`,\n      background: color ? color + \"14\" : \"rgba(255,255,255,0.03)\",\n      borderRadius: 999, padding: \"5px 13px\", fontFamily: sans, fontWeight: 600,\n    }}>\n      {children}\n    <\/span>\n  );\n}\n\nfunction Button({ children, variant = \"primary\", onClick, style, icon }) {\n  const base = { display: \"inline-flex\", alignItems: \"center\", gap: 9, border: \"none\", borderRadius: 12, padding: \"15px 26px\", fontWeight: 700, fontFamily: sans, fontSize: 15, whiteSpace: \"nowrap\" };\n  const cls = variant === \"primary\" ? \"btn btn-primary\" : variant === \"outline\" ? \"btn btn-outline\" : \"btn btn-ghost\";\n  return (\n    <button className={cls} onMouseDown={addRipple} onClick={onClick} style={{ ...base, ...style }}>\n      {icon}{children}\n    <\/button>\n  );\n}\n\n\/* ---------------------------------------------------------\n   1. Nav + Hero\n--------------------------------------------------------- *\/\nfunction Hero() {\n  return (\n    <div style={{ position: \"relative\", overflow: \"hidden\", borderBottom: `1px solid ${C.line}` }}>\n      <div style={{ position: \"absolute\", inset: 0, background: \"radial-gradient(circle at 78% -10%, rgba(34,197,94,0.14), transparent 45%), radial-gradient(circle at 8% 15%, rgba(245,183,0,0.10), transparent 42%), radial-gradient(circle at 50% 100%, rgba(34,197,94,0.06), transparent 50%)\" }} \/>\n      <div className=\"hero-anim\" style={{ maxWidth: 900, margin: \"0 auto\", padding: \"116px 24px 92px\", textAlign: \"center\", position: \"relative\" }}>\n        <Pill color={C.gold}>Welcome to FLUXX<\/Pill>\n        <h1 className=\"hero-title\" style={{ fontFamily: sans, fontWeight: 800, fontSize: \"clamp(34px,6vw,58px)\", color: C.text, margin: \"24px 0 20px\", letterSpacing: -1.2, lineHeight: 1.1 }}>\n          The utility token powering the<br \/>next generation of <span className=\"grad-emerald\">Web3<\/span>.\n        <\/h1>\n        <p style={{ color: C.muted, fontSize: 17, maxWidth: 580, margin: \"0 auto 36px\", lineHeight: 1.7 }}>\n          Games, education, marketplaces and <span className=\"grad-gold\" style={{ fontWeight: 700 }}>DeFi<\/span> \u2014 one token connects all of it,\n          with a real burn mechanism behind every action.\n        <\/p>\n        <div style={{ display: \"flex\", gap: 12, justifyContent: \"center\", flexWrap: \"wrap\" }}>\n          <Button variant=\"primary\" icon={<Icon.Coin size={17} \/>}>Buy FLUXX<\/Button>\n          <Button variant=\"outline\" icon={<Icon.Play size={16} \/>}>Play Game<\/Button>\n          <Button variant=\"ghost\" icon={<Icon.Doc size={16} \/>}>Whitepaper<\/Button>\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n}\n\n\/* ---------------------------------------------------------\n   2. Live statistics\n--------------------------------------------------------- *\/\nfunction StatsStrip() {\n  const stats = [\n    { label: \"FLUXX Price\", value: \"$0.00142\", change: \"+4.2%\", up: true },\n    { label: \"Holders\", value: \"18,420\" },\n    { label: \"Market Cap\", value: \"$2.1M\" },\n    { label: \"Total Burned\", value: \"340M\" },\n    { label: \"Players Online\", value: \"1,204\" },\n    { label: \"Tournament Pool\", value: \"$12,500\" },\n  ];\n  return (\n    <div style={{ borderBottom: `1px solid ${C.line}`, background: \"rgba(255,255,255,0.015)\" }}>\n      <Reveal>\n        <div style={{ maxWidth: 1180, margin: \"0 auto\", padding: \"30px 24px\", display: \"grid\", gridTemplateColumns: \"repeat(6, 1fr)\", gap: 14 }} className=\"stats-grid\">\n          {stats.map((s) => (\n            <div key={s.label} className=\"glass\" style={{ borderRadius: 14, padding: \"16px 16px\" }}>\n              <div style={{ fontSize: 12, color: C.muted, marginBottom: 8, fontFamily: sans, letterSpacing: 0.3 }}>{s.label}<\/div>\n              <div style={{ fontFamily: mono, fontSize: 19, fontWeight: 600, color: C.text }}>\n                <AnimatedNumber value={s.value} \/>{\" \"}\n                {s.change && <span style={{ fontSize: 12.5, color: s.up ? C.green : C.red }}>{s.change}<\/span>}\n              <\/div>\n            <\/div>\n          ))}\n        <\/div>\n      <\/Reveal>\n    <\/div>\n  );\n}\n\n\/* ---------------------------------------------------------\n   3. Why FLUXX\n--------------------------------------------------------- *\/\nfunction WhyFluxx() {\n  const items = [\n    { icon: \"Controller\", title: \"Endless Runner\", desc: \"A play-to-earn arcade game with weekly cash competitions.\" },\n    { icon: \"Book\", title: \"Course Marketplace\", desc: \"Buy and sell educational content directly with FLUXX.\" },\n    { icon: \"Briefcase\", title: \"Business Marketplace\", desc: \"List services and pay partners without middlemen.\" },\n    { icon: \"Trophy\", title: \"Weekly Tournaments\", desc: \"Compete for prize pools funded by ecosystem activity.\" },\n    { icon: \"Gift\", title: \"Rewards\", desc: \"Daily challenges, streaks and referral payouts.\" },\n    { icon: \"Flame\", title: \"Burn Mechanism\", desc: \"A share of activity is burned, tightening supply over time.\" },\n  ];\n  return (\n    <Section id=\"why-fluxx\" eyebrow=\"Ecosystem\" title={<>Why <span className=\"grad-gold\">FLUXX<\/span>?<\/>} sub=\"Why thousands are joining the ecosystem.\">\n      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: 16 }} className=\"grid-3\">\n        {items.map((it, i) => {\n          const IconComp = Icon[it.icon];\n          return (\n            <Reveal key={it.title} style={{ transitionDelay: `${i * 60}ms` }}>\n              <Card>\n                <div style={{ width: 42, height: 42, borderRadius: 12, background: \"rgba(34,197,94,0.10)\", border: `1px solid rgba(34,197,94,0.25)`, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", marginBottom: 16, color: C.greenSoft }}>\n                  <IconComp size={20} \/>\n                <\/div>\n                <div style={{ fontFamily: sans, fontWeight: 700, fontSize: 16, color: C.text, marginBottom: 7 }}>{it.title}<\/div>\n                <div style={{ fontSize: 13.5, color: C.muted, lineHeight: 1.6 }}>{it.desc}<\/div>\n              <\/Card>\n            <\/Reveal>\n          );\n        })}\n      <\/div>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   4. Utility\n--------------------------------------------------------- *\/\nfunction Utility() {\n  const items = [\"Play Games\", \"Join Tournaments\", \"Buy Courses\", \"Marketplace Payments\", \"Earn Rewards\", \"Business Utilities\"];\n  return (\n    <Section id=\"utility\" eyebrow=\"Utility\" title={<>What can you do with <span className=\"grad-emerald\">FLUXX<\/span>?<\/>}>\n      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: 14 }} className=\"grid-3\">\n        {items.map((it, i) => (\n          <Reveal key={it} style={{ transitionDelay: `${i * 50}ms` }}>\n            <div className=\"glass glass-hover\" style={{ display: \"flex\", alignItems: \"center\", gap: 12, borderRadius: 14, padding: \"16px 18px\" }}>\n              <span style={{ width: 24, height: 24, borderRadius: \"50%\", background: \"rgba(34,197,94,0.14)\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: C.greenSoft, flexShrink: 0 }}>\n                <Icon.Check size={13} \/>\n              <\/span>\n              <span style={{ fontFamily: sans, fontWeight: 600, fontSize: 14.5, color: C.text }}>{it}<\/span>\n            <\/div>\n          <\/Reveal>\n        ))}\n      <\/div>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   5. Endless Runner\n--------------------------------------------------------- *\/\nfunction EndlessRunner() {\n  return (\n    <Section id=\"play\" eyebrow=\"Flagship game\" title=\"Endless Runner\" sub=\"Play. Compete. Earn.\">\n      <Card accent=\"rgba(245,183,0,0.3)\" style={{ padding: 34, display: \"grid\", gridTemplateColumns: \"auto 1fr auto\", gap: 28, alignItems: \"center\" }} className=\"grid-3-tight\">\n        <div style={{ width: 74, height: 74, borderRadius: 18, background: \"rgba(245,183,0,0.10)\", border: \"1px solid rgba(245,183,0,0.3)\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: C.goldSoft }}>\n          <Icon.Controller size={34} \/>\n        <\/div>\n        <div>\n          <div style={{ display: \"flex\", gap: 10, flexWrap: \"wrap\", marginBottom: 14 }}>\n            {[\"Play\", \"Compete\", \"Earn\"].map((s) => (\n              <Pill key={s} color={C.blue}>{s}<\/Pill>\n            ))}\n          <\/div>\n          <div style={{ display: \"flex\", gap: 24, flexWrap: \"wrap\" }}>\n            <div>\n              <div style={{ fontFamily: mono, color: C.green, fontWeight: 700, fontSize: 18 }}>$100<\/div>\n              <div style={{ fontSize: 12.5, color: C.muted }}>Weekly Competition<\/div>\n            <\/div>\n            <div>\n              <div style={{ fontFamily: mono, color: C.gold, fontWeight: 700, fontSize: 18 }}>Monthly<\/div>\n              <div style={{ fontSize: 12.5, color: C.muted }}>Championship<\/div>\n            <\/div>\n            <div>\n              <div style={{ fontFamily: mono, color: C.blue, fontWeight: 700, fontSize: 18 }}>Live<\/div>\n              <div style={{ fontSize: 12.5, color: C.muted }}>Leaderboard<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        <Button variant=\"primary\" style={{ padding: \"16px 28px\" }}>Play Now<\/Button>\n      <\/Card>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   6. Leaderboard preview\n--------------------------------------------------------- *\/\nfunction LeaderboardPreview() {\n  const [tab, setTab] = useState(\"players\");\n  const data = {\n    players: [[\"0x7fA\u2026c31d\", \"42,180 pts\"], [\"0x2b9\u202691Aa\", \"38,004 pts\"], [\"0x9Ef\u202644c2\", \"31,552 pts\"]],\n    referrers: [[\"0x114\u20268Bd0\", \"212 referrals\"], [\"0x3aC\u20267F21\", \"180 referrals\"], [\"0x88d\u202612eA\", \"156 referrals\"]],\n    winners: [[\"0x5C0\u20269b3D\", \"0.05 BNB\"], [\"0x7fA\u2026c31d\", \"NFT Founders #042\"], [\"0x2b9\u202691Aa\", \"$250 FLUXX\"]],\n  };\n  const tabs = [[\"players\", \"Top Players Today\"], [\"referrers\", \"Top Referrers\"], [\"winners\", \"Top Winners\"]];\n  return (\n    <Section id=\"leaderboard\" eyebrow=\"Standings\" title=\"Leaderboard preview\">\n      <div style={{ display: \"flex\", gap: 8, marginBottom: 18, flexWrap: \"wrap\" }}>\n        {tabs.map(([k, label]) => (\n          <button key={k} className=\"btn\" onMouseDown={addRipple} onClick={() => setTab(k)} style={{\n            background: tab === k ? \"rgba(91,141,239,0.12)\" : \"transparent\", color: tab === k ? C.text : C.muted,\n            border: `1px solid ${tab === k ? C.blue : C.line}`, borderRadius: 999, padding: \"8px 16px\",\n            fontFamily: sans, fontWeight: 600, fontSize: 13.5, transition: \"all .25s ease\",\n          }}>{label}<\/button>\n        ))}\n      <\/div>\n      <Card hover={false}>\n        {data[tab].map((row, i) => (\n          <div key={i} style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"12px 0\", borderBottom: i < 2 ? `1px solid ${C.line}` : \"none\" }}>\n            <span style={{ fontFamily: mono, color: C.muted, fontSize: 14 }}>#{i + 1} \u00b7 {row[0]}<\/span>\n            <span style={{ fontFamily: mono, color: C.gold, fontSize: 14 }}>{row[1]}<\/span>\n          <\/div>\n        ))}\n      <\/Card>\n      <Button variant=\"ghost\" style={{ marginTop: 16, padding: \"11px 20px\", fontSize: 13.5, color: C.blue, borderColor: C.line }}>View Leaderboard \u2192<\/Button>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   7. Rewards\n--------------------------------------------------------- *\/\nfunction Rewards() {\n  const items = [\n    { label: \"Weekly Rewards\", desc: \"Payouts every week to top participants.\" },\n    { label: \"Monthly Rewards\", desc: \"A bigger pool for the season's best.\" },\n    { label: \"Daily Challenges\", desc: \"Small daily tasks, small daily wins.\" },\n    { label: \"Spin & Win\", desc: \"The FLUXX Lucky Spin ticket system.\" },\n    { label: \"Referral Rewards\", desc: \"20% commission on everyone you bring in.\" },\n  ];\n  return (\n    <Section id=\"rewards\" eyebrow=\"Earn\" title=\"Rewards\">\n      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(5, 1fr)\", gap: 14 }} className=\"grid-5\">\n        {items.map((it, i) => (\n          <Reveal key={it.label} style={{ transitionDelay: `${i * 50}ms` }}>\n            <Card style={{ padding: 18 }}>\n              <div style={{ fontFamily: sans, fontWeight: 700, fontSize: 14.5, color: C.text, marginBottom: 8 }}>{it.label}<\/div>\n              <div style={{ fontSize: 12.5, color: C.muted, lineHeight: 1.55 }}>{it.desc}<\/div>\n            <\/Card>\n          <\/Reveal>\n        ))}\n      <\/div>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   8. Ecosystem diagram\n--------------------------------------------------------- *\/\nfunction EcosystemNode({ label, big, color }) {\n  return (\n    <div className=\"glass\" style={{\n      borderRadius: 14, padding: big ? \"16px 30px\" : \"10px 18px\", fontFamily: sans, fontWeight: big ? 800 : 600,\n      fontSize: big ? 18 : 13.5, color: color || C.text,\n      borderColor: color ? color + \"45\" : undefined,\n    }}>\n      {label}\n    <\/div>\n  );\n}\nfunction Arrow() {\n  return <div style={{ color: C.muted, fontSize: 20 }}>\u2193<\/div>;\n}\nfunction Ecosystem() {\n  return (\n    <Section id=\"ecosystem\" eyebrow=\"How it connects\" title={<>FLUXX <span className=\"grad-emerald\">ecosystem<\/span><\/>}>\n      <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 14 }}>\n        <EcosystemNode label=\"FLUXX\" big color={C.gold} \/>\n        <Arrow \/>\n        <div style={{ display: \"flex\", gap: 10, flexWrap: \"wrap\", justifyContent: \"center\" }}>\n          {[\"Games\", \"Education\", \"Marketplace\", \"Business\"].map((n) => <EcosystemNode key={n} label={n} \/>)}\n        <\/div>\n        <Arrow \/>\n        <EcosystemNode label=\"Peanut Bread\" big color={C.blue} \/>\n        <Arrow \/>\n        <EcosystemNode label=\"DeFi Layer\" big color={C.green} \/>\n        <div style={{ display: \"flex\", gap: 10, flexWrap: \"wrap\", justifyContent: \"center\", marginTop: 4 }}>\n          {[\"Staking\", \"Liquidity Farming\", \"Borrowing\", \"Lending\"].map((n) => <EcosystemNode key={n} label={n} \/>)}\n        <\/div>\n      <\/div>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   9. Roadmap\n--------------------------------------------------------- *\/\nfunction Roadmap() {\n  const upcoming = [\"Game Updates\", \"Marketplace\", \"Business Shares\", \"AI\", \"More Utilities\"];\n  return (\n    <Section id=\"roadmap\" eyebrow=\"What's next\" title=\"Roadmap\">\n      <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1.4fr\", gap: 20 }} className=\"grid-2\">\n        <Card accent=\"rgba(34,197,94,0.3)\">\n          <Pill color={C.green}>Current phase<\/Pill>\n          <div style={{ fontFamily: sans, fontWeight: 800, fontSize: 20, color: C.text, margin: \"14px 0 7px\" }}>Presale \u00b7 Phase 2<\/div>\n          <div style={{ color: C.muted, fontSize: 13.5, lineHeight: 1.65 }}>Community growth, referral push, and core game launch.<\/div>\n        <\/Card>\n        <Card>\n          <div style={{ fontFamily: sans, fontWeight: 700, fontSize: 15, color: C.text, marginBottom: 14 }}>Upcoming features<\/div>\n          <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: 10 }} className=\"grid-3-tight\">\n            {upcoming.map((u) => (\n              <div key={u} style={{ background: \"rgba(255,255,255,0.05)\", border: `1px solid ${C.line}`, borderRadius: 10, padding: \"10px 12px\", fontSize: 13, color: C.muted, fontFamily: sans, fontWeight: 500 }}>{u}<\/div>\n            ))}\n          <\/div>\n        <\/Card>\n      <\/div>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   10. Tokenomics\n--------------------------------------------------------- *\/\nfunction Tokenomics() {\n  const dist = [\n    { label: \"IDO\", pct: 45, color: C.gold, amount: \"22.5M\" },\n    { label: \"Liquidity\", pct: 20, color: C.green, amount: \"10M\" },\n    { label: \"Staking\", pct: 20, color: C.blue, amount: \"10M\" },\n    { label: \"P2E\", pct: 10, color: C.red, amount: \"5M\" },\n    { label: \"Spin Wheel\", pct: 5, color: C.muted, amount: \"2.5M\" },\n  ];\n  return (\n    <Section id=\"tokenomics\" eyebrow=\"Numbers\" title={<span className=\"grad-gold\">Tokenomics<\/span>}>\n      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: 14, marginBottom: 20 }} className=\"grid-4\">\n        {[[\"Supply\", \"50,000,000\"], [\"Burn\", \"10M burned\"], [\"Liquidity\", \"Locked 10 years\"], [\"Vesting\", \"90% \/ 10%\"]].map(([l, v]) => (\n          <Card key={l} style={{ padding: 18 }}>\n            <div style={{ fontSize: 12.5, color: C.muted, marginBottom: 6 }}>{l}<\/div>\n            <div style={{ fontFamily: mono, fontSize: 17, color: C.text, fontWeight: 600 }}>{v}<\/div>\n          <\/Card>\n        ))}\n      <\/div>\n      <Card hover={false}>\n        <div style={{ fontFamily: sans, fontWeight: 700, fontSize: 15, color: C.text, marginBottom: 16 }}>Distribution<\/div>\n        {dist.map((d) => (\n          <div key={d.label} style={{ marginBottom: 14 }}>\n            <div style={{ display: \"flex\", justifyContent: \"space-between\", fontSize: 13, marginBottom: 6 }}>\n              <span style={{ color: C.text, fontFamily: sans }}>{d.label}<\/span>\n              <span style={{ fontFamily: mono, color: d.color }}>{d.amount} \u00b7 {d.pct}%<\/span>\n            <\/div>\n            <div style={{ height: 7, background: \"rgba(255,255,255,0.06)\", borderRadius: 999, overflow: \"hidden\" }}>\n              <div style={{ width: `${d.pct}%`, height: \"100%\", background: `linear-gradient(90deg, ${d.color}99, ${d.color})`, borderRadius: 999, transition: \"width 1.2s cubic-bezier(.16,.8,.24,1)\" }} \/>\n            <\/div>\n          <\/div>\n        ))}\n      <\/Card>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   11. Community\n--------------------------------------------------------- *\/\nfunction Community() {\n  const items = [\n    { icon: \"Telegram\", label: \"Telegram\" },\n    { icon: \"XLogo\", label: \"X\" },\n    { icon: \"Discord\", label: \"Discord\" },\n    { icon: \"YouTube\", label: \"YouTube\" },\n    { icon: \"Mic\", label: \"Podcast\" },\n  ];\n  return (\n    <Section id=\"community\" eyebrow=\"Join us\" title={<span className=\"grad-emerald\">Community<\/span>}>\n      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(5, 1fr)\", gap: 14 }} className=\"grid-5\">\n        {items.map((it) => {\n          const IconComp = Icon[it.icon];\n          return (\n            <a key={it.label} href=\"#\" style={{ textDecoration: \"none\" }}>\n              <Card style={{ textAlign: \"center\", padding: \"24px 10px\" }}>\n                <div style={{ display: \"flex\", justifyContent: \"center\", color: C.text, marginBottom: 10 }}>\n                  <IconComp size={22} \/>\n                <\/div>\n                <div style={{ fontFamily: sans, fontWeight: 600, fontSize: 13.5, color: C.text }}>{it.label}<\/div>\n              <\/Card>\n            <\/a>\n          );\n        })}\n      <\/div>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   12. FAQ\n--------------------------------------------------------- *\/\nfunction FAQ() {\n  const qs = [\n    [\"What is FLUXX?\", \"FLUXX is a utility token connecting a game, marketplaces, education and a DeFi layer into one ecosystem.\"],\n    [\"How do I buy?\", \"Presale purchases are made with BNB during the active phase; FLUXX is used for payments post-launch.\"],\n    [\"How do I play?\", \"Connect your wallet, open Endless Runner, and jump into weekly and monthly competitions.\"],\n    [\"How do I earn?\", \"Play games, complete daily challenges, refer friends, or spin the Lucky Spin wheel.\"],\n    [\"How does staking work?\", \"Lock FLUXX in the DeFi layer to earn yield, or provide liquidity and lend\/borrow against it.\"],\n  ];\n  const [open, setOpen] = useState(0);\n  return (\n    <Section id=\"faq\" eyebrow=\"Questions\" title=\"FAQ\">\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n        {qs.map(([q, a], i) => (\n          <Card key={q} style={{ padding: 0, overflow: \"hidden\" }}>\n            <button\n              onClick={() => setOpen(open === i ? -1 : i)}\n              style={{\n                width: \"100%\", background: \"none\", border: \"none\", cursor: \"pointer\",\n                display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\",\n                padding: \"18px 20px\", fontFamily: sans, fontWeight: 700, fontSize: 15, color: C.text,\n              }}\n            >\n              {q}\n              <span style={{ color: open === i ? C.green : C.muted, transition: \"color .25s ease\" }}>{open === i ? \"\u2212\" : \"+\"}<\/span>\n            <\/button>\n            {open === i && (\n              <div style={{ padding: \"0 20px 18px\", color: C.muted, fontSize: 13.5, lineHeight: 1.65 }}>{a}<\/div>\n            )}\n          <\/Card>\n        ))}\n      <\/div>\n    <\/Section>\n  );\n}\n\n\/* ---------------------------------------------------------\n   13. Footer\n--------------------------------------------------------- *\/\nfunction Footer() {\n  const cols = [\n    [\"Terms\", \"#\"], [\"Privacy\", \"#\"], [\"Contact\", \"#\"], [\"Documentation\", \"#\"], [\"Audit\", \"#\"],\n  ];\n  const socials = [\"Telegram\", \"XLogo\", \"Discord\", \"YouTube\", \"Mic\"];\n  return (\n    <div style={{ borderTop: `1px solid ${C.line}`, padding: \"44px 24px\" }}>\n      <div style={{ maxWidth: 1180, margin: \"0 auto\" }}>\n        <div style={{ display: \"flex\", justifyContent: \"space-between\", flexWrap: \"wrap\", gap: 20, marginBottom: 26 }}>\n          <div style={{ display: \"flex\", gap: 22, flexWrap: \"wrap\" }}>\n            {cols.map(([l, href]) => (\n              <a key={l} href={href} style={{ color: C.muted, fontSize: 13.5, textDecoration: \"none\", fontFamily: sans, transition: \"color .25s ease\" }}\n                 onMouseEnter={(e)=>e.currentTarget.style.color=C.text} onMouseLeave={(e)=>e.currentTarget.style.color=C.muted}>{l}<\/a>\n            ))}\n          <\/div>\n          <div style={{ display: \"flex\", gap: 10 }}>\n            {socials.map((s) => {\n              const IconComp = Icon[s];\n              return (\n                <span key={s} className=\"glass glass-hover\" style={{ width: 34, height: 34, borderRadius: 10, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: C.muted, cursor: \"pointer\" }}>\n                  <IconComp size={15} \/>\n                <\/span>\n              );\n            })}\n          <\/div>\n        <\/div>\n        <p style={{ fontSize: 12, color: C.muted, marginTop: 22, lineHeight: 1.6 }}>\n          Copyright \u00a9 2026 Fluxx Ecosystem\n        <\/p>\n      <\/div>\n    <\/div>\n  );\n}\n\nfunction App() {\n  return (\n    <div style={{ background: C.bg, minHeight: \"100vh\", color: C.text, fontFamily: sans, position: \"relative\" }}>\n      <div style={{ position: \"fixed\", inset: 0, pointerEvents: \"none\", zIndex: 0, background: \"radial-gradient(circle at 15% 30%, rgba(34,197,94,0.05), transparent 35%), radial-gradient(circle at 85% 70%, rgba(245,183,0,0.04), transparent 35%)\" }} \/>\n      <div style={{ position: \"relative\", zIndex: 1 }}>\n        <Hero \/>\n        <StatsStrip \/>\n        <WhyFluxx \/>\n        <Utility \/>\n        <EndlessRunner \/>\n        <LeaderboardPreview \/>\n        <Rewards \/>\n        <Ecosystem \/>\n        <Roadmap \/>\n        <Tokenomics \/>\n        <Community \/>\n        <FAQ \/>\n        <Footer \/>\n      <\/div>\n    <\/div>\n  );\n}\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(<App \/>);\n<\/script>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>FLUXX \u2014 The Utility Token Powering Web3<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/fluxxecosystem.xyz\/index.php?rest_route=\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/fluxxecosystem.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/fluxxecosystem.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/fluxxecosystem.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fluxxecosystem.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=29"}],"version-history":[{"count":5,"href":"http:\/\/fluxxecosystem.xyz\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":101,"href":"http:\/\/fluxxecosystem.xyz\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions\/101"}],"wp:attachment":[{"href":"http:\/\/fluxxecosystem.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}