Hugging Face's logo

Spaces:
script7sistemas
/
anycoder-e927d014
Running

App Files Community
script7sistemas commited on
Commit
f3148c2
·
verified ·
1 Parent(s): 0973640

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +552 -450
index.html CHANGED
@@ -3,375 +3,490 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LUMINA | Fotografia Ultra-Moderna</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
-
11
  <script>
12
  tailwind.config = {
13
  theme: {
14
  extend: {
15
  fontFamily: {
16
- sans: ['Space Grotesk', 'sans-serif'],
17
- display: ['Syne', 'sans-serif'],
18
  },
19
  colors: {
20
- primary: '#0a0a0a',
21
- accent: '#ff3e00', // Vibrant Orange/Red
22
- secondary: '#1a1a1a',
23
- light: '#f4f4f0',
 
 
 
24
  },
25
  animation: {
26
- 'spin-slow': 'spin 12s linear infinite',
27
- 'marquee': 'marquee 25s linear infinite',
28
  'float': 'float 6s ease-in-out infinite',
 
 
 
29
  },
30
  keyframes: {
31
- marquee: {
32
- '0%': { transform: 'translateX(0%)' },
33
- '100%': { transform: 'translateX(-100%)' },
34
- },
35
  float: {
36
  '0%, 100%': { transform: 'translateY(0)' },
37
  '50%': { transform: 'translateY(-20px)' },
 
 
 
 
 
 
 
 
38
  }
39
  }
40
  }
41
  }
42
  }
43
  </script>
44
-
45
  <style>
46
- /* Custom Cursor */
47
- body {
48
- cursor: none;
49
- background-color: #0a0a0a;
50
- color: #f4f4f0;
51
- overflow-x: hidden;
52
- }
53
-
54
- .cursor-dot,
55
- .cursor-outline {
56
- position: fixed;
57
- top: 0;
58
- left: 0;
59
- transform: translate(-50%, -50%);
60
- border-radius: 50%;
61
- z-index: 9999;
62
- pointer-events: none;
63
- }
64
-
65
- .cursor-dot {
66
- width: 8px;
67
- height: 8px;
68
- background-color: #ff3e00;
69
- }
70
-
71
- .cursor-outline {
72
- width: 40px;
73
- height: 40px;
74
- border: 1px solid rgba(255, 255, 255, 0.5);
75
- transition: width 0.2s, height 0.2s, background-color 0.2s;
76
  }
77
-
78
- body:hover .cursor-outline.hovered {
79
- width: 80px;
80
- height: 80px;
81
- background-color: rgba(255, 62, 0, 0.1);
82
- border-color: #ff3e00;
83
- backdrop-filter: blur(2px);
84
  }
85
-
86
- /* Smooth Scroll Reveal */
87
- .reveal {
88
- opacity: 0;
89
- transform: translateY(50px);
90
- transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
91
  }
92
-
93
- .reveal.active {
94
- opacity: 1;
95
- transform: translateY(0);
96
  }
97
 
98
- /* Text Stroke Effect */
99
- .text-stroke {
100
- -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
101
- color: transparent;
102
- transition: all 0.5s ease;
 
103
  }
104
 
105
- .text-stroke:hover {
106
- -webkit-text-stroke: 1px #ff3e00;
107
- color: #ff3e00;
 
 
108
  }
109
 
110
- /* Glitch Effect on Hover */
111
- .glitch-hover:hover {
112
- animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
113
- color: #ff3e00;
 
 
 
114
  }
115
-
116
- @keyframes glitch {
117
- 0% { transform: translate(0) }
118
- 20% { transform: translate(-2px, 2px) }
119
- 40% { transform: translate(-2px, -2px) }
120
- 60% { transform: translate(2px, 2px) }
121
- 80% { transform: translate(2px, -2px) }
122
- 100% { transform: translate(0) }
123
  }
124
 
125
- /* Hide Scrollbar */
126
- ::-webkit-scrollbar {
127
- width: 8px;
128
- }
129
- ::-webkit-scrollbar-track {
130
- background: #0a0a0a;
131
- }
132
- ::-webkit-scrollbar-thumb {
133
- background: #333;
134
- border-radius: 4px;
135
  }
136
- ::-webkit-scrollbar-thumb:hover {
137
- background: #ff3e00;
 
138
  }
139
 
140
- /* Magnetic Button */
141
- .magnetic-btn {
142
- transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
143
- }
144
-
145
- /* Image Tilt */
146
- .tilt-card {
147
- transform-style: preserve-3d;
148
- transform: perspective(1000px);
149
  }
150
-
151
- .tilt-content {
152
- transform: translateZ(20px);
153
  }
154
  </style>
155
  </head>
156
- <body class="antialiased selection:bg-accent selection:text-white">
157
-
158
- <!-- Custom Cursor Elements -->
159
- <div class="cursor-dot hidden md:block"></div>
160
- <div class="cursor-outline hidden md:block"></div>
161
 
162
  <!-- Navigation -->
163
- <nav class="fixed w-full z-50 mix-blend-difference text-white px-6 py-6 flex justify-between items-center">
164
- <a href="#" class="text-2xl font-display font-bold tracking-tighter hover-trigger" data-cursor="logo">
165
- LUMINA<span class="text-accent">.</span>
166
- </a>
167
-
168
- <div class="hidden md:flex space-x-8 text-sm font-medium uppercase tracking-widest">
169
- <a href="#portfolio" class="hover:text-accent transition-colors hover-trigger">Obras</a>
170
- <a href="#about" class="hover:text-accent transition-colors hover-trigger">Sobre</a>
171
- <a href="#services" class="hover:text-accent transition-colors hover-trigger">Serviços</a>
172
- </div>
173
-
174
- <button class="hover-trigger border border-white/30 px-6 py-2 rounded-full text-xs uppercase tracking-widest hover:bg-white hover:text-black transition-all duration-300">
175
- Contato
176
- </button>
177
- </nav>
 
178
 
179
- <!-- Hero Section -->
180
- <header class="relative h-screen w-full flex items-center justify-center overflow-hidden">
181
- <!-- Background Video/Image Placeholder with Parallax -->
182
- <div id="hero-bg" class="absolute inset-0 z-0 opacity-40 scale-110">
183
- <img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?q=80&w=2000&auto=format&fit=crop" alt="Photography Background" class="w-full h-full object-cover grayscale contrast-125">
184
- </div>
185
- <div class="absolute inset-0 bg-gradient-to-b from-primary/50 via-primary/20 to-primary z-10"></div>
186
-
187
- <!-- Main Content -->
188
- <div class="relative z-20 text-center px-4 max-w-7xl mx-auto">
189
- <p class="reveal text-accent font-mono text-sm md:text-base mb-4 tracking-[0.5em] uppercase">Capturando a Essência</p>
190
-
191
- <h1 class="reveal font-display text-6xl md:text-9xl font-bold leading-tight tracking-tighter mb-6 mix-blend-overlay">
192
- VISÃO <br>
193
- <span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500">ALÉM</span>
194
- </h1>
195
-
196
- <div class="reveal flex flex-col md:flex-row items-center justify-center gap-8 mt-12">
197
- <a href="#portfolio" class="magnetic-btn group relative px-8 py-4 bg-white text-black font-bold uppercase tracking-wider overflow-hidden hover-trigger">
198
- <span class="relative z-10 group-hover:text-white transition-colors duration-300">Ver Portfólio</span>
199
- <div class="absolute inset-0 bg-accent transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 ease-out"></div>
200
- </a>
201
-
202
- <a href="#about" class="group flex items-center gap-3 text-sm uppercase tracking-widest hover:text-accent transition-colors hover-trigger">
203
- <span>Conheça o Artista</span>
204
- <i class="fas fa-arrow-right transform group-hover:translate-x-2 transition-transform"></i>
205
  </a>
