Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VOTKOMPOT</title> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body> | |
| <custom-navbar></custom-navbar> | |
| <main class="collage-container"> | |
| <section class="hero-section"> | |
| <h1 class="hero-text">We help folks get their mixes mastered</h1> | |
| </section> | |
| <!-- Services Collage --> | |
| <section id="services" class="collage-services"> | |
| <h2 class="collage-section-title">Mastering Services</h2> | |
| <div class="collage-grid"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-700/50 p-8 rounded-xl hover:bg-gray-700 transition-all border-l-4 border-indigo-500"> | |
| <div class="w-16 h-16 bg-indigo-900 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="music" class="w-8 h-8 text-indigo-300"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Single Track Mastering</h3> | |
| <p class="text-gray-300 mb-6">Perfect for singles, EPs, or when you need just one track professionally mastered.</p> | |
| <div class="text-indigo-400 font-bold text-lg">Starting at $49</div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-700/50 p-8 rounded-xl hover:bg-gray-700 transition-all border-l-4 border-purple-500"> | |
| <div class="w-16 h-16 bg-purple-900 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="disc" class="w-8 h-8 text-purple-300"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Album Mastering</h3> | |
| <p class="text-gray-300 mb-6">Full album mastering with consistent sound across all tracks and competitive pricing.</p> | |
| <div class="text-purple-400 font-bold text-lg">Starting at $299</div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-700/50 p-8 rounded-xl hover:bg-gray-700 transition-all border-l-4 border-pink-500"> | |
| <div class="w-16 h-16 bg-pink-900 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="layers" class="w-8 h-8 text-pink-300"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Stem Mastering</h3> | |
| <p class="text-gray-300 mb-6">Advanced mastering with individual track processing for ultimate control.</p> | |
| <div class="text-pink-400 font-bold text-lg">Starting at $199</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Special with Parallax --> | |
| <section id="pricing" class="parallax-container relative py-32 bg-gradient-to-b from-gray-800 to-gray-900 overflow-hidden"> | |
| <div class="parallax-layer parallax-layer-deep" data-depth="0.15"> | |
| <div class="absolute inset-0 bg-[url('https://static.photos/gradient/1200x630/1')] bg-cover bg-center opacity-10"></div> | |
| </div> | |
| <div class="container mx-auto px-6"> | |
| <div class="bg-gradient-to-r from-indigo-900/80 to-purple-900/80 rounded-2xl p-10 md:p-16 relative overflow-hidden"> | |
| <div class="absolute -right-20 -top-20 w-64 h-64 bg-indigo-500 rounded-full opacity-20 blur-3xl"></div> | |
| <div class="absolute -left-20 -bottom-20 w-64 h-64 bg-purple-500 rounded-full opacity-20 blur-3xl"></div> | |
| <div class="relative z-10"> | |
| <div class="flex flex-col md:flex-row justify-between items-center gap-8"> | |
| <div class="flex-1"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">First Master 50% Off!</h2> | |
| <p class="text-xl text-gray-300 mb-6">Try our professional mastering service at half price. No strings attached.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-3 text-green-400"></i> | |
| <span>Same professional quality</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-3 text-green-400"></i> | |
| <span>Fast turnaround (24-48 hours)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-3 text-green-400"></i> | |
| <span>Free revisions if needed</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-900/50 p-8 rounded-xl border border-gray-700 w-full md:w-auto"> | |
| <div class="text-center mb-6"> | |
| <div class="text-5xl font-bold text-indigo-400">$25</div> | |
| <div class="text-gray-400 line-through">$50</div> | |
| </div> | |
| <a href="#" class="block w-full text-center px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-full font-bold text-lg transition-all"> | |
| Claim Offer Now | |
| </a> | |
| <p class="text-sm text-gray-400 text-center mt-4">Limited time offer</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials with Horizontal Scroll --> | |
| <section class="py-20 bg-gray-900 overflow-hidden"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-16">What Artists Say</h2> | |
| <div class="testimonial-scroll-container relative"> | |
| <div class="testimonial-track flex gap-6 pb-10 overflow-x-auto scroll-smooth"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card flex-shrink-0 w-80 bg-gray-800 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/1" alt="Artist" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Sarah J.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 line-clamp-4">"The mastering brought my tracks to life in ways I didn't think possible. The low end is tighter, the highs sparkle, and everything sits perfectly in the mix. After mastering, my Spotify streams increased by 300% and the track got added to 12 editorial playlists!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card flex-shrink-0 w-80 bg-gray-800 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/2" alt="Artist" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Mark T.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 line-clamp-4">"Used the 50% off first master deal and was blown away. Ended up mastering my whole album with them. The consistency across tracks is phenomenal. My mastered tracks started getting radio play and sync placements that never happened with my self-mastered tracks."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card flex-shrink-0 w-80 bg-gray-800 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/3" alt="Artist" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Jasmine K.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 line-clamp-4">"The difference in loudness and clarity after mastering was night and day. My songs finally compete with major label releases. One of my mastered tracks went viral on TikTok, getting over 2M streams in the first month after mastering."</p> | |
| </div> | |
| <!-- Testimonial 4 --> | |
| <div class="testimonial-card flex-shrink-0 w-80 bg-gray-800 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/4" alt="Artist" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Carlos R.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 line-clamp-4">"The mastering fixed issues I didn't even know existed in my mix. The stereo imaging is incredible now. My song got featured on Spotify's New Music Friday after mastering - something that never happened with my previous releases."</p> | |
| </div> | |
| <!-- Testimonial 5 --> | |
| <div class="testimonial-card flex-shrink-0 w-80 bg-gray-800 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/5" alt="Artist" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">DJ Nova</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 line-clamp-4">"The punch and clarity in my electronic tracks now cuts through perfectly in clubs and festivals. My mastered tracks started getting played by major DJs and the streams increased 5x compared to my self-mastered tracks."</p> | |
| </div> | |
| <!-- Testimonial 6 --> | |
| <div class="testimonial-card flex-shrink-0 w-80 bg-gray-800 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/6" alt="Artist" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Sophie L.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-300 line-clamp-4">"The warmth and depth added to my vocals is exactly what my indie folk songs needed to stand out. After mastering, my song got picked up by NPR Music and my Bandcamp sales doubled within a week."</p> | |
| </div> | |
| </div> | |
| <div class="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-gray-900 to-transparent pointer-events-none"></div> | |
| <div class="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-gray-900 to-transparent pointer-events-none"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Audio Samples Section --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-16">Listen to Our Work</h2> | |
| <div class="grid md:grid-cols-2 gap-10 max-w-4xl mx-auto"> | |
| <!-- Track 1 --> | |
| <div class="bg-gray-800 p-6 rounded-xl"> | |
| <h3 class="text-2xl font-bold mb-4">Before & After Mastering</h3> | |
| <audio controls class="w-full mb-4"> | |
| <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>Electronic Demo</span> | |
| <span>2:45</span> | |
| </div> | |
| </div> | |
| <!-- Track 2 --> | |
| <div class="bg-gray-800 p-6 rounded-xl"> | |
| <h3 class="text-2xl font-bold mb-4">Rock Track Example</h3> | |
| <audio controls class="w-full mb-4"> | |
| <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mpeg"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>Rock Band</span> | |
| <span>3:12</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-indigo-900 to-purple-900"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl font-bold mb-8">Ready to Transform Your Sound?</h2> | |
| <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">Upload your tracks today and experience professional mastering that makes your music stand out on every platform.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="#pricing" class="px-8 py-4 bg-white text-indigo-900 hover:bg-gray-100 rounded-full font-bold text-lg transition-all transform hover:scale-105"> | |
| Get Started Now | |
| </a> | |
| <a href="#" class="px-8 py-4 border-2 border-white hover:bg-white/10 rounded-full font-bold text-lg transition-all"> | |
| Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="components/audio-comparison.js"></script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |