Add drone silhouette background to all page heroes

Mirrors the index.html hero treatment across devkits, consultancy,
videos (dark strokes) and opensource (white strokes on dark bg).
.page-hero gets position:relative/overflow:hidden to contain them.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-06-13 18:40:20 +01:00
parent 8adb24db95
commit e1271a8b30
5 changed files with 167 additions and 1 deletions

View File

@@ -37,6 +37,47 @@
<!-- PAGE HERO -->
<section class="page-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:30px;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:30px;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>
<div class="container">
<div class="eyebrow">Consultancy · Use cases</div>
<h1>Drone Integration<br>Consultancy.</h1>