206
  </div>
207
- </div>
208
 
209
- <!-- Scroll Indicator -->
210
- <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20 flex flex-col items-center gap-2 opacity-50">
211
- <div class="w-[1px] h-16 bg-gradient-to-b from-transparent via-white to-transparent"></div>
 
212
  </div>
213
- </header>
214
-
215
- <!-- Marquee Section -->
216
- <div class="bg-accent py-4 overflow-hidden border-y border-white/10">
217
- <div class="whitespace-nowrap flex animate-marquee">
218
- <span class="text-4xl md:text-6xl font-display font-bold text-black mx-8">FOTOGRAFIA EDITORIAL</span>
219
- <span class="text-4xl md:text-6xl font-display font-bold text-black/50 mx-8">•</span>
220
- <span class="text-4xl md:text-6xl font-display font-bold text-black mx-8">RETRATOS ARTÍSTICOS</span>
221
- <span class="text-4xl md:text-6xl font-display font-bold text-black/50 mx-8">•</span>
222
- <span class="text-4xl md:text-6xl font-display font-bold text-black mx-8">FOTOJORNALISMO</span>
223
- <span class="text-4xl md:text-6xl font-display font-bold text-black/50 mx-8">•</span>
224
- <span class="text-4xl md:text-6xl font-display font-bold text-black mx-8">ARQUITETURA</span>
225
- <span class="text-4xl md:text-6xl font-display font-bold text-black/50 mx-8">•</span>
226
- <span class="text-4xl md:text-6xl font-display font-bold text-black mx-8">FOTOGRAFIA EDITORIAL</span>
227
- <span class="text-4xl md:text-6xl font-display font-bold text-black/50 mx-8">•</span>
228
- <span class="text-4xl md:text-6xl font-display font-bold text-black mx-8">RETRATOS ARTÍSTICOS</span>
229
- <span class="text-4xl md:text-6xl font-display font-bold text-black/50 mx-8">•</span>
230
  </div>
231
- </div>
232
 
233
- <!-- Selected Works (Portfolio) -->
234
- <section id="portfolio" class="py-24 px-6 md:px-12 bg-primary relative">
235
- <div class="max-w-7xl mx-auto">
236
- <div class="flex flex-col md:flex-row justify-between items-end mb-20 reveal">
237
- <div>
238
- <h2 class="text-5xl md:text-7xl font-display font-bold mb-2">OBRAS <span class="text-accent">SELECIONADAS</span></h2>
239
- <p class="text-gray-400 max-w-md">Uma curadoria visual dos projetos mais desafiadores e emocionais.</p>
 
 
 
 
240
  </div>
241
- <div class="hidden md:block">
242
- <span class="text-8xl font-display text-white/5 font-bold">01</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
243
  </div>
244
  </div>
245
 
246
- <!-- Interactive Grid -->
247
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16">
 
 
248
 
249
- <!-- Item 1 -->
250
- <div class="group relative reveal tilt-card cursor-pointer hover-trigger" data-cursor="view">
251
- <div class="overflow-hidden rounded-sm aspect-[3/4] relative">
252
- <div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors duration-500 z-10"></div>
253
- <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1000&auto=format&fit=crop" alt="Portrait" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700 ease-out grayscale group-hover:grayscale-0">
254
-
255
- <!-- Floating Number -->
256
- <div class="absolute top-4 left-4 z-20 text-6xl font-display font-bold text-white/20 group-hover:text-accent transition-colors duration-300">01</div>
257
- </div>
258
- <div class="mt-6 flex justify-between items-center border-b border-white/10 pb-4 group-hover:border-accent transition-colors">
259
- <div>
260
- <h3 class="text-2xl font-display font-bold">ETHEREAL GAZE</h3>
261
- <p class="text-sm text-gray-400 uppercase tracking-widest">Retrato / Moda</p>
262
  </div>
263
- <i class="fas fa-arrow-up-right text-2xl transform group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform text-white group-hover:text-accent"></i>
264
  </div>
 
265
  </div>
266
 
267
- <!-- Item 2 (Offset) -->
268
- <div class="group relative reveal tilt-card cursor-pointer hover-trigger md:mt-24" data-cursor="view">
269
- <div class="overflow-hidden rounded-sm aspect-[3/4] relative">
270
- <div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors duration-500 z-10"></div>
271
- <img src="https://images.unsplash.com/photo-1480796927426-f609979314bd?q=80&w=1000&auto=format&fit=crop" alt="Urban" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700 ease-out grayscale group-hover:grayscale-0">
272
- <div class="absolute top-4 left-4 z-20 text-6xl font-display font-bold text-white/20 group-hover:text-accent transition-colors duration-300">02</div>
273
- </div>
274
- <div class="mt-6 flex justify-between items-center border-b border-white/10 pb-4 group-hover:border-accent transition-colors">
275
  <div>
276
- <h3 class="text-2xl font-display font-bold">NEON TOKYO</h3>
277
- <p class="text-sm text-gray-400 uppercase tracking-widest">Urbano / Noturno</p>
 
 
278
  </div>
279
- <i class="fas fa-arrow-up-right text-2xl transform group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform text-white group-hover:text-accent"></i>
280
  </div>
281
  </div>
 
 
 
282
 
283
- <!-- Item 3 -->
284
- <div class="group relative reveal tilt-card cursor-pointer hover-trigger" data-cursor="view">
285
- <div class="overflow-hidden rounded-sm aspect-[4/3] relative">
286
- <div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors duration-500 z-10"></div>
287
- <img src="https://images.unsplash.com/photo-1511818966892-d7d671e672a2?q=80&w=1000&auto=format&fit=crop" alt="Architecture" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700 ease-out grayscale group-hover:grayscale-0">
288
- <div class="absolute top-4 left-4 z-20 text-6xl font-display font-bold text-white/20 group-hover:text-accent transition-colors duration-300">03</div>
 
 
 
 
 
 
 
 
289
  </div>
290
- <div class="mt-6 flex justify-between items-center border-b border-white/10 pb-4 group-hover:border-accent transition-colors">
291
- <div>
292
- <h3 class="text-2xl font-display font-bold">CONCRETE DREAMS</h3>
293
- <p class="text-sm text-gray-400 uppercase tracking-widest">Arquitetura / Abstrato</p>
294
- </div>
295
- <i class="fas fa-arrow-up-right text-2xl transform group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform text-white group-hover:text-accent"></i>
 
 
 
 
 
296
  </div>
 
 
 
 
 
297
  </div>
298
 
299
- <!-- Item 4 -->
300
- <div class="group relative reveal tilt-card cursor-pointer hover-trigger md:mt-24" data-cursor="view">
301
- <div class="overflow-hidden rounded-sm aspect-[4/3] relative">
302
- <div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors duration-500 z-10"></div>
303
- <img src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?q=80&w=1000&auto=format&fit=crop" alt="Fashion" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700 ease-out grayscale group-hover:grayscale-0">
304
- <div class="absolute top-4 left-4 z-20 text-6xl font-display font-bold text-white/20 group-hover:text-accent transition-colors duration-300">04</div>
305
  </div>
