its not audio vizualizer its audio loops samples for producers

components/navbar.js

@@ -61,9 +61,10 @@ class AudioNavbar extends HTMLElement {
                     EchoSphere
                 </a>
                 <div class="nav-links">
-                <a href="/" class="nav-link">Home</a>
-                    <a href="/upload.html" class="nav-link">Upload</a>
-                    <a href="/library.html" class="nav-link">Library</a>
+                    <a href="/" class="nav-link">Home</a>
+                    <a href="/library.html" class="nav-link">Free Samples</a>
+                    <a href="/packs.html" class="nav-link">Premium Packs</a>
+                    <a href="/upload.html" class="nav-link">Sell Your Samples</a>
 <a href="https://github.com/kingoIII/Ruido1" target="_blank" rel="noopener noreferrer">
 <i data-feather="github" class="github-icon w-5 h-5 text-gray-400 hover:text-indigo-400 transition"></i>
                     </a>

index.html

@@ -14,60 +14,84 @@
     
     <main class="container mx-auto px-4 py-8">
         <div class="text-center mb-12">
-            <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
-                Ruido
-            </h1>
-            <p class="text-xl text-gray-400 max-w-2xl mx-auto">
-                Discover and share your favorite music tracks with the world
-            </p>
+                <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
+                    Ruido Samples
+                </h1>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                    Premium royalty-free loops and samples for music producers
+                </p>
 </div>
-
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
-            <div class="bg-gray-800 rounded-2xl p-6 shadow-xl">
-                <h2 class="text-2xl font-semibold mb-4">🎤 Live Audio Input</h2>
-                <p class="text-gray-400 mb-6">Connect your microphone or audio device and watch the visualization respond in real-time.</p>
-                <button id="startAudio" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-full transition">
-                    Start Listening
-                </button>
-                <div class="mt-8">
-                    <audio-visualizer type="circle"></audio-visualizer>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+            <!-- Sample Pack 1 -->
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition">
+                <img src="http://static.photos/music/640x360/1" alt="Drum Kit" class="w-full h-48 object-cover rounded-lg mb-4">
+                <h2 class="text-2xl font-semibold mb-2">Urban Drum Kit</h2>
+                <p class="text-gray-400 mb-4">120 premium drum one-shots and loops for hip-hop and trap production</p>
+                <div class="flex justify-between items-center">
+                    <span class="text-indigo-400 font-medium">24.99€</span>
+                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition">
+                        Preview
+                    </button>
                 </div>
             </div>
 
-            <div class="bg-gray-800 rounded-2xl p-6 shadow-xl">
-                <h2 class="text-2xl font-semibold mb-4">🎵 Audio File Upload</h2>
-                <p class="text-gray-400 mb-6">Select an audio file from your device to visualize your favorite tracks.</p>
-                <div class="mb-4">
-                    <input type="file" id="audioUpload" accept="audio/*" class="hidden">
-                    <label for="audioUpload" class="cursor-pointer bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-full inline-block transition">
-                        Choose File
-                    </label>
-                    <span id="fileName" class="ml-4 text-gray-400">No file selected</span>
+            <!-- Sample Pack 2 -->
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition">
+                <img src="http://static.photos/music/640x360/2" alt="Synth Pack" class="w-full h-48 object-cover rounded-lg mb-4">
+                <h2 class="text-2xl font-semibold mb-2">Analog Synth Essentials</h2>
+                <p class="text-gray-400 mb-4">80 vintage synth loops and one-shots for electronic music</p>
+                <div class="flex justify-between items-center">
+                    <span class="text-indigo-400 font-medium">19.99€</span>
+                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition">
+                        Preview
+                    </button>
                 </div>
-                <div class="mt-8">
-                    <audio-visualizer type="bars"></audio-visualizer>
+            </div>
+
+            <!-- Sample Pack 3 -->
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition">
+                <img src="http://static.photos/music/640x360/3" alt="Vocal Pack" class="w-full h-48 object-cover rounded-lg mb-4">
+                <h2 class="text-2xl font-semibold mb-2">Soulful Vocals</h2>
+                <p class="text-gray-400 mb-4">50 R&B and soul vocal phrases and ad-libs</p>
+                <div class="flex justify-between items-center">
+                    <span class="text-indigo-400 font-medium">29.99€</span>
+                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition">
+                        Preview
+                    </button>
                 </div>
             </div>
         </div>
 
         <div class="bg-gray-800 rounded-2xl p-6 shadow-xl mb-12">
-            <h2 class="text-2xl font-semibold mb-6">🎨 Visualization Styles</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <button class="visualizer-style bg-gray-700 hover:bg-gray-600 rounded-lg p-4 transition" data-type="bars">
-                    <i data-feather="bar-chart-2" class="w-8 h-8 mb-2"></i>
-                    <span>Frequency Bars</span>
-                </button>
-                <button class="visualizer-style bg-gray-700 hover:bg-gray-600 rounded-lg p-4 transition" data-type="wave">
-                    <i data-feather="activity" class="w-8 h-8 mb-2"></i>
-                    <span>Waveform</span>
-                </button>
-                <button class="visualizer-style bg-gray-700 hover:bg-gray-600 rounded-lg p-4 transition" data-type="circle">
-                    <i data-feather="circle" class="w-8 h-8 mb-2"></i>
-                    <span>Circle Spectrum</span>
-                </button>
+            <h2 class="text-2xl font-semibold mb-6">🔥 Trending Free Samples</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div class="text-center">
+                    <button class="w-full aspect-square bg-gray-700 hover:bg-gray-600 rounded-lg transition mb-2 flex items-center justify-center">
+                        <i data-feather="play" class="w-6 h-6"></i>
+                    </button>
+                    <span class="text-sm">Trap Kick 01</span>
+                </div>
+                <div class="text-center">
+                    <button class="w-full aspect-square bg-gray-700 hover:bg-gray-600 rounded-lg transition mb-2 flex items-center justify-center">
+                        <i data-feather="play" class="w-6 h-6"></i>
+                    </button>
+                    <span class="text-sm">Synth Pluck</span>
+                </div>
+                <div class="text-center">
+                    <button class="w-full aspect-square bg-gray-700 hover:bg-gray-600 rounded-lg transition mb-2 flex items-center justify-center">
+                        <i data-feather="play" class="w-6 h-6"></i>
+                    </button>
+                    <span class="text-sm">Hi-Hat Roll</span>
+                </div>
+                <div class="text-center">
+                    <button class="w-full aspect-square bg-gray-700 hover:bg-gray-600 rounded-lg transition mb-2 flex items-center justify-center">
+                        <i data-feather="play" class="w-6 h-6"></i>
+                    </button>
+                    <span class="text-sm">Vocal Chop</span>
+                </div>
             </div>
         </div>
-    </main>
+</main>
 
     <audio-footer></audio-footer>
 

packs.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Premium Sample Packs | Ruido</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <audio-navbar></audio-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+            <div>
+                <h1 class="text-3xl md:text-5xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
+                    Premium Sample Packs
+                </h1>
+                <p class="text-gray-400">High-quality curated collections for professional producers</p>
+            </div>
+            
+            <div class="flex gap-3">
+                <div class="relative">
+                    <select class="bg-gray-800 border border-gray-700 rounded-full py-2 pl-4 pr-8 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 appearance-none">
+                        <option>All Categories</option>
+                        <option>Drums</option>
+                        <option>Melodic</option>
+                        <option>Vocals</option>
+                        <option>FX</option>
+                    </select>
+                    <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-400 pointer-events-none"></i>
+                </div>
+                <div class="relative">
+                    <select class="bg-gray-800 border border-gray-700 rounded-full py-2 pl-4 pr-8 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 appearance-none">
+                        <option>Sort By</option>
+                        <option>Popular</option>
+                        <option>Newest</option>
+                        <option>Price: Low to High</option>
+                        <option>Price: High to Low</option>
+                    </select>
+                    <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-400 pointer-events-none"></i>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <!-- Sample Pack Card -->
+            <div class="bg-gray-800 rounded-xl overflow-hidden hover:shadow-xl transition">
+                <div class="relative group">
+                    <img src="http://static.photos/music/640x360/6" alt="Sample Pack" class="w-full h-48 object-cover">
+                    <button class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition bg-black bg-opacity-50">
+                        <div class="bg-indigo-600 rounded-full p-3">
+                            <i data-feather="play" class="w-6 h-6"></i>
+                        </div>
+                    </button>
+                </div>
+                <div class="p-4">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h3 class="font-semibold text-lg">Lo-Fi Essentials</h3>
+                            <p class="text-gray-400 text-sm">120 samples • 24-bit WAV</p>
+                        </div>
+                        <span class="text-indigo-400 font-medium">29.99€</span>
+                    </div>
+                    <div class="mt-4 flex justify-between items-center">
+                        <div class="flex items-center text-yellow-400">
+                            <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"></i>
+                            <span class="text-gray-400 text-sm ml-1">(42)</span>
+                        </div>
+                        <button class="text-gray-400 hover:text-indigo-400">
+                            <i data-feather="shopping-cart" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Repeat similar cards for other sample packs -->
+            <!-- Sample Pack 2 -->
+            <div class="bg-gray-800 rounded-xl overflow-hidden hover:shadow-xl transition">
+                <div class="relative group">
+                    <img src="http://static.photos/music/640x360/7" alt="Sample Pack" class="w-full h-48 object-cover">
+                    <button class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition bg-black bg-opacity-50">
+                        <div class="bg-indigo-600 rounded-full p-3">
+                            <i data-feather="play" class="w-6 h-6"></i>
+                        </div>
+                    </button>
+                </div>
+                <div class="p-4">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h3 class="font-semibold text-lg">Trap Drums Vol. 3</h3>
+                            <p class="text-gray-400 text-sm">85 samples • 24-bit WAV</p>
+                        </div>
+                        <span class="text-indigo-400 font-medium">24.99€</span>
+                    </div>
+                    <div class="mt-4 flex justify-between items-center">
+                        <div class="flex items-center text-yellow-400">
+                            <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>
+                            <span class="text-gray-400 text-sm ml-1">(112)</span>
+                        </div>
+                        <button class="text-gray-400 hover:text-indigo-400">
+                            <i data-feather="shopping-cart" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Sample Pack 3 -->
+            <div class="bg-gray-800 rounded-xl overflow-hidden hover:shadow-xl transition">
+                <div class="relative group">
+                    <img src="http://static.photos/music/640x360/8" alt="Sample Pack" class="w-full h-48 object-cover">
+                    <button class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition bg-black bg-opacity-50">
+                        <div class="bg-indigo-600 rounded-full p-3">
+                            <i data-feather="play" class="w-6 h-6"></i>
+                        </div>
+                    </button>
+                </div>
+                <div class="p-4">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h3 class="font-semibold text-lg">Vintage Keys</h3>
+                            <p class="text-gray-400 text-sm">60 loops • 24-bit WAV</p>
+                        </div>
+                        <span class="text-indigo-400 font-medium">19.99€</span>
+                    </div>
+                    <div class="mt-4 flex justify-between items-center">
+                        <div class="flex items-center text-yellow-400">
+                            <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"></i>
+                            <span class="text-gray-400 text-sm ml-1">(28)</span>
+                        </div>
+                        <button class="text-gray-400 hover:text-indigo-400">
+                            <i data-feather="shopping-cart" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Sample Pack 4 -->
+            <div class="bg-gray-800 rounded-xl overflow-hidden hover:shadow-xl transition">
+                <div class="relative group">
+                    <img src="http://static.photos/music/640x360/9" alt="Sample Pack" class="w-full h-48 object-cover">
+                    <button class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition bg-black bg-opacity-50">
+                        <div class="bg-indigo-600 rounded-full p-3">
+                            <i data-feather="play" class="w-6 h-6"></i>
+                        </div>
+                    </button>
+                </div>
+                <div class="p-4">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h3 class="font-semibold text-lg">Ambient Textures</h3>
+                            <p class="text-gray-400 text-sm">45 samples • 24-bit WAV</p>
+                        </div>
+                        <span class="text-indigo-400 font-medium">22.99€</span>
+                    </div>
+                    <div class="mt-4 flex justify-between items-center">
+                        <div class="flex items-center text-yellow-400">
+                            <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"></i>
+                            <i data-feather="star" class="w-4 h-4"></i>
+                            <span class="text-gray-400 text-sm ml-1">(15)</span>
+                        </div>
+                        <button class="text-gray-400 hover:text-indigo-400">
+                            <i data-feather="shopping-cart" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="mt-10 flex justify-center">
+            <button class="px-6 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-full font-medium transition border border-gray-700">
+                Load More Packs
+            </button>
+        </div>
+    </main>
+
+    <audio-footer></audio-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

script.js

@@ -1,135 +1,48 @@
+
 document.addEventListener('DOMContentLoaded', () => {
-    // Audio context setup
-    let audioContext;
-    let analyser;
-    let audioSource;
-    let isPlaying = false;
-    let activeVisualizerType = 'bars';
+    // Sample player functionality
+    const samplePlayers = document.querySelectorAll('.sample-player');
+    
+    samplePlayers.forEach(player => {
+        player.addEventListener('click', function() {
+            const audio = this.querySelector('audio');
+            if (audio) {
+                if (audio.paused) {
+                    // Pause all other samples
+                    document.querySelectorAll('audio').forEach(a => {
+                        if (a !== audio) a.pause();
+                    });
+                    audio.currentTime = 0;
+                    audio.play();
+                    this.classList.add('playing');
+                } else {
+                    audio.pause();
+                    this.classList.remove('playing');
+                }
+            }
+        });
+    });
 
-    // DOM elements
-    const startAudioBtn = document.getElementById('startAudio');
-    const audioUpload = document.getElementById('audioUpload');
-    const fileNameSpan = document.getElementById('fileName');
-    const visualizerStyles = document.querySelectorAll('.visualizer-style');
-    
-    // Initialize audio context on user interaction
-    startAudioBtn.addEventListener('click', toggleAudioInput);
-    audioUpload.addEventListener('change', handleFileUpload);
-    
-    // Visualizer style selector
-    visualizerStyles.forEach(style => {
-        style.addEventListener('click', () => {
-            visualizerStyles.forEach(s => s.classList.remove('ring-2', 'ring-indigo-500'));
-            style.classList.add('ring-2', 'ring-indigo-500');
-            activeVisualizerType = style.dataset.type;
-            document.querySelectorAll('audio-visualizer').forEach(viz => {
-                viz.setAttribute('type', activeVisualizerType);
-            });
+    // Update audio elements when they end
+    document.querySelectorAll('audio').forEach(audio => {
+        audio.addEventListener('ended', function() {
+            const player = this.closest('.sample-player');
+            if (player) player.classList.remove('playing');
         });
     });
-    
-    // Set default visualizer style
-    visualizerStyles[0].click();
-    
-    async function toggleAudioInput() {
-        try {
-            if (!isPlaying) {
-                await setupAudioContext();
-                startAudioBtn.textContent = 'Stop Listening';
-                startAudioBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
-                startAudioBtn.classList.add('bg-pink-600', 'hover:bg-pink-700', 'pulse');
-                isPlaying = true;
-            } else {
-                stopAudio();
-                startAudioBtn.textContent = 'Start Listening';
-                startAudioBtn.classList.remove('bg-pink-600', 'hover:bg-pink-700', 'pulse');
-                startAudioBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
-                isPlaying = false;
-            }
-        } catch (error) {
-            console.error('Error accessing microphone:', error);
-            alert('Could not access microphone. Please check permissions.');
-        }
-    }
-    
-    async function setupAudioContext() {
-        if (!audioContext) {
-            audioContext = new (window.AudioContext || window.webkitAudioContext)();
-            analyser = audioContext.createAnalyser();
-            analyser.fftSize = 256;
-            
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            audioSource = audioContext.createMediaStreamSource(stream);
-            audioSource.connect(analyser);
-            
-            // Connect all visualizers to this analyser
-            document.querySelectorAll('audio-visualizer').forEach(viz => {
-                viz.setAnalyser(analyser);
-                viz.startVisualization();
-            });
-        }
-    }
-    
-    function stopAudio() {
-        if (audioSource && audioSource.mediaStream) {
-            audioSource.mediaStream.getTracks().forEach(track => track.stop());
-        }
-        if (audioContext) {
-            document.querySelectorAll('audio-visualizer').forEach(viz => {
-                viz.stopVisualization();
-            });
-            // Don't close the context to avoid re-creating it
-        }
-    }
-    
-    function handleFileUpload(e) {
-        const file = e.target.files[0];
-        if (!file) return;
-        
-        fileNameSpan.textContent = file.name;
-        
-        if (audioContext) {
-            stopAudio();
-            isPlaying = false;
-            startAudioBtn.textContent = 'Start Listening';
-            startAudioBtn.classList.remove('bg-pink-600', 'hover:bg-pink-700', 'pulse');
-            startAudioBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
-        }
-        
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            const arrayBuffer = e.target.result;
-            processAudioFile(arrayBuffer);
-        };
-        reader.readAsArrayBuffer(file);
-    }
-    
-    function processAudioFile(arrayBuffer) {
-        if (!audioContext) {
-            audioContext = new (window.AudioContext || window.webkitAudioContext)();
-            analyser = audioContext.createAnalyser();
-            analyser.fftSize = 256;
-        }
-        
-        audioContext.decodeAudioData(arrayBuffer, function(buffer) {
-            if (audioSource) {
-                audioSource.disconnect();
-            }
-            
-            audioSource = audioContext.createBufferSource();
-            audioSource.buffer = buffer;
-            audioSource.connect(analyser);
-            audioSource.connect(audioContext.destination);
-            audioSource.start();
-            
-            isPlaying = true;
-            document.querySelectorAll('audio-visualizer').forEach(viz => {
-                viz.setAnalyser(analyser);
-                viz.startVisualization();
-            });
-        }, function(e) {
-            console.error('Error decoding audio file:', e);
-            alert('Error loading audio file. Please try another file.');
+    // Shopping cart functionality
+    const cartButtons = document.querySelectorAll('.add-to-cart');
+    
+    cartButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const packId = this.dataset.packId;
+            // In a real app, you would add to cart via API
+            this.innerHTML = '<i data-feather="check" class="w-4 h-4"></i> Added';
+            feather.replace();
+            setTimeout(() => {
+                this.innerHTML = '<i data-feather="shopping-cart" class="w-4 h-4"></i>';
+                feather.replace();
+            }, 2000);
         });
-    }
+    });
 });

style.css

@@ -2,30 +2,28 @@
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
+/* Sample player styles */
+.sample-player {
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
 
-/* Visualizer canvas styles */
-audio-visualizer {
-    display: block;
-    width: 100%;
-    height: 300px;
-    background: linear-gradient(135deg, rgba(30, 27, 75, 0.5) 0%, rgba(11, 11, 25, 0.7) 100%);
-    border-radius: 12px;
-    transition: all 0.3s ease;
+.sample-player:hover {
+    transform: scale(1.02);
 }
 
-/* Static visualizer styling for gallery */
-audio-visualizer[static] {
-    pointer-events: none;
-    animation: visualizerDemo 4s infinite alternate;
+.sample-player.playing {
+    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.5);
 }
 
-@keyframes visualizerDemo {
-    0%, 100% {
-        filter: hue-rotate(0deg);
-    }
-    50% {
-        filter: hue-rotate(45deg);
-    }
+/* Pack card hover effects */
+.pack-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.pack-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
 }
 /* Pulse animation for active buttons */
 @keyframes pulse {