File size: 43,141 Bytes
7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 7c7e841 f3148c2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 | <!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>
/* 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 |