frozen-music

bySunil Kumar

Create a world-class, production-ready Music Distribution Website Homepage with a highly unique, futuristic, premium UI/UX that feels like a next-generation SaaS platform. 🎯 OBJECTIVE: Build a visually stunning and fully functional homepage for a music distribution platform where artists can upload and distribute music globally to platforms like YouTube Music, Spotify, JioSaavn, Apple Music, Amazon Music, Instagram, TikTok, etc. The UI must be extremely attractive, modern, and different from typical websites. Every section, button, and interaction must feel polished, intentional, and premium. ━━━━━━━━━━━━━━━━━━━━━━━ 🎨 DESIGN SYSTEM (STRICT) ━━━━━━━━━━━━━━━━━━━━━━━ - Style: Futuristic + Glassmorphism + Soft 3D UI - Feel: Premium SaaS (Apple + Stripe + Web3 inspiration) - Background: Dark with animated gradient transitions - Colors: Neon gradients (purple, blue, pink, cyan accents) - Lighting: Glow effects, reflections, soft shadows - Border radius: 16px–24px - Typography: Clean, modern (Inter / Poppins) - Spacing: Perfect alignment, grid-based layout ━━━━━━━━━━━━━━━━━━━━━━━ 🧠 HERO SECTION (HIGH IMPACT) ━━━━━━━━━━━━━━━━━━━━━━━ - Headline: "Distribute Your Music Everywhere — Fast, Simple, Powerful." - Subheadline: "Reach 150+ streaming platforms including Spotify, YouTube Music & JioSaavn." - CTA Buttons: ✔ "Start Distributing" ✔ "View Pricing" - Background: ✔ Animated gradient ✔ Floating particles ✔ Light glow effects ━━━━━━━━━━━━━━━━━━━━━━━ 🎧 LIVE PLATFORM LOGO ANIMATION (UNIQUE CORE FEATURE) ━━━━━━━━━━━━━━━━━━━━━━━ Display 10–15 platform logos: YouTube Music, Spotify, JioSaavn, Apple Music, Amazon Music, Instagram, Facebook, TikTok Animation behavior: ✔ Logos float in 3D space (like live wallpaper) ✔ Slow continuous movement ✔ On scroll → logos move downward (depth/sinking effect) ✔ Parallax effect (different speeds) ✔ Slight blur for depth realism ✔ Hover → glow + scale effect ━━━━━━━━━━━━━━━━━━━━━━━ 🌊 SCROLL EXPERIENCE (VERY IMPORTANT) ━━━━━━━━━━━━━━━━━━━━━━━ - Smooth scroll animations - Sections fade + slide in - Background gradient changes on scroll - Depth illusion across sections - No lag, buttery smooth transitions ━━━━━━━━━━━━━━━━━━━━━━━ 📦 FEATURES SECTION (FULLY STRUCTURED) ━━━━━━━━━━━━━━━━━━━━━━━ Create 6 feature cards: 1. Upload Music 2. Global Distribution 3. Royalty Tracking 4. Advanced Analytics 5. Copyright Protection 6. Fast Release Approval Each card: ✔ Icon + title + short description ✔ Hover lift effect ✔ Glow border animation ✔ Micro interaction ━━━━━━━━━━━━━━━━━━━━━━━ 📊 STATS / TRUST SECTION ━━━━━━━━━━━━━━━━━━━━━━━ - Animated counters: ✔ 10,000+ Artists ✔ 1M+ Tracks Delivered ✔ 150+ Platforms - Numbers animate on scroll (count-up effect) ━━━━━━━━━━━━━━━━━━━━━━━ 🎛 DASHBOARD PREVIEW SECTION ━━━━━━━━━━━━━━━━━━━━━━━ Show a futuristic UI mockup: ✔ Earnings graph ✔ Upload panel ✔ Release status (Approved / Pending) ✔ Music cover thumbnails Animation: ✔ Floating motion ✔ Glow edges ✔ Slight tilt (3D feel) ━━━━━━━━━━━━━━━━━━━━━━━ 💬 TESTIMONIAL SECTION ━━━━━━━━━━━━━━━━━━━━━━━ - Artist reviews (3–5 cards) - Sliding carousel - Glass cards with blur background ━━━━━━━━━━━━━━━━━━━━━━━ 💰 PRICING PREVIEW ━━━━━━━━━━━━━━━━━━━━━━━ - 2–3 plans: ✔ Free ✔ Pro ✔ Label - Each card: ✔ Highlight best plan ✔ Smooth hover animation ━━━━━━━━━━━━━━━━━━━━━━━ 🚀 FINAL CTA SECTION ━━━━━━━━━━━━━━━━━━━━━━━ - Text: "Start Your Music Journey Today" - Big glowing button: "Upload Your First Song" ━━━━━━━━━━━━━━━━━━━━━━━ 🧱 FOOTER (COMPLETE) ━━━━━━━━━━━━━━━━━━━━━━━ Include: ✔ About ✔ Contact ✔ Terms & Privacy ✔ Social media links ✔ Copyright ━━━━━━━━━━━━━━━━━━━━━━━ ⚙️ INTERACTIONS (STRICT) ━━━━━━━━━━━━━━━━━━━━━━━ - All buttons → hover animation + color shift - All text links → smooth color transition - Cursor → soft glow or trail - No static UI — everything slightly animated ━━━━━━━━━━━━━━━━━━━━━━━ 📱 RESPONSIVE DESIGN ━━━━━━━━━━━━━━━━━━━━━━━ - Mobile-first - Tablet optimized - Smooth animations on mobile ━━━━━━━━━━━━━━━━━━━━━━━ 🛠 TECH STACK ━━━━━━━━━━━━━━━━━━━━━━━ - React (or Next.js) - Tailwind CSS - Framer Motion (animations) - Clean reusable components ━━━━━━━━━━━━━━━━━━━━━━━ ⚡ PERFORMANCE ━━━━━━━━━━━━━━━━━━━━━━━ - Fast loading - Optimized animations - No lag ━━━━━━━━━━━━━━━━━━━━━━━ 📌 CONTENT QUALITY (VERY IMPORTANT) ━━━━━━━━━━━━━━━━━━━━━━━ - All text must be professional, correct, and meaningful - No placeholder or dummy text - Proper headings, descriptions, and CTA clarity - Clear value proposition ━━━━━━━━━━━━━━━━━━━━━━━ 💎 EXTRA PREMIUM TOUCHES ━━━━━━━━━━━━━━━━━━━━━━━ - Particle background - Glass reflection effects - Animated gradient borders - Soft lighting effects - Subtle motion everywhere ━━━━━━━━━━━━━━━━━━━━━━━ 📤 OUTPUT REQUIREMENT ━━━━━━━━━━━━━━━━━━━━━━━ - Full homepage code - Clean structure - Production-ready - Modern UI components - Ready to deploy