Hugging Face's logo

Spaces:
edsrassis
/
trajano
Running

App Files Community
trajano / index.html
edsrassis's picture
edsrassis
Eu tenho uma loja de moda masculina focada em roupa social e esporte fino. Preciso de um ecommerce para vender. O nome da loja é Trajano men’S weare. Crie um ecommerce com imagens e as cores em preto e branco - Initial Deployment
fe6f419 verified
Raw
History Blame Contribute Delete
41.7 kB
<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Trajano Men's Wear - Moda Masculina Elegante</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>
 .hero-image {
 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
 height: 60vh;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 }
.product-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
.cart-item-enter {
 opacity: 0;
 transform: translateX(-20px);
 }
 .cart-item-enter-active {
 opacity: 1;
 transform: translateX(0);
 transition: all 300ms ease-in;
 }
 .cart-item-exit {
 opacity: 1;
 }
 .cart-item-exit-active {
 opacity: 0;
 transform: translateX(20px);
 transition: all 300ms ease-in;
 }
 </style>
</head>
<body class="bg-white text-gray-900 font-sans">
 <!-- Header -->
 <header class="bg-black text-white shadow-md">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-4">
 <button id="menu-toggle" class="md:hidden text-white focus:outline-none">
 <i class="fas fa-bars text-xl"></i>
 </button>
 <a href="#" class="text-2xl font-serif font-bold">TRAJANO <span class="text-gray-400">MEN'S WEAR</span></a>
 </div>
<nav class="hidden md:flex space-x-8">
 <a href="#" class="hover:text-gray-300 transition">Home</a>
 <a href="#" class="hover:text-gray-300 transition">Coleções</a>
 <a href="#" class="hover:text-gray-300 transition">Esporte Fino</a>
 <a href="#" class="hover:text-gray-300 transition">Social</a>
 <a href="#" class="hover:text-gray-300 transition">Sobre</a>
 </nav>
<div class="flex items-center space-x-4">
 <button id="search-toggle" class="text-white hover:text-gray-300 transition">
 <i class="fas fa-search"></i>
 </button>
 <button id="cart-toggle" class="relative text-white hover:text-gray-300 transition">
 <i class="fas fa-shopping-bag"></i>
 <span id="cart-count" class="absolute -top-2 -right-2 bg-white text-black text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">0</span>
 </button>
 <a href="#" class="hidden md:block text-white hover:text-gray-300 transition">
 <i class="fas fa-user"></i>
 </a>
 </div>
 </div>
<!-- Mobile Menu -->
 <div id="mobile-menu" class="hidden md:hidden bg-black py-4 px-4">
 <div class="flex flex-col space-y-3">
 <a href="#" class="hover:text-gray-300 transition">Home</a>
 <a href="#" class="hover:text-gray-300 transition">Coleções</a>
 <a href="#" class="hover:text-gray-300 transition">Esporte Fino</a>
 <a href="#" class="hover:text-gray-300 transition">Social</a>
 <a href="#" class="hover:text-gray-300 transition">Sobre</a>
 <a href="#" class="hover:text-gray-300 transition">Minha Conta</a>
 </div>
 </div>
<!-- Search Bar -->
 <div id="search-bar" class="hidden bg-black py-3 px-4">
 <div class="container mx-auto flex">
 <input type="text" placeholder="Buscar produtos..." class="w-full bg-gray-800 text-white px-4 py-2 rounded-l focus:outline-none">
 <button class="bg-gray-700 text-white px-4 py-2 rounded-r hover:bg-gray-600 transition">
 <i class="fas fa-search"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Hero Section -->
 <section class="hero-image flex items-center justify-center">
 <div class="text-center px-4">
 <h1 class="text-4xl md:text-6xl font-serif font-bold text-white mb-4">ELEGÂNCIA SEM LIMITES</h1>
 <p class="text-xl text-white mb-8">Descubra nossa nova coleção de moda masculina</p>
 <a href="#" class="bg-white text-black px-8 py-3 font-medium hover:bg-gray-200 transition">VER COLEÇÃO</a>
 </div>
 </section>
