Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ImaginAI - Advanced AI Image Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .prompt-input { | |
| background: linear-gradient(90deg, #4f46e5, #8b5cf6); | |
| } | |
| .generation-card:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .loading-spinner { | |
| animation: spin 1.5s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 border-b border-gray-700"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i data-feather="image" class="w-8 h-8 text-indigo-400"></i> | |
| <span class="text-2xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">ImaginAI</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="hover:text-indigo-300 transition">Home</a> | |
| <a href="#features" class="hover:text-indigo-300 transition">Features</a> | |
| <a href="#pricing" class="hover:text-indigo-300 transition">Pricing</a> | |
| <a href="#" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-md transition">Sign In</a> | |
| </div> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <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> | |
| <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> | |
| <div class="max-w-2xl mx-auto relative"> | |
| <div class="prompt-input p-1 rounded-lg mb-8"> | |
| <div class="flex bg-gray-800 rounded-lg"> | |
| <input type="text" placeholder="Describe what you want to create..." class="flex-grow px-6 py-4 bg-transparent outline-none text-gray-200"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 px-8 py-4 rounded-r-lg font-medium transition"> | |
| Generate <i data-feather="arrow-right" class="ml-2 inline"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-10"> | |
| <div class="bg-gray-800 p-3 rounded-lg text-center"> | |
| <i data-feather="zap" class="w-8 h-8 mx-auto text-indigo-400 mb-2"></i> | |
| <h3 class="font-bold">10x Faster</h3> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg text-center"> | |
| <i data-feather="image" class="w-8 h-8 mx-auto text-purple-400 mb-2"></i> | |
| <h3 class="font-bold">Higher Quality</h3> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg text-center"> | |
| <i data-feather="cpu" class="w-8 h-8 mx-auto text-pink-400 mb-2"></i> | |
| <h3 class="font-bold">Smarter AI</h3> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg text-center"> | |
| <i data-feather="sliders" class="w-8 h-8 mx-auto text-blue-400 mb-2"></i> | |
| <h3 class="font-bold">More Control</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section class="py-16 bg-gray-800/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Featured Creations</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Generated Images --> | |
| <div class="generation-card bg-gray-800 rounded-xl overflow-hidden transition duration-300"> | |
| <img src="http://static.photos/fantasy/1024x576/1" alt="Fantasy landscape" class="w-full h-64 object-cover"> | |
| <div class="p-4"> | |
| <p class="text-gray-400 text-sm mb-2">"Majestic dragon soaring over neon cityscape, hyper-detailed, 8k"</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-400"> | |
| <i data-feather="heart"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-indigo-400"> | |
| <i data-feather="download"></i> | |
| </button> | |
| </div> | |
| <span class="text-xs text-gray-500">2 min ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="generation-card bg-gray-800 rounded-xl overflow-hidden transition duration-300"> | |
| <img src="http://static.photos/sci-fi/1024x576/2" alt="Sci-fi portrait" class="w-full h-64 object-cover"> | |
| <div class="p-4"> | |
| <p class="text-gray-400 text-sm mb-2">"Cyberpunk samurai with glowing katana, cinematic lighting"</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-400"> | |
| <i data-feather="heart"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-indigo-400"> | |
| <i data-feather="download"></i> | |
| </button> | |
| </div> | |
| <span class="text-xs text-gray-500">15 min ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="generation-card bg-gray-800 rounded-xl overflow-hidden transition duration-300"> | |
| <img src="http://static.photos/surreal/1024x576/3" alt="Surreal art" class="w-full h-64 object-cover"> | |
| <div class="p-4"> | |
| <p class="text-gray-400 text-sm mb-2">"Surreal floating islands with waterfalls, dreamlike atmosphere"</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-400"> | |
| <i data-feather="heart"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-indigo-400"> | |
| <i data-feather="download"></i> | |
| </button> | |
| </div> | |
| <span class="text-xs text-gray-500">1 hour ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="generation-card bg-gray-800 rounded-xl overflow-hidden transition duration-300"> | |
| <img src="http://static.photos/portrait/1024x576/4" alt="Portrait" class="w-full h-64 object-cover"> | |
| <div class="p-4"> | |
| <p class="text-gray-400 text-sm mb-2">"Photorealistic portrait of an elven queen, intricate jewelry"</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-indigo-400"> | |
| <i data-feather="heart"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-indigo-400"> | |
| <i data-feather="download"></i> | |
| </button> | |
| </div> | |
| <span class="text-xs text-gray-500">3 hours ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition"> | |
| Explore More Creations | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-16">Why ImaginAI is Better</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-12"> | |
| <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700"> | |
| <div class="w-14 h-14 bg-indigo-600/20 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="clock" class="w-6 h-6 text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Lightning Fast Generation</h3> | |
| <p class="text-gray-400">Our proprietary AI models generate images up to 10x faster than competitors, with the same or better quality.</p> | |
| </div> | |
| <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700"> | |
| <div class="w-14 h-14 bg-purple-600/20 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="layers" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Advanced Control</h3> | |
| <p class="text-gray-400">Fine-tune every aspect with our advanced parameters: style mixing, composition control, and prompt weighting.</p> | |
| </div> | |
| <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700"> | |
| <div class="w-14 h-14 bg-pink-600/20 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="w-6 h-6 text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Smarter Understanding</h3> | |
| <p class="text-gray-400">Our AI deeply understands complex prompts and maintains consistency across multiple generations.</p> | |
| </div> | |
| <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700"> | |
| <div class="w-14 h-14 bg-blue-600/20 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="edit" class="w-6 h-6 text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Image-to-Image</h3> | |
| <p class="text-gray-400">Upload reference images to guide generation while maintaining creative flexibility.</p> | |
| </div> | |
| <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700"> | |
| <div class="w-14 h-14 bg-green-600/20 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="users" class="w-6 h-6 text-green-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Collaborative Features</h3> | |
| <p class="text-gray-400">Real-time collaboration tools for teams working on creative projects together.</p> | |
| </div> | |
| <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700"> | |
| <div class="w-14 h-14 bg-yellow-600/20 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="trending-up" class="w-6 h-6 text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Continuous Improvement</h3> | |
| <p class="text-gray-400">Our models improve weekly based on user feedback and the latest research.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Generation Demo --> | |
| <section class="py-16 bg-gradient-to-br from-gray-800 to-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">See It In Action</h2> | |
| <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl overflow-hidden shadow-xl"> | |
| <div class="p-6 border-b border-gray-700 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-gray-400 text-sm"> | |
| Generating: "Futuristic city at sunset, neon lights reflecting on wet streets, cyberpunk style" | |
| </div> | |
| </div> | |
| <div class="p-8 flex flex-col items-center"> | |
| <div class="relative w-full h-64 bg-gray-900 rounded-lg mb-6 flex items-center justify-center"> | |
| <div class="loading-spinner border-4 border-indigo-500 border-t-transparent rounded-full w-12 h-12"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-gray-500">Generating your image...</span> | |
| </div> | |
| </div> | |
| <div class="w-full grid grid-cols-4 gap-4"> | |
| <div class="bg-gray-700 rounded h-2"></div> | |
| <div class="bg-gray-700 rounded h-2"></div> | |
| <div class="bg-gray-700 rounded h-2"></div> | |
| <div class="bg-indigo-600 rounded h-2"></div> | |
| </div> | |
| <div class="mt-8 flex space-x-4"> | |
| <button class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition">Stop</button> | |
| <button class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition">Enhance</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-16"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-4">Simple, Transparent Pricing</h2> | |
| <p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto">Choose the plan that fits your creative needs</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-8"> | |
| <h3 class="text-xl font-bold mb-2">Starter</h3> | |
| <p class="text-gray-400 mb-6">For hobbyists and casual creators</p> | |
| <div class="text-4xl font-bold mb-6">$9.99<span class="text-lg text-gray-400">/month</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> | |
| <span>100 generations/month</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> | |
| <span>Standard resolution</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="x" class="w-4 h-4 text-gray-500 mr-2"></i> | |
| <span class="text-gray-500">No commercial use</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition">Get Started</button> | |
| </div> | |
| <div class="bg-gray-800 border-2 border-indigo-500 rounded-xl p-8 transform scale-105 relative"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-2">Pro</h3> | |
| <p class="text-gray-400 mb-6">For professionals and serious creators</p> | |
| <div class="text-4xl font-bold mb-6">$29.99<span class="text-lg text-gray-400">/month</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> | |
| <span>1000 generations/month</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> | |
| <span>High resolution</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> | |
| <span>Commercial license</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition">Get Started</button> | |
| </div> | |
| <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-8"> | |
| <h3 class="text-xl font-bold mb-2">Enterprise</h3> | |
| <p class="text-gray-400 mb-6">For studios and large teams</p> | |
| <div class="text-4xl font-bold mb-6">Custom</div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> | |
| <span>Unlimited generations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> | |
| <span>4K resolution</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> | |
| <span>Priority support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition">Contact Sales</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-indigo-600 to-purple-600"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Unleash Your Creativity?</h2> | |
| <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> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="px-8 py-4 bg-white text-indigo-600 font-bold rounded-lg hover:bg-gray-100 transition">Start Free Trial</button> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-12 border-t border-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="image" class="w-8 h-8 text-indigo-400"></i> | |
| <span class="text-xl font-bold">ImaginAI</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">The most advanced AI image generation platform.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-indigo-400 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-indigo-400 transition"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-indigo-400 transition"> | |
| <i data-feather="discord"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Examples</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> | |
| <p>© 2023 ImaginAI. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Simulate image generation | |
| document.querySelector('.prompt-input button').addEventListener('click', function() { | |
| const loadingArea = document.querySelector('.loading-spinner').parentElement; | |
| loadingArea.innerHTML = '<img src="http://static.photos/cyberpunk/1024x576/5" alt="Generated image" class="w-full h-full object-cover rounded-lg">'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |