Blockchain Trivia - Copy this React, Tailwind Component to your project

Design the most engaging, futuristic, and responsive landing page for a blockchain based trivia platform. The page should seamlessly adapt to light and dark modes while maintaining a high tech Web3 aesthetic. Include interactive animations, dynamic transitions, and captivating visual elements. Requirements: 1. Hero Section: Background: Animated blockchain nodes, particles, or glowing grids with light/dark mode adaptability. Illustration: Players competing in trivia with motion effects (e.g., floating avatars or quiz elements). Tagline: Bold and engaging, like 'Challenge. Earn. Dominate in Web3 Trivia!' Call to Action: A glowing, animated 'Get Started' button with hover and ripple effects. 2. Key Features Section: Display features like 'Earn Crypto Rewards,' 'Real Time Multiplayer,' and 'NFT Integration' using animated icons. Add hover effects that display more details in a card flip animation. Ensure elements respond differently in light and dark modes (e.g., glowing neon in dark mode, subtle gradients in light mode). 3. Game Categories Section: Interactive category cards (e.g., Science, History) with hover triggered flip animations. Carousel of real time popular games with dynamic sliding effects. 4. How It Works Section: Scrolling timeline with animated connectors (e.g., glowing paths for steps like Join → Play → Earn). Parallax effects to add depth, with step icons that pulse when scrolled into view. 5. Leaderboard & Rewards Section: Scrolling ticker of top players and recent wins, styled uniquely for each mode. Animated coins or NFT icons floating around when rewards are showcased. 6. Community Testimonials: Animated speech bubbles or avatar cards with a fade in effect when visible. 7. Footer: Responsive footer with glowing light/dark adaptable links (FAQs, Blog, Tokenomics). Newsletter subscription form with animated progress bars for loading submissions. Additional Details: Color Scheme: Use deep purples, electric blues, and neon accents for dark mode; light gradients and soft shadows for light mode. Responsiveness: Fully optimized for all devices, ensuring animations and layouts adjust seamlessly for desktop, tablet, and mobile. Transitions: Smooth animations with easing for hover, scroll, and click interactions. This page should feel alive, drawing users into the Web3 world through cutting edge design and interactivity."