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 <noreply@anthropic.com>
This commit is contained in:
Jon
160
index.html
160
index.html
@@ -45,6 +45,7 @@
|
||||
|
||||
<!-- HERO -->
|
||||
<header class="hero">
|
||||
<!-- Plan-view drone silhouettes (z-index 0) -->
|
||||
<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">
|
||||
@@ -100,25 +101,148 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-inner">
|
||||
<div class="eyebrow">Drone development kits · Open source</div>
|
||||
<h1>Build. Share. Deploy.</h1>
|
||||
<p>Hardware devkits, a fully open-source stack, 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>
|
||||
<!-- AI vision drone graphic (z-index 1) -->
|
||||
<div class="drone-vision-bg" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 860" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%;display:block;">
|
||||
<defs>
|
||||
<radialGradient id="rotorG" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#0A0A0A" stop-opacity="0.16"/><stop offset="60%" stop-color="#0A0A0A" stop-opacity="0.06"/><stop offset="100%" stop-color="#0A0A0A" stop-opacity="0"/></radialGradient>
|
||||
<linearGradient id="armG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3a3a3a"/><stop offset="100%" stop-color="#101010"/></linearGradient>
|
||||
<linearGradient id="bodyTopG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4a4a4a"/><stop offset="100%" stop-color="#202020"/></linearGradient>
|
||||
<linearGradient id="bodySideG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1c1c1c"/><stop offset="100%" stop-color="#0a0a0a"/></linearGradient>
|
||||
<linearGradient id="chipHi" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6f6f6f"/><stop offset="100%" stop-color="#343434"/></linearGradient>
|
||||
<radialGradient id="gimbalG" cx="38%" cy="30%" r="72%"><stop offset="0%" stop-color="#6a6a6a"/><stop offset="55%" stop-color="#2a2a2a"/><stop offset="100%" stop-color="#0a0a0a"/></radialGradient>
|
||||
<radialGradient id="camHalo" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#0A0A0A" stop-opacity="0.12"/><stop offset="100%" stop-color="#0A0A0A" stop-opacity="0"/></radialGradient>
|
||||
<linearGradient id="coneG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0A0A0A" stop-opacity="0.06"/><stop offset="100%" stop-color="#0A0A0A" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<!-- Vision cone -->
|
||||
<g>
|
||||
<polygon points="900,250 40,836 1760,836" fill="url(#coneG)"/>
|
||||
<polygon points="760,498 1040,498 1760,836 40,836" fill="#0A0A0A" fill-opacity="0.018"/>
|
||||
<line x1="900" y1="250" x2="40" y2="836" stroke="#0A0A0A" stroke-width="1.2" stroke-opacity="0.32" stroke-dasharray="2 5"/>
|
||||
<line x1="900" y1="250" x2="1760" y2="836" stroke="#0A0A0A" stroke-width="1.2" stroke-opacity="0.32" stroke-dasharray="2 5"/>
|
||||
</g>
|
||||
<!-- Perspective grid -->
|
||||
<g><line x1="760.0" y1="498.0" x2="40.0" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="783.3" y1="498.0" x2="183.3" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="806.6" y1="498.0" x2="326.6" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="830.0" y1="498.0" x2="469.8" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="853.3" y1="498.0" x2="613.1" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="876.6" y1="498.0" x2="756.4" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="899.9" y1="498.0" x2="899.7" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="923.3" y1="498.0" x2="1042.9" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="946.6" y1="498.0" x2="1186.2" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="969.9" y1="498.0" x2="1329.5" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="993.2" y1="498.0" x2="1472.8" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="1016.6" y1="498.0" x2="1616.0" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="1039.9" y1="498.0" x2="1759.3" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.055"/><line x1="760.0" y1="498.0" x2="1040.0" y2="498.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.032"/><line x1="670.0" y1="540.3" x2="1130.0" y2="540.3" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.042"/><line x1="580.0" y1="582.5" x2="1220.0" y2="582.5" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.052"/><line x1="490.0" y1="624.8" x2="1310.0" y2="624.8" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.062"/><line x1="400.0" y1="667.0" x2="1400.0" y2="667.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.072"/><line x1="310.0" y1="709.3" x2="1490.0" y2="709.3" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.082"/><line x1="220.0" y1="751.5" x2="1580.0" y2="751.5" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.092"/><line x1="130.0" y1="793.8" x2="1670.0" y2="793.8" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.102"/><line x1="40.0" y1="836.0" x2="1760.0" y2="836.0" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.112"/></g>
|
||||
<!-- Surveilled perimeter -->
|
||||
<g><polygon points="650.1,565.6 900.0,545.3 1168.6,572.4 1429.1,721.1 900.0,761.6 383.2,721.1" fill="#0A0A0A" fill-opacity="0.012" stroke="#0A0A0A" stroke-width="1.3" stroke-opacity="0.4" stroke-dasharray="7 5"/><circle cx="650.1" cy="565.6" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="900.0" cy="545.3" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="1168.6" cy="572.4" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="1429.1" cy="721.1" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="900.0" cy="761.6" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><circle cx="383.2" cy="721.1" r="2.6" fill="#0A0A0A" fill-opacity="0.55"/><rect x="822.0" y="525.3" width="156" height="15" fill="#fff" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.4"/><text x="900.0" y="536.3" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="9.5" fill="#0A0A0A">SURVEILLED PERIMETER</text></g>
|
||||
<!-- AI detection bounding boxes -->
|
||||
<g>
|
||||
<g><path d="M 551.0 645.5 L 551.0 631.2" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 551.0 631.2 L 565.2 631.2" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 594.0 631.2 L 608.2 631.2" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 608.2 631.2 L 608.2 645.5" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 551.0 661.5 L 551.0 675.7" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 551.0 675.7 L 565.2 675.7" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 594.0 675.7 L 608.2 675.7" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 608.2 675.7 L 608.2 661.5" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="551.0" y="616.2" width="79" height="13" fill="#0A0A0A"/><text x="556.0" y="626.2" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">vehicle 0.98</text></g>
|
||||
<g><path d="M 705.8 690.0 L 705.8 678.3" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 705.8 678.3 L 717.5 678.3" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 730.7 678.3 L 742.4 678.3" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 742.4 678.3 L 742.4 690.0" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 705.8 725.1 L 705.8 736.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 705.8 736.8 L 717.5 736.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 730.7 736.8 L 742.4 736.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 742.4 736.8 L 742.4 725.1" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="705.8" y="663.3" width="74" height="13" fill="#0A0A0A"/><text x="710.8" y="673.3" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">person 0.95</text></g>
|
||||
<g><path d="M 941.5 606.8 L 941.5 597.6" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 941.5 597.6 L 950.7 597.6" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 961.1 597.6 L 970.3 597.6" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 970.3 597.6 L 970.3 606.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 941.5 632.5 L 941.5 641.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 941.5 641.8 L 950.7 641.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 961.1 641.8 L 970.3 641.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 970.3 641.8 L 970.3 632.5" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="941.5" y="582.6" width="74" height="13" fill="#0A0A0A"/><text x="946.5" y="592.6" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">person 0.92</text></g>
|
||||
<g><path d="M 1143.4 692.2 L 1143.4 676.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1143.4 676.8 L 1158.7 676.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1190.4 676.8 L 1205.8 676.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1205.8 676.8 L 1205.8 692.2" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1143.4 709.4 L 1143.4 724.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1143.4 724.8 L 1158.7 724.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1190.4 724.8 L 1205.8 724.8" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1205.8 724.8 L 1205.8 709.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="1143.4" y="661.8" width="79" height="13" fill="#0A0A0A"/><text x="1148.4" y="671.8" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">vehicle 0.96</text></g>
|
||||
<g><path d="M 1232.4 640.4 L 1232.4 629.0" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1232.4 629.0 L 1243.7 629.0" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1268.9 629.0 L 1280.2 629.0" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1280.2 629.0 L 1280.2 640.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1232.4 653.1 L 1232.4 664.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1232.4 664.4 L 1243.7 664.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1268.9 664.4 L 1280.2 664.4" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><path d="M 1280.2 664.4 L 1280.2 653.1" stroke="#0A0A0A" stroke-width="1.7" stroke-opacity="0.78" fill="none"/><rect x="1232.4" y="614.0" width="74" height="13" fill="#0A0A0A"/><text x="1237.4" y="624.0" font-family="'JetBrains Mono',monospace" font-size="8.5" fill="#fff">object 0.90</text></g>
|
||||
</g>
|
||||
<!-- Alert pulse -->
|
||||
<g>
|
||||
<circle cx="1200.0" cy="667.0" r="6" fill="none" stroke="#0A0A0A" stroke-opacity="0.5" stroke-width="1.4">
|
||||
<animate attributeName="r" values="6;17;6" dur="2.6s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-opacity" values="0.5;0;0.5" dur="2.6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1200.0" cy="667.0" r="9" fill="#0A0A0A"/>
|
||||
<text x="1200.0" y="670.2" text-anchor="middle" font-family="'JetBrains Mono',monospace" font-size="11" font-weight="700" fill="#fff">!</text>
|
||||
</g>
|
||||
<!-- Drone body (3/4 perspective) -->
|
||||
<g transform="translate(600,-50)">
|
||||
<g><ellipse cx="150" cy="250" rx="81.12" ry="26" fill="url(#rotorG)"/><ellipse cx="150" cy="250" rx="78.7" ry="25.2" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.13"/><ellipse cx="150" cy="250" rx="48.7" ry="15.6" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.08" stroke-dasharray="2 6"/><ellipse cx="150" cy="256.2" rx="16.6" ry="7.8" fill="#0a0a0a"/><ellipse cx="150" cy="250" rx="15.6" ry="7.3" fill="#3a3a3a" stroke="#000" stroke-width="0.7"/><ellipse cx="150" cy="250" rx="7.3" ry="3.5" fill="#5a5a5a"/><circle cx="150" cy="250" r="2.1" fill="#0a0a0a"/></g>
|
||||
<g><ellipse cx="450" cy="250" rx="81.12" ry="26" fill="url(#rotorG)"/><ellipse cx="450" cy="250" rx="78.7" ry="25.2" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.13"/><ellipse cx="450" cy="250" rx="48.7" ry="15.6" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.08" stroke-dasharray="2 6"/><ellipse cx="450" cy="256.2" rx="16.6" ry="7.8" fill="#0a0a0a"/><ellipse cx="450" cy="250" rx="15.6" ry="7.3" fill="#3a3a3a" stroke="#000" stroke-width="0.7"/><ellipse cx="450" cy="250" rx="7.3" ry="3.5" fill="#5a5a5a"/><circle cx="450" cy="250" r="2.1" fill="#0a0a0a"/></g>
|
||||
<g><ellipse cx="208" cy="150" rx="62.4" ry="20" fill="url(#rotorG)"/><ellipse cx="208" cy="150" rx="60.5" ry="19.4" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.13"/><ellipse cx="208" cy="150" rx="37.4" ry="12.0" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.08" stroke-dasharray="2 6"/><ellipse cx="208" cy="154.8" rx="12.8" ry="6.0" fill="#0a0a0a"/><ellipse cx="208" cy="150" rx="12.0" ry="5.6" fill="#3a3a3a" stroke="#000" stroke-width="0.7"/><ellipse cx="208" cy="150" rx="5.6" ry="2.7" fill="#5a5a5a"/><circle cx="208" cy="150" r="1.6" fill="#0a0a0a"/></g>
|
||||
<g><ellipse cx="392" cy="150" rx="62.4" ry="20" fill="url(#rotorG)"/><ellipse cx="392" cy="150" rx="60.5" ry="19.4" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.13"/><ellipse cx="392" cy="150" rx="37.4" ry="12.0" fill="none" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.08" stroke-dasharray="2 6"/><ellipse cx="392" cy="154.8" rx="12.8" ry="6.0" fill="#0a0a0a"/><ellipse cx="392" cy="150" rx="12.0" ry="5.6" fill="#3a3a3a" stroke="#000" stroke-width="0.7"/><ellipse cx="392" cy="150" rx="5.6" ry="2.7" fill="#5a5a5a"/><circle cx="392" cy="150" r="1.6" fill="#0a0a0a"/></g>
|
||||
<polygon points="300,246 156,252 172,268 314,262" fill="url(#armG)"/>
|
||||
<polygon points="300,246 444,252 428,268 286,262" fill="url(#armG)"/>
|
||||
<polygon points="298,242 212,154 200,166 286,256" fill="url(#armG)"/>
|
||||
<polygon points="302,242 388,154 400,166 314,256" fill="url(#armG)"/>
|
||||
<polygon points="300,182 372,218 340,270 260,270 228,218" fill="url(#bodySideG)"/>
|
||||
<polygon points="300,182 372,218 300,240 228,218" fill="url(#bodyTopG)"/>
|
||||
<polygon points="300,196 344,218 300,236 256,218" fill="#262626" stroke="#6b6b6b" stroke-width="0.8" stroke-opacity="0.6"/>
|
||||
<polygon points="300,208 320,218 300,228 280,218" fill="url(#chipHi)"/>
|
||||
<circle cx="300" cy="218" r="3" fill="#8a8a8a"/>
|
||||
<ellipse cx="300" cy="190" rx="17" ry="7.5" fill="#3d3d3d" stroke="#000" stroke-width="0.5"/>
|
||||
<ellipse cx="300" cy="190" rx="9" ry="4" fill="#555"/>
|
||||
<rect x="285" y="264" width="30" height="14" rx="4" fill="#1a1a1a"/>
|
||||
<circle cx="300" cy="300" r="34" fill="url(#camHalo)"/>
|
||||
<circle cx="300" cy="300" r="23" fill="url(#gimbalG)" stroke="#000" stroke-width="0.9"/>
|
||||
<circle cx="300" cy="300" r="13" fill="#050505"/>
|
||||
<circle cx="300" cy="300" r="6" fill="#1b1b1b"/>
|
||||
<circle cx="296" cy="296" r="2.6" fill="#9a9a9a" fill-opacity="0.85"/>
|
||||
<circle cx="300" cy="300" r="17" fill="none" stroke="#666" stroke-width="0.8" stroke-opacity="0.6"/>
|
||||
<g font-family="'JetBrains Mono',monospace">
|
||||
<line x1="344" y1="218" x2="450" y2="172" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.4"/>
|
||||
<circle cx="344" cy="218" r="2.3" fill="#0A0A0A"/>
|
||||
<text x="456" y="168" font-size="14" font-weight="600" fill="#0A0A0A">Onboard AI</text>
|
||||
<text x="456" y="184" font-size="11" fill="#0A0A0A" fill-opacity="0.45">real-time inference</text>
|
||||
<line x1="276" y1="312" x2="180" y2="358" stroke="#0A0A0A" stroke-width="1" stroke-opacity="0.4"/>
|
||||
<circle cx="276" cy="312" r="2.3" fill="#0A0A0A"/>
|
||||
<text x="70" y="356" font-size="14" font-weight="600" fill="#0A0A0A">4K Vision Camera</text>
|
||||
<text x="70" y="372" font-size="11" fill="#0A0A0A" fill-opacity="0.45">gimbal-stabilised</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Copy: left-aligned, z-index 3 -->
|
||||
<div style="position:relative;z-index:3;flex:1;display:flex;align-items:center;">
|
||||
<div class="container">
|
||||
<div style="max-width:540px;">
|
||||
<div class="eyebrow">Drone development kits · Open source</div>
|
||||
<h1 style="font-size:clamp(46px,5.6vw,88px);letter-spacing:-0.045em;line-height:0.9;margin:18px 0 0;text-align:left;">Build.<br>Share.<br>Deploy.</h1>
|
||||
<p style="font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-2);max-width:480px;margin:24px 0 0;">Hardware devkits, open-source drone software, and integrated consultancy for domestic and industrial solutions.</p>
|
||||
<div class="hero-ctas" style="justify-content:flex-start;margin-top:32px;">
|
||||
<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" style="justify-content:flex-start;">
|
||||
<a href="opensource.html">Docs ↗</a>
|
||||
<a href="opensource.html">GitHub ↗</a>
|
||||
<a href="https://www.youtube.com/@JonStarkeyfilms">YouTube ↗</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-links">
|
||||
<a href="opensource.html">Docs ↗</a>
|
||||
<a href="opensource.html">GitHub ↗</a>
|
||||
<a href="https://www.youtube.com/@JonStarkeyfilms">YouTube ↗</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>
|
||||
|
||||
<!-- AI capabilities strip -->
|
||||
<div class="hero-caps-strip" style="position:relative;z-index:3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--rule);">
|
||||
<div class="container">
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding:22px 0;">
|
||||
<div style="display:flex;align-items:center;gap:14px;">
|
||||
<div style="flex:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M12 3L19 20L12 16L5 20Z" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-family:var(--mono);font-size:15px;font-weight:600;">Navigation</div>
|
||||
<div style="font-size:13px;color:var(--ink-3);margin-top:2px;">Autonomous waypoint flight</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;">
|
||||
<div style="flex:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="1"/><path d="M12 2.5V6M12 18V21.5M2.5 12H6M18 12H21.5" stroke-linecap="round"/><circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-family:var(--mono);font-size:15px;font-weight:600;">Tracking</div>
|
||||
<div style="font-size:13px;color:var(--ink-3);margin-top:2px;">Lock on & follow targets</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;">
|
||||
<div style="flex:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M12 4L21 19H3Z" stroke-linejoin="round"/><line x1="12" y1="10" x2="12" y2="14.5" stroke-linecap="round"/><circle cx="12" cy="16.6" r="1.1" fill="currentColor" stroke="none"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-family:var(--mono);font-size:15px;font-weight:600;">Alerts</div>
|
||||
<div style="font-size:13px;color:var(--ink-3);margin-top:2px;">Real-time event detection</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;">
|
||||
<div style="flex:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M2.5 12C6 6.5 18 6.5 21.5 12C18 17.5 6 17.5 2.5 12Z" stroke-linejoin="round"/><circle cx="12" cy="12" r="3.2"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-family:var(--mono);font-size:15px;font-weight:600;">Surveillance</div>
|
||||
<div style="font-size:13px;color:var(--ink-3);margin-top:2px;">Perimeter monitoring</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
33
style.css
33
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 {
|
||||
|
||||
Reference in New Issue
Block a user