306
- <div class="mt-6 flex justify-between items-center border-b border-white/10 pb-4 group-hover:border-accent transition-colors">
307
- <div>
308
- <h3 class="text-2xl font-display font-bold">SILK & SHADOWS</h3>
309
- <p class="text-sm text-gray-400 uppercase tracking-widest">Moda / Estúdio</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
310
  </div>
311
- <i class="fas fa-arrow-up-right text-2xl transform group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform text-white group-hover:text-accent"></i>
 
 
 
 
312
  </div>
 
 
 
313
  </div>
314
  </div>
315
-
316
- <div class="mt-20 text-center">
317
- <a href="#" class="inline-block border border-white/20 px-10 py-4 rounded-full hover:bg-white hover:text-black transition-all duration-300 uppercase tracking-widest text-sm hover-trigger">
318
- Ver Todas as Séries
319
- </a>
320
- </div>
321
  </div>
322
  </section>
323
 
324
- <!-- About / Philosophy Section -->
325
- <section id="about" class="py-32 bg-secondary relative overflow-hidden">
326
- <!-- Decorative Elements -->
327
- <div class="absolute top-0 right-0 w-96 h-96 bg-accent/5 rounded-full blur-3xl pointer-events-none"></div>
328
- <div class="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl pointer-events-none"></div>
329
-
330
- <div class="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
331
- <div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
332
- <div class="md:col-span-5 relative reveal">
333
- <div class="relative z-10">
334
- <img src="https://images.unsplash.com/photo-1554048612-387768052bf7?q=80&w=1000&auto=format&fit=crop" alt="Photographer" class="w-full grayscale contrast-125 rounded-sm hover:grayscale-0 transition-all duration-700 hover-trigger">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
  </div>
336
- <!-- Rotating Badge -->
337
- <div class="absolute -bottom-10 -right-10 w-32 h-32 md:w-40 md:h-40 bg-accent rounded-full flex items-center justify-center z-20 animate-spin-slow hover-trigger cursor-pointer">
338
- <svg viewBox="0 0 100 100" width="100" height="100" class="w-full h-full p-2">
339
- <defs>
340
- <path id="circle" d="M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0" />
341
- </defs>
342
- <text font-size="11.5" font-family="Space Grotesk" font-weight="bold" fill="black" letter-spacing="2">
343
- <textPath xlink:href="#circle">
344
- • FOTOGRAFIA • ARTE • VISÃO •
345
- </textPath>
346
- </text>
347
- </svg>
348
- <i class="fas fa-camera absolute text-2xl text-black"></i>
349
  </div>
350
  </div>
351
 
352
- <div class="md:col-span-7 reveal">
353
- <h4 class="text-accent font-mono mb-4">SOBRE MIM</h4>
354
- <h2 class="text-4xl md:text-6xl font-display font-bold mb-8 leading-tight">
355
- NÃO APENAS <br>
356
- <span class="text-stroke hover:text-white transition-colors cursor-default">REGISTRANDO</span>, <br>
357
- MAS CRIANDO.
358
- </h2>
359
- <p class="text-gray-400 text-lg leading-relaxed mb-8">
360
- Com mais de uma década atrás da lente, minha abordagem vai além da técnica. Busco a alma do momento, a interseção entre luz e emoção. Cada clique é uma colaboração entre o visível e o imaginário.
361
- </p>
362
-
363
- <div class="grid grid-cols-3 gap-8 border-t border-white/10 pt-8">
364
- <div>
365
- <span class="block text-3xl font-display font-bold text-white">12+</span>
366
- <span class="text-xs text-gray-500 uppercase tracking-widest">Anos Exp.</span>
 
367
  </div>
368
- <div>
369
- <span class="block text-3xl font-display font-bold text-white">150+</span>
370
- <span class="text-xs text-gray-500 uppercase tracking-widest">Projetos</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
371
  </div>
372
- <div>
373
- <span class="block text-3xl font-display font-bold text-white">14</span>
374
- <span class="text-xs text-gray-500 uppercase tracking-widest">Prêmios</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
375
  </div>
376
  </div>
377
  </div>
@@ -379,202 +494,189 @@
379
  </div>
380
  </section>
381
 
382
- <!-- Services Section (Interactive List) -->
383
- <section id="services" class="py-24 px-6 md:px-12 bg-primary">
384
- <div class="max-w-7xl mx-auto">
385
- <div class="mb-16 reveal">
386
- <h2 class="text-4xl md:text-5xl font-display font-bold">SERVIÇOS</h2>
 
 
 
 
387
  </div>
388
 
389
- <div class="flex flex-col border-t border-white/10">
390
- <!-- Service Item 1 -->
391
- <div class="group relative border-b border-white/10 py-8 md:py-12 flex flex-col md:flex-row justify-between items-start md:items-center cursor-pointer overflow-hidden hover-trigger" data-cursor="explore">
392
- <div class="absolute inset-0 bg-accent transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-in-out z-0"></div>
393
-
394
- <div class="relative z-10 flex items-center gap-6">
395
- <span class="text-sm font-mono text-gray-500 group-hover:text-black transition-colors">01</span>
396
- <h3 class="text-3xl md:text-5xl font-display font-bold group-hover:text-black transition-colors">RETRATOS</h3>
397
  </div>
398
-
399
- <div class="relative z-10 mt-4 md:mt-0 flex items-center gap-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-4 group-hover:translate-y-0">
400
- <p class="text-black font-medium hidden md:block">Individual, Corporativo, Editorial</p>
401
- <i class="fas fa-arrow-right text-black text-xl"></i>
 
 
 
402
  </div>
403
  </div>
404
 
405
- <!-- Service Item 2 -->
406
- <div class="group relative border-b border-white/10 py-8 md:py-12 flex flex-col md:flex-row justify-between items-start md:items-center cursor-pointer overflow-hidden hover-trigger" data-cursor="explore">
407
- <div class="absolute inset-0 bg-accent transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-in-out z-0"></div>
408
-
409
- <div class="relative z-10 flex items-center gap-6">
410
- <span class="text-sm font-mono text-gray-500 group-hover:text-black transition-colors">02</span>
411
- <h3 class="text-3xl md:text-5xl font-display font-bold group-hover:text-black transition-colors">EVENTOS</h3>
412
  </div>
413
-
414
- <div class="relative z-10 mt-4 md:mt-0 flex items-center gap-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-4 group-hover:translate-y-0">
415
- <p class="text-black font-medium hidden md:block">Casamentos, Festas, Corporate</p>
416
- <i class="fas fa-arrow-right text-black text-xl"></i>
 
 
 
417
  </div>
418
  </div>
419
 
420
- <!-- Service Item 3 -->
421
- <div class="group relative border-b border-white/10 py-8 md:py-12 flex flex-col md:flex-row justify-between items-start md:items-center cursor-pointer overflow-hidden hover-trigger" data-cursor="explore">
422
- <div class="absolute inset-0 bg-accent transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-in-out z-0"></div>
423
-
424
- <div class="relative z-10 flex items-center gap-6">
425
- <span class="text-sm font-mono text-gray-500 group-hover:text-black transition-colors">03</span>
426
- <h3 class="text-3xl md:text-5xl font-display font-bold group-hover:text-black transition-colors">COMERCIAL</h3>
427
  </div>
