|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SkyGuardian AI - Advanced Tactical Drone Systems</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #0a0f29 0%, #1a237e 50%, #283593 100%); |
|
|
} |
|
|
|
|
|
.section-gradient { |
|
|
background: linear-gradient(135deg, #1a237e 0%, #283593 100%); |
|
|
} |
|
|
|
|
|
.tech-card { |
|
|
backdrop-filter: blur(10px); |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tech-card:hover { |
|
|
transform: translateY(-5px); |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-color: rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
|
|
|
.glow-text { |
|
|
text-shadow: 0 0 20px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-['Rajdhani'] bg-gray-900 text-white overflow-x-hidden"> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-gray-900/90 backdrop-blur-md border-b border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center h-16"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="shield" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<span class="text-xl font-['Orbitron'] font-bold">SKYGUARDIAN</span> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#systems" class="hover:text-blue-400 transition-colors">Systems</a> |
|
|
<a href="#technology" class="hover:text-blue-400 transition-colors">Technology</a> |
|
|
<a href="#partners" class="hover:text-blue-400 transition-colors">Partners</a> |
|
|
<a href="#contact" class="hover:text-blue-400 transition-colors">Contact</a> |
|
|
</div> |
|
|
|
|
|
<button class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-semibold transition-colors"> |
|
|
GET DEMO |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="hero" class="min-h-screen hero-gradient flex items-center relative overflow-hidden"> |
|
|
<div id="vanta-bg" class="absolute inset-0"></div> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div class="space-y-6"> |
|
|
<div class="inline-block bg-blue-500/20 border border-blue-500/30 rounded-full px-4 py-1 text-sm"> |
|
|
MILITARY GRADE TACTICAL UAS |
|
|
</div> |
|
|
<h1 class="text-5xl md:text-7xl font-['Orbitron'] font-bold leading-tight glow-text"> |
|
|
BE READY<br> |
|
|
<span class="text-blue-400">FOR ANYTHING</span> |
|
|
</h1> |
|
|
<p class="text-xl text-gray-300 max-w-lg"> |
|
|
Advanced AI-assisted tactical drone systems designed for the most demanding military operations and security missions. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-lg font-semibold text-lg transition-all hover:scale-105"> |
|
|
EXPLORE SYSTEMS |
|
|
</button> |
|
|
<button class="border border-blue-500 text-blue-400 hover:bg-blue-500/10 px-8 py-4 rounded-lg font-semibold text-lg transition-all"> |
|
|
WATCH DEMO |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="relative"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/66c844f6148120b0d30c4b25_03daef83ae147195804179527b992e1f.gif" |
|
|
alt="Tactical Drone Operation" |
|
|
class="rounded-2xl shadow-2xl border border-gray-700"> |
|
|
<div class="absolute -inset-4 bg-blue-500/20 rounded-2xl blur-xl -z-10"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="tech-card rounded-2xl p-8 text-center"> |
|
|
<div class="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i data-feather="compass" class="w-8 h-8 text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-['Orbitron'] font-semibold mb-4">Mission-Driven Intuitive Operating Concept</h3> |
|
|
<p class="text-gray-400">Designed with operators in mind, our UAS systems are user-friendly and multi-mission-focused, ensuring intuitive control for high-stakes complex & dynamic missions.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tech-card rounded-2xl p-8 text-center"> |
|
|
<div class="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i data-feather="zap" class="w-8 h-8 text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-['Orbitron'] font-semibold mb-4">Swift Operational Readiness</h3> |
|
|
<p class="text-gray-400">Our UAS allow for rapid deployment capabilities, built for quick-to-learn operational use and swift adaptability in ever-changing combat scenarios.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tech-card rounded-2xl p-8 text-center"> |
|
|
<div class="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i data-feather="cpu" class="w-8 h-8 text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-['Orbitron'] font-semibold mb-4">Exchangeable Payloads & 3rd Party Software Hub</h3> |
|
|
<p class="text-gray-400">Our Tactical UAS platforms support modular payloads and seamless third-party software integration for versatile mission solutions.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="technology" class="py-20 section-gradient"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h2 class="text-4xl md:text-5xl font-['Orbitron'] font-bold mb-6 glow-text"> |
|
|
XOS: The Future of Tactical UAS Control |
|
|
</h2> |
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
The SkyGuardian Operating System (XOS) revolutionizes machine control with an intuitive interface for remote missions and multi-mission robots. |
|
|
</p> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-400"></i> |
|
|
<span>Easily control multi-platform, multi-mission machine fleets concurrently</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-400"></i> |
|
|
<span>Advanced AI for autonomous subtasks with operator high-level decisions</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-400"></i> |
|
|
<span>Seamless integration with external applications for flexibility</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/66c844f6148120b0d30c4b25_03daef83ae147195804179527b992e1f.gif" |
|
|
alt="XOS Interface" |
|
|
class="rounded-2xl shadow-2xl border border-gray-700"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="systems" class="py-20 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-4xl md:text-5xl font-['Orbitron'] font-bold text-center mb-16 glow-text"> |
|
|
TACTICAL DRONE SYSTEMS |
|
|
</h2> |
|
|
|
|
|
<div class="grid lg:grid-cols-2 gap-12"> |
|
|
|
|
|
<div class="tech-card rounded-2xl p-8"> |
|
|
<div class="grid md:grid-cols-2 gap-6 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-['Orbitron'] font-bold mb-4">XTENDER</h3> |
|
|
<p class="text-gray-400 mb-4">Indoor Micro Tactical Drone</p> |
|
|
<p class="text-sm text-gray-500">XTENDER is a micro tactical indoor ISR system for operators with no previous flight experience. Leverage Mark & Fly technology to control drone teams and payloads indoors via our OS.</p> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/66c844f6148120b0d30c4b25_03daef83ae147195804179527b992e1f.gif" |
|
|
alt="XTENDER Drone" |
|
|
class="rounded-xl"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tech-card rounded-2xl p-8"> |
|
|
<div class="grid md:grid-cols-2 gap-6 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-['Orbitron'] font-bold mb-4">SCORPIO 1000</h3> |
|
|
<p class="text-gray-400 mb-4">Outdoor Precision Striker</p> |
|
|
<p class="text-sm text-gray-500">Proven SUAS system for reconnaissance, UAS interception, and close combat. Deploys with 2-3 drones and control system in a backpack.</p> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/66c844f6148120b0d30c4b25_03daef83ae147195804179527b992e1f.gif" |
|
|
alt="SCORPIO 1000" |
|
|
class="rounded-xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tech-card rounded-2xl p-8"> |
|
|
<div class="grid md:grid-cols-2 gap-6 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-['Orbitron'] font-bold mb-4">SCORPIO 500</h3> |
|
|
<p class="text-gray-400 mb-4">Indoor Precision Operations</p> |
|
|
<p class="text-sm text-gray-500">Combat-proven SUAS for close-range recon and engagement. Each kit includes 3 aircraft with 500g payload capacity.</p> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/66c844f6148120b0d30c4b25_03daef83ae147195804179527b992e1f.gif" |
|
|
alt="SCORPIO 500" |
|
|
class="rounded-xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tech-card rounded-2xl p-8"> |
|
|
<div class="grid md:grid-cols-2 gap-6 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-['Orbitron'] font-bold mb-4">HONEY BADGER</h3> |
|
|
<p class="text-gray-400 mb-4">Combat-proven Outdoor SUAS</p> |
|
|
<p class="text-sm text-gray-500">Multi-mission outdoor UAS dominance platform with 3000g payload capacity for various mission types.</p> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/66c844f6148120b0d30c4b25_03daef83ae147195804179527b992e1f.gif" |
|
|
alt="HONEY BADGER" |
|
|
class="rounded-xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="partners" class="py-20 section-gradient"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl md:text-4xl font-['Orbitron'] font-bold text-center mb-12 glow-text"> |
|
|
TRUSTED BY GLOBAL DEFENSE LEADERS |
|
|
</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/670d394887fed374041cb6c5_image%2024.png" |
|
|
alt="Partner 1" |
|
|
class="h-16 object-contain opacity-80 hover:opacity-100 transition-opacity"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/670d39035b7527bff8e6fd70_image%2025.png" |
|
|
alt="Partner 2" |
|
|
class="h-16 object-contain opacity-80 hover:opacity-100 transition-opacity"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/670d39636d8546cc50d7193d_image%2026.png" |
|
|
alt="Partner 3" |
|
|
class="h-16 object-contain opacity-80 hover:opacity-100 transition-opacity"> |
|
|
<img src="https://cdn.prod.website-files.com/66c338dc0b7091d0f18af0be/670d39536bda66dca6b07992_image%2024-1.png" |
|
|
alt="Partner 4" |
|
|
class="h-16 object-contain opacity-80 hover:opacity-100 transition-opacity"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-4xl md:text-5xl font-['Orbitron'] font-bold mb-6 glow-text"> |
|
|
Embrace Mission Driven Innovation |
|
|
</h2> |
|
|
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto"> |
|
|
Unleash the potential of SkyGuardian's UAS solutions, crafted to address and adapt to the evolving defensive & offensive challenges, for unparalleled mission success. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-lg font-semibold text-lg transition-all hover:scale-105"> |
|
|
REQUEST DEMO |
|
|
</button> |
|
|
<button class="border border-blue-500 text-blue-400 hover:bg-blue-500/10 px-8 py-4 rounded-lg font-semibold text-lg transition-all"> |
|
|
TECHNICAL SPECS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-950 py-12 border-t border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<div class="w-6 h-6 bg-blue-500 rounded flex items-center justify-center"> |
|
|
<i data-feather="shield" class="w-3 h-3"></i> |
|
|
</div> |
|
|
<span class="text-lg font-['Orbitron'] font-bold">SKYGUARDIAN</span> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Systems</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-blue-400 transition-colors">XTENDER</a></li> |
|
|
<li><a href="#" class="hover:text-blue-400 transition-colors">SCORPIO 1000</a></li> |
|
|
<li><a href="#" class="hover:text-blue-400 transition-colors">SCORPIO 500</a></li> |
|
|
<li><a href="#" class="hover:text-blue-400 transition-colors">HONEY BADGER</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Technology</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-blue-400 transition-colors">XOS Platform</a></li> |
|
|
<li><a href="#" class="hover:text-blue-400 transition-colors">AI Integration</li> |
|
|
<li><a href="#" class="hover:text-blue-400 transition-colors">Payload Systems</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Contact</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="mail" class="w-4 h-4"></i> |
|
|
<span>info@skyguardian.ai</span> |
|
|
</li> |
|
|
<li class="flex items-center space-x-2"> |
|
|
<i data-feather="phone" class="w-4 h-4"></i> |
|
|
<span>+1-555-DRONE-AI</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> |
|
|
<p>© 2024 SkyGuardian AI Defense Systems. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0x0a0f29 |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
target.scrollIntoView({ |
|
|
behavior: 'smooth', |
|
|
block: 'start' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
