316 lines
18 KiB
HTML
316 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bournemouth Technology | Drone Devkits, Open Software & Consultancy</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
|
|
body { font-family: 'Roboto Mono', monospace; }
|
|
.circuit-bg {
|
|
background-color: #22223b;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f7ea' fill-opacity='0.04'%3E%3Cpath d='M22 28v-4h-2v4h-4v2h4v4h2v-4h4v-2zm0-24V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 28v-4H4v4H0v2h4v4h2v-4h4v-2zm0-24V0H4v4H0v2h4v4h2V6h4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
|
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,62,86,0.2); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#1a1b2f] text-gray-200">
|
|
|
|
<!-- Header -->
|
|
<nav class="bg-[#22223b] fixed w-full z-50 top-0 border-b border-green-900">
|
|
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-microchip text-2xl text-green-400"></i>
|
|
<span class="ml-3 text-lg font-bold text-green-300 tracking-wide">Bournemouth Technology</span>
|
|
</div>
|
|
<div class="hidden md:flex space-x-6 text-sm">
|
|
<a href="devkits.html" class="text-gray-300 hover:text-green-400 transition">Devkits</a>
|
|
<a href="opensource.html" class="text-gray-300 hover:text-green-400 transition">Open Source</a>
|
|
<a href="consultancy.html" class="text-gray-300 hover:text-green-400 transition">Consultancy</a>
|
|
<a href="videos.html" class="text-gray-300 hover:text-green-400 transition">Videos</a>
|
|
</div>
|
|
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
|
<i class="fas fa-bars text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div id="mobile-menu" class="hidden md:hidden bg-[#22223b] px-6 pb-4 text-sm">
|
|
<a href="devkits.html" class="block py-2 text-gray-300 hover:text-green-400">Devkits</a>
|
|
<a href="opensource.html" class="block py-2 text-gray-300 hover:text-green-400">Open Source</a>
|
|
<a href="consultancy.html" class="block py-2 text-gray-300 hover:text-green-400">Consultancy</a>
|
|
<a href="videos.html" class="block py-2 text-gray-300 hover:text-green-400">Videos</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="circuit-bg pt-28 pb-16 px-6">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
|
Build. Share. Deploy.
|
|
</h1>
|
|
<p class="text-lg text-green-200 mb-10 max-w-2xl mx-auto">
|
|
Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="videos.html" class="bg-green-400 text-[#22223b] px-7 py-3 rounded-lg font-semibold hover:bg-green-500 transition"><i class="fa-solid fa-circle-play"></i> Videos</a>
|
|
<a href="#docs" class="bg-green-400 text-[#22223b] px-7 py-3 rounded-lg font-semibold hover:bg-green-500 transition"><i class="fa-solid fa-book"></i> Docs</a>
|
|
<a href="#" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition inline-flex items-center justify-center"><i class="fab fa-discord mr-2"></i> Discord </a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Three Divisions -->
|
|
<section class="py-16 px-6 bg-[#23243a]">
|
|
<div class="max-w-6xl mx-auto">
|
|
<!-- <h2 class="text-3xl font-bold text-center text-green-300 mb-12">Three Divisions. One Ecosystem.</h2> -->
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
|
|
<!-- Division 1: Devkits -->
|
|
<div id="devkits" class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
|
<div class="bg-green-600 w-14 h-14 rounded-lg flex items-center justify-center mb-5">
|
|
<i class="fas fa-cube text-white text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-green-300 mb-4">Devkits</h3>
|
|
<p class="text-green-200 mb-6">
|
|
Hardware drone kits with full CAD drawings, 3D-printable models, PCB designs, and community forums to discuss builds and flight mechanics.
|
|
</p>
|
|
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Complete CAD files & schematics</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>3D printable components</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Bill of materials (BOM)</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Community forum for builds & flying</span>
|
|
</li>
|
|
</ul>
|
|
<a href="devkits.html" class="block text-center bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
|
<i class="fa-solid fa-helicopter"></i> Devkits
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Division 2: Open Source Software -->
|
|
<div id="opensource" class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
|
<div class="bg-green-700 w-14 h-14 rounded-lg flex items-center justify-center mb-5">
|
|
<i class="fas fa-code text-white text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-green-300 mb-4">Open Source</h3>
|
|
<p class="text-green-200 mb-6">
|
|
Free virtual offering with open-source flight code, AI inference models, simulation environments, and forums for AI/drone innovation discussions.
|
|
</p>
|
|
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Flight control firmware</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Vision & AI model libraries</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Simulation & testing tools</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Forum for AI & innovation</span>
|
|
</li>
|
|
</ul>
|
|
<a href="#docs" class="block text-center bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
|
<i class="fa-solid fa-book"></i> Documentation
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Division 3: Consultancy -->
|
|
<div id="consultancy" class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
|
<div class="bg-green-800 w-14 h-14 rounded-lg flex items-center justify-center mb-5">
|
|
<i class="fas fa-users text-white text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-green-300 mb-4">Use Cases</h3>
|
|
<p class="text-green-200 mb-6">
|
|
Work with our team to deploy packaged drone solutions for your specific industrial application requirements.
|
|
</p>
|
|
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Custom hardware + software integration</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>End-to-end solution design</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Industry-specific deployments</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-400 mr-2 mt-1"></i>
|
|
<span>Training pilots and support staff</span>
|
|
</li>
|
|
</ul>
|
|
<a href="consultancy.html" class="block text-center bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
|
<i class="fa-solid fa-question"></i> Consultancy
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Industry Applications -->
|
|
<section class="py-16 px-6 bg-[#1a1b2f]">
|
|
<div class="max-w-6xl mx-auto">
|
|
<h2 class="text-3xl font-bold text-center text-green-300 mb-4">Industry Solutions</h2>
|
|
<p class="text-center text-green-200 mb-12 max-w-2xl mx-auto">
|
|
Our consultancy combines devkits and open software to solve real drone challenges across these sectors.
|
|
</p>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Agriculture -->
|
|
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
|
<div class="text-green-400 text-3xl mb-3">
|
|
<i class="fas fa-seedling"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-green-300 mb-3">Agriculture</h3>
|
|
<p class="text-green-200 text-sm mb-4">
|
|
Precision farming, crop monitoring, and autonomous spraying solutions using multispectral sensors and AI analytics.
|
|
</p>
|
|
<p class="text-green-400 text-xs font-semibold">
|
|
→ Hardware: Sensor kits + Flight platforms<br>
|
|
→ Software: Vision models + Data pipelines
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Surveillance -->
|
|
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
|
<div class="text-green-400 text-3xl mb-3">
|
|
<i class="fas fa-eye"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-green-300 mb-3">Surveillance & Security</h3>
|
|
<p class="text-green-200 text-sm mb-4">
|
|
Autonomous perimeter monitoring, real-time alerting, and asset protection with live video streaming.
|
|
</p>
|
|
<p class="text-green-400 text-xs font-semibold">
|
|
→ Hardware: Camera rigs + Telemetry systems<br>
|
|
→ Software: Object detection + Alert frameworks
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Delivery -->
|
|
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
|
<div class="text-green-400 text-3xl mb-3">
|
|
<i class="fas fa-box"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-green-300 mb-3">Delivery & Logistics</h3>
|
|
<p class="text-green-200 text-sm mb-4">
|
|
Last-mile drone delivery, payload management, and autonomous route planning for urban and rural zones.
|
|
</p>
|
|
<p class="text-green-400 text-xs font-semibold">
|
|
→ Hardware: Heavy-lift frames + Drop mechanisms<br>
|
|
→ Software: Navigation stack + Fleet management
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Inspection -->
|
|
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
|
<div class="text-green-400 text-3xl mb-3">
|
|
<i class="fas fa-hard-hat"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-green-300 mb-3">Infrastructure Inspection</h3>
|
|
<p class="text-green-200 text-sm mb-4">
|
|
Automated bridge surveys, power line monitoring, pipeline inspection, and construction tracking.
|
|
</p>
|
|
<p class="text-green-400 text-xs font-semibold">
|
|
→ Hardware: LIDAR modules + Thermal cameras<br>
|
|
→ Software: 3D reconstruction + Anomaly detection
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Emergency -->
|
|
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
|
<div class="text-green-400 text-3xl mb-3">
|
|
<i class="fas fa-ambulance"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-green-300 mb-3">Emergency Response</h3>
|
|
<p class="text-green-200 text-sm mb-4">
|
|
Search and rescue, disaster assessment, fire monitoring, and medical supply delivery in critical situations.
|
|
</p>
|
|
<p class="text-green-400 text-xs font-semibold">
|
|
→ Hardware: Rapid-deploy kits + Payload bays<br>
|
|
→ Software: Mapping tools + Emergency protocols
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Environmental -->
|
|
<div class="bg-[#292b3d] p-6 rounded-lg hover-lift border border-green-700">
|
|
<div class="text-green-400 text-3xl mb-3">
|
|
<i class="fas fa-leaf"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-green-300 mb-3">Environmental Monitoring</h3>
|
|
<p class="text-green-200 text-sm mb-4">
|
|
Wildlife tracking, pollution sampling, forestry management, and climate research data collection.
|
|
</p>
|
|
<p class="text-green-400 text-xs font-semibold">
|
|
→ Hardware: Environmental sensors + Long-range platforms<br>
|
|
→ Software: Time-series analysis + GIS integration
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact CTA -->
|
|
<section id="contact" class="circuit-bg py-16 px-6">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<h2 class="text-3xl font-bold text-green-300 mb-6">Get Started</h2>
|
|
<p class="text-green-200 mb-8">
|
|
Whether you're buying devkits, contributing to open source, or need a full consultancy package — we're here to help.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
|
<a href="videos.html" class="bg-green-400 text-[#22223b] px-7 py-3 rounded-lg font-semibold hover:bg-green-500 transition"><i class="fa-solid fa-circle-play"></i> Videos</a>
|
|
<a href="#docs" class="bg-green-400 text-[#22223b] px-7 py-3 rounded-lg font-semibold hover:bg-green-500 transition"><i class="fa-solid fa-book"></i> Docs</a>
|
|
<a href="#" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition inline-flex items-center justify-center"><i class="fab fa-discord mr-2"></i> Discord </a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-[#22223b] text-gray-500 py-8 px-6 text-center text-sm border-t border-green-900">
|
|
<div class="max-w-6xl mx-auto">
|
|
<p class="mb-2">© 2025 Bournemouth Technology. Hardware, software, and consultancy for drone innovators.</p>
|
|
<p>Open source. Modular. Built by developers, for developers.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); });
|
|
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' });
|
|
mobileMenu.classList.add('hidden');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|