Hugging Face's logo

Spaces:
itsvobby
/
physics-visualizer-pro
Running

App Files Community
itsvobby commited on
Commit
2d6f950
·
verified ·
1 Parent(s): e2f7704

create a exact clone of midjourney but 100x better than it

Browse files
Files changed (2) hide show
  1. index.html +4 -2
  2. midjourney.html +429 -0
index.html CHANGED
@@ -68,8 +68,9 @@
68
  <a href="#branches" class="py-2 px-3 hover:bg-indigo-700 rounded transition duration-300">Branches</a>
69
  <a href="#quantities" class="py-2 px-3 hover:bg-indigo-700 rounded transition duration-300">Quantities</a>
70
  <a href="#instruments" class="py-2 px-3 hover:bg-indigo-700 rounded transition duration-300">Instruments</a>
 
71
  </div>
72
- <div class="md:hidden flex items-center">
73
  <button class="outline-none mobile-menu-button">
74
  <i data-feather="menu" class="w-6 h-6"></i>
75
  </button>
@@ -81,7 +82,8 @@
81
  <a href="#branches" class="block py-2 px-4 text-sm hover:bg-indigo-700">Branches</a>
82
  <a href="#quantities" class="block py-2 px-4 text-sm hover:bg-indigo-700">Quantities</a>
83
  <a href="#instruments" class="block py-2 px-4 text-sm hover:bg-indigo-700">Instruments</a>
84
- </div>
 
85
  </nav>
86
 
87
  <!-- Hero Section -->
 
68
  <a href="#branches" class="py-2 px-3 hover:bg-indigo-700 rounded transition duration-300">Branches</a>
69
  <a href="#quantities" class="py-2 px-3 hover:bg-indigo-700 rounded transition duration-300">Quantities</a>
70
  <a href="#instruments" class="py-2 px-3 hover:bg-indigo-700 rounded transition duration-300">Instruments</a>
71
+ <a href="midjourney.html" class="py-2 px-3 hover:bg-indigo-700 rounded transition duration-300">AI Art Generator</a>
72
  </div>
73
+ <div class="md:hidden flex items-center">
74
  <button class="outline-none mobile-menu-button">
75
  <i data-feather="menu" class="w-6 h-6"></i>
76
  </button>
 
82
  <a href="#branches" class="block py-2 px-4 text-sm hover:bg-indigo-700">Branches</a>
83
  <a href="#quantities" class="block py-2 px-4 text-sm hover:bg-indigo-700">Quantities</a>
84
  <a href="#instruments" class="block py-2 px-4 text-sm hover:bg-indigo-700">Instruments</a>
85
+ <a href="midjourney.html" class="block py-2 px-4 text-sm hover:bg-indigo-700">AI Art Generator</a>
86
+ </div>
87
  </nav>
88
 
89
  <!-- Hero Section -->
