diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx new file mode 100644 index 00000000..9d4ecd22 --- /dev/null +++ b/website/src/pages/index.tsx @@ -0,0 +1,555 @@ +import React, { Suspense, lazy, useState, useEffect } from 'react'; +import Layout from '@theme/Layout'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { motion } from 'framer-motion'; +import { + ArrowRight, + ArrowUpRight, + Blocks, + Building2, + Users, + Globe, + Layers, + Shield, + Code2, + Server, + FileText, + GitBranch, + Network, + Lock, + ChevronDown, + Activity, + TrendingUp, + Clock, + Zap, +} from 'lucide-react'; +import { AnimatedSection, StaggerContainer, FadeIn } from '@site/src/components/AnimatedSection'; +import { SpotlightCard } from '@site/src/components/SpotlightCard'; +import { useCountUp, useTypingEffect } from '@site/src/hooks/useCountUp'; + +const NetworkGlobeHero = lazy(() => import('@site/src/components/NetworkGlobe').then(m => ({ default: m.NetworkGlobeHero }))); +const AntiGravityField = lazy(() => import('@site/src/components/AntiGravityField').then(m => ({ default: m.AntiGravityField }))); + +// ─── Data ──────────────────────────────────────────────────────────────────── + +const stats = [ + { value: '2,000+', label: 'Transactions per second', icon: TrendingUp, color: '#34d399' }, + { value: '< $0.001', label: 'Average fee', icon: Activity, color: '#60a5fa' }, + { value: '99.99%', label: 'Network uptime', icon: Clock, color: '#a78bfa' }, + { value: '2s', label: 'Finality', icon: Globe, color: '#fb923c' }, +]; + +const typingWords = ['global finance.', 'trade networks.', 'real-world assets.', 'decentralized infrastructure.']; + +const liveStats = [ + { label: 'Active Masternodes', value: '108', color: '#34d399' }, + { label: 'Standby Nodes', value: '~1,200', color: '#60a5fa' }, + { label: 'Block Time', value: '2.0s', color: '#a78bfa' }, + { label: 'Network', value: 'Mainnet', color: '#fb923c' }, +]; + +const regionLegend = [ + { label: 'Asia-Pacific', color: '#38bdf8' }, + { label: 'Europe', color: '#818cf8' }, + { label: 'Americas', color: '#34d399' }, + { label: 'Middle East & Africa', color: '#f472b6' }, +]; + +const features = [ + { + icon: Globe, + title: 'Ethereum Compatible', + description: 'Migrate Ethereum projects to XDC with zero code changes. Full EVM, same tools, 10× cheaper.', + }, + { + icon: Building2, + title: 'Trade Finance Focus', + description: 'Purpose-built for decentralized finance and global trade with ISO 20022 compliance.', + }, + { + icon: Layers, + title: 'Strong Ecosystem', + description: 'Leading RPC providers, wallets, explorers, data indices, and developer grants.', + }, + { + icon: Zap, + title: 'High Performance', + description: 'Enterprise-grade hybrid blockchain: 2,000+ TPS, near-instant finality, minimal fees.', + }, + { + icon: Shield, + title: 'Secure Consensus', + description: 'XDPoS delegated proof of stake with double validation — decentralized and enterprise-safe.', + }, + { + icon: Blocks, + title: 'Asset Tokenization', + description: 'XRC-20/721/1155 standards with native support for real-world asset tokenization.', + }, +]; + +const paths = [ + { icon: Code2, title: 'Developers', description: 'Build smart contracts, deploy dApps, and integrate with XDC.', href: '/smartcontract' }, + { icon: Server, title: 'Validators', description: 'Run a masternode, stake XDC, and secure the network.', href: '/xdcchain/developers/node_operators/masternode' }, + { icon: Building2, title: 'Enterprise', description: 'Trade finance, RWA tokenization, ISO 20022, and private subnets.', href: '/enterprise' }, + { icon: Users, title: 'Users', description: 'Learn the basics, set up a wallet, and start using XDC.', href: '/learn' }, +]; + +const popularLinks = [ + { icon: Globe, title: 'XDC Chain', description: 'Get started with XDC Network.', href: '/xdcchain' }, + { icon: FileText, title: 'Whitepaper', description: 'Technical and business whitepaper.', href: '/whitepaper/technical' }, + { icon: Network, title: 'RPC Endpoints', description: 'Mainnet and testnet RPC reference.', href: '/xdcchain/developers/rpc' }, + { icon: Server, title: 'Run a Node', description: 'XDC masternode setup and guides.', href: '/xdcchain/developers/node_operators/masternode' }, + { icon: Code2, title: 'Smart Contracts', description: 'Deploy and interact with contracts.', href: '/smartcontract' }, + { icon: Lock, title: 'XDC Subnet', description: 'Private chain within XDC ecosystem.', href: '/subnet/overview' }, +]; + +const interactiveFeatures = [ + { + icon: Activity, + title: 'Gas Fee Calculator', + description: 'Compute real-time XDC transaction costs vs. Ethereum and BNB.', + href: '/learn/gas-fees', + badge: 'Interactive', + }, + { + icon: GitBranch, + title: 'Consensus Visualizer', + description: 'Watch the XDPoS 108-node voting flow in action.', + href: '/learn/xdpos-explained', + badge: '3D', + }, + { + icon: Network, + title: 'Bridge Visualizer', + description: 'Step through the cross-chain asset transfer process.', + href: '/interoperability', + badge: 'Interactive', + }, + { + icon: Blocks, + title: 'Staking Calculator', + description: 'Estimate APY rewards for masternodes and delegators.', + href: '/learn/rewards', + badge: 'Calculator', + }, +]; + +// ─── Components ─────────────────────────────────────────────────────────────── + +function AnimatedCounter({ value, className }: { value: string; className?: string }) { + const { ref, displayValue } = useCountUp(value, 1600); + return ( +
+ {displayValue} +
+ ); +} + +function ScrollIndicator() { + return ( + + Scroll + + + + + ); +} + +function FeatureCard({ icon: Icon, title, description }: { icon: React.ElementType; title: string; description: string }) { + return ( + +
+ + + ); +} + +function PathCard({ icon: Icon, title, description, href }: { icon: React.ElementType; title: string; description: string; href: string }) { + return ( + + +
+ + + + ); +} + +function PopularCard({ icon: Icon, title, description, href, external }: { icon: React.ElementType; title: string; description: string; href: string; external?: boolean }) { + const Wrapper = external ? 'a' : Link; + return ( + + +
+ + + + ); +} + +function InteractiveCard({ icon: Icon, title, description, href, badge }: { icon: React.ElementType; title: string; description: string; href: string; badge: string }) { + return ( + + +
+ + + + ); +} + +// Animated live counter +function LiveStat({ label, value, color }: { label: string; value: string; color: string }) { + return ( +
+ + + + + {value} + {label} +
+ ); +} + +// ─── Page ───────────────────────────────────────────────────────────────────── + +export default function Home(): JSX.Element { + const { siteConfig } = useDocusaurusContext(); + const [globeLoaded, setGlobeLoaded] = useState(false); + const { text: typedText, showCursor } = useTypingEffect(typingWords, 120, 60, 2200); + + useEffect(() => { + const t = setTimeout(() => setGlobeLoaded(true), 200); + return () => clearTimeout(t); + }, []); + + return ( + +
+ + {/* ═══════════════════════════════════════════════════════════ + HERO: Globe behind centered text + ════════════════════════════════════════════════════════════ */} +
+ {/* Globe background — full screen directly on landing page */} +
+ {globeLoaded && ( + + + + )} +
+ + {/* Vignette so text stays readable */} +
+
+ +
+ {/* Badge */} + + + + + + + 108 Active Masternodes · XDC Network Live + + + + {/* Headline */} + + The blockchain for{' '} + + {typedText} + + + + {/* Subtext */} + + Build dApps, tokenize real-world assets, and move money globally on the XDC Network — + fast, scalable, and sub-cent transaction fees. + + + {/* CTAs */} + + + Start Learning + + + Build on XDC + + +
+
+ + {/* Stats bar */} +
+
+ {stats.map((stat) => { + const Icon = stat.icon; + return ( +
+
+ +
+ +
{stat.label}
+
+ ); + })} +
+
+ + {/* ═══════════════════════════════════════════════════════════ + INTERACTIVE FEATURES — preview of doc widgets + ════════════════════════════════════════════════════════════ */} +
+ +
+

Interactive Docs

+

+ Learn by doing, not reading +

+
+

+ Every major concept in the docs has an interactive widget — calculators, visualizers, 3D simulations. +

+ + + + {interactiveFeatures.map(f => ( + + ))} + +
+ +
+ + ); +} diff --git a/website/src/pages/markdown-page.mdx b/website/src/pages/markdown-page.mdx new file mode 100644 index 00000000..9756c5b6 --- /dev/null +++ b/website/src/pages/markdown-page.mdx @@ -0,0 +1,7 @@ +--- +title: Markdown page example +--- + +# Markdown page example + +You don't need React to write simple standalone pages.