From 74a9c745b82bed0cbc6435dd9714e6760d4edba2 Mon Sep 17 00:00:00 2001 From: Jon Date: Sun, 14 Jun 2026 20:14:04 +0100 Subject: [PATCH] Add AI drone vision hero to homepage Replaces placeholder image slot with full-bleed SVG showing drone, FOV cone, perspective ground grid, AI detection bounding boxes, surveilled perimeter polygon, and animated alert. Adds left-aligned copy overlay and capabilities strip (Navigation, Tracking, Alerts, Surveillance). Updates .hero CSS to flex-column layout with absolute-positioned SVG layer and frosted-glass caps strip. Co-Authored-By: Claude Sonnet 4.6 --- index.html | 160 +++++++++++++++++++++++++++++++++++++++++++++++------ style.css | 33 +++++------ 2 files changed, 155 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 399b0b6..09d80ba 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,7 @@
+ -
-
Drone development kits · Open source
-

Build. Share. Deploy.

-

Hardware devkits, a fully open-source stack, and integrated consultancy for domestic and industrial solutions.

-
- Buy a devkit · from £1,999 - - - Watch videos - + + + + +
+
+
+
Drone development kits · Open source
+

Build.
Share.
Deploy.

+

Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.

+
+ Buy a devkit · from £1,999 + + + Watch videos + +
+
+ Docs ↗ + GitHub ↗ + YouTube ↗ +
+
-
- Docs ↗ - GitHub ↗ - YouTube ↗ -
-
- + + +
+
+
+
+
+ +
+
+
Navigation
+
Autonomous waypoint flight
+
+
+
+
+ +
+
+
Tracking
+
Lock on & follow targets
+
+
+
+
+ +
+
+
Alerts
+
Real-time event detection
+
+
+
+
+ +
+
+
Surveillance
+
Perimeter monitoring
+
+
diff --git a/style.css b/style.css index 5ae221c..f97b15b 100644 --- a/style.css +++ b/style.css @@ -235,7 +235,9 @@ img { display: block; max-width: 100%; } .hero { position: relative; overflow: hidden; - padding: clamp(56px, 8vw, 104px) 0 0; + min-height: clamp(640px, 90vh, 940px); + display: flex; + flex-direction: column; } .hero-bg { @@ -244,29 +246,20 @@ img { display: block; max-width: 100%; } pointer-events: none; } -.hero-inner { - position: relative; +.drone-vision-bg { + position: absolute; + inset: 0; z-index: 1; - max-width: 1200px; - margin: 0 auto; - padding: 0 32px; - text-align: center; + pointer-events: none; } -.hero h1 { - font-size: clamp(52px, 9vw, 128px); - font-weight: 800; - letter-spacing: -0.045em; - line-height: 0.92; - margin-top: 22px; -} +html.dark .drone-vision-bg svg { filter: invert(1); } -.hero p { - font-size: clamp(18px, 2vw, 22px); - line-height: 1.5; - color: var(--ink-2); - max-width: 660px; - margin: 26px auto 0; +.hero-caps-strip { + background: rgba(255,255,255,0.86); +} +html.dark .hero-caps-strip { + background: rgba(15,15,14,0.88); } .hero-ctas {