midjourney.html ADDED
@@ -0,0 +1,429 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>ImaginAI - Advanced AI Image Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ .prompt-input {
11
+ background: linear-gradient(90deg, #4f46e5, #8b5cf6);
12
+ }
13
+ .generation-card:hover {
14
+ transform: scale(1.03);
15
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
16
+ }
17
+ .loading-spinner {
18
+ animation: spin 1.5s linear infinite;
19
+ }
20
+ @keyframes spin {
21
+ 0% { transform: rotate(0deg); }
22
+ 100% { transform: rotate(360deg); }
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
27
+ <!-- Navigation -->
28
+ <nav class="bg-gray-800 border-b border-gray-700">
29
+ <div class="container mx-auto px-6 py-4">
30
+ <div class="flex justify-between items-center">
31
+ <div class="flex items-center space-x-4">
32
+ <i data-feather="image" class="w-8 h-8 text-indigo-400"></i>
33
+ <span class="text-2xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">ImaginAI</span>
34
+ </div>
35
+ <div class="hidden md:flex items-center space-x-6">
36
+ <a href="#" class="hover:text-indigo-300 transition">Home</a>
37
+ <a href="#features" class="hover:text-indigo-300 transition">Features</a>
38
+ <a href="#pricing" class="hover:text-indigo-300 transition">Pricing</a>
39
+ <a href="#" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-md transition">Sign In</a>
40
+ </div>
41
+ <button class="md:hidden">
42
+ <i data-feather="menu"></i>
43
+ </button>
44
+ </div>
45
+ </div>
46
+ </nav>
47
+
48
+ <!-- Hero Section -->
49
+ <section class="py-20">
50
+ <div class="container mx-auto px-6 text-center">
51
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Create Stunning AI Art <br> <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500">100x Better</span></h1>
52
+ <p class="text-xl md:text-2xl text-gray-400 mb-10 max-w-3xl mx-auto">The most advanced AI image generation platform with unparalleled quality, speed, and creative control</p>
53
+
54
+ <div class="max-w-2xl mx-auto relative">
55
+ <div class="prompt-input p-1 rounded-lg mb-8">
56
+ <div class="flex bg-gray-800 rounded-lg">
57
+ <input type="text" placeholder="Describe what you want to create..." class="flex-grow px-6 py-4 bg-transparent outline-none text-gray-200">
58
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-8 py-4 rounded-r-lg font-medium transition">
59
+ Generate <i data-feather="arrow-right" class="ml-2 inline"></i>
60
+ </button>
61
+ </div>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-10">
66
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
67
+ <i data-feather="zap" class="w-8 h-8 mx-auto text-indigo-400 mb-2"></i>
68
+ <h3 class="font-bold">10x Faster</h3>
69
+ </div>
70
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
71
+ <i data-feather="image" class="w-8 h-8 mx-auto text-purple-400 mb-2"></i>
72
+ <h3 class="font-bold">Higher Quality</h3>
73
+ </div>
74
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
75
+ <i data-feather="cpu" class="w-8 h-8 mx-auto text-pink-400 mb-2"></i>
76
+ <h3 class="font-bold">Smarter AI</h3>
77
+ </div>
78
+ <div class="bg-gray-800 p-3 rounded-lg text-center">
79
+ <i data-feather="sliders" class="w-8 h-8 mx-auto text-blue-400 mb-2"></i>
80
+ <h3 class="font-bold">More Control</h3>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </section>
85
+
86
+ <!-- Gallery Section -->
87
+ <section class="py-16 bg-gray-800/50">
88
+ <div class="container mx-auto px-6">
89
+ <h2 class="text-3xl font-bold text-center mb-12">Featured Creations</h2>
90
+
91
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
92
+ <!-- Generated Images -->
93
+ <div class="generation-card bg-gray-800 rounded-xl overflow-hidden transition duration-300">
94
+ <img src="http://static.photos/fantasy/1024x576/1" alt="Fantasy landscape" class="w-full h-64 object-cover">
95
+ <div class="p-4">
96
+ <p class="text-gray-400 text-sm mb-2">"Majestic dragon soaring over neon cityscape, hyper-detailed, 8k"</p>
97
+ <div class="flex justify-between items-center">
98
+ <div class="flex space-x-2">
99
+ <button class="text-gray-400 hover:text-indigo-400">
100
+ <i data-feather="heart"></i>
101
+ </button>
102
+ <button class="text-gray-400 hover:text-indigo-400">
103
+ <i data-feather="download"></i>
104
+ </button>
105
+ </div>
106
+ <span class="text-xs text-gray-500">2 min ago</span>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="generation-card bg-gray-800 rounded-xl overflow-hidden transition duration-300">
112
+ <img src="http://static.photos/sci-fi/1024x576/2" alt="Sci-fi portrait" class="w-full h-64 object-cover">
113
+ <div class="p-4">
114
+ <p class="text-gray-400 text-sm mb-2">"Cyberpunk samurai with glowing katana, cinematic lighting"</p>
115
+ <div class="flex justify-between items-center">
116
+ <div class="flex space-x-2">
117
+ <button class="text-gray-400 hover:text-indigo-400">
118
+ <i data-feather="heart"></i>
119
+ </button>
120
+ <button class="text-gray-400 hover:text-indigo-400">
121
+ <i data-feather="download"></i>
122
+ </button>
123
+ </div>
124
+ <span class="text-xs text-gray-500">15 min ago</span>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="generation-card bg-gray-800 rounded-xl overflow-hidden transition duration-300">
130
+ <img src="http://static.photos/surreal/1024x576/3" alt="Surreal art" class="w-full h-64 object-cover">
131
+ <div class="p-4">
132
+ <p class="text-gray-400 text-sm mb-2">"Surreal floating islands with waterfalls, dreamlike atmosphere"</p>
133
+ <div class="flex justify-between items-center">
134
+ <div class="flex space-x-2">
135
+ <button class="text-gray-400 hover:text-indigo-400">
136
+ <i data-feather="heart"></i>
137
+ </button>
138
+ <button class="text-gray-400 hover:text-indigo-400">
139
+ <i data-feather="download"></i>
140
+ </button>
141
+ </div>
142
+ <span class="text-xs text-gray-500">1 hour ago</span>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="generation-card bg-gray-800 rounded-xl overflow-hidden transition duration-300">
148
+ <img src="http://static.photos/portrait/1024x576/4" alt="Portrait" class="w-full h-64 object-cover">
149
+ <div class="p-4">
150
+ <p class="text-gray-400 text-sm mb-2">"Photorealistic portrait of an elven queen, intricate jewelry"</p>
151
+ <div class="flex justify-between items-center">
152
+ <div class="flex space-x-2">
153
+ <button class="text-gray-400 hover:text-indigo-400">
154
+ <i data-feather="heart"></i>
155
+ </button>
156
+ <button class="text-gray-400 hover:text-indigo-400">
157
+ <i data-feather="download"></i>
158
+ </button>
159
+ </div>
160
+ <span class="text-xs text-gray-500">3 hours ago</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="text-center mt-12">
167
+ <button class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition">
168
+ Explore More Creations
169
+ </button>
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- Features Section -->
175
+ <section id="features" class="py-16">
176
+ <div class="container mx-auto px-6">
177
+ <h2 class="text-3xl font-bold text-center mb-16">Why ImaginAI is Better</h2>
178
+
179
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
180
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
181
+ <div class="w-14 h-14 bg-indigo-600/20 rounded-lg flex items-center justify-center mb-6">
182
+ <i data-feather="clock" class="w-6 h-6 text-indigo-400"></i>
183
+ </div>
184
+ <h3 class="text-xl font-bold mb-3">Lightning Fast Generation</h3>
185
+ <p class="text-gray-400">Our proprietary AI models generate images up to 10x faster than competitors, with the same or better quality.</p>
186
+ </div>
187
+
188
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
189
+ <div class="w-14 h-14 bg-purple-600/20 rounded-lg flex items-center justify-center mb-6">
190
+ <i data-feather="layers" class="w-6 h-6 text-purple-400"></i>
191
+ </div>
192
+ <h3 class="text-xl font-bold mb-3">Advanced Control</h3>
193
+ <p class="text-gray-400">Fine-tune every aspect with our advanced parameters: style mixing, composition control, and prompt weighting.</p>
194
+ </div>
195
+
196
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
197
+ <div class="w-14 h-14 bg-pink-600/20 rounded-lg flex items-center justify-center mb-6">
198
+ <i data-feather="cpu" class="w-6 h-6 text-pink-400"></i>
199
+ </div>
200
+ <h3 class="text-xl font-bold mb-3">Smarter Understanding</h3>
201
+ <p class="text-gray-400">Our AI deeply understands complex prompts and maintains consistency across multiple generations.</p>
202
+ </div>
203
+
204
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
205
+ <div class="w-14 h-14 bg-blue-600/20 rounded-lg flex items-center justify-center mb-6">
206
+ <i data-feather="edit" class="w-6 h-6 text-blue-400"></i>
207
+ </div>
208
+ <h3 class="text-xl font-bold mb-3">Image-to-Image</h3>
209
+ <p class="text-gray-400">Upload reference images to guide generation while maintaining creative flexibility.</p>
210
+ </div>
211
+
212
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
213
+ <div class="w-14 h-14 bg-green-600/20 rounded-lg flex items-center justify-center mb-6">
214
+ <i data-feather="users" class="w-6 h-6 text-green-400"></i>
215
+ </div>
216
+ <h3 class="text-xl font-bold mb-3">Collaborative Features</h3>
217
+ <p class="text-gray-400">Real-time collaboration tools for teams working on creative projects together.</p>
218
+ </div>
219
+
220
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
221
+ <div class="w-14 h-14 bg-yellow-600/20 rounded-lg flex items-center justify-center mb-6">
222
+ <i data-feather="trending-up" class="w-6 h-6 text-yellow-400"></i>
223
+ </div>
224
+ <h3 class="text-xl font-bold mb-3">Continuous Improvement</h3>
225
+ <p class="text-gray-400">Our models improve weekly based on user feedback and the latest research.</p>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </section>
230
+
231
+ <!-- Generation Demo -->
232
+ <section class="py-16 bg-gradient-to-br from-gray-800 to-gray-900">
233
+ <div class="container mx-auto px-6">
234
+ <h2 class="text-3xl font-bold text-center mb-12">See It In Action</h2>
235
+
236
+ <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl overflow-hidden shadow-xl">
237
+ <div class="p-6 border-b border-gray-700 flex justify-between items-center">
238
+ <div class="flex items-center space-x-2">
239
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
240
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
241
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
242
+ </div>
243
+ <div class="text-gray-400 text-sm">
244
+ Generating: "Futuristic city at sunset, neon lights reflecting on wet streets, cyberpunk style"
245
+ </div>
246
+ </div>
247
+
248
+ <div class="p-8 flex flex-col items-center">
249
+ <div class="relative w-full h-64 bg-gray-900 rounded-lg mb-6 flex items-center justify-center">
250
+ <div class="loading-spinner border-4 border-indigo-500 border-t-transparent rounded-full w-12 h-12"></div>
251
+ <div class="absolute inset-0 flex items-center justify-center">
252
+ <span class="text-gray-500">Generating your image...</span>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="w-full grid grid-cols-4 gap-4">
257
+ <div class="bg-gray-700 rounded h-2"></div>
258
+ <div class="bg-gray-700 rounded h-2"></div>
259
+ <div class="bg-gray-700 rounded h-2"></div>
260
+ <div class="bg-indigo-600 rounded h-2"></div>
261
+ </div>
262
+
263
+ <div class="mt-8 flex space-x-4">
264
+ <button class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition">Stop</button>
265
+ <button class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition">Enhance</button>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Pricing Section -->
273
+ <section id="pricing" class="py-16">
274
+ <div class="container mx-auto px-6">
275
+ <h2 class="text-3xl font-bold text-center mb-4">Simple, Transparent Pricing</h2>
276
+ <p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto">Choose the plan that fits your creative needs</p>
277
+
278
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
279
+ <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-8">
280
+ <h3 class="text-xl font-bold mb-2">Starter</h3>
281
+ <p class="text-gray-400 mb-6">For hobbyists and casual creators</p>
282
+ <div class="text-4xl font-bold mb-6">$9.99<span class="text-lg text-gray-400">/month</span></div>
283
+ <ul class="space-y-3 mb-8">
284
+ <li class="flex items-center">
285
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
286
+ <span>100 generations/month</span>
287
+ </li>
288
+ <li class="flex items-center">
289
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
290
+ <span>Standard resolution</span>
291
+ </li>
292
+ <li class="flex items-center">
293
+ <i data-feather="x" class="w-4 h-4 text-gray-500 mr-2"></i>
294
+ <span class="text-gray-500">No commercial use</span>
295
+ </li>
296
+ </ul>
297
+ <button class="w-full py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition">Get Started</button>
298
+ </div>
299
+
300
+ <div class="bg-gray-800 border-2 border-indigo-500 rounded-xl p-8 transform scale-105 relative">
301
+ <div class="absolute top-0 right-6 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-b-lg">POPULAR</div>
302
+ <h3 class="text-xl font-bold mb-2">Pro</h3>
303
+ <p class="text-gray-400 mb-6">For professionals and serious creators</p>
304
+ <div class="text-4xl font-bold mb-6">$29.99<span class="text-lg text-gray-400">/month</span></div>
305
+ <ul class="space-y-3 mb-8">
306
+ <li class="flex items-center">
307
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
308
+ <span>1000 generations/month</span>
309
+ </li>
310
+ <li class="flex items-center">
311
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
312
+ <span>High resolution</span>
313
+ </li>
314
+ <li class="flex items-center">
315
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
316
+ <span>Commercial license</span>
317
+ </li>
318
+ </ul>
319
+ <button class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition">Get Started</button>
320
+ </div>
321
+
322
+ <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-8">
323
+ <h3 class="text-xl font-bold mb-2">Enterprise</h3>
324
+ <p class="text-gray-400 mb-6">For studios and large teams</p>
325
+ <div class="text-4xl font-bold mb-6">Custom</div>
326
+ <ul class="space-y-3 mb-8">
327
+ <li class="flex items-center">
328
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
329
+ <span>Unlimited generations</span>
330
+ </li>
331
+ <li class="flex items-center">
332
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
333
+ <span>4K resolution</span>
334
+ </li>
335
+ <li class="flex items-center">
336
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
337
+ <span>Priority support</span>
338
+ </li>
339
+ </ul>
340
+ <button class="w-full py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition">Contact Sales</button>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </section>
345
+
346
+ <!-- CTA Section -->
347
+ <section class="py-20 bg-gradient-to-r from-indigo-600 to-purple-600">
348
+ <div class="container mx-auto px-6 text-center">
349
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Unleash Your Creativity?</h2>
350
+ <p class="text-xl text-indigo-100 mb-8 max-w-2xl mx-auto">Join thousands of creators already making stunning AI art with ImaginAI</p>
351
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
352
+ <button class="px-8 py-4 bg-white text-indigo-600 font-bold rounded-lg hover:bg-gray-100 transition">Start Free Trial</button>
353
+ <button class="px-8 py-4 bg-transparent border-2 border-white text-white font-bold rounded-lg hover:bg-white/10 transition">See Examples</button>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- Footer -->
359
+ <footer class="bg-gray-900 py-12 border-t border-gray-800">
360
+ <div class="container mx-auto px-6">
361
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
362
+ <div>
363
+ <div class="flex items-center space-x-2 mb-4">
364
+ <i data-feather="image" class="w-8 h-8 text-indigo-400"></i>
365
+ <span class="text-xl font-bold">ImaginAI</span>
366
+ </div>
367
+ <p class="text-gray-400 mb-4">The most advanced AI image generation platform.</p>
368
+ <div class="flex space-x-4">
369
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition">
370
+ <i data-feather="twitter"></i>
371
+ </a>
372
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition">
373
+ <i data-feather="instagram"></i>
374
+ </a>
375
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition">
376
+ <i data-feather="discord"></i>
377
+ </a>
378
+ </div>
379
+ </div>
380
+
381
+ <div>
382
+ <h3 class="text-lg font-semibold mb-4">Product</h3>
383
+ <ul class="space-y-2">
384
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
385
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
386
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Examples</a></li>
387
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
388
+ </ul>
389
+ </div>
390
+
391
+ <div>
392
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
393
+ <ul class="space-y-2">
394
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
395
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
397
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li>
398
+ </ul>
399
+ </div>
400
+
401
+ <div>
402
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
403
+ <ul class="space-y-2">
404
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
405
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
406
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li>
407
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li>
408
+ </ul>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
413
+ <p>© 2023 ImaginAI. All rights reserved.</p>
414
+ </div>
415
+ </div>
416
+ </footer>
417
+
418
+ <script>
419
+ // Initialize feather icons
420
+ feather.replace();
421
+
422
+ // Simulate image generation
423
+ document.querySelector('.prompt-input button').addEventListener('click', function() {
424
+ const loadingArea = document.querySelector('.loading-spinner').parentElement;
425
+ loadingArea.innerHTML = '<img src="http://static.photos/cyberpunk/1024x576/5" alt="Generated image" class="w-full h-full object-cover rounded-lg">';
426
+ });
427
+ </script>
428
+ </body>
429
+ </html>