Hugging Face's logo

Spaces:
Arthurrn
/
teucuu
Running

App Files Community
Arthurrn commited on
Commit
a39a9fb
·
verified ·
1 Parent(s): 3af1e01

gostaria de criar um site profissional para meu trabalho como fotógrafo. Quero um site bem planejado, com foco visual e navegação simples. Objetivo do site: Exibir meu portfólio de fotografia (por categorias: casamentos, ensaios, eventos, etc.) Atrair novos clientes Permitir que pessoas entrem em contato ou solicitem orçamentos O que espero do site: Design moderno e responsivo (funcione bem em celular e desktop) Galeria de fotos bem organizada Página “Sobre mim” com minha história e abordagem fotográfica Blog (opcional) para compartilhar bastidores ou dicas Integração com redes sociais Formulário de contato Boa performance (rápido para carregar) e otimizado para Google (SEO) Referências que gosto: [Link de sites de fotógrafos que você admira] Prazos e orçamento: Gostaria de uma estimativa de tempo e custo com base nesse briefing. - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +840 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Teucuu
3
- emoji: 🌍
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: teucuu
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,840 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Fotógrafo Profissional | Seu Nome Aqui</title>
7
+ <meta name="description" content="Fotógrafo profissional especializado em casamentos, ensaios e eventos. Capturando momentos únicos com arte e sensibilidade.">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ /* Custom CSS for animations and effects */
12
+ .bg-hero {
13
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-4.0.3');
14
+ background-size: cover;
15
+ background-position: center;
16
+ height: 80vh;
17
+ }
18
+
19
+ .gallery-item {
20
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
21
+ }
22
+
23
+ .gallery-item:hover {
24
+ transform: scale(1.03);
25
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
26
+ }
27
+
28
+ .active-tab {
29
+ border-bottom: 3px solid #fff;
30
+ }
31
+
32
+ /* Custom fade-in animation */
33
+ @keyframes fadeIn {
34
+ from { opacity: 0; }
35
+ to { opacity: 1; }
36
+ }
37
+
38
+ .animate-fade-in {
39
+ animation: fadeIn 1s ease-in-out;
40
+ }
41
+
42
+ /* Image modal styling */
43
+ .modal {
44
+ display: none;
45
+ position: fixed;
46
+ z-index: 1000;
47
+ left: 0;
48
+ top: 0;
49
+ width: 100%;
50
+ height: 100%;
51
+ overflow: auto;
52
+ background-color: rgba(0,0,0,0.9);
53
+ }
54
+
55
+ .modal-content {
56
+ margin: auto;
57
+ display: block;
58
+ max-width: 90%;
59
+ max-height: 90%;
60
+ }
61
+
62
+ .close {
63
+ position: absolute;
64
+ top: 15px;
65
+ right: 35px;
66
+ color: #f1f1f1;
67
+ font-size: 40px;
68
+ font-weight: bold;
69
+ transition: 0.3s;
70
+ }
71
+
72
+ .close:hover,
73
+ .close:focus {
74
+ color: #bbb;
75
+ text-decoration: none;
76
+ cursor: pointer;
77
+ }
78
+
79
+ /* Custom loading spinner */
80
+ .spinner {
81
+ border: 5px solid #f3f3f3;
82
+ border-top: 5px solid #555;
83
+ border-radius: 50%;
84
+ width: 50px;
85
+ height: 50px;
86
+ animation: spin 1s linear infinite;
87
+ margin: 20px auto;
88
+ }
89
+
90
+ @keyframes spin {
91
+ 0% { transform: rotate(0deg); }
92
+ 100% { transform: rotate(360deg); }
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="font-sans text-gray-800 bg-gray-50">
97
+ <!-- Navigation -->
98
+ <nav class="fixed w-full z-50 bg-black bg-opacity-90 transition-all duration-300">
99
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
100
+ <div class="flex justify-between items-center py-4">
101
+ <a href="#" class="text-white text-2xl font-serif font-bold">Foto<span class="text-amber-400">Grafia</span></a>
102
+
103
+ <!-- Desktop Navigation -->
104
+ <div class="hidden md:flex space-x-8">
105
+ <a href="#home" class="text-white hover:text-amber-400 transition">Home</a>
106
+ <a href="#portfolio" class="text-white hover:text-amber-400 transition">Portfólio</a>
107
+ <a href="#about" class="text-white hover:text-amber-400 transition">Sobre</a>
108
+ <a href="#services" class="text-white hover:text-amber-400 transition">Serviços</a>
109
+ <a href="#blog" class="text-white hover:text-amber-400 transition">Blog</a>
110
+ <a href="#contact" class="text-white hover:text-amber-400 transition">Contato</a>
111
+ </div>
112
+
113
+ <!-- Mobile menu button -->
114
+ <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
115
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
116
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
117
+ </svg>
118
+ </button>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Mobile Navigation -->
123
+ <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95 w-full py-2 px-4">
124
+ <a href="#home" class="block py-2 text-white hover:text-amber-400 transition">Home</a>
125
+ <a href="#portfolio" class="block py-2 text-white hover:text-amber-400 transition">Portfólio</a>
126
+ <a href="#about" class="block py-2 text-white hover:text-amber-400 transition">Sobre</a>
127
+ <a href="#services" class="block py-2 text-white hover:text-amber-400 transition">Serviços</a>
128
+ <a href="#blog" class="block py-2 text-white hover:text-amber-400 transition">Blog</a>
129
+ <a href="#contact" class="block py-2 text-white hover:text-amber-400 transition">Contato</a>
130
+ </div>
131
+ </nav>
132
+
133
+ <!-- Hero Section -->
134
+ <section id="home" class="bg-hero flex items-center justify-center pt-16">
135
+ <div class="text-center px-4 text-white animate-fade-in">
136
+ <h1 class="text-4xl md:text-6xl font-bold mb-4 font-serif">Seu <span class="text-amber-400">Nome</span> Aqui</h1>
137
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Transformando momentos em memórias eternas através da fotografia</p>
138
+ <div class="flex flex-wrap justify-center gap-4">
139
+ <a href="#contact" class="bg-amber-500 hover:bg-amber-600 text-white px-6 py-3 rounded-md font-medium transition">Solicite um Orçamento</a>
140
+ <a href="#portfolio" class="border border-white hover:bg-white hover:text-black text-white px-6 py-3 rounded-md font-medium transition">Veja Meu Trabalho</a>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Portfolio Section -->
146
+ <section id="portfolio" class="py-16 px-4 max-w-7xl mx-auto">
147
+ <div class="text-center mb-12">
148
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Portfólio</h2>
149
+ <p class="text-gray-600 max-w-2xl mx-auto">Explore meu trabalho e veja como posso capturar seus momentos especiais</p>
150
+ </div>
151
+
152
+ <!-- Portfolio Filter -->
153
+ <div class="flex flex-wrap justify-center mb-10 border-b border-gray-200">
154
+ <button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition active-tab" data-category="all">Todos</button>
155
+ <button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition" data-category="weddings">Casamentos</button>
156
+ <button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition" data-category="portraits">Ensaios</button>
157
+ <button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition" data-category="events">Eventos</button>
158
+ <button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition" data-category="family">Família</button>
159
+ </div>
160
+
161
+ <!-- Portfolio Grid -->
162
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 portfolio-grid">
163
+ <!-- This will be populated by JavaScript -->
164
+ <div class="text-center py-8">
165
+ <div class="spinner"></div>
166
+ <p>Carregando imagens...</p>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Image Modal -->
172
+ <div id="imageModal" class="modal">
173
+ <span class="close">&times;</span>
174
+ <img class="modal-content" id="modalImage">
175
+ <div id="caption" class="text-white text-center mt-4"></div>
176
+ </div>
177
+
178
+ <!-- About Section -->
179
+ <section id="about" class="py-16 px-4 bg-gray-100">
180
+ <div class="max-w-7xl mx-auto">
181
+ <div class="md:flex items-center">
182
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
183
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3" alt="Fotógrafo" class="rounded-lg shadow-lg w-full">
184
+ </div>
185
+ <div class="md:w-1/2">
186
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Sobre Mim</h2>
187
+ <p class="text-gray-700 mb-4">Sou um fotógrafo profissional apaixonado por capturar momentos especiais e transformá-los em memórias eternas. Com mais de 10 anos de experiência, tenho o privilégio de documentar histórias de amor, alegria e conexão.</p>
188
+ <p class="text-gray-700 mb-6">Minha abordagem combina técnica apurada com sensibilidade artística, buscando sempre registrar a essência e emoção de cada momento de forma natural e autêntica.</p>
189
+ <div class="flex flex-wrap gap-4">
190
+ <div class="flex items-center">
191
+ <div class="bg-amber-100 p-3 rounded-full mr-3">
192
+ <i class="fas fa-camera text-amber-600"></i>
193
+ </div>
194
+ <span class="font-medium">+500 ensaios realizados</span>
195
+ </div>
196
+ <div class="flex items-center">
197
+ <div class="bg-amber-100 p-3 rounded-full mr-3">
198
+ <i class="fas fa-heart text-amber-600"></i>
199
+ </div>
200
+ <span class="font-medium">+200 casamentos</span>
201
+ </div>
202
+ </div>
203
+ <div class="mt-8">
204
+ <a href="#contact" class="bg-black hover:bg-gray-800 text-white px-6 py-3 rounded-md font-medium transition">Vamos Conversar</a>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- Services Section -->
212
+ <section id="services" class="py-16 px-4 max-w-7xl mx-auto">
213
+ <div class="text-center mb-12">
214
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Serviços</h2>
215
+ <p class="text-gray-600 max-w-2xl mx-auto">Ofereço uma variedade de serviços de fotografia para atender suas necessidades</p>
216
+ </div>
217
+
218
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
219
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
220
+ <div class="text-amber-500 text-4xl mb-4">
221
+ <i class="fas fa-ring"></i>
222
+ </div>
223
+ <h3 class="text-xl font-bold mb-3">Casamentos</h3>
224
+ <p class="text-gray-700 mb-4">Cobertura completa do seu grande dia, desde os preparativos até a festa, capturando cada momento especial com sensibilidade e arte.</p>
225
+ <p class="font-semibold">A partir de R$ 2.500</p>
226
+ </div>
227
+
228
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
229
+ <div class="text-amber-500 text-4xl mb-4">
230
+ <i class="fas fa-user"></i>
231
+ </div>
232
+ <h3 class="text-xl font-bold mb-3">Ensaios Fotográficos</h3>
233
+ <p class="text-gray-700 mb-4">Ensaios individuais, de casal ou família em locação ou estúdio, com direção especializada para fotos incríveis e naturais.</p>
234
+ <p class="font-semibold">A partir de R$ 500</p>
235
+ </div>
236
+
237
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
238
+ <div class="text-amber-500 text-4xl mb-4">
239
+ <i class="fas fa-glass-cheers"></i>
240
+ </div>
241
+ <h3 class="text-xl font-bold mb-3">Eventos</h3>
242
+ <p class="text-gray-700 mb-4">Cobertura profissional de aniversários, formaturas, batizados e eventos corporativos, registrando momentos importantes.</p>
243
+ <p class="font-semibold">A partir de R$ 800</p>
244
+ </div>
245
+
246
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
247
+ <div class="text-amber-500 text-4xl mb-4">
248
+ <i class="fas fa-home"></i>
249
+ </div>
250
+ <h3 class="text-xl font-bold mb-3">Gestantes & Newborn</h3>
251
+ <p class="text-gray-700 mb-4">Registro delicado da gravidez e dos primeiros dias do bebê, com segurança e cuidado em sessões personalizadas.</p>
252
+ <p class="font-semibold">A partir de R$ 600</p>
253
+ </div>
254
+
255
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
256
+ <div class="text-amber-500 text-4xl mb-4">
257
+ <i class="fas fa-briefcase"></i>
258
+ </div>
259
+ <h3 class="text-xl font-bold mb-3">Fotografia Comercial</h3>
260
+ <p class="text-gray-700 mb-4">Fotos profissionais para produtos, estabelecimentos comerciais e catálogos que destacam seu negócio com qualidade.</p>
261
+ <p class="font-semibold">Sob consulta</p>
262
+ </div>
263
+
264
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
265
+ <div class="text-amber-500 text-4xl mb-4">
266
+ <i class="fas fa-film"></i>
267
+ </div>
268
+ <h3 class="text-xl font-bold mb-3">Edição de Imagens</h3>
269
+ <p class="text-gray-700 mb-4">Serviços profissionais de edição fotográfica incluindo tratamento de cor, retoques e composições criativas.</p>
270
+ <p class="font-semibold">Sob consulta</p>
271
+ </div>
272
+ </div>
273
+ </section>
274
+
275
+ <!-- Testimonials Section -->
276
+ <section class="py-16 bg-gray-900 text-white px-4">
277
+ <div class="max-w-7xl mx-auto">
278
+ <div class="text-center mb-12">
279
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Depoimentos</h2>
280
+ <p class="text-gray-300 max-w-2xl mx-auto">O que meus clientes dizem sobre meu trabalho</p>
281
+ </div>
282
+
283
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 testimonial-slider">
284
+ <div class="bg-gray-800 p-6 rounded-lg">
285
+ <div class="flex items-center mb-4">
286
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
287
+ <div>
288
+ <h4 class="font-bold">Ana Silva</h4>
289
+ <div class="flex text-amber-400">
290
+ <i class="fas fa-star"></i>
291
+ <i class="fas fa-star"></i>
292
+ <i class="fas fa-star"></i>
293
+ <i class="fas fa-star"></i>
294
+ <i class="fas fa-star"></i>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ <p class="text-gray-300">"Fotógrafo absolutamente incrível! Capturou cada momento do nosso casamento com tanta sensibilidade e arte. As fotos superaram todas nossas expectativas!"</p>
299
+ </div>
300
+
301
+ <div class="bg-gray-800 p-6 rounded-lg">
302
+ <div class="flex items-center mb-4">
303
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
304
+ <div>
305
+ <h4 class="font-bold">Carlos Mendes</h4>
306
+ <div class="flex text-amber-400">
307
+ <i class="fas fa-star"></i>
308
+ <i class="fas fa-star"></i>
309
+ <i class="fas fa-star"></i>
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star"></i>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ <p class="text-gray-300">"Contratei para o ensaio corporativo e ficamos muito satisfeitos. Profissionalismo total, ótima direção e as fotos ficaram perfeitas para nosso site."</p>
316
+ </div>
317
+
318
+ <div class="bg-gray-800 p-6 rounded-lg">
319
+ <div class="flex items-center mb-4">
320
+ <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
321
+ <div>
322
+ <h4 class="font-bold">Juliana Costa</h4>
323
+ <div class="flex text-amber-400">
324
+ <i class="fas fa-star"></i>
325
+ <i class="fas fa-star"></i>
326
+ <i class="fas fa-star"></i>
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ <p class="text-gray-300">"Fizemos ensaio newborn com nosso bebê de 15 dias e foi maravilhoso! Paciente, cuidadoso e as fotos são um tesouro que guardaremos para sempre."</p>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Blog Section -->
339
+ <section id="blog" class="py-16 px-4 max-w-7xl mx-auto">
340
+ <div class="text-center mb-12">
341
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Blog</h2>
342
+ <p class="text-gray-600 max-w-2xl mx-auto">Dicas, bastidores e inspirações fotográficas</p>
343
+ </div>
344
+
345
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
346
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
347
+ <img src="https://images.unsplash.com/photo-1506084868230-bb9d95c24759?ixlib=rb-4.0.3" alt="Post do blog" class="w-full h-48 object-cover">
348
+ <div class="p-6">
349
+ <div class="text-xs text-gray-500 mb-2">20 de Junho, 2023 • 5 min de leitura</div>
350
+ <h3 class="text-xl font-bold mb-2">Como escolher o melhor fotógrafo para seu casamento</h3>
351
+ <p class="text-gray-700 mb-4">Guia completo com perguntas importantes para fazer ao contratar um fotógrafo de casamento e garantir que sua experiência seja perfeita.</p>
352
+ <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Ler mais →</a>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
357
+ <img src="https://images.unsplash.com/photo-1522881193459-3ae468209c63?ixlib=rb-4.0.3" alt="Post do blog" class="w-full h-48 object-cover">
358
+ <div class="p-6">
359
+ <div class="text-xs text-gray-500 mb-2">15 de Maio, 2023 • 4 min de leitura</div>
360
+ <h3 class="text-xl font-bold mb-2">5 Poses Naturais para Ensaios Fotográficos</h3>
361
+ <p class="text-gray-700 mb-4">Dicas para ficar à vontade na frente das câmeras e conseguir fotos naturais e incríveis no seu ensaio.</p>
362
+ <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Ler mais →</a>
363
+ </div>
364
+ </div>
365
+
366
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
367
+ <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3" alt="Post do blog" class="w-full h-48 object-cover">
368
+ <div class="p-6">
369
+ <div class="text-xs text-gray-500 mb-2">2 de Maio, 2023 • 7 min de leitura</div>
370
+ <h3 class="text-xl font-bold mb-2">Bastidores: Um Dia de Casamento</h3>
371
+ <p class="text-gray-700 mb-4">Veja como é um dia típico fotografando um casamento, desde os preparativos até a última foto da festa.</p>
372
+ <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Ler mais →</a>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="text-center mt-12">
378
+ <a href="#" class="bg-black hover:bg-gray-800 text-white px-6 py-3 rounded-md font-medium transition">Ver Todos os Posts</a>
379
+ </div>
380
+ </section>
381
+
382
+ <!-- Instagram Feed -->
383
+ <section class="py-12 bg-gray-100 px-4">
384
+ <div class="max-w-7xl mx-auto">
385
+ <div class="text-center mb-8">
386
+ <h2 class="text-3xl font-bold mb-2">Siga no Instagram</h2>
387
+ <a href="#" class="text-amber-600 hover:text-amber-700 transition">@seuusuario</a>
388
+ </div>
389
+
390
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 instagram-feed">
391
+ <!-- Instagram images will be loaded here -->
392
+ <div class="bg-gray-300 h-40 animate-pulse"></div>
393
+ <div class="bg-gray-300 h-40 animate-pulse"></div>
394
+ <div class="bg-gray-300 h-40 animate-pulse"></div>
395
+ <div class="bg-gray-300 h-40 animate-pulse"></div>
396
+ <div class="bg-gray-300 h-40 animate-pulse"></div>
397
+ <div class="bg-gray-300 h-40 animate-pulse"></div>
398
+ </div>
399
+ </div>
400
+ </section>
401
+
402
+ <!-- Contact Section -->
403
+ <section id="contact" class="py-16 px-4 max-w-7xl mx-auto">
404
+ <div class="text-center mb-12">
405
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Entre em Contato</h2>
406
+ <p class="text-gray-600 max-w-2xl mx-auto">Preencha o formulário abaixo para solicitar um orçamento ou tirar dúvidas</p>
407
+ </div>
408
+
409
+ <div class="md:flex">
410
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
411
+ <form id="contactForm" class="space-y-6">
412
+ <div>
413
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nome</label>
414
+ <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent" required>
415
+ </div>
416
+
417
+ <div>
418
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
419
+ <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent" required>
420
+ </div>
421
+
422
+ <div>
423
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Telefone</label>
424
+ <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent">
425
+ </div>
426
+
427
+ <div>
428
+ <label for="service" class="block text-gray-700 font-medium mb-2">Serviço de Interesse</label>
429
+ <select id="service" name="service" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent">
430
+ <option value="">Selecione...</option>
431
+ <option value="wedding">Casamento</option>
432
+ <option value="portrait">Ensaio Fotográfico</option>
433
+ <option value="event">Evento</option>
434
+ <option value="newborn">Newborn</option>
435
+ <option value="commercial">Fotografia Comercial</option>
436
+ <option value="other">Outro</option>
437
+ </select>
438
+ </div>
439
+
440
+ <div>
441
+ <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label>
442
+ <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent" required></textarea>
443
+ </div>
444
+
445
+ <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-medium py-3 px-4 rounded-md transition">Enviar Mensagem</button>
446
+ </form>
447
+ </div>
448
+
449
+ <div class="md:w-1/2 md:pl-8">
450
+ <div class="bg-gray-100 p-8 rounded-lg h-full">
451
+ <h3 class="text-xl font-bold mb-6">Informações de Contato</h3>
452
+
453
+ <div class="space-y-6">
454
+ <div class="flex items-start">
455
+ <div class="text-amber-600 text-xl mr-4 mt-1">
456
+ <i class="fas fa-map-marker-alt"></i>
457
+ </div>
458
+ <div>
459
+ <h4 class="font-medium mb-1">Endereço</h4>
460
+ <p class="text-gray-700">Rua das Flores, 123<br>São Paulo/SP - Brasil</p>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="flex items-start">
465
+ <div class="text-amber-600 text-xl mr-4 mt-1">
466
+ <i class="fas fa-phone-alt"></i>
467
+ </div>
468
+ <div>
469
+ <h4 class="font-medium mb-1">Telefone</h4>
470
+ <p class="text-gray-700">(11) 98765-4321</p>
471
+ <p class="text-gray-700">(11) 1234-5678 (WhatsApp)</p>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="flex items-start">
476
+ <div class="text-amber-600 text-xl mr-4 mt-1">
477
+ <i class="fas fa-envelope"></i>
478
+ </div>
479
+ <div>
480
+ <h4 class="font-medium mb-1">Email</h4>
481
+ <p class="text-gray-700">contato@seusite.com</p>
482
+ <p class="text-gray-700">orçamentos@seusite.com</p>
483
+ </div>
484
+ </div>
485
+
486
+ <div class="flex items-start">
487
+ <div class="text-amber-600 text-xl mr-4 mt-1">
488
+ <i class="fas fa-clock"></i>
489
+ </div>
490
+ <div>
491
+ <h4 class="font-medium mb-1">Horário de Atendimento</h4>
492
+ <p class="text-gray-700">Segunda a Sexta: 9h às 18h</p>
493
+ <p class="text-gray-700">Sábado: 10h às 14h</p>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="mt-8">
499
+ <h4 class="font-medium mb-4">Redes Sociais</h4>
500
+ <div class="flex space-x-4">
501
+ <a href="#" class="text-gray-700 hover:text-amber-600 transition text-xl"><i class="fab fa-instagram"></i></a>
502
+ <a href="#" class="text-gray-700 hover:text-amber-600 transition text-xl"><i class="fab fa-facebook"></i></a>
503
+ <a href="#" class="text-gray-700 hover:text-amber-600 transition text-xl"><i class="fab fa-whatsapp"></i></a>
504
+ <a href="#" class="text-gray-700 hover:text-amber-600 transition text-xl"><i class="fab fa-pinterest"></i></a>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Map -->
512
+ <div class="mt-16 bg-gray-200 h-64 md:h-80 rounded-lg overflow-hidden">
513
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.1975844554424!2d-46.65867592465684!3d-23.561410200000013!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce59c8ef965d59%3A0x770c9b5dcba1df40!2sAv.%20Paulista%2C%201000%20-%20Bela%20Vista%2C%20S%C3%A3o%20Paulo%20-%20SP%2C%2001310-100!5e0!3m2!1sen!2sbr!4v1685049730618!5m2!1sen!2sbr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
514
+ </div>
515
+ </section>
516
+
517
+ <!-- Newsletter -->
518
+ <section class="py-16 bg-gray-900 text-white px-4">
519
+ <div class="max-w-4xl mx-auto text-center">
520
+ <h2 class="text-3xl font-bold mb-4">Receba Novidades e Promoções</h2>
521
+ <p class="text-gray-300 mb-8">Inscreva-se em minha newsletter para receber dicas de fotografia, promoções exclusivas e novidades sobre meu trabalho.</p>
522
+
523
+ <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
524
+ <input type="email" placeholder="Seu melhor email" class="flex-grow px-4 py-3 rounded-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-amber-500">
525
+ <button type="submit" class="bg-amber-500 hover:bg-amber-600 text-white font-medium px-6 py-3 rounded-md transition whitespace-nowrap">Inscrever-se</button>
526
+ </form>
527
+
528
+ <p class="text-xs text-gray-500 mt-4">Não enviaremos spam. Respeitamos sua privacidade.</p>
529
+ </div>
530
+ </section>
531
+
532
+ <!-- Footer -->
533
+ <footer class="bg-black text-white py-8 px-4">
534
+ <div class="max-w-7xl mx-auto">
535
+ <div class="md:flex md:justify-between md:items-center">
536
+ <div class="mb-6 md:mb-0">
537
+ <a href="#" class="text-2xl font-serif font-bold">Foto<span class="text-amber-400">Grafia</span></a>
538
+ <p class="text-gray-400 mt-2">Capturando momentos, criando memórias.</p>
539
+ </div>
540
+
541
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
542
+ <div>
543
+ <h3 class="text-lg font-medium mb-4">Links</h3>
544
+ <ul class="space-y-2">
545
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
546
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Portfólio</a></li>
547
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">Sobre</a></li>
548
+ <li><a href="#services" class="text-gray-400 hover:text-white transition">Serviços</a></li>
549
+ <li><a href="#blog" class="text-gray-400 hover:text-white transition">Blog</a></li>
550
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contato</a></li>
551
+ </ul>
552
+ </div>
553
+
554
+ <div>
555
+ <h3 class="text-lg font-medium mb-4">Serviços</h3>
556
+ <ul class="space-y-2">
557
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Casamentos</a></li>
558
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Ensaios Fotográficos</a></li>
559
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Eventos</a></li>
560
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Gestante & Newborn</a></li>
561
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Fotografia Comercial</a></li>
562
+ </ul>
563
+ </div>
564
+
565
+ <div>
566
+ <h3 class="text-lg font-medium mb-4">Legal</h3>
567
+ <ul class="space-y-2">
568
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Termos de Uso</a></li>
569
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a></li>
570
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
571
+ </ul>
572
+ </div>
573
+ </div>
574
+ </div>
575
+
576
+ <div class="border-t border-gray-800 mt-8 pt-8">
577
+ <div class="md:flex md:items-center md:justify-between">
578
+ <p class="text-gray-400">© 2023 Fotógrafo Profissional. Todos os direitos reservados.</p>
579
+
580
+ <div class="flex space-x-6 mt-4 md:mt-0">
581
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
582
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a>
583
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest"></i></a>
584
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-whatsapp"></i></a>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </footer>
590
+
591
+ <!-- Back to Top Button -->
592
+ <button id="backToTop" class="fixed bottom-8 right-8 bg-amber-500 hover:bg-amber-600 text-white rounded-full p-3 shadow-lg opacity-0 invisible transition-all duration-300">
593
+ <i class="fas fa-arrow-up"></i>
594
+ </button>
595
+
596
+ <!-- Success Modal -->
597
+ <div id="successModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 opacity-0 invisible transition-opacity duration-300">
598
+ <div class="bg-white rounded-lg p-8 max-w-md mx-4 text-center">
599
+ <div class="text-green-500 text-5xl mb-4">
600
+ <i class="fas fa-check-circle"></i>
601
+ </div>
602
+ <h3 class="text-2xl font-bold mb-2">Mensagem Enviada!</h3>
603
+ <p class="text-gray-700 mb-6">Obrigado pelo seu contato. Responderei o mais breve possível.</p>
604
+ <button id="closeModal" class="bg-amber-500 hover:bg-amber-600 text-white px-6 py-2 rounded-md transition">Fechar</button>
605
+ </div>
606
+ </div>
607
+
608
+ <script>
609
+ // Portfolio data - in a real scenario, you'd fetch this from a database or API
610
+ const portfolioData = {
611
+ all: [
612
+ { id: 1, src: 'https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3', category: 'weddings', alt: 'Casamento no campo' },
613
+ { id: 2, src: 'https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-4.0.3', category: 'weddings', alt: 'Noivos dançando' },
614
+ { id: 3, src: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3', category: 'portraits', alt: 'Ensaio feminino' },
615
+ { id: 4, src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3', category: 'portraits', alt: 'Retrato masculino' },
616
+ { id: 5, src: 'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3', category: 'events', alt: 'Show musical' },
617
+ { id: 6, src: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3', category: 'events', alt: 'Evento corporativo' },
618
+ { id: 7, src: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3', category: 'family', alt: 'Família no parque' },
619
+ { id: 8, src: 'https://images.unsplash.com/photo-1529333164855-9f3c10d82397?ixlib=rb-4.0.3', category: 'family', alt: 'Gestante' },
620
+ { id: 9, src: 'https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3', category: 'weddings', alt: 'Beijo dos noivos' },
621
+ { id: 10, src: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3', category: 'portraits', alt: 'Ensaio criativo' },
622
+ { id: 11, src: 'https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3', category: 'events', alt: 'Festa de formatura' },
623
+ { id: 12, src: 'https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-4.0.3', category: 'family', alt: 'Bebê fotografado' }
624
+ ],
625
+ weddings: [
626
+ { id: 1, src: 'https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3', category: 'weddings', alt: 'Casamento no campo' },
627
+ { id: 2, src: 'https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-4.0.3', category: 'weddings', alt: 'Noivos dançando' },
628
+ { id: 9, src: 'https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3', category: 'weddings', alt: 'Beijo dos noivos' },
629
+ { id: 13, src: 'https://images.unsplash.com/photo-1507048331197-7d4ac70811cf?ixlib=rb-4.0.3', category: 'weddings', alt: 'Cerimônia de casamento' },
630
+ { id: 14, src: 'https://images.unsplash.com/photo-1491975474562-1f4e30bc9468?ixlib=rb-4.0.3', category: 'weddings', alt: 'Decoração do casamento' },
631
+ { id: 15, src: 'https://images.unsplash.com/photo-1485274466491-6c0baa1cfc0a?ixlib=rb-4.0.3', category: 'weddings', alt: 'Festa de casamento' }
632
+ ],
633
+ portraits: [
634
+ { id: 3, src: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3', category: 'portraits', alt: 'Ensaio feminino' },
635
+ { id: 4, src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3', category: 'portraits', alt: 'Retrato masculino' },
636
+ { id: 10, src: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3', category: 'portraits', alt: 'Ensaio criativo' },
637
+ { id: 16, src: 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3', category: 'portraits', alt: 'Retrato em preto e branco' }
638
+ ],
639
+ events: [
640
+ { id: 5, src: 'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3', category: 'events', alt: 'Show musical' },
641
+ { id: 6, src: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3', category: 'events', alt: 'Evento corporativo' },
642
+ { id: 11, src: 'https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3', category: 'events', alt: 'Festa de formatura' },
643
+ { id: 17, src: 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3', category: 'events', alt: 'Palestra corporativa' }
644
+ ],
645
+ family: [
646
+ { id: 7, src: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3', category: 'family', alt: 'Família no parque' },
647
+ { id: 8, src: 'https://images.unsplash.com/photo-1529333164855-9f3c10d82397?ixlib=rb-4.0.3', category: 'family', alt: 'Gestante' },
648
+ { id: 12, src: 'https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-4.0.3', category: 'family', alt: 'Bebê fotografado' },
649
+ { id: 18, src: 'https://images.unsplash.com/photo-1523419409533-e91634057e3d?ixlib=rb-4.0.3', category: 'family', alt: 'Família com crianças' }
650
+ ]
651
+ };
652
+
653
+ // Instagram data - in a real scenario you'd fetch from API
654
+ const instagramData = [
655
+ 'https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3',
656
+ 'https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-4.0.3',
657
+ 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3',
658
+ 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3',
659
+ 'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3',
660
+ 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3'
661
+ ];
662
+
663
+ // DOM elements
664
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
665
+ const mobileMenu = document.getElementById('mobile-menu');
666
+ const portfolioTabs = document.querySelectorAll('.portfolio-tab');
667
+ const portfolioGrid = document.querySelector('.portfolio-grid');
668
+ const imageModal = document.getElementById('imageModal');
669
+ const modalImage = document.getElementById('modalImage');
670
+ const captionText = document.getElementById('caption');
671
+ const closeModal = document.getElementsByClassName('close')[0];
672
+ const backToTop = document.getElementById('backToTop');
673
+ const contactForm = document.getElementById('contactForm');
674
+ const successModal = document.getElementById('successModal');
675
+ const closeSuccessModal = document.getElementById('closeModal');
676
+ const instagramFeed = document.querySelector('.instagram-feed');
677
+
678
+ // Mobile menu toggle
679
+ mobileMenuButton.addEventListener('click', () => {
680
+ mobileMenu.classList.toggle('hidden');
681
+ });
682
+
683
+ // Smooth scrolling for navigation
684
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
685
+ anchor.addEventListener('click', function (e) {
686
+ e.preventDefault();
687
+
688
+ mobileMenu.classList.add('hidden');
689
+
690
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
691
+ behavior: 'smooth'
692
+ });
693
+ });
694
+ });
695
+
696
+ // Portfolio filter functionality
697
+ portfolioTabs.forEach(tab => {
698
+ tab.addEventListener('click', () => {
699
+ portfolioTabs.forEach(t => t.classList.remove('active-tab'));
700
+ tab.classList.add('active-tab');
701
+
702
+ const category = tab.getAttribute('data-category');
703
+ loadPortfolioItems(category);
704
+ });
705
+ });
706
+
707
+ // Load portfolio items
708
+ function loadPortfolioItems(category) {
709
+ const items = category === 'all' ?
710
+ portfolioData.all :
711
+ portfolioData[category] || [];
712
+
713
+ portfolioGrid.innerHTML = '';
714
+
715
+ if (items.length === 0) {
716
+ portfolioGrid.innerHTML = '<p class="text-center py-8">Nenhuma imagem encontrada nesta categoria.</p>';
717
+ return;
718
+ }
719
+
720
+ items.forEach(item => {
721
+ const portfolioItem = document.createElement('div');
722
+ portfolioItem.className = 'gallery-item relative group overflow-hidden rounded-lg cursor-pointer';
723
+ portfolioItem.innerHTML = `
724
+ <img src="${item.src}" alt="${item.alt}" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
725
+ <div class="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
726
+ <span class="text-white text-lg font-medium">${item.alt}</span>
727
+ </div>
728
+ `;
729
+ portfolioItem.addEventListener('click', () => {
730
+ modalImage.src = item.src;
731
+ captionText.innerHTML = item.alt;
732
+ imageModal.style.display = "block";
733
+ });
734
+ portfolioGrid.appendChild(portfolioItem);
735
+ });
736
+ }
737
+
738
+ // Initialize portfolio with all items
739
+ loadPortfolioItems('all');
740
+
741
+ // Modal functionality
742
+ closeModal.addEventListener('click', () => {
743
+ imageModal.style.display = "none";
744
+ });
745
+
746
+ window.addEventListener('click', (event) => {
747
+ if (event.target === imageModal) {
748
+ imageModal.style.display = "none";
749
+ }
750
+ });
751
+
752
+ // Back to top button
753
+ window.addEventListener('scroll', () => {
754
+ if (window.pageYOffset > 300) {
755
+ backToTop.classList.remove('opacity-0', 'invisible');
756
+ backToTop.classList.add('opacity-100', 'visible');
757
+ } else {
758
+ backToTop.classList.remove('opacity-100', 'visible');
759
+ backToTop.classList.add('opacity-0', 'invisible');
760
+ }
761
+ });
762
+
763
+ backToTop.addEventListener('click', () => {
764
+ window.scrollTo({
765
+ top: 0,
766
+ behavior: 'smooth'
767
+ });
768
+ });
769
+
770
+ // Contact form submission
771
+ contactForm.addEventListener('submit', (e) => {
772
+ e.preventDefault();
773
+
774
+ // In a real scenario, you would send the form data to a server
775
+ console.log('Form submitted:', {
776
+ name: document.getElementById('name').value,
777
+ email: document.getElementById('email').value,
778
+ phone: document.getElementById('phone').value,
779
+ service: document.getElementById('service').value,
780
+ message: document.getElementById('message').value
781
+ });
782
+
783
+ // Show success modal
784
+ successModal.classList.remove('opacity-0', 'invisible');
785
+ successModal.classList.add('opacity-100', 'visible');
786
+
787
+ // Reset form
788
+ contactForm.reset();
789
+ });
790
+
791
+ // Close success modal
792
+ closeSuccessModal.addEventListener('click', () => {
793
+ successModal.classList.remove('opacity-100', 'visible');
794
+ successModal.classList.add('opacity-0', 'invisible');
795
+ });
796
+
797
+ // Load Instagram feed
798
+ function loadInstagramFeed() {
799
+ instagramFeed.innerHTML = '';
800
+
801
+ instagramData.forEach(imgSrc => {
802
+ const instaItem = document.createElement('div');
803
+ instaItem.className = 'relative group overflow-hidden cursor-pointer';
804
+ instaItem.innerHTML = `
805
+ <img src="${imgSrc}" alt="Instagram post" class="w-full h-full object-cover">
806
+ <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
807
+ <i class="fab fa-instagram text-white text-2xl"></i>
808
+ </div>
809
+ `;
810
+ instagramFeed.appendChild(instaItem);
811
+ });
812
+ }
813
+
814
+ loadInstagramFeed();
815
+
816
+ // Lazy loading images when they come into view
817
+ const lazyLoad = function() {
818
+ const lazyImages = document.querySelectorAll('img[data-src]');
819
+
820
+ const imageObserver = new IntersectionObserver(function(entries, observer) {
821
+ entries.forEach(function(entry) {
822
+ if (entry.isIntersecting) {
823
+ const img = entry.target;
824
+ img.src = img.getAttribute('data-src');
825
+ img.removeAttribute('data-src');
826
+ observer.unobserve(img);
827
+ }
828
+ });
829
+ });
830
+
831
+ lazyImages.forEach(function(img) {
832
+ imageObserver.observe(img);
833
+ });
834
+ };
835
+
836
+ // Initialize lazy loading
837
+ document.addEventListener('DOMContentLoaded', lazyLoad);
838
+ </script>
839
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Arthurrn/teucuu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
840
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ gostaria de criar um site profissional para meu trabalho como fotógrafo. Quero um site bem planejado, com foco visual e navegação simples. Objetivo do site: Exibir meu portfólio de fotografia (por categorias: casamentos, ensaios, eventos, etc.) Atrair novos clientes Permitir que pessoas entrem em contato ou solicitem orçamentos O que espero do site: Design moderno e responsivo (funcione bem em celular e desktop) Galeria de fotos bem organizada Página “Sobre mim” com minha história e abordagem fotográfica Blog (opcional) para compartilhar bastidores ou dicas Integração com redes sociais Formulário de contato Boa performance (rápido para carregar) e otimizado para Google (SEO) Referências que gosto: [Link de sites de fotógrafos que você admira] Prazos e orçamento: Gostaria de uma estimativa de tempo e custo com base nesse briefing.