302 lines
18 KiB
HTML
302 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>Devkits | Bournemouth Technology</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">
|
|
<a href="index.html" 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>
|
|
</a>
|
|
<div class="hidden md:flex space-x-6 text-sm">
|
|
<a href="devkits.html" class="text-green-400 font-semibold">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-green-400 font-semibold">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-5xl mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
|
Drone Hardware Devkits
|
|
</h1>
|
|
<p class="text-lg text-green-200 max-w-2xl mx-auto">
|
|
Complete hardware kits with CAD files, 3D printable components, PCB designs, and community support for building industrial drones.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What's Included -->
|
|
<section class="py-16 px-6 bg-[#23243a]">
|
|
<div class="max-w-5xl mx-auto">
|
|
<h2 class="text-3xl font-bold text-green-300 mb-8 text-center">What's Included in Every Kit</h2>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 mb-12">
|
|
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
|
<div class="flex items-center mb-4">
|
|
<i class="fas fa-drafting-compass text-green-400 text-2xl mr-3"></i>
|
|
<h3 class="text-xl font-bold text-green-300">CAD Files & Drawings</h3>
|
|
</div>
|
|
<p class="text-green-200">Full mechanical drawings in STEP, STL, and DXF formats. Modify, adapt, and manufacture your own frames and components.</p>
|
|
</div>
|
|
|
|
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
|
<div class="flex items-center mb-4">
|
|
<i class="fas fa-cube text-green-400 text-2xl mr-3"></i>
|
|
<h3 class="text-xl font-bold text-green-300">3D Printable Models</h3>
|
|
</div>
|
|
<p class="text-green-200">Ready-to-print STL files for mounts, enclosures, and structural parts. Print locally or send to fabrication services.</p>
|
|
</div>
|
|
|
|
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
|
<div class="flex items-center mb-4">
|
|
<i class="fas fa-microchip text-green-400 text-2xl mr-3"></i>
|
|
<h3 class="text-xl font-bold text-green-300">PCB Designs & Schematics</h3>
|
|
</div>
|
|
<p class="text-green-200">Gerber files, schematics, and layout files for all electronic boards. Order from any PCB manufacturer worldwide.</p>
|
|
</div>
|
|
|
|
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
|
<div class="flex items-center mb-4">
|
|
<i class="fas fa-list text-green-400 text-2xl mr-3"></i>
|
|
<h3 class="text-xl font-bold text-green-300">Bill of Materials (BOM)</h3>
|
|
</div>
|
|
<p class="text-green-200">Complete parts lists with supplier links, part numbers, and estimated costs. Source components easily and affordably.</p>
|
|
</div>
|
|
|
|
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
|
<div class="flex items-center mb-4">
|
|
<i class="fas fa-book text-green-400 text-2xl mr-3"></i>
|
|
<h3 class="text-xl font-bold text-green-300">Assembly Documentation</h3>
|
|
</div>
|
|
<p class="text-green-200">Step-by-step build guides, wiring diagrams, and troubleshooting tips to get your drone airborne.</p>
|
|
</div>
|
|
|
|
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
|
<div class="flex items-center mb-4">
|
|
<i class="fas fa-comments text-green-400 text-2xl mr-3"></i>
|
|
<h3 class="text-xl font-bold text-green-300">Community Forum Access</h3>
|
|
</div>
|
|
<p class="text-green-200">Join our active forums to discuss builds, share flight logs, troubleshoot issues, and collaborate with other builders.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Available Kits -->
|
|
<section class="py-16 px-6 bg-[#1a1b2f]">
|
|
<div class="max-w-5xl mx-auto">
|
|
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">Available Devkits</h2>
|
|
|
|
<div class="space-y-8">
|
|
|
|
<!-- Kit 1 -->
|
|
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<div>
|
|
<div class="bg-green-600 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
|
<i class="fas fa-helicopter text-white text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-green-300 mb-2">Base Flight Kit</h3>
|
|
<div class="text-3xl font-bold text-green-400 mb-4">£1999</div>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<p class="text-green-200 mb-4">
|
|
Essential quadcopter platform for developers. Includes flight controller PCB, frame designs, motor mounts, and basic sensor integration points.
|
|
</p>
|
|
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>400mm wheelbase frame design</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Flight controller with STM32 MCU</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Power distribution board layout</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>ESC integration guides</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>2.4GHz Radio Antenna</li>
|
|
</ul>
|
|
<!--<a href="#contact" class="inline-block bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
|
Purchase Kit
|
|
</a> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kit 2 -->
|
|
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<div>
|
|
<div class="bg-green-700 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
|
<i class="fas fa-server text-white text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-green-300 mb-2">Edge Compute Kit</h3>
|
|
<div class="text-3xl font-bold text-green-400 mb-4">£4999</div>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<p class="text-green-200 mb-4">
|
|
Advanced platform with onboard Linux computer integration. Designed for AI inference, computer vision, and real-time data processing applications.
|
|
</p>
|
|
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Raspberry Pi 4/5 Compute Module</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Dual camera mounting points</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Extended flight time design (up to 25min)</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>High-bandwidth telemetry interface</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Thermal management system</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kit 3 -->
|
|
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<div>
|
|
<div class="bg-green-800 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
|
<i class="fas fa-box-open text-white text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-green-300 mb-2">Heavy Lift Platform</h3>
|
|
<div class="text-3xl font-bold text-green-400 mb-4">£ CONTACT</div>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<p class="text-green-200 mb-4">
|
|
High-payload hexacopter design for delivery, survey equipment, and heavy sensor packages. Built for reliability and endurance.
|
|
</p>
|
|
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>650mm hexacopter frame</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Up to 3kg payload capacity</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Redundant power system</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Servo-actuated release mechanism</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>GPS + RTK integration ready</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kit 4 -->
|
|
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<div>
|
|
<div class="bg-green-500 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
|
<i class="fas fa-plug text-white text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-green-300 mb-2">Sensor Expansion Pack</h3>
|
|
<div class="text-3xl font-bold text-green-400 mb-4">£ CONTACT</div>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<p class="text-green-200 mb-4">
|
|
Modular sensor integration kit compatible with all our platforms. Includes mounting hardware and interface boards for popular sensors.
|
|
</p>
|
|
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>LIDAR mounting and interface PCB</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Multispectral camera mounts</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Thermal camera integration</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Environmental sensor array (temp, humidity, gas)</li>
|
|
<li><i class="fas fa-check text-green-400 mr-2"></i>Modular gimbal designs</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Community & Support -->
|
|
<section class="py-16 px-6 bg-[#23243a]">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h2 class="text-3xl font-bold text-green-300 mb-6">Join the Builder Community</h2>
|
|
<p class="text-green-200 mb-8 max-w-2xl mx-auto">
|
|
Every devkit purchase includes lifetime access to our forums where you can share builds, get technical support, and collaborate on improvements.
|
|
</p>
|
|
<div class="grid md:grid-cols-3 gap-6 mb-10">
|
|
<div class="bg-[#292b3d] p-6 rounded-lg">
|
|
<div class="text-4xl text-green-400 mb-2">500+</div>
|
|
<div class="text-green-200">Active Builders</div>
|
|
</div>
|
|
<div class="bg-[#292b3d] p-6 rounded-lg">
|
|
<div class="text-4xl text-green-400 mb-2">1200+</div>
|
|
<div class="text-green-200">Forum Topics</div>
|
|
</div>
|
|
<div class="bg-[#292b3d] p-6 rounded-lg">
|
|
<div class="text-4xl text-green-400 mb-2">50+</div>
|
|
<div class="text-green-200">Mods & Extensions</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="inline-block bg-green-500 text-[#22223b] px-8 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
|
<i class="fas fa-comments mr-2"></i> Visit Forums
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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">Ready to Build?</h2>
|
|
<p class="text-green-200 mb-8">
|
|
Purchase a devkit or contact us for bulk orders and educational discounts.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="mailto:sales@bournemouth-tech.co.uk" class="bg-green-400 text-[#22223b] px-8 py-3 rounded-lg font-semibold hover:bg-green-500 transition">
|
|
<i class="fas fa-envelope mr-2"></i> Contact
|
|
</a>
|
|
<a href="index.html" 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">
|
|
<i class="fas fa-home mr-2"></i> Home
|
|
</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>
|