Hugging Face's logo

Spaces:
CarloSorengo
/
wp2025fm
Running

App Files Community
CarloSorengo commited on
Commit
48ed998
·
verified ·
1 Parent(s): 7c3c749

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +5 -3
  2. index.html +665 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wp2025fm
3
- emoji: 🏢
4
  colorFrom: red
5
  colorTo: red
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: wp2025fm
3
+ emoji: 🐳
4
  colorFrom: red
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,665 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LensCraft | Photography Portfolio</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
+ /* Custom CSS for animations and effects */
11
+ .hero-image {
12
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-4.0.3');
13
+ background-size: cover;
14
+ background-position: center;
15
+ height: 90vh;
16
+ }
17
+
18
+ .gallery-item {
19
+ transition: all 0.3s ease;
20
+ }
21
+
22
+ .gallery-item:hover {
23
+ transform: scale(1.03);
24
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
25
+ }
26
+
27
+ .testimonial-card {
28
+ transition: all 0.3s ease;
29
+ }
30
+
31
+ .testimonial-card:hover {
32
+ transform: translateY(-10px);
33
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
34
+ }
35
+
36
+ @keyframes fadeIn {
37
+ from { opacity: 0; }
38
+ to { opacity: 1; }
39
+ }
40
+
41
+ .animate-fade-in {
42
+ animation: fadeIn 1s ease-in-out;
43
+ }
44
+
45
+ /* Lightbox styles */
46
+ .lightbox {
47
+ display: none;
48
+ position: fixed;
49
+ top: 0;
50
+ left: 0;
51
+ width: 100%;
52
+ height: 100%;
53
+ background-color: rgba(0, 0, 0, 0.9);
54
+ z-index: 1000;
55
+ justify-content: center;
56
+ align-items: center;
57
+ }
58
+
59
+ .lightbox-content {
60
+ max-width: 90%;
61
+ max-height: 90%;
62
+ }
63
+
64
+ .lightbox img {
65
+ max-width: 100%;
66
+ max-height: 90vh;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="font-sans bg-gray-50">
71
+ <!-- Navigation -->
72
+ <nav class="bg-white shadow-lg fixed w-full z-10">
73
+ <div class="max-w-7xl mx-auto px-4">
74
+ <div class="flex justify-between items-center h-16">
75
+ <div class="flex items-center">
76
+ <span class="text-2xl font-bold text-gray-800">LensCraft</span>
77
+ </div>
78
+ <div class="hidden md:flex space-x-8">
79
+ <a href="#home" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">Home</a>
80
+ <a href="#portfolio" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">Portfolio</a>
81
+ <a href="#about" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">About</a>
82
+ <a href="#services" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">Services</a>
83
+ <a href="#contact" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">Contact</a>
84
+ </div>
85
+ <div class="md:hidden">
86
+ <button id="menu-btn" class="text-gray-800 focus:outline-none">
87
+ <i class="fas fa-bars text-2xl"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ <!-- Mobile menu -->
93
+ <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg">
94
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
95
+ <a href="#home" class="block px-3 py-2 text-gray-800 hover:text-blue-600">Home</a>
96
+ <a href="#portfolio" class="block px-3 py-2 text-gray-800 hover:text-blue-600">Portfolio</a>
97
+ <a href="#about" class="block px-3 py-2 text-gray-800 hover:text-blue-600">About</a>
98
+ <a href="#services" class="block px-3 py-2 text-gray-800 hover:text-blue-600">Services</a>
99
+ <a href="#contact" class="block px-3 py-2 text-gray-800 hover:text-blue-600">Contact</a>
100
+ </div>
101
+ </div>
102
+ </nav>
103
+
104
+ <!-- Hero Section -->
105
+ <section id="home" class="hero-image pt-16 flex items-center justify-center text-center text-white animate-fade-in">
106
+ <div class="px-4 max-w-4xl">
107
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Capture Life's Beautiful Moments</h1>
108
+ <p class="text-xl md:text-2xl mb-8">Professional photography services for weddings, portraits, and commercial projects</p>
109
+ <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 inline-block">Book a Session</a>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- Portfolio Section -->
114
+ <section id="portfolio" class="py-20 bg-white">
115
+ <div class="max-w-7xl mx-auto px-4">
116
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Portfolio</h2>
117
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Explore my latest work across different photography genres</p>
118
+
119
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
120
+ <!-- Portfolio Item 1 -->
121
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
122
+ <img src="https://images.unsplash.com/photo-1529634319295-89d0c0e149a5?ixlib=rb-4.0.3" alt="Wedding Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Wedding Photography')">
123
+ <div class="p-6">
124
+ <h3 class="text-xl font-semibold mb-2">Wedding Photography</h3>
125
+ <p class="text-gray-600">Capturing the most important day of your life with elegance and emotion.</p>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Portfolio Item 2 -->
130
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
131
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3" alt="Portrait Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Portrait Photography')">
132
+ <div class="p-6">
133
+ <h3 class="text-xl font-semibold mb-2">Portrait Photography</h3>
134
+ <p class="text-gray-600">Beautiful portraits that capture personality and emotion.</p>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Portfolio Item 3 -->
139
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
140
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3" alt="Landscape Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Landscape Photography')">
141
+ <div class="p-6">
142
+ <h3 class="text-xl font-semibold mb-2">Landscape Photography</h3>
143
+ <p class="text-gray-600">Breathtaking landscapes from around the world.</p>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Portfolio Item 4 -->
148
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
149
+ <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3" alt="Event Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Event Photography')">
150
+ <div class="p-6">
151
+ <h3 class="text-xl font-semibold mb-2">Event Photography</h3>
152
+ <p class="text-gray-600">Professional coverage of corporate and social events.</p>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Portfolio Item 5 -->
157
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
158
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3" alt="Product Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Product Photography')">
159
+ <div class="p-6">
160
+ <h3 class="text-xl font-semibold mb-2">Product Photography</h3>
161
+ <p class="text-gray-600">Showcasing your products in the best possible light.</p>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Portfolio Item 6 -->
166
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
167
+ <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-4.0.3" alt="Fashion Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Fashion Photography')">
168
+ <div class="p-6">
169
+ <h3 class="text-xl font-semibold mb-2">Fashion Photography</h3>
170
+ <p class="text-gray-600">Stylish and creative fashion imagery.</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <div class="text-center mt-12">
176
+ <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold py-3 px-8 rounded-full transition duration-300">View Full Portfolio</a>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- About Section -->
182
+ <section id="about" class="py-20 bg-gray-100">
183
+ <div class="max-w-7xl mx-auto px-4">
184
+ <div class="flex flex-col md:flex-row items-center">
185
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
186
+ <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-4.0.3" alt="Photographer" class="rounded-lg shadow-xl w-full">
187
+ </div>
188
+ <div class="md:w-1/2">
189
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">About Me</h2>
190
+ <p class="text-gray-700 mb-4">Hi, I'm Sarah Johnson, a professional photographer with over 10 years of experience capturing special moments and creating stunning visual stories.</p>
191
+ <p class="text-gray-700 mb-4">My passion for photography began when I received my first camera at age 12. Since then, I've dedicated my life to mastering the art of capturing light, emotion, and beauty through my lens.</p>
192
+ <p class="text-gray-700 mb-6">I believe that great photography is about more than just technical skill - it's about connecting with people, understanding their stories, and creating images that evoke genuine emotion.</p>
193
+ <div class="flex flex-wrap gap-4">
194
+ <div class="bg-white px-6 py-4 rounded-lg shadow-md">
195
+ <div class="text-blue-600 text-3xl mb-2">
196
+ <i class="fas fa-camera"></i>
197
+ </div>
198
+ <h3 class="font-semibold">10+ Years</h3>
199
+ <p class="text-gray-600 text-sm">Experience</p>
200
+ </div>
201
+ <div class="bg-white px-6 py-4 rounded-lg shadow-md">
202
+ <div class="text-blue-600 text-3xl mb-2">
203
+ <i class="fas fa-images"></i>
204
+ </div>
205
+ <h3 class="font-semibold">500+</h3>
206
+ <p class="text-gray-600 text-sm">Projects</p>
207
+ </div>
208
+ <div class="bg-white px-6 py-4 rounded-lg shadow-md">
209
+ <div class="text-blue-600 text-3xl mb-2">
210
+ <i class="fas fa-smile"></i>
211
+ </div>
212
+ <h3 class="font-semibold">1000+</h3>
213
+ <p class="text-gray-600 text-sm">Happy Clients</p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Services Section -->
222
+ <section id="services" class="py-20 bg-white">
223
+ <div class="max-w-7xl mx-auto px-4">
224
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">My Services</h2>
225
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Professional photography services tailored to your needs</p>
226
+
227
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
228
+ <!-- Service 1 -->
229
+ <div class="bg-gray-50 rounded-lg p-8 shadow-md hover:shadow-xl transition duration-300">
230
+ <div class="text-blue-600 text-4xl mb-4">
231
+ <i class="fas fa-ring"></i>
232
+ </div>
233
+ <h3 class="text-xl font-semibold mb-3">Wedding Photography</h3>
234
+ <p class="text-gray-600 mb-4">Comprehensive wedding coverage from preparation to reception with beautifully edited images.</p>
235
+ <ul class="mb-6 space-y-2">
236
+ <li class="flex items-center">
237
+ <i class="fas fa-check text-blue-600 mr-2"></i>
238
+ <span>Full day coverage</span>
239
+ </li>
240
+ <li class="flex items-center">
241
+ <i class="fas fa-check text-blue-600 mr-2"></i>
242
+ <span>Professional editing</span>
243
+ </li>
244
+ <li class="flex items-center">
245
+ <i class="fas fa-check text-blue-600 mr-2"></i>
246
+ <span>Online gallery</span>
247
+ </li>
248
+ </ul>
249
+ <p class="text-2xl font-bold mb-4">From $1,500</p>
250
+ <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">Book Now</a>
251
+ </div>
252
+
253
+ <!-- Service 2 -->
254
+ <div class="bg-gray-50 rounded-lg p-8 shadow-md hover:shadow-xl transition duration-300">
255
+ <div class="text-blue-600 text-4xl mb-4">
256
+ <i class="fas fa-user"></i>
257
+ </div>
258
+ <h3 class="text-xl font-semibold mb-3">Portrait Sessions</h3>
259
+ <p class="text-gray-600 mb-4">Professional portrait sessions for individuals, couples, families, and pets.</p>
260
+ <ul class="mb-6 space-y-2">
261
+ <li class="flex items-center">
262
+ <i class="fas fa-check text-blue-600 mr-2"></i>
263
+ <span>1-2 hour session</span>
264
+ </li>
265
+ <li class="flex items-center">
266
+ <i class="fas fa-check text-blue-600 mr-2"></i>
267
+ <span>Multiple locations</span>
268
+ </li>
269
+ <li class="flex items-center">
270
+ <i class="fas fa-check text-blue-600 mr-2"></i>
271
+ <span>10+ edited images</span>
272
+ </li>
273
+ </ul>
274
+ <p class="text-2xl font-bold mb-4">From $250</p>
275
+ <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">Book Now</a>
276
+ </div>
277
+
278
+ <!-- Service 3 -->
279
+ <div class="bg-gray-50 rounded-lg p-8 shadow-md hover:shadow-xl transition duration-300">
280
+ <div class="text-blue-600 text-4xl mb-4">
281
+ <i class="fas fa-briefcase"></i>
282
+ </div>
283
+ <h3 class="text-xl font-semibold mb-3">Commercial Photography</h3>
284
+ <p class="text-gray-600 mb-4">High-quality images for businesses, products, and marketing materials.</p>
285
+ <ul class="mb-6 space-y-2">
286
+ <li class="flex items-center">
287
+ <i class="fas fa-check text-blue-600 mr-2"></i>
288
+ <span>Product shots</span>
289
+ </li>
290
+ <li class="flex items-center">
291
+ <i class="fas fa-check text-blue-600 mr-2"></i>
292
+ <span>Corporate events</span>
293
+ </li>
294
+ <li class="flex items-center">
295
+ <i class="fas fa-check text-blue-600 mr-2"></i>
296
+ <span>Branding imagery</span>
297
+ </li>
298
+ </ul>
299
+ <p class="text-2xl font-bold mb-4">From $500</p>
300
+ <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">Book Now</a>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </section>
305
+
306
+ <!-- Testimonials Section -->
307
+ <section class="py-20 bg-blue-600 text-white">
308
+ <div class="max-w-7xl mx-auto px-4">
309
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Client Testimonials</h2>
310
+ <p class="text-center max-w-2xl mx-auto mb-12 opacity-90">What my clients say about my work</p>
311
+
312
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
313
+ <!-- Testimonial 1 -->
314
+ <div class="testimonial-card bg-white text-gray-800 p-8 rounded-lg">
315
+ <div class="flex items-center mb-4">
316
+ <div class="text-yellow-400 text-xl mr-2">
317
+ <i class="fas fa-star"></i>
318
+ <i class="fas fa-star"></i>
319
+ <i class="fas fa-star"></i>
320
+ <i class="fas fa-star"></i>
321
+ <i class="fas fa-star"></i>
322
+ </div>
323
+ </div>
324
+ <p class="mb-6 italic">"Sarah captured our wedding day perfectly. The photos are stunning and really captured the emotion of the day. We'll cherish them forever!"</p>
325
+ <div class="flex items-center">
326
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
327
+ <div>
328
+ <h4 class="font-semibold">Emily & James</h4>
329
+ <p class="text-sm text-gray-600">Wedding Clients</p>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Testimonial 2 -->
335
+ <div class="testimonial-card bg-white text-gray-800 p-8 rounded-lg">
336
+ <div class="flex items-center mb-4">
337
+ <div class="text-yellow-400 text-xl mr-2">
338
+ <i class="fas fa-star"></i>
339
+ <i class="fas fa-star"></i>
340
+ <i class="fas fa-star"></i>
341
+ <i class="fas fa-star"></i>
342
+ <i class="fas fa-star"></i>
343
+ </div>
344
+ </div>
345
+ <p class="mb-6 italic">"The family portraits Sarah took are absolutely beautiful. She made us all feel comfortable and captured our family's personality perfectly."</p>
346
+ <div class="flex items-center">
347
+ <img src="https://randomuser.me/api/portraits/men/43.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
348
+ <div>
349
+ <h4 class="font-semibold">The Wilson Family</h4>
350
+ <p class="text-sm text-gray-600">Family Portrait Clients</p>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Testimonial 3 -->
356
+ <div class="testimonial-card bg-white text-gray-800 p-8 rounded-lg">
357
+ <div class="flex items-center mb-4">
358
+ <div class="text-yellow-400 text-xl mr-2">
359
+ <i class="fas fa-star"></i>
360
+ <i class="fas fa-star"></i>
361
+ <i class="fas fa-star"></i>
362
+ <i class="fas fa-star"></i>
363
+ <i class="fas fa-star"></i>
364
+ </div>
365
+ </div>
366
+ <p class="mb-6 italic">"Our product photos have never looked better! Sarah's attention to detail and creative eye helped showcase our products in the best possible way."</p>
367
+ <div class="flex items-center">
368
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
369
+ <div>
370
+ <h4 class="font-semibold">Jessica Parker</h4>
371
+ <p class="text-sm text-gray-600">Small Business Owner</p>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </section>
378
+
379
+ <!-- Contact Section -->
380
+ <section id="contact" class="py-20 bg-gray-100">
381
+ <div class="max-w-7xl mx-auto px-4">
382
+ <div class="flex flex-col md:flex-row">
383
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
384
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Get In Touch</h2>
385
+ <p class="text-gray-700 mb-8">Ready to book a session or have questions about my services? Fill out the form or contact me directly.</p>
386
+
387
+ <div class="space-y-6">
388
+ <div class="flex items-start">
389
+ <div class="text-blue-600 text-xl mr-4 mt-1">
390
+ <i class="fas fa-map-marker-alt"></i>
391
+ </div>
392
+ <div>
393
+ <h4 class="font-semibold">Studio Location</h4>
394
+ <p class="text-gray-600">123 Photography Ave, Creative District, CA 90210</p>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="flex items-start">
399
+ <div class="text-blue-600 text-xl mr-4 mt-1">
400
+ <i class="fas fa-envelope"></i>
401
+ </div>
402
+ <div>
403
+ <h4 class="font-semibold">Email</h4>
404
+ <p class="text-gray-600">hello@lenscraft.com</p>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="flex items-start">
409
+ <div class="text-blue-600 text-xl mr-4 mt-1">
410
+ <i class="fas fa-phone"></i>
411
+ </div>
412
+ <div>
413
+ <h4 class="font-semibold">Phone</h4>
414
+ <p class="text-gray-600">(555) 123-4567</p>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="flex items-start">
419
+ <div class="text-blue-600 text-xl mr-4 mt-1">
420
+ <i class="fas fa-clock"></i>
421
+ </div>
422
+ <div>
423
+ <h4 class="font-semibold">Studio Hours</h4>
424
+ <p class="text-gray-600">Monday - Friday: 9am - 6pm<br>Saturday: 10am - 4pm<br>Sunday: Closed</p>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="mt-8 flex space-x-4">
430
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white w-10 h-10 rounded-full flex items-center justify-center">
431
+ <i class="fab fa-facebook-f"></i>
432
+ </a>
433
+ <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white w-10 h-10 rounded-full flex items-center justify-center">
434
+ <i class="fab fa-twitter"></i>
435
+ </a>
436
+ <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white w-10 h-10 rounded-full flex items-center justify-center">
437
+ <i class="fab fa-instagram"></i>
438
+ </a>
439
+ <a href="#" class="bg-red-600 hover:bg-red-700 text-white w-10 h-10 rounded-full flex items-center justify-center">
440
+ <i class="fab fa-youtube"></i>
441
+ </a>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="md:w-1/2">
446
+ <form class="bg-white p-8 rounded-lg shadow-md">
447
+ <div class="mb-6">
448
+ <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
449
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="John Doe">
450
+ </div>
451
+
452
+ <div class="mb-6">
453
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
454
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="john@example.com">
455
+ </div>
456
+
457
+ <div class="mb-6">
458
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
459
+ <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="(555) 123-4567">
460
+ </div>
461
+
462
+ <div class="mb-6">
463
+ <label for="service" class="block text-gray-700 font-medium mb-2">Service Interested In</label>
464
+ <select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent">
465
+ <option value="">Select a service</option>
466
+ <option value="wedding">Wedding Photography</option>
467
+ <option value="portrait">Portrait Session</option>
468
+ <option value="commercial">Commercial Photography</option>
469
+ <option value="event">Event Photography</option>
470
+ <option value="other">Other</option>
471
+ </select>
472
+ </div>
473
+
474
+ <div class="mb-6">
475
+ <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label>
476
+ <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="Tell me about your project..."></textarea>
477
+ </div>
478
+
479
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Send Message</button>
480
+ </form>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </section>
485
+
486
+ <!-- Newsletter Section -->
487
+ <section class="py-16 bg-blue-50">
488
+ <div class="max-w-4xl mx-auto px-4 text-center">
489
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">Join My Newsletter</h2>
490
+ <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Subscribe to receive photography tips, special offers, and updates on my latest work.</p>
491
+
492
+ <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
493
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent">
494
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Subscribe</button>
495
+ </form>
496
+ </div>
497
+ </section>
498
+
499
+ <!-- Footer -->
500
+ <footer class="bg-gray-800 text-white py-12">
501
+ <div class="max-w-7xl mx-auto px-4">
502
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
503
+ <div>
504
+ <h3 class="text-xl font-bold mb-4">LensCraft</h3>
505
+ <p class="text-gray-400">Professional photography services capturing life's most precious moments.</p>
506
+ </div>
507
+
508
+ <div>
509
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
510
+ <ul class="space-y-2">
511
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
512
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white transition duration-300">Portfolio</a></li>
513
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
514
+ <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li>
515
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
516
+ </ul>
517
+ </div>
518
+
519
+ <div>
520
+ <h4 class="text-lg font-semibold mb-4">Services</h4>
521
+ <ul class="space-y-2">
522
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Wedding Photography</a></li>
523
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Portrait Sessions</a></li>
524
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Commercial Photography</a></li>
525
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Event Coverage</a></li>
526
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Photo Editing</a></li>
527
+ </ul>
528
+ </div>
529
+
530
+ <div>
531
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
532
+ <div class="flex space-x-4 mb-4">
533
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
534
+ <i class="fab fa-facebook-f text-xl"></i>
535
+ </a>
536
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
537
+ <i class="fab fa-twitter text-xl"></i>
538
+ </a>
539
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
540
+ <i class="fab fa-instagram text-xl"></i>
541
+ </a>
542
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
543
+ <i class="fab fa-pinterest text-xl"></i>
544
+ </a>
545
+ </div>
546
+ <p class="text-gray-400">© 2023 LensCraft Photography. All rights reserved.</p>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </footer>
551
+
552
+ <!-- Lightbox -->
553
+ <div id="lightbox" class="lightbox">
554
+ <div class="lightbox-content relative">
555
+ <span class="absolute top-4 right-4 text-white text-3xl cursor-pointer" onclick="closeLightbox()">&times;</span>
556
+ <img id="lightbox-img" src="" alt="">
557
+ <p id="lightbox-caption" class="text-white text-center mt-4 text-xl"></p>
558
+ </div>
559
+ </div>
560
+
561
+ <!-- Back to Top Button -->
562
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hidden">
563
+ <i class="fas fa-arrow-up"></i>
564
+ </button>
565
+
566
+ <script>
567
+ // Mobile menu toggle
568
+ const menuBtn = document.getElementById('menu-btn');
569
+ const mobileMenu = document.getElementById('mobile-menu');
570
+
571
+ menuBtn.addEventListener('click', () => {
572
+ mobileMenu.classList.toggle('hidden');
573
+ });
574
+
575
+ // Close mobile menu when clicking on a link
576
+ const mobileLinks = document.querySelectorAll('#mobile-menu a');
577
+ mobileLinks.forEach(link => {
578
+ link.addEventListener('click', () => {
579
+ mobileMenu.classList.add('hidden');
580
+ });
581
+ });
582
+
583
+ // Smooth scrolling for navigation links
584
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
585
+ anchor.addEventListener('click', function(e) {
586
+ e.preventDefault();
587
+
588
+ const targetId = this.getAttribute('href');
589
+ const targetElement = document.querySelector(targetId);
590
+
591
+ if (targetElement) {
592
+ window.scrollTo({
593
+ top: targetElement.offsetTop - 80,
594
+ behavior: 'smooth'
595
+ });
596
+ }
597
+ });
598
+ });
599
+
600
+ // Back to top button
601
+ const backToTopBtn = document.getElementById('back-to-top');
602
+
603
+ window.addEventListener('scroll', () => {
604
+ if (window.pageYOffset > 300) {
605
+ backToTopBtn.classList.remove('hidden');
606
+ } else {
607
+ backToTopBtn.classList.add('hidden');
608
+ }
609
+ });
610
+
611
+ backToTopBtn.addEventListener('click', () => {
612
+ window.scrollTo({
613
+ top: 0,
614
+ behavior: 'smooth'
615
+ });
616
+ });
617
+
618
+ // Lightbox functionality
619
+ function openLightbox(src, caption) {
620
+ const lightbox = document.getElementById('lightbox');
621
+ const lightboxImg = document.getElementById('lightbox-img');
622
+ const lightboxCaption = document.getElementById('lightbox-caption');
623
+
624
+ lightboxImg.src = src;
625
+ lightboxCaption.textContent = caption;
626
+ lightbox.style.display = 'flex';
627
+ document.body.style.overflow = 'hidden';
628
+ }
629
+
630
+ function closeLightbox() {
631
+ const lightbox = document.getElementById('lightbox');
632
+ lightbox.style.display = 'none';
633
+ document.body.style.overflow = 'auto';
634
+ }
635
+
636
+ // Close lightbox when clicking outside the image
637
+ const lightbox = document.getElementById('lightbox');
638
+ lightbox.addEventListener('click', (e) => {
639
+ if (e.target === lightbox) {
640
+ closeLightbox();
641
+ }
642
+ });
643
+
644
+ // Form submission (prevent default for demo)
645
+ const contactForm = document.querySelector('form');
646
+ if (contactForm) {
647
+ contactForm.addEventListener('submit', (e) => {
648
+ e.preventDefault();
649
+ alert('Thank you for your message! This is a demo form and no data will be sent.');
650
+ contactForm.reset();
651
+ });
652
+ }
653
+
654
+ // Newsletter form submission
655
+ const newsletterForm = document.querySelector('form[class*="flex flex-col sm:flex-row"]');
656
+ if (newsletterForm) {
657
+ newsletterForm.addEventListener('submit', (e) => {
658
+ e.preventDefault();
659
+ alert('Thank you for subscribing to our newsletter!');
660
+ newsletterForm.reset();
661
+ });
662
+ }
663
+ </script>
664
+ <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=CarloSorengo/wp2025fm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
665
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Build a website for a photographer