no site atual, possui 3 colunas, gostaria de por a variação acima do botão de comprar de cada produto, a variação de ver do preço atual dos 3 anúncios acompanha 1 mes de app, ai fica na variação "1 Mês de App" depois coloque a opção de "6 Meses de app" e "12 Meses de App" na qual 6 meses deve ter o valor atual com adicional de 99,00 e de 1 ano o adicional 219,00, mostre apenas na variação com nome como mostrei e o valor total, essa escolhe deve influenciar o link do botão comprar - Initial Deployment
be18ccc verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Smartbox - Aparelhos 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> | |
| .product-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .buy-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .buy-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .carousel { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .carousel-inner { | |
| display: flex; | |
| transition: transform 0.5s ease; | |
| } | |
| .carousel-item { | |
| min-width: 100%; | |
| } | |
| .carousel-control { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background-color: rgba(0, 0, 0, 0.5); | |
| color: white; | |
| border: none; | |
| padding: 8px; | |
| cursor: pointer; | |
| border-radius: 50%; | |
| z-index: 10; | |
| } | |
| .carousel-control.prev { | |
| left: 10px; | |
| } | |
| .carousel-control.next { | |
| right: 10px; | |
| } | |
| .carousel-indicators { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 10px; | |
| } | |
| .carousel-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: rgba(0, 0, 0, 0.3); | |
| margin: 0 5px; | |
| cursor: pointer; | |
| } | |
| .carousel-indicator.active { | |
| background-color: #ef4444; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <h1 class="text-4xl font-bold text-center text-black mb-2">Smartbox Premium</h1> | |
| <p class="text-center text-gray-700 mb-12">Tecnologia inteligente para o seu lar</p> | |
| <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Produto 1 --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden p-6 flex flex-col"> | |
| <div class="bg-gray-100 rounded-lg p-4 mb-6 carousel relative"> | |
| <div class="carousel-inner"> | |
| <div class="carousel-item"> | |
| <img src="https://premiumstore.top/antigo/wp-content/uploads/2023/07/1-main-hd-conjunto-caixa-superior-android-casa-de-controle-remoto-inteligente-media-player-caixa-de-tv-wlan-ethernet-24g-wifi-rede-sem-fio-jogador-300x300.jpg" | |
| alt="NOVA MXQ iBOX" class="h-48 w-full object-contain"> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://premiumstore.top/image/iboxhome.jpeg" | |
| alt="NOVA MXQ iBOX" class="h-48 w-full object-contain"> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://dcdn-us.mitiendanube.com/stores/002/636/468/products/1455070323jiccaaji2c1-5aaeba078dc6aa272116875549539352-1024-1024.png" | |
| alt="NOVA MXQ iBOX" class="h-48 w-full object-contain"> | |
| </div> | |
| </div> | |
| <button class="carousel-control prev" onclick="prevSlide(this.parentElement)"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="carousel-control next" onclick="nextSlide(this.parentElement)"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <div class="carousel-indicators"> | |
| <div class="carousel-indicator active" onclick="goToSlide(this.parentElement.parentElement, 0)"></div> | |
| <div class="carousel-indicator" onclick="goToSlide(this.parentElement.parentElement, 1)"></div> | |
| <div class="carousel-indicator" onclick="goToSlide(this.parentElement.parentElement, 2)"></div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">NOVA MXQ iBOX</h3> | |
| <div class="mb-4 space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="ibox-1month" name="ibox-period" value="1month" checked class="mr-2" | |
| onchange="updatePrice('ibox', 139.90, '#')"> | |
| <label for="ibox-1month" class="font-semibold text-gray-800"> | |
| R$ 139,90 <span class="text-gray-600 font-normal">(1 Mês de App)</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="ibox-6month" name="ibox-period" value="6month" class="mr-2" | |
| onchange="updatePrice('ibox', 238.90, '#')"> | |
| <label for="ibox-6month" class="font-semibold text-gray-800"> | |
| R$ 238,90 <span class="text-gray-600 font-normal">(6 Meses de App)</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="ibox-12month" name="ibox-period" value="12month" class="mr-2" | |
| onchange="updatePrice('ibox', 358.90, '#')"> | |
| <label for="ibox-12month" class="font-semibold text-gray-800"> | |
| R$ 358,90 <span class="text-gray-600 font-normal">(12 Meses de App)</span> | |
| </label> | |
| </div> | |
| </div> | |
| <ul class="flex-1 space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Com novo sistema Android personalizado.</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Maior performance</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Conexão Wifi 2.4G e 5G</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>PROMOÇÃO FRETE GRÁTIS</span> | |
| </li> | |
| </ul> | |
| <a href="#" id="buy-ibox" class="buy-btn bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-lg font-medium w-full text-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Comprar agora | |
| </a> | |
| </div> | |
| <!-- Produto 2 --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden p-6 flex flex-col"> | |
| <div class="bg-gray-100 rounded-lg p-4 mb-6 carousel relative"> | |
| <div class="carousel-inner"> | |
| <div class="carousel-item"> | |
| <img src="https://down-br.img.susercontent.com/file/br-11134207-7qukw-ljhfzcvwx1fufb" | |
| alt="H98 Stick" class="h-48 w-full object-contain"> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://ae01.alicdn.com/kf/Hb3e02a7908454bd3834c83915add41del.png" | |
| alt="H98 Stick" class="h-48 w-full object-contain"> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://img.olx.com.br/images/91/914510724341420.jpg" | |
| alt="H98 Stick" class="h-48 w-full object-contain"> | |
| </div> | |
| </div> | |
| <button class="carousel-control prev" onclick="prevSlide(this.parentElement)"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="carousel-control next" onclick="nextSlide(this.parentElement)"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <div class="carousel-indicators"> | |
| <div class="carousel-indicator active" onclick="goToSlide(this.parentElement.parentElement, 0)"></div> | |
| <div class="carousel-indicator" onclick="goToSlide(this.parentElement.parentElement, 1)"></div> | |
| <div class="carousel-indicator" onclick="goToSlide(this.parentElement.parentElement, 2)"></div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">H98 STICK</h3> | |
| <div class="mb-4 space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="stick-1month" name="stick-period" value="1month" checked class="mr-2" | |
| onchange="updatePrice('stick', 239.90, '#')"> | |
| <label for="stick-1month" class="font-semibold text-gray-800"> | |
| R$ 239,90 <span class="text-gray-600 font-normal">(1 Mês de App)</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="stick-6month" name="stick-period" value="6month" class="mr-2" | |
| onchange="updatePrice('stick', 338.90, '#')"> | |
| <label for="stick-6month" class="font-semibold text-gray-800"> | |
| R$ 338,90 <span class="text-gray-600 font-normal">(6 Meses de App)</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="stick-12month" name="stick-period" value="12month" class="mr-2" | |
| onchange="updatePrice('stick', 458.90, '#')"> | |
| <label for="stick-12month" class="font-semibold text-gray-800"> | |
| R$ 458,90 <span class="text-gray-600 font-normal">(12 Meses de App)</span> | |
| </label> | |
| </div> | |
| </div> | |
| <ul class="flex-1 space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Modelo Stick compacto</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Modelo com alto desempenho</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Conexão Wi-Fi 5GHz</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>PROMOÇÃO FRETE GRÁTIS</span> | |
| </li> | |
| </ul> | |
| <a href="#" id="buy-stick" class="buy-btn bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-lg font-medium w-full text-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Comprar agora | |
| </a> | |
| </div> | |
| <!-- Produto 3 --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden p-6 flex flex-col"> | |
| <div class="bg-gray-100 rounded-lg p-4 mb-6 carousel relative"> | |
| <div class="carousel-inner"> | |
| <div class="carousel-item"> | |
| <img src="https://premiumstore.top/antigo/wp-content/uploads/2023/07/Fire-Stick-Lite-300x300.jpg" | |
| alt="Amazon FireStick Lite" class="h-48 w-full object-contain"> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://imgs.casasbahia.com.br/55049585/3g.jpg?imwidth=500" | |
| alt="Amazon FireStick Lite" class="h-48 w-full object-contain"> | |
| </div> | |
| <div class="carousel-item"> | |
| <img src="https://down-br.img.susercontent.com/file/br-11134201-23020-8glb52tli0mvd4" | |
| alt="Amazon FireStick Lite" class="h-48 w-full object-contain"> | |
| </div> | |
| </div> | |
| <button class="carousel-control prev" onclick="prevSlide(this.parentElement)"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="carousel-control next" onclick="nextSlide(this.parentElement)"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <div class="carousel-indicators"> | |
| <div class="carousel-indicator active" onclick="goToSlide(this.parentElement.parentElement, 0)"></div> | |
| <div class="carousel-indicator" onclick="goToSlide(this.parentElement.parentElement, 1)"></div> | |
| <div class="carousel-indicator" onclick="goToSlide(this.parentElement.parentElement, 2)"></div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Amazon FireStick Lite</h3> | |
| <div class="mb-4 space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="fire-1month" name="fire-period" value="1month" checked class="mr-2" | |
| onchange="updatePrice('fire', 279.90, 'https://peja1290278.mercadoshops.com.br/MLB-3529964715-fire-tv-stick-lite-alexa-_JM')"> | |
| <label for="fire-1month" class="font-semibold text-gray-800"> | |
| R$ 279,90 <span class="text-gray-600 font-normal">(1 Mês de App)</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="fire-6month" name="fire-period" value="6month" class="mr-2" | |
| onchange="updatePrice('fire', 378.90, '#')"> | |
| <label for="fire-6month" class="font-semibold text-gray-800"> | |
| R$ 378,90 <span class="text-gray-600 font-normal">(6 Meses de App)</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="fire-12month" name="fire-period" value="12month" class="mr-2" | |
| onchange="updatePrice('fire', 498.90, '#')"> | |
| <label for="fire-12month" class="font-semibold text-gray-800"> | |
| R$ 498,90 <span class="text-gray-600 font-normal">(12 Meses de App)</span> | |
| </label> | |
| </div> | |
| </div> | |
| <ul class="flex-1 space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Controle com comando de voz Alexa</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Qualidade Amazon</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Sistema Android oficial Amazon</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-red-500 mt-1 mr-2"></i> | |
| <span>Wifi 2.G/5G e Bluetooth</span> | |
| </li> | |
| </ul> | |
| <a href="https://peja1290278.mercadoshops.com.br/MLB-3529964715-fire-tv-stick-lite-alexa-_JM" id="buy-fire" class="buy-btn bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-lg font-medium w-full text-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Comprar agora | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-700 mb-4">Precisa de ajuda para escolher?</p> | |
| <button class="bg-white border border-black text-black hover:bg-gray-100 py-2 px-6 rounded-lg font-medium"> | |
| <i class="fas fa-comments mr-2"></i> Fale com nosso especialista | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Carousel functionality | |
| function prevSlide(carousel) { | |
| const inner = carousel.querySelector('.carousel-inner'); | |
| const items = carousel.querySelectorAll('.carousel-item'); | |
| const activeIndex = getActiveIndex(carousel); | |
| const newIndex = (activeIndex - 1 + items.length) % items.length; | |
| updateCarousel(carousel, newIndex); | |
| } | |
| function nextSlide(carousel) { | |
| const inner = carousel.querySelector('.carousel-inner'); | |
| const items = carousel.querySelectorAll('.carousel-item'); | |
| const activeIndex = getActiveIndex(carousel); | |
| const newIndex = (activeIndex + 1) % items.length; | |
| updateCarousel(carousel, newIndex); | |
| } | |
| function goToSlide(carousel, index) { | |
| updateCarousel(carousel, index); | |
| } | |
| function getActiveIndex(carousel) { | |
| const inner = carousel.querySelector('.carousel-inner'); | |
| const items = carousel.querySelectorAll('.carousel-item'); | |
| const transform = window.getComputedStyle(inner).getPropertyValue('transform'); | |
| const matrix = new DOMMatrix(transform); | |
| const currentTranslate = matrix.m41; | |
| return Math.abs(Math.round(currentTranslate / inner.offsetWidth)); | |
| } | |
| function updateCarousel(carousel, index) { | |
| const inner = carousel.querySelector('.carousel-inner'); | |
| const items = carousel.querySelectorAll('.carousel-item'); | |
| const indicators = carousel.querySelectorAll('.carousel-indicator'); | |
| inner.style.transform = `translateX(-${index * 100}%)`; | |
| indicators.forEach((indicator, i) => { | |
| if (i === index) { | |
| indicator.classList.add('active'); | |
| } else { | |
| indicator.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| // Auto-rotate carousels | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const carousels = document.querySelectorAll('.carousel'); | |
| carousels.forEach(carousel => { | |
| setInterval(() => { | |
| nextSlide(carousel); | |
| }, 5000); | |
| }); | |
| }); | |
| </script> | |
| </html> |