Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KicksHub - Loja de Tênis 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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| } | |
| .brand-nike { | |
| background-color: #f1f1f1; | |
| color: #111; | |
| } | |
| .brand-adidas { | |
| background-color: #000; | |
| color: #fff; | |
| } | |
| .brand-mizuno { | |
| background-color: #0038a8; | |
| color: #fff; | |
| } | |
| .sneaker-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .sneaker-card { | |
| transition: all 0.3s ease; | |
| } | |
| .cart-item { | |
| transition: all 0.2s ease; | |
| } | |
| .cart-item:hover { | |
| background-color: #f1f5f9; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header/Navbar --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shoe-prints text-2xl text-indigo-600"></i> | |
| <h1 class="text-xl font-bold text-gray-800">Kicks<span class="text-indigo-600">Hub</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Início</a> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-700 hover:text-indigo-600 font-medium flex items-center"> | |
| Marcas <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-1 w-48"> | |
| <a href="#nike" class="block px-4 py-2 hover:bg-gray-100">Nike</a> | |
| <a href="#adidas" class="block px-4 py-2 hover:bg-gray-100">Adidas</a> | |
| <a href="#mizuno" class="block px-4 py-2 hover:bg-gray-100">Mizuno</a> | |
| </div> | |
| </div> | |
| <a href="#destaques" class="text-gray-700 hover:text-indigo-600 font-medium">Destaques</a> | |
| <a href="#sobre" class="text-gray-700 hover:text-indigo-600 font-medium">Sobre</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button id="cart-button" class="relative text-gray-700 hover:text-indigo-600"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| <button class="md:hidden text-gray-700" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t py-2 px-4"> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Início</a> | |
| <div class="py-2"> | |
| <button class="flex items-center justify-between w-full text-gray-700 hover:text-indigo-600"> | |
| Marcas <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="pl-4 hidden" id="mobile-brands"> | |
| <a href="#nike" class="block py-2 text-gray-700 hover:text-indigo-600">Nike</a> | |
| <a href="#adidas" class="block py-2 text-gray-700 hover:text-indigo-600">Adidas</a> | |
| <a href="#mizuno" class="block py-2 text-gray-700 hover:text-indigo-600">Mizuno</a> | |
| </div> | |
| </div> | |
| <a href="#destaques" class="block py-2 text-gray-700 hover:text-indigo-600">Destaques</a> | |
| <a href="#sobre" class="block py-2 text-gray-700 hover:text-indigo-600">Sobre</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Os melhores tênis das marcas premium</h2> | |
| <p class="text-lg text-gray-300 mb-6">Encontre o par perfeito para seu estilo e desempenho. Coleções exclusivas de Nike, Adidas e Mizuno.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#nike" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium">Comprar Agora</a> | |
| <a href="#destaques" class="bg-white hover:bg-gray-100 text-gray-800 px-6 py-3 rounded-lg font-medium">Ver Destaques</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/skwgyqrbfzhu6uyeh0gg/air-force-1-07-mens-shoes-jBrhbr.png" alt="Tênis Nike Air Force 1" class="w-full max-w-md transform rotate-6 hover:rotate-0 transition-transform duration-500"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Brands Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Nossas Marcas</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div id="nike" class="brand-nike p-8 rounded-xl flex flex-col items-center"> | |
| <img src="https://logos-world.net/wp-content/uploads/2020/04/Nike-Logo.png" alt="Nike Logo" class="h-16 mb-4"> | |
| <h3 class="text-2xl font-bold mb-4">Nike</h3> | |
| <p class="text-center mb-6">Inovação e desempenho em cada passo. Descubra os modelos mais icônicos e tecnologias revolucionárias.</p> | |
| <a href="#nike-products" class="bg-black hover:bg-gray-800 text-white px-6 py-2 rounded-lg font-medium">Ver Coleção</a> | |
| </div> | |
| <div id="adidas" class="brand-adidas p-8 rounded-xl flex flex-col items-center"> | |
| <img src="https://logos-world.net/wp-content/uploads/2020/04/Adidas-Logo.png" alt="Adidas Logo" class="h-16 mb-4"> | |
| <h3 class="text-2xl font-bold mb-4">Adidas</h3> | |
| <p class="text-center mb-6">Tradição e modernidade se encontram. Conforto e estilo para todas as ocasiões.</p> | |
| <a href="#adidas-products" class="bg-white hover:bg-gray-100 text-black px-6 py-2 rounded-lg font-medium">Ver Coleção</a> | |
| </div> | |
| <div id="mizuno" class="brand-mizuno p-8 rounded-xl flex flex-col items-center"> | |
| <img src="https://logos-world.net/wp-content/uploads/2020/07/Mizuno-Logo.png" alt="Mizuno Logo" class="h-16 mb-4"> | |
| <h3 class="text-2xl font-bold mb-4">Mizuno</h3> | |
| <p class="text-center mb-6">Tecnologia japonesa para atletas exigentes. Qualidade incomparável para seu desempenho máximo.</p> | |
| <a href="#mizuno-products" class="bg-white hover:bg-gray-100 text-blue-900 px-6 py-2 rounded-lg font-medium">Ver Coleção</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section id="destaques" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Destaques</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/skwgyqrbfzhu6uyeh0gg/air-force-1-07-mens-shoes-jBrhbr.png" alt="Nike Air Force 1" class="w-full h-64 object-contain"> | |
| <span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">Novidade</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Nike Air Force 1</h3> | |
| <p class="text-gray-600 text-sm mb-2">Tênis casual clássico</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 799,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="1" data-name="Nike Air Force 1" data-price="799.90" data-image="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/skwgyqrbfzhu6uyeh0gg/air-force-1-07-mens-shoes-jBrhbr.png"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/2b9d1a7a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_Ultraboost_Light_Preto_GW9089_01_standard.jpg" alt="Adidas Ultraboost Light" class="w-full h-64 object-contain"> | |
| <span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">Mais Vendido</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Adidas Ultraboost Light</h3> | |
| <p class="text-gray-600 text-sm mb-2">Tênis de corrida premium</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 1.199,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="2" data-name="Adidas Ultraboost Light" data-price="1199.90" data-image="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/2b9d1a7a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_Ultraboost_Light_Preto_GW9089_01_standard.jpg"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://mizunobrasil.vtexassets.com/arquivos/ids/216198-800-800?v=638150140365370000&width=800&height=800&aspect=true" alt="Mizuno Wave Rider 26" class="w-full h-64 object-contain"> | |
| <span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">Lançamento</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Mizuno Wave Rider 26</h3> | |
| <p class="text-gray-600 text-sm mb-2">Tênis para corrida de longa distância</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 899,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="3" data-name="Mizuno Wave Rider 26" data-price="899.90" data-image="https://mizunobrasil.vtexassets.com/arquivos/ids/216198-800-800?v=638150140365370000&width=800&height=800&aspect=true"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/af53d53d-561f-4ff6-8ef6-c4d899675116/air-jordan-1-mid-se-mens-shoes-5MpglF.png" alt="Air Jordan 1 Mid SE" class="w-full h-64 object-contain"> | |
| <span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded-full">Edição Limitada</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Air Jordan 1 Mid SE</h3> | |
| <p class="text-gray-600 text-sm mb-2">Tênis de basquete icônico</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 1.099,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="4" data-name="Air Jordan 1 Mid SE" data-price="1099.90" data-image="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/af53d53d-561f-4ff6-8ef6-c4d899675116/air-jordan-1-mid-se-mens-shoes-5MpglF.png"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Nike Products --> | |
| <section id="nike-products" class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Nike</h2> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Ver todos</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Nike Product 1 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/1f5a3ce6-9196-4171-8e81-46c5e5d750d3/air-max-270-mens-shoes-KkLcGR.png" alt="Nike Air Max 270" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Nike Air Max 270</h3> | |
| <p class="text-gray-600 text-sm mb-2">Amortecimento máximo</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 999,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="5" data-name="Nike Air Max 270" data-price="999.90" data-image="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/1f5a3ce6-9196-4171-8e81-46c5e5d750d3/air-max-270-mens-shoes-KkLcGR.png"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nike Product 2 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/4f37fca8-6bce-43e7-ad07-f57ae3c13142/air-vapormax-plus-mens-shoes-nC0dzF.png" alt="Nike Air VaporMax Plus" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Nike Air VaporMax Plus</h3> | |
| <p class="text-gray-600 text-sm mb-2">Design futurista</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 1.299,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="6" data-name="Nike Air VaporMax Plus" data-price="1299.90" data-image="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/4f37fca8-6bce-43e7-ad07-f57ae3c13142/air-vapormax-plus-mens-shoes-nC0dzF.png"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nike Product 3 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/af53d53d-561f-4ff6-8ef6-c4d899675116/air-jordan-1-mid-se-mens-shoes-5MpglF.png" alt="Air Jordan 1 Mid SE" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Air Jordan 1 Mid SE</h3> | |
| <p class="text-gray-600 text-sm mb-2">Edição especial</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 1.099,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="7" data-name="Air Jordan 1 Mid SE" data-price="1099.90" data-image="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/af53d53d-561f-4ff6-8ef6-c4d899675116/air-jordan-1-mid-se-mens-shoes-5MpglF.png"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nike Product 4 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/af5f6e3f-6d0a-4c1e-8f0b-7b0a8a1b1b1b/air-max-90-mens-shoes-5MpglF.png" alt="Nike Air Max 90" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Nike Air Max 90</h3> | |
| <p class="text-gray-600 text-sm mb-2">Clássico atemporal</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 899,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="8" data-name="Nike Air Max 90" data-price="899.90" data-image="https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/af5f6e3f-6d0a-4c1e-8f0b-7b0a8a1b1b1b/air-max-90-mens-shoes-5MpglF.png"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Adidas Products --> | |
| <section id="adidas-products" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Adidas</h2> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Ver todos</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Adidas Product 1 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/2b9d1a7a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_Ultraboost_Light_Preto_GW9089_01_standard.jpg" alt="Adidas Ultraboost Light" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Adidas Ultraboost Light</h3> | |
| <p class="text-gray-600 text-sm mb-2">Corrida premium</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 1.199,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="9" data-name="Adidas Ultraboost Light" data-price="1199.90" data-image="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/2b9d1a7a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_Ultraboost_Light_Preto_GW9089_01_standard.jpg"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Adidas Product 2 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/6f1b6b3a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_Stan_Smith_Branco_FX5501_01_standard.jpg" alt="Adidas Stan Smith" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Adidas Stan Smith</h3> | |
| <p class="text-gray-600 text-sm mb-2">Ícone do tênis casual</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 599,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="10" data-name="Adidas Stan Smith" data-price="599.90" data-image="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/6f1b6b3a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_Stan_Smith_Branco_FX5501_01_standard.jpg"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Adidas Product 3 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/6f1b6b3a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_NMD_R1_Preto_FY6860_01_standard.jpg" alt="Adidas NMD R1" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Adidas NMD R1</h3> | |
| <p class="text-gray-600 text-sm mb-2">Streetwear moderno</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 899,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="11" data-name="Adidas NMD R1" data-price="899.90" data-image="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/6f1b6b3a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_NMD_R1_Preto_FY6860_01_standard.jpg"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Adidas Product 4 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/6f1b6b3a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_Superstar_Branco_FV3284_01_standard.jpg" alt="Adidas Superstar" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Adidas Superstar</h3> | |
| <p class="text-gray-600 text-sm mb-2">Clássico do hip-hop</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 549,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="12" data-name="Adidas Superstar" data-price="549.90" data-image="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/6f1b6b3a3e6e4b1a8fafaeca00fb97f7_9366/Tenis_Superstar_Branco_FV3284_01_standard.jpg"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mizuno Products --> | |
| <section id="mizuno-products" class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Mizuno</h2> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Ver todos</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Mizuno Product 1 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://mizunobrasil.vtexassets.com/arquivos/ids/216198-800-800?v=638150140365370000&width=800&height=800&aspect=true" alt="Mizuno Wave Rider 26" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Mizuno Wave Rider 26</h3> | |
| <p class="text-gray-600 text-sm mb-2">Corrida de longa distância</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 899,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="13" data-name="Mizuno Wave Rider 26" data-price="899.90" data-image="https://mizunobrasil.vtexassets.com/arquivos/ids/216198-800-800?v=638150140365370000&width=800&height=800&aspect=true"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mizuno Product 2 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://mizunobrasil.vtexassets.com/arquivos/ids/216200-800-800?v=638150140370400000&width=800&height=800&aspect=true" alt="Mizuno Wave Sky 6" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Mizuno Wave Sky 6</h3> | |
| <p class="text-gray-600 text-sm mb-2">Amortecimento premium</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 1.099,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="14" data-name="Mizuno Wave Sky 6" data-price="1099.90" data-image="https://mizunobrasil.vtexassets.com/arquivos/ids/216200-800-800?v=638150140370400000&width=800&height=800&aspect=true"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mizuno Product 3 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://mizunobrasil.vtexassets.com/arquivos/ids/216202-800-800?v=638150140375430000&width=800&height=800&aspect=true" alt="Mizuno Wave Inspire 18" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Mizuno Wave Inspire 18</h3> | |
| <p class="text-gray-600 text-sm mb-2">Estabilidade para corredores</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 849,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="15" data-name="Mizuno Wave Inspire 18" data-price="849.90" data-image="https://mizunobrasil.vtexassets.com/arquivos/ids/216202-800-800?v=638150140375430000&width=800&height=800&aspect=true"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mizuno Product 4 --> | |
| <div class="sneaker-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://mizunobrasil.vtexassets.com/arquivos/ids/216204-800-800?v=638150140380470000&width=800&height=800&aspect=true" alt="Mizuno Wave Rebellion" class="w-full h-64 object-contain"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Mizuno Wave Rebellion</h3> | |
| <p class="text-gray-600 text-sm mb-2">Performance de elite</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">R$ 1.299,90</span> | |
| <button class="add-to-cart bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm" data-id="16" data-name="Mizuno Wave Rebellion" data-price="1299.90" data-image="https://mizunobrasil.vtexassets.com/arquivos/ids/216204-800-800?v=638150140380470000&width=800&height=800&aspect=true"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="sobre" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="Loja de tênis" class="rounded-xl shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h2 class="text-3xl font-bold mb-6">Sobre a KicksHub</h2> | |
| <p class="text-gray-600 mb-4"> | |
| Fundada em 2023, a KicksHub nasceu da paixão por tênis e da vontade de oferecer os melhores produtos das marcas mais icônicas do mercado. Nossa missão é conectar você aos tênis que combinam com seu estilo e necessidades. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| Trabalhamos diretamente com Nike, Adidas e Mizuno para garantir produtos autênticos, com a qualidade e desempenho que você merece. Cada par em nosso catálogo foi cuidadosamente selecionado por nossa equipe de especialistas. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex-1"> | |
| <h3 class="font-bold text-indigo-600 mb-2">Frete Grátis</h3> | |
| <p class="text-sm text-gray-600">Para compras acima de R$ 300 em todo o Brasil</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex-1"> | |
| <h3 class="font-bold text-indigo-600 mb-2">Garantia</h3> | |
| <p class="text-sm text-gray-600">30 dias para trocas e devoluções</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Receba nossas novidades</h2> | |
| <p class="max-w-2xl mx-auto mb-6">Cadastre-se para receber promoções exclusivas, lançamentos e conteúdos sobre o mundo dos tênis.</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Seu melhor e-mail" class="flex-1 px-4 py-3 rounded-l-lg focus:outline-none text-gray-900"> | |
| <button class="bg-indigo-800 hover:bg-indigo-900 px-6 py-3 rounded-r-lg font-medium">Cadastrar</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-shoe-prints text-2xl text-indigo-600"></i> | |
| <h3 class="text-xl font-bold">Kicks<span class="text-indigo-600">Hub</span></h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">A melhor seleção de tênis premium para você.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Links Úteis</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Sobre Nós</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Trabalhe Conosco</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Seja um Revendedor</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Ajuda</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Política de Trocas</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Formas de Pagamento</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Frete e Entrega</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Contato</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-indigo-600"></i> <span class="text-gray-400">Av. Paulista, 1000 - São Paulo/SP</span></li> | |
| <li class="flex items-center"><i class="fas fa-phone-alt mr-2 text-indigo-600"></i> <span class="text-gray-400">(11) 4002-8922</span></li> | |
| <li class="flex items-center"><i class="fas fa-envelope mr-2 text-indigo-600"></i> <span class="text-gray-400">contato@kickshub.com</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 KicksHub. Todos os direitos reservados.</p> | |
| <div class="flex space-x-6"> | |
| <img src="https://logodownload.org/wp-content/uploads/2014/10/visa-logo-1.png" alt="Visa" class="h-8"> | |
| <img src="https://logodownload.org/wp-content/uploads/2014/10/mastercard-logo-1.png" alt="Mastercard" class="h-8"> | |
| <img src="https://logodownload.org/wp-content/uploads/2014/10/amex-american-express-logo-1.png" alt="American Express" class="h-8"> | |
| <img src="https://logodownload.org/wp-content/uploads/2014/10/boleto-logo-1.png" alt="Boleto" class="h-8"> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Shopping Cart Sidebar --> | |
| <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">Seu Carrinho</h3> | |
| <button id="close-cart" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="cart-items" class="space-y-4 mb-6"> | |
| <!-- Cart items will be added here dynamically --> | |
| <p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4 mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Subtotal</span> | |
| <span id="cart-subtotal" class="font-bold">R$ 0,00</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Frete</span> | |
| <span id="cart-shipping" class="font-bold">R$ 0,00</span> | |
| </div> | |
| <div class="flex justify-between text-lg font-bold"> | |
| <span>Total</span> | |
| <span id="cart-total">R$ 0,00</span> | |
| </div> | |
| </div> | |
| <button id="checkout-button" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| Finalizar Compra | |
| </button> | |
| <div class="mt-4 text-center"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm">Continuar comprando</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cart Overlay --> | |
| <div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const mobileBrandsButton = document.querySelector('#mobile-menu button'); | |
| const mobileBrands = document.getElementById('mobile-brands'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| mobileBrandsButton.addEventListener('click', () => { | |
| mobileBrands.classList.toggle('hidden'); | |
| }); | |
| // Cart Functionality | |
| const cartButton = document.getElementById('cart-button'); | |
| const cartSidebar = document.getElementById('cart-sidebar'); | |
| const cartOverlay = document.getElementById('cart-overlay'); | |
| const closeCart = document.getElementById('close-cart'); | |
| const checkoutButton = document.getElementById('checkout-button'); | |
| let cart = []; | |
| // Toggle Cart Sidebar | |
| cartButton.addEventListener('click', () => { | |
| cartSidebar.classList.remove('translate-x-full'); | |
| cartOverlay.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeCart.addEventListener('click', () => { | |
| cartSidebar.classList.add('translate-x-full'); | |
| cartOverlay.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| cartOverlay.addEventListener('click', () => { | |
| cartSidebar.classList.add('translate-x-full'); | |
| cartOverlay.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Add to Cart | |
| const addToCartButtons = document.querySelectorAll('.add-to-cart'); | |
| addToCartButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const id = button.getAttribute('data-id'); | |
| const name = button.getAttribute('data-name'); | |
| const price = parseFloat(button.getAttribute('data-price')); | |
| const image = button.getAttribute('data-image'); | |
| // Check if item already exists in cart | |
| const existingItem = cart.find(item => item.id === id); | |
| if (existingItem) { | |
| existingItem.quantity += 1; | |
| } else { | |
| cart.push({ | |
| id, | |
| name, | |
| price, | |
| image, | |
| quantity: 1 | |
| }); | |
| } | |
| updateCart(); | |
| // Show cart sidebar | |
| cartSidebar.classList.remove('translate-x-full'); | |
| cartOverlay.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| // Add animation to button | |
| button.innerHTML = '<i class="fas fa-check mr-1"></i> Adicionado'; | |
| button.classList.remove('bg-indigo-600', 'hover:bg-indigo-700'); | |
| button.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| setTimeout(() => { | |
| button.innerHTML = '<i class="fas fa-cart-plus mr-1"></i> Add'; | |
| button.classList.remove('bg-green-500', 'hover:bg-green-600'); | |
| button.classList.add('bg-indigo-600', 'hover:bg-indigo-700'); | |
| }, 2000); | |
| }); | |
| }); | |
| // Update Cart | |
| function updateCart() { | |
| const cartItemsContainer = document.getElementById('cart-items'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const cartSubtotal = document.getElementById('cart-subtotal'); | |
| const cartTotal = document.getElementById('cart-total'); | |
| // Update cart count | |
| const totalItems = cart.reduce((total, item) => total + item.quantity, 0); | |
| cartCount.textContent = totalItems; | |
| // Update cart items | |
| if (cart.length === 0) { | |
| cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>'; | |
| checkoutButton.disabled = true; | |
| } else { | |
| cartItemsContainer.innerHTML = ''; | |
| let subtotal = 0; | |
| cart.forEach(item => { | |
| const itemTotal = item.price * item.quantity; | |
| subtotal += itemTotal; | |
| const cartItem = document.createElement('div'); | |
| cartItem.className = 'cart-item flex items-start p-4 border border-gray-200 rounded-lg'; | |
| cartItem.innerHTML = ` | |
| <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-contain mr-4"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">${item.name}</h4> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="flex items-center"> | |
| <button class="decrease-quantity text-gray-500 hover:text-indigo-600 px-2" data-id="${item.id}"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| <span class="quantity mx-2">${item.quantity}</span> | |
| <button class="increase-quantity text-gray-500 hover:text-indigo-600 px-2" data-id="${item.id}"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| </div> | |
| <span class="font-bold">R$ ${itemTotal.toFixed(2)}</span> | |
| </div> | |
| </div> | |
| <button class="remove-item text-gray-400 hover:text-red-500 ml-2" data-id="${item.id}"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| `; | |
| cartItemsContainer.appendChild(cartItem); | |
| }); | |
| // Calculate shipping (free for orders over 300) | |
| const shipping = subtotal >= 300 ? 0 : 20; | |
| // Update totals | |
| cartSubtotal.textContent = `R$ ${subtotal.toFixed(2)}`; | |
| document.getElementById('cart-shipping').textContent = shipping === 0 ? 'Grátis' : `R$ ${shipping.toFixed(2)}`; | |
| cartTotal.textContent = `R$ ${(subtotal + shipping).toFixed(2)}`; | |
| checkoutButton.disabled = false; | |
| // Add event listeners to quantity buttons | |
| document.querySelectorAll('.increase-quantity').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const id = e.target.closest('button').getAttribute('data-id'); | |
| const item = cart.find(item => item.id === id); | |
| if (item) { | |
| item.quantity += 1; | |
| updateCart(); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.decrease-quantity').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const id = e.target.closest('button').getAttribute('data-id'); | |
| const item = cart.find(item => item.id === id); | |
| if (item && item.quantity > 1) { | |
| item.quantity -= 1; | |
| updateCart(); | |
| } | |
| }); | |
| }); | |
| // Add event listeners to remove buttons | |
| document.querySelectorAll('.remove-item').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const id = e.target.closest('button').getAttribute('data-id'); | |
| cart = cart.filter(item => item.id !== id); | |
| updateCart(); | |
| }); | |
| }); | |
| } | |
| } | |
| // Checkout | |
| checkoutButton.addEventListener('click', () => { | |
| alert('Compra finalizada com sucesso! Obrigado por comprar na KicksHub.'); | |
| cart = []; | |
| updateCart(); | |
| cartSidebar.classList.add('translate-x-full'); | |
| cartOverlay.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| </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=ronisousa/loja-virtual" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |