/* global React, ReactDOM */ const { useState, useEffect, useRef } = React; /* ============================================================ Icons (inline SVG, blue line style) ============================================================ */ const Icon = { Shield: (p) => ( ), Clock: (p) => ( ), Box: (p) => ( ), Pin: (p) => ( ), Truck: (p) => ( ), Bolt: (p) => ( ), Route: (p) => ( ), Home: (p) => ( ), Phone: (p) => ( ), Mail: (p) => ( ), Arrow: (p) => ( ), Check: (p) => ( ), }; /* ============================================================ Brand mark ============================================================ */ function BrandMark() { return ( STALS — Sprinter tech auto line service ); } /* ============================================================ NAV ============================================================ */ function Nav() { const [scrolled, setScrolled] = useState(false); const [openMenu, setOpenMenu] = useState(null); const serviceRef = useRef(null); const contactsRef = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 30); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { if (!openMenu) return; const onDown = (e) => { const refs = { service: serviceRef, contacts: contactsRef }; const active = refs[openMenu]?.current; if (active && !active.contains(e.target)) setOpenMenu(null); }; const onKey = (e) => { if (e.key === "Escape") setOpenMenu(null); }; document.addEventListener("mousedown", onDown); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); }; }, [openMenu]); const toggle = (name) => () => setOpenMenu((cur) => (cur === name ? null : name)); const close = () => setOpenMenu(null); return ( ); } /* ============================================================ HERO ============================================================ */ function Hero() { return (

Nationwide Sprinter
Service

Reliable. Efficient. Always On Time.

Logistics and delivery services across the USA.
Built on trust, driven by technology.

{[ { icon: , label: "Reliable", sub: "You can count on us" }, { icon: , label: "On Time", sub: "Every time" }, { icon: , label: "Secure", sub: "Your cargo is safe" }, { icon: , label: "Nationwide", sub: "Across the USA" }, ].map((t, i) => (
{t.icon}
{t.label} {t.sub}
))}
); } /* ============================================================ SERVICES ============================================================ */ const SERVICES = [ { icon: , title: "Long-haul delivery", desc: "Cross-country routes for high-value freight. Team drivers, real-time GPS, and live dispatch coverage.", pill: "48 states", meta: "Avg. 1,800 mi / leg", }, { icon: , title: "Same-day Sprinter", desc: "Critical loads handled same-day in major metros. Direct point-to-point — no terminals, no transfers.", pill: "Same day", meta: "Pickup in 60 min", }, { icon: , title: "Expedited freight", desc: "Fast and reliable cargo van delivery across the USA for commercial and urgent shipments.", pill: "Time-critical", meta: "99.4% on-time", }, { icon: , title: "Last-mile delivery", desc: "White-glove final-mile coverage with installation, signature capture, and proof of delivery.", pill: "B2B / B2C", meta: "Signature + POD", }, ]; function ServiceCard({ s, idx }) { const ref = useRef(null); const onMove = (e) => { const r = ref.current.getBoundingClientRect(); ref.current.style.setProperty("--mx", `${e.clientX - r.left}px`); ref.current.style.setProperty("--my", `${e.clientY - r.top}px`); }; return (
0{idx + 1}
{s.icon}

{s.title}

{s.desc}

); } function Services() { return (
Service

What we move,
and how we move it.

Four core services covering everything from cross-country freight to white-glove final-mile. One fleet, one team, one accountable contact.

{SERVICES.map((s, i) => ( ))}
); } /* ============================================================ ABOUT — story + animated stat counters ============================================================ */ function useInView(ref, threshold = 0.2) { const [seen, setSeen] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.unobserve(e.target); } }); }, { threshold } ); io.observe(ref.current); return () => io.disconnect(); }, [ref]); return seen; } function Counter({ to, suffix = "", duration = 1400 }) { const [v, setV] = useState(0); const ref = useRef(null); const seen = useInView(ref, 0.4); useEffect(() => { if (!seen) return; const start = performance.now(); const ease = (t) => 1 - Math.pow(1 - t, 3); let id; const tick = (now) => { const t = Math.min(1, (now - start) / duration); setV(Math.round(ease(t) * to)); if (t < 1) id = requestAnimationFrame(tick); }; id = requestAnimationFrame(tick); return () => cancelAnimationFrame(id); }, [seen, to, duration]); return ( {v.toLocaleString()} {suffix && {suffix}} ); } function About() { return (
Visit us

Office & service shop.

Our Addison, IL location is both our dispatch office and a full-service shop. Drivers, fleet partners, and walk-in customers all get the same hands-on attention.

We service more than just Sprinter cargo vans — our techs handle scheduled maintenance, brakes, suspension, oil & fluids, diagnostics, and air-conditioning work on most vans, light trucks, and commercial vehicles. If it rolls, we can probably keep it rolling.

Office & service shop
1772 W Armitage Ct
Addison, IL 60101
United States
Mon–Fri 8a–6p · Sat–Sun closed
{[ { num: "01", name: "Vetted drivers", desc: "FMCSA-cleared, drug-tested, background-checked. Average 8+ years OTR." }, { num: "02", name: "Live tracking", desc: "GPS telematics on every unit. Customer portal with milestone alerts." }, { num: "03", name: "Air-ride equipped", desc: "Climate-controlled and lift-gate options for sensitive cargo." }, { num: "04", name: "24/7 dispatch", desc: "U.S.-based dispatchers, real humans on every call, around the clock." }, ].map((f, i) => (
{f.num}
{f.name}
{f.desc}
))}
); } /* ============================================================ CONTACTS — form + info cards + US map ============================================================ */ function ContactForm() { const [data, setData] = useState({ name: "", company: "", email: "", phone: "", service: "", message: "" }); const [errors, setErrors] = useState({}); const [sent, setSent] = useState(false); const set = (k) => (e) => setData({ ...data, [k]: e.target.value }); const submit = (e) => { e.preventDefault(); const errs = {}; if (!data.name.trim()) errs.name = "Required"; if (!data.email.trim()) errs.email = "Required"; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) errs.email = "Invalid email"; if (!data.message.trim()) errs.message = "Tell us a bit about your shipment"; setErrors(errs); if (Object.keys(errs).length === 0) setSent(true); }; if (sent) { return (

Message received.

A dispatcher will reach out within the next 30 minutes. For urgent loads call our 24/7 line directly.

); } return (

Request a quote

Tell us about your shipment — we'll be back within 30 minutes.

{errors.name && {errors.name}}
{errors.email && {errors.email}}