Hugging Face's logo

Spaces:
script7sistemas
/
anycoder-e927d014
Running

App Files Community
script7sistemas commited on
Commit
7c7e841
·
verified ·
1 Parent(s): f316857

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +580 -19
index.html CHANGED
@@ -1,19 +1,580 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" class="scroll-smooth">
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>
378
+ </div>
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>