Spaces:

spwotton
/

guitarras

Running

File size: 32,670 Bytes

2988cd9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guitarras Jaco - Guitar Repair & Equipment</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto+Condensed:wght@300;400;700&display=swap');
        
        body {
            font-family: 'Roboto Condensed', sans-serif;
            background-color: #0a0a12;
            color: #e0e0e0;
            overflow-x: hidden;
        }
        
        .title-font {
            font-family: 'Playfair Display', serif;
        }
        
        .vinyl {
            animation: spin 4s linear infinite;
            transition: all 0.3s ease;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .smoke {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgba(30,30,50,0.3)" d="M30,50 Q50,30 70,50 Q50,70 30,50 Z"/></svg>');
            background-size: 200px 200px;
            opacity: 0.5;
            pointer-events: none;
        }
        
        .neon-text {
            text-shadow: 0 0 5px #4d79ff, 0 0 10px #4d79ff, 0 0 15px #4d79ff;
            transition: text-shadow 0.3s ease;
        }
        
        .neon-text:hover {
            text-shadow: 0 0 10px #4d79ff, 0 0 20px #4d79ff, 0 0 30px #4d79ff;
        }
        
        .blues-gradient {
            background: linear-gradient(135deg, #0a0a12 0%, #1a1a3a 50%, #0a0a12 100%);
        }
        
        .guitar-string {
            height: 1px;
            background: linear-gradient(90deg, transparent, #aaa, transparent);
            margin: 15px 0;
            position: relative;
        }
        
        .guitar-string::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 3px;
            background: radial-gradient(circle, #fff, transparent 70%);
            top: -1px;
            animation: string-vibrate 3s infinite ease-in-out;
        }
        
        @keyframes string-vibrate {
            0%, 100% { transform: scaleY(1); opacity: 0.3; }
            50% { transform: scaleY(2); opacity: 0.8; }
        }
        
        .vinyl-shadow {
            box-shadow: 0 0 20px rgba(100, 150, 255, 0.5);
            transition: all 0.3s ease;
        }
        
        .vinyl-shadow:hover {
            box-shadow: 0 0 30px rgba(100, 150, 255, 0.8);
        }
        
        .hero-image {
            background-image: url('https://images.unsplash.com/photo-1511671782774-c97d3d27d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
            background-color: rgba(10, 10, 18, 0.7);
        }
        
        .guitar-image {
            background-image: url('https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
            background-color: rgba(26, 26, 58, 0.7);
        }
        
        .jaco-image {
            background-image: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
            background-color: rgba(26, 26, 58, 0.7);
        }
        
        .glow-hover {
            transition: all 0.3s ease;
        }
        
        .glow-hover:hover {
            box-shadow: 0 0 15px rgba(100, 150, 255, 0.6);
            transform: translateY(-3px);
        }
        
        .rainbow-text {
            background: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #0099ff, #6633cc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: rainbow 5s linear infinite;
            background-size: 200% 100%;
        }
        
        @keyframes rainbow {
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .flicker {
            animation: flicker 3s infinite alternate;
        }
        
        @keyframes flicker {
            0%, 18%, 22%, 25%, 53%, 57%, 100% {
                opacity: 1;
            }
            20%, 24%, 55% {
                opacity: 0.5;
            }
        }
    </style>
</head>
<body class="min-h-screen relative overflow-hidden">
    <div class="smoke"></div>
    
    <!-- Hero Section -->
    <div class="hero-image h-screen flex items-center justify-center relative">
        <div class="absolute inset-0 bg-gradient-to-b from-blue-900/70 to-blue-900/20"></div>
        <div class="text-center relative z-10 px-4">
            <h1 class="title-font text-5xl md:text-7xl font-bold mb-4 neon-text text-blue-300 flicker">Guitarras Jaco</h1>
            <p class="text-2xl md:text-3xl rainbow-text font-bold mb-8">Guitar Repair & Equipment</p>
            <div class="vinyl vinyl-shadow w-32 h-32 rounded-full bg-gradient-to-br from-gray-900 via-gray-700 to-gray-900 flex items-center justify-center mx-auto mb-8 cursor-pointer pulse">
                <div class="w-8 h-8 rounded-full bg-blue-500"></div>
            </div>
            <p class="text-xl text-blue-200 italic mb-2">Now Playing: <span class="text-blue-300 font-medium">Stormy Monday</span></p>
            <p class="text-lg text-blue-200">Jaco's premier guitar repair and equipment shop</p>
        </div>
        <div class="absolute bottom-10 left-0 right-0 text-center">
            <a href="#main-content" class="text-blue-300 text-4xl animate-bounce">
                <i class="fas fa-chevron-down"></i>
            </a>
        </div>
    </div>
    
    <!-- Main Container -->
    <div id="main-content" class="container mx-auto px-4 py-12 relative z-10">
        <!-- Header -->
        <header class="flex flex-col md:flex-row items-center justify-between mb-16">
            <div class="text-center md:text-left mb-8 md:mb-0">
                <h1 class="title-font text-4xl md:text-5xl font-bold mb-2 neon-text text-blue-300">Guitarras Jaco</h1>
                <p class="text-xl text-blue-200 italic">Guitar Repair & Equipment</p>
            </div>
            
            <div class="flex items-center space-x-6">
                <div class="text-center">
                    <div class="vinyl vinyl-shadow w-16 h-16 rounded-full bg-gradient-to-br from-gray-900 via-gray-700 to-gray-900 flex items-center justify-center mx-auto mb-2 cursor-pointer">
                        <div class="w-4 h-4 rounded-full bg-blue-500"></div>
                    </div>
                    <p class="text-sm text-blue-300">Now Playing</p>
                    <p class="text-blue-100 font-medium">Stormy Monday</p>
                </div>
                
                <div class="hidden md:block h-20 w-px bg-gradient-to-b from-transparent via-blue-500 to-transparent"></div>
                
                <div class="text-center">
                    <div class="w-16 h-16 rounded-full bg-blue-900 bg-opacity-50 flex items-center justify-center mx-auto mb-2 glow-hover">
                        <i class="fas fa-tools text-3xl text-blue-300"></i>
                    </div>
                    <p class="text-sm text-blue-300">Master Technician</p>
                    <p class="text-blue-100 font-medium">Gad Reichh</p>
                </div>
            </div>
        </header>
        
        <!-- Main Content -->
        <main class="flex flex-col lg:flex-row gap-12">
            <!-- Left Column -->
            <div class="lg:w-2/3">
                <div class="blues-gradient rounded-lg p-8 shadow-xl border border-blue-900 border-opacity-50 mb-12 glow-hover">
                    <h2 class="title-font text-3xl font-bold mb-6 text-blue-300 border-b border-blue-900 pb-2">Jaco's Premier Guitar Workshop</h2>
                    
                    <div class="space-y-6">
                        <p class="text-lg leading-relaxed">
                            From the smoky blues bars of Toronto to the tropical vibes of Costa Rica, Gad Reichh brings decades of professional guitar craftsmanship to Jacó. Specializing in repairs, custom modifications, and professional setups that will transform your instrument.
                        </p>
                        
                        <div class="guitar-string"></div>
                        
                        <div class="guitar-image rounded-lg p-8 text-center h-64 flex items-center justify-center">
                            <p class="text-2xl font-bold text-white bg-black bg-opacity-50 px-4 py-2 rounded">"A great guitar is more than wood and strings - it's a living, breathing extension of the player."</p>
                        </div>
                        
                        <div class="guitar-string"></div>
                        
                        <p class="text-lg leading-relaxed">
                            Whether you need fretwork, electronics repair, custom modifications, or just a professional setup to make your guitar play like new, our workshop has the tools and expertise to handle it all.
                        </p>
                        
                        <div class="guitar-string"></div>
                        
                        <div class="bg-blue-900 bg-opacity-30 rounded-lg p-6 border border-blue-700 border-opacity-50">
                            <p class="text-lg leading-relaxed italic text-blue-200">
                                "Guitarras Jaco transformed my old Stratocaster into a dream to play. The setup was perfect and the custom modifications exceeded my expectations!" 
                                <span class="block text-right text-blue-300">- Carlos M., Customer</span>
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- Services -->
                <div class="grid md:grid-cols-2 gap-6 mb-12">
                    <div class="bg-gradient-to-br from-blue-900/30 to-purple-900/30 rounded-lg p-6 border border-blue-900 border-opacity-30 glow-hover">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 rounded-full bg-blue-800 bg-opacity-50 flex items-center justify-center mr-4">
                                <i class="fas fa-tools text-xl text-blue-300"></i>
                            </div>
                            <h3 class="title-font text-xl font-bold text-blue-300">Guitar Repairs</h3>
                        </div>
                        <p class="text-blue-100">Expert repairs for all types of damage including cracks, broken headstocks, loose hardware, and more. We bring instruments back to life.</p>
                    </div>
                    
                    <div class="bg-gradient-to-br from-blue-900/30 to-indigo-900/30 rounded-lg p-6 border border-blue-900 border-opacity-30 glow-hover">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 rounded-full bg-blue-800 bg-opacity-50 flex items-center justify-center mr-4">
                                <i class="fas fa-cogs text-xl text-blue-300"></i>
                            </div>
                            <h3 class="title-font text-xl font-bold text-blue-300">Custom Modifications</h3>
                        </div>
                        <p class="text-blue-100">Personalize your instrument with custom electronics, hardware upgrades, or unique cosmetic modifications.</p>
                    </div>
                    
                    <div class="bg-gradient-to-br from-blue-900/30 to-teal-900/30 rounded-lg p-6 border border-blue-900 border-opacity-30 glow-hover">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 rounded-full bg-blue-800 bg-opacity-50 flex items-center justify-center mr-4">
                                <i class="fas fa-wrench text-xl text-blue-300"></i>
                            </div>
                            <h3 class="title-font text-xl font-bold text-blue-300">Calibration & Setup</h3>
                        </div>
                        <p class="text-blue-100">Ensure your guitar plays perfectly with our professional calibration and setup services.</p>
                    </div>
                    
                    <div class="bg-gradient-to-br from-blue-900/30 to-cyan-900/30 rounded-lg p-6 border border-blue-900 border-opacity-30 glow-hover">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 rounded-full bg-blue-800 bg-opacity-50 flex items-center justify-center mr-4">
                                <i class="fas fa-shopping-cart text-xl text-blue-300"></i>
                            </div>
                            <h3 class="title-font text-xl font-bold text-blue-300">Equipment Sales</h3>
                        </div>
                        <p class="text-blue-100">We sell strings, used equipment, and accessories to keep your guitar in top shape.</p>
                    </div>
                </div>
                
                <!-- About Us -->
                <div class="bg-gradient-to-b from-blue-900/30 to-purple-900/30 rounded-lg p-8 mb-12 text-white relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-black/70 to-black/30"></div>
                    <div class="relative z-10">
                        <h2 class="title-font text-3xl font-bold mb-4 text-blue-300">About Guitarras Jaco</h2>
                        <p class="text-lg mb-4">Located in the heart of Jacó, Costa Rica, we are dedicated to providing top-notch guitar repair and customization services. Our team of master craftsmen has over 25 years of experience in the industry.</p>
                        <ul class="grid grid-cols-2 gap-4">
                            <li class="flex items-center"><i class="fas fa-tools text-blue-300 mr-2"></i> Expert Repairs</li>
                            <li class="flex items-center"><i class="fas fa-cogs text-blue-300 mr-2"></i> Custom Modifications</li>
                            <li class="flex items-center"><i class="fas fa-wrench text-blue-300 mr-2"></i> Professional Setups</li>
                            <li class="flex items-center"><i class="fas fa-shopping-cart text-blue-300 mr-2"></i> Equipment Sales</li>
                        </ul>
                    </div>
                </div>
                
                <!-- Gallery Section -->
                <div class="mb-12">
                    <h2 class="title-font text-3xl font-bold mb-8 text-center text-blue-300 neon-text">Our Work</h2>
                    
                    <div class="grid md:grid-cols-3 gap-6">
                        <div class="bg-gradient-to-b from-blue-900/30 to-purple-900/30 rounded-lg overflow-hidden border border-blue-900 border-opacity-30 glow-hover">
                            <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1550985616-10810253c8d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                            <div class="p-6">
                                <h3 class="title-font text-xl font-bold mb-2 text-blue-300">Vintage Restoration</h3>
                                <p class="text-blue-100">Bringing classic instruments back to their former glory</p>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-b from-blue-900/30 to-indigo-900/30 rounded-lg overflow-hidden border border-blue-900 border-opacity-30 glow-hover">
                            <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1511671782774-c97d3d27d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                            <div class="p-6">
                                <h3 class="title-font text-xl font-bold mb-2 text-blue-300">Custom Electronics</h3>
                                <p class="text-blue-100">Tailoring your instrument's sound to your exact preferences</p>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-b from-blue-900/30 to-cyan-900/30 rounded-lg overflow-hidden border border-blue-900 border-opacity-30 glow-hover">
                            <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                            <div class="p-6">
                                <h3 class="title-font text-xl font-bold mb-2 text-blue-300">Precision Setups</h3>
                                <p class="text-blue-100">Making your guitar play like it was custom-built for you</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Jaco Location Section -->
                <div class="jaco-image rounded-lg p-8 mb-12 text-white relative overflow-hidden h-96 flex items-center justify-center">
                    <div class="absolute inset-0 bg-gradient-to-r from-black/70 to-black/30"></div>
                    <div class="relative z-10 text-center max-w-2xl">
                        <h2 class="title-font text-4xl font-bold mb-4 text-blue-300 neon-text">Visit Us in Jacó</h2>
                        <p class="text-xl mb-6">Our workshop is located in the vibrant beach town of Jacó, Costa Rica - a paradise for musicians and surfers alike.</p>
                        <div class="bg-blue-900/50 rounded-lg p-4 inline-block">
                            <p class="text-lg font-medium">Open: Monday - Saturday 10am - 6pm</p>
                            <p class="text-sm">Calle Principal, Jacó, Costa Rica</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Right Column -->
            <div class="lg:w-1/3">
                <div class="bg-gradient-to-b from-blue-900/30 to-indigo-900/30 rounded-lg p-8 border border-blue-900 border-opacity-30 sticky top-8 mb-8 glow-hover">
                    <h3 class="title-font text-2xl font-bold mb-6 text-blue-300 border-b border-blue-900 pb-2">Contact Us</h3>
                    
                    <form class="space-y-4">
                        <div>
                            <label class="block text-blue-200 mb-2">Your Name</label>
                            <input type="text" class="w-full bg-blue-900 bg-opacity-30 border border-blue-800 rounded px-4 py-2 text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        
                        <div>
                            <label class="block text-blue-200 mb-2">Email</label>
                            <input type="email" class="w-full bg-blue-900 bg-opacity-30 border border-blue-800 rounded px-4 py-2 text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        
                        <div>
                            <label class="block text-blue-200 mb-2">Service Needed</label>
                            <select class="w-full bg-blue-900 bg-opacity-30 border border-blue-800 rounded px-4 py-2 text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option>Guitar Repair</option>
                                <option>Custom Modifications</option>
                                <option>Calibration & Setup</option>
                                <option>Equipment Purchase</option>
                            </select>
                        </div>
                        
                        <button type="submit" class="w-full bg-gradient-to-r from-blue-700 to-blue-500 hover:from-blue-600 hover:to-blue-400 text-white font-bold py-3 px-4 rounded transition duration-300 mt-4">
                            Request Service
                        </button>
                    </form>
                </div>
                
                <!-- Testimonials -->
                <div class="bg-gradient-to-b from-blue-900/30 to-purple-900/30 rounded-lg p-6 border border-blue-900 border-opacity-30 mb-8 glow-hover">
                    <h3 class="title-font text-xl font-bold mb-4 text-blue-300">Customer Testimonials</h3>
                    
                    <div class="space-y-4">
                        <div class="bg-blue-900/30 p-3 rounded-lg">
                            <p class="text-blue-100 italic">"Guitarras Jaco fixed my guitar perfectly. It sounds amazing now!"</p>
                            <p class="text-sm text-blue-300 mt-2">- Maria S.</p>
                        </div>
                        
                        <div class="bg-blue-900/30 p-3 rounded-lg">
                            <p class="text-blue-100 italic">"The custom modifications they did on my bass are incredible. Highly recommend!"</p>
                            <p class="text-sm text-blue-300 mt-2">- Juan P.</p>
                        </div>

                        <div class="bg-blue-900/30 p-3 rounded-lg">
                            <p class="text-blue-100 italic">"Best guitar setup I've ever had. Plays like butter now!"</p>
                            <p class="text-sm text-blue-300 mt-2">- Roberto T.</p>
                        </div>
                    </div>
                </div>

                <!-- Equipment Gallery -->
                <div class="bg-gradient-to-b from-blue-900/30 to-teal-900/30 rounded-lg p-6 border border-blue-900 border-opacity-30 mb-8 glow-hover">
                    <h3 class="title-font text-xl font-bold mb-4 text-blue-300">Featured Equipment</h3>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-blue-900/30 p-3 rounded-lg text-center">
                            <div class="h-20 bg-gray-700 rounded mb-2 flex items-center justify-center">
                                <i class="fas fa-guitar text-3xl text-blue-300"></i>
                            </div>
                            <p class="text-blue-100 font-medium">Vintage Strat</p>
                            <p class="text-sm text-blue-300">$1,200</p>
                        </div>
                        
                        <div class="bg-blue-900/30 p-3 rounded-lg text-center">
                            <div class="h-20 bg-gray-700 rounded mb-2 flex items-center justify-center">
                                <i class="fas fa-guitar text-3xl text-blue-300"></i>
                            </div>
                            <p class="text-blue-100 font-medium">Les Paul</p>
                            <p class="text-sm text-blue-300">$1,800</p>
                        </div>
                        
                        <div class="bg-blue-900/30 p-3 rounded-lg text-center">
                            <div class="h-20 bg-gray-700 rounded mb-2 flex items-center justify-center">
                                <i class="fas fa-sliders-h text-3xl text-blue-300"></i>
                            </div>
                            <p class="text-blue-100 font-medium">Pedalboard</p>
                            <p class="text-sm text-blue-300">$350</p>
                        </div>
                        
                        <div class="bg-blue-900/30 p-3 rounded-lg text-center">
                            <div class="h-20 bg-gray-700 rounded mb-2 flex items-center justify-center">
                                <i class="fas fa-volume-up text-3xl text-blue-300"></i>
                            </div>
                            <p class="text-blue-100 font-medium">Twin Reverb</p>
                            <p class="text-sm text-blue-300">$950</p>
                        </div>
                    </div>
                </div>
                
                <!-- Special Offers -->
                <div class="bg-gradient-to-b from-blue-900/30 to-amber-900/30 rounded-lg p-6 border border-blue-900 border-opacity-30 mb-8 glow-hover">
                    <h3 class="title-font text-xl font-bold mb-4 text-blue-300">Special Offers</h3>
                    
                    <div class="bg-blue-900/30 rounded-lg p-4 mb-4">
                        <div class="flex items-start">
                            <div class="bg-amber-500 text-blue-900 rounded-full w-8 h-8 flex items-center justify-center mr-3">
                                <i class="fas fa-percentage"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-blue-200">20% Off</h4>
                                <p class="text-sm text-blue-100">First-time customer discount on all services</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-blue-900/30 rounded-lg p-4">
                        <div class="flex items-start">
                            <div class="bg-amber-500 text-blue-900 rounded-full w-8 h-8 flex items-center justify-center mr-3">
                                <i class="fas fa-guitar"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-blue-200">Free Setup</h4>
                                <p class="text-sm text-blue-100">With purchase of any used guitar</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- Footer -->
    <footer class="bg-gradient-to-b from-blue-900/30 to-blue-900/70 py-8 border-t border-blue-900 border-opacity-50 relative z-10">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h2 class="title-font text-2xl font-bold text-blue-300 neon-text">Guitarras Jaco</h2>
                    <p class="text-blue-200">Guitar Repair & Equipment in Costa Rica</p>
                </div>
                
                <div class="flex space-x-6">
                    <a href="#" class="text-blue-300 hover:text-white text-2xl transition duration-300">
                        <i class="fab fa-facebook"></i>
                    </a>
                    <a href="#" class="text-blue-300 hover:text-white text-2xl transition duration-300">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" class="text-blue-300 hover:text-white text-2xl transition duration-300">
                        <i class="fab fa-youtube"></i>
                    </a>
                    <a href="mailto:[email protected]" class="text-blue-300 hover:text-white text-2xl transition duration-300">
                        <i class="fas fa-envelope"></i>
                    </a>
                </div>
                
                <div class="mt-4 md:mt-0 text-center md:text-right">
                    <p class="text-blue-200">Jaco, Costa Rica</p>
                    <p class="text-blue-300 font-medium">+1 416-995-6086</p>
                </div>
            </div>
            
            <div class="border-t border-blue-900 border-opacity-50 mt-6 pt-6 text-center text-blue-400">
                <p>&copy; 2025 Guitarras Jaco. All rights reserved.</p>
            </div>
        </div>
    </footer>
    
    <!-- Audio Player (hidden) -->
    <audio id="background-music" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>
    
    <script>
        // Play/pause music when clicking the vinyl
        document.addEventListener('DOMContentLoaded', function() {
            const vinyls = document.querySelectorAll('.vinyl');
            const audio = document.getElementById('background-music');
            
            vinyls.forEach(vinyl => {
                vinyl.addEventListener('click', function() {
                    if (audio.paused) {
                        audio.play();
                        vinyls.forEach(v => v.style.animationPlayState = 'running');
                        document.querySelectorAll('.guitar-string').forEach(string => {
                            string.style.animationPlayState = 'running';
                        });
                    } else {
                        audio.pause();
                        vinyls.forEach(v => v.style.animationPlayState = 'paused');
                        document.querySelectorAll('.guitar-string').forEach(string => {
                            string.style.animationPlayState = 'paused';
                        });
                    }
                });
            });
            
            // Simulate string vibration on hover
            const strings = document.querySelectorAll('.guitar-string');
            strings.forEach(string => {
                string.addEventListener('mouseenter', function() {
                    this.style.animation = 'string-vibrate 0.5s infinite ease-in-out';
                });
                string.addEventListener('mouseleave', function() {
                    this.style.animation = 'string-vibrate 3s infinite ease-in-out';
                });
            });
            
            // Add scroll effect to hero section
            window.addEventListener('scroll', function() {
                const scrollPosition = window.scrollY;
                const heroSection = document.querySelector('.hero-image');
                if (heroSection) {
                    heroSection.style.backgroundPositionY = -scrollPosition * 0.5 + 'px';
                }
            });
            
            // Add rainbow effect to vinyl on hover
            vinyls.forEach(vinyl => {
                vinyl.addEventListener('mouseenter', function() {
                    this.style.background = 'linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #0099ff, #6633cc)';
                });
                vinyl.addEventListener('mouseleave', function() {
                    this.style.background = 'linear-gradient(to bottom right, #1a1a1a, #333333, #1a1a1a)';
                });
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=spwotton/guitarras" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>