Hugging Face's logo

Spaces:
Samoy
/
drone-magic
Running

App Files Community
Samoy commited on
Commit
95b60c5
·
verified ·
1 Parent(s): b56191d

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +951 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Drone Magic
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: purple
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: drone-magic
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
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,951 @@
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>SkyLens - Premium Drone Photography</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
+ .hero-image {
11
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ height: 80vh;
15
+ }
16
+
17
+ .gallery-item {
18
+ transition: all 0.3s ease;
19
+ }
20
+
21
+ .gallery-item:hover {
22
+ transform: scale(1.03);
23
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
24
+ }
25
+
26
+ .category-btn.active {
27
+ background-color: #3b82f6;
28
+ color: white;
29
+ }
30
+
31
+ /* Custom scrollbar */
32
+ ::-webkit-scrollbar {
33
+ width: 8px;
34
+ }
35
+
36
+ ::-webkit-scrollbar-track {
37
+ background: #f1f1f1;
38
+ }
39
+
40
+ ::-webkit-scrollbar-thumb {
41
+ background: #888;
42
+ border-radius: 4px;
43
+ }
44
+
45
+ ::-webkit-scrollbar-thumb:hover {
46
+ background: #555;
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="font-sans bg-gray-50">
51
+ <!-- Navigation -->
52
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
53
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
54
+ <div class="flex justify-between h-16">
55
+ <div class="flex items-center">
56
+ <div class="flex-shrink-0 flex items-center">
57
+ <i class="fas fa-drone-alt text-blue-500 text-2xl mr-2"></i>
58
+ <span class="text-xl font-bold text-gray-900">SkyLens</span>
59
+ </div>
60
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
61
+ <a href="#" class="text-blue-600 border-blue-500 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
62
+ <a href="#gallery" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Gallery</a>
63
+ <a href="#pricing" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Pricing</a>
64
+ <a href="#about" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">About</a>
65
+ <a href="#contact" class="text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Contact</a>
66
+ </div>
67
+ </div>
68
+ <div class="hidden md:ml-6 md:flex md:items-center">
69
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
70
+ <i class="fas fa-shopping-cart mr-2"></i> Cart (0)
71
+ </button>
72
+ </div>
73
+ <div class="-mr-2 flex items-center md:hidden">
74
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
75
+ <span class="sr-only">Open main menu</span>
76
+ <i class="fas fa-bars"></i>
77
+ </button>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Mobile menu -->
83
+ <div class="hidden md:hidden" id="mobile-menu">
84
+ <div class="pt-2 pb-3 space-y-1">
85
+ <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
86
+ <a href="#gallery" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Gallery</a>
87
+ <a href="#pricing" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Pricing</a>
88
+ <a href="#about" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
89
+ <a href="#contact" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a>
90
+ <div class="pt-4 pb-3 border-t border-gray-200">
91
+ <div class="flex items-center px-5">
92
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium w-full flex items-center justify-center">
93
+ <i class="fas fa-shopping-cart mr-2"></i> Cart (0)
94
+ </button>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </nav>
100
+
101
+ <!-- Hero Section -->
102
+ <div class="hero-image flex items-center justify-center">
103
+ <div class="text-center px-4">
104
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Elevate Your Projects With Stunning Aerial Imagery</h1>
105
+ <p class="text-xl text-white mb-8 max-w-3xl mx-auto">Premium quality drone photography for commercial and personal use. High-resolution, royalty-free digital downloads.</p>
106
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
107
+ <a href="#gallery" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105">
108
+ Browse Gallery
109
+ </a>
110
+ <a href="#pricing" class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105">
111
+ View Pricing
112
+ </a>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Featured Categories -->
118
+ <div class="py-12 bg-white">
119
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
120
+ <div class="text-center mb-12">
121
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Explore Our Collections</h2>
122
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Carefully curated categories to suit all your aerial photography needs</p>
123
+ </div>
124
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
125
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
126
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div>
127
+ <div class="p-4">
128
+ <h3 class="font-bold text-lg mb-2">Cityscapes</h3>
129
+ <p class="text-gray-600">Urban landscapes from breathtaking heights</p>
130
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium inline-flex items-center mt-3">
131
+ View Collection
132
+ <i class="fas fa-arrow-right ml-2"></i>
133
+ </a>
134
+ </div>
135
+ </div>
136
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
137
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1330&q=80');"></div>
138
+ <div class="p-4">
139
+ <h3 class="font-bold text-lg mb-2">Nature</h3>
140
+ <p class="text-gray-600">Stunning natural landscapes from above</p>
141
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium inline-flex items-center mt-3">
142
+ View Collection
143
+ <i class="fas fa-arrow-right ml-2"></i>
144
+ </a>
145
+ </div>
146
+ </div>
147
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
148
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1509316785289-025f5b8b4b1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1376&q=80');"></div>
149
+ <div class="p-4">
150
+ <h3 class="font-bold text-lg mb-2">Beaches</h3>
151
+ <p class="text-gray-600">Coastal beauty from a unique perspective</p>
152
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium inline-flex items-center mt-3">
153
+ View Collection
154
+ <i class="fas fa-arrow-right ml-2"></i>
155
+ </a>
156
+ </div>
157
+ </div>
158
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
159
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div>
160
+ <div class="p-4">
161
+ <h3 class="font-bold text-lg mb-2">Architecture</h3>
162
+ <p class="text-gray-600">Iconic buildings from dramatic angles</p>
163
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium inline-flex items-center mt-3">
164
+ View Collection
165
+ <i class="fas fa-arrow-right ml-2"></i>
166
+ </a>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Gallery Section -->
174
+ <div id="gallery" class="py-12 bg-gray-50">
175
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
176
+ <div class="text-center mb-12">
177
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Premium Drone Photography</h2>
178
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">High-resolution images perfect for websites, marketing, and print</p>
179
+ </div>
180
+
181
+ <!-- Category Filters -->
182
+ <div class="flex flex-wrap justify-center gap-2 mb-8">
183
+ <button class="category-btn active px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="all">All</button>
184
+ <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="landscape">Landscape</button>
185
+ <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="urban">Urban</button>
186
+ <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="nature">Nature</button>
187
+ <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="beach">Beach</button>
188
+ <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-blue-100 transition" data-category="architecture">Architecture</button>
189
+ </div>
190
+
191
+ <!-- Gallery Grid -->
192
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
193
+ <!-- Image 1 -->
194
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="landscape">
195
+ <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
196
+ <div class="p-4">
197
+ <div class="flex justify-between items-start">
198
+ <div>
199
+ <h3 class="font-bold text-lg">Mountain Valley</h3>
200
+ <p class="text-gray-600">Landscape</p>
201
+ </div>
202
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">New</span>
203
+ </div>
204
+ <div class="mt-4 flex justify-between items-center">
205
+ <span class="text-xl font-bold text-gray-900">$29.99</span>
206
+ <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">
207
+ Add to Cart
208
+ </button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Image 2 -->
214
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="urban">
215
+ <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div>
216
+ <div class="p-4">
217
+ <div class="flex justify-between items-start">
218
+ <div>
219
+ <h3 class="font-bold text-lg">City Skyline</h3>
220
+ <p class="text-gray-600">Urban</p>
221
+ </div>
222
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Popular</span>
223
+ </div>
224
+ <div class="mt-4 flex justify-between items-center">
225
+ <span class="text-xl font-bold text-gray-900">$39.99</span>
226
+ <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">
227
+ Add to Cart
228
+ </button>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Image 3 -->
234
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="nature">
235
+ <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1330&q=80');"></div>
236
+ <div class="p-4">
237
+ <div class="flex justify-between items-start">
238
+ <div>
239
+ <h3 class="font-bold text-lg">Forest River</h3>
240
+ <p class="text-gray-600">Nature</p>
241
+ </div>
242
+ </div>
243
+ <div class="mt-4 flex justify-between items-center">
244
+ <span class="text-xl font-bold text-gray-900">$24.99</span>
245
+ <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">
246
+ Add to Cart
247
+ </button>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Image 4 -->
253
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="beach">
254
+ <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1509316785289-025f5b8b4b1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1376&q=80');"></div>
255
+ <div class="p-4">
256
+ <div class="flex justify-between items-start">
257
+ <div>
258
+ <h3 class="font-bold text-lg">Tropical Beach</h3>
259
+ <p class="text-gray-600">Beach</p>
260
+ </div>
261
+ </div>
262
+ <div class="mt-4 flex justify-between items-center">
263
+ <span class="text-xl font-bold text-gray-900">$34.99</span>
264
+ <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">
265
+ Add to Cart
266
+ </button>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Image 5 -->
272
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="architecture">
273
+ <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div>
274
+ <div class="p-4">
275
+ <div class="flex justify-between items-start">
276
+ <div>
277
+ <h3 class="font-bold text-lg">Modern Museum</h3>
278
+ <p class="text-gray-600">Architecture</p>
279
+ </div>
280
+ <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Best Seller</span>
281
+ </div>
282
+ <div class="mt-4 flex justify-between items-center">
283
+ <span class="text-xl font-bold text-gray-900">$49.99</span>
284
+ <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">
285
+ Add to Cart
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Image 6 -->
292
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md" data-category="landscape">
293
+ <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
294
+ <div class="p-4">
295
+ <div class="flex justify-between items-start">
296
+ <div>
297
+ <h3 class="font-bold text-lg">Sunset Lakes</h3>
298
+ <p class="text-gray-600">Landscape</p>
299
+ </div>
300
+ </div>
301
+ <div class="mt-4 flex justify-between items-center">
302
+ <span class="text-xl font-bold text-gray-900">$29.99</span>
303
+ <button class="add-to-cart text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">
304
+ Add to Cart
305
+ </button>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="mt-12 text-center">
312
+ <button class="load-more bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow">
313
+ Load More Photos
314
+ </button>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Pricing Section -->
320
+ <div id="pricing" class="py-12 bg-white">
321
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
322
+ <div class="text-center mb-12">
323
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Simple, Transparent Pricing</h2>
324
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Choose the perfect license for your needs</p>
325
+ </div>
326
+
327
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
328
+ <!-- Standard License -->
329
+ <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden transform transition hover:scale-105">
330
+ <div class="px-6 py-8">
331
+ <div class="flex items-center justify-center">
332
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-4 py-1 rounded-full">MOST POPULAR</span>
333
+ </div>
334
+ <h3 class="text-2xl font-bold text-center mt-4">Standard License</h3>
335
+ <div class="mt-6 text-center">
336
+ <span class="text-4xl font-bold text-gray-900">$29</span>
337
+ <span class="text-gray-600">/image</span>
338
+ </div>
339
+ <ul class="mt-8 space-y-4">
340
+ <li class="flex items-center">
341
+ <i class="fas fa-check text-green-500 mr-2"></i>
342
+ <span>Digital use (websites, social media)</span>
343
+ </li>
344
+ <li class="flex items-center">
345
+ <i class="fas fa-check text-green-500 mr-2"></i>
346
+ <span>Print up to 500 copies</span>
347
+ </li>
348
+ <li class="flex items-center">
349
+ <i class="fas fa-check text-green-500 mr-2"></i>
350
+ <span>Single user license</span>
351
+ </li>
352
+ <li class="flex items-center">
353
+ <i class="fas fa-check text-green-500 mr-2"></i>
354
+ <span>Unlimited impressions</span>
355
+ </li>
356
+ </ul>
357
+ </div>
358
+ <div class="px-6 pb-8">
359
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg">
360
+ Get Standard License
361
+ </button>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Extended License -->
366
+ <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden transform transition hover:scale-105">
367
+ <div class="px-6 py-8">
368
+ <h3 class="text-2xl font-bold text-center">Extended License</h3>
369
+ <div class="mt-6 text-center">
370
+ <span class="text-4xl font-bold text-gray-900">$99</span>
371
+ <span class="text-gray-600">/image</span>
372
+ </div>
373
+ <ul class="mt-8 space-y-4">
374
+ <li class="flex items-center">
375
+ <i class="fas fa-check text-green-500 mr-2"></i>
376
+ <span>All Standard License features</span>
377
+ </li>
378
+ <li class="flex items-center">
379
+ <i class="fas fa-check text-green-500 mr-2"></i>
380
+ <span>Unlimited print runs</span>
381
+ </li>
382
+ <li class="flex items-center">
383
+ <i class="fas fa-check text-green-500 mr-2"></i>
384
+ <span>Multi-user license</span>
385
+ </li>
386
+ <li class="flex items-center">
387
+ <i class="fas fa-check text-green-500 mr-2"></i>
388
+ <span>Use in merchandise for resale</span>
389
+ </li>
390
+ <li class="flex items-center">
391
+ <i class="fas fa-check text-green-500 mr-2"></i>
392
+ <span>Use in templates/themes</span>
393
+ </li>
394
+ </ul>
395
+ </div>
396
+ <div class="px-6 pb-8">
397
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg">
398
+ Get Extended License
399
+ </button>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- Custom License -->
404
+ <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden transform transition hover:scale-105">
405
+ <div class="px-6 py-8">
406
+ <h3 class="text-2xl font-bold text-center">Custom License</h3>
407
+ <div class="mt-6 text-center">
408
+ <span class="text-4xl font-bold text-gray-900">Custom</span>
409
+ </div>
410
+ <ul class="mt-8 space-y-4">
411
+ <li class="flex items-center">
412
+ <i class="fas fa-check text-green-500 mr-2"></i>
413
+ <span>Tailored to your specific needs</span>
414
+ </li>
415
+ <li class="flex items-center">
416
+ <i class="fas fa-check text-green-500 mr-2"></i>
417
+ <span>Bulk discounts available</span>
418
+ </li>
419
+ <li class="flex items-center">
420
+ <i class="fas fa-check text-green-500 mr-2"></i>
421
+ <span>Exclusive rights available</span>
422
+ </li>
423
+ <li class="flex items-center">
424
+ <i class="fas fa-check text-green-500 mr-2"></i>
425
+ <span>Enterprise solutions</span>
426
+ </li>
427
+ </ul>
428
+ </div>
429
+ <div class="px-6 pb-8">
430
+ <button class="w-full bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg">
431
+ Contact Us
432
+ </button>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="mt-12 bg-blue-50 rounded-lg p-6">
438
+ <h3 class="text-xl font-bold text-gray-900 mb-4">License FAQ</h3>
439
+ <div class="space-y-4">
440
+ <div>
441
+ <h4 class="font-medium text-gray-900">What's the difference between Standard and Extended licenses?</h4>
442
+ <p class="text-gray-600 mt-1">The Standard License is perfect for most digital and limited print uses, while the Extended License allows for merchandise, templates, and unlimited print runs.</p>
443
+ </div>
444
+ <div>
445
+ <h4 class="font-medium text-gray-900">Do you offer discounts for bulk purchases?</h4>
446
+ <p class="text-gray-600 mt-1">Yes! Contact us for custom pricing when purchasing multiple images. Discounts start at 5+ images.</p>
447
+ </div>
448
+ <div>
449
+ <h4 class="font-medium text-gray-900">Can I upgrade my license later?</h4>
450
+ <p class="text-gray-600 mt-1">Absolutely. You can upgrade from Standard to Extended at any time by paying the difference.</p>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- About Section -->
458
+ <div id="about" class="py-12 bg-gray-50">
459
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
460
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
461
+ <div class="mb-8 lg:mb-0">
462
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">About SkyLens</h2>
463
+ <p class="mt-4 text-lg text-gray-500">
464
+ SkyLens was founded in 2018 by professional drone pilots with a passion for aerial photography.
465
+ We combine technical expertise with artistic vision to capture stunning perspectives from above.
466
+ </p>
467
+ <div class="mt-8">
468
+ <div class="flex items-start mb-6">
469
+ <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
470
+ <i class="fas fa-camera text-blue-600 text-xl"></i>
471
+ </div>
472
+ <div class="ml-4">
473
+ <h3 class="text-lg font-medium text-gray-900">Professional Equipment</h3>
474
+ <p class="mt-1 text-gray-600">
475
+ We use only the highest quality drones and cameras, including DJI Inspire 2 with Zenmuse X7 cameras.
476
+ </p>
477
+ </div>
478
+ </div>
479
+ <div class="flex items-start mb-6">
480
+ <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
481
+ <i class="fas fa-certificate text-blue-600 text-xl"></i>
482
+ </div>
483
+ <div class="ml-4">
484
+ <h3 class="text-lg font-medium text-gray-900">Certified Pilots</h3>
485
+ <p class="mt-1 text-gray-600">
486
+ All our pilots are FAA Part 107 certified with extensive safety training and flight experience.
487
+ </p>
488
+ </div>
489
+ </div>
490
+ <div class="flex items-start">
491
+ <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
492
+ <i class="fas fa-edit text-blue-600 text-xl"></i>
493
+ </div>
494
+ <div class="ml-4">
495
+ <h3 class="text-lg font-medium text-gray-900">Post-Processing</h3>
496
+ <p class="mt-1 text-gray-600">
497
+ Every image is professionally edited to ensure perfect color, contrast, and clarity.
498
+ </p>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ <div class="relative">
504
+ <div class="relative rounded-lg shadow-lg overflow-hidden">
505
+ <img class="w-full h-auto" src="https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Drone pilot">
506
+ <div class="absolute inset-0 bg-blue-600 opacity-20"></div>
507
+ </div>
508
+ <div class="mt-6 relative rounded-lg shadow-lg overflow-hidden">
509
+ <img class="w-full h-auto" src="https://images.unsplash.com/photo-1517032222721-2c967968927e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Drone in action">
510
+ <div class="absolute inset-0 bg-blue-600 opacity-20"></div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- Testimonials -->
518
+ <div class="py-12 bg-white">
519
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
520
+ <div class="text-center mb-12">
521
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">What Our Customers Say</h2>
522
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Don't just take our word for it</p>
523
+ </div>
524
+
525
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
526
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md">
527
+ <div class="flex items-center mb-4">
528
+ <div class="flex-shrink-0">
529
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
530
+ </div>
531
+ <div class="ml-4">
532
+ <h3 class="text-lg font-medium text-gray-900">Sarah Johnson</h3>
533
+ <p class="text-gray-600">Marketing Director</p>
534
+ </div>
535
+ </div>
536
+ <p class="text-gray-600">
537
+ "The drone photos from SkyLens transformed our travel agency's website. The quality is exceptional and our bookings have increased by 30% since we started using their images."
538
+ </p>
539
+ <div class="mt-4 flex">
540
+ <i class="fas fa-star text-yellow-400"></i>
541
+ <i class="fas fa-star text-yellow-400"></i>
542
+ <i class="fas fa-star text-yellow-400"></i>
543
+ <i class="fas fa-star text-yellow-400"></i>
544
+ <i class="fas fa-star text-yellow-400"></i>
545
+ </div>
546
+ </div>
547
+
548
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md">
549
+ <div class="flex items-center mb-4">
550
+ <div class="flex-shrink-0">
551
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen">
552
+ </div>
553
+ <div class="ml-4">
554
+ <h3 class="text-lg font-medium text-gray-900">Michael Chen</h3>
555
+ <p class="text-gray-600">Creative Director</p>
556
+ </div>
557
+ </div>
558
+ <p class="text-gray-600">
559
+ "As a designer, I'm always looking for unique imagery. SkyLens provides perspectives I can't get anywhere else. Their extended license gives me the flexibility I need for client projects."
560
+ </p>
561
+ <div class="mt-4 flex">
562
+ <i class="fas fa-star text-yellow-400"></i>
563
+ <i class="fas fa-star text-yellow-400"></i>
564
+ <i class="fas fa-star text-yellow-400"></i>
565
+ <i class="fas fa-star text-yellow-400"></i>
566
+ <i class="fas fa-star text-yellow-400"></i>
567
+ </div>
568
+ </div>
569
+
570
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md">
571
+ <div class="flex items-center mb-4">
572
+ <div class="flex-shrink-0">
573
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez">
574
+ </div>
575
+ <div class="ml-4">
576
+ <h3 class="text-lg font-medium text-gray-900">Emily Rodriguez</h3>
577
+ <p class="text-gray-600">Publisher</p>
578
+ </div>
579
+ </div>
580
+ <p class="text-gray-600">
581
+ "We've licensed dozens of images from SkyLens for our travel magazines. The quality is consistently excellent and their customer service is top-notch. Highly recommended!"
582
+ </p>
583
+ <div class="mt-4 flex">
584
+ <i class="fas fa-star text-yellow-400"></i>
585
+ <i class="fas fa-star text-yellow-400"></i>
586
+ <i class="fas fa-star text-yellow-400"></i>
587
+ <i class="fas fa-star text-yellow-400"></i>
588
+ <i class="fas fa-star text-yellow-400"></i>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+
595
+ <!-- Contact Section -->
596
+ <div id="contact" class="py-12 bg-gray-50">
597
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
598
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
599
+ <div class="mb-8 lg:mb-0">
600
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Get In Touch</h2>
601
+ <p class="mt-4 text-lg text-gray-500">
602
+ Have questions about licensing or need custom drone photography? Fill out the form and we'll get back to you within 24 hours.
603
+ </p>
604
+ <div class="mt-8">
605
+ <div class="flex items-start mb-6">
606
+ <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
607
+ <i class="fas fa-envelope text-blue-600 text-xl"></i>
608
+ </div>
609
+ <div class="ml-4">
610
+ <h3 class="text-lg font-medium text-gray-900">Email</h3>
611
+ <p class="mt-1 text-gray-600">
612
+ contact@skylens.com
613
+ </p>
614
+ </div>
615
+ </div>
616
+ <div class="flex items-start mb-6">
617
+ <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
618
+ <i class="fas fa-phone-alt text-blue-600 text-xl"></i>
619
+ </div>
620
+ <div class="ml-4">
621
+ <h3 class="text-lg font-medium text-gray-900">Phone</h3>
622
+ <p class="mt-1 text-gray-600">
623
+ (555) 123-4567
624
+ </p>
625
+ </div>
626
+ </div>
627
+ <div class="flex items-start">
628
+ <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
629
+ <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
630
+ </div>
631
+ <div class="ml-4">
632
+ <h3 class="text-lg font-medium text-gray-900">Office</h3>
633
+ <p class="mt-1 text-gray-600">
634
+ 123 Drone Street, Aerial City, AC 12345
635
+ </p>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ <div class="mt-8">
640
+ <h3 class="text-lg font-medium text-gray-900">Follow Us</h3>
641
+ <div class="flex space-x-4 mt-4">
642
+ <a href="#" class="text-gray-500 hover:text-blue-500">
643
+ <i class="fab fa-instagram text-2xl"></i>
644
+ </a>
645
+ <a href="#" class="text-gray-500 hover:text-blue-500">
646
+ <i class="fab fa-facebook text-2xl"></i>
647
+ </a>
648
+ <a href="#" class="text-gray-500 hover:text-blue-500">
649
+ <i class="fab fa-twitter text-2xl"></i>
650
+ </a>
651
+ <a href="#" class="text-gray-500 hover:text-blue-500">
652
+ <i class="fab fa-pinterest text-2xl"></i>
653
+ </a>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ <div>
658
+ <form class="bg-white shadow-md rounded-lg p-6">
659
+ <div class="mb-4">
660
+ <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name</label>
661
+ <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-blue-500" placeholder="Your name">
662
+ </div>
663
+ <div class="mb-4">
664
+ <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
665
+ <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-blue-500" placeholder="Your email">
666
+ </div>
667
+ <div class="mb-4">
668
+ <label for="subject" class="block text-gray-700 text-sm font-bold mb-2">Subject</label>
669
+ <select id="subject" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-blue-500">
670
+ <option>General Inquiry</option>
671
+ <option>Custom Photography Request</option>
672
+ <option>Bulk Purchase</option>
673
+ <option>License Questions</option>
674
+ <option>Other</option>
675
+ </select>
676
+ </div>
677
+ <div class="mb-6">
678
+ <label for="message" class="block text-gray-700 text-sm font-bold mb-2">Message</label>
679
+ <textarea id="message" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:ring-2 focus:ring-blue-500" placeholder="Your message"></textarea>
680
+ </div>
681
+ <div class="flex items-center justify-between">
682
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline w-full transition duration-300 transform hover:scale-105" type="button">
683
+ Send Message
684
+ </button>
685
+ </div>
686
+ </form>
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </div>
691
+
692
+ <!-- Newsletter -->
693
+ <div class="bg-blue-600 py-12">
694
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
695
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
696
+ <div class="mb-8 lg:mb-0">
697
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">Join Our Newsletter</h2>
698
+ <p class="mt-4 text-lg text-blue-100">
699
+ Get exclusive discounts, new photo releases, and aerial photography tips delivered to your inbox.
700
+ </p>
701
+ </div>
702
+ <div>
703
+ <form class="sm:flex">
704
+ <label for="email-address" class="sr-only">Email address</label>
705
+ <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-transparent placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white focus:border-white sm:max-w-xs rounded-md" placeholder="Enter your email">
706
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
707
+ <button type="submit" class="w-full bg-white border border-transparent rounded-md py-3 px-5 flex items-center justify-center text-base font-medium text-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white">
708
+ Subscribe
709
+ </button>
710
+ </div>
711
+ </form>
712
+ <p class="mt-3 text-sm text-blue-100">
713
+ We respect your privacy. Unsubscribe at any time.
714
+ </p>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </div>
719
+
720
+ <!-- Footer -->
721
+ <footer class="bg-gray-900">
722
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
723
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
724
+ <div>
725
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Shop</h3>
726
+ <ul class="space-y-2">
727
+ <li><a href="#" class="text-gray-300 hover:text-white">All Photos</a></li>
728
+ <li><a href="#" class="text-gray-300 hover:text-white">New Releases</a></li>
729
+ <li><a href="#" class="text-gray-300 hover:text-white">Best Sellers</a></li>
730
+ <li><a href="#" class="text-gray-300 hover:text-white">Collections</a></li>
731
+ </ul>
732
+ </div>
733
+ <div>
734
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Company</h3>
735
+ <ul class="space-y-2">
736
+ <li><a href="#" class="text-gray-300 hover:text-white">About Us</a></li>
737
+ <li><a href="#" class="text-gray-300 hover:text-white">Our Team</a></li>
738
+ <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li>
739
+ <li><a href="#" class="text-gray-300 hover:text-white">Press</a></li>
740
+ </ul>
741
+ </div>
742
+ <div>
743
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Support</h3>
744
+ <ul class="space-y-2">
745
+ <li><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li>
746
+ <li><a href="#" class="text-gray-300 hover:text-white">License Information</a></li>
747
+ <li><a href="#" class="text-gray-300 hover:text-white">Terms of Service</a></li>
748
+ <li><a href="#" class="text-gray-300 hover:text-white">Privacy Policy</a></li>
749
+ </ul>
750
+ </div>
751
+ <div>
752
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Connect</h3>
753
+ <div class="flex space-x-4">
754
+ <a href="#" class="text-gray-300 hover:text-white">
755
+ <i class="fab fa-instagram text-xl"></i>
756
+ </a>
757
+ <a href="#" class="text-gray-300 hover:text-white">
758
+ <i class="fab fa-facebook text-xl"></i>
759
+ </a>
760
+ <a href="#" class="text-gray-300 hover:text-white">
761
+ <i class="fab fa-twitter text-xl"></i>
762
+ </a>
763
+ <a href="#" class="text-gray-300 hover:text-white">
764
+ <i class="fab fa-pinterest text-xl"></i>
765
+ </a>
766
+ </div>
767
+ <div class="mt-6">
768
+ <p class="text-gray-300">Download our app</p>
769
+ <div class="flex space-x-2 mt-2">
770
+ <a href="#" class="inline-block">
771
+ <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/320px-Download_on_the_App_Store_Badge.svg.png" alt="App Store">
772
+ </a>
773
+ <a href="#" class="inline-block">
774
+ <img class="h-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/320px-Google_Play_Store_badge_EN.svg.png" alt="Google Play">
775
+ </a>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ </div>
780
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
781
+ <p class="text-gray-400 text-sm">
782
+ &copy; 2023 SkyLens Drone Photography. All rights reserved.
783
+ </p>
784
+ <div class="mt-4 md:mt-0 flex space-x-6">
785
+ <a href="#" class="text-gray-400 hover:text-gray-300">
786
+ <span class="sr-only">Facebook</span>
787
+ <i class="fab fa-facebook"></i>
788
+ </a>
789
+ <a href="#" class="text-gray-400 hover:text-gray-300">
790
+ <span class="sr-only">Instagram</span>
791
+ <i class="fab fa-instagram"></i>
792
+ </a>
793
+ <a href="#" class="text-gray-400 hover:text-gray-300">
794
+ <span class="sr-only">Twitter</span>
795
+ <i class="fab fa-twitter"></i>
796
+ </a>
797
+ <a href="#" class="text-gray-400 hover:text-gray-300">
798
+ <span class="sr-only">Pinterest</span>
799
+ <i class="fab fa-pinterest"></i>
800
+ </a>
801
+ </div>
802
+ </div>
803
+ </div>
804
+ </footer>
805
+
806
+ <!-- Shopping Cart Modal -->
807
+ <div class="fixed inset-0 overflow-hidden z-50 hidden" id="cart-modal">
808
+ <div class="absolute inset-0 overflow-hidden">
809
+ <div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" id="cart-modal-backdrop"></div>
810
+ <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
811
+ <div class="w-screen max-w-md">
812
+ <div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
813
+ <div class="flex-1 py-6 overflow-y-auto px-4 sm:px-6">
814
+ <div class="flex items-start justify-between">
815
+ <h2 class="text-lg font-medium text-gray-900">Shopping cart</h2>
816
+ <div class="ml-3 h-7 flex items-center">
817
+ <button type="button" class="-m-2 p-2 text-gray-400 hover:text-gray-500" id="close-cart">
818
+ <span class="sr-only">Close panel</span>
819
+ <i class="fas fa-times"></i>
820
+ </button>
821
+ </div>
822
+ </div>
823
+
824
+ <div class="mt-8">
825
+ <div class="flow-root">
826
+ <ul class="-my-6 divide-y divide-gray-200" id="cart-items">
827
+ <!-- Cart items will be added here dynamically -->
828
+ <li class="py-6 flex">
829
+ <div class="flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
830
+ <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="City Skyline" class="w-full h-full object-center object-cover">
831
+ </div>
832
+ <div class="ml-4 flex-1 flex flex-col">
833
+ <div>
834
+ <div class="flex justify-between text-base font-medium text-gray-900">
835
+ <h3>City Skyline</h3>
836
+ <p class="ml-4">$39.99</p>
837
+ </div>
838
+ <p class="mt-1 text-sm text-gray-500">Urban</p>
839
+ </div>
840
+ <div class="flex-1 flex items-end justify-between text-sm">
841
+ <p class="text-gray-500">Standard License</p>
842
+ <div class="flex">
843
+ <button type="button" class="font-medium text-blue-600 hover:text-blue-500">Remove</button>
844
+ </div>
845
+ </div>
846
+ </div>
847
+ </li>
848
+ </ul>
849
+ </div>
850
+ </div>
851
+ </div>
852
+
853
+ <div class="border-t border-gray-200 py-6 px-4 sm:px-6">
854
+ <div class="flex justify-between text-base font-medium text-gray-900">
855
+ <p>Subtotal</p>
856
+ <p id="cart-total">$39.99</p>
857
+ </div>
858
+ <p class="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
859
+ <div class="mt-6">
860
+ <a href="#" class="flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700">
861
+ Checkout
862
+ </a>
863
+ </div>
864
+ <div class="mt-6 flex justify-center text-sm text-center text-gray-500">
865
+ <p>
866
+ or
867
+ <button type="button" class="text-blue-600 font-medium hover:text-blue-500 ml-1" id="continue-shopping">Continue Shopping</button>
868
+ </p>
869
+ </div>
870
+ </div>
871
+ </div>
872
+ </div>
873
+ </div>
874
+ </div>
875
+ </div>
876
+
877
+ <script>
878
+ // Mobile menu toggle
879
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
880
+ const menu = document.getElementById('mobile-menu');
881
+ menu.classList.toggle('hidden');
882
+ });
883
+
884
+ // Category filter
885
+ const categoryButtons = document.querySelectorAll('.category-btn');
886
+ const galleryItems = document.querySelectorAll('.gallery-item');
887
+
888
+ categoryButtons.forEach(button => {
889
+ button.addEventListener('click', function() {
890
+ // Remove active class from all buttons
891
+ categoryButtons.forEach(btn => btn.classList.remove('active'));
892
+
893
+ // Add active class to clicked button
894
+ this.classList.add('active');
895
+
896
+ const category = this.getAttribute('data-category');
897
+
898
+ // Filter gallery items
899
+ galleryItems.forEach(item => {
900
+ if (category === 'all' || item.getAttribute('data-category') === category) {
901
+ item.style.display = 'block';
902
+ } else {
903
+ item.style.display = 'none';
904
+ }
905
+ });
906
+ });
907
+ });
908
+
909
+ // Shopping cart functionality
910
+ const cartButton = document.querySelector('.add-to-cart');
911
+ const cartModal = document.getElementById('cart-modal');
912
+ const closeCart = document.getElementById('close-cart');
913
+ const continueShopping = document.getElementById('continue-shopping');
914
+ const cartModalBackdrop = document.getElementById('cart-modal-backdrop');
915
+
916
+ // Open cart modal
917
+ document.querySelectorAll('.add-to-cart').forEach(button => {
918
+ button.addEventListener('click', function() {
919
+ cartModal.classList.remove('hidden');
920
+ document.body.style.overflow = 'hidden';
921
+ });
922
+ });
923
+
924
+ // Close cart modal
925
+ function closeCartModal() {
926
+ cartModal.classList.add('hidden');
927
+ document.body.style.overflow = 'auto';
928
+ }
929
+
930
+ closeCart.addEventListener('click', closeCartModal);
931
+ continueShopping.addEventListener('click', closeCartModal);
932
+ cartModalBackdrop.addEventListener('click', closeCartModal);
933
+
934
+ // Load more photos
935
+ document.querySelector('.load-more').addEventListener('click', function() {
936
+ alert('More photos would be loaded in a real implementation!');
937
+ });
938
+
939
+ // Form submission
940
+ document.querySelector('form button[type="button"]').addEventListener('click', function() {
941
+ alert('Form would be submitted in a real implementation!');
942
+ });
943
+
944
+ // Newsletter subscription
945
+ document.querySelector('.bg-blue-600 form button[type="submit"]').addEventListener('click', function(e) {
946
+ e.preventDefault();
947
+ alert('Thanks for subscribing to our newsletter!');
948
+ });
949
+ </script>
950
+ <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=Samoy/drone-magic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
951
+ </html>
prompts.txt ADDED
File without changes