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
582
devkits.html
582
devkits.html
@@ -1,301 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Devkits | Bournemouth Technology</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
|
||||
body { font-family: 'Roboto Mono', monospace; }
|
||||
.circuit-bg {
|
||||
background-color: #22223b;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f7ea' fill-opacity='0.04'%3E%3Cpath d='M22 28v-4h-2v4h-4v2h4v4h2v-4h4v-2zm0-24V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 28v-4H4v4H0v2h4v4h2v-4h4v-2zm0-24V0H4v4H0v2h4v4h2V6h4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,62,86,0.2); }
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Drone Hardware Devkits — Bournemouth Technology</title>
|
||||
<meta name="description" content="Complete hardware drone kits with CAD files, 3D printable components, PCB designs, and community support. From £1,999.">
|
||||
<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-green-400 font-semibold">Devkits</a>
|
||||
<a href="opensource.html" class="text-gray-300 hover:text-green-400 transition">Open Source</a>
|
||||
<a href="consultancy.html" class="text-gray-300 hover:text-green-400 transition">Consultancy</a>
|
||||
<a href="videos.html" class="text-gray-300 hover:text-green-400 transition">Videos</a>
|
||||
<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" class="active">Devkits</a>
|
||||
<a href="opensource.html">Open Source</a>
|
||||
<a href="consultancy.html">Consultancy</a>
|
||||
<a href="videos.html">Videos</a>
|
||||
</nav>
|
||||
<a href="#products" class="btn btn-dark btn-sm">Buy a devkit</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- PAGE HERO -->
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<div class="eyebrow">Hardware</div>
|
||||
<h1>Drone Hardware<br>Devkits.</h1>
|
||||
<p>Complete hardware kits with CAD files, 3D printable components, PCB designs, and community support for building industrial drones.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHAT'S IN THE KIT -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="eyebrow" style="margin-bottom:14px;">Every kit includes</div>
|
||||
<h2 class="section-title" style="margin-top:0;max-width:540px;">Everything you need to build and fly.</h2>
|
||||
<div class="kit-includes">
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
</div>
|
||||
<h4>CAD Files & Drawings</h4>
|
||||
<p>STEP, STL, and DXF formats for full mechanical design access.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
</div>
|
||||
<h4>3D Printable Models</h4>
|
||||
<p>STL files for all custom structural and mounting components.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
|
||||
</div>
|
||||
<h4>PCB Designs & Schematics</h4>
|
||||
<p>Gerber files and full schematic packs for every board.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
|
||||
</div>
|
||||
<h4>Bill of Materials</h4>
|
||||
<p>Full BOM with supplier links and component part numbers.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
|
||||
</div>
|
||||
<h4>Assembly Documentation</h4>
|
||||
<p>Step-by-step assembly guides and wiring diagrams.</p>
|
||||
</div>
|
||||
<div class="kit-item">
|
||||
<div class="kit-item-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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>
|
||||
</div>
|
||||
<h4>Community Forum Access</h4>
|
||||
<p>500+ active builders sharing mods, fixes, and flight tips.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCTS -->
|
||||
<section id="products" class="section section-off">
|
||||
<div class="container">
|
||||
<div class="eyebrow" style="margin-bottom:14px;">Products</div>
|
||||
<h2 class="section-title" style="margin-top:0;">Choose your platform.</h2>
|
||||
<p style="font-size:18px;color:var(--ink-2);margin-top:16px;max-width:540px;line-height:1.55;">Every kit ships with the same full documentation and community access. Pick the hardware that matches your mission.</p>
|
||||
|
||||
<div class="grid-3" style="margin-top:48px;gap:20px;">
|
||||
|
||||
<!-- Base Flight Kit -->
|
||||
<div class="product-card">
|
||||
<div class="product-card-tag">Quadcopter · Developer Platform</div>
|
||||
<h3>Base Flight Kit</h3>
|
||||
<div class="product-price">
|
||||
£1,999
|
||||
<span class="price-sub"> incl. VAT</span>
|
||||
</div>
|
||||
<p class="product-desc">Essential quadcopter platform for developers. The fastest path from CAD to first flight.</p>
|
||||
<ul class="product-features">
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
400mm wheelbase frame design
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Flight controller with STM32 MCU
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Power distribution board layout
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
ESC integration guides
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
2.4GHz radio antenna
|
||||
</li>
|
||||
</ul>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-dark btn-md" style="margin-top:auto;">Buy now</a>
|
||||
</div>
|
||||
|
||||
<!-- Edge Compute Kit (featured) -->
|
||||
<div class="product-card featured">
|
||||
<div class="product-card-tag">Quadcopter · AI Platform</div>
|
||||
<h3>Edge Compute Kit</h3>
|
||||
<div class="product-price">
|
||||
£4,999
|
||||
<span class="price-sub" style="color:rgba(255,255,255,0.5);"> incl. VAT</span>
|
||||
</div>
|
||||
<p class="product-desc">Advanced platform with onboard Linux computer integration for real-time AI inference.</p>
|
||||
<ul class="product-features">
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Raspberry Pi 4/5 Compute Module
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Dual camera mounting points
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Extended flight time (up to 25 min)
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
High-bandwidth telemetry
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Thermal management system
|
||||
</li>
|
||||
</ul>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-white btn-md" style="margin-top:auto;">Buy now</a>
|
||||
</div>
|
||||
|
||||
<!-- Heavy Lift -->
|
||||
<div class="product-card">
|
||||
<div class="product-card-tag">Hexacopter · Industrial</div>
|
||||
<h3>Heavy Lift Platform</h3>
|
||||
<div class="product-price" style="font-size:20px;color:var(--ink-3);">Contact for pricing</div>
|
||||
<p class="product-desc">High-payload hexacopter design for delivery, survey equipment, and heavy sensor packages.</p>
|
||||
<ul class="product-features">
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Hex frame with redundant motors
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
High-torque motor selection guide
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Payload release mechanism
|
||||
</li>
|
||||
<li>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
Custom consultancy included
|
||||
</li>
|
||||
</ul>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-outline btn-md" style="margin-top:auto;">Get in touch</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Sensor Expansion Pack -->
|
||||
<div class="product-card" style="margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;">
|
||||
<div>
|
||||
<div class="product-card-tag">Modular Add-on</div>
|
||||
<h3 style="font-size:22px;margin-top:8px;">Sensor Expansion Pack</h3>
|
||||
<p class="product-desc" style="margin-top:10px;">Modular sensor integration kit compatible with all platforms. Add multispectral, thermal, LiDAR, or custom sensors to any devkit.</p>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:flex-end;gap:20px;flex-wrap:wrap;">
|
||||
<div class="product-price" style="font-size:18px;color:var(--ink-3);">Contact for pricing</div>
|
||||
<a href="mailto:bournemouthtech@protonmail.com" class="btn btn-outline btn-md">Get in touch</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- COMMUNITY STATS -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="two-col" style="align-items:start;">
|
||||
<div>
|
||||
<div class="eyebrow">Community</div>
|
||||
<h2 class="section-title">Built by builders.</h2>
|
||||
<p class="section-body">Every kit plugs you into an active community of developers, pilots, and engineers sharing mods, tips, and builds.</p>
|
||||
<div style="margin-top:34px;">
|
||||
<a href="opensource.html" class="btn btn-dark btn-md">Join the community</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-strip" style="flex-direction:column;border:none;padding:0;gap:28px;">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">500+</div>
|
||||
<div class="stat-label">Active Builders</div>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<i class="fas fa-bars text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-[#22223b] px-6 pb-4 text-sm">
|
||||
<a href="devkits.html" class="block py-2 text-green-400 font-semibold">Devkits</a>
|
||||
<a href="opensource.html" class="block py-2 text-gray-300 hover:text-green-400">Open Source</a>
|
||||
<a href="consultancy.html" class="block py-2 text-gray-300 hover:text-green-400">Consultancy</a>
|
||||
<a href="videos.html" class="block py-2 text-gray-300 hover:text-green-400">Videos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="circuit-bg pt-28 pb-16 px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-green-300 mb-6 tracking-wide">
|
||||
Drone Hardware Devkits
|
||||
</h1>
|
||||
<p class="text-lg text-green-200 max-w-2xl mx-auto">
|
||||
Complete hardware kits with CAD files, 3D printable components, PCB designs, and community support for building industrial drones.
|
||||
</p>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">1,200+</div>
|
||||
<div class="stat-label">Forum Topics</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What's Included -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-8 text-center">What's Included in Every Kit</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-12">
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-drafting-compass text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">CAD Files & Drawings</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Full mechanical drawings in STEP, STL, and DXF formats. Modify, adapt, and manufacture your own frames and components.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-cube text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">3D Printable Models</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Ready-to-print STL files for mounts, enclosures, and structural parts. Print locally or send to fabrication services.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-microchip text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">PCB Designs & Schematics</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Gerber files, schematics, and layout files for all electronic boards. Order from any PCB manufacturer worldwide.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-list text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">Bill of Materials (BOM)</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Complete parts lists with supplier links, part numbers, and estimated costs. Source components easily and affordably.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-book text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">Assembly Documentation</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Step-by-step build guides, wiring diagrams, and troubleshooting tips to get your drone airborne.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg border border-green-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<i class="fas fa-comments text-green-400 text-2xl mr-3"></i>
|
||||
<h3 class="text-xl font-bold text-green-300">Community Forum Access</h3>
|
||||
</div>
|
||||
<p class="text-green-200">Join our active forums to discuss builds, share flight logs, troubleshoot issues, and collaborate with other builders.</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">50+</div>
|
||||
<div class="stat-label">Mods & Extensions</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Available Kits -->
|
||||
<section class="py-16 px-6 bg-[#1a1b2f]">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-10 text-center">Available Devkits</h2>
|
||||
|
||||
<div class="space-y-8">
|
||||
|
||||
<!-- Kit 1 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<div class="bg-green-600 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-helicopter text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Base Flight Kit</h3>
|
||||
<div class="text-3xl font-bold text-green-400 mb-4">£1999</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-green-200 mb-4">
|
||||
Essential quadcopter platform for developers. Includes flight controller PCB, frame designs, motor mounts, and basic sensor integration points.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>400mm wheelbase frame design</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Flight controller with STM32 MCU</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Power distribution board layout</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>ESC integration guides</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>2.4GHz Radio Antenna</li>
|
||||
</ul>
|
||||
<!--<a href="#contact" class="inline-block bg-green-500 text-[#22223b] px-6 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
Purchase Kit
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CTA BAND -->
|
||||
<section class="cta-band section-off">
|
||||
<div class="container">
|
||||
<h2>Ready to build?</h2>
|
||||
<p>Pick your platform, fork the firmware, and start flying.</p>
|
||||
<div class="cta-band-btns">
|
||||
<a href="#products" class="btn btn-dark btn-lg">See all kits</a>
|
||||
<a href="consultancy.html" class="btn btn-outline btn-lg">Need something custom?</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Kit 2 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<div class="bg-green-700 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-server text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Edge Compute Kit</h3>
|
||||
<div class="text-3xl font-bold text-green-400 mb-4">£4999</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-green-200 mb-4">
|
||||
Advanced platform with onboard Linux computer integration. Designed for AI inference, computer vision, and real-time data processing applications.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Raspberry Pi 4/5 Compute Module</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Dual camera mounting points</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Extended flight time design (up to 25min)</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>High-bandwidth telemetry interface</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Thermal management system</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kit 3 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<div class="bg-green-800 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-box-open text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Heavy Lift Platform</h3>
|
||||
<div class="text-3xl font-bold text-green-400 mb-4">£ CONTACT</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-green-200 mb-4">
|
||||
High-payload hexacopter design for delivery, survey equipment, and heavy sensor packages. Built for reliability and endurance.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>650mm hexacopter frame</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Up to 3kg payload capacity</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Redundant power system</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Servo-actuated release mechanism</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>GPS + RTK integration ready</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kit 4 -->
|
||||
<div class="bg-[#292b3d] p-8 rounded-xl hover-lift border border-green-600">
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<div class="bg-green-500 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-plug text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-green-300 mb-2">Sensor Expansion Pack</h3>
|
||||
<div class="text-3xl font-bold text-green-400 mb-4">£ CONTACT</div>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-green-200 mb-4">
|
||||
Modular sensor integration kit compatible with all our platforms. Includes mounting hardware and interface boards for popular sensors.
|
||||
</p>
|
||||
<ul class="space-y-2 text-green-200 text-sm mb-6">
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>LIDAR mounting and interface PCB</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Multispectral camera mounts</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Thermal camera integration</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Environmental sensor array (temp, humidity, gas)</li>
|
||||
<li><i class="fas fa-check text-green-400 mr-2"></i>Modular gimbal designs</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 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>
|
||||
</section>
|
||||
|
||||
<!-- Community & Support -->
|
||||
<section class="py-16 px-6 bg-[#23243a]">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Join the Builder Community</h2>
|
||||
<p class="text-green-200 mb-8 max-w-2xl mx-auto">
|
||||
Every devkit purchase includes lifetime access to our forums where you can share builds, get technical support, and collaborate on improvements.
|
||||
</p>
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-10">
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg">
|
||||
<div class="text-4xl text-green-400 mb-2">500+</div>
|
||||
<div class="text-green-200">Active Builders</div>
|
||||
</div>
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg">
|
||||
<div class="text-4xl text-green-400 mb-2">1200+</div>
|
||||
<div class="text-green-200">Forum Topics</div>
|
||||
</div>
|
||||
<div class="bg-[#292b3d] p-6 rounded-lg">
|
||||
<div class="text-4xl text-green-400 mb-2">50+</div>
|
||||
<div class="text-green-200">Mods & Extensions</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="inline-block bg-green-500 text-[#22223b] px-8 py-3 rounded-lg font-bold hover:bg-green-400 transition">
|
||||
<i class="fas fa-comments mr-2"></i> Visit Forums
|
||||
</a>
|
||||
<div>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="contact" class="circuit-bg py-16 px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-green-300 mb-6">Ready to Build?</h2>
|
||||
<p class="text-green-200 mb-8">
|
||||
Purchase a devkit or contact us for bulk orders and educational discounts.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="mailto:sales@bournemouth-tech.co.uk" class="bg-green-400 text-[#22223b] px-8 py-3 rounded-lg font-semibold hover:bg-green-500 transition">
|
||||
<i class="fas fa-envelope mr-2"></i> Contact
|
||||
</a>
|
||||
<a href="index.html" class="border-2 border-green-400 text-green-400 px-8 py-3 rounded-lg font-semibold hover:bg-green-400 hover:text-[#22223b] transition">
|
||||
<i class="fas fa-home mr-2"></i> Home
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</footer>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user