Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Grok Imagine - AI Image Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| color: #f8fafc; | |
| min-height: 100vh; | |
| } | |
| .magic-gradient { | |
| background: linear-gradient(90deg, #7c3aed 0%, #6366f1 50%, #38bdf8 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); | |
| } | |
| .glow:hover { | |
| box-shadow: 0 0 25px rgba(99, 102, 241, 0.8); | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .image-placeholder { | |
| background: linear-gradient(135deg, #334155 0%, #1e293b 100%); | |
| border: 2px dashed #64748b; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-magic text-white text-xl"></i> | |
| </div> | |
| <span class="text-2xl font-bold magic-gradient">Grok Imagine</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#features" class="hover:text-indigo-400 transition">Features</a> | |
| <a href="#how-it-works" class="hover:text-indigo-400 transition">How It Works</a> | |
| <a href="#examples" class="hover:text-indigo-400 transition">Examples</a> | |
| <a href="#pricing" class="hover:text-indigo-400 transition">Pricing</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-full border border-indigo-500 text-indigo-400 hover:bg-indigo-500 hover:text-white transition">Login</button> | |
| <button class="px-6 py-2 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white glow transition">Sign Up</button> | |
| <button class="md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="container mx-auto px-6 py-16 md:py-24"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> | |
| <span class="magic-gradient">Imagine</span> Anything.<br> | |
| <span class="magic-gradient">Create</span> Everything. | |
| </h1> | |
| <p class="text-lg text-slate-300 mb-8 max-w-lg"> | |
| Unleash your creativity with Grok Imagine - the most powerful AI image generator. Transform your words into stunning visuals with just a few clicks. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-8 py-3 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white text-lg font-medium glow transition flex items-center justify-center"> | |
| <i class="fas fa-wand-magic-sparkles mr-2"></i> Try It Now | |
| </button> | |
| <button class="px-8 py-3 rounded-full border border-indigo-500 text-indigo-400 hover:bg-indigo-900/50 text-lg font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-slate-800"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-slate-800"> | |
| <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-slate-800"> | |
| </div> | |
| <p class="text-sm text-slate-400"> | |
| <span class="text-indigo-400 font-medium">10,000+</span> creators already generating magic | |
| </p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative floating"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-600 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-500 rounded-full filter blur-3xl opacity-20"></div> | |
| <div class="relative bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl overflow-hidden border border-slate-700 glow"> | |
| <div class="p-4 bg-slate-800/50 border-b border-slate-700 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 class="ml-2 text-sm text-slate-400">prompt: "mystical forest with glowing mushrooms"</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="image-placeholder rounded-xl w-full h-64 md:h-80 flex items-center justify-center"> | |
| <img src="https://source.unsplash.com/random/600x400/?fantasy,forest" alt="AI Generated Image" class="w-full h-full object-cover rounded-lg"> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full bg-slate-700 hover:bg-slate-600 transition"> | |
| <i class="fas fa-heart text-pink-500"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-slate-700 hover:bg-slate-600 transition"> | |
| <i class="fas fa-download text-blue-400"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-slate-700 hover:bg-slate-600 transition"> | |
| <i class="fas fa-share-nodes text-green-400"></i> | |
| </button> | |
| </div> | |
| <button class="px-4 py-2 rounded-full bg-indigo-600 hover:bg-indigo-700 text-sm font-medium"> | |
| Remix This | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trusted By Section --> | |
| <section class="bg-slate-800/50 py-8"> | |
| <div class="container mx-auto px-6"> | |
| <p class="text-center text-slate-400 mb-6">Trusted by innovative teams worldwide</p> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <div class="text-2xl font-bold text-slate-300 opacity-80">Adobe</div> | |
| <div class="text-2xl font-bold text-slate-300 opacity-80">Netflix</div> | |
| <div class="text-2xl font-bold text-slate-300 opacity-80">Spotify</div> | |
| <div class="text-2xl font-bold text-slate-300 opacity-80">Disney</div> | |
| <div class="text-2xl font-bold text-slate-300 opacity-80">Airbnb</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="container mx-auto px-6 py-16 md:py-24"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="magic-gradient">Magical Features</span> That Inspire | |
| </h2> | |
| <p class="text-lg text-slate-300 max-w-2xl mx-auto"> | |
| Grok Imagine comes packed with powerful features to bring your wildest imaginations to life | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-8 border border-slate-700 hover:border-indigo-500 transition"> | |
| <div class="w-14 h-14 rounded-xl bg-indigo-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-2xl text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Advanced AI Models</h3> | |
| <p class="text-slate-400"> | |
| Our cutting-edge AI understands complex prompts and delivers stunning results with unprecedented detail. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-8 border border-slate-700 hover:border-indigo-500 transition"> | |
| <div class="w-14 h-14 rounded-xl bg-purple-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-sliders text-2xl text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Precision Controls</h3> | |
| <p class="text-slate-400"> | |
| Fine-tune every aspect of your creation with advanced controls for style, composition, and lighting. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-8 border border-slate-700 hover:border-indigo-500 transition"> | |
| <div class="w-14 h-14 rounded-xl bg-blue-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-history text-2xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Version History</h3> | |
| <p class="text-slate-400"> | |
| Never lose a creation. Access your entire generation history and revisit past prompts anytime. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-8 border border-slate-700 hover:border-indigo-500 transition"> | |
| <div class="w-14 h-14 rounded-xl bg-green-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-users text-2xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Collaborative Workspace</h3> | |
| <p class="text-slate-400"> | |
| Work seamlessly with your team in real-time, sharing and remixing creations together. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-8 border border-slate-700 hover:border-indigo-500 transition"> | |
| <div class="w-14 h-14 rounded-xl bg-pink-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-paint-brush text-2xl text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Artistic Styles</h3> | |
| <p class="text-slate-400"> | |
| Choose from hundreds of artistic styles or create your own custom style presets. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-slate-800/50 rounded-xl p-8 border border-slate-700 hover:border-indigo-500 transition"> | |
| <div class="w-14 h-14 rounded-xl bg-yellow-600/20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-expand text-2xl text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">High Resolution</h3> | |
| <p class="text-slate-400"> | |
| Generate images up to 8K resolution, perfect for print, digital displays, and large formats. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="bg-slate-800/50 py-16 md:py-24"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="magic-gradient">How Grok Imagine</span> Works | |
| </h2> | |
| <p class="text-lg text-slate-300 max-w-2xl mx-auto"> | |
| Creating stunning AI art has never been easier. Just follow these simple steps. | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row justify-between items-center gap-8 mb-16"> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-600 rounded-full filter blur-3xl opacity-10"></div> | |
| <div class="relative bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl overflow-hidden border border-slate-700 p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-4"> | |
| <span class="font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-bold">Describe Your Vision</h3> | |
| </div> | |
| <p class="text-slate-400 mb-6"> | |
| Type in your creative prompt - the more descriptive, the better! Our AI understands complex descriptions and artistic styles. | |
| </p> | |
| <div class="bg-slate-900 rounded-lg p-4 border border-slate-700"> | |
| <div class="flex items-center text-sm text-slate-500 mb-2"> | |
| <i class="fas fa-keyboard mr-2"></i> Prompt example | |
| </div> | |
| <p class="text-slate-300 italic"> | |
| "A cyberpunk cityscape at night with neon lights reflecting on wet streets, in the style of Blade Runner, ultra detailed 8K" | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://source.unsplash.com/random/500x300/?typing,keyboard" alt="Typing prompt" class="rounded-xl border border-slate-700 w-full max-w-md"> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row-reverse justify-between items-center gap-8 mb-16"> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-blue-600 rounded-full filter blur-3xl opacity-10"></div> | |
| <div class="relative bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl overflow-hidden border border-slate-700 p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-4"> | |
| <span class="font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-bold">Customize Your Creation</h3> | |
| </div> | |
| <p class="text-slate-400 mb-6"> | |
| Fine-tune your image with our advanced controls. Adjust style, composition, lighting, and more to get exactly what you envision. | |
| </p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-slate-900 rounded-lg p-3 border border-slate-700 text-center"> | |
| <div class="text-indigo-400 mb-1"><i class="fas fa-palette"></i></div> | |
| <div class="text-sm">Art Style</div> | |
| </div> | |
| <div class="bg-slate-900 rounded-lg p-3 border border-slate-700 text-center"> | |
| <div class="text-purple-400 mb-1"><i class="fas fa-sun"></i></div> | |
| <div class="text-sm">Lighting</div> | |
| </div> | |
| <div class="bg-slate-900 rounded-lg p-3 border border-slate-700 text-center"> | |
| <div class="text-blue-400 mb-1"><i class="fas fa-crop"></i></div> | |
| <div class="text-sm">Composition</div> | |
| </div> | |
| <div class="bg-slate-900 rounded-lg p-3 border border-slate-700 text-center"> | |
| <div class="text-green-400 mb-1"><i class="fas fa-sliders-h"></i></div> | |
| <div class="text-sm">Advanced</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://source.unsplash.com/random/500x300/?settings,controls" alt="Customization options" class="rounded-xl border border-slate-700 w-full max-w-md"> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row justify-between items-center gap-8"> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-pink-600 rounded-full filter blur-3xl opacity-10"></div> | |
| <div class="relative bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl overflow-hidden border border-slate-700 p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-4"> | |
| <span class="font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-bold">Generate & Refine</h3> | |
| </div> | |
| <p class="text-slate-400 mb-6"> | |
| Watch as your creation comes to life in seconds. Not quite right? Refine with additional prompts or use our inpainting tools to edit specific areas. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 rounded-full bg-indigo-600 hover:bg-indigo-700 text-sm font-medium flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Regenerate | |
| </button> | |
| <button class="px-4 py-2 rounded-full bg-slate-700 hover:bg-slate-600 text-sm font-medium flex items-center"> | |
| <i class="fas fa-edit mr-2"></i> Refine | |
| </button> | |
| <button class="px-4 py-2 rounded-full bg-slate-700 hover:bg-slate-600 text-sm font-medium flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://source.unsplash.com/random/500x300/?art,gallery" alt="AI generated art" class="rounded-xl border border-slate-700 w-full max-w-md"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Examples Section --> | |
| <section id="examples" class="container mx-auto px-6 py-16 md:py-24"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="magic-gradient">Inspiring Examples</span> From Our Community | |
| </h2> | |
| <p class="text-lg text-slate-300 max-w-2xl mx-auto"> | |
| See what others are creating with Grok Imagine. These images were all generated from text prompts. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="group relative rounded-xl overflow-hidden border border-slate-700 hover:border-indigo-500 transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?fantasy,castle" alt="AI Generated Art" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> | |
| <div> | |
| <p class="text-sm text-slate-300 mb-1">Prompt:</p> | |
| <p class="text-white font-medium">"Floating castle in the clouds at sunset, digital painting style"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group relative rounded-xl overflow-hidden border border-slate-700 hover:border-indigo-500 transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?cyberpunk,city" alt="AI Generated Art" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> | |
| <div> | |
| <p class="text-sm text-slate-300 mb-1">Prompt:</p> | |
| <p class="text-white font-medium">"Neon-lit cyberpunk street with rain reflections, cinematic lighting"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group relative rounded-xl overflow-hidden border border-slate-700 hover:border-indigo-500 transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?portrait,fantasy" alt="AI Generated Art" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> | |
| <div> | |
| <p class="text-sm text-slate-300 mb-1">Prompt:</p> | |
| <p class="text-white font-medium">"Elven queen with intricate crown, hyper-realistic portrait"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group relative rounded-xl overflow-hidden border border-slate-700 hover:border-indigo-500 transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?surreal,dream" alt="AI Generated Art" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> | |
| <div> | |
| <p class="text-sm text-slate-300 mb-1">Prompt:</p> | |
| <p class="text-white font-medium">"Surreal landscape with giant flowers and tiny houses"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group relative rounded-xl overflow-hidden border border-slate-700 hover:border-indigo-500 transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?sci-fi,spaceship" alt="AI Generated Art" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> | |
| <div> | |
| <p class="text-sm text-slate-300 mb-1">Prompt:</p> | |
| <p class="text-white font-medium">"Futuristic spaceship orbiting an alien planet, concept art"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group relative rounded-xl overflow-hidden border border-slate-700 hover:border-indigo-500 transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?watercolor,landscape" alt="AI Generated Art" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> | |
| <div> | |
| <p class="text-sm text-slate-300 mb-1">Prompt:</p> | |
| <p class="text-white font-medium">"Misty mountain landscape in watercolor style with soft colors"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="px-8 py-3 rounded-full border border-indigo-500 text-indigo-400 hover:bg-indigo-900/50 text-lg font-medium transition"> | |
| Explore More Creations | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="bg-slate-800/50 py-16 md:py-24"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="magic-gradient">Simple Pricing</span> For Everyone | |
| </h2> | |
| <p class="text-lg text-slate-300 max-w-2xl mx-auto"> | |
| Choose the plan that fits your creative needs. Cancel anytime. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-gradient-to-b from-slate-800 to-slate-900 rounded-2xl p-8 border border-slate-700"> | |
| <h3 class="text-xl font-bold mb-4">Starter</h3> | |
| <div class="text-4xl font-bold mb-6">$9<span class="text-lg text-slate-400">/month</span></div> | |
| <p class="text-slate-400 mb-8">Perfect for beginners exploring AI art generation</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>100 generations per month</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>Standard resolution (1024x1024)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>20+ artistic styles</span> | |
| </li> | |
| <li class="flex items-center text-slate-500"> | |
| <i class="fas fa-times text-red-500 mr-3"></i> | |
| <span>No commercial license</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 rounded-full border border-indigo-500 text-indigo-400 hover:bg-indigo-900/50 transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="bg-gradient-to-b from-slate-800 to-slate-900 rounded-2xl p-8 border-2 border-indigo-500 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 bg-indigo-600 text-xs font-bold px-3 py-1 rounded-bl-lg"> | |
| POPULAR | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Creator</h3> | |
| <div class="text-4xl font-bold mb-6">$29<span class="text-lg text-slate-400">/month</span></div> | |
| <p class="text-slate-400 mb-8">For serious creators and professionals</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>1000 generations per month</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>High resolution (2048x2048)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>100+ artistic styles</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>Commercial license</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white glow transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="bg-gradient-to-b from-slate-800 to-slate-900 rounded-2xl p-8 border border-slate-700"> | |
| <h3 class="text-xl font-bold mb-4">Enterprise</h3> | |
| <div class="text-4xl font-bold mb-6">Custom</div> | |
| <p class="text-slate-400 mb-8">For teams and businesses with advanced needs</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>Unlimited generations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>8K ultra resolution</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>Custom style training</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span>Priority support & API access</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 rounded-full border border-indigo-500 text-indigo-400 hover:bg-indigo-900/50 transition"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="container mx-auto px-6 py-16 md:py-24"> | |
| <div class="bg-gradient-to-r from-indigo-900/50 to-blue-900/50 rounded-2xl p-8 md:p-12 border border-slate-700"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="md:w-2/3 mb-8 md:mb-0"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4"> | |
| Ready to Unleash Your <span class="magic-gradient">Creativity</span>? | |
| </h2> | |
| <p class="text-slate-300 max-w-2xl"> | |
| Join thousands of creators already making magic with Grok Imagine. No credit card required to start. | |
| </p> | |
| </div> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-8 py-3 rounded-full bg-white hover:bg-slate-100 text-indigo-600 text-lg font-medium glow transition"> | |
| <i class="fas fa-wand-magic-sparkles mr-2"></i> Try It Free | |
| </button> | |
| <button class="px-8 py-3 rounded-full border border-white text-white hover:bg-white/10 text-lg font-medium transition"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900/50 border-t border-slate-800 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-magic text-white text-xl"></i> | |
| </div> | |
| <span class="text-2xl font-bold magic-gradient">Grok Imagine</span> | |
| </div> | |
| <p class="text-slate-400 mb-6"> | |
| The most powerful AI image generator for creators, artists, and businesses. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-slate-700 flex items-center justify-center"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-slate-700 flex items-center justify-center"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-slate-700 flex items-center justify-center"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-slate-700 flex items-center justify-center"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-6">Product</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Features</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Pricing</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Examples</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">API</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Changelog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-6">Resources</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Documentation</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Tutorials</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Blog</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Community</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Help Center</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-6">Company</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">About</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Careers</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Privacy</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Terms</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-indigo-400 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-slate-500 mb-4 md:mb-0"> | |
| © 2023 Grok Imagine. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-slate-500 hover:text-indigo-400 transition">Privacy Policy</a> | |
| <a href="#" class="text-slate-500 hover:text-indigo-400 transition">Terms of Service</a> | |
| <a href="#" class="text-slate-500 hover:text-indigo-400 transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for demo purposes | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add pulse animation to CTA buttons | |
| const ctaButtons = document.querySelectorAll('.glow'); | |
| ctaButtons.forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| button.classList.add('pulse'); | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.classList.remove('pulse'); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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=ResterChed/deepsitetest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |