// Home hero — full-bleed photographic background with overlaid headline,
// intro paragraph, two CTAs, and a 4-stat strip along the bottom.
//
// Background: a slow crossfade slideshow cycling through 4 hero scenes —
// Construction at dusk · Substation/BESS at blue hour · Motorway at night ·
// Studio product hero. Each scene is visible for ~8 seconds with a soft
// ~1.5-second crossfade between. Total cycle: 32 seconds.
//
// A horizontal gradient darkens the left side so the headline reads
// cleanly across all four scenes; a vertical gradient grounds the bottom
// for the stat strip.
/* ──────────── HomeHUDHero — the hero block ──────────── */
function HomeHUDHero({ onNavigate }) {
return (
{/* Animation keyframes — 4-scene crossfade slideshow.
Each scene visible 100% for ~6.5s, then crossfades over ~1.5s
to the next. Total cycle: 32s (8s per scene).
Layers are offset by 8s each so they crossfade in sequence.
Cycle anatomy for each scene (32s = 100%):
0% — fade in starts (from previous scene)
5% — fully visible
25% — still fully visible (end of "hold")
30% — faded out
100% — stays at 0 until cycle restart
Slot 1: 0–32% visible (peak 0–25%)
Slot 2: 25–57% visible (peak 25–50%)
Slot 3: 50–82% visible (peak 50–75%)
Slot 4: 75–100% + 0–7% (peak 75–100% wrapping to 0–5%) */}
{/* ── Background slideshow ──
Four hero scenes layered on top of each other, each fading in
and out in sequence. Total cycle: 32 seconds, 8 seconds per scene.
All four images are sized to cover the hero box and centred so
the tower stays roughly in the middle of the frame on each.
To swap scene order or change durations: edit the array below
and the corresponding keyframes above. */}
{[
{ src: "assets/hero-construction-dusk.png", anim: "solo-bg-slot-1" },
{ src: "assets/hero-substation-bess.png", anim: "solo-bg-slot-2" },
{ src: "assets/hero-motorway-night.png", anim: "solo-bg-slot-3" },
{ src: "assets/hero-studio-product.png", anim: "solo-bg-slot-4" },
].map((layer, i) => (
))}
{/* Gradient overlay — darkens the left side so the headline reads
cleanly. Keeps the right side (where the tower lives) more visible.
Sits above all photo layers (z=0 crowd frames, z=1 dim pulse) and
below the page content (z=3). */}
{/* ── Decorative cross-hairs at the four corners ── */}
{/* ── Headline column ── */}
We redefined mobile security.
Secure beyond limits. Solo designs, manufactures and supports the platform behind 2,000+ rapidly-deployable security units across the UK, Europe, North America and the GCC.
onNavigate("builder")}>Build a tower →
{/* ── Product quick-list ──
SEO: puts real, crawlable product names + links directly
under the H1 (this is the primary heading on the page a
search engine associates with the site's core keywords),
reinforcing the "mobile CCTV tower" topical relevance right
at the top instead of relying solely on deeper pages.
Also serves as a fast, above-the-fold way for a visitor to
jump straight to a specific product. Excludes comingSoon,
accessory (RS1/RS2/Volt Box) and legacy products — this is
the live tower + SSU range only, matching the mega-menu's
primary grouping. */}
{/* ── Bottom row: signature stat strip ──
Vertical row list, not a 4-col grid — "Since 2019" wrapped to
2 lines while its siblings stayed single-line, misaligning
every label across the row. */}
);
}
/* ──────────── Small bits ──────────── */
function CornerMarks() {
// Four small L-shaped marks at the corners of the hero block — adds the
// operator-console framing without taking attention.
const arm = 24;
const off = 22;
// Split props: style-related keys go into `style`, HTML attributes
// (e.g. data-om-id injected by the design tool) go on the element
// itself. Prevents React "Unsupported style property" warnings.
const styleKeys = new Set(["top", "right", "bottom", "left", "width", "height"]);
const Stroke = (props) => {
const styleProps = {};
const domProps = {};
for (const [k, v] of Object.entries(props)) {
if (styleKeys.has(k)) styleProps[k] = v;
else domProps[k] = v;
}
return (
);
};
return (