jon/bmthTech-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign site with comma.ai-inspired monochrome theme

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

610
index.html
View File

@@ -1,315 +1,329 @@
<!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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bournemouth Technology — Drone Devkits &amp; Open Source</title>
<meta name="description" content="Hardware drone devkits, open-source flight software, and integrated consultancy for domestic and industrial solutions.">
<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">
<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>
<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">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>
<!-- HERO -->
<header class="hero">
<div class="hero-bg" aria-hidden="true">
<div style="position:absolute;top:40px;left:-30px;width:210px;opacity:0.055;transform:rotate(14deg);">
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
<rect x="41" y="41" width="18" height="18" rx="4"/>
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
</svg>
</div>
<div style="position:absolute;top:150px;right:-40px;width:320px;opacity:0.045;transform:rotate(-9deg);">
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
<rect x="41" y="41" width="18" height="18" rx="4"/>
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
</svg>
</div>
<div style="position:absolute;top:90px;left:46%;width:120px;opacity:0.05;transform:rotate(26deg);">
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
<rect x="41" y="41" width="18" height="18" rx="4"/>
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
</svg>
</div>
<div style="position:absolute;bottom:35%;left:8%;width:150px;opacity:0.05;transform:rotate(-20deg);">
<svg viewBox="0 0 100 100" fill="none" stroke="#0A0A0A" stroke-width="2.5" stroke-linecap="round">
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
<rect x="41" y="41" width="18" height="18" rx="4"/>
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
</svg>
</div>
</div>
<div class="hero-inner">
<div class="eyebrow">Drone development kits · Open source</div>
<h1>Build. Share. Deploy.</h1>
<p>Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.</p>
<div class="hero-ctas">
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit · from £1,999</a>
<a href="videos.html" class="btn btn-outline btn-lg">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
Watch videos
</a>
</div>
<div class="hero-links">
<a href="opensource.html">Docs ↗</a>
<a href="opensource.html">GitHub ↗</a>
<a href="opensource.html">Discord ↗</a>
</div>
<div class="hero-image-wrap">
<div class="img-slot" style="height:clamp(340px,50vw,620px);border-radius:24px;" role="img" aria-label="Hero product photo">
Drop your hero drone / devkit photo here
</div>
</div>
</div>
</header>
<!-- DEVKITS TEASER -->
<section class="section">
<div class="container">
<div class="two-col">
<div>
<div class="eyebrow">Hardware</div>
<h2 class="section-title">Devkits.</h2>
<p class="section-body">Hardware drone kits with full CAD drawings, 3D-printable models, PCB designs, and community forums to discuss builds and flight mechanics.</p>
<ul class="feature-list" style="margin-top:34px;">
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
Complete CAD files &amp; schematics
</li>
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
3D-printable components
</li>
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
Bill of materials (BOM)
</li>
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
Community forum for builds &amp; flying
</li>
</ul>
<div class="price-block">
<div>
<div class="price-from">From</div>
<div class="price-big">£1,999</div>
</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>
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit</a>
</div>
</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 class="img-slot" style="height:clamp(360px,42vw,520px);" role="img" aria-label="Devkit photo">
Drop a devkit / PCB photo here
</div>
</nav>
</div>
</div>
</section>
<!-- 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>
<!-- OPEN SOURCE TEASER -->
<section class="section section-dark">
<div class="container">
<div class="two-col">
<div>
<div class="eyebrow">Software · Free forever</div>
<h2 class="section-title">Open Source.</h2>
<p class="section-body">Free virtual offering with open-source flight code, AI inference models, simulation environments, and forums for AI/drone innovation discussions.</p>
<ul class="feature-list on-dark" style="margin-top:34px;">
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
Flight control firmware
</li>
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
Vision &amp; AI model libraries
</li>
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
Simulation &amp; testing tools
</li>
<li>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
Forum for AI &amp; innovation
</li>
</ul>
<div style="margin-top:34px;display:flex;flex-wrap:wrap;gap:13px;">
<a href="opensource.html" class="btn btn-white btn-md">Read the docs</a>
<a href="opensource.html" class="btn btn-ghost-dark btn-md">View on GitHub</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 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">
<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>
</div>
</div>
</section>
</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>
<!-- INDUSTRY USE CASES -->
<section class="section">
<div class="container">
<div style="max-width:640px;margin-bottom:52px;">
<div class="eyebrow">Consultancy · Use cases</div>
<h2 class="section-title">Industry solutions.</h2>
<p class="section-body">Work with our team to deploy packaged drone solutions for your specific industrial application requirements.</p>
</div>
<div class="industry-grid">
<div class="industry-cell">
<h3>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Agriculture
</h3>
<p>Precision farming, crop monitoring, autonomous spraying with multispectral sensors and AI analytics.</p>
</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 class="industry-cell">
<h3>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
Surveillance &amp; Security
</h3>
<p>Autonomous perimeter monitoring, real-time alerting, asset protection with live video streaming.</p>
</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 class="industry-cell">
<h3>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
Delivery &amp; Logistics
</h3>
<p>Last-mile delivery, payload management, autonomous route planning for urban and rural zones.</p>
</div>
</footer>
<div class="industry-cell">
<h3>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
Infrastructure Inspection
</h3>
<p>Bridge surveys, power line monitoring, pipeline inspection, and construction site tracking.</p>
</div>
<div class="industry-cell">
<h3>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
Emergency Response
</h3>
<p>Search &amp; rescue, disaster assessment, fire monitoring, and medical supply delivery.</p>
</div>
<div class="industry-cell">
<h3>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 2a10 10 0 100 20A10 10 0 0012 2z"/><path d="M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20"/></svg>
Environmental Monitoring
</h3>
<p>Wildlife tracking, pollution sampling, forestry management, and climate research data collection.</p>
</div>
</div>
<div style="margin-top:32px;text-align:center;">
<a href="consultancy.html" class="btn-text">Learn about consultancy ↗</a>
</div>
</div>
</section>
<!-- CTA BAND -->
<section class="cta-band section-off">
<div class="container">
<h2>Start building today.</h2>
<p>Buy a kit, fork the code, or bring us your hardest deployment.</p>
<div class="cta-band-btns">
<a href="devkits.html" class="btn btn-dark btn-lg">Buy a devkit · from £1,999</a>
<a href="opensource.html" class="btn btn-outline btn-lg">Explore the source</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>
<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>