Hugging Face's logo

Spaces:
Arthurrn
/
saaa
Running

App Files Community
Arthurrn commited on
Commit
fb8ff2b
·
verified ·
1 Parent(s): bd4addd

crie um site para me de fotografia amador para um jovem de 25 anos - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +725 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Saaa
3
- emoji: 📚
4
- colorFrom: blue
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: saaa
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
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,725 @@
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>Sp|Fotogafi Amadora</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Efeitos personalizados */
11
+ .photo-card:hover .photo-overlay {
12
+ opacity: 1;
13
+ transform: translateY(0);
14
+ }
15
+
16
+ .photo-overlay {
17
+ transition: all 0.3s ease;
18
+ opacity: 0;
19
+ transform: translateY(20px);
20
+ }
21
+
22
+ .gradient-text {
23
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
24
+ -webkit-background-clip: text;
25
+ background-clip: text;
26
+ color: transparent;
27
+ }
28
+
29
+ @keyframes float {
30
+ 0%, 100% {
31
+ transform: translateY(0);
32
+ }
33
+ 50% {
34
+ transform: translateY(-10px);
35
+ }
36
+ }
37
+
38
+ .floating {
39
+ animation: float 3s ease-in-out infinite;
40
+ }
41
+
42
+ /* Custom scrollbar */
43
+ ::-webkit-scrollbar {
44
+ width: 8px;
45
+ }
46
+
47
+ ::-webkit-scrollbar-track {
48
+ background: #f1f1f1;
49
+ }
50
+
51
+ ::-webkit-scrollbar-thumb {
52
+ background: #888;
53
+ border-radius: 10px;
54
+ }
55
+
56
+ ::-webkit-scrollbar-thumb:hover {
57
+ background: #555;
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="bg-gray-50 font-sans antialiased">
62
+ <!-- Cabeçalho -->
63
+ <header class="fixed w-full bg-white/90 backdrop-blur-sm z-50 shadow-sm">
64
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
65
+ <div class="flex items-center">
66
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold mr-2">
67
+ LC
68
+ </div>
69
+ <h1 class="text-xl font-bold gradient-text">Lente Criativa</h1>
70
+ </div>
71
+
72
+ <nav class="hidden md:block">
73
+ <ul class="flex space-x-8">
74
+ <li><a href="#inicio" class="text-gray-700 hover:text-purple-600 transition">Início</a></li>
75
+ <li><a href="#portfolio" class="text-gray-700 hover:text-purple-600 transition">Portfólio</a></li>
76
+ <li><a href="#sobre" class="text-gray-700 hover:text-purple-600 transition">Sobre</a></li>
77
+ <li><a href="#equipamentos" class="text-gray-700 hover:text-purple-600 transition">Equipamentos</a></li>
78
+ <li><a href="#contato" class="text-gray-700 hover:text-purple-600 transition">Contato</a></li>
79
+ </ul>
80
+ </nav>
81
+
82
+ <button class="md:hidden text-gray-700">
83
+ <i class="fas fa-bars text-2xl"></i>
84
+ </button>
85
+ </div>
86
+
87
+ <!-- Menu mobile -->
88
+ <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-md" id="mobile-menu">
89
+ <ul class="space-y-4">
90
+ <li><a href="#inicio" class="block text-gray-700 hover:text-purple-600 transition">Início</a></li>
91
+ <li><a href="#portfolio" class="block text-gray-700 hover:text-purple-600 transition">Portfólio</a></li>
92
+ <li><a href="#sobre" class="block text-gray-700 hover:text-purple-600 transition">Sobre</a></li>
93
+ <li><a href="#equipamentos" class="block text-gray-700 hover:text-purple-600 transition">Equipamentos</a></li>
94
+ <li><a href="#contato" class="block text-gray-700 hover:text-purple-600 transition">Contato</a></li>
95
+ </ul>
96
+ </div>
97
+ </header>
98
+
99
+ <!-- Hero Section -->
100
+ <section id="inicio" class="pt-24 pb-16 md:pt-32 md:pb-24 px-4" style="background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);">
101
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
102
+ <div class="md:w-1/2 mb-10 md:mb-0">
103
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 text-gray-800 leading-tight">
104
+ Capturando <span class="gradient-text">momentos</span>, criando <span class="gradient-text">memórias</span>
105
+ </h1>
106
+ <p class="text-lg text-gray-600 mb-8">
107
+ Fotografia amadora com olhar profissional. Explore meu portfólio e descubra o mundo através da minha lente.
108
+ </p>
109
+ <div class="flex space-x-4">
110
+ <a href="#portfolio" class="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 py-3 rounded-full font-medium hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
111
+ Ver Portfólio
112
+ </a>
113
+ <a href="#contato" class="border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-full font-medium hover:border-purple-500 hover:text-purple-600 transition">
114
+ Contato
115
+ </a>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="md:w-1/2 flex justify-center">
120
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl floating">
121
+ <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
122
+ alt="Fotógrafo"
123
+ class="w-full h-full object-cover">
124
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end pb-8 justify-center">
125
+ <span class="text-white text-lg font-semibold">João, 25 anos</span>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </section>
131
+
132
+ <!-- Estatísticas -->
133
+ <section class="py-12 bg-white">
134
+ <div class="container mx-auto px-4">
135
+ <div class="flex flex-wrap justify-center md:justify-between text-center">
136
+ <div class="w-1/2 md:w-auto mb-8 md:mb-0 px-4">
137
+ <div class="text-4xl font-bold text-purple-600 mb-2">3+</div>
138
+ <div class="text-gray-600">Anos de experiência</div>
139
+ </div>
140
+ <div class="w-1/2 md:w-auto mb-8 md:mb-0 px-4">
141
+ <div class="text-4xl font-bold text-blue-500 mb-2">500+</div>
142
+ <div class="text-gray-600">Fotos capturadas</div>
143
+ </div>
144
+ <div class="w-1/2 md:w-auto px-4">
145
+ <div class="text-4xl font-bold text-indigo-500 mb-2">10+</div>
146
+ <div class="text-gray-600">Eventos registrados</div>
147
+ </div>
148
+ <div class="w-1/2 md:w-auto px-4">
149
+ <div class="text-4xl font-bold text-pink-500 mb-2">50+</div>
150
+ <div class="text-gray-600">Clientes satisfeitos</div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- Portfólio -->
157
+ <section id="portfolio" class="py-16 bg-gray-50">
158
+ <div class="container mx-auto px-4">
159
+ <div class="text-center mb-12">
160
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Meu <span class="gradient-text">Portfólio</span></h2>
161
+ <p class="text-gray-600 max-w-2xl mx-auto">Explore minha coleção de trabalhos - desde retratos espontâneos até paisagens que contam histórias.</p>
162
+ </div>
163
+
164
+ <!-- Filtros -->
165
+ <div class="flex justify-center mb-8 flex-wrap gap-2">
166
+ <button class="px-4 py-2 rounded-full bg-purple-500 text-white filter-btn active" data-filter="all">Todas</button>
167
+ <button class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 filter-btn" data-filter="natureza">Natureza</button>
168
+ <button class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 filter-btn" data-filter="retratos">Retratos</button>
169
+ <button class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 filter-btn" data-filter="urbano">Urbano</button>
170
+ <button class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 filter-btn" data-filter="eventos">Eventos</button>
171
+ </div>
172
+
173
+ <!-- Galeria -->
174
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
175
+ <!-- Item 1 -->
176
+ <div class="photo-item group" data-category="natureza">
177
+ <div class="relative overflow-hidden rounded-xl shadow-lg h-64">
178
+ <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
179
+ alt="Paisagem natural"
180
+ class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500">
181
+ <div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6">
182
+ <h3 class="text-white text-xl font-semibold mb-2">Alvorada na Montanha</h3>
183
+ <p class="text-gray-300">Capturada durante uma caminhada matinal em Minas Gerais</p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Item 2 -->
189
+ <div class="photo-item group" data-category="retratos">
190
+ <div class="relative overflow-hidden rounded-xl shadow-lg h-64">
191
+ <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
192
+ alt="Retrato de jovem"
193
+ class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500">
194
+ <div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6">
195
+ <h3 class="text-white text-xl font-semibold mb-2">Olhar Profundo</h3>
196
+ <p class="text-gray-300">Sessão casual com iluminação natural</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Item 3 -->
202
+ <div class="photo-item group" data-category="urbano">
203
+ <div class="relative overflow-hidden rounded-xl shadow-lg h-64">
204
+ <img src="https://images.unsplash.com/photo-1533134242443-2042a3e2d0f7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
205
+ alt="Cena urbana noturna"
206
+ class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500">
207
+ <div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6">
208
+ <h3 class="text-white text-xl font-semibold mb-2">Metrópole Noturna</h3>
209
+ <p class="text-gray-300">Longa exposição capturando o movimento da cidade</p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Item 4 -->
215
+ <div class="photo-item group" data-category="eventos">
216
+ <div class="relative overflow-hidden rounded-xl shadow-lg h-64">
217
+ <img src="https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
218
+ alt="Casamento"
219
+ class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500">
220
+ <div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6">
221
+ <h3 class="text-white text-xl font-semibold mb-2">Primeiro Beijo</h3>
222
+ <p class="text-gray-300">Momento especial capturado em um casamento</p>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Item 5 -->
228
+ <div class="photo-item group" data-category="natureza">
229
+ <div class="relative overflow-hidden rounded-xl shadow-lg h-64">
230
+ <img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
231
+ alt="Cachoeira"
232
+ class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500">
233
+ <div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6">
234
+ <h3 class="text-white text-xl font-semibold mb-2">Força da Natureza</h3>
235
+ <p class="text-gray-300">Cachoeira em Chapada dos Veadeiros</p>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Item 6 -->
241
+ <div class="photo-item group" data-category="retratos">
242
+ <div class="relative overflow-hidden rounded-xl shadow-lg h-64">
243
+ <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
244
+ alt="Retrato urbano"
245
+ class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500">
246
+ <div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6">
247
+ <h3 class="text-white text-xl font-semibold mb-2">Expressão Urbana</h3>
248
+ <p class="text-gray-300">Retrato em ambiente industrial</p>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <div class="text-center mt-12">
255
+ <a href="#" class="inline-block border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-full font-medium hover:border-purple-500 hover:text-purple-600 transition">
256
+ Ver Mais Fotos
257
+ </a>
258
+ </div>
259
+ </div>
260
+ </section>
261
+
262
+ <!-- Sobre Mim -->
263
+ <section id="sobre" class="py-16 bg-white">
264
+ <div class="container mx-auto px-4">
265
+ <div class="flex flex-col md:flex-row items-center">
266
+ <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center">
267
+ <div class="relative">
268
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
269
+ alt="Fotógrafo"
270
+ class="w-64 h-64 md:w-80 md:h-80 rounded-full object-cover border-4 border-white shadow-xl">
271
+ <div class="absolute -bottom-4 -right-4 bg-purple-500 text-white px-4 py-2 rounded-full font-medium">
272
+ 25 anos
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="md:w-2/3 md:pl-12">
278
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Sobre <span class="gradient-text">Mim</span></h2>
279
+ <p class="text-gray-600 mb-6 leading-relaxed">
280
+ Olá, eu sou o João! Sou um jovem fotógrafo amador de 25 anos que encontrou na fotografia uma maneira de expressar minha criatividade e conexão com o mundo.
281
+ </p>
282
+ <p class="text-gray-600 mb-6 leading-relaxed">
283
+ Tudo começou como um hobby durante a faculdade, quando comprei minha primeira câmera para registrar viagens com amigos. Desde então, a paixão só cresceu e hoje dedico meu tempo livre a explorar diferentes técnicas e estilos fotográficos.
284
+ </p>
285
+ <p class="text-gray-600 mb-8 leading-relaxed">
286
+ Acredito que a fotografia vai além de simplesmente capturar imagens - é sobre contar histórias, preservar memórias e ver beleza nos detalhes que muitas vezes passam despercebidos.
287
+ </p>
288
+
289
+ <div class="flex flex-wrap gap-4">
290
+ <div class="flex items-center bg-gray-100 px-4 py-2 rounded-full">
291
+ <i class="fas fa-camera text-purple-500 mr-2"></i>
292
+ <span>Fotografia desde 2020</span>
293
+ </div>
294
+ <div class="flex items-center bg-gray-100 px-4 py-2 rounded-full">
295
+ <i class="fas fa-graduation-cap text-blue-500 mr-2"></i>
296
+ <span>Formado em Design</span>
297
+ </div>
298
+ <div class="flex items-center bg-gray-100 px-4 py-2 rounded-full">
299
+ <i class="fas fa-map-marker-alt text-pink-500 mr-2"></i>
300
+ <span>MarcionilioSouza, BA</span>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- Equipamentos -->
309
+ <section id="equipamentos" class="py-16 bg-gray-50">
310
+ <div class="container mx-auto px-4">
311
+ <div class="text-center mb-12">
312
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Meus <span class="gradient-text">Equipamentos</span></h2>
313
+ <p class="text-gray-600 max-w-2xl mx-auto">Conheça as ferramentas que uso para transformar visões em imagens</p>
314
+ </div>
315
+
316
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
317
+ <!-- Câmera -->
318
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
319
+ <div class="h-48 bg-gray-100 flex items-center justify-center p-6">
320
+ <img src="https://m.media-amazon.com/images/I/61+s0KyqqFL._AC_SL1500_.jpg" alt="Câmera Canon" class="h-full object-contain">
321
+ </div>
322
+ <div class="p-6">
323
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Canon EOS RP</h3>
324
+ <p class="text-gray-600 mb-4">Câmera mirrorless full-frame com 26.2MP</p>
325
+ <div class="flex items-center text-yellow-400">
326
+ <i class="fas fa-star"></i>
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="fas fa-star-half-alt"></i>
331
+ <span class="text-gray-600 ml-2 text-sm">4.7</span>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Lente 1 -->
337
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
338
+ <div class="h-48 bg-gray-100 flex items-center justify-center p-6">
339
+ <img src="https://m.media-amazon.com/images/I/61OQLbj3HUL._AC_SL1500_.jpg" alt="Lente Canon" class="h-full object-contain">
340
+ </div>
341
+ <div class="p-6">
342
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">RF 24-105mm f/4L</h3>
343
+ <p class="text-gray-600 mb-4">Lente versátil para diversas situações</p>
344
+ <div class="flex items-center text-yellow-400">
345
+ <i class="fas fa-star"></i>
346
+ <i class="fas fa-star"></i>
347
+ <i class="fas fa-star"></i>
348
+ <i class="fas fa-star"></i>
349
+ <i class="fas fa-star"></i>
350
+ <span class="text-gray-600 ml-2 text-sm">5.0</span>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Lente 2 -->
356
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
357
+ <div class="h-48 bg-gray-100 flex items-center justify-center p-6">
358
+ <img src="https://m.media-amazon.com/images/I/71n+ZC5MS9L._AC_SL1500_.jpg" alt="Lente Canon" class="h-full object-contain">
359
+ </div>
360
+ <div class="p-6">
361
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">RF 50mm f/1.8</h3>
362
+ <p class="text-gray-600 mb-4">Lente prime para retratos com belo bokeh</p>
363
+ <div class="flex items-center text-yellow-400">
364
+ <i class="fas fa-star"></i>
365
+ <i class="fas fa-star"></i>
366
+ <i class="fas fa-star"></i>
367
+ <i class="fas fa-star"></i>
368
+ <i class="fas fa-star-half-alt"></i>
369
+ <span class="text-gray-600 ml-2 text-sm">4.5</span>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <!-- Acessório -->
375
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
376
+ <div class="h-48 bg-gray-100 flex items-center justify-center p-6">
377
+ <img src="https://m.media-amazon.com/images/I/71Fd+K2RGQL._AC_SL1500_.jpg" alt="Tripé" class="h-full object-contain">
378
+ </div>
379
+ <div class="p-6">
380
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Tripé Manfrotto</h3>
381
+ <p class="text-gray-600 mb-4">Tripé compacto e resistente para viagens</p>
382
+ <div class="flex items-center text-yellow-400">
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ <i class="fas fa-star"></i>
387
+ <i class="far fa-star"></i>
388
+ <span class="text-gray-600 ml-2 text-sm">4.2</span>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
395
+ <div class="p-8 md:p-12">
396
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Meu Processo Criativo</h3>
397
+ <p class="text-gray-600 mb-6 leading-relaxed">
398
+ Enquanto equipamentos de qualidade são importantes, acredito que o olhar do fotógrafo é o que verdadeiramente faz a diferença. Uso minha câmera como uma extensão da minha visão, buscando sempre aprender e experimentar novas técnicas.
399
+ </p>
400
+ <p class="text-gray-600 leading-relaxed">
401
+ Apesar de ter equipamentos profissionais, também adoro desafios com equipamentos mais simples, provando que criatividade e técnica podem compensar qualquer limitação técnica.
402
+ </p>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </section>
407
+
408
+ <!-- Depoimentos -->
409
+ <section class="py-16 bg-gradient-to-r from-purple-500 to-blue-500 text-white">
410
+ <div class="container mx-auto px-4">
411
+ <div class="text-center mb-12">
412
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">O que dizem <span class="text-yellow-300">sobre mim</span></h2>
413
+ <p class="max-w-2xl mx-auto opacity-90">Depoimentos de clientes e amigos que já trabalharam comigo</p>
414
+ </div>
415
+
416
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
417
+ <!-- Depoimento 1 -->
418
+ <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
419
+ <div class="flex items-center mb-4">
420
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
421
+ <div>
422
+ <h4 class="font-semibold">Ana Carolina</h4>
423
+ <div class="flex text-yellow-300 text-sm">
424
+ <i class="fas fa-star"></i>
425
+ <i class="fas fa-star"></i>
426
+ <i class="fas fa-star"></i>
427
+ <i class="fas fa-star"></i>
428
+ <i class="fas fa-star"></i>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ <p class="opacity-90 italic">
433
+ "O João capturou momentos do meu casamento que eu nem tinha percebido. Sua sensibilidade para enquadrar e escolher os ângulos foi incrível. Super recomendo!"
434
+ </p>
435
+ </div>
436
+
437
+ <!-- Depoimento 2 -->
438
+ <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
439
+ <div class="flex items-center mb-4">
440
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
441
+ <div>
442
+ <h4 class="font-semibold">Ricardo Almeida</h4>
443
+ <div class="flex text-yellow-300 text-sm">
444
+ <i class="fas fa-star"></i>
445
+ <i class="fas fa-star"></i>
446
+ <i class="fas fa-star"></i>
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ <p class="opacity-90 italic">
453
+ "Contratei o João para fazer fotos do meu restaurante novo e fiquei impressionado com o resultado. Ele conseguiu transmitir exatamente o clima que eu queria."
454
+ </p>
455
+ </div>
456
+
457
+ <!-- Depoimento 3 -->
458
+ <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
459
+ <div class="flex items-center mb-4">
460
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
461
+ <div>
462
+ <h4 class="font-semibold">Mariana Souza</h4>
463
+ <div class="flex text-yellow-300 text-sm">
464
+ <i class="fas fa-star"></i>
465
+ <i class="fas fa-star"></i>
466
+ <i class="fas fa-star"></i>
467
+ <i class="fas fa-star"></i>
468
+ <i class="fas fa-star-half-alt"></i>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ <p class="opacity-90 italic">
473
+ "Fiz uma sessão de fotos com o João para meu perfil profissional e amei o resultado natural e sem poses forçadas. Ele tem um ótimo olhar para retratos."
474
+ </p>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </section>
479
+
480
+ <!-- Contato -->
481
+ <section id="contato" class="py-16 bg-white">
482
+ <div class="container mx-auto px-4">
483
+ <div class="max-w-4xl mx-auto">
484
+ <div class="text-center mb-12">
485
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Vamos <span class="gradient-text">Conversar</span></h2>
486
+ <p class="text-gray-600 max-w-2xl mx-auto">Entre em contato para sessões, eventos ou apenas para trocar ideias sobre fotografia</p>
487
+ </div>
488
+
489
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
490
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
491
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Informações de Contato</h3>
492
+
493
+ <div class="space-y-6">
494
+ <div class="flex items-start">
495
+ <div class="bg-purple-100 p-3 rounded-full mr-4 text-purple-600">
496
+ <i class="fas fa-map-marker-alt"></i>
497
+ </div>
498
+ <div>
499
+ <h4 class="font-medium text-gray-800">Localização</h4>
500
+ <p class="text-gray-600">Marcionilio Sauza, </p>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="flex items-start">
505
+ <div class="bg-blue-100 p-3 rounded-full mr-4 text-blue-600">
506
+ <i class="fas fa-envelope"></i>
507
+ </div>
508
+ <div>
509
+ <h4 class="font-medium text-gray-800">Email</h4>
510
+ <p class="text-gray-600">freegames185@gmail.com</p>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="flex items-start">
515
+ <div class="bg-green-100 p-3 rounded-full mr-4 text-green-600">
516
+ <i class="fas fa-phone-alt"></i>
517
+ </div>
518
+ <div>
519
+ <h4 class="font-medium text-gray-800">Telefone</h4>
520
+ <p class="text-gray-600">(75) 99121-0815</p>
521
+ </div>
522
+ </div>
523
+
524
+ <div class="flex items-start">
525
+ <div class="bg-pink-100 p-3 rounded-full mr-4 text-pink-600">
526
+ <i class="fas fa-clock"></i>
527
+ </div>
528
+ <div>
529
+ <h4 class="font-medium text-gray-800">Horário</h4>
530
+ <p class="text-gray-600">Segunda a Sábado, 9h às 18h</p>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="mt-8">
536
+ <h4 class="font-medium text-gray-800 mb-4">Redes Sociais</h4>
537
+ <div class="flex space-x-4">
538
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-instagram hover:text-white hover:bg-gradient-to-r from-purple-500 to-pink-500 transition">
539
+ <i https://www.instagram.com/spartanphots/class="fab fa-instagram"></i>
540
+ </a>
541
+
542
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-blue-400 hover:text-white transition">
543
+ <i class="fab fa-twitter"></i>
544
+ </a>
545
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-red-500 hover:text-white transition">
546
+ <i class="fab fa-youtube"></i>
547
+ </a>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm">
553
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Mensagem</h3>
554
+
555
+ <form class="space-y-4">
556
+ <div>
557
+ <label for="name" class="block text-gray-700 mb-2">Nome</label>
558
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
559
+ </div>
560
+
561
+ <div>
562
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
563
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
564
+ </div>
565
+
566
+ <div>
567
+ <label for="subject" class="block text-gray-700 mb-2">Assunto</label>
568
+ <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
569
+ <option value="">Selecione um assunto</option>
570
+ <option value="session">Sessão Fotográfica</option>
571
+ <option value="event">Cobertura de Evento</option>
572
+ <option value="question">Dúvida</option>
573
+ <option value="other">Outro</option>
574
+ </select>
575
+ </div>
576
+
577
+ <div>
578
+ <label for="message" class="block text-gray-700 mb-2">Mensagem</label>
579
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"></textarea>
580
+ </div>
581
+
582
+ <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition-all duration-300">
583
+ Enviar Mensagem
584
+ </button>
585
+ </form>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </section>
591
+
592
+ <!-- Rodapé -->
593
+ <footer class="bg-gray-900 text-gray-400 py-12">
594
+ <div class="container mx-auto px-4">
595
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
596
+ <div>
597
+ <div class="flex items-center mb-4">
598
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold mr-2">
599
+ LC
600
+ </div>
601
+ <h3 class="text-xl font-bold text-white">Lente Criativa</h3>
602
+ </div>
603
+ <p class="mb-4">Fotografia amadora com profissionalismo e paixão.</p>
604
+ <p>&copy; 2023 Lente Criativa. Todos os direitos reservados.</p>
605
+ </div>
606
+
607
+ <div>
608
+ <h4 class="text-lg font-semibold text-white mb-4">Links Rápidos</h4>
609
+ <ul class="space-y-2">
610
+ <li><a href="#inicio" class="hover:text-white transition">Início</a></li>
611
+ <li><a href="#portfolio" class="hover:text-white transition">Portfólio</a></li>
612
+ <li><a href="#sobre" class="hover:text-white transition">Sobre Mim</a></li>
613
+ <li><a href="#equipamentos" class="hover:text-white transition">Equipamentos</a></li>
614
+ <li><a href="#contato" class="hover:text-white transition">Contato</a></li>
615
+ </ul>
616
+ </div>
617
+
618
+ <div>
619
+ <h4 class="text-lg font-semibold text-white mb-4">Serviços</h4>
620
+ <ul class="space-y-2">
621
+ <li><a href="#" class="hover:text-white transition">Retratos</a></li>
622
+ <li><a href="#" class="hover:text-white transition">Eventos</a></li>
623
+ <li><a href="#" class="hover:text-white transition">Paisagens</a></li>
624
+ <li><a href="#" class="hover:text-white transition">Fotos de Produto</a></li>
625
+ <li><a href="#" class="hover:text-white transition">Workshops</a></li>
626
+ </ul>
627
+ </div>
628
+
629
+ <div>
630
+ <h4 class="text-lg font-semibold text-white mb-4">Newsletter</h4>
631
+ <p class="mb-4">Inscreva-se para receber dicas de fotografia e novidades.</p>
632
+ <form class="flex">
633
+ <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-900">
634
+ <button type="submit" class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700 transition">
635
+ <i class="fas fa-paper-plane"></i>
636
+ </button>
637
+ </form>
638
+ </div>
639
+ </div>
640
+
641
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center">
642
+ <p>Desenvolvido com ❤️ por um apaixonado por fotografia</p>
643
+ </div>
644
+ </div>
645
+ </footer>
646
+
647
+ <!-- Voltar ao topo -->
648
+ <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-purple-600 text-white rounded-full shadow-lg flex items-center justify-center hidden">
649
+ <i class="fas fa-arrow-up"></i>
650
+ </button>
651
+
652
+ <script>
653
+ // Filtro da galeria
654
+ document.querySelectorAll('.filter-btn').forEach(button => {
655
+ button.addEventListener('click', () => {
656
+ // Ativar botão clicado
657
+ document.querySelectorAll('.filter-btn').forEach(btn => {
658
+ btn.classList.remove('active', 'bg-purple-500', 'text-white');
659
+ btn.classList.add('bg-gray-200', 'text-gray-700');
660
+ });
661
+
662
+ button.classList.add('active', 'bg-purple-500', 'text-white');
663
+ button.classList.remove('bg-gray-200', 'text-gray-700');
664
+
665
+ // Filtrar itens
666
+ const filter = button.dataset.filter;
667
+ const items = document.querySelectorAll('.photo-item');
668
+
669
+ items.forEach(item => {
670
+ if(filter === 'all' || item.dataset.category === filter) {
671
+ item.style.display = 'block';
672
+ } else {
673
+ item.style.display = 'none';
674
+ }
675
+ });
676
+ });
677
+ });
678
+
679
+ // Menu mobile
680
+ document.querySelector('header button').addEventListener('click', () => {
681
+ const menu = document.getElementById('mobile-menu');
682
+ menu.classList.toggle('hidden');
683
+ });
684
+
685
+ // Voltar ao topo
686
+ const backToTopButton = document.getElementById('back-to-top');
687
+
688
+ window.addEventListener('scroll', () => {
689
+ if(window.pageYOffset > 300) {
690
+ backToTopButton.classList.remove('hidden');
691
+ } else {
692
+ backToTopButton.classList.add('hidden');
693
+ }
694
+ });
695
+
696
+ backToTopButton.addEventListener('click', () => {
697
+ window.scrollTo({
698
+ top: 0,
699
+ behavior: 'smooth'
700
+ });
701
+ });
702
+
703
+ // Suavizar rolagem
704
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
705
+ anchor.addEventListener('click', function (e) {
706
+ e.preventDefault();
707
+
708
+ const target = document.querySelector(this.getAttribute('href'));
709
+ if(target) {
710
+ window.scrollTo({
711
+ top: target.offsetTop - 80,
712
+ behavior: 'smooth'
713
+ });
714
+ }
715
+
716
+ // Fechar menu mobile se aberto
717
+ const mobileMenu = document.getElementById('mobile-menu');
718
+ if(!mobileMenu.classList.contains('hidden')) {
719
+ mobileMenu.classList.add('hidden');
720
+ }
721
+ });
722
+ });
723
+ </script>
724
+ <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/saaa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
725
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ crie um site para me de fotografia amador para um jovem de 25 anos