Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gentleman's Vault | Acessórios Masculinos 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:hover .product-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .product-overlay { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1556905055-8f358a7a10b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .newsletter-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1520367445093-50dc08a59d9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .mobile-menu { | |
| transition: all 0.3s ease; | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-gray-900 text-white shadow-lg 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-gem text-amber-500 text-2xl"></i> | |
| <h1 class="text-xl font-bold">Gentleman's Vault</h1> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-amber-400 transition">Início</a> | |
| <a href="#produtos" class="hover:text-amber-400 transition">Produtos</a> | |
| <a href="#sobre" class="hover:text-amber-400 transition">Sobre Nós</a> | |
| <a href="#contato" class="hover:text-amber-400 transition">Contato</a> | |
| </nav> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <button class="hover:text-amber-400 transition"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="hover:text-amber-400 transition"> | |
| <i class="fas fa-user"></i> | |
| </button> | |
| <button class="hover:text-amber-400 transition relative"> | |
| <i class="fas fa-shopping-bag"></i> | |
| <span class="absolute -top-2 -right-2 bg-amber-500 text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-button" class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="mobile-menu bg-gray-800 md:hidden"> | |
| <div class="container mx-auto px-4 py-3 flex flex-col space-y-4"> | |
| <a href="#" class="hover:text-amber-400 transition py-2 border-b border-gray-700">Início</a> | |
| <a href="#produtos" class="hover:text-amber-400 transition py-2 border-b border-gray-700">Produtos</a> | |
| <a href="#sobre" class="hover:text-amber-400 transition py-2 border-b border-gray-700">Sobre Nós</a> | |
| <a href="#contato" class="hover:text-amber-400 transition py-2 border-b border-gray-700">Contato</a> | |
| <div class="flex justify-around py-4"> | |
| <button class="hover:text-amber-400 transition text-xl"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="hover:text-amber-400 transition text-xl"> | |
| <i class="fas fa-user"></i> | |
| </button> | |
| <button class="hover:text-amber-400 transition text-xl relative"> | |
| <i class="fas fa-shopping-bag"></i> | |
| <span class="absolute -top-2 -right-2 bg-amber-500 text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-bg text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">ELEVANDO O SEU ESTILO</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Acessórios masculinos premium que complementam sua personalidade e refinam sua presença.</p> | |
| <button class="bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> | |
| EXPLORAR COLECÃO | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Nossas Categorias</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div class="relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" | |
| alt="Relógios" class="w-full h-48 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Relógios</h3> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1611591437281-460bfbe1220a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Óculos" class="w-full h-48 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Óculos</h3> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1618517048286-1c5075b771a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Carteiras" class="w-full h-48 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Carteiras</h3> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1611591437281-460bfbe1220a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Outros" class="w-full h-48 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Outros</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section id="produtos" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <h2 class="text-3xl font-bold">Destaques</h2> | |
| <button class="text-amber-600 hover:text-amber-700 font-medium">Ver todos →</button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1523170335258-f5ed11844a49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" | |
| alt="Relógio Premium" class="w-full h-64 object-cover"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-60 flex flex-col items-center justify-center p-4"> | |
| <button class="bg-white text-gray-900 font-medium py-2 px-6 mb-2 rounded-full hover:bg-gray-200 transition"> | |
| Visualizar | |
| </button> | |
| <button class="bg-amber-500 text-white font-medium py-2 px-6 rounded-full hover:bg-amber-600 transition"> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| <div class="absolute top-3 left-3 bg-amber-500 text-white text-xs font-bold px-2 py-1 rounded"> | |
| NOVO | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Relógio Chronograph</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-amber-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 text-sm ml-2">(42)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900">R$ 1.299,90</span> | |
| <span class="text-sm text-gray-500 line-through">R$ 1.599,90</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1596703263926-eb0768702410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" | |
| alt="Óculos de Sol" class="w-full h-64 object-cover"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-60 flex flex-col items-center justify-center p-4"> | |
| <button class="bg-white text-gray-900 font-medium py-2 px-6 mb-2 rounded-full hover:bg-gray-200 transition"> | |
| Visualizar | |
| </button> | |
| <button class="bg-amber-500 text-white font-medium py-2 px-6 rounded-full hover:bg-amber-600 transition"> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Óculos de Sol Aviador</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-amber-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="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-600 text-sm ml-2">(28)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900">R$ 459,90</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1618517048286-1c5075b771a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Carteira de Couro" class="w-full h-64 object-cover"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-60 flex flex-col items-center justify-center p-4"> | |
| <button class="bg-white text-gray-900 font-medium py-2 px-6 mb-2 rounded-full hover:bg-gray-200 transition"> | |
| Visualizar | |
| </button> | |
| <button class="bg-amber-500 text-white font-medium py-2 px-6 rounded-full hover:bg-amber-600 transition"> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| <div class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> | |
| -20% | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Carteira de Couro Legítimo</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-amber-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"></i> | |
| </div> | |
| <span class="text-gray-600 text-sm ml-2">(65)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900">R$ 189,90</span> | |
| <span class="text-sm text-gray-500 line-through">R$ 239,90</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1611591437281-460bfbe1220a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Brincos Masculinos" class="w-full h-64 object-cover"> | |
| <div class="product-overlay absolute inset-0 bg-black bg-opacity-60 flex flex-col items-center justify-center p-4"> | |
| <button class="bg-white text-gray-900 font-medium py-2 px-6 mb-2 rounded-full hover:bg-gray-200 transition"> | |
| Visualizar | |
| </button> | |
| <button class="bg-amber-500 text-white font-medium py-2 px-6 rounded-full hover:bg-amber-600 transition"> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Brincos de Prata 925</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-amber-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"></i> | |
| </div> | |
| <span class="text-gray-600 text-sm ml-2">(87)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900">R$ 129,90</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Banner --> | |
| <section class="py-16 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Coleção Limitada de Verão</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Descubra nossa exclusiva linha de acessórios inspirados nas tendências globais deste verão.</p> | |
| <button class="bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> | |
| COMPRE AGORA | |
| </button> | |
| </div> | |
| </section> | |
| <!-- About Us --> | |
| <section id="sobre" class="py-16 bg-white"> | |
| <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 md:pr-8"> | |
| <img src="https://images.unsplash.com/photo-1526948128573-703ee1aeb6fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Sobre Nós" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6">Sobre a Gentleman's Vault</h2> | |
| <p class="text-gray-700 mb-4"> | |
| Fundada em 2015, a Gentleman's Vault nasceu da paixão por acessórios masculinos que combinam estilo, qualidade e personalidade. Acreditamos que os detalhes fazem a diferença e que cada homem merece peças que reflitam sua essência. | |
| </p> | |
| <p class="text-gray-700 mb-6"> | |
| Nossa missão é oferecer produtos selecionados com rigor, provenientes dos melhores artesãos e marcas ao redor do mundo, garantindo exclusividade e durabilidade em cada peça. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <div class="flex-1 bg-gray-100 p-4 rounded-lg"> | |
| <i class="fas fa-gem text-amber-500 text-2xl mb-2"></i> | |
| <h3 class="font-bold mb-1">Qualidade Premium</h3> | |
| <p class="text-sm text-gray-600">Materiais selecionados e acabamento impecável.</p> | |
| </div> | |
| <div class="flex-1 bg-gray-100 p-4 rounded-lg"> | |
| <i class="fas fa-truck text-amber-500 text-2xl mb-2"></i> | |
| <h3 class="font-bold mb-1">Entrega Rápida</h3> | |
| <p class="text-sm text-gray-600">Entregamos em todo o Brasil em até 5 dias úteis.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">O Que Nossos Clientes Dizem</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Ricardo Silva</h4> | |
| <div class="flex text-amber-400 text-sm"> | |
| <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> | |
| <p class="text-gray-700"> | |
| "Comprei um relógio da Gentleman's Vault e fiquei impressionado com a qualidade. O atendimento foi excelente e o produto chegou antes do prazo. Recomendo!" | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Marcos Oliveira</h4> | |
| <div class="flex text-amber-400 text-sm"> | |
| <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> | |
| <p class="text-gray-700"> | |
| "A carteira de couro que comprei aqui é simplesmente perfeita. Já faz 6 meses e parece nova. Sem dúvida vou comprar outros acessórios." | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Gustavo Santos</h4> | |
| <div class="flex text-amber-400 text-sm"> | |
| <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> | |
| <p class="text-gray-700"> | |
| "Os óculos de sol são exatamente como nas fotos e muito confortáveis. A embalagem veio super bem cuidada. Excelente experiência de compra!" | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="newsletter-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Junte-se à Nossa Comunidade</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Assine nossa newsletter e receba ofertas exclusivas, novidades e dicas de estilo.</p> | |
| <form class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Seu melhor e-mail" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-900"> | |
| <button type="submit" class="bg-amber-500 hover:bg-amber-600 px-6 py-3 rounded-r-lg font-bold transition"> | |
| Assinar | |
| </button> | |
| </form> | |
| <div class="flex justify-center space-x-6 mt-8"> | |
| <a href="#" class="hover:text-amber-400 transition text-2xl"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="hover:text-amber-400 transition text-2xl"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="hover:text-amber-400 transition text-2xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="hover:text-amber-400 transition text-2xl"> | |
| <i class="fab fa-pinterest"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact --> | |
| <section id="contato" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Entre em Contato</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h3 class="text-xl font-bold mb-4">Informações de Contato</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-amber-500 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold">Endereço</h4> | |
| <p class="text-gray-700">Av. Paulista, 1000 - São Paulo/SP</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-phone-alt text-amber-500 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold">Telefone</h4> | |
| <p class="text-gray-700">(11) 4002-8922</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope text-amber-500 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold">E-mail</h4> | |
| <p class="text-gray-700">contato@gentlemansvault.com.br</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-amber-500 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold">Horário de Atendimento</h4> | |
| <p class="text-gray-700">Segunda a Sexta: 9h às 18h</p> | |
| <p class="text-gray-700">Sábado: 9h às 13h</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-bold mb-4">Envie uma Mensagem</h3> | |
| <form class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="name" class="block text-gray-700 mb-1">Nome</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-1">E-mail</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-gray-700 mb-1">Assunto</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 mb-1">Mensagem</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg transition"> | |
| Enviar Mensagem | |
| </button> | |
| </form> | |
| </div> | |
| </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-gem text-amber-500 text-2xl"></i> | |
| <h3 class="text-xl font-bold">Gentleman's Vault</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Acessórios masculinos premium que elevam seu estilo e personalidade. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-amber-400 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="hover:text-amber-400 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="hover:text-amber-400 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="hover:text-amber-400 transition"> | |
| <i class="fab fa-pinterest-p"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Links Úteis</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Início</a></li> | |
| <li><a href="#produtos" class="text-gray-400 hover:text-amber-400 transition">Produtos</a></li> | |
| <li><a href="#sobre" class="text-gray-400 hover:text-amber-400 transition">Sobre Nós</a></li> | |
| <li><a href="#contato" class="text-gray-400 hover:text-amber-400 transition">Contato</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Minha Conta</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Minha Conta</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Meus Pedidos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Lista de Desejos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Rastrear Pedido</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Ajuda</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Informações</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Termos e Condições</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Política de Privacidade</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Política de Devolução</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Formas de Pagamento</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Frete e Entrega</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> | |
| <p>© 2023 Gentleman's Vault. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('open'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (mobileMenu.classList.contains('open')) { | |
| mobileMenu.classList.remove('open'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Product hover effect | |
| const productCards = document.querySelectorAll('.product-card'); | |
| productCards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.querySelector('.product-overlay').style.opacity = '1'; | |
| card.querySelector('.product-overlay').style.transform = 'translateY(0)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.querySelector('.product-overlay').style.opacity = '0'; | |
| card.querySelector('.product-overlay').style.transform = 'translateY(20px)'; | |
| }); | |
| }); | |
| </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=TOJI4850Q/alpha-s-vault" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |