Download index.html from script7sistemas/anycoder-e927d014: direct link, hf CLI and curl.
- Browser
- Download file 43.1 kB
-
https://huggingface.co/spaces/script7sistemas/anycoder-e927d014/resolve/main/index.html
- Command line
-
hf download hf://spaces/script7sistemas/anycoder-e927d014/index.html
-
curl -L -o index.html https://huggingface.co/spaces/script7sistemas/anycoder-e927d014/resolve/main/index.html
43.1 kB
| <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> | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #FF6B6B; | |
| border-radius: 5px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #EE5253; | |
| } | |
| /* Glassmorphism Utilities */ | |
| .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 Backgrounds */ | |
| .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); } | |
| } | |
| /* Hide scrollbar for horizontal scroll areas */ | |
| .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"> | |
| <!-- Navigation --> | |
| <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> | |
| <!-- Desktop Menu --> | |
| <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> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-btn" class="md:hidden text-2xl text-slate-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu Overlay --> | |
| <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> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center pt-20 overflow-hidden"> | |
| <!-- Background Blobs --> | |
| <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> | |
| <!-- Stats --> | |
| <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"> | |
| <!-- Decorative Circles --> | |
| <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> | |
| <!-- Main Image --> | |
| <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"> | |
| <!-- Floating Cards --> | |
| <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> | |
| <!-- Services 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"> | |
| <!-- Service 1 --> | |
| <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> | |
| <!-- Service 2 --> | |
| <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> | |
| <!-- Service 3 --> | |
| <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> | |
| <!-- Interactive Calculator Section --> | |
| <section id="calculator" class="py-24 bg-brand-light relative overflow-hidden"> | |
| <!-- Background Pattern --> | |
| <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"> | |
| <!-- Pet Type --> | |
| <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> | |
| <!-- Size --> | |
| <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> | |
| <!-- Fur Length --> | |
| <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> | |
| <!-- Extras --> | |
| <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> | |
| <!-- Decorative Paws --> | |
| <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> | |
| <!-- Products 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> | |
| <!-- Filter Tabs --> | |
| <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> | |
| <!-- Product Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8" id="product-grid"> | |
| <!-- Product 1 --> | |
| <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> | |
| <!-- Product 2 --> | |
| <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> | |
| <!-- Product 3 --> | |
| <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> | |
| <!-- Product 4 --> | |
| <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> | |
| <!-- Testimonials 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"> | |
| <!-- Review 1 --> | |
| <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> | |
| <!-- Review 2 --> | |
| <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> | |
| <!-- Review 3 --> | |
| <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> | |
| <!-- Contact / Footer --> | |
| <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"> | |
| <!-- Brand --> | |
| <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> | |
| <!-- Links --> | |
| <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> | |
| <!-- Contact Info --> | |
| <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> | |
| <!-- Newsletter --> | |
| <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> | |
| <!-- Toast Notification --> | |
| <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> | |
| // --- Navbar Scroll Effect --- | |
| 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'); | |
| } | |
| }); | |
| // --- Mobile Menu --- | |
| 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)); | |
| // --- Price Calculator Logic --- | |
| 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'; // small, medium, large | |
| let basePrice = 45; | |
| // Base prices by size | |
| const sizePrices = { | |
| small: 45, | |
| medium: 65, | |
| large: 85 | |
| }; | |
| // Multipliers |