Redesign site with comma.ai-inspired monochrome theme

Complete rebuild: white/black palette, Hanken Grotesk + JetBrains Mono
typography, shared style.css, and five separate pages (index, devkits,
opensource, consultancy, videos). Real product content, pricing, and
video elements with replaceable src paths throughout. Removes old
v1/v2/lazy video experiments.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-06-13 17:53:58 +01:00
parent d04223d2c0
commit c275258a65
9 changed files with 2501 additions and 4122 deletions

View File

@@ -1,373 +1,341 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Source Software | 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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Open Source Software Bournemouth Technology</title>
<meta name="description" content="Free, open-source drone software stack. Flight controllers, AI models, simulation tools, and more. MIT licensed.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</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-gray-300 hover:text-green-400 transition">Devkits</a>
<a href="opensource.html" class="text-green-400 font-semibold">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>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-inner">
<a href="index.html" class="nav-logo">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
<rect x="6" y="6" width="12" height="12" rx="1.5"/>
<rect x="9.5" y="9.5" width="5" height="5" fill="currentColor" stroke="none"/>
<path d="M9 6V2.5M15 6V2.5M9 21.5V18M15 21.5V18M6 9H2.5M6 15H2.5M21.5 9H18M21.5 15H18"/>
</svg>
<span>Bournemouth Technology</span>
</a>
<div class="nav-right">
<nav class="nav-links" aria-label="Main">
<a href="devkits.html">Devkits</a>
<a href="opensource.html" class="active">Open Source</a>
<a href="consultancy.html">Consultancy</a>
<a href="videos.html">Videos</a>
</nav>
<a href="devkits.html" class="btn btn-dark btn-sm">Buy a devkit</a>
</div>
</div>
</nav>
<!-- PAGE HERO (dark) -->
<section class="section-dark" style="padding:clamp(64px,8vw,100px) 0 clamp(56px,7vw,88px);border-bottom:1px solid rgba(255,255,255,0.1);">
<div class="container">
<div class="eyebrow">Software · Free forever</div>
<h1 style="font-size:clamp(44px,7vw,88px);font-weight:800;letter-spacing:-0.04em;line-height:0.95;margin-top:14px;max-width:820px;">Open Source<br>Software.</h1>
<p style="font-size:clamp(17px,1.8vw,21px);line-height:1.55;color:rgba(255,255,255,0.66);max-width:620px;margin-top:22px;">Free, open-source drone software stack. Flight controllers, AI models, simulation tools, and more.</p>
<div style="margin-top:32px;display:flex;flex-wrap:wrap;gap:13px;">
<a href="#repos" class="btn btn-white btn-md">Explore projects</a>
<a href="#community" class="btn btn-ghost-dark btn-md">Join Discord</a>
</div>
</div>
</section>
<!-- WHY OPEN SOURCE -->
<section class="section">
<div class="container">
<div class="eyebrow" style="margin-bottom:14px;">Why open source?</div>
<h2 class="section-title" style="margin-top:0;">Built on trust,<br>not lock-in.</h2>
<div class="grid-3" style="margin-top:48px;">
<div class="why-card">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="margin-bottom:16px;" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
<h3>No Lock-In</h3>
<p>Full source code access. Modify, extend, and deploy without vendor restrictions.</p>
</div>
<div class="why-card">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="margin-bottom:16px;" aria-hidden="true"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
<h3>Community Driven</h3>
<p>Contributions from developers worldwide. Better code, faster innovation.</p>
</div>
<div class="why-card">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="margin-bottom:16px;" aria-hidden="true"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
<h3>Learn &amp; Build</h3>
<p>Educational friendly. Perfect for research, teaching, and experimentation.</p>
</div>
</div>
</div>
</section>
<!-- IMPACT STATS -->
<section class="section-off" style="padding:0;">
<div class="container">
<div class="stat-strip">
<div class="stat-item">
<div class="stat-num">10k+</div>
<div class="stat-label">GitHub Stars</div>
</div>
<div class="stat-item">
<div class="stat-num">300+</div>
<div class="stat-label">Contributors</div>
</div>
<div class="stat-item">
<div class="stat-num">50+</div>
<div class="stat-label">Countries</div>
</div>
<div class="stat-item">
<div class="stat-num">5k+</div>
<div class="stat-label">Deployments</div>
</div>
</div>
</div>
</section>
<!-- REPOS -->
<section id="repos" class="section">
<div class="container">
<div class="eyebrow" style="margin-bottom:14px;">Projects</div>
<h2 class="section-title" style="margin-top:0;">Six repos. One stack.</h2>
<p style="font-size:17px;color:var(--ink-2);margin-top:16px;max-width:560px;line-height:1.55;">Clone our repos, join the community, and start developing your drone applications today.</p>
<div class="grid-3" style="margin-top:48px;">
<div class="repo-card">
<div class="repo-card-top">
<h3>Flight Core</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
2.4k
</div>
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<p class="repo-desc">Real-time flight controller firmware for ARM microcontrollers. PID loops, sensor fusion, and MAVLink support.</p>
<div class="repo-meta">
<span class="repo-lang">C / C++</span>
<span class="repo-license">MIT</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</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-green-400 font-semibold">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">
Open Source Software
</h1>
<p class="text-lg text-green-200 max-w-2xl mx-auto">
Free, open-source drone software stack. Flight controllers, AI models, simulation tools, and more. Join our community of innovators.
</p>
<div class="repo-card">
<div class="repo-card-top">
<h3>Vision Suite</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
1.8k
</div>
</div>
<p class="repo-desc">Computer vision and AI inference toolkit. YOLO models, object detection, and semantic segmentation optimised for edge hardware.</p>
<div class="repo-meta">
<span class="repo-lang">Python</span>
<span class="repo-license">Apache 2.0</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
</section>
<!-- Philosophy -->
<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">Why Open Source?</h2>
<p class="text-green-200 mb-8 text-lg">
We believe drone technology should be accessible, transparent, and community-driven. All our software is released under permissive licenses—use it commercially, fork it, contribute back, or learn from it.
</p>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
<i class="fas fa-unlock text-green-400 text-3xl mb-3"></i>
<h3 class="text-xl font-bold text-green-300 mb-2">No Lock-In</h3>
<p class="text-green-200 text-sm">Full source code access. Modify, extend, and deploy without vendor restrictions.</p>
</div>
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
<i class="fas fa-users text-green-400 text-3xl mb-3"></i>
<h3 class="text-xl font-bold text-green-300 mb-2">Community Driven</h3>
<p class="text-green-200 text-sm">Contributions from developers worldwide. Better code, faster innovation.</p>
</div>
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
<i class="fas fa-graduation-cap text-green-400 text-3xl mb-3"></i>
<h3 class="text-xl font-bold text-green-300 mb-2">Learn & Build</h3>
<p class="text-green-200 text-sm">Educational friendly. Perfect for research, teaching, and experimentation.</p>
</div>
<div class="repo-card">
<div class="repo-card-top">
<h3>Ground Control Station</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
3.1k
</div>
</div>
<p class="repo-desc">Cross-platform mission planning software. Waypoint editor, live telemetry, and geofencing tools in the browser.</p>
<div class="repo-meta">
<span class="repo-lang">JavaScript / React</span>
<span class="repo-license">GPLv3</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
</section>
<!-- Software Projects -->
<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">Our Software Projects</h2>
<div class="space-y-8">
<!-- Project 1 -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
<div class="flex items-start justify-between mb-4">
<div>
<h3 class="text-2xl font-bold text-green-300 mb-2">Flight Core</h3>
<div class="flex items-center gap-4 text-sm">
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> MIT License</span>
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 2.4k stars</span>
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> C/C++</span>
</div>
</div>
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
<i class="fab fa-github mr-1"></i> GitHub
</a>
</div>
<p class="text-green-200 mb-4">
Real-time flight controller firmware for ARM Cortex-M microcontrollers. Supports quadcopters, hexacopters, and fixed-wing platforms. Includes PID tuning, sensor fusion, and failsafe systems.
</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">STM32</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">IMU Fusion</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">MAVLink</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">FreeRTOS</span>
</div>
</div>
<!-- Project 2 -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
<div class="flex items-start justify-between mb-4">
<div>
<h3 class="text-2xl font-bold text-green-300 mb-2">Vision Suite</h3>
<div class="flex items-center gap-4 text-sm">
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> Apache 2.0</span>
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 1.8k stars</span>
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> Python</span>
</div>
</div>
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
<i class="fab fa-github mr-1"></i> GitHub
</a>
</div>
<p class="text-green-200 mb-4">
Computer vision and AI inference toolkit for drones. Pre-trained models for object detection, tracking, semantic segmentation, and pose estimation. Optimized for edge devices like Jetson and Raspberry Pi.
</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">TensorFlow</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">PyTorch</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">OpenCV</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">YOLO</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">ONNX</span>
</div>
</div>
<!-- Project 3 -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
<div class="flex items-start justify-between mb-4">
<div>
<h3 class="text-2xl font-bold text-green-300 mb-2">Ground Control Station</h3>
<div class="flex items-center gap-4 text-sm">
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> GPLv3</span>
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 3.1k stars</span>
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> JavaScript/React</span>
</div>
</div>
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
<i class="fab fa-github mr-1"></i> GitHub
</a>
</div>
<p class="text-green-200 mb-4">
Cross-platform ground control software with mission planning, telemetry visualization, and real-time video streaming. Works with MAVLink-compatible flight controllers.
</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Electron</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">WebRTC</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Mapbox</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">MAVLink</span>
</div>
</div>
<!-- Project 4 -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
<div class="flex items-start justify-between mb-4">
<div>
<h3 class="text-2xl font-bold text-green-300 mb-2">ROS2 Middleware</h3>
<div class="flex items-center gap-4 text-sm">
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> BSD-3</span>
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 890 stars</span>
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> C++/Python</span>
</div>
</div>
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
<i class="fab fa-github mr-1"></i> GitHub
</a>
</div>
<p class="text-green-200 mb-4">
ROS2 packages for drone control, navigation, and sensor integration. Includes launch files, message definitions, and example workflows for rapid prototyping.
</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">ROS2 Humble</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Navigation2</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Gazebo</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">PX4</span>
</div>
</div>
<!-- Project 5 -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
<div class="flex items-start justify-between mb-4">
<div>
<h3 class="text-2xl font-bold text-green-300 mb-2">DroneKit API</h3>
<div class="flex items-center gap-4 text-sm">
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> MIT License</span>
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 1.2k stars</span>
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> Python</span>
</div>
</div>
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
<i class="fab fa-github mr-1"></i> GitHub
</a>
</div>
<p class="text-green-200 mb-4">
High-level Python API for controlling drones. Simple scripting interface for autonomous missions, waypoint navigation, and real-time telemetry. Perfect for rapid prototyping.
</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Python 3.8+</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Asyncio</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">REST API</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">WebSocket</span>
</div>
</div>
<!-- Project 6 -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
<div class="flex items-start justify-between mb-4">
<div>
<h3 class="text-2xl font-bold text-green-300 mb-2">SimDrone</h3>
<div class="flex items-center gap-4 text-sm">
<span class="text-green-400"><i class="fas fa-code-branch mr-1"></i> Apache 2.0</span>
<span class="text-gray-400"><i class="fab fa-github mr-1"></i> 650 stars</span>
<span class="text-gray-400"><i class="fas fa-code mr-1"></i> C++/Python</span>
</div>
</div>
<a href="#" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-500 transition">
<i class="fab fa-github mr-1"></i> GitHub
</a>
</div>
<p class="text-green-200 mb-4">
Physics-based drone simulation environment for testing and validation. Simulate sensors, weather conditions, and failure scenarios before real-world deployment.
</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Gazebo</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Unity3D</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">SITL</span>
<span class="bg-green-900 text-green-300 px-3 py-1 rounded text-xs">Physics Engine</span>
</div>
</div>
<div class="repo-card">
<div class="repo-card-top">
<h3>ROS2 Middleware</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
890
</div>
</div>
<p class="repo-desc">ROS2 packages for drone control. Nodes, topics, and services covering navigation, sensors, and actuator control.</p>
<div class="repo-meta">
<span class="repo-lang">C++ / Python</span>
<span class="repo-license">BSD-3</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
</section>
<!-- Community -->
<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-10 text-center">Join the Community</h2>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="bg-[#292b3d] p-8 rounded-xl border border-green-700">
<div class="flex items-center mb-4">
<i class="fas fa-comments text-green-400 text-3xl mr-4"></i>
<h3 class="text-2xl font-bold text-green-300">Discussion Forums</h3>
</div>
<p class="text-green-200 mb-6">
Discuss AI models, share flight algorithms, troubleshoot issues, and collaborate on new features. Active community of 800+ developers.
</p>
<a href="#" class="inline-block bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
Join Forums
</a>
</div>
<div class="bg-[#292b3d] p-8 rounded-xl border border-green-700">
<div class="flex items-center mb-4">
<i class="fab fa-discord text-green-400 text-3xl mr-4"></i>
<h3 class="text-2xl font-bold text-green-300">Discord Server</h3>
</div>
<p class="text-green-200 mb-6">
Real-time chat with developers, maintainers, and contributors. Get help, share projects, and participate in code reviews.
</p>
<a href="#" class="inline-block bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
Join Discord
</a>
</div>
<div class="repo-card">
<div class="repo-card-top">
<h3>DroneKit API</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
1.2k
</div>
</div>
<p class="repo-desc">High-level Python scripting interface for autonomous missions. Simple API, comprehensive docs, and example scripts.</p>
<div class="repo-meta">
<span class="repo-lang">Python</span>
<span class="repo-license">MIT</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
<div class="bg-[#292b3d] p-8 rounded-xl border border-green-600 text-center">
<h3 class="text-2xl font-bold text-green-300 mb-4">Want to Contribute?</h3>
<p class="text-green-200 mb-6 max-w-2xl mx-auto">
We welcome pull requests, bug reports, and feature suggestions. Check our contribution guidelines on GitHub and join our monthly contributor calls.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
<i class="fab fa-github mr-2"></i> Contribution Guide
</a>
<a href="#" class="border-2 border-green-500 text-green-400 px-6 py-3 rounded-lg font-bold hover:bg-green-500 hover:text-[#22223b] transition">
<i class="fas fa-calendar mr-2"></i> Monthly Calls
</a>
</div>
<div class="repo-card">
<div class="repo-card-top">
<h3>SimDrone</h3>
<div class="repo-stars">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
650
</div>
</div>
<p class="repo-desc">Physics-based simulation environment. Test firmware and autonomy code against realistic aerodynamics before maiden flight.</p>
<div class="repo-meta">
<span class="repo-lang">C++ / Python</span>
<span class="repo-license">Apache 2.0</span>
</div>
<a href="#" class="btn-text" style="font-size:13px;margin-top:8px;">View on GitHub ↗</a>
</div>
</section>
<!-- Stats -->
<section class="py-16 px-6 bg-[#1a1b2f]">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">Community Impact</h2>
<div class="grid md:grid-cols-4 gap-6">
<div class="text-center">
<div class="text-4xl font-bold text-green-400 mb-2">10k+</div>
<div class="text-green-200">GitHub Stars</div>
</div>
</div>
</section>
<!-- QUICKSTART + COMMUNITY -->
<section id="community" class="section section-dark">
<div class="container">
<div class="two-col">
<div>
<div class="eyebrow">Get started</div>
<h2 class="section-title">Up and running in minutes.</h2>
<p class="section-body">Clone a repo, spin up the simulator, and start flying — no hardware required to begin.</p>
<div style="margin-top:34px;display:flex;flex-wrap:wrap;gap:13px;">
<a href="#" class="btn btn-white btn-md">Read the docs</a>
<a href="#" class="btn btn-ghost-dark btn-md">View on GitHub</a>
</div>
<div style="margin-top:48px;border-top:1px solid rgba(255,255,255,0.12);padding-top:40px;">
<div class="eyebrow" style="margin-bottom:20px;">Community</div>
<div style="display:flex;flex-direction:column;gap:16px;">
<div style="display:flex;align-items:center;gap:14px;">
<div style="width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="1.8" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-green-400 mb-2">300+</div>
<div class="text-green-200">Contributors</div>
<div>
<div style="font-size:15px;font-weight:600;color:#fff;">Discussion Forums</div>
<div style="font-size:13px;color:rgba(255,255,255,0.5);margin-top:2px;">800+ active developers</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-green-400 mb-2">50+</div>
<div class="text-green-200">Countries</div>
</div>
<div style="display:flex;align-items:center;gap:14px;">
<div style="width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="1.8" aria-hidden="true"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-green-400 mb-2">5k+</div>
<div class="text-green-200">Deployments</div>
<div>
<div style="font-size:15px;font-weight:600;color:#fff;">Discord Server</div>
<div style="font-size:13px;color:rgba(255,255,255,0.5);margin-top:2px;">Real-time help and discussion</div>
</div>
</div>
<div style="display:flex;align-items:center;gap:14px;">
<div style="width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div>
<div style="font-size:15px;font-weight:600;color:#fff;">Monthly Contributor Calls</div>
<div style="font-size:13px;color:rgba(255,255,255,0.5);margin-top:2px;">Roadmap, demos, and Q&amp;A</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section 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">Start Building with Open Source</h2>
<p class="text-green-200 mb-8">
Clone our repos, join the community, and start developing your drone applications today.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-green-400 text-[#22223b] px-8 py-3 rounded-lg font-semibold hover:bg-green-500 transition">
<i class="fab fa-github mr-2"></i> Browse Repositories
</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> Back to Home
</a>
</div>
<div class="terminal">
<div class="terminal-header">
<span class="terminal-dot"></span>
<span class="terminal-dot"></span>
<span class="terminal-dot"></span>
<span class="terminal-title">flightos — quickstart</span>
</div>
<div class="terminal-body" style="line-height:1.9;">
<div><span class="t-prompt">$ </span>git clone github.com/bournemouth-tech/flightos</div>
<div><span class="t-prompt">$ </span>cd flightos &amp;&amp; make sim</div>
<div><span class="t-arrow"></span> simulator ready · models loaded</div>
<span class="t-comment"># MIT licensed · fork it, fly it, ship it</span>
<br>
<div style="margin-top:20px;"><span class="t-prompt">$ </span>git clone github.com/bournemouth-tech/vision-suite</div>
<div><span class="t-prompt">$ </span>pip install -r requirements.txt</div>
<div><span class="t-prompt">$ </span>python detect.py --model yolo-drone-v3</div>
<div><span class="t-arrow"></span> inference engine ready · 15fps</div>
<span class="t-comment"># Apache 2.0 · modify freely</span>
</div>
</div>
</section>
</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>
<!-- CTA -->
<section class="cta-band">
<div class="container">
<h2>Fork it. Fly it. Ship it.</h2>
<p>All our software is free forever, MIT or Apache licensed. No strings attached.</p>
<div class="cta-band-btns">
<a href="#" class="btn btn-dark btn-lg">View on GitHub</a>
<a href="devkits.html" class="btn btn-outline btn-lg">Get the hardware</a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<div class="footer-logo">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
<rect x="6" y="6" width="12" height="12" rx="1.5"/>
<rect x="9.5" y="9.5" width="5" height="5" fill="currentColor" stroke="none"/>
<path d="M9 6V2.5M15 6V2.5M9 21.5V18M15 21.5V18M6 9H2.5M6 15H2.5M21.5 9H18M21.5 15H18"/>
</svg>
<span>Bournemouth Technology</span>
</div>
<p class="footer-tagline">Hardware, software, and consultancy for drone innovators.<br>Open source. Modular. Built by developers, for developers.</p>
</div>
</footer>
<div>
<div class="footer-col-label">Product</div>
<div class="footer-col-links">
<a href="devkits.html">Devkits</a>
<a href="opensource.html">Open Source</a>
<a href="videos.html">Videos</a>
<a href="consultancy.html">Consultancy</a>
</div>
</div>
<div>
<div class="footer-col-label">Resources</div>
<div class="footer-col-links">
<a href="opensource.html">Documentation</a>
<a href="opensource.html">GitHub</a>
<a href="devkits.html">Bill of materials</a>
<a href="opensource.html">Community forum</a>
</div>
</div>
<div>
<div class="footer-col-label">Connect</div>
<div class="footer-col-links">
<a href="opensource.html">Discord</a>
<a href="consultancy.html">Contact</a>
<a href="videos.html">YouTube</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2025 Bournemouth Technology</span>
<span>MIT licensed software · Made in Bournemouth, UK</span>
</div>
</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>