Spaces:
Running
Running
File size: 8,424 Bytes
e9fc4a1 213d533 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
<!DOCTYPE html>
<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>
|