<!-- Categories -->
 <section class="py-12 bg-gray-100">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-serif font-bold text-center mb-12">NOSSAS CATEGORIAS</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="relative overflow-hidden group">
 <img src="https://images.unsplash.com/photo-1593030761757-71fae45fa0e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80" alt="Roupa Social" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
 <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
 <h3 class="text-white text-2xl font-serif font-bold">ROUPA SOCIAL</h3>
 </div>
 <a href="#" class="absolute inset-0"></a>
 </div>
<div class="relative overflow-hidden group">
 <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Esporte Fino" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
 <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
 <h3 class="text-white text-2xl font-serif font-bold">ESPORTE FINO</h3>
 </div>
 <a href="#" class="absolute inset-0"></a>
 </div>
<div class="relative overflow-hidden group">
 <img src="https://images.unsplash.com/photo-1595343104933-9a5712af0d38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Acessórios" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
 <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
 <h3 class="text-white text-2xl font-serif font-bold">ACESSÓRIOS</h3>
 </div>
 <a href="#" class="absolute inset-0"></a>
 </div>
 </div>
 </div>
 </section>
<!-- Featured Products -->
 <section class="py-12">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-serif font-bold text-center mb-12">DESTAQUES</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
 <!-- Product 1 -->
 <div class="product-card bg-white shadow-md rounded overflow-hidden transition duration-300">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1598033129183-c4f50c736f10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1925&q=80" alt="Terno Preto" class="w-full h-64 object-cover">
 <div class="absolute top-0 right-0 bg-black text-white px-2 py-1 text-xs font-bold">NOVO</div>
 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition duration-300">
 <button class="bg-white text-black px-4 py-2 font-medium hover:bg-gray-200 transition quick-view" data-id="1">VISUALIZAR</button>
 </div>
 </div>
 <div class="p-4">
 <h3 class="font-bold text-lg mb-1">Terno Preto Slim Fit</h3>
 <p class="text-gray-600 text-sm mb-2">Terno de alta qualidade para ocasiões formais</p>
 <div class="flex justify-between items-center">
 <span class="font-bold">R$ 899,90</span>
 <button class="add-to-cart bg-black text-white px-3 py-1 text-sm hover:bg-gray-800 transition" data-id="1" data-name="Terno Preto Slim Fit" data-price="899.90" data-image="https://images.unsplash.com/photo-1598033129183-c4f50c736f10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1925&q=80">
 <i class="fas fa-plus mr-1"></i> Carrinho
 </button>
 </div>
 </div>
 </div>
<!-- Product 2 -->
 <div class="product-card bg-white shadow-md rounded overflow-hidden transition duration-300">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Camisa Social Branca" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition duration-300">
 <button class="bg-white text-black px-4 py-2 font-medium hover:bg-gray-200 transition quick-view" data-id="2">VISUALIZAR</button>
 </div>
 </div>
 <div class="p-4">
 <h3 class="font-bold text-lg mb-1">Camisa Social Branca</h3>
 <p class="text-gray-600 text-sm mb-2">Camisa 100% algodão para o dia a dia</p>
 <div class="flex justify-between items-center">
 <span class="font-bold">R$ 199,90</span>
 <button class="add-to-cart bg-black text-white px-3 py-1 text-sm hover:bg-gray-800 transition" data-id="2" data-name="Camisa Social Branca" data-price="199.90" data-image="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80">
 <i class="fas fa-plus mr-1"></i> Carrinho
 </button>
 </div>
 </div>
 </div>
