אתר טכני כהה לחברת רשתות לעסקים קטנים

Build a "Relay 9 IT Networks Website" React component.

CONCEPT: The website of a small Tel Aviv company that designs, installs and monitors networks for clinics, law firms and studios of 5 to 80 people. It should feel like a precise engineering drawing come alive: dark, calm, line art and mono labels, one signal colour. Trustworthy without a single stock photo or fake dashboard.

LAYOUT & CONTENT:
- Nav (72px): an octagon mark with an orange dot + 'RELAY/9' in mono, links Network / Coverage / Pricing / Status, an outlined 'Book a survey' button.
- Hero (760px, two columns): left, a 5.2rem headline 'The network your clinic never has to think about.', one paragraph (5 to 80 people, one flat fee, four-hour on-site promise in Gush Dan), an orange 'Book a free site survey' button and an underlined 'See a sample network map' link; at the bottom a mono readout (SELECTED / LATENCY / NOTE) for the selected device. Right, a 660px SVG network map of a dental clinic: a chunky bone-coloured octagon node with thick black circuit traces and an orange core in the centre, eight square device nodes around it (RCPT-01 reception PC, XRAY-02, PRN-03, AP-04 waiting-room Wi-Fi, VOIP-05, NAS-06 backup, CAM-07, WAN-08 fibre) joined by swooping 1.25px bone cables (cubic curves bent sideways, not straight spokes), two faint guide rings.
- Ticket log: 'Last week, while everyone was working.' and a four-column table (when / site / what happened / fixed in) of six real-sounding tickets ('X-ray PC lost its imaging share after an update', '14 min, remote').
- Process: 'Taking over your network, in four moves.' A horizontal rail with four square markers: 01 Survey, 02 Draw, 03 Rebuild, 04 Watch; the open step is wider and shows its paragraph.
- Coverage (pale steel ground, the one light section): headline 'Inside the line, four hours. Promise.', a two-column list of ten cities with site counts, and a line-art map: coastline with the sea filled, a dashed 250px-radius '4 H LINE' circle, city squares joined to the office node.
- Pricing: 'One price per person. Everything included.' A custom slider (5-80 people) and a bordered price card: ₪95 a person, ₪900 minimum, five included items with check icons.
- Footer (bone ground): 'Forty minutes, one walk around your office.' at 5.4rem, a black survey button, and a mono row with name, address, phone and email.

INTERACTIONS & MOTION:
- Hero: hovering, focusing or clicking a device (real buttons with aria-pressed laid over the SVG) turns its square orange, draws its cable in orange with pathLength 0 to 1 (0.5s, cubic-bezier(0.23, 1, 0.32, 1)) and updates the mono readout. Small packets travel every cable with SVG <animateMotion> (2.2-3.4s linear, alternating direction); they are removed under reduced motion.
- Log rows rise 12px and fade in once on scroll with a 50ms stagger; a hovered row tints and shows an orange square in its last cell.
- Process steps are motion layout buttons: hover or click widens the step (flex 1 to 2.4, spring duration 0.5, bounce 0.15) and its paragraph un-blurs in after 120ms; exit is 120ms.
- Coverage: the four-hour circle draws itself once (1.6s, cubic-bezier(0.77, 0, 0.175, 1)); hovering a city highlights its line and scales its square 1.5x on a spring (stiffness 400, damping 22).
- Pricing: a native range input (opacity 0, on top) drives a drawn track: the orange fill is scaleX from the left, the square thumb follows, the price updates with tabular numerals.
- Buttons press to scale 0.97 in 150ms; arrow icons nudge 4px on hover.

DESIGN SYSTEM — Line Node:
- Graphite #0F1112 and #16191A, bone #E9E6DF for type and line art, greys #A4A8AA / #6D7275, steel #C5CDD5 for the light section, one signal orange #FF5B1F (darkened to #C2410C for small text on steel).
- Geist 600 with tight tracking (-0.04em) for headlines, Geist for body, Geist Mono only for labels, device names, times and numbers.
- Square corners everywhere, 1-1.5px hairlines, no glow, no gradients, no shadows. The line art is the decoration.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, filter and pathLength only. Respect prefers-reduced-motion via useReducedMotion() (packets stop).
- The SVG map has role="img" and an aria-label; the log is a role="table".
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no eyebrow label above every heading.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, text contrast at least 4.5:1, tabular numerals for times and prices.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.