428
-
429
- <div class="relative z-10 mt-4 md:mt-0 flex items-center gap-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-4 group-hover:translate-y-0">
430
- <p class="text-black font-medium hidden md:block">Produtos, Marcas, Campanhas</p>
431
- <i class="fas fa-arrow-right text-black text-xl"></i>
 
 
 
432
  </div>
433
  </div>
434
  </div>
435
  </div>
436
  </section>
437
 
438
- <!-- Footer -->
439
- <footer class="bg-black text-white pt-24 pb-12 px-6 md:px-12 border-t border-white/10">
440
- <div class="max-w-7xl mx-auto">
441
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-20">
442
- <div class="col-span-1 lg:col-span-2">
443
- <h2 class="text-6xl md:text-8xl font-display font-bold mb-6 hover:text-accent transition-colors cursor-default">VAMOS <br>CRIAR.</h2>
444
- <a href="mailto:hello@lumina.com" class="text-xl md:text-2xl text-gray-400 hover:text-white transition-colors border-b border-accent pb-1 inline-block hover-trigger">hello@lumina.com</a>
 
 
 
 
 
 
 
 
 
 
 
445
  </div>
446
-
 
447
  <div>
448
- <h4 class="text-sm font-bold uppercase tracking-widest mb-6 text-gray-500">Navegação</h4>
449
- <ul class="space-y-4">
450
- <li><a href="#" class="hover:text-accent transition-colors hover-trigger">Home</a></li>
451
- <li><a href="#portfolio" class="hover:text-accent transition-colors hover-trigger">Portfólio</a></li>
452
- <li><a href="#about" class="hover:text-accent transition-colors hover-trigger">Sobre</a></li>
453
- <li><a href="#services" class="hover:text-accent transition-colors hover-trigger">Serviços</a></li>
454
  </ul>
455
  </div>
456
 
 
457
  <div>
458
- <h4 class="text-sm font-bold uppercase tracking-widest mb-6 text-gray-500">Social</h4>
459
- <ul class="space-y-4">
460
- <li><a href="#" class="hover:text-accent transition-colors hover-trigger">Instagram</a></li>
461
- <li><a href="#" class="hover:text-accent transition-colors hover-trigger">Behance</a></li>
462
- <li><a href="#" class="hover:text-accent transition-colors hover-trigger">LinkedIn</a></li>
463
- <li><a href="#" class="hover:text-accent transition-colors hover-trigger">Twitter</a></li>
 
 
 
 
 
 
 
 
464
  </ul>
465
  </div>
 
 
 
 
 
 
 
 
 
 
466
  </div>
467
 
468
- <div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-white/10 text-xs text-gray-600 uppercase tracking-widest">
469
- <p>&copy; 2023 Lumina Photography.</p>
470
- <p>Designed by <span class="text-white">AnyCoder</span></p>
471
  </div>
472
  </div>
473
  </footer>
474
 
475
- <!-- JavaScript for Interactivity -->
 
 
 
 
 
 
 
 
 
 
476
  <script>
