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,471 +1,251 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consultancy | 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>Drone Integration Consultancy Bournemouth Technology</title>
<meta name="description" content="We package our devkits and open-source software into custom solutions for your industry. End-to-end deployment, training, and support.">
<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-gray-300 hover:text-green-400 transition">Open Source</a>
<a href="consultancy.html" class="text-green-400 font-semibold">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>
<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" class="active">Consultancy</a>
<a href="videos.html">Videos</a>
</nav>
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-dark btn-sm">Get in touch</a>
</div>
</div>
</nav>
<!-- PAGE HERO -->
<section class="page-hero">
<div class="container">
<div class="eyebrow">Consultancy · Use cases</div>
<h1>Drone Integration<br>Consultancy.</h1>
<p>We package our devkits and open-source software into custom solutions for your industry. End-to-end deployment, training, and support.</p>
<div style="margin-top:32px;display:flex;flex-wrap:wrap;gap:13px;">
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-dark btn-lg">Talk to our team</a>
<a href="#industries" class="btn btn-outline btn-lg">See use cases</a>
</div>
</div>
</section>
<!-- PROCESS -->
<section class="section">
<div class="container">
<div class="eyebrow" style="margin-bottom:14px;">How we work</div>
<h2 class="section-title" style="margin-top:0;margin-bottom:40px;">Four steps to deployment.</h2>
<div class="steps">
<div class="step">
<div class="step-num">01 · Discovery</div>
<h3>Discovery</h3>
<p>We learn about your use case, requirements, and constraints. No two deployments are the same — we start by listening.</p>
</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-green-400 font-semibold">Consultancy</a>
<a href="videos.html" class="block py-2 text-gray-300 hover:text-green-400">Videos</a>
<div class="step">
<div class="step-num">02 · Design</div>
<h3>Design</h3>
<p>We architect a solution combining hardware, software, and workflows tailored to your environment and team.</p>
</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 Integration Consultancy
</h1>
<p class="text-lg text-green-200 max-w-2xl mx-auto">
We package our devkits and open-source software into custom solutions for your industry. End-to-end deployment, training, and support.
</p>
</div>
<div class="step">
<div class="step-num">03 · Deploy</div>
<h3>Deploy</h3>
<p>We build, test, and deliver the integrated system to your site. Rigorous QA at every stage before handoff.</p>
</div>
</section>
<!-- How It Works -->
<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">How We Work</h2>
<div class="grid md:grid-cols-4 gap-6 mb-12">
<div class="text-center">
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-2xl font-bold text-white">1</span>
</div>
<h3 class="text-lg font-bold text-green-300 mb-2">Discovery</h3>
<p class="text-green-200 text-sm">We learn about your use case, requirements, and constraints.</p>
</div>
<div class="text-center">
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-2xl font-bold text-white">2</span>
</div>
<h3 class="text-lg font-bold text-green-300 mb-2">Design</h3>
<p class="text-green-200 text-sm">We architect a solution combining hardware, software, and workflows.</p>
</div>
<div class="text-center">
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-2xl font-bold text-white">3</span>
</div>
<h3 class="text-lg font-bold text-green-300 mb-2">Deploy</h3>
<p class="text-green-200 text-sm">We build, test, and deliver the integrated system to your site.</p>
</div>
<div class="text-center">
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-2xl font-bold text-white">4</span>
</div>
<h3 class="text-lg font-bold text-green-300 mb-2">Support</h3>
<p class="text-green-200 text-sm">Ongoing training, maintenance, and feature development.</p>
</div>
</div>
<div class="bg-[#292b3d] p-8 rounded-xl border border-green-600">
<h3 class="text-2xl font-bold text-green-300 mb-4">Our Approach</h3>
<p class="text-green-200 mb-6">
We don't sell off-the-shelf products. Every consultancy engagement is custom-tailored, combining our modular devkits with our open-source software stack to solve your specific drone challenge. You get a complete solution: hardware, firmware, AI models, ground control software, and operator training.
</p>
<div class="grid md:grid-cols-2 gap-4">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 text-xl mr-3 mt-1"></i>
<div>
<h4 class="font-bold text-green-300 mb-1">Custom Hardware Integration</h4>
<p class="text-green-200 text-sm">Select and modify devkits to match your payload, range, and flight time needs.</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 text-xl mr-3 mt-1"></i>
<div>
<h4 class="font-bold text-green-300 mb-1">Tailored Software Stack</h4>
<p class="text-green-200 text-sm">Configure our open-source tools for your data pipeline and operational workflows.</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 text-xl mr-3 mt-1"></i>
<div>
<h4 class="font-bold text-green-300 mb-1">AI Model Training</h4>
<p class="text-green-200 text-sm">Fine-tune computer vision models on your specific detection or classification tasks.</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-400 text-xl mr-3 mt-1"></i>
<div>
<h4 class="font-bold text-green-300 mb-1">Operator Training</h4>
<p class="text-green-200 text-sm">On-site or remote training for your team to operate, maintain, and extend the system.</p>
</div>
</div>
</div>
</div>
<div class="step">
<div class="step-num">04 · Support</div>
<h3>Support</h3>
<p>Ongoing training, maintenance, and feature development. We stay involved as your mission evolves.</p>
</div>
</section>
</div>
</div>
</section>
<!-- Industry Solutions -->
<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-4 text-center">Industry Solutions</h2>
<p class="text-center text-green-200 mb-10 max-w-2xl mx-auto">
We've deployed drone solutions across these sectors, combining hardware and software for real-world impact.
</p>
<div class="space-y-6">
<!-- Agriculture -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
<div class="flex items-start gap-6">
<div class="bg-green-600 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-seedling text-white text-2xl"></i>
</div>
<div class="flex-grow">
<h3 class="text-2xl font-bold text-green-300 mb-3">Agriculture</h3>
<p class="text-green-200 mb-4">
Precision farming solutions for crop monitoring, health assessment, and targeted spraying. Our systems analyze multispectral imagery to detect stress, disease, and irrigation needs.
</p>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Heavy lift platform with 25min flight time</li>
<li>• Multispectral camera sensor kit</li>
<li>• RTK GPS for centimeter-accurate positioning</li>
<li>• Optional spray mechanism attachment</li>
</ul>
</div>
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Vision Suite with NDVI processing</li>
<li>• Custom AI models for crop disease detection</li>
<li>• Mission planning software with field mapping</li>
<li>• Cloud data pipeline for analysis reports</li>
</ul>
</div>
</div>
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
Request Consultation
</a>
</div>
</div>
</div>
<!-- Surveillance -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
<div class="flex items-start gap-6">
<div class="bg-green-700 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-eye text-white text-2xl"></i>
</div>
<div class="flex-grow">
<h3 class="text-2xl font-bold text-green-300 mb-3">Surveillance & Security</h3>
<p class="text-green-200 mb-4">
Autonomous perimeter monitoring with real-time alerting. Object detection, person tracking, and intrusion detection with live video streaming to security operations centers.
</p>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Edge compute kit with Jetson Nano</li>
<li>• Dual camera system (RGB + thermal)</li>
<li>• Extended battery for 30min patrol routes</li>
<li>• 4G/5G telemetry for remote operation</li>
</ul>
</div>
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• YOLO-based person/vehicle detection</li>
<li>• Real-time video streaming (WebRTC)</li>
<li>• Automated alert generation system</li>
<li>• Ground control with replay and analytics</li>
</ul>
</div>
</div>
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
Request Consultation
</a>
</div>
</div>
</div>
<!-- Delivery -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
<div class="flex items-start gap-6">
<div class="bg-green-800 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-box text-white text-2xl"></i>
</div>
<div class="flex-grow">
<h3 class="text-2xl font-bold text-green-300 mb-3">Delivery & Logistics</h3>
<p class="text-green-200 mb-4">
Last-mile autonomous delivery systems with precise drop-off capabilities. Route optimization, package tracking, and automated return-to-base functionality.
</p>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Heavy lift hexacopter (3kg payload)</li>
<li>• Servo-actuated package release mechanism</li>
<li>• Redundant power and GPS systems</li>
<li>• Weather-resistant enclosures</li>
</ul>
</div>
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Autonomous waypoint navigation</li>
<li>• Landing zone detection with vision</li>
<li>• Fleet management dashboard</li>
<li>• Real-time tracking and ETA updates</li>
</ul>
</div>
</div>
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
Request Consultation
</a>
</div>
</div>
</div>
<!-- Infrastructure -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
<div class="flex items-start gap-6">
<div class="bg-green-600 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-hard-hat text-white text-2xl"></i>
</div>
<div class="flex-grow">
<h3 class="text-2xl font-bold text-green-300 mb-3">Infrastructure Inspection</h3>
<p class="text-green-200 mb-4">
Automated inspection of bridges, power lines, pipelines, and construction sites. High-resolution imaging, 3D reconstruction, and anomaly detection for predictive maintenance.
</p>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Base flight kit with stabilized gimbal</li>
<li>• LIDAR sensor for 3D mapping</li>
<li>• High-resolution RGB and thermal cameras</li>
<li>• Obstacle avoidance sensors</li>
</ul>
</div>
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Photogrammetry and 3D reconstruction</li>
<li>• Crack/defect detection AI models</li>
<li>• Automated flight path generation</li>
<li>• Inspection report generation tools</li>
</ul>
</div>
</div>
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
Request Consultation
</a>
</div>
</div>
</div>
<!-- Emergency -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
<div class="flex items-start gap-6">
<div class="bg-green-500 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-ambulance text-white text-2xl"></i>
</div>
<div class="flex-grow">
<h3 class="text-2xl font-bold text-green-300 mb-3">Emergency Response</h3>
<p class="text-green-200 mb-4">
Rapid-deployment systems for search and rescue, disaster assessment, and emergency supply delivery. Thermal imaging for person detection and real-time situation awareness.
</p>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Quick-deploy base flight platform</li>
<li>• Thermal camera for person detection</li>
<li>• Loudspeaker and lighting modules</li>
<li>• Emergency payload release system</li>
</ul>
</div>
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Person detection in thermal imagery</li>
<li>• Real-time mapping and coordinate sharing</li>
<li>• Multi-drone coordination system</li>
<li>• Emergency protocol automation</li>
</ul>
</div>
</div>
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
Request Consultation
</a>
</div>
</div>
</div>
<!-- Environmental -->
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-700">
<div class="flex items-start gap-6">
<div class="bg-green-700 w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-leaf text-white text-2xl"></i>
</div>
<div class="flex-grow">
<h3 class="text-2xl font-bold text-green-300 mb-3">Environmental Monitoring</h3>
<p class="text-green-200 mb-4">
Long-range environmental data collection for wildlife tracking, pollution monitoring, forestry management, and climate research. Time-series analysis and GIS integration.
</p>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Hardware Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Extended-range platform (50min flight)</li>
<li>• Environmental sensor array (temp, humidity, gas)</li>
<li>• High-zoom camera for wildlife observation</li>
<li>• Data logging and storage modules</li>
</ul>
</div>
<div>
<h4 class="text-green-400 font-semibold mb-2 text-sm">Software Components:</h4>
<ul class="text-green-200 text-sm space-y-1">
<li>• Time-series sensor data analysis</li>
<li>• Wildlife detection and tracking models</li>
<li>• GIS integration for spatial mapping</li>
<li>• Long-term data aggregation and reporting</li>
</ul>
</div>
</div>
<a href="mailto:bournemouthtech@protonmail.com" class="inline-block bg-green-500 text-[#22223b] px-6 py-2 rounded-lg text-sm font-bold hover:bg-green-400 transition">
Request Consultation
</a>
</div>
</div>
</div>
</div>
<!-- WHAT WE DELIVER -->
<section class="section section-off">
<div class="container">
<div class="two-col">
<div>
<div class="eyebrow">Services</div>
<h2 class="section-title">End-to-end, not off-the-shelf.</h2>
<p class="section-body">We deliver complete systems — from circuit board to operator dashboard — built on our open-source foundation so you own the result.</p>
<ul class="feature-list on-off" 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>
Custom hardware + software integration
</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>
End-to-end solution design
</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>
AI model training for your use case
</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>
Industry-specific deployments
</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>
Operator and support staff training
</li>
</ul>
</div>
</section>
<!-- Why Choose Our Consultancy -->
<section class="py-16 px-6 bg-[#23243a]">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">Why Choose Us</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
<i class="fas fa-cubes text-green-400 text-2xl mb-3"></i>
<h3 class="text-lg font-bold text-green-300 mb-2">Modular & Flexible</h3>
<p class="text-green-200 text-sm">We don't force proprietary systems. Our solutions are modular, allowing you to swap components and scale as needed.</p>
</div>
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
<i class="fas fa-code-branch text-green-400 text-2xl mb-3"></i>
<h3 class="text-lg font-bold text-green-300 mb-2">Open Source Foundation</h3>
<p class="text-green-200 text-sm">Built on open-source software you can inspect, modify, and own forever. No licensing fees or vendor lock-in.</p>
</div>
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
<i class="fas fa-tachometer-alt text-green-400 text-2xl mb-3"></i>
<h3 class="text-lg font-bold text-green-300 mb-2">Rapid Deployment</h3>
<p class="text-green-200 text-sm">From discovery to deployment in weeks, not months. Our pre-built modules accelerate time-to-value.</p>
</div>
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
<i class="fas fa-hands-helping text-green-400 text-2xl mb-3"></i>
<h3 class="text-lg font-bold text-green-300 mb-2">Ongoing Partnership</h3>
<p class="text-green-200 text-sm">We don't disappear after deployment. Ongoing support, feature development, and system optimization.</p>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:16px;">
<div style="padding:24px;border:1px solid var(--rule);border-radius:16px;">
<div style="font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;">Modular &amp; Flexible</div>
<p style="font-size:15px;color:var(--ink-2);line-height:1.6;">Every solution is built from our modular devkit and software stack — components swap in or out as your mission changes.</p>
</div>
<div style="padding:24px;border:1px solid var(--rule);border-radius:16px;">
<div style="font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;">Open-source foundation</div>
<p style="font-size:15px;color:var(--ink-2);line-height:1.6;">No vendor lock-in. You own the deployed system. Full source access means your team can maintain and extend it.</p>
</div>
<div style="padding:24px;border:1px solid var(--rule);border-radius:16px;">
<div style="font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;">Rapid deployment</div>
<p style="font-size:15px;color:var(--ink-2);line-height:1.6;">Our pre-integrated hardware and software stack dramatically reduces time from brief to first operational flight.</p>
</div>
<div style="padding:24px;border:1px solid var(--rule);border-radius:16px;">
<div style="font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;">Ongoing partnership</div>
<p style="font-size:15px;color:var(--ink-2);line-height:1.6;">We don't disappear after delivery. Retainers for maintenance, new features, and fleet scaling are available.</p>
</div>
</div>
</section>
</div>
</div>
</section>
<!-- Contact Form -->
<section id="contact" class="circuit-bg py-16 px-6">
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl font-bold text-green-300 mb-6 text-center">Start Your Project</h2>
<p class="text-green-200 mb-8 text-center">
Tell us about your drone challenge. We'll schedule a discovery call to explore how we can help.
</p>
<div class="bg-[#292b3d] p-8 rounded-xl border border-green-600">
<form class="space-y-4">
<div class="grid md:grid-cols-2 gap-4">
<input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none" required>
<input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none" required>
</div>
<input type="text" placeholder="Company / Organization" class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none">
<select class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none" required>
<option value="">Select Industry</option>
<option value="agriculture">Agriculture</option>
<option value="surveillance">Surveillance & Security</option>
<option value="delivery">Delivery & Logistics</option>
<option value="inspection">Infrastructure Inspection</option>
<option value="emergency">Emergency Response</option>
<option value="environmental">Environmental Monitoring</option>
<option value="other">Other</option>
</select>
<textarea placeholder="Describe your project and requirements..." rows="5" class="w-full px-4 py-3 rounded-lg bg-[#1a1b2f] text-green-200 border border-green-700 focus:border-green-500 outline-none" required></textarea>
<button type="submit" class="w-full bg-green-500 text-[#22223b] px-8 py-4 rounded-lg font-bold hover:bg-green-400 transition">
Request Consultation
</button>
</form>
</div>
<!-- INDUSTRIES -->
<section id="industries" class="section">
<div class="container">
<div class="eyebrow" style="margin-bottom:14px;">Industries</div>
<h2 class="section-title" style="margin-top:0;">Where we deploy.</h2>
<p style="font-size:17px;color:var(--ink-2);margin-top:16px;max-width:540px;line-height:1.55;">Real solutions across six sectors — from precision agriculture to emergency response.</p>
<div class="text-center mt-8">
<a href="index.html" class="text-green-400 hover:text-green-300 transition">
<i class="fas fa-home mr-2"></i> Back to Home
</a>
</div>
<div class="industry-grid" style="margin-top:48px;">
<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>
<!-- 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"><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, and asset protection with live video streaming.</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="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, and autonomous route planning for urban and rural zones.</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"><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>
</section>
<!-- CTA / CONTACT -->
<section class="section section-dark">
<div class="container" style="max-width:700px;text-align:center;">
<div class="eyebrow">Contact</div>
<h2 class="section-title" style="font-size:clamp(38px,6vw,72px);margin-top:14px;">Bring us your hardest deployment.</h2>
<p style="font-size:clamp(17px,1.6vw,20px);color:rgba(255,255,255,0.66);margin-top:22px;line-height:1.55;">Tell us your use case and we'll scope a solution. No commitment required — we'll reply within one working day.</p>
<div style="margin-top:32px;display:flex;flex-wrap:wrap;gap:13px;justify-content:center;">
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-white btn-lg">bournemouthtech@protonmail.com</a>
</div>
<div style="margin-top:18px;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,0.4);">We typically respond within one working day.</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>