Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI-Grok | Future-Ready AI Scanner</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| color: #e5e7eb; | |
| overflow-x: hidden; | |
| background-color: #000000; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #2c6fbb 0%, #2f8af5 50%, #41b8f5 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .glass-card { | |
| background: rgba(0, 0, 0, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-900 min-h-screen"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0 opacity-30"></div> | |
| <div class="relative z-10 min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="glass-card sticky top-0 z-50 py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="eye" class="text-indigo-400 w-6 h-6"></i> | |
| <span class="text-2xl font-bold gradient-text">AI-Grok</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-indigo-300 transition-colors">Features</a> | |
| <a href="#" class="hover:text-indigo-300 transition-colors">Pricing</a> | |
| <a href="#" class="hover:text-indigo-300 transition-colors">API</a> | |
| <a href="#" class="hover:text-indigo-300 transition-colors">Docs</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="px-4 py-2 rounded-full border border-indigo-400 text-indigo-400 hover:bg-indigo-400 hover:bg-opacity-10 transition-colors"> | |
| Sign In | |
| </a> | |
| <a href="#" class="px-4 py-2 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transition-colors"> | |
| Get Started | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <main class="flex-grow flex items-center py-20 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight"> | |
| <span class="gradient-text">AI-Grok</span> Vision Scanner | |
| </h1> | |
| <p class="text-xl text-slate-300 mb-10 max-w-3xl mx-auto"> | |
| Grok the future with our AI vision scanner. Instant insights, brutal honesty, no fluff. | |
| </p> | |
| <div class="glass-card rounded-xl p-8 max-w-2xl mx-auto mb-12 border-2 border-indigo-500"> | |
| <div class="flex flex-col md:flex-row gap-4 animate-pulse"> | |
| <input type="text" placeholder="Drop your URL here, human..." class="flex-grow px-4 py-3 bg-slate-800 rounded-lg border border-slate-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-lg font-mono"> | |
| <button class="px-8 py-3 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transition-all font-bold transform hover:scale-105"> | |
| Grok It! | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-center items-center space-x-8 text-indigo-300"> | |
| <div class="flex items-center"> | |
| <i data-feather="zap" class="w-5 h-5 mr-2"></i> | |
| <span class="font-bold">Instant Analysis</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="coffee" class="w-5 h-5 mr-2"></i> | |
| <span class="font-bold">No BS</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="eye" class="w-5 h-5 mr-2"></i> | |
| <span class="font-bold">Brutal Honesty</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Features Section --> | |
| <section class="py-20 px-6"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-16"> | |
| <span class="gradient-text">What Makes Us</span> Different | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Feature 1 --> | |
| <div class="glass-card rounded-xl p-8 hover:border-indigo-500 transition-all transform hover:-translate-y-2"> | |
| <h3 class="text-2xl font-bold mb-4 gradient-text">No Sugarcoating</h3> | |
| <p class="text-slate-300">We tell you exactly what's wrong with your site, no corporate fluff.</p> | |
| <div class="mt-6 text-indigo-400"> | |
| <i data-feather="alert-triangle" class="w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="glass-card rounded-xl p-8 hover:border-indigo-500 transition-all transform hover:-translate-y-2"> | |
| <h3 class="text-2xl font-bold mb-4 gradient-text">Memeworthy</h3> | |
| <p class="text-slate-300">Our reports go viral because they're actually funny and useful.</p> | |
| <div class="mt-6 text-indigo-400"> | |
| <i data-feather="thumbs-up" class="w-8 h-8"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="glass-card rounded-xl p-8 hover:border-indigo-500 transition-all transform hover:-translate-y-2"> | |
| <h3 class="text-2xl font-bold mb-4 gradient-text">For Builders</h3> | |
| <p class="text-slate-300">Made by devs who hate corporate tools as much as you do.</p> | |
| <div class="mt-6 text-indigo-400"> | |
| <i data-feather="code" class="w-8 h-8"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-6 bg-gradient-to-br from-black to-gray-900"> | |
| <div class="container mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-6">Ready for the Truth?</h2> | |
| <p class="text-xl text-slate-300 mb-10 max-w-2xl mx-auto"> | |
| Scan your site now and get brutally honest AI feedback in seconds. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="px-10 py-4 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transition-all font-bold text-lg transform hover:scale-105"> | |
| Grok My Site | |
| </button> | |
| <button class="px-10 py-4 rounded-lg border-2 border-indigo-400 text-indigo-400 hover:bg-indigo-400 hover:bg-opacity-10 transition-all font-bold text-lg transform hover:scale-105"> | |
| See Examples | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="glass-card py-12 px-6"> | |
| <div class="container mx-auto"> | |
| <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="eye" class="text-indigo-400 w-6 h-6"></i> | |
| <span class="text-xl font-bold gradient-text">AI-Grok</span> | |
| </div> | |
| <p class="text-slate-300 mb-4"> | |
| Grok the future with brutally honest AI insights. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-slate-300 hover:text-indigo-400"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-slate-300 hover:text-indigo-400"><i data-feather="linkedin"></i></a> | |
| <a href="#" class="text-slate-300 hover:text-indigo-400"><i data-feather="github"></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-slate-300 hover:text-indigo-400">Features</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-indigo-400">Pricing</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-indigo-400">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-slate-300 hover:text-indigo-400">Documentation</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-indigo-400">Blog</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-indigo-400">Support</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-slate-300 hover:text-indigo-400">About</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-indigo-400">Careers</a></li> | |
| <li><a href="#" class="text-slate-300 hover:text-indigo-400">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-slate-400 mb-4 md:mb-0">© 2023 AISight. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-slate-400 hover:text-indigo-400">Privacy</a> | |
| <a href="#" class="text-slate-400 hover:text-indigo-400">Terms</a> | |
| <a href="#" class="text-slate-400 hover:text-indigo-400">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js stars background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x2c6fbb, | |
| backgroundColor: 0x000000, | |
| shininess: 30.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.50, | |
| zoom: 0.75 | |
| }); | |
| // Add some fun console messages | |
| console.log('%c Welcome to AI-Grok!', 'font-size: 20px; color: #7c3aed; font-weight: bold;'); | |
| console.log('%c This site doesn\'t suck as much as yours probably does.', 'color: #7c3aed;'); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |