Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>R.a Superclean - Produtos de Limpeza Profissional</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> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-out forwards; | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| .product-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .discount-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background-color: #ef4444; | |
| color: white; | |
| padding: 2px 8px; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| } | |
| .header-gradient { | |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); | |
| } | |
| .button-hover:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .button-active:active { | |
| transform: scale(0.95); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Top Bar --> | |
| <div class="bg-blue-800 text-white text-sm py-2 px-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <span><i class="fas fa-phone-alt mr-1"></i> (18) 99774-4757</span> | |
| <span><i class="fas fa-envelope mr-1"></i> contato@rasuperclean.com.br</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-blue-200"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="hover:text-blue-200"><i class="fab fa-instagram"></i></a> | |
| <a href="https://wa.me/5518997744757" class="hover:text-blue-200"><i class="fab fa-whatsapp"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="header-gradient text-white sticky top-0 z-50 shadow-lg"> | |
| <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="bg-white rounded-full p-2 mr-3"> | |
| <i class="fas fa-spray-can text-blue-600 text-2xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold"> | |
| <span class="text-white">R.a</span> | |
| <span class="text-yellow-300">Superclean</span> | |
| </h1> | |
| </div> | |
| <div class="relative w-full md:w-1/3"> | |
| <input type="text" placeholder="Buscar produtos..." | |
| class="w-full py-2 px-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-400"> | |
| <button class="absolute right-0 top-0 h-full px-4 text-blue-800 rounded-r-full bg-yellow-400 hover:bg-yellow-300"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="flex flex-col items-center hover:text-yellow-300"> | |
| <i class="fas fa-user text-xl"></i> | |
| <span class="text-xs mt-1">Minha Conta</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center hover:text-yellow-300"> | |
| <i class="fas fa-heart text-xl"></i> | |
| <span class="text-xs mt-1">Favoritos</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center hover:text-yellow-300 relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="text-xs mt-1">Carrinho</span> | |
| <span class="absolute -top-2 -right-2 bg-yellow-400 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">3</span> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <ul class="flex flex-wrap justify-center md:justify-start space-x-1 md:space-x-6 py-3"> | |
| <li><a href="#" class="px-3 py-2 text-blue-800 font-medium hover:bg-blue-50 rounded-md">Home</a></li> | |
| <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Produtos</a></li> | |
| <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Ofertas</a></li> | |
| <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Limpeza Profissional</a></li> | |
| <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Indústria</a></li> | |
| <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Hospitalar</a></li> | |
| <li><a href="#" class="px-3 py-2 text-gray-600 hover:text-blue-800 hover:bg-blue-50 rounded-md">Contato</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- Hero Banner --> | |
| <section class="relative bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 fade-in"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Produtos de Limpeza Profissional</h2> | |
| <p class="text-xl mb-6">Soluções completas para limpeza residencial, comercial e industrial com a melhor qualidade do mercado.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-yellow-400 hover:bg-yellow-300 text-blue-800 font-bold py-3 px-6 rounded-full button-hover button-active transition-all"> | |
| Compre Agora <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <a href="#" class="border-2 border-white hover:bg-white hover:text-blue-800 font-bold py-3 px-6 rounded-full button-hover button-active transition-all"> | |
| Saiba Mais | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center fade-in" style="animation-delay: 0.3s;"> | |
| <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Produtos de limpeza" class="rounded-xl shadow-2xl max-w-full h-auto md:max-w-md"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> | |
| <div class="bg-blue-50 p-6 rounded-xl flex items-center fade-in"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-truck text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">Entrega Rápida</h3> | |
| <p class="text-gray-600 text-sm">Entregamos em todo Brasil</p> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-xl flex items-center fade-in" style="animation-delay: 0.2s;"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-shield-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">Qualidade Garantida</h3> | |
| <p class="text-gray-600 text-sm">Produtos testados e aprovados</p> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-xl flex items-center fade-in" style="animation-delay: 0.4s;"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-credit-card text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">Pagamento Seguro</h3> | |
| <p class="text-gray-600 text-sm">Diversas formas de pagamento</p> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-xl flex items-center fade-in" style="animation-delay: 0.6s;"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-headset text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">Suporte 24/7</h3> | |
| <p class="text-gray-600 text-sm">Atendimento especializado</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-2">Nossas Categorias</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Descubra nossa variedade de produtos para todas as necessidades de limpeza</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover"> | |
| <div class="bg-blue-100 p-4 rounded-full mb-3"> | |
| <i class="fas fa-broom text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Limpeza Geral</h3> | |
| </a> | |
| <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover"> | |
| <div class="bg-blue-100 p-4 rounded-full mb-3"> | |
| <i class="fas fa-tshirt text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Lavanderia</h3> | |
| </a> | |
| <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover"> | |
| <div class="bg-blue-100 p-4 rounded-full mb-3"> | |
| <i class="fas fa-utensils text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Cozinha</h3> | |
| </a> | |
| <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover"> | |
| <div class="bg-blue-100 p-4 rounded-full mb-3"> | |
| <i class="fas fa-bath text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Banheiro</h3> | |
| </a> | |
| <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover"> | |
| <div class="bg-blue-100 p-4 rounded-full mb-3"> | |
| <i class="fas fa-industry text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Industrial</h3> | |
| </a> | |
| <a href="#" class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center hover:shadow-md transition-all product-hover"> | |
| <div class="bg-blue-100 p-4 rounded-full mb-3"> | |
| <i class="fas fa-procedures text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Hospitalar</h3> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-blue-800">Produtos em Destaque</h2> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center"> | |
| Ver todos <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <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-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all product-hover relative"> | |
| <div class="discount-badge">-20%</div> | |
| <div class="p-4"> | |
| <img src="https://images.unsplash.com/photo-1612108418909-1b553c0a0e8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Desinfetante" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="px-4 pb-4"> | |
| <div class="text-xs text-gray-500 mb-1">Desinfetantes</div> | |
| <h3 class="font-bold text-lg mb-2">Desinfetante Concentrado 5L</h3> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex 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-xs text-gray-500">(48)</span> | |
| </div> | |
| <div class="flex items-end justify-between"> | |
| <div> | |
| <span class="text-gray-400 line-through text-sm">R$ 89,90</span> | |
| <div class="text-blue-800 font-bold text-xl">R$ 71,92</div> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full button-hover button-active"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all product-hover"> | |
| <div class="p-4"> | |
| <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80" | |
| alt="Detergente" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="px-4 pb-4"> | |
| <div class="text-xs text-gray-500 mb-1">Detergentes</div> | |
| <h3 class="font-bold text-lg mb-2">Detergente Neutro 5L</h3> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex 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> | |
| <span class="text-xs text-gray-500">(124)</span> | |
| </div> | |
| <div class="flex items-end justify-between"> | |
| <div> | |
| <div class="text-blue-800 font-bold text-xl">R$ 42,90</div> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full button-hover button-active"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all product-hover relative"> | |
| <div class="discount-badge">-15%</div> | |
| <div class="p-4"> | |
| <img src="https://images.unsplash.com/photo-1584308666744-5d72a60a52a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Álcool em gel" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="px-4 pb-4"> | |
| <div class="text-xs text-gray-500 mb-1">Antissépticos</div> | |
| <h3 class="font-bold text-lg mb-2">Álcool em Gel 70% 1L</h3> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex 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="far fa-star"></i> | |
| </div> | |
| <span class="text-xs text-gray-500">(76)</span> | |
| </div> | |
| <div class="flex items-end justify-between"> | |
| <div> | |
| <span class="text-gray-400 line-through text-sm">R$ 28,90</span> | |
| <div class="text-blue-800 font-bold text-xl">R$ 24,56</div> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full button-hover button-active"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all product-hover"> | |
| <div class="p-4"> | |
| <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=640&q=80" | |
| alt="Sabão líquido" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="px-4 pb-4"> | |
| <div class="text-xs text-gray-500 mb-1">Lavanderia</div> | |
| <h3 class="font-bold text-lg mb-2">Sabão Líquido 5L</h3> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex 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-xs text-gray-500">(92)</span> | |
| </div> | |
| <div class="flex items-end justify-between"> | |
| <div> | |
| <div class="text-blue-800 font-bold text-xl">R$ 59,90</div> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full button-hover button-active"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Special Offer --> | |
| <section class="py-12 bg-blue-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-2xl overflow-hidden"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 p-8 md:p-12 text-white"> | |
| <span class="bg-yellow-400 text-blue-800 px-3 py-1 rounded-full text-xs font-bold mb-4 inline-block">OFERTA ESPECIAL</span> | |
| <h2 class="text-3xl font-bold mb-4">Kit Limpeza Completa</h2> | |
| <p class="text-blue-100 mb-6">Leve 5 produtos essenciais para limpeza profissional com 30% de desconto</p> | |
| <div class="flex items-center mb-6"> | |
| <span class="text-4xl font-bold">R$ 199,90</span> | |
| <span class="ml-3 text-xl line-through text-blue-200">R$ 285,50</span> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="bg-yellow-400 hover:bg-yellow-300 text-blue-800 font-bold py-3 px-6 rounded-full button-hover button-active"> | |
| Comprar Agora <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button class="border-2 border-white hover:bg-white hover:text-blue-800 font-bold py-3 px-6 rounded-full button-hover button-active"> | |
| Detalhes | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center items-center p-4"> | |
| <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Kit de limpeza" class="rounded-xl max-w-full h-auto md:max-w-md shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-2">O Que Nossos Clientes Dizem</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Avaliações reais de quem já comprou nossos produtos</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl fade-in"> | |
| <div class="flex text-yellow-400 mb-4"> | |
| <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> | |
| <p class="text-gray-700 mb-4">"Produtos de excelente qualidade e atendimento impecável. Compro há anos e nunca tive problemas."</p> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-3">AM</div> | |
| <div> | |
| <h4 class="font-bold">Ana Maria</h4> | |
| <p class="text-sm text-gray-500">Hotelaria</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl fade-in" style="animation-delay: 0.3s;"> | |
| <div class="flex text-yellow-400 mb-4"> | |
| <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> | |
| <p class="text-gray-700 mb-4">"Entrega rápida e produtos que realmente funcionam. O desinfetante concentrado é o melhor que já usei."</p> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-3">CS</div> | |
| <div> | |
| <h4 class="font-bold">Carlos Silva</h4> | |
| <p class="text-sm text-gray-500">Limpeza Profissional</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl fade-in" style="animation-delay: 0.6s;"> | |
| <div class="flex text-yellow-400 mb-4"> | |
| <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> | |
| <p class="text-gray-700 mb-4">"Atendimento excelente e preços competitivos. Já indiquei para vários colegas do ramo hospitalar."</p> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center font-bold mr-3">PF</div> | |
| <div> | |
| <h4 class="font-bold">Patrícia Fernandes</h4> | |
| <p class="text-sm text-gray-500">Setor Hospitalar</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-blue-800 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Receba Nossas Ofertas</h2> | |
| <p class="text-blue-200 max-w-2xl mx-auto mb-8">Cadastre-se e receba promoções exclusivas diretamente no seu e-mail</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Seu melhor e-mail" | |
| class="flex-grow py-3 px-4 rounded-l-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-400"> | |
| <button class="bg-yellow-400 hover:bg-yellow-300 text-blue-800 font-bold py-3 px-6 rounded-r-lg button-hover button-active"> | |
| Cadastrar <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-center space-x-4 mt-6"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-400 mr-2"></i> | |
| <span class="text-sm">Sem spam</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-400 mr-2"></i> | |
| <span class="text-sm">Promoções semanais</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-yellow-400 mr-2"></i> | |
| <span class="text-sm">Pode cancelar quando quiser</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 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-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <span class="text-white">R.a</span> | |
| <span class="text-yellow-300">Superclean</span> | |
| </h3> | |
| <p class="text-gray-400 mb-4">Especialistas em produtos de limpeza profissional desde 2010.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Institucional</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">Nossa História</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Trabalhe Conosco</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Termos de Uso</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Atendimento</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-yellow-300 mt-1 mr-2"></i> | |
| <span class="text-gray-400">Rua Dolores Paraná de Alvarenga, 400 - Jardim Sumaré</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-yellow-300 mr-2"></i> | |
| <span class="text-gray-400">(18) 99774-4757</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-yellow-300 mr-2"></i> | |
| <span class="text-gray-400">contato@rasuperclean.com.br</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-clock text-yellow-300 mr-2"></i> | |
| <span class="text-gray-400">Seg-Sex: 8h às 18h</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Formas de Pagamento</h3> | |
| <div class="grid grid-cols-3 gap-2 mb-4"> | |
| <div class="bg-gray-800 p-2 rounded flex items-center justify-center"> | |
| <i class="fab fa-cc-visa text-2xl"></i> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded flex items-center justify-center"> | |
| <i class="fab fa-cc-mastercard text-2xl"></i> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded flex items-center justify-center"> | |
| <i class="fab fa-cc-amex text-2xl"></i> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded flex items-center justify-center"> | |
| <i class="fab fa-cc-paypal text-2xl"></i> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded flex items-center justify-center"> | |
| <i class="fas fa-barcode text-xl"></i> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded flex items-center justify-center"> | |
| <i class="fas fa-money-bill-wave text-xl"></i> | |
| </div> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Segurança</h3> | |
| <div class="flex space-x-2"> | |
| <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Safe" class="h-8"> | |
| <img src="https://ssl.comodo.com/images/comodo_secure_seal_76x26_transp.png" alt="SSL" class="h-8"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 R.a Superclean. Todos os direitos reservados.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Termos de Serviço</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Política de Privacidade</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Mapa do Site</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating WhatsApp --> | |
| <a href="https://wa.me/5518997744757" class="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center text-2xl shadow-lg button-hover button-active pulse-animation"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| <script> | |
| // Simple animation on scroll | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInOnScroll = function() { | |
| fadeElements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementTop < windowHeight - 100) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| // Set initial state | |
| fadeElements.forEach(element => { | |
| element.style.opacity = '0'; | |
| element.style.transform = 'translateY(20px)'; | |
| element.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'; | |
| }); | |
| // Check on load | |
| fadeInOnScroll(); | |
| // Check on scroll | |
| window.addEventListener('scroll', fadeInOnScroll); | |
| }); | |
| </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=thiago12345678/site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |