Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AirRabbitX - Innovative Tech Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .hero-pattern { | |
| background-image: | |
| linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), | |
| url('https://via.placeholder.com/1920x1080'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 text-gray-900 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 top-0 bg-white shadow-md"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <img class="h-8 w-auto" src="https://via.placeholder.com/100" alt="AirRabbitX Logo"> | |
| <span class="ml-2 text-xl font-bold text-purple-600">AirRabbitX</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8 sm:items-center"> | |
| <a href="#" class="text-gray-700 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#features" class="text-gray-700 hover:text-purple-600 px-3 py-2 text-sm font-medium">Features</a> | |
| <a href="#about" class="text-gray-700 hover:text-purple-600 px-3 py-2 text-sm font-medium">About</a> | |
| <a href="#contact" class="bg-purple-600 text-white hover:bg-purple-700 px-4 py-2 rounded-full text-sm font-medium transition duration-300">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="hero-pattern text-white pt-24 pb-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 text-center md:text-left"> | |
| <h1 class="text-4xl md:text-5xl font-extrabold mb-6 leading-tight"> | |
| Innovate Faster with <br class="hidden md:block"> | |
| <span class="text-purple-300">AirRabbitX Solutions</span> | |
| </h1> | |
| <p class="text-xl mb-8 text-gray-200"> | |
| Transforming ideas into cutting-edge technology. We deliver innovative solutions that drive your business forward. | |
| </p> | |
| <div class="flex justify-center md:justify-start space-x-4"> | |
| <a href="#features" class="bg-white text-purple-600 hover:bg-purple-100 px-6 py-3 rounded-full font-semibold transition duration-300 shadow-lg"> | |
| Learn More | |
| </a> | |
| <a href="#contact" class="bg-purple-600 text-white hover:bg-purple-700 px-6 py-3 rounded-full font-semibold transition duration-300 shadow-lg"> | |
| Get Started | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 mt-10 md:mt-0"> | |
| <img src="https://via.placeholder.com/600x400" alt="Technology Illustration" class="w-full rounded-xl shadow-2xl"> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-4"> | |
| Why Choose AirRabbitX? | |
| </h2> | |
| <p class="text-xl text-gray-600"> | |
| Cutting-edge solutions tailored to your unique business needs. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-100 p-6 rounded-xl text-center hover:shadow-xl transition duration-300"> | |
| <i class="fas fa-rocket text-5xl text-purple-600 mb-4"></i> | |
| <h3 class="text-xl font-bold mb-3">Rapid Innovation</h3> | |
| <p class="text-gray-600"> | |
| We accelerate your innovation cycle with agile methodologies and breakthrough technologies. | |
| </p> | |
| </div> | |
| <div class="bg-gray-100 p-6 rounded-xl text-center hover:shadow-xl transition duration-300"> | |
| <i class="fas fa-cogs text-5xl text-purple-600 mb-4"></i> | |
| <h3 class="text-xl font-bold mb-3">Custom Solutions</h3> | |
| <p class="text-gray-600"> | |
| Tailored technological solutions that perfectly align with your business objectives. | |
| </p> | |
| </div> | |
| <div class="bg-gray-100 p-6 rounded-xl text-center hover:shadow-xl transition duration-300"> | |
| <i class="fas fa-globe text-5xl text-purple-600 mb-4"></i> | |
| <h3 class="text-xl font-bold mb-3">Global Reach</h3> | |
| <p class="text-gray-600"> | |
| Empowering businesses worldwide with scalable and intelligent technological solutions. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="gradient-bg text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold mb-4"> | |
| Ready to Transform Your Business? | |
| </h2> | |
| <p class="text-xl text-gray-200"> | |
| Let's discuss how AirRabbitX can drive your technological innovation. | |
| </p> | |
| </div> | |
| <div class="max-w-lg mx-auto"> | |
| <form class="bg-white/10 p-8 rounded-xl shadow-xl"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">Name</label> | |
| <input type="text" class="w-full bg-white/20 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Your Name"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">Email</label> | |
| <input type="email" class="w-full bg-white/20 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="[email protected]"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">Message</label> | |
| <textarea class="w-full bg-white/20 text-white px-4 py-2 rounded-lg h-32 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Tell us about your project"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-white text-purple-600 hover:bg-purple-50 py-3 rounded-full font-semibold transition duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <img class="h-8 w-auto" src="https://via.placeholder.com/100" alt="AirRabbitX Logo"> | |
| <p class="mt-2 text-gray-400">© 2024 AirRabbitX. All rights reserved.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-2xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-2xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-2xl"></i></a> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |