| <!DOCTYPE html> |
| <html lang="pt-BR" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PetLove | O Melhor Amigo do Seu Melhor Amigo</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Poppins', 'sans-serif'], |
| }, |
| colors: { |
| brand: { |
| light: '#FFF5F5', |
| DEFAULT: '#FF6B6B', |
| dark: '#EE5253', |
| accent: '#48DBFB', |
| darkBlue: '#222F3E' |
| } |
| }, |
| animation: { |
| 'float': 'float 6s ease-in-out infinite', |
| 'float-delayed': 'float 6s ease-in-out 3s infinite', |
| 'wiggle': 'wiggle 1s ease-in-out infinite', |
| 'fade-in-up': 'fadeInUp 0.8s ease-out forwards', |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| }, |
| wiggle: { |
| '0%, 100%': { transform: 'rotate(-3deg)' }, |
| '50%': { transform: 'rotate(3deg)' }, |
| }, |
| fadeInUp: { |
| '0%': { opacity: '0', transform: 'translateY(20px)' }, |
| '100%': { opacity: '1', transform: 'translateY(0)' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| |
| ::-webkit-scrollbar { |
| width: 10px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #FF6B6B; |
| border-radius: 5px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #EE5253; |
| } |
| |
| |
| .glass { |
| background: rgba(255, 255, 255, 0.7); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| } |
| |
| .glass-dark { |
| background: rgba(34, 47, 62, 0.8); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
| } |
| |
| |
| .blob { |
| position: absolute; |
| filter: blur(40px); |
| z-index: -1; |
| opacity: 0.4; |
| animation: move 10s infinite alternate; |
| } |
| @keyframes move { |
| from { transform: translate(0, 0) scale(1); } |
| to { transform: translate(20px, -20px) scale(1.1); } |
| } |
| |
| |
| .no-scrollbar::-webkit-scrollbar { |
| display: none; |
| } |
| .no-scrollbar { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| |
| .reveal { |
| opacity: 0; |
| transform: translateY(30px); |
| transition: all 0.8s ease-out; |
| } |
| .reveal.active { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| </style> |
| </head> |
| <body class="bg-slate-50 text-slate-800 overflow-x-hidden selection:bg-brand selection:text-white"> |
|
|
| |
| <nav id="navbar" class="fixed w-full z-50 transition-all duration-300 py-4"> |
| <div class="container mx-auto px-6 flex justify-between items-center"> |
| <a href="#" class="text-2xl font-bold flex items-center gap-2 text-brand-darkBlue group"> |
| <div class="w-10 h-10 bg-brand rounded-full flex items-center justify-center text-white group-hover:rotate-12 transition-transform"> |
| <i class="fas fa-paw"></i> |
| </div> |
| <span>Pet<span class="text-brand">Love</span></span> |
| </a> |
|
|
| |
| <div class="hidden md:flex items-center gap-8 font-medium text-slate-600"> |
| <a href="#services" class="hover:text-brand transition-colors">Serviços</a> |
| <a href="#products" class="hover:text-brand transition-colors">Produtos</a> |
| <a href="#calculator" class="hover:text-brand transition-colors">Calculadora</a> |
| <a href="#testimonials" class="hover:text-brand transition-colors">Depoimentos</a> |
| </div> |
|
|
| <div class="hidden md:flex items-center gap-4"> |
| <button class="relative p-2 hover:bg-slate-100 rounded-full transition-colors group"> |
| <i class="fas fa-shopping-bag text-xl text-slate-600 group-hover:text-brand"></i> |
| <span id="cart-count" class="absolute top-0 right-0 w-5 h-5 bg-brand text-white text-xs flex items-center justify-center rounded-full transform scale-0 transition-transform duration-300">0</span> |
| </button> |
| <a href="#contact" class="bg-brand hover:bg-brand-dark text-white px-6 py-2.5 rounded-full font-medium transition-all shadow-lg shadow-brand/30 hover:shadow-brand/50 transform hover:-translate-y-0.5"> |
| Agendar Banho |
| </a> |
| </div> |
|
|
| |
| <button id="mobile-menu-btn" class="md:hidden text-2xl text-slate-700"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="mobile-menu" class="fixed inset-0 bg-white z-40 transform translate-x-full transition-transform duration-300 flex flex-col items-center justify-center gap-8 text-xl font-medium"> |
| <button id="close-menu-btn" class="absolute top-6 right-6 text-3xl text-slate-400 hover:text-brand"> |
| <i class="fas fa-times"></i> |
| </button> |
| <a href="#services" class="mobile-link hover:text-brand">Serviços</a> |
| <a href="#products" class="mobile-link hover:text-brand">Produtos</a> |
| <a href="#calculator" class="mobile-link hover:text-brand">Calculadora</a> |
| <a href="#contact" class="mobile-link text-brand font-bold">Agendar Agora</a> |
| </div> |
| </nav> |
|
|
| |
| <section class="relative min-h-screen flex items-center pt-20 overflow-hidden"> |
| |
| <div class="blob bg-brand/30 w-96 h-96 rounded-full top-0 left-0 -translate-x-1/2 -translate-y-1/2"></div> |
| <div class="blob bg-brand-accent/20 w-80 h-80 rounded-full bottom-0 right-0 translate-x-1/3 translate-y-1/3 animation-delay-2000"></div> |
|
|
| <div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center relative z-10"> |
| <div class="space-y-8 reveal active"> |
| <div class="inline-flex items-center gap-2 px-4 py-2 bg-brand/10 text-brand rounded-full text-sm font-semibold tracking-wide uppercase"> |
| <span class="w-2 h-2 bg-brand rounded-full animate-pulse"></span> |
| Cuidado Premium para Pets |
| </div> |
| <h1 class="text-5xl md:text-7xl font-extrabold text-slate-900 leading-tight"> |
| Seu pet merece o <br> |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand to-brand-accent">melhor cuidado</span> |
| </h1> |
| <p class="text-lg text-slate-600 max-w-lg leading-relaxed"> |
| Oferecemos serviços de banho, tosa e spa com produtos de alta qualidade. Tratamos seu melhor amigo como parte da nossa família. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#services" class="bg-brand hover:bg-brand-dark text-white px-8 py-4 rounded-full font-bold text-lg transition-all shadow-xl shadow-brand/30 hover:shadow-brand/50 transform hover:-translate-y-1 flex items-center gap-2"> |
| Explorar Serviços <i class="fas fa-arrow-right"></i> |
| </a> |
| <a href="#video-modal" class="bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 px-8 py-4 rounded-full font-bold text-lg transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1 flex items-center gap-2 group"> |
| <div class="w-8 h-8 bg-brand/10 rounded-full flex items-center justify-center text-brand group-hover:bg-brand group-hover:text-white transition-colors"> |
| <i class="fas fa-play text-xs"></i> |
| </div> |
| Ver Vídeo |
| </a> |
| </div> |
| |
| |
| <div class="flex gap-8 pt-8 border-t border-slate-200"> |
| <div> |
| <h4 class="text-3xl font-bold text-slate-900">2k+</h4> |
| <p class="text-sm text-slate-500">Pets Felizes</p> |
| </div> |
| <div> |
| <h4 class="text-3xl font-bold text-slate-900">15+</h4> |
| <p class="text-sm text-slate-500">Especialistas</p> |
| </div> |
| <div> |
| <h4 class="text-3xl font-bold text-slate-900">4.9</h4> |
| <p class="text-sm text-slate-500">Avaliação Média</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative h-full min-h-[500px] flex items-center justify-center reveal active delay-200"> |
| |
| <div class="absolute w-[500px] h-[500px] border-2 border-dashed border-slate-200 rounded-full animate-[spin_20s_linear_infinite]"></div> |
| <div class="absolute w-[400px] h-[400px] border-2 border-dashed border-brand/20 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div> |
| |
| |
| <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" |
| alt="Cachorro Feliz" |
| class="relative z-10 w-full max-w-md object-contain drop-shadow-2xl animate-float mask-image-gradient"> |
| |
| |
| <div class="absolute top-20 left-0 glass p-4 rounded-2xl shadow-lg animate-float-delayed z-20 max-w-[180px]"> |
| <div class="flex items-center gap-3 mb-2"> |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600"> |
| <i class="fas fa-check"></i> |
| </div> |
| <span class="font-bold text-sm">Banho Concluído</span> |
| </div> |
| <p class="text-xs text-slate-500">Thor está pronto e cheiroso!</p> |
| </div> |
|
|
| <div class="absolute bottom-20 right-0 glass p-4 rounded-2xl shadow-lg animate-float z-20"> |
| <div class="flex items-center gap-3"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Client"> |
| <div> |
| <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> |
| <p class="text-xs font-bold text-slate-700">"Adorei o serviço!"</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-24 bg-white relative"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center max-w-2xl mx-auto mb-16 reveal"> |
| <h2 class="text-brand font-bold tracking-wider uppercase mb-2">Nossos Serviços</h2> |
| <h3 class="text-4xl font-bold text-slate-900 mb-4">Cuidado Completo para seu Pet</h3> |
| <p class="text-slate-600">Do banho simples ao spa completo, temos tudo o que seu amigo de quatro patas precisa para ficar limpo, saudável e feliz.</p> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="group bg-slate-50 rounded-3xl p-8 hover:bg-brand transition-colors duration-500 cursor-pointer reveal"> |
| <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-brand text-2xl shadow-sm mb-6 group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300"> |
| <i class="fas fa-shower"></i> |
| </div> |
| <h4 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-white">Banho & Tosa</h4> |
| <p class="text-slate-600 mb-6 group-hover:text-white/90">Higienização completa com produtos hipoalergênicos e tosa personalizada na máquina ou na tesoura.</p> |
| <a href="#" class="inline-flex items-center font-semibold text-brand group-hover:text-white"> |
| Saiba mais <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform"></i> |
| </a> |
| </div> |
|
|
| |
| <div class="group bg-slate-50 rounded-3xl p-8 hover:bg-brand transition-colors duration-500 cursor-pointer reveal delay-100"> |
| <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-brand text-2xl shadow-sm mb-6 group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300"> |
| <i class="fas fa-spa"></i> |
| </div> |
| <h4 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-white">Spa & Relax</h4> |
| <p class="text-slate-600 mb-6 group-hover:text-white/90">Hidratação de pelos, limpeza de ouvido, corte de unhas e massagem terapêutica para relaxar.</p> |
| <a href="#" class="inline-flex items-center font-semibold text-brand group-hover:text-white"> |
| Saiba mais <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform"></i> |
| </a> |
| </div> |
|
|
| |
| <div class="group bg-slate-50 rounded-3xl p-8 hover:bg-brand transition-colors duration-500 cursor-pointer reveal delay-200"> |
| <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-brand text-2xl shadow-sm mb-6 group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300"> |
| <i class="fas fa-hotel"></i> |
| </div> |
| <h4 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-white">Hotel & Creche</h4> |
| <p class="text-slate-600 mb-6 group-hover:text-white/90">Cuidamos do seu pet enquanto você viaja ou trabalha. Ambiente seguro e monitorado 24h.</p> |
| <a href="#" class="inline-flex items-center font-semibold text-brand group-hover:text-white"> |
| Saiba mais <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="calculator" class="py-24 bg-brand-light relative overflow-hidden"> |
| |
| <div class="absolute inset-0 opacity-5" style="background-image: radial-gradient(#FF6B6B 1px, transparent 1px); background-size: 20px 20px;"></div> |
|
|
| <div class="container mx-auto px-6 relative z-10"> |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> |
| <div class="reveal"> |
| <h2 class="text-brand font-bold tracking-wider uppercase mb-2">Simule Agora</h2> |
| <h3 class="text-4xl font-bold text-slate-900 mb-6">Calcule o valor do banho do seu pet</h3> |
| <p class="text-slate-600 mb-8 text-lg">Selecione as características do seu pet para obter uma estimativa de preço instantânea. Preços reais podem variar conforme o estado do pelo.</p> |
| |
| <div class="bg-white p-8 rounded-3xl shadow-xl"> |
| <form id="price-form" class="space-y-6"> |
| |
| <div> |
| <label class="block text-sm font-bold text-slate-700 mb-3">Tipo de Pet</label> |
| <div class="grid grid-cols-2 gap-4"> |
| <label class="cursor-pointer"> |
| <input type="radio" name="petType" value="dog" class="peer sr-only" checked> |
| <div class="p-4 rounded-xl border-2 border-slate-200 peer-checked:border-brand peer-checked:bg-brand/5 hover:bg-slate-50 transition-all text-center"> |
| <i class="fas fa-dog text-2xl mb-2 text-slate-400 peer-checked:text-brand"></i> |
| <div class="font-semibold text-slate-700">Cachorro</div> |
| </div> |
| </label> |
| <label class="cursor-pointer"> |
| <input type="radio" name="petType" value="cat" class="peer sr-only"> |
| <div class="p-4 rounded-xl border-2 border-slate-200 peer-checked:border-brand peer-checked:bg-brand/5 hover:bg-slate-50 transition-all text-center"> |
| <i class="fas fa-cat text-2xl mb-2 text-slate-400 peer-checked:text-brand"></i> |
| <div class="font-semibold text-slate-700">Gato</div> |
| </div> |
| </label> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <label class="block text-sm font-bold text-slate-700 mb-3">Porte</label> |
| <div class="flex gap-2 bg-slate-100 p-1 rounded-xl"> |
| <button type="button" class="size-btn flex-1 py-2 rounded-lg text-sm font-medium transition-all bg-white shadow-sm text-brand" data-value="small">Pequeno</button> |
| <button type="button" class="size-btn flex-1 py-2 rounded-lg text-sm font-medium text-slate-500 hover:text-slate-700 transition-all" data-value="medium">Médio</button> |
| <button type="button" class="size-btn flex-1 py-2 rounded-lg text-sm font-medium text-slate-500 hover:text-slate-700 transition-all" data-value="large">Grande</button> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <label class="block text-sm font-bold text-slate-700 mb-3">Pelagem</label> |
| <select id="fur-length" class="w-full p-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-2 focus:ring-brand/20 outline-none transition-all bg-white"> |
| <option value="short">Curta</option> |
| <option value="medium">Média</option> |
| <option value="long">Longa</option> |
| </select> |
| </div> |
|
|
| |
| <div> |
| <label class="block text-sm font-bold text-slate-700 mb-3">Adicionais</label> |
| <div class="space-y-2"> |
| <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer transition-colors"> |
| <input type="checkbox" class="w-5 h-5 rounded border-slate-300 text-brand focus:ring-brand" data-price="20"> |
| <span class="flex-1 font-medium text-slate-700">Hidratação</span> |
| <span class="text-sm text-slate-500">+R$ 20</span> |
| </label> |
| <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer transition-colors"> |
| <input type="checkbox" class="w-5 h-5 rounded border-slate-300 text-brand focus:ring-brand" data-price="15"> |
| <span class="flex-1 font-medium text-slate-700">Transporte (Ida e Volta)</span> |
| <span class="text-sm text-slate-500">+R$ 15</span> |
| </label> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| <div class="flex flex-col items-center justify-center reveal delay-200"> |
| <div class="bg-white p-10 rounded-full w-80 h-80 flex flex-col items-center justify-center shadow-2xl border-8 border-brand/10 relative"> |
| <span class="text-slate-400 font-medium uppercase tracking-widest text-sm">Estimativa Total</span> |
| <div class="text-6xl font-black text-brand-darkBlue my-2 flex items-start"> |
| <span class="text-3xl mt-1">R$</span> |
| <span id="total-price">45</span> |
| </div> |
| <span class="text-slate-400 text-xs text-center px-4">*Valores sujeitos a alteração na loja</span> |
| |
| |
| <i class="fas fa-paw absolute top-4 right-10 text-brand/20 text-2xl rotate-12"></i> |
| <i class="fas fa-paw absolute bottom-10 left-8 text-brand/20 text-xl -rotate-12"></i> |
| </div> |
| <button class="mt-8 bg-brand-darkBlue text-white px-8 py-3 rounded-full font-bold hover:bg-slate-800 transition-colors shadow-lg"> |
| Agendar Este Serviço |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="products" class="py-24 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-end mb-12 reveal"> |
| <div class="max-w-xl"> |
| <h2 class="text-brand font-bold tracking-wider uppercase mb-2">Loja PetLove</h2> |
| <h3 class="text-4xl font-bold text-slate-900">Produtos Selecionados</h3> |
| </div> |
| |
| |
| <div class="flex gap-2 mt-6 md:mt-0 overflow-x-auto pb-2 md:pb-0 no-scrollbar w-full md:w-auto"> |
| <button class="filter-btn active px-6 py-2 rounded-full border border-slate-200 text-sm font-bold transition-all bg-brand text-white border-brand" data-filter="all">Todos</button> |
| <button class="filter-btn px-6 py-2 rounded-full border border-slate-200 text-slate-600 text-sm font-bold hover:border-brand hover:text-brand transition-all" data-filter="food">Ração</button> |
| <button class="filter-btn px-6 py-2 rounded-full border border-slate-200 text-slate-600 text-sm font-bold hover:border-brand hover:text-brand transition-all" data-filter="toys">Brinquedos</button> |
| <button class="filter-btn px-6 py-2 rounded-full border border-slate-200 text-slate-600 text-sm font-bold hover:border-brand hover:text-brand transition-all" data-filter="accessories">Acessórios</button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8" id="product-grid"> |
| |
| <div class="product-card group" data-category="food"> |
| <div class="relative bg-slate-50 rounded-3xl p-6 mb-4 overflow-hidden aspect-square flex items-center justify-center"> |
| <span class="absolute top-4 left-4 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">-10%</span> |
| <button class="absolute top-4 right-4 w-8 h-8 bg-white rounded-full shadow-md flex items-center justify-center text-slate-400 hover:text-red-500 transition-colors z-10"> |
| <i class="fas fa-heart"></i> |
| </button> |
| <img src="https://images.unsplash.com/photo-1589924691195-41432c84c161?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Ração Premium" class="w-3/4 object-contain group-hover:scale-110 transition-transform duration-500"> |
| <button onclick="addToCart()" class="absolute bottom-0 left-0 right-0 bg-brand text-white py-3 translate-y-full group-hover:translate-y-0 transition-transform duration-300 font-bold"> |
| Adicionar ao Carrinho |
| </button> |
| </div> |
| <div class="px-2"> |
| <div class="text-xs text-slate-400 font-bold uppercase mb-1">Ração</div> |
| <h4 class="font-bold text-slate-900 text-lg mb-2 group-hover:text-brand transition-colors">Ração Premium Grain Free</h4> |
| <div class="flex items-center gap-2"> |
| <span class="text-xl font-bold text-brand-darkBlue">R$ 129,90</span> |
| <span class="text-sm text-slate-400 line-through">R$ 145,00</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="product-card group" data-category="toys"> |
| <div class="relative bg-slate-50 rounded-3xl p-6 mb-4 overflow-hidden aspect-square flex items-center justify-center"> |
| <button class="absolute top-4 right-4 w-8 h-8 bg-white rounded-full shadow-md flex items-center justify-center text-slate-400 hover:text-red-500 transition-colors z-10"> |
| <i class="fas fa-heart"></i> |
| </button> |
| <img src="https://images.unsplash.com/photo-1576201836106-db1758fd1c97?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Brinquedo" class="w-3/4 object-contain group-hover:scale-110 transition-transform duration-500"> |
| <button onclick="addToCart()" class="absolute bottom-0 left-0 right-0 bg-brand text-white py-3 translate-y-full group-hover:translate-y-0 transition-transform duration-300 font-bold"> |
| Adicionar ao Carrinho |
| </button> |
| </div> |
| <div class="px-2"> |
| <div class="text-xs text-slate-400 font-bold uppercase mb-1">Brinquedos</div> |
| <h4 class="font-bold text-slate-900 text-lg mb-2 group-hover:text-brand transition-colors">Bolinha Interativa LED</h4> |
| <div class="flex items-center gap-2"> |
| <span class="text-xl font-bold text-brand-darkBlue">R$ 39,90</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="product-card group" data-category="accessories"> |
| <div class="relative bg-slate-50 rounded-3xl p-6 mb-4 overflow-hidden aspect-square flex items-center justify-center"> |
| <span class="absolute top-4 left-4 bg-brand text-white text-xs font-bold px-2 py-1 rounded">Novo</span> |
| <button class="absolute top-4 right-4 w-8 h-8 bg-white rounded-full shadow-md flex items-center justify-center text-slate-400 hover:text-red-500 transition-colors z-10"> |
| <i class="fas fa-heart"></i> |
| </button> |
| <img src="https://images.unsplash.com/photo-1601758228041-f3b2795255f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Coleira" class="w-3/4 object-contain group-hover:scale-110 transition-transform duration-500"> |
| <button onclick="addToCart()" class="absolute bottom-0 left-0 right-0 bg-brand text-white py-3 translate-y-full group-hover:translate-y-0 transition-transform duration-300 font-bold"> |
| Adicionar ao Carrinho |
| </button> |
| </div> |
| <div class="px-2"> |
| <div class="text-xs text-slate-400 font-bold uppercase mb-1">Acessórios</div> |
| <h4 class="font-bold text-slate-900 text-lg mb-2 group-hover:text-brand transition-colors">Coleira Reflectiva Premium</h4> |
| <div class="flex items-center gap-2"> |
| <span class="text-xl font-bold text-brand-darkBlue">R$ 59,90</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="product-card group" data-category="food"> |
| <div class="relative bg-slate-50 rounded-3xl p-6 mb-4 overflow-hidden aspect-square flex items-center justify-center"> |
| <button class="absolute top-4 right-4 w-8 h-8 bg-white rounded-full shadow-md flex items-center justify-center text-slate-400 hover:text-red-500 transition-colors z-10"> |
| <i class="fas fa-heart"></i> |
| </button> |
| <img src="https://images.unsplash.com/photo-1623366302587-b38b1ddaefd9?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Petisco" class="w-3/4 object-contain group-hover:scale-110 transition-transform duration-500"> |
| <button onclick="addToCart()" class="absolute bottom-0 left-0 right-0 bg-brand text-white py-3 translate-y-full group-hover:translate-y-0 transition-transform duration-300 font-bold"> |
| Adicionar ao Carrinho |
| </button> |
| </div> |
| <div class="px-2"> |
| <div class="text-xs text-slate-400 font-bold uppercase mb-1">Petiscos</div> |
| <h4 class="font-bold text-slate-900 text-lg mb-2 group-hover:text-brand transition-colors">Snack Natural de Frango</h4> |
| <div class="flex items-center gap-2"> |
| <span class="text-xl font-bold text-brand-darkBlue">R$ 24,90</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-24 bg-brand-darkBlue text-white relative overflow-hidden"> |
| <div class="absolute top-0 right-0 w-64 h-64 bg-brand rounded-full filter blur-[100px] opacity-20"></div> |
| <div class="absolute bottom-0 left-0 w-96 h-96 bg-brand-accent rounded-full filter blur-[120px] opacity-10"></div> |
|
|
| <div class="container mx-auto px-6 relative z-10"> |
| <div class="text-center max-w-2xl mx-auto mb-16 reveal"> |
| <h2 class="text-brand font-bold tracking-wider uppercase mb-2">Depoimentos</h2> |
| <h3 class="text-4xl font-bold mb-4">O que os tutores dizem</h3> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors reveal"> |
| <div class="flex text-yellow-400 mb-4 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> |
| <p class="text-slate-300 mb-6 italic">"A equipe é incrível! Meu cachorro é muito medroso, mas eles souberam lidar com ele perfeitamente. Saíram melhores amigos."</p> |
| <div class="flex items-center gap-4"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-12 h-12 rounded-full border-2 border-brand" alt="User"> |
| <div> |
| <h5 class="font-bold">Ana Carolina</h5> |
| <span class="text-xs text-slate-400">Tutora da Luna</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors reveal delay-100"> |
| <div class="flex text-yellow-400 mb-4 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> |
| <p class="text-slate-300 mb-6 italic">"Melhor pet shop da cidade. O spa deles é divino, o pelo do meu gato nunca esteve tão macio. Recomendo demais!"</p> |
| <div class="flex items-center gap-4"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full border-2 border-brand" alt="User"> |
| <div> |
| <h5 class="font-bold">Roberto Silva</h5> |
| <span class="text-xs text-slate-400">Tutor do Fred</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors reveal delay-200"> |
| <div class="flex text-yellow-400 mb-4 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> |
| <p class="text-slate-300 mb-6 italic">"Serviço de hotel impecável. Recebi fotos todos os dias e quando busquei ele estava super feliz. Voltarei sempre."</p> |
| <div class="flex items-center gap-4"> |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-12 h-12 rounded-full border-2 border-brand" alt="User"> |
| <div> |
| <h5 class="font-bold">Julia Mendes</h5> |
| <span class="text-xs text-slate-400">Tutora do Thor</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer id="contact" class="bg-slate-50 pt-24 pb-12 border-t border-slate-200"> |
| <div class="container mx-auto px-6"> |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16"> |
| |
| <div> |
| <a href="#" class="text-2xl font-bold flex items-center gap-2 text-brand-darkBlue mb-6"> |
| <div class="w-10 h-10 bg-brand rounded-full flex items-center justify-center text-white"> |
| <i class="fas fa-paw"></i> |
| </div> |
| <span>Pet<span class="text-brand">Love</span></span> |
| </a> |
| <p class="text-slate-500 mb-6">Cuidando do seu melhor amigo com amor, dedicação e os melhores produtos do mercado desde 2015.</p> |
| <div class="flex gap-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center text-slate-400 hover:bg-brand hover:text-white transition-all"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center text-slate-400 hover:bg-brand hover:text-white transition-all"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center text-slate-400 hover:bg-brand hover:text-white transition-all"><i class="fab fa-whatsapp"></i></a> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h4 class="font-bold text-slate-900 mb-6">Links Rápidos</h4> |
| <ul class="space-y-4 text-slate-500"> |
| <li><a href="#" class="hover:text-brand transition-colors">Sobre Nós</a></li> |
| <li><a href="#" class="hover:text-brand transition-colors">Nossos Serviços</a></li> |
| <li><a href="#" class="hover:text-brand transition-colors">Loja Online</a></li> |
| <li><a href="#" class="hover:text-brand transition-colors">Agendamento</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div> |
| <h4 class="font-bold text-slate-900 mb-6">Contato</h4> |
| <ul class="space-y-4 text-slate-500"> |
| <li class="flex items-start gap-3"> |
| <i class="fas fa-map-marker-alt mt-1 text-brand"></i> |
| <span>Rua dos Pets, 123<br>Bairro Feliz, São Paulo - SP</span> |
| </li> |
| <li class="flex items-center gap-3"> |
| <i class="fas fa-phone text-brand"></i> |
| <span>(11) 99999-9999</span> |
| </li> |
| <li class="flex items-center gap-3"> |
| <i class="fas fa-envelope text-brand"></i> |
| <span>contato@petlove.com</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div> |
| <h4 class="font-bold text-slate-900 mb-6">Newsletter</h4> |
| <p class="text-slate-500 mb-4 text-sm">Receba dicas e promoções exclusivas.</p> |
| <form class="flex flex-col gap-3" onsubmit="event.preventDefault(); alert('Obrigado por se inscrever!');"> |
| <input type="email" placeholder="Seu e-mail" class="px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-2 focus:ring-brand/20 outline-none transition-all"> |
| <button type="submit" class="bg-brand-darkBlue text-white px-4 py-3 rounded-xl font-bold hover:bg-slate-800 transition-colors">Inscrever</button> |
| </form> |
| </div> |
| </div> |
|
|
| <div class="border-t border-slate-200 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"> |
| <p class="text-slate-400 text-sm">© 2023 PetLove. Todos os direitos reservados.</p> |
| <p class="text-slate-400 text-sm">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-brand hover:underline">anycoder</a></p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="toast" class="fixed bottom-8 right-8 bg-slate-900 text-white px-6 py-4 rounded-xl shadow-2xl transform translate-y-32 transition-transform duration-300 z-50 flex items-center gap-4"> |
| <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center"> |
| <i class="fas fa-check text-sm"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-sm">Adicionado!</h4> |
| <p class="text-xs text-slate-300">Produto adicionado ao carrinho.</p> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const navbar = document.getElementById('navbar'); |
| window.addEventListener('scroll', () => { |
| if (window.scrollY > 50) { |
| navbar.classList.add('glass-dark', 'shadow-lg'); |
| navbar.classList.remove('py-4'); |
| navbar.classList.add('py-2'); |
| } else { |
| navbar.classList.remove('glass-dark', 'shadow-lg'); |
| navbar.classList.remove('py-2'); |
| navbar.classList.add('py-4'); |
| } |
| }); |
| |
| |
| const mobileMenuBtn = document.getElementById('mobile-menu-btn'); |
| const closeMenuBtn = document.getElementById('close-menu-btn'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| const mobileLinks = document.querySelectorAll('.mobile-link'); |
| |
| function toggleMenu() { |
| mobileMenu.classList.toggle('translate-x-full'); |
| } |
| |
| mobileMenuBtn.addEventListener('click', toggleMenu); |
| closeMenuBtn.addEventListener('click', toggleMenu); |
| mobileLinks.forEach(link => link.addEventListener('click', toggleMenu)); |
| |
| |
| const sizeBtns = document.querySelectorAll('.size-btn'); |
| const checkboxes = document.querySelectorAll('input[type="checkbox"]'); |
| const petTypeRadios = document.querySelectorAll('input[name="petType"]'); |
| const furSelect = document.getElementById('fur-length'); |
| const totalPriceEl = document.getElementById('total-price'); |
| |
| let currentSize = 'small'; |
| let basePrice = 45; |
| |
| |
| const sizePrices = { |
| small: 45, |
| medium: 65, |
| large: 85 |
| }; |
| |
| |
