import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Rocket, TrendingUp, Coins, Users, Shield, Zap, ArrowRight, Star, Heart, Flame, Activity } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; import { Input } from '@/components/ui/input'; import { Container } from '@/components/ui/container'; // Types interface TokenMetrics { price: number; marketCap: number; holders: number; volume24h: number; } interface Tokenomics { name: string; percentage: number; color: string; icon: any; } // Mock Data const initialMetrics: TokenMetrics = { price: 0.00042069, marketCap: 69420000, holders: 42069, volume24h: 8900000, }; const tokenomics: Tokenomics[] = [ { name: 'Community', percentage: 42, color: 'bg-purple-500', icon: Users }, { name: 'Liquidity', percentage: 25, color: 'bg-blue-500', icon: Coins }, { name: 'Team', percentage: 15, color: 'bg-orange-500', icon: Shield }, { name: 'Marketing', percentage: 10, color: 'bg-pink-500', icon: Zap }, { name: 'Burn', percentage: 8, color: 'bg-red-500', icon: Flame }, ]; const features = [ { title: 'Community First', desc: 'Built by degens, for degens. No VC funding, pure community power.', icon: Users, color: 'text-purple-400' }, { title: 'Auto-Reflections', desc: 'Holders earn passive income with every transaction.', icon: Coins, color: 'text-blue-400' }, { title: 'Locked Liquidity', desc: 'Liquidity locked for 100 years. Rug-proof by design.', icon: Shield, color: 'text-green-400' }, { title: 'Viral Engine', desc: 'Built-in meme mechanics for exponential growth.', icon: Flame, color: 'text-orange-400' }, ]; const testimonials = [ { name: 'Alpha Trader', role: 'Early Adopter', gain: '+12,420%', avatar: 'AT' }, { name: 'Diamond Hands', role: 'Top Holder', gain: '+8,900%', avatar: 'DH' }, { name: 'Meme Lord', role: 'Community Lead', gain: '+15,000%', avatar: 'ML' }, ]; const App = () => { const [metrics, setMetrics] = useState(initialMetrics); const [buyAmount, setBuyAmount] = useState(''); const [isHovering, setIsHovering] = useState(false); const [activeSection, setActiveSection] = useState('hero'); // Simulate live price updates useEffect(() => { const interval = setInterval(() => { setMetrics(prev => ({ ...prev, price: prev.price * (1 + (Math.random() - 0.5) * 0.02), volume24h: prev.volume24h * (1 + (Math.random() - 0.5) * 0.05), })); }, 2000); return () => clearInterval(interval); }, []); // Scroll spy for active section useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { setActiveSection(entry.target.id); } }); }, { threshold: 0.3 } ); const sections = document.querySelectorAll('section[id]'); sections.forEach(section => observer.observe(section)); return () => observer.disconnect(); }, []); const formatNumber = (num: number) => { if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B'; if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M'; if (num >= 1e3) return (num / 1e3).toFixed(2) + 'K'; return num.toFixed(6); }; const calculateTokens = () => { const amount = parseFloat(buyAmount) || 0; return (amount / metrics.price).toLocaleString('en-US', { maximumFractionDigits: 2, }); }; return (

{/* Background Effects */}

{/* Navigation */} {/* Hero Section */}

{/* Left Content */} LIVE TRADING NOW

The Memecoin That Actually Has Utility

Built on pure community power. No VC, no presale, no BS. Just degens changing the game forever.

{/* Live Stats */}

${formatNumber(metrics.price)}

Current Price

${formatNumber(metrics.marketCap)}

Market Cap

{/* Right Content - Animated Mascot */} {/* Animated Mascot Container */}

{/* Background Glow */} {/* Main Mascot */} {/* SVG Mascot */} {/* Floating Elements */}

{/* Price Ticker */}

${metrics.price.toFixed(8)} +{(Math.random() * 5).toFixed(2)}%

{/* Tokenomics Section */}

Tokenomics Breakdown

Transparent distribution designed for maximum community benefit and long-term growth.

{/* Pie Chart / Distribution */}

{/* SVG Pie Chart */} {/* Center Hole */}

100%

Total Supply

{/* Distribution Bars */} {tokenomics.map((item, index) => (

{item.name}

{item.percentage}%

))}

{/* Features Section */}

Why This Coin?

More than just another memecoin. Built with real utility and community power.

{features.map((feature, index) => ( {/* Background Glow */}

{feature.title}

{feature.desc}

{/* Decorative Element */} ))}

{/* Live Trading Section */}

TRENDING #1

Trade Now

Get in before the moon mission. Every second counts.

{/* Buy Form */} Buy MEMECOIN

Amount (ETH) setBuyAmount(e.target.value)} className="bg-white/5 border-white/10 focus:border-purple-500" />

You'll receive

{calculateTokens()} MEMECOIN

Slippage: 1% Gas: ~$12

{/* Live Order Book */} Live Trades

{Array.from({ length: 5 }).map((_, i) => ( BUY {(Math.random() * 100).toFixed(2)} MEME ${(Math.random() * 0.1).toFixed(4)} ))}

{/* Stats */}

{formatNumber(metrics.volume24h)}

24h Volume

{formatNumber(metrics.holders)}

Holders

{/* Community / Testimonials */}

Community Legends

Join thousands of degens who already made life-changing gains.

{testimonials.map((t, index) => (

{t.avatar}

{t.name}

{t.role}

{t.gain} ))}

{/* CTA Section */}

Ready to Moon?

Don't miss the rocket. Join the community and ride the wave.

{/* Animated Background Elements */}

{/* Footer */}

); }; export default App;

Memecoin Landing Page