<!-- Product 3 -->
 <div class="product-card bg-white shadow-md rounded overflow-hidden transition duration-300">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1971&q=80" alt="Calça Social Cinza" class="w-full h-64 object-cover">
 <div class="absolute top-0 right-0 bg-black text-white px-2 py-1 text-xs font-bold">-20%</div>
 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition duration-300">
 <button class="bg-white text-black px-4 py-2 font-medium hover:bg-gray-200 transition quick-view" data-id="3">VISUALIZAR</button>
 </div>
 </div>
 <div class="p-4">
 <h3 class="font-bold text-lg mb-1">Calça Social Cinza</h3>
 <p class="text-gray-600 text-sm mb-2">Calça de alfaiataria para qualquer ocasião</p>
 <div class="flex justify-between items-center">
 <div>
 <span class="text-gray-400 line-through mr-2">R$ 249,90</span>
 <span class="font-bold">R$ 199,90</span>
 </div>
 <button class="add-to-cart bg-black text-white px-3 py-1 text-sm hover:bg-gray-800 transition" data-id="3" data-name="Calça Social Cinza" data-price="199.90" data-image="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1971&q=80">
 <i class="fas fa-plus mr-1"></i> Carrinho
 </button>
 </div>
 </div>
 </div>
<!-- Product 4 -->
 <div class="product-card bg-white shadow-md rounded overflow-hidden transition duration-300">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1936&q=80" alt="Blazer Esporte Fino" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition duration-300">
 <button class="bg-white text-black px-4 py-2 font-medium hover:bg-gray-200 transition quick-view" data-id="4">VISUALIZAR</button>
 </div>
 </div>
 <div class="p-4">
 <h3 class="font-bold text-lg mb-1">Blazer Esporte Fino</h3>
 <p class="text-gray-600 text-sm mb-2">Perfeito para eventos sociais e reuniões</p>
 <div class="flex justify-between items-center">
 <span class="font-bold">R$ 599,90</span>
 <button class="add-to-cart bg-black text-white px-3 py-1 text-sm hover:bg-gray-800 transition" data-id="4" data-name="Blazer Esporte Fino" data-price="599.90" data-image="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1936&q=80">
 <i class="fas fa-plus mr-1"></i> Carrinho
 </button>
 </div>
 </div>
 </div>
 </div>
<div class="text-center mt-10">
 <a href="#" class="inline-block border-2 border-black text-black px-8 py-3 font-medium hover:bg-black hover:text-white transition">VER TODOS OS PRODUTOS</a>
 </div>
 </div>
 </section>
<!-- Banner -->
 <section class="py-12 bg-gray-900 text-white">
 <div class="container mx-auto px-4 text-center">
 <h2 class="text-3xl font-serif font-bold mb-4">ELEVAÇÃO DO ESTILO MASCULINO</h2>
 <p class="text-xl mb-8 max-w-3xl mx-auto">Na Trajano Men's Wear, cada peça é cuidadosamente selecionada para oferecer conforto, qualidade e elegância incomparáveis.</p>
 <a href="#" class="inline-block bg-white text-black px-8 py-3 font-medium hover:bg-gray-200 transition">CONHEÇA NOSSA HISTÓRIA</a>
 </div>
 </section>
<!-- Testimonials -->
 <section class="py-12">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-serif font-bold text-center mb-12">O QUE NOSSOS CLIENTES DIZEM</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-gray-100 p-6 rounded">
 <div class="flex items-center mb-4">
 <div class="text-yellow-400 mr-2">
 <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>
 <p class="text-gray-700 mb-4">"O terno que comprei na Trajano é incrível! O caimento perfeito e a qualidade do tecido superaram minhas expectativas."</p>
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-gray-300 mr-3"></div>
 <div>
 <h4 class="font-bold">Carlos Eduardo</h4>
 <p class="text-sm text-gray-600">Executivo</p>
 </div>
 </div>
 </div>
<div class="bg-gray-100 p-6 rounded">
 <div class="flex items-center mb-4">
 <div class="text-yellow-400 mr-2">
 <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>
 <p class="text-gray-700 mb-4">"Sempre encontro peças de qualidade para meu guarda-roupa profissional. O atendimento é excelente e as entregas são rápidas."</p>
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-gray-300 mr-3"></div>
 <div>
 <h4 class="font-bold">Ricardo Almeida</h4>
 <p class="text-sm text-gray-600">Advogado</p>
 </div>
 </div>
 </div>
<div class="bg-gray-100 p-6 rounded">
 <div class="flex items-center mb-4">
 <div class="text-yellow-400 mr-2">
 <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>
 <p class="text-gray-700 mb-4">"Comprei várias camisas sociais e todas têm um ótimo caimento. A variedade de tamanhos atende perfeitamente."</p>
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-gray-300 mr-3"></div>
 <div>
 <h4 class="font-bold">Marcelo Silva</h4>
 <p class="text-sm text-gray-600">Médico</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Newsletter -->
 <section class="py-12 bg-gray-100">
 <div class="container mx-auto px-4 text-center">
 <h2 class="text-3xl font-serif font-bold mb-4">RECEBA NOSSAS NOVIDADES</h2>
 <p class="text-xl mb-8 max-w-2xl mx-auto">Cadastre-se para receber promoções exclusivas e lançamentos antes de todo mundo.</p>
<form class="max-w-md mx-auto flex">
 <input type="email" placeholder="Seu melhor e-mail" class="flex-grow bg-white px-4 py-3 rounded-l focus:outline-none">
 <button type="submit" class="bg-black text-white px-6 py-3 rounded-r hover:bg-gray-800 transition">CADASTRAR</button>
 </form>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-black text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-2xl font-serif font-bold mb-4">TRAJANO <span class="text-gray-400">MEN'S WEAR</span></h3>
 <p class="text-gray-400 mb-4">Elevando o estilo masculino desde 2010.</p>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest"></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 transition">Sobre Nós</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Trabalhe Conosco</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Lojas Físicas</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Termos de Serviço</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 transition">Central de Ajuda</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Trocas e Devoluções</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Formas de Pagamento</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Fale Conosco</a></li>
 </ul>
 </div>
<div>
 <h4 class="font-bold text-lg mb-4">CONTATO</h4>
 <ul class="space-y-2 text-gray-400">
 <li class="flex items-start">
 <i class="fas fa-map-marker-alt mt-1 mr-2"></i>
 <span>Av. Paulista, 1000 - São Paulo/SP</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-phone-alt mr-2"></i>
 <span>(11) 4002-8922</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-envelope mr-2"></i>
 <span>contato@trajanomw.com.br</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-clock mr-2"></i>
 <span>Seg-Sex: 9h-18h</span>
 </li>
 </ul>
 </div>
 </div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
 <p>&copy; 2023 Trajano Men's Wear. Todos os direitos reservados.</p>
 </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 z-50">
 <div class="h-full flex flex-col">
 <div class="bg-black text-white p-4 flex justify-between items-center">
 <h3 class="text-xl font-bold">SEU CARRINHO</h3>
 <button id="close-cart" class="text-white focus:outline-none">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="flex-grow overflow-y-auto p-4">
 <div id="cart-items" class="space-y-4">
 <!-- Cart items will be added here dynamically -->
 <div class="text-center py-8 text-gray-500">
 <i class="fas fa-shopping-bag text-4xl mb-4"></i>
 <p>Seu carrinho está vazio</p>
 </div>
 </div>
 </div>
<div class="border-t p-4">
 <div class="flex justify-between mb-4">
 <span class="font-bold">SUBTOTAL</span>
 <span id="cart-subtotal" class="font-bold">R$ 0,00</span>
 </div>
 <a href="#" class="block bg-black text-white text-center py-3 font-medium hover:bg-gray-800 transition">FINALIZAR COMPRA</a>
 <a href="#" class="block border border-black text-black text-center py-3 font-medium hover:bg-gray-100 transition mt-2">CONTINUAR COMPRANDO</a>
 </div>
 </div>
 </div>
 <div id="cart-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div>
<!-- Quick View Modal -->
 <div id="quick-view-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
 <div class="bg-white max-w-4xl w-full max-h-screen overflow-y-auto">
 <div class="relative">
 <button id="close-quick-view" class="absolute top-4 right-4 bg-black text-white w-8 h-8 rounded-full flex items-center justify-center z-10">
 <i class="fas fa-times"></i>
 </button>
<div class="grid grid-cols-1 md:grid-cols-2">
 <div class="p-4">
 <img id="quick-view-image" src="" alt="" class="w-full h-auto">
 </div>
<div class="p-6">
 <h2 id="quick-view-title" class="text-2xl font-bold mb-2"></h2>
 <div class="flex items-center mb-4">
 <div class="text-yellow-400 mr-2">
 <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 text-sm">(12 avaliações)</span>
 </div>
<div class="mb-6">
 <span id="quick-view-price" class="text-2xl font-bold"></span>
 <span id="quick-view-old-price" class="text-gray-400 line-through ml-2"></span>
 </div>
<p id="quick-view-description" class="text-gray-700 mb-6"></p>
<div class="mb-6">
 <h3 class="font-bold mb-2">Tamanho</h3>
 <div class="flex flex-wrap gap-2">
 <button class="border border-gray-300 px-3 py-1 hover:bg-black hover:text-white transition">P</button>
 <button class="border border-gray-300 px-3 py-1 hover:bg-black hover:text-white transition">M</button>
 <button class="border border-gray-300 px-3 py-1 hover:bg-black hover:text-white transition">G</button>
 <button class="border border-gray-300 px-3 py-1 hover:bg-black hover:text-white transition">GG</button>
 </div>
 </div>
<div class="mb-6">
 <h3 class="font-bold mb-2">Cor</h3>
 <div class="flex gap-2">
 <button class="w-8 h-8 bg-black rounded-full border-2 border-white shadow-md"></button>
 <button class="w-8 h-8 bg-gray-400 rounded-full border-2 border-white shadow-md"></button>
 <button class="w-8 h-8 bg-gray-200 rounded-full border-2 border-white shadow-md"></button>
 </div>
 </div>
<div class="flex items-center mb-6">
 <div class="flex border border-gray-300 mr-4">
 <button class="px-3 py-1">-</button>
 <span class="px-4 py-1 border-l border-r border-gray-300">1</span>
 <button class="px-3 py-1">+</button>
 </div>
 <button id="quick-view-add-to-cart" class="bg-black text-white px-6 py-2 font-medium hover:bg-gray-800 transition flex-grow">
 ADICIONAR AO CARRINHO
 </button>
 </div>
<div class="border-t pt-4">
 <div class="flex items-start mb-2">
 <i class="fas fa-truck mt-1 mr-2"></i>
 <div>
 <h4 class="font-bold">Frete Grátis</h4>
 <p class="text-sm text-gray-600">Para compras acima de R$ 299 em todo o Brasil</p>
 </div>
 </div>
 <div class="flex items-start">
 <i class="fas fa-undo mt-1 mr-2"></i>
 <div>
 <h4 class="font-bold">Troca Fácil</h4>
 <p class="text-sm text-gray-600">Trocas e devoluções em até 7 dias</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Mobile Menu Toggle
 const menuToggle = document.getElementById('menu-toggle');
 const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
// Search Toggle
 const searchToggle = document.getElementById('search-toggle');
 const searchBar = document.getElementById('search-bar');
searchToggle.addEventListener('click', () => {
 searchBar.classList.toggle('hidden');
 if (!searchBar.classList.contains('hidden')) {
 mobileMenu.classList.add('hidden');
 }
 });
// Cart Toggle
 const cartToggle = document.getElementById('cart-toggle');
 const cartSidebar = document.getElementById('cart-sidebar');
 const cartOverlay = document.getElementById('cart-overlay');
 const closeCart = document.getElementById('close-cart');
cartToggle.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 = '';
 });
cartOverlay.addEventListener('click', () => {
 cartSidebar.classList.add('translate-x-full');
 cartOverlay.classList.add('hidden');
 document.body.style.overflow = '';
 });
// Shopping Cart Functionality
 let cart = [];
 const cartItems = document.getElementById('cart-items');
 const cartCount = document.getElementById('cart-count');
 const cartSubtotal = document.getElementById('cart-subtotal');
