/* ByteSiege landing — swappable hero components + adaptive nav.
Depends on: Icon, HeroMock, Donut (from sections.jsx). */
function SiteNav({ dark }) {
const [scrolled, setScrolled] = React.useState(false);
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
window.addEventListener("scroll", onScroll); onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
const close = () => setOpen(false);
const burger = open
? ()
: ();
return (
);
}
/* ---- full-bleed network banner (force-directed ASM graph, projected onto a spherical cap) ---- */
// Subtle parallax: the hero backdrop drifts at a fraction of scroll speed (a gentle
// lag, not a hard pin). strength 0 = scrolls normally, 1 = fully fixed. Degrades to
// static if scroll events don't fire — never breaks.
function useParallax(strength) {
const ref = React.useRef(null);
React.useEffect(() => {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const el = ref.current;
if (!el) return;
let raf = 0;
const apply = () => {
raf = 0;
const y = Math.min(Math.max(window.scrollY || window.pageYOffset || 0, 0), 900);
el.style.transform = `translate3d(0, ${(y * strength).toFixed(1)}px, 0)`;
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(apply); };
apply();
window.addEventListener("scroll", onScroll, { passive: true });
return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
}, [strength]);
return ref;
}
function NetNode({ n }) {
const { x, y, r, shape, cls, sev, op } = n;
let inner;
if (shape === "hub") inner = ();
else if (shape === "rect") inner = ();
else if (shape === "diamond") inner = ();
else inner = ();
return {inner};
}
function NetGraph() {
const g = (typeof window !== "undefined" && window.NETGRAPH) || { nodes: [], edges: [], flows: [], grid: [] };
const glows = g.nodes.filter((n) => n.glow);
// Progressive zoom: as the viewport narrows we interpolate the viewBox from the
// full graph (desktop) to a tight focal window (phone). A smaller viewBox = larger
// nodes; panning the focal up-left lets the dense cluster bleed off toward the
// bottom-right, so the phone frames the top-left region with the hub peeking in.
const FULL = { x: 0, y: 0, w: 1200, h: 560 };
const ZOOM = { x: 560, y: 96, w: 470, h: 430 }; // focal window over the hub / upper-left cluster
const computeVB = (w) => {
const t = Math.max(0, Math.min(1, (900 - w) / (900 - 420))); // 0 desktop → 1 narrow phone
const e = t * t * (3 - 2 * t); // smoothstep
const x = FULL.x + (ZOOM.x - FULL.x) * e;
const y = FULL.y + (ZOOM.y - FULL.y) * e;
const ww = FULL.w + (ZOOM.w - FULL.w) * e;
const hh = FULL.h + (ZOOM.h - FULL.h) * e;
return `${x.toFixed(1)} ${y.toFixed(1)} ${ww.toFixed(1)} ${hh.toFixed(1)}`;
};
const [vb, setVb] = React.useState(() => computeVB(typeof window !== "undefined" ? window.innerWidth : 1280));
React.useEffect(() => {
const onResize = () => setVb(computeVB(window.innerWidth));
onResize();
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, []);
const pxRef = useParallax(0.3);
return (
);
}
function HeroC() {
return (
Know which exposures attackers can actually exploit.
ByteSiege runs a continuous threat exposure management program across your perimeter and brand: discovering exposures, validating what's truly exploitable, and mobilizing the fix.