mercy-bot

Build a premium full-screen hero section for a fintech trading platform called **KISS AND FLY by Abhi** with **DIGIDHAMMA** as the community brand. Use **React 18 + TypeScript + Vite + Tailwind CSS**, **Framer Motion**, **React Three Fiber (Three.js)**, **GSAP**, and **lucide-react**. The design should feel like a fusion of **Apple**, **TradingView**, **Stripe**, **Framer**, and **Tesla**, while carrying a peaceful Buddhist philosophy. The overall emotion should communicate discipline, patience, precision, and confidence. ## Hero Concept The entire hero occupies **100dvh**. Background is nearly black (#050505) with subtle animated particles resembling stars. A very faint animated candlestick chart is visible behind everything. Floating glowing lines move slowly to simulate market data. There should be a subtle ambient fog effect. Everything should feel alive without becoming distracting. --- ## Main Visual The centerpiece of the hero is a **highly realistic 3D statue of Gautama Buddha** sitting in the lotus meditation posture. The Buddha should wear **traditional saffron/orange monk robes**. The statue should appear carved from polished dark stone with realistic material textures. The robe should have realistic cloth folds with physically based rendering. The Buddha should have: * peaceful facial expression * closed eyes * subtle smile * detailed hands in meditation mudra * realistic proportions * premium museum-quality realism The statue slowly floats up and down by a few pixels. It rotates no more than 2–3 degrees over time. The robe catches subtle moving light. The lighting should feel cinematic. The Buddha should remain perfectly centered. --- ## Cursor Interaction The entire hero reacts to mouse movement. As the cursor moves: the Buddha rotates slightly toward the cursor. The camera shifts subtly. Particles respond. Glowing market lines move. The experience should feel immersive. --- ## Signature Spotlight Effect Keep the cursor-following spotlight reveal from the original concept. Instead of revealing another geology image, use two premium trading-themed hero backgrounds. Layer 1: Dark cinematic trading environment. Layer 2: A premium futuristic trading command center with glowing blue and orange charts. The reveal follows the cursor with a very soft feathered circular mask. The transition should be smooth and luxurious. No harsh edges. --- ## Hero Text Centered vertically. Large typography. Headline: Trade with Discipline. Profit with Precision. The words "Discipline" and "Precision" should use an elegant serif font. Everything else should use Inter. Animate each line independently. Subheadline: Professional TradingView Indicators, Algorithmic Trading Systems, and Custom Automation built for serious traders. --- ## CTA Buttons Primary Button Get KISS AND FLY Orange gradient. Rounded pill. Hover glow. Magnetic interaction. Secondary Button Explore Performance Glassmorphism style. Animated border. --- ## Performance Metrics Below the buttons display animated statistics. 95%+ Historical Win Rate* 500+ Active Community Members 1000+ Trades Executed 24/7 Support Each number counts up on page load. --- ## Floating Trading Cards Around the Buddha, place several floating translucent glass cards. Examples: BUY XAUUSD +420 pips RR 1:4 WIN Another: SELL BTCUSD +8.2% Another: EURUSD TP3 HIT Each card gently floats independently. Hovering enlarges the card. --- ## Navigation Transparent glass navigation bar. Left: DIGIDHAMMA logo. Center: Home Indicator Performance Algo Development Pricing Testimonials FAQ Right: Login Get Started Navigation becomes slightly darker while scrolling. --- ## Scroll Indicator Bottom center. Animated mouse icon. Text: Scroll to Explore It fades in and out continuously. --- ## Audio Muted by default. Play a barely audible ambient meditation atmosphere mixed with subtle electronic futuristic tones. Provide a mute/unmute button in the navigation. --- ## Premium Animations Every element should animate naturally. Use Framer Motion. Use GSAP where appropriate. Include: fade-up blur reveal stagger animations text reveal magnetic buttons glass reflections mouse parallax floating particles slow camera movement glowing borders soft bloom lighting page transitions count-up statistics Everything should feel polished. Never over-animate. --- ## Performance Maintain 60 FPS. Optimize Three.js rendering. Lazy-load heavy assets. Use compressed textures. Use React Suspense. Avoid unnecessary re-renders. --- ## Responsive Design Perfect experience on: Desktop Laptop Tablet Mobile On mobile: Replace the 3D model with a highly optimized version. Reduce particle count. Maintain all interactions. --- ## Branding Primary Color: #FF7A00 Accent: #00D4FF Background: #050505 Glass: rgba(255,255,255,0.08) Typography: Inter Playfair Display Italic The overall feeling should be: Calm. Powerful. Minimal. Premium. Technologically advanced. Spiritually disciplined. The hero section should immediately communicate that KISS AND FLY by Abhi is a professional algorithmic trading platform built on patience, discipline, and precision, with DIGIDHAMMA serving as the trusted trading community behind it. The visual quality should rival Apple product launches, Stripe's homepage, Vercel's animations, and modern fintech SaaS platforms.