// Add to Cart buttons
 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();
// Open cart sidebar
 cartSidebar.classList.remove('translate-x-full');
 cartOverlay.classList.remove('hidden');
 document.body.style.overflow = 'hidden';
 });
 });
function updateCart() {
 // Update cart count
 const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
 cartCount.textContent = totalItems;
// Update cart items
 if (cart.length === 0) {
 cartItems.innerHTML = `
 <div class="text-center py-8 text-gray-500">
 <i class="fas fa-shopping-bag text-4xl mb-4"></i>
 <p>Seu carrinho está vazio</p>
 </div>
 `;
 } else {
 cartItems.innerHTML = cart.map(item => `
 <div class="flex border-b pb-4 cart-item">
 <div class="w-20 h-20 bg-gray-100 flex-shrink-0">
 <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
 </div>
 <div class="ml-4 flex-grow">
 <h4 class="font-bold">${item.name}</h4>
 <p class="text-gray-600">R$ ${item.price.toFixed(2).replace('.', ',')}</p>
 <div class="flex items-center mt-2">
 <button class="decrease-quantity text-gray-500 hover:text-black" data-id="${item.id}">
 <i class="fas fa-minus text-xs"></i>
 </button>
 <span class="mx-2 quantity">${item.quantity}</span>
 <button class="increase-quantity text-gray-500 hover:text-black" data-id="${item.id}">
 <i class="fas fa-plus text-xs"></i>
 </button>
 </div>
 </div>
 <div class="ml-4 flex flex-col items-end">
 <span class="font-bold">R$ ${(item.price * item.quantity).toFixed(2).replace('.', ',')}</span>
 <button class="remove-item text-gray-400 hover:text-black mt-auto" data-id="${item.id}">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 </div>
 `).join('');
// Add event listeners to quantity buttons
 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.quantity > 1) {
 item.quantity -= 1;
 } else {
 cart = cart.filter(item => item.id !== id);
 }
updateCart();
 });
 });
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);
 item.quantity += 1;
 updateCart();
 });
 });
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();
 });
 });
 }
// Update subtotal
 const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
 cartSubtotal.textContent = `R$ ${subtotal.toFixed(2).replace('.', ',')}`;
 }
// Quick View Modal
 const quickViewButtons = document.querySelectorAll('.quick-view');
 const quickViewModal = document.getElementById('quick-view-modal');
 const closeQuickView = document.getElementById('close-quick-view');
 const quickViewImage = document.getElementById('quick-view-image');
 const quickViewTitle = document.getElementById('quick-view-title');
 const quickViewPrice = document.getElementById('quick-view-price');
 const quickViewOldPrice = document.getElementById('quick-view-old-price');
 const quickViewDescription = document.getElementById('quick-view-description');
 const quickViewAddToCart = document.getElementById('quick-view-add-to-cart');
quickViewButtons.forEach(button => {
 button.addEventListener('click', () => {
 const id = button.getAttribute('data-id');
 const product = getProductDetails(id);
quickViewImage.src = product.image;
 quickViewTitle.textContent = product.name;
 quickViewPrice.textContent = `R$ ${product.price.toFixed(2).replace('.', ',')}`;
if (product.oldPrice) {
 quickViewOldPrice.textContent = `R$ ${product.oldPrice.toFixed(2).replace('.', ',')}`;
 quickViewOldPrice.style.display = 'inline';
 } else {
 quickViewOldPrice.style.display = 'none';
 }
quickViewDescription.textContent = product.description;
quickViewAddToCart.setAttribute('data-id', product.id);
 quickViewAddToCart.setAttribute('data-name', product.name);
 quickViewAddToCart.setAttribute('data-price', product.price);
 quickViewAddToCart.setAttribute('data-image', product.image);
quickViewModal.classList.remove('hidden');
 document.body.style.overflow = 'hidden';
 });
 });
closeQuickView.addEventListener('click', () => {
 quickViewModal.classList.add('hidden');
 document.body.style.
<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=edsrassis/trajano" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>