// Homepage — search, map, featured cities, insights
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH, useMemo: useMemoH } = React;
// =============================================================================
// AIR HORN — easter egg on truck click. Pure Web Audio synth (no audio file).
// =============================================================================
let _audioCtx = null;
function honkAirHorn() {
try {
if (!_audioCtx) {
const Ctx = window.AudioContext || window.webkitAudioContext;
if (!Ctx) return;
_audioCtx = new Ctx();
}
const ctx = _audioCtx;
if (ctx.state === "suspended") ctx.resume();
const now = ctx.currentTime;
const duration = 0.85;
// Three slightly detuned square-wave oscillators give the "blat" of a real air horn
const freqs = [220, 277, 330];
const master = ctx.createGain();
master.gain.setValueAtTime(0, now);
master.gain.linearRampToValueAtTime(0.18, now + 0.04);
master.gain.setValueAtTime(0.18, now + duration - 0.18);
master.gain.exponentialRampToValueAtTime(0.001, now + duration);
master.connect(ctx.destination);
// Slight low-pass to take harsh edges off the squarewave
const filter = ctx.createBiquadFilter();
filter.type = "lowpass";
filter.frequency.value = 1800;
filter.Q.value = 1.2;
filter.connect(master);
freqs.forEach((f, i) => {
const osc = ctx.createOscillator();
osc.type = "square";
osc.frequency.setValueAtTime(f, now);
// Tiny pitch wobble for realism
osc.frequency.linearRampToValueAtTime(f * 1.02, now + 0.15);
osc.frequency.linearRampToValueAtTime(f * 0.98, now + duration - 0.1);
const oscGain = ctx.createGain();
oscGain.gain.value = i === 0 ? 0.6 : 0.4;
osc.connect(oscGain);
oscGain.connect(filter);
osc.start(now);
osc.stop(now + duration + 0.05);
});
} catch (e) {
console.warn("honk failed", e);
}
}
window.honkAirHorn = honkAirHorn;
function HomePage({ onNav, onCity }) {
const [query, setQuery] = useStateH("");
const [focused, setFocused] = useStateH(false);
const [hoveredCity, setHoveredCity] = useStateH(null);
const [activeCategory, setActiveCategory] = useStateH("small");
const { ALL_CITIES, FEATURED_CITIES, SHIPPING_CATEGORIES, INSIGHTS } = window.SI_DATA;
const matches = useMemoH(() => {
if (!query.trim()) return [];
const q = query.toLowerCase();
return ALL_CITIES.filter(c => c.name.toLowerCase().includes(q) || c.state.toLowerCase().includes(q)).slice(0, 6);
}, [query]);
return (
{/* HERO */}
{/* Animated trucks rolling across the bottom — click for air horn */}
Independent freight intelligence · 5 metros · Q3 2026 launch
Is your package going to make it? Did you check the pulse?
Shipping Clarity Pulse is the daily intelligence shippers use before freight
starts moving. Terminal status, lane conditions, capacity, carrier ratings —
for your metro, every morning.
Every morning at 7am, get the pulse for your metro: which terminals
are running hot, where wait times are spiking, which lanes are degraded,
and what's expected this week. The intelligence shippers need before
freight starts moving.
Terminal status changes and live wait times
Lane conditions and corridor health
Capacity shifts and carrier ratings updates
Weekly trend reports per metro
Q3 2026 Launch · Get notified
{submitted ? (
✓ You're on the list.
We'll let you know when the {cityName} Pulse goes live.
) : (
)}
);
}
// =============================================================================
// PERSPECTIVES — kept defined but unused on homepage. Will reuse on internal
// audience-specific pages once the four Reports launch.
// =============================================================================
function PerspectivesSection() {
const PERSPECTIVES = [
{
key: "shippers",
tone: "blue",
audience: "Shippers don't see",
body: (<>
Did you know that when you ship UPS air freight out of Denver, your package
isn't moved by one truck? It's relayed between drivers — Commerce City to
Englewood — to make the plane that night. Hope they relayed them all.
Right now Commerce City is closed for remodel. Trucks are routing through
Littleton. Every relay just got longer. Your package's odds of making the
plane just got shorter.
),
pitch: <>Shippers Report shows you the chain you're paying for, not just the carrier name on the invoice.,
},
{
key: "receivers",
tone: "green",
audience: "Receivers don't see",
body: (<>
Did you know the freight that just hit your dock came off a relay from a driver
who waited 4 hours at a shipper, then ran tired? Or that one of your regular
inbound carriers is known on BrownCafe as "the one that pays for damage
and never pays the claim"?
Receivers judge carriers by what arrives. We show you the trip that got it
there — and what the next one will look like.
),
pitch: <>Receivers Report turns inbound freight from a black box into a forecast.,
},
{
key: "carriers",
tone: "amber",
audience: "Carriers don't see",
body: (<>
Did you know your drivers are talking about you right now on BrownCafe,
TruckersReport, and Reddit? Did you know there's a permit pending on your top
competitor's main hub that'll take them offline next quarter?
You don't have to wait for the RFP loss to find out. Other people see your
business clearer than you do.
),
pitch: <>Carriers Report is your ground truth — including the parts about you.,
},
{
key: "brokers",
tone: "red",
audience: "Brokers don't see",
body: (<>
Did you know the carrier you just booked for that 53-foot lane lost their
authority three weeks ago and is running under another MC? Did you know the
driver assigned to your hot load just logged two HOS violations?
Trust pays well — until it doesn't. Verify everything.
),
pitch: <>Broker Report is real-time carrier qualification — authority, insurance, safety, lane reputation.,
},
];
return (
What you don't see
Four perspectives. One picture.
Every player in the supply chain sees a different slice of the truth.
Shipping Clarity is the first time everyone sees the whole thing.