prof-sites / index.html
afurlan's picture
- Follow Up Deployment
abb5ad3 verified
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copo Térmico Life + Ebook - Clear - Preto - 880ml | Gocase</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>
.dropdown:hover .dropdown-menu {
display: block;
}
.product-gallery {
scroll-snap-type: x mandatory;
}
.product-gallery img {
scroll-snap-align: start;
}
.sticky-nav {
position: sticky;
top: 0;
z-index: 50;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Top Banner -->
<div class="bg-black text-white text-center py-2 text-sm">
<p>FRETE GRÁTIS A PARTIR DE R$149,90* | 6X SEM JUROS EM PEDIDOS A PARTIR DE R$ 499!</p>
</div>
<!-- Main Navigation -->
<nav class="sticky-nav bg-white shadow-md">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center py-4">
<!-- Logo -->
<div class="flex items-center">
<a href="#" class="flex items-center">
<img src="https://cdn.gocase.com.br/.nuxt/dist/client/img/logo-birth.e283944.webp" alt="Gocase" class="h-8 mr-2">
<span class="text-xl font-bold">gocase</span>
</a>
</div>
<!-- Search and User/Cart -->
<div class="hidden md:flex items-center space-x-6">
<div class="relative">
<input type="text" placeholder="Buscar produtos..." class="border border-gray-300 rounded-full py-2 px-4 w-64 focus:outline-none focus:ring-2 focus:ring-pink-500">
<button class="absolute right-3 top-2.5 text-gray-400">
<i class="fas fa-search"></i>
</button>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-700 hover:text-pink-500"><i class="far fa-user"></i></a>
<a href="#" class="text-gray-700 hover:text-pink-500"><i class="fas fa-shopping-cart"></i></a>
</div>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button class="text-gray-700">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Category Navigation -->
<div class="hidden md:flex justify-between py-3 border-t border-gray-200">
<div class="flex space-x-6">
<a href="#" class="text-gray-700 hover:text-pink-500 font-medium">OFERTAS ATÉ 70% OFF</a>
<div class="dropdown relative">
<button class="text-gray-700 hover:text-pink-500 font-medium flex items-center">
Produtos Térmicos <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-2 w-64 z-10">
<a href="#" class="block px-4 py-2 hover:bg-pink-50">☆ Novas Estampas</a>
<a href="#" class="block px-4 py-2 hover:bg-pink-50">✩ Garrafa Térmica Flip Pro 750mL</a>
<div class="border-t border-gray-200 my-1"></div>
<a href="#" class="block px-4 py-2 hover:bg-pink-50">Copo Térmico Life 880mL</a>
<a href="#" class="block px-4 py-2 hover:bg-pink-50">Copo Térmico Life 1180mL</a>
</div>
</div>
<div class="dropdown relative">
<button class="text-gray-700 hover:text-pink-500 font-medium flex items-center">
Capinhas <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-2 w-64 z-10">
<a href="#" class="block px-4 py-2 hover:bg-pink-50">✩ Novas Estampas</a>
<a href="#" class="block px-4 py-2 hover:bg-pink-50">Mais Vendidas</a>
<div class="border-t border-gray-200 my-1"></div>
<a href="#" class="block px-4 py-2 hover:bg-pink-50">iPhone</a>
<a href="#" class="block px-4 py-2 hover:bg-pink-50">Samsung</a>
</div>
</div>
<a href="#" class="text-gray-700 hover:text-pink-500 font-medium">Bolsas, Malas e Mochilas</a>
<a href="#" class="text-gray-700 hover:text-pink-500 font-medium">Acessórios</a>
<a href="#" class="text-gray-700 hover:text-pink-500 font-medium">Coleções</a>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-700 hover:text-pink-500 text-sm">Seja Revendedor(a)</a>
<a href="#" class="text-gray-700 hover:text-pink-500 text-sm">Brindes Corporativos</a>
</div>
</div>
</div>
</nav>
<!-- Breadcrumbs -->
<div class="bg-gray-100 py-3">
<div class="container mx-auto px-4">
<div class="flex items-center text-sm text-gray-600">
<a href="#" class="hover:text-pink-500">Início</a>
<span class="mx-2">/</span>
<a href="#" class="hover:text-pink-500">Copo Térmico Life + Ebook</a>
<span class="mx-2">/</span>
<span class="text-gray-900 font-medium">Clear - Preto</span>
</div>
</div>
</div>
<!-- Product Section -->
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Product Gallery -->
<div class="lg:w-1/2">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<!-- Main Image -->
<div class="relative pb-[100%] bg-gray-100">
<img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
alt="Copo Térmico Life + Ebook - Clear - Preto"
class="absolute h-full w-full object-contain">
</div>
<!-- Thumbnails -->
<div class="flex overflow-x-auto product-gallery p-4 space-x-2">
<div class="flex-shrink-0 w-20 h-20 bg-gray-100 rounded border border-gray-200">
<img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
alt="Thumbnail 1"
class="h-full w-full object-contain">
</div>
<div class="flex-shrink-0 w-20 h-20 bg-gray-100 rounded border border-gray-200">
<img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
alt="Thumbnail 2"
class="h-full w-full object-contain">
</div>
<div class="flex-shrink-0 w-20 h-20 bg-gray-100 rounded border border-gray-200">
<img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
alt="Thumbnail 3"
class="h-full w-full object-contain">
</div>
</div>
</div>
</div>
<!-- Product Info -->
<div class="lg:w-1/2">
<h1 class="text-3xl font-bold text-gray-900 mb-2">Copo Térmico Life + Ebook - Clear - Preto</h1>
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
<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="fas fa-star-half-alt"></i>
</div>
<span class="text-gray-600 ml-2">(45 avaliações)</span>
</div>
<div class="mb-6">
<span class="text-3xl font-bold text-pink-600">R$129,90</span>
<span class="text-lg text-gray-500 line-through ml-2">R$269,90</span>
<span class="bg-pink-100 text-pink-800 text-sm font-medium ml-2 px-2.5 py-0.5 rounded">52% OFF</span>
</div>
<div class="mb-6">
<p class="text-gray-700 mb-4">Quer comprar com a logo da sua empresa? <a href="#" class="text-pink-600 hover:underline">Clique aqui!</a><br>
<span class="text-sm text-gray-500">*para pedidos acima de 50 unidades.</span></p>
</div>
<!-- Size Selection -->
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-3">Tamanho</h3>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 border border-gray-300 rounded-md hover:border-pink-500 hover:bg-pink-50">1180ml</button>
<button class="px-4 py-2 border border-pink-500 bg-pink-50 rounded-md text-pink-600 font-medium">880ml</button>
<button class="px-4 py-2 border border-gray-300 rounded-md hover:border-pink-500 hover:bg-pink-50">880ml + Alça Esporte</button>
</div>
</div>
<!-- Customization -->
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-3">Customizar</h3>
<button class="px-4 py-2 border border-gray-300 rounded-md hover:border-pink-500 hover:bg-pink-50">
<i class="fas fa-paint-brush mr-2"></i>Personalizar
</button>
</div>
<!-- Add to Cart -->
<div class="mb-8">
<button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded-md transition duration-300 flex items-center justify-center">
<i class="fas fa-shopping-cart mr-2"></i> Adicionar ao Carrinho
</button>
</div>
<!-- Wishlist and Share -->
<div class="flex items-center space-x-4">
<button class="text-gray-700 hover:text-pink-500 flex items-center">
<i class="far fa-heart mr-2"></i> Lista de Desejos
</button>
<div class="flex items-center space-x-3">
<span class="text-gray-700">Compartilhar:</span>
<a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-500 hover:text-blue-400"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-500 hover:text-red-500"><i class="fab fa-pinterest-p"></i></a>
<a href="#" class="text-gray-500 hover:text-green-500"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div class="border-t border-gray-200 my-6"></div>
<!-- Shipping Info -->
<div class="bg-gray-50 p-4 rounded-md mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-2">Prazo de Postagem</h3>
<p class="text-gray-700">Após a confirmação de pagamento precisamos de até <span class="font-medium">10 dia(s) útil(eis)</span> para a produção e postagem do seu pedido. Após a postagem se inicia a contagem do prazo do frete para a sua localidade.</p>
</div>
<!-- Payment Options -->
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-3">Formas de Pagamento</h3>
<div class="grid grid-cols-4 gap-2">
<div class="border border-gray-200 p-2 rounded-md flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2014/04/visa-logo-1.png" alt="Visa" class="h-6">
</div>
<div class="border border-gray-200 p-2 rounded-md flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2014/04/mastercard-logo-1.png" alt="Mastercard" class="h-6">
</div>
<div class="border border-gray-200 p-2 rounded-md flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2019/08/amex-logo-0.png" alt="American Express" class="h-6">
</div>
<div class="border border-gray-200 p-2 rounded-md flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2019/08/hipercard-logo-0.png" alt="Hipercard" class="h-6">
</div>
<div class="border border-gray-200 p-2 rounded-md flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2019/08/elo-logo-0.png" alt="Elo" class="h-6">
</div>
<div class="border border-gray-200 p-2 rounded-md flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2019/08/boleto-logo-0.png" alt="Boleto" class="h-6">
</div>
<div class="border border-gray-200 p-2 rounded-md flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2020/04/pix-logo-0.png" alt="Pix" class="h-6">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product Description -->
<div class="bg-white py-8">
<div class="container mx-auto px-4">
<div class="border-b border-gray-200">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Descrição</h2>
</div>
<div class="mt-6">
<h3 class="text-lg font-medium text-gray-900 mb-3">Copo Térmico Life + Ebook - Clear - Preto - 880ml</h3>
<p class="text-gray-700 mb-4">
O Copo Térmico Life é perfeito para quem busca praticidade e estilo no dia a dia. Com capacidade de 880ml, ele mantém suas bebidas na temperatura ideal por horas, seja quente ou gelada.
</p>
<p class="text-gray-700 mb-4">
<strong>Características:</strong>
</p>
<ul class="list-disc pl-5 text-gray-700 mb-4 space-y-2">
<li>Material: Aço inoxidável 18/8 de alta qualidade</li>
<li>Revestimento interno em cobre para melhor isolamento térmico</li>
<li>Tampa com vedação perfeita e sistema anti-vazamento</li>
<li>Manutenção de temperatura: até 12h quente e 24h gelado</li>
<li>Base antiderrapante em silicone</li>
<li>Design moderno e elegante</li>
</ul>
<p class="text-gray-700 mb-4">
<strong>Inclui:</strong> Ebook exclusivo com receitas saudáveis e dicas de bem-estar.
</p>
<p class="text-gray-700">
<strong>Dimensões:</strong> 9cm de diâmetro x 23cm de altura
</p>
</div>
</div>
</div>
<!-- Related Products -->
<div class="bg-gray-50 py-12">
<div class="container mx-auto px-4">
<h2 class="text-2xl font-bold text-gray-900 mb-8">Você também pode gostar</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Product 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="relative pb-[100%] bg-gray-100">
<img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
alt="Copo Térmico Life Azul Claro"
class="absolute h-full w-full object-contain">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 mb-1">Copo Térmico Life Azul Claro</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-400 text-xs">
<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="fas fa-star-half-alt"></i>
</div>
</div>
<div class="flex items-center">
<span class="text-lg font-bold text-pink-600">R$129,90</span>
<span class="text-sm text-gray-500 line-through ml-2">R$269,90</span>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="relative pb-[100%] bg-gray-100">
<img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
alt="Copo Térmico Life Rosa"
class="absolute h-full w-full object-contain">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 mb-1">Copo Térmico Life Rosa</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-400 text-xs">
<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>
</div>
<div class="flex items-center">
<span class="text-lg font-bold text-pink-600">R$129,90</span>
<span class="text-sm text-gray-500 line-through ml-2">R$269,90</span>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="relative pb-[100%] bg-gray-100">
<img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
alt="Copo Térmico Life Branco"
class="absolute h-full w-full object-contain">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 mb-1">Copo Térmico Life Branco</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-400 text-xs">
<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="fas fa-star"></i>
</div>
</div>
<div class="flex items-center">
<span class="text-lg font-bold text-pink-600">R$129,90</span>
<span class="text-sm text-gray-500 line-through ml-2">R$269,90</span>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<div class="relative pb-[100%] bg-gray-100">
<img src="https://ik.imagekit.io/gocase/govinci/copo-life-clear-vitrine-preto/360lifepreto-copolife880ebook/mockup?stamp=prisma-render/prod-v2/previews/clear-mockup/53797/standard-iphone11/1719840659323318207807880787045535.png"
alt="Copo Térmico Life Lilás"
class="absolute h-full w-full object-contain">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 mb-1">Copo Térmico Life Lilás</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-400 text-xs">
<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="fas fa-star-half-alt"></i>
</div>
</div>
<div class="flex items-center">
<span class="text-lg font-bold text-pink-600">R$129,90</span>
<span class="text-sm text-gray-500 line-through ml-2">R$269,90</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="bg-pink-50 py-12">
<div class="container mx-auto px-4 text-center">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Nós enviamos e-mails incríveis.</h2>
<p class="text-gray-700 mb-6">Saiba primeiro dos nossos lançamentos, coleções e promoções exclusivas.</p>
<div class="max-w-md mx-auto flex">
<input type="email" placeholder="Seu melhor e-mail" class="flex-grow border border-gray-300 rounded-l-md py-3 px-4 focus:outline-none focus:ring-2 focus:ring-pink-500">
<button class="bg-pink-600 hover:bg-pink-700 text-white font-medium py-3 px-6 rounded-r-md transition duration-300">
Assinar
</button>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-12 pb-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
<!-- About -->
<div>
<h3 class="text-lg font-bold mb-4">Sobre a Gocase</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Quem Somos</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Onde Encontrar</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Trabalhe Conosco</a></li>
</ul>
</div>
<!-- Help -->
<div>
<h3 class="text-lg font-bold mb-4">Precisa de ajuda?</h3>
<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">Quero ser um Revendedor Oficial</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Termos de Uso</a></li>
</ul>
</div>
<!-- Payment Methods -->
<div>
<h3 class="text-lg font-bold mb-4">Métodos de Pagamento</h3>
<div class="grid grid-cols-4 gap-2">
<div class="bg-white p-2 rounded flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2014/04/visa-logo-1.png" alt="Visa" class="h-6">
</div>
<div class="bg-white p-2 rounded flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2014/04/mastercard-logo-1.png" alt="Mastercard" class="h-6">
</div>
<div class="bg-white p-2 rounded flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2019/08/amex-logo-0.png" alt="American Express" class="h-6">
</div>
<div class="bg-white p-2 rounded flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2019/08/hipercard-logo-0.png" alt="Hipercard" class="h-6">
</div>
<div class="bg-white p-2 rounded flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2019/08/elo-logo-0.png" alt="Elo" class="h-6">
</div>
<div class="bg-white p-2 rounded flex justify-center">
<img src="https://logodownload.org/wp-content/uploads/2019/08/boleto-logo-0.png" alt="
<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=afurlan/prof-sites" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>