477
- document.addEventListener('DOMContentLoaded', () => {
478
-
479
- // --- Custom Cursor Logic ---
480
- const cursorDot = document.querySelector('.cursor-dot');
481
- const cursorOutline = document.querySelector('.cursor-outline');
482
- const hoverTriggers = document.querySelectorAll('.hover-trigger');
483
-
484
- window.addEventListener('mousemove', (e) => {
485
- const posX = e.clientX;
486
- const posY = e.clientY;
487
-
488
- // Dot follows immediately
489
- cursorDot.style.left = `${posX}px`;
490
- cursorDot.style.top = `${posY}px`;
491
-
492
- // Outline follows with slight delay (animation handled by CSS transition)
493
- cursorOutline.animate({
494
- left: `${posX}px`,
495
- top: `${posY}px`
496
- }, { duration: 500, fill: "forwards" });
497
- });
498
-
499
- // Hover Effects for Cursor
500
- hoverTriggers.forEach(trigger => {
501
- trigger.addEventListener('mouseenter', () => {
502
- cursorOutline.classList.add('hovered');
503
- });
504
- trigger.addEventListener('mouseleave', () => {
505
- cursorOutline.classList.remove('hovered');
506
- });
507
- });
508
-
509
- // --- Scroll Reveal Animation ---
510
- const revealElements = document.querySelectorAll('.reveal');
511
-
512
- const revealOnScroll = () => {
513
- const windowHeight = window.innerHeight;
514
- const elementVisible = 150;
515
-
516
- revealElements.forEach((reveal) => {
517
- const elementTop = reveal.getBoundingClientRect().top;
518
- if (elementTop < windowHeight - elementVisible) {
519
- reveal.classList.add('active');
520
- }
521
- });
522
- };
523
 
524
- window.addEventListener('scroll', revealOnScroll);
525
- // Trigger once on load
526
- revealOnScroll();
 
 
527
 
528
- // --- Magnetic Buttons ---
529
- const magneticBtns = document.querySelectorAll('.magnetic-btn');
 
530
 
531
- magneticBtns.forEach(btn => {
532
- btn.addEventListener('mousemove', (e) => {
533
- const rect = btn.getBoundingClientRect();
534
- const x = e.clientX - rect.left - rect.width / 2;
535
- const y = e.clientY - rect.top - rect.height / 2;
536
-
537
- btn.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
538
- });
539
-
540
- btn.addEventListener('mouseleave', () => {
541
- btn.style.transform = 'translate(0px, 0px)';
542
- });
543
- });
544
-
545
- // --- 3D Tilt Effect for Portfolio Items ---
546
- const tiltCards = document.querySelectorAll('.tilt-card');
547
-
548
- tiltCards.forEach(card => {
549
- card.addEventListener('mousemove', (e) => {
550
- const rect = card.getBoundingClientRect();
551
- const x = e.clientX - rect.left;
552
- const y = e.clientY - rect.top;
553
-
554
- const centerX = rect.width / 2;
555
- const centerY = rect.height / 2;
556
-
557
- const rotateX = ((y - centerY) / centerY) * -5; // Max rotation deg
558
- const rotateY = ((x - centerX) / centerX) * 5;
559
-
560
- card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
561
- });
562
-
563
- card.addEventListener('mouseleave', () => {
564
- card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg)`;
565
- });
566
- });
567
-
568
- // --- Parallax Hero Effect ---
569
- const heroBg = document.getElementById('hero-bg');
570
- window.addEventListener('scroll', () => {
571
- const scrollPosition = window.scrollY;
572
- if (scrollPosition < window.innerHeight) {
573
- heroBg.style.transform = `scale(1.1) translateY(${scrollPosition * 0.5}px)`;
574
- heroBg.style.opacity = 0.4 - (scrollPosition / 2000);
575
- }
576
- });
577
- });
578
- </script>
579
- </body>
580
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PetLove | O Melhor Amigo do Seu Melhor Amigo</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 
10
  <script>
11
  tailwind.config = {
12
  theme: {
13
  extend: {
14
  fontFamily: {
15
+ sans: ['Poppins', 'sans-serif'],
 
16
  },
17
  colors: {
18
+ brand: {
19
+ light: '#FFF5F5',
20
+ DEFAULT: '#FF6B6B',
21
+ dark: '#EE5253',
22
+ accent: '#48DBFB',
23
+ darkBlue: '#222F3E'
24
+ }
25
  },
26
  animation: {
 
 
27
  'float': 'float 6s ease-in-out infinite',
28
+ 'float-delayed': 'float 6s ease-in-out 3s infinite',
29
+ 'wiggle': 'wiggle 1s ease-in-out infinite',
30
+ 'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
31
  },
32
  keyframes: {
 
 
 
 
33
  float: {
34
  '0%, 100%': { transform: 'translateY(0)' },
35
  '50%': { transform: 'translateY(-20px)' },
36
+ },
37
+ wiggle: {
38
+ '0%, 100%': { transform: 'rotate(-3deg)' },
39
+ '50%': { transform: 'rotate(3deg)' },
40
+ },
41
+ fadeInUp: {
42
+ '0%': { opacity: '0', transform: 'translateY(20px)' },
43
+ '100%': { opacity: '1', transform: 'translateY(0)' },
44
  }
45
  }
46
  }
47
  }
48
  }
49
  </script>
 
50
  <style>
51
+ /* Custom Scrollbar */
52
+ ::-webkit-scrollbar {
53
+ width: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  }
55
+ ::-webkit-scrollbar-track {
56
+ background: #f1f1f1;
 
 
 
 
 
57
  }
58
+ ::-webkit-scrollbar-thumb {
59
+ background: #FF6B6B;
60
+ border-radius: 5px;
 
 
 
61
  }
62
+ ::-webkit-scrollbar-thumb:hover {
63
+ background: #EE5253;
 
 
64
  }
65
 
66
+ /* Glassmorphism Utilities */
67
+ .glass {
68
+ background: rgba(255, 255, 255, 0.7);
69
+ backdrop-filter: blur(10px);
70
+ -webkit-backdrop-filter: blur(10px);
71
+ border: 1px solid rgba(255, 255, 255, 0.18);
72
  }
73
 
74
+ .glass-dark {
75
+ background: rgba(34, 47, 62, 0.8);
76
+ backdrop-filter: blur(12px);
77
+ -webkit-backdrop-filter: blur(12px);
78
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
79
  }
80
 
81
+ /* Blob Backgrounds */
82
+ .blob {
83
+ position: absolute;
84
+ filter: blur(40px);
85
+ z-index: -1;
86
+ opacity: 0.4;
87
+ animation: move 10s infinite alternate;
88
  }
89
+ @keyframes move {
90
+ from { transform: translate(0, 0) scale(1); }
91
+ to { transform: translate(20px, -20px) scale(1.1); }
 
 
 
 
 
92
  }
93
 
94
+ /* Hide scrollbar for horizontal scroll areas */
95
+ .no-scrollbar::-webkit-scrollbar {
96
+ display: none;
 
 
 
 
 
 
 
97
  }
98
+ .no-scrollbar {
99
+ -ms-overflow-style: none;
100
+ scrollbar-width: none;
101
  }
102
 
103
+ .reveal {
104
+ opacity: 0;
105
+ transform: translateY(30px);
106
+ transition: all 0.8s ease-out;
 
 
 
 
 
107
  }
108
+ .reveal.active {
109
+ opacity: 1;
110
+ transform: translateY(0);
111
  }
112
  </style>
113
  </head>
114
+ <body class="bg-slate-50 text-slate-800 overflow-x-hidden selection:bg-brand selection:text-white">
 
 
 
 
115
 
116
  <!-- Navigation -->
117
+ <nav id="navbar" class="fixed w-full z-50 transition-all duration-300 py-4">
118
+ <div class="container mx-auto px-6 flex justify-between items-center">
119
+ <a href="#" class="text-2xl font-bold flex items-center gap-2 text-brand-darkBlue group">
120
+ <div class="w-10 h-10 bg-brand rounded-full flex items-center justify-center text-white group-hover:rotate-12 transition-transform">
121
+ <i class="fas fa-paw"></i>
122
+ </div>
123
+ <span>Pet<span class="text-brand">Love</span></span>
124
+ </a>
125
+
126
+ <!-- Desktop Menu -->
127
+ <div class="hidden md:flex items-center gap-8 font-medium text-slate-600">
128
+ <a href="#services" class="hover:text-brand transition-colors">Serviços</a>
129
+ <a href="#products" class="hover:text-brand transition-colors">Produtos</a>
130
+ <a href="#calculator" class="hover:text-brand transition-colors">Calculadora</a>
131
+ <a href="#testimonials" class="hover:text-brand transition-colors">Depoimentos</a>
132
+ </div>
133
 
134
+ <div class="hidden md:flex items-center gap-4">
135
+ <button class="relative p-2 hover:bg-slate-100 rounded-full transition-colors group">
136
+ <i class="fas fa-shopping-bag text-xl text-slate-600 group-hover:text-brand"></i>
137
+ <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>
138
+ </button>
139
+ <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">
140
+ Agendar Banho
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  </a>
142
  </div>
 
143
 
144
+ <!-- Mobile Menu Button -->
145
+ <button id="mobile-menu-btn" class="md:hidden text-2xl text-slate-700">
146
+ <i class="fas fa-bars"></i>
147
+ </button>
148
  </div>
149
+
150
+ <!-- Mobile Menu Overlay -->
151
+ <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">
152
+ <button id="close-menu-btn" class="absolute top-6 right-6 text-3xl text-slate-400 hover:text-brand">
153
+ <i class="fas fa-times"></i>
154
+ </button>
155
+ <a href="#services" class="mobile-link hover:text-brand">Serviços</a>
156
+ <a href="#products" class="mobile-link hover:text-brand">Produtos</a>
157
+ <a href="#calculator" class="mobile-link hover:text-brand">Calculadora</a>
158
+ <a href="#contact" class="mobile-link text-brand font-bold">Agendar Agora</a>
 
 
 
 
 
 
 
159
  </div>
160
+ </nav>
161
 
162
+ <!-- Hero Section -->
163
+ <section class="relative min-h-screen flex items-center pt-20 overflow-hidden">
164
+ <!-- Background Blobs -->
165
+ <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>
166
+ <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>
167
+
168
+ <div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center relative z-10">
169
+ <div class="space-y-8 reveal active">
170
+ <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">
171
+ <span class="w-2 h-2 bg-brand rounded-full animate-pulse"></span>
172
+ Cuidado Premium para Pets
173
  </div>
174
+ <h1 class="text-5xl md:text-7xl font-extrabold text-slate-900 leading-tight">
175
+ Seu pet merece o <br>
176
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand to-brand-accent">melhor cuidado</span>
177
+ </h1>
178
+ <p class="text-lg text-slate-600 max-w-lg leading-relaxed">
179
+ Oferecemos serviços de banho, tosa e spa com produtos de alta qualidade. Tratamos seu melhor amigo como parte da nossa família.
180
+ </p>
181
+ <div class="flex flex-wrap gap-4">
182
+ <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">
183
+ Explorar Serviços <i class="fas fa-arrow-right"></i>
184
+ </a>
185
+ <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">
186
+ <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">
187
+ <i class="fas fa-play text-xs"></i>
188
+ </div>
189
+ Ver Vídeo
190
+ </a>
191
+ </div>
192
+
193
+ <!-- Stats -->
194
+ <div class="flex gap-8 pt-8 border-t border-slate-200">
195
+ <div>
196
+ <h4 class="text-3xl font-bold text-slate-900">2k+</h4>
197
+ <p class="text-sm text-slate-500">Pets Felizes</p>
198
+ </div>
199
+ <div>
200
+ <h4 class="text-3xl font-bold text-slate-900">15+</h4>
201
+ <p class="text-sm text-slate-500">Especialistas</p>
202
+ </div>
203
+ <div>
204
+ <h4 class="text-3xl font-bold text-slate-900">4.9</h4>
205
+ <p class="text-sm text-slate-500">Avaliação Média</p>
206
+ </div>
207
  </div>
208
  </div>
209
 
210
+ <div class="relative h-full min-h-[500px] flex items-center justify-center reveal active delay-200">
211
+ <!-- Decorative Circles -->
212
+ <div class="absolute w-[500px] h-[500px] border-2 border-dashed border-slate-200 rounded-full animate-[spin_20s_linear_infinite]"></div>
213
+ <div class="absolute w-[400px] h-[400px] border-2 border-dashed border-brand/20 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
214
 
215
+ <!-- Main Image -->
216
+ <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
217
+ alt="Cachorro Feliz"
218
+ class="relative z-10 w-full max-w-md object-contain drop-shadow-2xl animate-float mask-image-gradient">
219
+
220
+ <!-- Floating Cards -->
221
+ <div class="absolute top-20 left-0 glass p-4 rounded-2xl shadow-lg animate-float-delayed z-20 max-w-[180px]">
222
+ <div class="flex items-center gap-3 mb-2">
223
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
224
+ <i class="fas fa-check"></i>
 
 
 
225
  </div>
226
+ <span class="font-bold text-sm">Banho Concluído</span>
227
  </div>
228
+ <p class="text-xs text-slate-500">Thor está pronto e cheiroso!</p>
229
  </div>
230
 
231
+ <div class="absolute bottom-20 right-0 glass p-4 rounded-2xl shadow-lg animate-float z-20">
232
+ <div class="flex items-center gap-3">
233
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Client">
 
 
 
 
 
234
  <div>
235
+ <div class="flex text-yellow-400 text-xs">
236
+ <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>
237
+ </div>
238
+ <p class="text-xs font-bold text-slate-700">"Adorei o serviço!"</p>
239
  </div>
 
240
  </div>
241
  </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
 
246
+ <!-- Services Section -->
247
+ <section id="services" class="py-24 bg-white relative">
248
+ <div class="container mx-auto px-6">
249
+ <div class="text-center max-w-2xl mx-auto mb-16 reveal">
250
+ <h2 class="text-brand font-bold tracking-wider uppercase mb-2">Nossos Serviços</h2>
251
+ <h3 class="text-4xl font-bold text-slate-900 mb-4">Cuidado Completo para seu Pet</h3>
252
+ <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>
253
+ </div>
254
+
255
+ <div class="grid md:grid-cols-3 gap-8">
256
+ <!-- Service 1 -->
257
+ <div class="group bg-slate-50 rounded-3xl p-8 hover:bg-brand transition-colors duration-500 cursor-pointer reveal">
258
+ <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">
259
+ <i class="fas fa-shower"></i>
260
  </div>
261
+ <h4 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-white">Banho & Tosa</h4>
262
+ <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>
263
+ <a href="#" class="inline-flex items-center font-semibold text-brand group-hover:text-white">
264
+ Saiba mais <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform"></i>
265
+ </a>
266
+ </div>
267
+
268
+ <!-- Service 2 -->
269
+ <div class="group bg-slate-50 rounded-3xl p-8 hover:bg-brand transition-colors duration-500 cursor-pointer reveal delay-100">
270
+ <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">
271
+ <i class="fas fa-spa"></i>
272
  </div>
273
+ <h4 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-white">Spa & Relax</h4>
274
+ <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>
275
+ <a href="#" class="inline-flex items-center font-semibold text-brand group-hover:text-white">
276
+ Saiba mais <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform"></i>
277
+ </a>
278
  </div>
279
 
280
+ <!-- Service 3 -->
281
+ <div class="group bg-slate-50 rounded-3xl p-8 hover:bg-brand transition-colors duration-500 cursor-pointer reveal delay-200">
282
+ <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">
283
+ <i class="fas fa-hotel"></i>
 
 
284
  </div>
285
+ <h4 class="text-2xl font-bold text-slate-900 mb-3 group-hover:text-white">Hotel & Creche</h4>
286
+ <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>
287
+ <a href="#" class="inline-flex items-center font-semibold text-brand group-hover:text-white">
288
+ Saiba mais <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform"></i>
289
+ </a>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </section>
294
+
295
+ <!-- Interactive Calculator Section -->
296
+ <section id="calculator" class="py-24 bg-brand-light relative overflow-hidden">
297
+ <!-- Background Pattern -->
298
+ <div class="absolute inset-0 opacity-5" style="background-image: radial-gradient(#FF6B6B 1px, transparent 1px); background-size: 20px 20px;"></div>
299
+
300
+ <div class="container mx-auto px-6 relative z-10">
301
+ <div class="grid lg:grid-cols-2 gap-16 items-center">
302
+ <div class="reveal">
303
+ <h2 class="text-brand font-bold tracking-wider uppercase mb-2">Simule Agora</h2>
304
+ <h3 class="text-4xl font-bold text-slate-900 mb-6">Calcule o valor do banho do seu pet</h3>
305
+ <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>
306
+
307
+ <div class="bg-white p-8 rounded-3xl shadow-xl">
308
+ <form id="price-form" class="space-y-6">
309
+ <!-- Pet Type -->
310
+ <div>
311
+ <label class="block text-sm font-bold text-slate-700 mb-3">Tipo de Pet</label>
312
+ <div class="grid grid-cols-2 gap-4">
313
+ <label class="cursor-pointer">
314
+ <input type="radio" name="petType" value="dog" class="peer sr-only" checked>
315
+ <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">
316
+ <i class="fas fa-dog text-2xl mb-2 text-slate-400 peer-checked:text-brand"></i>
317
+ <div class="font-semibold text-slate-700">Cachorro</div>
318
+ </div>
319
+ </label>
320
+ <label class="cursor-pointer">
321
+ <input type="radio" name="petType" value="cat" class="peer sr-only">
322
+ <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">
323
+ <i class="fas fa-cat text-2xl mb-2 text-slate-400 peer-checked:text-brand"></i>
324
+ <div class="font-semibold text-slate-700">Gato</div>
325
+ </div>
326
+ </label>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Size -->
331
+ <div>
332
+ <label class="block text-sm font-bold text-slate-700 mb-3">Porte</label>
333
+ <div class="flex gap-2 bg-slate-100 p-1 rounded-xl">
334
+ <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>
335
+ <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>
336
+ <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>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Fur Length -->
341
+ <div>
342
+ <label class="block text-sm font-bold text-slate-700 mb-3">Pelagem</label>
343
+ <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">
344
+ <option value="short">Curta</option>
345
+ <option value="medium">Média</option>
346
+ <option value="long">Longa</option>
347
+ </select>
348
+ </div>
349
+
350
+ <!-- Extras -->
351
+ <div>
352
+ <label class="block text-sm font-bold text-slate-700 mb-3">Adicionais</label>
353
+ <div class="space-y-2">
354
+ <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer transition-colors">
355
+ <input type="checkbox" class="w-5 h-5 rounded border-slate-300 text-brand focus:ring-brand" data-price="20">
356
+ <span class="flex-1 font-medium text-slate-700">Hidratação</span>
357
+ <span class="text-sm text-slate-500">+R$ 20</span>
358
+ </label>
359
+ <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer transition-colors">
360
+ <input type="checkbox" class="w-5 h-5 rounded border-slate-300 text-brand focus:ring-brand" data-price="15">
361
+ <span class="flex-1 font-medium text-slate-700">Transporte (Ida e Volta)</span>
362
+ <span class="text-sm text-slate-500">+R$ 15</span>
363
+ </label>
364
+ </div>
365
+ </div>
366
+ </form>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="flex flex-col items-center justify-center reveal delay-200">
371
+ <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">
372
+ <span class="text-slate-400 font-medium uppercase tracking-widest text-sm">Estimativa Total</span>
373
+ <div class="text-6xl font-black text-brand-darkBlue my-2 flex items-start">
374
+ <span class="text-3xl mt-1">R$</span>
375
+ <span id="total-price">45</span>
376
  </div>
377
+ <span class="text-slate-400 text-xs text-center px-4">*Valores sujeitos a alteração na loja</span>
378
+
379
+ <!-- Decorative Paws -->
380
+ <i class="fas fa-paw absolute top-4 right-10 text-brand/20 text-2xl rotate-12"></i>
381
+ <i class="fas fa-paw absolute bottom-10 left-8 text-brand/20 text-xl -rotate-12"></i>
382
  </div>
383
+ <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">
384
+ Agendar Este Serviço
385
+ </button>
386
  </div>
387
  </div>
 
 
 
 
 
 
388
  </div>
389
  </section>
390
 
391
+ <!-- Products Section -->
392
+ <section id="products" class="py-24 bg-white">
393
+ <div class="container mx-auto px-6">
394
+ <div class="flex flex-col md:flex-row justify-between items-end mb-12 reveal">
395
+ <div class="max-w-xl">
396
+ <h2 class="text-brand font-bold tracking-wider uppercase mb-2">Loja PetLove</h2>
397
+ <h3 class="text-4xl font-bold text-slate-900">Produtos Selecionados</h3>
398
+ </div>
399
+
400
+ <!-- Filter Tabs -->
401
+ <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">
402
+ <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>
403
+ <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>
404
+ <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>
405
+ <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>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Product Grid -->
410
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8" id="product-grid">
411
+ <!-- Product 1 -->
412
+ <div class="product-card group" data-category="food">
413
+ <div class="relative bg-slate-50 rounded-3xl p-6 mb-4 overflow-hidden aspect-square flex items-center justify-center">
414
+ <span class="absolute top-4 left-4 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">-10%</span>
415
+ <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">
416
+ <i class="fas fa-heart"></i>
417
+ </button>
418
+ <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">
419
+ <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">
420
+ Adicionar ao Carrinho
421
+ </button>
422
  </div>
423
+ <div class="px-2">
424
+ <div class="text-xs text-slate-400 font-bold uppercase mb-1">Ração</div>
425
+ <h4 class="font-bold text-slate-900 text-lg mb-2 group-hover:text-brand transition-colors">Ração Premium Grain Free</h4>
426
+ <div class="flex items-center gap-2">
427
+ <span class="text-xl font-bold text-brand-darkBlue">R$ 129,90</span>
428
+ <span class="text-sm text-slate-400 line-through">R$ 145,00</span>
429
+ </div>
 
 
 
 
 
 
430
  </div>
431
  </div>
432
 
433
+ <!-- Product 2 -->
434
+ <div class="product-card group" data-category="toys">
435
+ <div class="relative bg-slate-50 rounded-3xl p-6 mb-4 overflow-hidden aspect-square flex items-center justify-center">
436
+ <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">
437
+ <i class="fas fa-heart"></i>
438
+ </button>
439
+ <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">
440
+ <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">
441
+ Adicionar ao Carrinho
442
+ </button>
443
+ </div>
444
+ <div class="px-2">
445
+ <div class="text-xs text-slate-400 font-bold uppercase mb-1">Brinquedos</div>
446
+ <h4 class="font-bold text-slate-900 text-lg mb-2 group-hover:text-brand transition-colors">Bolinha Interativa LED</h4>
447
+ <div class="flex items-center gap-2">
448
+ <span class="text-xl font-bold text-brand-darkBlue">R$ 39,90</span>
449
  </div>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Product 3 -->
454
+ <div class="product-card group" data-category="accessories">
455
+ <div class="relative bg-slate-50 rounded-3xl p-6 mb-4 overflow-hidden aspect-square flex items-center justify-center">
456
+ <span class="absolute top-4 left-4 bg-brand text-white text-xs font-bold px-2 py-1 rounded">Novo</span>
457
+ <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">
458
+ <i class="fas fa-heart"></i>
459
+ </button>
460
+ <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">
461
+ <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">
462
+ Adicionar ao Carrinho
463
+ </button>
464
+ </div>
465
+ <div class="px-2">
466
+ <div class="text-xs text-slate-400 font-bold uppercase mb-1">Acessórios</div>
467
+ <h4 class="font-bold text-slate-900 text-lg mb-2 group-hover:text-brand transition-colors">Coleira Reflectiva Premium</h4>
468
+ <div class="flex items-center gap-2">
469
+ <span class="text-xl font-bold text-brand-darkBlue">R$ 59,90</span>
470
  </div>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Product 4 -->
475
+ <div class="product-card group" data-category="food">
476
+ <div class="relative bg-slate-50 rounded-3xl p-6 mb-4 overflow-hidden aspect-square flex items-center justify-center">
477
+ <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">
478
+ <i class="fas fa-heart"></i>
479
+ </button>
480
+ <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">
481
+ <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">
482
+ Adicionar ao Carrinho
483
+ </button>
484
+ </div>
485
+ <div class="px-2">
486
+ <div class="text-xs text-slate-400 font-bold uppercase mb-1">Petiscos</div>
487
+ <h4 class="font-bold text-slate-900 text-lg mb-2 group-hover:text-brand transition-colors">Snack Natural de Frango</h4>
488
+ <div class="flex items-center gap-2">
489
+ <span class="text-xl font-bold text-brand-darkBlue">R$ 24,90</span>
490
  </div>
491
  </div>
492
  </div>
 
494
  </div>
495
  </section>
496
 
497
+ <!-- Testimonials Section -->
498
+ <section id="testimonials" class="py-24 bg-brand-darkBlue text-white relative overflow-hidden">
499
+ <div class="absolute top-0 right-0 w-64 h-64 bg-brand rounded-full filter blur-[100px] opacity-20"></div>
500
+ <div class="absolute bottom-0 left-0 w-96 h-96 bg-brand-accent rounded-full filter blur-[120px] opacity-10"></div>
501
+
502
+ <div class="container mx-auto px-6 relative z-10">
503
+ <div class="text-center max-w-2xl mx-auto mb-16 reveal">
504
+ <h2 class="text-brand font-bold tracking-wider uppercase mb-2">Depoimentos</h2>
505
+ <h3 class="text-4xl font-bold mb-4">O que os tutores dizem</h3>
506
  </div>
507
 
508
+ <div class="grid md:grid-cols-3 gap-8">
509
+ <!-- Review 1 -->
510
+ <div class="bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors reveal">
511
+ <div class="flex text-yellow-400 mb-4 text-sm">
512
+ <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>
 
 
 
513
  </div>
514
+ <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>
515
+ <div class="flex items-center gap-4">
516
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-12 h-12 rounded-full border-2 border-brand" alt="User">
517
+ <div>
518
+ <h5 class="font-bold">Ana Carolina</h5>
519
+ <span class="text-xs text-slate-400">Tutora da Luna</span>
520
+ </div>
521
  </div>
522
  </div>
523
 
524
+ <!-- Review 2 -->
525
+ <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">
526
+ <div class="flex text-yellow-400 mb-4 text-sm">
527
+ <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>
 
 
 
528
  </div>
529
+ <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>
530
+ <div class="flex items-center gap-4">
531
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full border-2 border-brand" alt="User">
532
+ <div>
533
+ <h5 class="font-bold">Roberto Silva</h5>
534
+ <span class="text-xs text-slate-400">Tutor do Fred</span>
535
+ </div>
536
  </div>
537
  </div>
538
 
539
+ <!-- Review 3 -->
540
+ <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">
541
+ <div class="flex text-yellow-400 mb-4 text-sm">
542
+ <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>
 
 
 
543
  </div>
544
+ <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>
545
+ <div class="flex items-center gap-4">
546
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-12 h-12 rounded-full border-2 border-brand" alt="User">
547
+ <div>
548
+ <h5 class="font-bold">Julia Mendes</h5>
549
+ <span class="text-xs text-slate-400">Tutora do Thor</span>
550
+ </div>
551
  </div>
552
  </div>
553
  </div>
554
  </div>
555
  </section>
556
 
557
+ <!-- Contact / Footer -->
558
+ <footer id="contact" class="bg-slate-50 pt-24 pb-12 border-t border-slate-200">
559
+ <div class="container mx-auto px-6">
560
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
561
+ <!-- Brand -->
562
+ <div>
563
+ <a href="#" class="text-2xl font-bold flex items-center gap-2 text-brand-darkBlue mb-6">
564
+ <div class="w-10 h-10 bg-brand rounded-full flex items-center justify-center text-white">
565
+ <i class="fas fa-paw"></i>
566
+ </div>
567
+ <span>Pet<span class="text-brand">Love</span></span>
568
+ </a>
569
+ <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>
570
+ <div class="flex gap-4">
571
+ <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>
572
+ <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>
573
+ <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>
574
+ </div>
575
  </div>
576
+
577
+ <!-- Links -->
578
  <div>
579
+ <h4 class="font-bold text-slate-900 mb-6">Links Rápidos</h4>
580
+ <ul class="space-y-4 text-slate-500">
581
+ <li><a href="#" class="hover:text-brand transition-colors">Sobre Nós</a></li>
582
+ <li><a href="#" class="hover:text-brand transition-colors">Nossos Serviços</a></li>
583
+ <li><a href="#" class="hover:text-brand transition-colors">Loja Online</a></li>
584
+ <li><a href="#" class="hover:text-brand transition-colors">Agendamento</a></li>
585
  </ul>
586
  </div>
587
 
588
+ <!-- Contact Info -->
589
  <div>
590
+ <h4 class="font-bold text-slate-900 mb-6">Contato</h4>
591
+ <ul class="space-y-4 text-slate-500">
592
+ <li class="flex items-start gap-3">
593
+ <i class="fas fa-map-marker-alt mt-1 text-brand"></i>
594
+ <span>Rua dos Pets, 123<br>Bairro Feliz, São Paulo - SP</span>
595
+ </li>
596
+ <li class="flex items-center gap-3">
597
+ <i class="fas fa-phone text-brand"></i>
598
+ <span>(11) 99999-9999</span>
599
+ </li>
600
+ <li class="flex items-center gap-3">
601
+ <i class="fas fa-envelope text-brand"></i>
602
+ <span>contato@petlove.com</span>
603
+ </li>
604
  </ul>
605
  </div>
606
+
607
+ <!-- Newsletter -->
608
+ <div>
609
+ <h4 class="font-bold text-slate-900 mb-6">Newsletter</h4>
610
+ <p class="text-slate-500 mb-4 text-sm">Receba dicas e promoções exclusivas.</p>
611
+ <form class="flex flex-col gap-3" onsubmit="event.preventDefault(); alert('Obrigado por se inscrever!');">
612
+ <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">
613
+ <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>
614
+ </form>
615
+ </div>
616
  </div>
617
 
618
+ <div class="border-t border-slate-200 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
619
+ <p class="text-slate-400 text-sm">&copy; 2023 PetLove. Todos os direitos reservados.</p>
620
+ <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>
621
  </div>
622
  </div>
623
  </footer>
624
 
625
+ <!-- Toast Notification -->
626
+ <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">
627
+ <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
628
+ <i class="fas fa-check text-sm"></i>
629
+ </div>
630
+ <div>
631
+ <h4 class="font-bold text-sm">Adicionado!</h4>
632
+ <p class="text-xs text-slate-300">Produto adicionado ao carrinho.</p>
633
+ </div>
634
+ </div>
635
+
636
  <script>
637
+ // --- Navbar Scroll Effect ---
638
+ const navbar = document.getElementById('navbar');
639
+ window.addEventListener('scroll', () => {
640
+ if (window.scrollY > 50) {
641
+ navbar.classList.add('glass-dark', 'shadow-lg');
642
+ navbar.classList.remove('py-4');
643
+ navbar.classList.add('py-2');
644
+ } else {
645
+ navbar.classList.remove('glass-dark', 'shadow-lg');
646
+ navbar.classList.remove('py-2');
647
+ navbar.classList.add('py-4');
648
+ }
649
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
650
 
651
+ // --- Mobile Menu ---
652
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
653
+ const closeMenuBtn = document.getElementById('close-menu-btn');
654
+ const mobileMenu = document.getElementById('mobile-menu');
655
+ const mobileLinks = document.querySelectorAll('.mobile-link');
656
 
657
+ function toggleMenu() {
658
+ mobileMenu.classList.toggle('translate-x-full');
659
+ }
660
 
661
+ mobileMenuBtn.addEventListener('click', toggleMenu);
662
+ closeMenuBtn.addEventListener('click', toggleMenu);
663
+ mobileLinks.forEach(link => link.addEventListener('click', toggleMenu));
664
+
665
+ // --- Price Calculator Logic ---
666
+ const sizeBtns = document.querySelectorAll('.size-btn');
667
+ const checkboxes = document.querySelectorAll('input[type="checkbox"]');
668
+ const petTypeRadios = document.querySelectorAll('input[name="petType"]');
669
+ const furSelect = document.getElementById('fur-length');
670
+ const totalPriceEl = document.getElementById('total-price');
671
+
672
+ let currentSize = 'small'; // small, medium, large
673
+ let basePrice = 45;
674
+
675
+ // Base prices by size
676
+ const sizePrices = {
677
+ small: 45,
678
+ medium: 65,
679
+ large: 85
680
+ };
681
+
682
+ // Multipliers