Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Grok - AI That Thinks</title> | |
| <link rel="icon" type="image/x-icon" href="/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-amber-50 relative overflow-x-hidden"> | |
| <!-- Sun Background --> | |
| <div class="fixed inset-0 pointer-events-none"> | |
| <div class="absolute top-20 right-20 w-96 h-96 bg-gradient-to-br from-amber-300 to-yellow-400 rounded-full opacity-20 blur-3xl animate-pulse"></div> | |
| <div class="absolute top-32 right-32 w-80 h-80 bg-gradient-to-br from-orange-300 to-amber-400 rounded-full opacity-30 blur-2xl"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="relative z-10 p-6"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center"> | |
| <span class="text-white font-bold text-sm">G</span> | |
| </div> | |
| <span class="text-2xl font-bold text-gray-800">Grok</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="text-gray-600 hover:text-blue-500 transition-colors">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-500 transition-colors">Pricing</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-500 transition-colors">About</a> | |
| <a href="https://grok.com/sign-in?return_to=%2Fimagine" class="text-gray-600 hover:text-blue-500 transition-colors">Sign In</a> | |
| <a href="https://grok.com/sign-up?return_to=%2Fimagine" class="bg-blue-500 text-white px-6 py-2 rounded-full hover:bg-blue-600 transition-colors">Sign Up</a> | |
| </div> | |
| <button class="md:hidden"> | |
| <i data-feather="menu" class="text-gray-600"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="relative z-10"> | |
| <!-- Hero Section --> | |
| <section class="max-w-7xl mx-auto px-6 py-20"> | |
| <div class="text-center mb-20"> | |
| <h1 class="text-6xl md:text-8xl font-bold text-gray-800 mb-8 leading-tight"> | |
| What do you want to <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-amber-500">know?</span> | |
| </h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> | |
| Grok is an AI that thinks differently. Ask anything, explore everything, and discover insights that change how you see the world. | |
| </p> | |
| </div> | |
| <!-- Promotional Banner --> | |
| <div class="relative mb-20"> | |
| <div class="bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-100"> | |
| <div class="grid md:grid-cols-2 gap-0"> | |
| <!-- Left Content --> | |
| <div class="p-12 flex flex-col justify-center"> | |
| <div class="mb-6"> | |
| <span class="bg-blue-100 text-blue-600 px-4 py-2 rounded-full text-sm font-medium">NEW FEATURE</span> | |
| </div> | |
| <h2 class="text-4xl font-bold text-gray-800 mb-6 leading-tight"> | |
| Grok Imagine <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-amber-500">Upgrades</span> | |
| </h2> | |
| <p class="text-gray-600 text-lg mb-8 leading-relaxed"> | |
| Generate videos with built-in audio - plus enhanced lifelike motion and character consistency. | |
| Transform your ideas into immersive visual experiences with just a message. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="https://grok.com/sign-up?return_to=%2Fimagine" | |
| class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-8 py-4 rounded-full font-semibold hover:from-blue-600 hover:to-blue-700 transition-all transform hover:scale-105 text-center"> | |
| Start Creating | |
| </a> | |
| <a href="https://grok.com/sign-in?return_to=%2Fimagine" | |
| class="border-2 border-gray-200 text-gray-700 px-8 py-4 rounded-full font-semibold hover:border-blue-500 hover:text-blue-500 transition-all text-center"> | |
| Sign In | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Right Image --> | |
| <div class="relative overflow-hidden"> | |
| <img src="https://grok.com/_next/image?url=%2Fimagine-banner2.jpg&w=3840&q=50" | |
| alt="Grok Imagine banner showing AI-generated content" | |
| class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-l from-transparent to-white opacity-20"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Grid --> | |
| <div class="grid md:grid-cols-3 gap-8 mb-20"> | |
| <div class="bg-white rounded-2xl p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="brain" class="text-blue-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Advanced AI</h3> | |
| <p class="text-gray-600">Powered by cutting-edge AI technology that understands context and nuance like never before.</p> | |
| </div> | |
| <div class="bg-white rounded-2xl p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="text-amber-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Real-time Thinking</h3> | |
| <p class="text-gray-600">Get instant insights and responses that adapt to your questions in real-time.</p> | |
| </div> | |
| <div class="bg-white rounded-2xl p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="video" class="text-green-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Video Generation</h3> | |
| <p class="text-gray-600">Create stunning videos with built-in audio and realistic motion capabilities.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="relative z-10 bg-white border-t border-gray-100 py-12"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center text-gray-500 text-sm space-y-4"> | |
| <p>By messaging Grok, you agree to our | |
| <a href="https://x.ai/legal/terms-of-service" class="text-blue-500 hover:underline">Terms</a> | |
| and | |
| <a href="https://x.ai/legal/privacy-policy" class="text-blue-500 hover:underline">Privacy Policy</a> | |
| </p> | |
| <div class="flex justify-center space-x-8 text-xs"> | |
| <a href="#" class="hover:text-gray-700">About</a> | |
| <a href="#" class="hover:text-gray-700">Blog</a> | |
| <a href="#" class="hover:text-gray-700">Careers</a> | |
| <a href="#" class="hover:text-gray-700">Press</a> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-6">© 2024 Grok. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |