index.html

    <!-- Product Page Template -->
    <div id="product-page" class="hidden fixed inset-0 bg-white z-50 overflow-y-auto h-screen w-screen p-0">
        <div class="w-full h-full">
            <div class="bg-black text-white py-2 px-4 sticky top-20 z-20 w-full">
                <div class="container mx-auto flex justify-between items-center">
                    <a href="#" class="text-xl font-bold volt-text">VOLT</a>
                    <div class="flex space-x-4 text-sm justify-center">
                        <a href="#" class="hover:text-volt transition">Novidades</a>
                        <a href="#" class="hover:text-volt transition">Oversized</a>
                        <a href="#" class="hover:text-volt transition">Masculino</a>
                        <a href="#" class="hover:text-volt transition">Feminino</a>
                        <a href="#" class="hover:text-volt transition">Outlet</a>
                        <a href="#" class="hover:text-volt transition">Basics</a>
                        <a href="#" class="hover:text-volt transition">Acessórios</a>
                    </div>
                </div>
            </div>
            <button onclick="closeProductPage()" class="fixed top-14 right-4 text-2xl hover:text-volt transition z-50">
                <i class="fas fa-times"></i>
            </button>
            
            <div class="flex flex-col md:flex-row gap-8 pt-16 h-[calc(100%-80px)]">
                <!-- Product Images -->
                <div class="md:w-1/2">
                    <div class="mb-4 rounded-lg overflow-hidden">
                        <img id="product-main-image" src="" alt="Product Image" class="w-full h-auto object-cover">
                    </div>
                    <div class="grid grid-cols-4 gap-2">
                        <div class="cursor-pointer border border-gray-200 rounded hover:border-volt">
                            <img src="" alt="Thumbnail" class="w-full h-20 object-cover">
                        </div>
                        <div class="cursor-pointer border border-gray-200 rounded hover:border-volt">
                            <img src="" alt="Thumbnail" class="w-full h-20 object-cover">
                        </div>
                        <div class="cursor-pointer border border-gray-200 rounded hover:border-volt">
                            <img src="" alt="Thumbnail" class="w-full h-20 object-cover">
                        </div>
                        <div class="cursor-pointer border border-gray-200 rounded hover:border-volt">
                            <img src="" alt="Thumbnail" class="w-full h-20 object-cover">
                        </div>
                    </div>
                </div>
                
                <!-- Product Info -->
                <div class="md:w-1/2">
                    <div id="quantity-warning" class="hidden bg-red-100 text-red-800 font-bold text-sm py-2 px-4 w-full text-center fixed top-0 left-0 z-50">
                        <div class="container mx-auto flex justify-between items-center">
                            <p>Para pedidos acima de 100 unidades, entre em contato via <a href="https://wa.me/551140040040" class="font-bold underline hover:text-gray-200 transition">WhatsApp</a></p>
                            <button onclick="closeQuantityWarning()" class="ml-4">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div id="warning-timer" class="h-1 bg-red-500 w-full absolute bottom-0 left-0"></div>
                    </div>
                    <h1 id="product-title" class="text-3xl font-bold mb-2"></h1>
                    <div class="mb-4">
                        <div class="flex text-gray-300 mr-2">
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                        <span class="text-gray-600">(Seja o primeiro a avaliar)</span>
                    </div>
                    
                    <div class="mb-6">
                        <span id="product-price" class="text-2xl font-bold"></span>
                        <span class="text-gray-500 line-through ml-2">R$ 159,90</span>
                        <span class="ml-2 bg-volt text-white text-sm px-2 py-1 rounded">20% OFF</span>
                    </div>
                    ,
                    <div class="mb-6">
                        <h3 class="font-bold mb-2">CORES</h3>
                        <div class="flex space-x-2">
                            <button class="w-8 h-8 rounded-full bg-black border-2 border-gray-300"></button>
                            <button class="w-8 h-8 rounded-full bg-gray-400 border-2 border-gray-300"></button>
                            <button class="w-8 h-8 rounded-full bg-white border-2 border-gray-300"></button>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <h3 class="font-bold mb-2">TAMANHOS</h3>
                        <div class="flex flex-wrap gap-2">
                            <button class="px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded">P</button>
                            <button class="px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded">M</button>
                            <button class="px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded">G</button>
                            <button class="px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded">GG</button>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <div class="flex items-center mb-4">
                            <button id="decrease-qty" class="bg-gray-200 px-3 py-1 rounded-l hover:bg-gray-300 transition">-</button>
                            <input type="number" id="quantity" min="1" max="100" value="1" class="w-16 text-center border-t border-b border-gray-300 px-2 py-1">
                            <button id="increase-qty" class="bg-gray-200 px-3 py-1 rounded-r hover:bg-gray-300 transition">+</button>
                            <button class="ml-4 bg-volt hover:bg-voltlight text-white font-bold py-2 px-6 rounded-full transition">COMPRAR</button>
                        </div>
                        <button class="flex items-center text-gray-600 hover:text-volt transition">
                            <i class="far fa-heart mr-2"></i> ADICIONAR AOS FAVORITOS
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Description and Reviews Section -->
            <div class="w-full mt-12">
                <div class="border-t border-gray-200 pt-8 pb-8">
                    <div class="bg-gray-50 p-6 rounded-lg mb-8">
                        <h3 class="font-bold mb-6 text-3xl text-black">DESCRIÇÃO DO PRODUTO</h3>
                        <p id="product-description" class="text-gray-700 text-lg mb-6 max-w-4xl leading-relaxed"></p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg mb-8">
                        <h3 class="font-bold mb-6 text-3xl text-black">SEGURANÇA E PAGAMENTO</h3>
                        <ul class="text-gray-700 list-disc pl-5 max-w-4xl space-y-3 text-lg">
                            <li><span class="font-semibold">Pagamentos:</span> Processados com criptografia SSL de 256-bit</li>
                            <li><span class="font-semibold">Dados:</span> Suas informações são protegidas e nunca compartilhadas</li>
                            <li><span class="font-semibold">Garantia:</span> Compra segura com reembolso em até 7 dias</li>
                        </ul>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg mb-8">
                        <h3 class="font-bold mb-6 text-3xl text-black">DETALHES TÉCNICOS</h3>
                        <ul class="text-gray-700 list-disc pl-5 max-w-4xl space-y-3 text-lg">
                            <li><span class="font-semibold">Modelagem:</span> Oversized com caimento perfeito</li>
                            <li><span class="font-semibold">Tecido:</span> 100% algodão penteado de alta qualidade</li>
                            <li><span class="font-semibold">Estampa:</span> Digital de alta definição e durabilidade</li>
                            <li><span class="font-semibold">Costura:</span> Reforçada para maior resistência</li>
                            <li><span class="font-semibold">Lavagem:</span> Pode ser lavada na máquina sem desbotar</li>
                            <li><span class="font-semibold">Origem:</span> Produzido no Brasil com materiais premium</li>
                        </ul>
                    </div>
                </div>

                <!-- Customer Reviews Section -->
                <div class="border-t border-gray-200 pt-12 mt-8">
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h3 class="font-bold mb-6 text-3xl text-black">AVALIAÇÕES DOS CLIENTES</h3>
                        <div class="flex items-center mb-6">
                            <div class="flex text-yellow-400 text-2xl mr-4">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span class="text-gray-700 text-lg">0/5.0 (<span id="review-count">0</span> avaliações)</span>
                        </div>
                            
                            <!-- Review Form (hidden by default) -->
                            <div id="review-form" class="hidden bg-gray-50 p-6 rounded-lg mb-6">
                                <div id="login-prompt" class="mb-4 p-4 bg-yellow-50 border-l-4 border-yellow-400">
                                    <p class="text-yellow-700">Você precisa estar logado para avaliar.</p>
                                    <div class="flex space-x-2 mt-2">
                                        <button class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">Google</button>
                                        <button class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700">Facebook</button>
                                        <button class="px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600">Discord</button>
                                    </div>
                                </div>
                                <h4 class="font-bold mb-4">ESCREVA SUA AVALIAÇÃO</h4>
                                <form id="submit-review">
                                    <div class="mb-4">
                                        <label class="block font-medium mb-2">Sua avaliação *</label>
                                        <div class="flex text-yellow-400 text-2xl mb-2" id="star-rating">
                                            <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="1"></i>
                                            <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="2"></i>
                                            <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="3"></i>
                                            <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="4"></i>
                                            <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="5"></i>
                                        </div>
                                        <input type="hidden" id="rating-value" name="rating" required>
                                    </div>
                                    <div class="mb-4">
                                        <label for="review-title" class="block font-medium mb-2">Título *</label>
                                        <input type="text" id="review-title" name="title" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-volt focus:border-volt" required>
                                    </div>
                                    <div class="mb-4">
                                        <label for="review-text" class="block font-medium mb-2">Comentário *</label>
                                        <textarea id="review-text" name="review" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-volt focus:border-volt" required></textarea>
                                    </div>
                                    <div class="mb-4">
                                        <label class="block font-medium mb-2">Fotos (opcional)</label>
                                        <div class="flex items-center space-x-2">
                                            <label for="review-photos" class="cursor-pointer border border-dashed border-gray-300 rounded p-4 text-center hover:bg-gray-100 transition">
                                                <i class="fas fa-camera text-gray-400 text-xl mb-2"></i>
                                                <p class="text-sm">Adicionar fotos</p>
                                                <input type="file" id="review-photos" name="photos" class="hidden" multiple accept="image/*">
                                            </label>
                                            <div id="photo-preview" class="flex space-x-2"></div>
                                        </div>
                                    </div>
                                    <div class="flex justify-end space-x-4">
                                        <button type="button" onclick="document.getElementById('review-form').classList.add('hidden'); document.getElementById('review-button').classList.remove('hidden')" class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-100 transition">Cancelar</button>
                                        <button type="submit" class="px-4 py-2 bg-volt hover:bg-voltlight text-white rounded transition">Enviar Avaliação</button>
                                    </div>
                                </form>
                            </div>
                            
                            <button id="review-button" onclick="document.getElementById('review-form').classList.remove('hidden'); this.classList.add('hidden')" class="bg-volt hover:bg-voltlight text-white font-bold py-2 px-4 rounded transition">
                                <i class="fas fa-pen mr-2"></i>ESCREVER AVALIAÇÃO
                            </button>
                        </div>
                        
                        <!-- Review List -->
                        <div class="space-y-6">
                            <!-- Reviews List -->
                            <div class="space-y-6">
                                <div id="no-reviews-message" class="bg-white p-6 rounded-lg shadow-sm text-center">
                                    <i class="far fa-comment-dots text-4xl text-gray-300 mb-4"></i>
                                    <p class="text-gray-500">Este produto ainda não possui avaliações. Seja o primeiro a compartilhar sua opinião!</p>
                                </div>
                            </div>
                            
                            <!-- Load More Button -->
                            <div class="text-center mt-4 hidden">
                                <button id="load-more-reviews" class="text-volt hover:text-voltlight font-medium">
                                    <i class="fas fa-chevron-down mr-1"></i>CARREGAR MAIS AVALIAÇÕES
                                </button>
                            </div>
                        </div>
                    </div>

                    <script>
                        // Star rating interaction
                        const stars = document.querySelectorAll('#star-rating i');
                        stars.forEach(star => {
                            star.addEventListener('click', function() {
                                const rating = parseInt(this.getAttribute('data-rating'));
                                document.getElementById('rating-value').value = rating;
                                
                                stars.forEach((s, index) => {
                                    if (index < rating) {
                                        s.classList.remove('far');
                                        s.classList.add('fas');
                                    } else {
                                        s.classList.remove('fas');
                                        s.classList.add('far');
                                    }
                                });
                            });
                        });

                        // Photo upload preview
                        document.getElementById('review-photos').addEventListener('change', function(e) {
                            const preview = document.getElementById('photo-preview');
                            preview.innerHTML = '';
                            
                            if (this.files) {
                                Array.from(this.files).forEach(file => {
                                    const reader = new FileReader();
                                    reader.onload = function(e) {
                                        const img = document.createElement('img');
                                        img.src = e.target.result;
                                        img.className = 'w-20 h-20 object-cover rounded border border-gray-200';
                                        preview.appendChild(img);
                                    }
                                    reader.readAsDataURL(file);
                                });
                            }
                        });

                        // Check login status before showing review form
                        function checkLoginBeforeReview() {
                            // In a real app, check actual login status
                            const isLoggedIn = false; // Change to true when user logs in
                            
                            if (!isLoggedIn) {
                                document.getElementById('review-form').classList.remove('hidden');
                                document.getElementById('login-prompt').classList.remove('hidden');
                            } else {
                                document.getElementById('review-form').classList.toggle('hidden');
                                document.getElementById('login-prompt').classList.add('hidden');
                            }
                        }

                        // Form submission
                        document.getElementById('submit-review').addEventListener('submit', function(e) {
                            e.preventDefault();
                            // Verify user is logged in
                            const isLoggedIn = false; // Change to true when user logs in
                            
                            if (!isLoggedIn) {
                                alert('Por favor, faça login para enviar uma avaliação.');
                                return;
                            }
                            
                            // Create new review element
                            const reviewsContainer = document.querySelector('.space-y-6');
                            const newReview = document.createElement('div');
                            newReview.className = 'bg-white p-6 rounded-lg shadow-sm';
                            newReview.innerHTML = `
                                <div class="flex justify-between items-start mb-4">
                                    <div>
                                        <h4 class="font-bold">Você</h4>
                                        <div class="flex text-yellow-400 text-sm mt-1" id="new-review-stars"></div>
                                    </div>
                                    <span class="text-gray-500 text-sm">${new Date().toLocaleDateString()}</span>
                                </div>
                                <h5 class="font-medium mb-2">${document.getElementById('review-title').value}</h5>
                                <p class="text-gray-700">${document.getElementById('review-text').value}</p>
                            `;
                            
                            // Add stars to new review
                            const rating = parseInt(document.getElementById('rating-value').value);
                            const starsContainer = newReview.querySelector('#new-review-stars');
                            for (let i = 1; i <= 5; i++) {
                                const star = document.createElement('i');
                                star.className = i <= rating ? 'fas fa-star' : 'far fa-star';
                                starsContainer.appendChild(star);
                            }
                            
                            // Add new review to top of list
                            reviewsContainer.prepend(newReview);
                            
                            // Update review count and hide "no reviews" message
                            const countElement = document.getElementById('review-count');
                            const newCount = parseInt(countElement.textContent) + 1;
                            countElement.textContent = newCount;
                            
                            // Hide "no reviews" message if it's the first review
                            if (newCount === 1) {
                                document.getElementById('no-reviews-message').classList.add('hidden');
                            }
                            
                            // Reset form
                            this.reset();
                            document.getElementById('photo-preview').innerHTML = '';
                            document.getElementById('review-form').classList.add('hidden');
                            
                            document.getElementById('review-button').classList.remove('hidden');
                            alert('Avaliação publicada com sucesso! Obrigado por seu feedback.');
                        });

                        // Load more reviews button
                        document.getElementById('load-more-reviews').addEventListener('click', function() {
                            // In a real app, this would fetch more reviews from the server
                            console.log('Loading more reviews...');
                        });
                    </script>
                </div>
            </div>
            
            <!-- Related Products -->
            <div class="px-4 py-8 bg-gray-50">
                <h2 class="text-2xl font-bold mb-8 electric-line">PRODUTOS RELACIONADOS</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                    <!-- Related product cards would go here -->
                </div>
            </div>
        </div>
    </div>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VOLT - Camisas Oversized Premium</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">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        volt: '#bc13fe',
                        voltlight: '#d46afd',
                        voltdark: '#8a00b5',
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
        }
        
        .volt-text {
            color: #bc13fe;
            text-shadow: 0 0 8px rgba(188, 19, 254, 0.6);
        }
        
        .volt-border {
            border-color: #bc13fe;
            box-shadow: 0 0 12px rgba(188, 19, 254, 0.4);
        }
        
        .volt-bg {
            background-color: #bc13fe;
            box-shadow: 0 0 12px rgba(188, 19, 254, 0.4);
        }
        
        .hover-effect:hover {
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }

        .sticky-nav-active {
            position: fixed;
            width: 100%;
            top: 0;
            animation: slideDown 0.3s ease-out;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        @keyframes slideDown {
            from {
                transform: translateY(-100%);
            }
            to {
                transform: translateY(0);
            }
        }
        
        .electric-line {
            position: relative;
            overflow: hidden;
        }
        
        .electric-line::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #bc13fe, transparent);
            animation: electric 3s linear infinite;
        }
        
        @keyframes electric {
            0% {
                transform: translateX(-100%);
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            100% {
                transform: translateX(100%);
                opacity: 0;
            }
        }
        
        #mobile-menu {
            backdrop-filter: blur(5px);
        }
        
        #mobile-menu-button {
            box-shadow: 0 0 10px rgba(188, 19, 254, 0.5);
        }
        
        .product-card:hover .product-image {
            transform: scale(1.03);
            transition: transform 0.3s ease;
        }
        
        #product-page {
            background-color: rgba(255, 255, 255, 0.98);
            z-index: 1000;
        }
        
        @media (min-width: 768px) {
            #product-page {
                padding: 3rem;
            }
        }
    </style>
</head>
<body class="bg-white text-gray-900">
    <!-- Top Bar -->
    <div class="bg-black text-white text-sm py-2 px-4">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex space-x-4">
                <a href="#" class="hover:text-volt transition">Ajuda</a>
                <a href="#" class="hover:text-volt transition">Trocas e Devoluções</a>
                <a href="#" class="hover:text-volt transition">Entregas</a>
            </div>
            <div class="flex space-x-4">
                <a href="#" class="hover:text-volt transition"><i class="fas fa-store mr-1"></i> Lojas</a>
                <a href="#" class="hover:text-volt transition"><i class="fas fa-phone mr-1"></i> Contato</a>
            </div>
        </div>
    </div>
    
    <!-- Header -->
    <header class="py-6 px-4 border-b border-gray-200">
        <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
            <div class="flex items-center mb-4 md:mb-0">
                <a href="#" class="text-3xl font-bold volt-text">VOLT</a>
                <span class="ml-2 text-xs bg-black text-white px-2 py-1 rounded">BRASIL</span>
            </div>
            
            <div class="w-full md:w-auto flex-1 md:px-8">
                <div class="relative">
                    <input type="text" placeholder="Buscar produtos..." class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-volt focus:border-transparent">
                    <button class="absolute right-0 top-0 h-full px-4 text-gray-500 hover:text-volt">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            
            <div class="flex items-center space-x-6 mt-4 md:mt-0">
                <a href="#" class="hover:text-volt transition"><i class="far fa-user text-xl"></i></a>
                <a href="#" class="hover:text-volt transition"><i class="far fa-heart text-xl"></i></a>
                <a href="#" class="hover:text-volt transition relative">
                    <i class="fas fa-shopping-bag text-xl"></i>
                    <span class="absolute -top-2 -right-2 bg-volt text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
                </a>
            </div>
        </div>
    </header>
    
    <!-- Mobile Menu Button -->
    <button id="mobile-menu-button" class="md:hidden fixed top-6 right-4 z-50 bg-black text-white p-2 rounded-full">
        <div class="w-6 h-6 relative">
            <span class="block absolute h-0.5 w-6 bg-white transform transition duration-300 ease-in-out" id="bar1"></span>
            <span class="block absolute h-0.5 w-6 bg-white transform transition duration-300 ease-in-out mt-2" id="bar2"></span>
            <span class="block absolute h-0.5 w-6 bg-white transform transition duration-300 ease-in-out mt-4" id="bar3"></span>
        </div>
    </button>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="hidden fixed inset-0 bg-black bg-opacity-90 z-40 pt-20 px-6">
        <div class="flex flex-col items-center mb-8">
            <img src="https://via.placeholder.com/80" alt="Profile" class="rounded-full w-20 h-20 mb-2 border-2 border-volt">
            <span class="text-white font-medium">Olá, Cliente</span>
        </div>
        <nav class="flex flex-col space-y-4 text-white">
            <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-user mr-2"></i> Minha Conta</a>
            <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-box mr-2"></i> Meus Pedidos</a>
            <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-heart mr-2"></i> Favoritos</a>
            <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-question-circle mr-2"></i> Ajuda</a>
            <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-cog mr-2"></i> Configurações</a>
            <a href="#" class="py-2 text-volt hover:text-voltlight transition"><i class="fas fa-sign-out-alt mr-2"></i> Sair</a>
        </nav>
    </div>

    <!-- Navigation -->
    <nav class="bg-white py-4 px-4 border-b border-gray-200 sticky top-0 z-30" id="main-nav">
        <div class="container mx-auto">
            <div class="overflow-x-auto whitespace-nowrap py-2">
                <ul class="inline-flex space-x-1 md:space-x-6">
                    <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Novidades</a></li>
                    <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Oversized</a></li>
                    <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Masculino</a></li>
                    <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Feminino</a></li>
                    <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Outlet</a></li>
                    <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Basics</a></li>
                    <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Acessórios</a></li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- Hero Banner -->
    <div class="relative bg-black text-white pt-20">
        <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div>
        <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="VOLT Collection" class="w-full h-auto object-cover opacity-90">
        <div class="absolute inset-0 flex items-center z-20">
            <div class="container mx-auto px-6">
                <h1 class="text-4xl md:text-6xl font-bold mb-4">COLEÇÃO <span class="volt-text">ELÉTRICA</span></h1>
                <p class="text-xl md:text-2xl mb-8 max-w-lg">Camisas oversized que carregam sua personalidade com alta voltagem.</p>
                <a href="#" class="inline-block bg-volt hover:bg-voltlight text-white font-bold py-3 px-8 rounded-full transition hover-effect">COMPRE AGORA</a>
            </div>
        </div>
    </div>
    
    <!-- Featured Categories -->
    <div class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 electric-line">CATEGORIAS EM DESTAQUE</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
                    <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Camisetas Oversized" class="w-full h-64 object-cover group-hover:opacity-90 transition">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <h3 class="text-white text-xl font-bold">CAMISETAS OVERSIZED</h3>
                    </div>
                </a>
                <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
                    <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Moletons" class="w-full h-64 object-cover group-hover:opacity-90 transition">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <h3 class="text-white text-xl font-bold">MOLETONS</h3>
                    </div>
                </a>
                <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
                    <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Shorts" class="w-full h-64 object-cover group-hover:opacity-90 transition">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <h3 class="text-white text-xl font-bold">SHORTS</h3>
                    </div>
                </a>
                <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
                    <img src="https://images.unsplash.com/photo-1594631252845-29fc4cc8cde9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Acessórios" class="w-full h-64 object-cover group-hover:opacity-90 transition">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <h3 class="text-white text-xl font-bold">ACESSÓRIOS</h3>
                    </div>
                </a>
            </div>
        </div>
    </div>
    
    <!-- New Arrivals -->
    <div class="py-12">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 electric-line">LANÇAMENTOS</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <!-- Product 1 -->
                <div class="product-card group">
                    <div class="relative overflow-hidden rounded-lg mb-4">
                        <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Camiseta VOLT" class="w-full h-80 object-cover product-image transition">
                        <div class="absolute top-4 right-4">
                            <button class="bg-white rounded-full p-2 text-gray-800 hover:text-volt transition">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 group-hover:opacity-100 transition">
                            <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition">COMPRAR</a>
                        </div>
                    </div>
                    <h3 class="font-medium">CAMISETA OVERSIZED VOLT</h3>
                    <div class="flex justify-between items-center mt-1">
                        <span class="text-gray-600">Preto</span>
                        <span class="font-bold">R$ 129,90</span>
                    </div>
                </div>
                
                <!-- Product 2 -->
                <div class="product-card group">
                    <div class="relative overflow-hidden rounded-lg mb-4">
                        <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Moletom VOLT" class="w-full h-80 object-cover product-image transition">
                        <div class="absolute top-4 right-4">
                            <button class="bg-white rounded-full p-2 text-gray-800 hover:text-volt transition">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 group-hover:opacity-100 transition">
                            <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition">COMPRAR</a>
                        </div>
                    </div>
                    <h3 class="font-medium">MOLETON OVERSIZED VOLT</h3>
                    <div class="flex justify-between items-center mt-1">
                        <span class="text-gray-600">Cinza</span>
                        <span class="font-bold">R$ 199,90</span>
                    </div>
                </div>
                
                <!-- Product 3 -->
                <div class="product-card group">
                    <div class="relative overflow-hidden rounded-lg mb-4">
                        <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Camiseta VOLT" class="w-full h-80 object-cover product-image transition">
                        <div class="absolute top-4 right-4">
                            <button class="bg-white rounded-full p-2 text-gray-800 hover:text-volt transition">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 group-hover:opacity-100 transition">
                            <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition">COMPRAR</a>
                        </div>
                    </div>
                    <h3 class="font-medium">CAMISETA OVERSIZED VOLT</h3>
                    <div class="flex justify-between items-center mt-1">
                        <span class="text-gray-600">Branco</span>
                        <span class="font-bold">R$ 129,90</span>
                    </div>
                </div>
                
                <!-- Product 4 -->
                <div class="product-card group">
                    <div class="relative overflow-hidden rounded-lg mb-4">
                        <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Short VOLT" class="w-full h-80 object-cover product-image transition">
                        <div class="absolute top-4 right-4">
                            <button class="bg-white rounded-full p-2 text-gray-800 hover:text-volt transition">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 group-hover:opacity-100 transition">
                            <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition">COMPRAR</a>
                        </div>
                    </div>
                    <h3 class="font-medium">SHORT VOLT</h3>
                    <div class="flex justify-between items-center mt-1">
                        <span class="text-gray-600">Preto</span>
                        <span class="font-bold">R$ 99,90</span>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-10">
                <a href="#" class="inline-block border-2 border-black hover:bg-black hover:text-white font-bold py-3 px-8 rounded-full transition">VER TODOS</a>
            </div>
        </div>
    </div>
    
    <!-- Banner -->
    <div class="py-12 bg-gray-100">
        <div class="container mx-auto px-4">
            <div class="bg-white rounded-lg overflow-hidden shadow-lg">
                <div class="md:flex">
                    <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                        <h2 class="text-3xl font-bold mb-4">SEJA UM <span class="volt-text">MEMBRO VOLT</span></h2>
                        <p class="text-gray-600 mb-6">Cadastre-se e ganhe 10% OFF na primeira compra, além de receber ofertas exclusivas e acesso antecipado a novos lançamentos.</p>
                        <div class="flex max-w-md">
                            <input type="email" placeholder="Seu e-mail" class="flex-1 py-2 px-4 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-volt focus:border-transparent">
                            <button class="bg-volt hover:bg-voltlight text-white font-bold py-2 px-4 rounded-r-lg transition text-sm">CADASTRAR</button>
                        </div>
                    </div>
                    <div class="md:w-1/2">
                        <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Membro VOLT" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Instagram -->
    <div class="py-12">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center justify-between mb-8">
                <h2 class="text-3xl font-bold electric-line">SIGA A <span class="volt-text">@VOLTBRASIL</span></h2>
                <a href="#" class="mt-4 md:mt-0 inline-flex items-center text-black hover:text-volt font-medium">
                    <i class="fab fa-instagram text-2xl mr-2"></i> VER MAIS NO INSTAGRAM
                </a>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
                    <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Instagram 1" class="w-full h-64 object-cover group-hover:opacity-90 transition">
                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition">
                        <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i>
                    </div>
                </a>
                <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
                    <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Instagram 2" class="w-full h-64 object-cover group-hover:opacity-90 transition">
                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition">
                        <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i>
                    </div>
                </a>
                <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
                    <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Instagram 3" class="w-full h-64 object-cover group-hover:opacity-90 transition">
                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition">
                        <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i>
                    </div>
                </a>
                <a href="#" class="group relative overflow-hidden rounded-lg hover-effect">
                    <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Instagram 4" class="w-full h-64 object-cover group-hover:opacity-90 transition">
                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition">
                        <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i>
                    </div>
                </a>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <footer class="bg-black text-white pt-12 pb-6">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <h3 class="text-xl font-bold mb-4 volt-text">VOLT</h3>
                    <p class="mb-4">Camisas oversized premium com estilo único e conforto inigualável.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">INSTITUCIONAL</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-volt transition">Sobre a VOLT</a></li>
                        <li><a href="#" class="hover:text-volt transition">Trabalhe Conosco</a></li>
                        <li><a href="#" class="hover:text-volt transition">Política de Privacidade</a></li>
                        <li><a href="#" class="hover:text-volt transition">Termos e Condições</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">AJUDA</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-volt transition">Dúvidas Frequentes</a></li>
                        <li><a href="#" class="hover:text-volt transition">Trocas e Devoluções</a></li>
                        <li><a href="#" class="hover:text-volt transition">Entregas</a></li>
                        <li><a href="#" class="hover:text-volt transition">Meus Pedidos</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">CONTATO</h3>
                    <ul class="space-y-2">
                        <li><i class="fas fa-phone-alt mr-2"></i> (11) 4004-0040</li>
                        <li><i class="fas fa-envelope mr-2"></i> contato@voltbrasil.com.br</li>
                        <li><i class="fas fa-map-marker-alt mr-2"></i> São Paulo - SP</li>
                        <li class="mt-4">
                            <div class="flex max-w-xs">
                                <input type="email" placeholder="Seu e-mail" class="flex-1 py-1 px-3 bg-gray-800 text-white rounded-l focus:outline-none text-sm">
                                <button class="bg-volt hover:bg-voltlight text-white py-1 px-3 rounded-r transition text-sm">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-6">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-400 mb-4 md:mb-0">© 2023 VOLT Brasil. Todos os direitos reservados.</p>
                    <div class="flex space-x-4">
                        <img src="https://via.placeholder.com/40x25" alt="Visa" class="h-6">
                        <img src="https://via.placeholder.com/40x25" alt="Mastercard" class="h-6">
                        <img src="https://via.placeholder.com/40x25" alt="American Express" class="h-6">
                        <img src="https://via.placeholder.com/40x25" alt="Pix" class="h-6">
                    </div>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- WhatsApp Float -->
    <a href="#" class="fixed bottom-6 right-6 bg-green-500 text-white rounded-full p-4 shadow-lg hover:bg-green-600 transition">
        <i class="fab fa-whatsapp text-2xl"></i>
    </a>

    <script>
        // Sticky navigation handler
        window.addEventListener('scroll', function() {
            const nav = document.getElementById('main-nav');
            const navHeight = nav.offsetHeight;
            
            if (window.pageYOffset > navHeight) {
                nav.classList.add('sticky-nav-active');
                document.body.style.paddingTop = navHeight + 'px';
            } else {
                nav.classList.remove('sticky-nav-active');
                document.body.style.paddingTop = '0';
            }
        });

        // Mobile menu toggle
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const bars = [
            document.getElementById('bar1'),
            document.getElementById('bar2'),
            document.getElementById('bar3')
        ];

        let menuOpen = false;
        
        mobileMenuButton.addEventListener('click', () => {
            menuOpen = !menuOpen;
            
            if (menuOpen) {
                mobileMenu.classList.remove('hidden');
                bars[0].style.transform = 'translateY(6px) rotate(45deg)';
                bars[1].style.opacity = '0';
                bars[2].style.transform = 'translateY(-6px) rotate(-45deg)';
            } else {
                mobileMenu.classList.add('hidden');
                bars[0].style.transform = '';
                bars[1].style.opacity = '';
                bars[2].style.transform = '';
            }
        });

        function openProductPage(product) {
            document.getElementById('product-page').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            
            // Populate product data
            document.getElementById('product-title').textContent = product.title;
            document.getElementById('product-price').textContent = product.price;
            document.getElementById('product-description').textContent = product.description;
            document.getElementById('product-main-image').src = product.image;
        }
        
        function closeProductPage() {
            document.getElementById('product-page').classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        function closeQuantityWarning() {
            document.getElementById('quantity-warning').classList.add('hidden');
        }

        function showQuantityWarning() {
            const warningDiv = document.getElementById('quantity-warning');
            warningDiv.classList.remove('hidden');
            
            // Auto-hide after 5 seconds
            setTimeout(() => {
                warningDiv.classList.add('hidden');
            }, 5000);
        }
        
        // Add click handlers to all "COMPRAR" buttons
        document.querySelectorAll('.product-card a[href="#"]').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const productCard = this.closest('.product-card');
                const product = {
                    title: productCard.querySelector('h3').textContent,
                    price: productCard.querySelector('.font-bold:last-child').textContent,
                    description: 'Camiseta oversized premium com estampa exclusiva VOLT. Modelagem confortável e moderna, perfeita para looks despojados.',
                    image: productCard.querySelector('.product-image').src
                };
                openProductPage(product);
                // Initialize quantity controls
                const decreaseBtn = document.getElementById('decrease-qty');
                const increaseBtn = document.getElementById('increase-qty');
                const quantityInput = document.getElementById('quantity');
                const warningDiv = document.getElementById('quantity-warning');
                
                // Button controls
                decreaseBtn.addEventListener('click', () => {
                    let quantity = parseInt(quantityInput.value);
                    if (quantity > 1) {
                        quantityInput.value = quantity - 1;
                    }
                });
                
                increaseBtn.addEventListener('click', () => {
                    let quantity = parseInt(quantityInput.value);
                    if (quantity < 100) {
                        quantityInput.value = quantity + 1;
                        // Show warning when reaching 100
                        if (quantity + 1 === 100) {
                            showQuantityWarning();
                        }
                    } else {
                        showQuantityWarning();
                    }
                });
                
                // Input validation
                quantityInput.addEventListener('input', () => {
                    let quantity = parseInt(quantityInput.value);
                    
                    if (isNaN(quantity)) {
                        return; // Allow empty input
                    }
                    
                    if (quantity > 100) {
                        quantityInput.value = 100;
                        showQuantityWarning();
                    } else if (quantity < 1) {
                        quantityInput.value = 1;
                    }
                    
                    // Show warning if quantity is exactly 100
                    if (quantity === 100) {
                        showQuantityWarning();
                    }
                });
                
                let warningTimer;
                
                function showQuantityWarning() {
                    // Clear any existing timer
                    if (warningTimer) {
                        clearInterval(warningTimer);
                    }
                    
                    warningDiv.classList.remove('hidden');
                    let timeLeft = 7;
                    const timer = document.getElementById('warning-timer');
                    timer.style.width = '100%';
                    
                    warningTimer = setInterval(() => {
                        timeLeft -= 0.1;
                        timer.style.width = `${(timeLeft / 7) * 100}%`;
                        
                        if (timeLeft <= 0) {
                            clearInterval(warningTimer);
                            warningDiv.classList.add('hidden');
                        }
                    }, 100);
                }
            });
        });
    </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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Paolo2000p/volt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Antoli121/good" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>