import React, { useMemo, useState } from “react”;
import { motion, AnimatePresence } from “framer-motion”;
import {
Bus,
School,
Ambulance,
Truck,
Plane,
Building2,
GraduationCap,
ShieldCheck,
Router,
Satellite,
Cloud,
Mic,
Headphones,
TabletSmartphone,
ChevronRight,
CheckCircle2,
Radio,
Wifi,
Layers3,
ShoppingCart,
ArrowRight,
Camera,
Menu,
X,
Package,
Plus,
Minus,
Star,
BadgeCheck,
CreditCard,
MapPinned,
Search,
Filter,
HeartHandshake,
} from “lucide-react”;
import { Card, CardContent } from “@/components/ui/card”;
import { Button } from “@/components/ui/button”;
import { Badge } from “@/components/ui/badge”;
import { Progress } from “@/components/ui/progress”;
import { Input } from “@/components/ui/input”;
const brands = [
“Samsung”,
“Verizon”,
“T-Mobile”,
“Peplink”,
“Cradlepoint”,
“Orion Labs”,
“Klein”,
“ProClip”,
“LAVA”,
“Samsara”,
“42Gears”,
“F.R.E.D.”,
];
const verticals = [
{
id: “public-transit”,
name: “Public Transit”,
icon: Bus,
desc: “Fixed-route, passenger systems, CAD/AVL, fare collection, and fleet communications.”,
hero: “Infrastructure for modern public transit systems.”,
outcomes: [
“Improve on-time performance”,
“Reduce downtime”,
“Strengthen driver-dispatch coordination”,
“Support resilient fleet operations”,
],
},
{
id: “school-transportation”,
name: “School Transportation”,
icon: School,
desc: “Student safety, route verification, biometrics, NFC, parent confidence, and resilient communications.”,
hero: “Safe, verified school transportation infrastructure.”,
outcomes: [
“Verify every trip”,
“Increase parent confidence”,
“Improve district visibility”,
“Support safe communications at every step”,
],
},
{
id: “nemt”,
name: “NEMT / Paratransit”,
icon: Ambulance,
desc: “Medical trips, dispatch, reservations, secure rider verification, and compliant reporting.”,
hero: “Reliable, compliant mobility for vulnerable passengers.”,
outcomes: [“Reduce missed trips”, “Support reservations agents”, “Improve accountability”, “Strengthen compliance”],
},
{ id: “freight”, name: “Freight & Logistics”, icon: Truck, desc: “Telematics, mobile communications, routing, and resilient network infrastructure.”, hero: “Fleet visibility with resilient communications.”, outcomes: [“Reduce downtime”, “Improve dispatch visibility”] },
{ id: “aviation”, name: “Aviation Ground Ops”, icon: Plane, desc: “Airside coordination, crew communications, routers, tablets, and resilient connectivity.”, hero: “Mission-critical communication for airside operations.”, outcomes: [“Improve airside coordination”, “Increase network resilience”] },
{ id: “corporate”, name: “Corporate Shuttle”, icon: Building2, desc: “Employee shuttle operations, dispatch, rider information, and identity-enabled mobility.”, hero: “Integrated technology for managed shuttle services.”, outcomes: [“Improve rider experience”, “Increase operational clarity”] },
{ id: “campus”, name: “Campus / Smart City”, icon: GraduationCap, desc: “Closed-loop mobility, dispatch, safety systems, and verified access.”, hero: “Connected infrastructure for controlled mobility environments.”, outcomes: [“Simplify fleet oversight”, “Improve access control”] },
];
const products = [
{
id: “samsung-tab-active”,
name: “Samsung Tab Active Fleet Tablet”,
brand: “Samsung”,
category: “Vehicle Hardware”,
price: 849,
subtitle: “Rugged tablet for MDT, CAD/AVL, and dispatch workflows.”,
description: “Built for fleet environments with a rugged form factor, reliable performance, and a clean in-vehicle operator experience.”,
badge: “Best seller”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”, “aviation”, “corporate”, “campus”],
features: [“Rugged design”, “Driver-facing workflow”, “Ideal for Orion and TSL apps”, “Pairs with ProClip and LAVA”],
applications: [“MDT replacement”, “Driver manifest”, “Route execution”, “Field communications”],
relatedIds: [“proclip-dock”, “lava-hub”, “orion-labs-ptt”],
},
{
id: “proclip-dock”,
name: “ProClip Vehicle Docking Mount”,
brand: “ProClip”,
category: “Vehicle Hardware”,
price: 229,
subtitle: “Secure mounting solution for tablets and mobile computing in vehicles.”,
description: “Professional-grade mounting designed to stabilize driver tablets and support ergonomic placement in demanding transit environments.”,
badge: “Fleet essential”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”, “corporate”],
features: [“Vehicle-grade mount”, “Secure tablet positioning”, “Works with Samsung deployment models”],
applications: [“Driver tablet docking”, “Cab organization”],
relatedIds: [“samsung-tab-active”, “lava-hub”],
},
{
id: “lava-hub”,
name: “LAVA Connection Hub”,
brand: “LAVA”,
category: “Vehicle Hardware”,
price: 199,
subtitle: “Power and connectivity hub for in-vehicle mobile computing.”,
description: “A clean connectivity layer that helps extend, charge, and stabilize in-vehicle device deployments.”,
badge: “Clean installs”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”],
features: [“In-vehicle connectivity”, “Power stabilization”, “Tablet accessory support”],
applications: [“Vehicle integration”, “Accessory expansion”],
relatedIds: [“samsung-tab-active”, “proclip-dock”],
},
{
id: “klein-mic”,
name: “Klein Rugged PTT Microphone”,
brand: “Klein”,
category: “Communications”,
price: 149,
subtitle: “Transit-grade handheld push-to-talk microphone for drivers.”,
description: “A rugged microphone built for fleet communication workflows, ideal for PTT and voice coordination in the vehicle environment.”,
badge: “Rugged audio”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “aviation”, “freight”],
features: [“PTT-ready”, “Driver input hardware”, “Built for fleet use”],
applications: [“Driver-to-dispatch voice”, “Incident reporting”],
relatedIds: [“orion-labs-ptt”, “klein-headset”],
},
{
id: “klein-headset”,
name: “Klein Dispatch Headset”,
brand: “Klein”,
category: “Communications”,
price: 189,
subtitle: “Operations center headset for dispatchers and reservations teams.”,
description: “A control-center audio endpoint for dispatch, reservations, and coordination teams that need clear two-way communication.”,
badge: “Control center”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “aviation”, “corporate”],
features: [“Dispatcher-ready”, “Reservations support”, “Clear voice audio”],
applications: [“Dispatch desk”, “Reservation agent station”],
relatedIds: [“orion-labs-ptt”, “klein-mic”],
},
{
id: “orion-labs-ptt”,
name: “Orion Labs PTT & VoIP”,
brand: “Orion Labs”,
category: “Communications”,
price: 39,
subtitle: “Cloud voice coordination for field and control center teams.”,
description: “A communication platform for push-to-talk, calling, and operational messaging across vehicles and dispatch teams.”,
badge: “Monthly SaaS”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “aviation”, “freight”, “corporate”],
features: [“PTT over LTE”, “VoIP workflows”, “Team messaging”],
applications: [“Driver comms”, “Dispatcher coordination”, “Reservations and operations”],
relatedIds: [“klein-mic”, “klein-headset”, “samsung-tab-active”],
},
{
id: “peplink-router”,
name: “Peplink Mobility Router”,
brand: “Peplink”,
category: “Connectivity”,
price: 1299,
subtitle: “Vehicle router for LTE, Wi-Fi, and resilient failover architecture.”,
description: “An enterprise-grade router for fleet deployments supporting carrier integration, network prioritization, and resilient vehicle connectivity.”,
badge: “Resilient routing”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”, “aviation”, “corporate”, “campus”],
features: [“Fleet-grade routing”, “Carrier failover”, “Vehicle network control”],
applications: [“Always-on fleet connectivity”, “Traffic prioritization”],
relatedIds: [“verizon-plan”, “tmobile-plan”, “starlink-failover”],
},
{
id: “cradlepoint-router”,
name: “Cradlepoint Fleet Router”,
brand: “Cradlepoint”,
category: “Connectivity”,
price: 1349,
subtitle: “Managed wireless edge router for transportation systems.”,
description: “A reliable router option for fleet and fixed deployments that need managed connectivity and operational continuity.”,
badge: “Enterprise edge”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”, “aviation”],
features: [“Wireless edge”, “Central management”, “Operational continuity”],
applications: [“Vehicle network”, “Depot network”],
relatedIds: [“verizon-plan”, “tmobile-plan”],
},
{
id: “verizon-plan”,
name: “Verizon Fleet Data Plan”,
brand: “Verizon”,
category: “Connectivity”,
price: 59,
subtitle: “Primary LTE / 5G connectivity for routers and mobile devices.”,
description: “Carrier-backed connectivity for fleet hardware, tablets, and communication endpoints.”,
badge: “Recurring service”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”, “aviation”, “corporate”, “campus”],
features: [“Device connectivity”, “Router connectivity”, “Supports resilient architecture”],
applications: [“Primary SIM”, “Fleet operations”],
relatedIds: [“peplink-router”, “cradlepoint-router”, “tmobile-plan”],
},
{
id: “tmobile-plan”,
name: “T-Mobile Fleet Data Plan”,
brand: “T-Mobile”,
category: “Connectivity”,
price: 54,
subtitle: “Secondary or primary connectivity for fleet failover and coverage diversity.”,
description: “Carrier diversity helps strengthen continuity when a single network degrades across an operating region.”,
badge: “Coverage diversity”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”, “aviation”, “corporate”, “campus”],
features: [“Coverage diversity”, “Secondary SIM support”, “Failover-ready”],
applications: [“Secondary SIM”, “Backup carrier”],
relatedIds: [“peplink-router”, “verizon-plan”],
},
{
id: “starlink-failover”,
name: “Starlink Resilience Kit”,
brand: “Starlink”,
category: “Resilience”,
price: 2499,
subtitle: “Satellite failover layer for degraded terrestrial connectivity.”,
description: “A resilience option for fleets operating across weak coverage zones, dense corridors, rural routes, or disruption scenarios.”,
badge: “Always-on option”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”, “aviation”, “campus”],
features: [“Satellite backup”, “Connectivity resilience”, “Failover architecture”],
applications: [“Disaster continuity”, “Remote route resilience”],
relatedIds: [“peplink-router”, “verizon-plan”, “tmobile-plan”],
},
{
id: “fred-platform”,
name: “F.R.E.D. Identity Platform”,
brand: “F.R.E.D.”,
category: “Identity & Software”,
price: 199,
subtitle: “Biometric and NFC-enabled identity layer for transportation workflows.”,
description: “An identity platform designed for school transportation and other workflows where verification, chain of custody, and auditable events matter.”,
badge: “Category differentiator”,
compatibleVerticals: [“school-transportation”, “nemt”, “public-transit”, “veterans”],
features: [“Biometrics”, “NFC workflows”, “Verification trail”],
applications: [“Student validation”, “Driver authentication”, “Trip identity controls”],
relatedIds: [“samsung-tab-active”, “suremdm”],
},
{
id: “tsl-cadavl”,
name: “TSL CAD / AVL Driver App”,
brand: “TSL”,
category: “Identity & Software”,
price: 129,
subtitle: “Dispatch, route execution, and driver workflow software.”,
description: “A software layer for fleet operations, routing, and real-time workflow execution.”,
badge: “Operations core”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”],
features: [“Dispatch workflow”, “Driver-facing UX”, “Operational visibility”],
applications: [“CAD / AVL”, “Run execution”],
relatedIds: [“samsung-tab-active”, “orion-labs-ptt”],
},
{
id: “suremdm”,
name: “42Gears SureMDM”,
brand: “42Gears”,
category: “Identity & Software”,
price: 12,
subtitle: “Mobile device management for transportation deployments.”,
description: “A device management layer for securing and maintaining field tablets, shared devices, and managed endpoints.”,
badge: “Per device”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”, “corporate”, “campus”],
features: [“Device lockdown”, “Remote administration”, “Managed deployments”],
applications: [“Fleet tablets”, “Controlled app environments”],
relatedIds: [“samsung-tab-active”, “fred-platform”],
},
{
id: “samsara-telematics”,
name: “Samsara Telematics”,
brand: “Samsara”,
category: “Visibility & Safety”,
price: 79,
subtitle: “Fleet telematics and operational visibility layer.”,
description: “Vehicle and fleet insights for utilization, health, movement, and operational review.”,
badge: “Visibility”,
compatibleVerticals: [“public-transit”, “school-transportation”, “freight”, “corporate”],
features: [“Fleet visibility”, “Vehicle insights”, “Operational analytics”],
applications: [“Telematics”, “Safety review”],
relatedIds: [“camera-system”, “peplink-router”],
},
{
id: “camera-system”,
name: “Fleet Camera System”,
brand: “Transit AMS”,
category: “Visibility & Safety”,
price: 899,
subtitle: “Onboard visibility for security, review, and incident documentation.”,
description: “An onboard camera layer that supports safety review, incident attribution, and operational monitoring.”,
badge: “Safety layer”,
compatibleVerticals: [“public-transit”, “school-transportation”, “nemt”, “freight”, “aviation”],
features: [“Onboard visibility”, “Incident review”, “Security coverage”],
applications: [“Bus interior”, “Vehicle exterior”, “Incident management”],
relatedIds: [“samsara-telematics”],
},
{
id: “apc-suite”,
name: “IRMA / UTA APC Suite”,
brand: “IRMA / UTA”,
category: “Passenger Systems”,
price: 1599,
subtitle: “Passenger counting and ridership system for transit fleets.”,
description: “A passenger systems layer supporting ridership visibility, service planning, and utilization review.”,
badge: “Ridership data”,
compatibleVerticals: [“public-transit”],
features: [“APCs”, “Passenger flow data”, “Operational analytics”],
applications: [“Ridership analysis”, “Planning support”],
relatedIds: [“sunrise-signage”],
},
{
id: “sunrise-signage”,
name: “Sunrise Passenger Signage”,
brand: “Sunrise”,
category: “Passenger Systems”,
price: 1099,
subtitle: “Passenger information displays for onboard and route communication.”,
description: “Digital signage for passenger communication, route awareness, and service experience enhancement.”,
badge: “Passenger information”,
compatibleVerticals: [“public-transit”, “school-transportation”],
features: [“Passenger information”, “Route display”, “Interior communication”],
applications: [“Onboard displays”, “Exterior route signs”],
relatedIds: [“apc-suite”],
},
];
const bundles = [
{
id: “transit-comm-kit”,
name: “Transit Communication Kit”,
vertical: “public-transit”,
subtitle: “A complete driver-to-dispatch communication system for public transit fleets.”,
price: 2899,
items: [“klein-mic”, “klein-headset”, “orion-labs-ptt”, “samsung-tab-active”, “peplink-router”, “verizon-plan”, “tmobile-plan”],
},
{
id: “school-safety-kit”,
name: “School Safety & Identity Kit”,
vertical: “school-transportation”,
subtitle: “Verified student transportation with resilient communications and managed devices.”,
price: 3699,
items: [“fred-platform”, “samsung-tab-active”, “proclip-dock”, “klein-mic”, “klein-headset”, “orion-labs-ptt”, “peplink-router”, “starlink-failover”, “suremdm”],
},
{
id: “nemt-operations-kit”,
name: “NEMT Operations Kit”,
vertical: “nemt”,
subtitle: “Reservations, dispatch, and rider verification infrastructure for medical transportation.”,
price: 3199,
items: [“samsung-tab-active”, “klein-headset”, “klein-mic”, “orion-labs-ptt”, “cradlepoint-router”, “verizon-plan”, “fred-platform”],
},
];
const categoryCards = [
{ title: “Vehicle Hardware”, icon: TabletSmartphone, items: [“Samsung computing”, “ProClip docking”, “LAVA hubs”] },
{ title: “Communications”, icon: Mic, items: [“Klein microphones”, “Klein headsets”, “Orion Labs PTT & VoIP”] },
{ title: “Connectivity”, icon: Router, items: [“Verizon”, “T-Mobile”, “Peplink”, “Cradlepoint”] },
{ title: “Resilience”, icon: Satellite, items: [“Starlink failover”, “Dual-SIM failover”] },
{ title: “Visibility & Safety”, icon: Camera, items: [“Cameras”, “Samsara telematics”, “Stop alerts”] },
{ title: “Identity & Software”, icon: ShieldCheck, items: [“F.R.E.D.”, “TSL”, “42Gears SureMDM”] },
];
function currency(v) {
return new Intl.NumberFormat(“en-US”, { style: “currency”, currency: “USD”, maximumFractionDigits: 0 }).format(v);
}
function getProduct(id) {
return products.find((p) => p.id === id);
}
function ProductGlyph({ category }) {
if (category === “Vehicle Hardware”) return
;
if (category === “Communications”) return
;
if (category === “Connectivity”) return
;
if (category === “Resilience”) return
;
if (category === “Visibility & Safety”) return
;
if (category === “Passenger Systems”) return
;
return
;
}
function NavBar({ onNavigate, currentPage, cartCount }) {
const [open, setOpen] = useState(false);
const navItems = [
[“Home”, “home”],
[“Shop”, “catalog”],
[“Public Transit”, “public-transit”],
[“School”, “school-transportation”],
[“Configurator”, “configurator”],
];
return (
onNavigate(“home”)}>
TTH
TransitTechHub.com
by Transit AMS LLC
{navItems.map(([label, key]) => (
onNavigate(key)}
className={`rounded-xl px-4 py-2 text-sm transition ${currentPage === key ? “bg-white text-slate-950” : “text-slate-300 hover:bg-white/5 hover:text-white”}`}
>
{label}
))}
onNavigate(“cart”)} className=”relative rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-white hover:bg-white/10″>
{cartCount} }
Request Deployment Plan
setOpen(!open)}>
{open ?
{open && (
{navItems.map(([label, key]) => (
{ onNavigate(key); setOpen(false); }} className=”rounded-xl bg-white/5 px-4 py-3 text-left text-sm text-white”>
{label}
))}
{ onNavigate(“cart”); setOpen(false); }} className=”rounded-xl bg-white/5 px-4 py-3 text-left text-sm text-white”>Cart ({cartCount})
)}
);
}
function BrandBar() {
return (
{brands.map((b) => (
{b}
))}
);
}
function Hero({ onNavigate }) {
return (
Transportation infrastructure marketplace
Always-on transportation infrastructure.
Hardware, connectivity, communications, identity, and software delivered as one cleaner buying experience for every transportation vertical.
onNavigate(“configurator”)} className=”rounded-2xl bg-cyan-400 px-6 py-6 text-base font-semibold text-slate-950 hover:bg-cyan-300″>Build Your Fleet Stack
onNavigate(“catalog”)} className=”rounded-2xl border-white/20 bg-white/5 px-6 py-6 text-base text-white hover:bg-white/10″>Shop Products
Live system status
Technology That Moves Transit Forward
PTT Active
Klein + Orion connected
LTE Connected
Verizon / T-Mobile online
Starlink Failover Ready
Resilient network standby
Driver communications
Klein microphone + Orion voice
Vehicle computing
Samsung MDT in secure mount
Network layer
Router + multi-carrier connectivity
Visibility & safety
Camera system and live field view
);
}
function SchoolHeroVisual() {
return (
School transportation
F.R.E.D.-focused student safety chain
Verified driver, verified student, resilient communication, and a full audit trail from stop to school and back home.
{[
[“Home”, “Parent visibility”],
[“Bus Stop”, “Verified pickup”],
[“School Bus”, “Driver + student identity”],
[“School”, “Arrival confirmation”],
[“Return Home”, “End-of-trip audit”],
].map(([title, sub], idx) => (
{idx < 4 &&
}
))}
F.R.E.D. Identity Active
Biometric and NFC verification enabled
School Ops Connected
Dispatch, reservations, and parent comms online
Driver + Route Verified
Every trip tied to route identity
Communications
Klein mic + headset with Orion voice
Vehicle stack
Samsung tablet, mount, and router
Identity layer
F.R.E.D. biometrics and NFC workflows
Resilience
Multi-carrier + Starlink failover
);
}
function VerticalGrid({ onNavigate }) {
return (
Shop by vertical
Select your transportation vertical
Every vertical page now includes cleaner product cards, bundle patterns, and direct paths into product detail pages and cart states.
{verticals.map((v) => {
const Icon = v.icon;
return (
onNavigate(v.id)} className=”text-left”>
{v.name}
{v.desc}
Explore stack
);
})}
);
}
function StackSection() {
const layers = [
{ name: “Operating Systems”, detail: “TSL, F.R.E.D., dispatch, CAD/AVL, school transportation software”, color: “bg-violet-500/90”, icon: Layers3 },
{ name: “Vehicle Systems”, detail: “Samsung computing, ProClip docks, LAVA hubs, APCs, signage, cameras”, color: “bg-teal-500/90”, icon: TabletSmartphone },
{ name: “Communications”, detail: “Klein microphones and headsets, Orion Labs PTT & VoIP”, color: “bg-orange-500/90”, icon: Radio },
{ name: “Connectivity”, detail: “Verizon, T-Mobile, Peplink, Cradlepoint”, color: “bg-yellow-400 text-slate-950”, icon: Wifi },
{ name: “Resilience”, detail: “Starlink failover, dual-SIM continuity, always-on architecture”, color: “bg-cyan-400 text-slate-950”, icon: Satellite },
{ name: “Identity”, detail: “F.R.E.D. biometrics, NFC, verification, audit trail”, color: “bg-rose-500/90”, icon: ShieldCheck, tall: true },
];
return (
Platform architecture
One platform. Every layer of transportation.
TransitTechHub brings curated infrastructure together under one commerce layer, with a cleaner e-commerce system underneath the vertical-first experience.
{layers.map((layer) => {
const Icon = layer.icon;
return (
{layer.detail}
Transit AMS LLC
);
})}
);
}
function FeaturedProducts({ onNavigate, onAdd }) {
const featured = [“samsung-tab-active”, “klein-mic”, “peplink-router”, “fred-platform”];
return (
Featured products
Cleaner production product cards
onNavigate(“catalog”)} className=”rounded-2xl border-white/20 bg-white/5 text-white hover:bg-white/10″>Browse catalog
{featured.map((id) => {
const p = getProduct(id);
return
;
})}
);
}
function BundlesSection({ onAddBundle }) {
return (
System bundles
Pre-configured kits that shorten buying cycles
{bundles.map((bundle) => (
{verticals.find((v) => v.id === bundle.vertical)?.name || “Bundle”}
{bundle.name}
{bundle.subtitle}
{bundle.items.slice(0, 4).map((id) => (
))}
+ {bundle.items.length – 4} more components
Bundle price
{currency(bundle.price)}
onAddBundle(bundle.id)} className=”rounded-2xl bg-cyan-400 text-slate-950 hover:bg-cyan-300″>Add bundle
))}
);
}
function CategoriesSection({ onNavigate }) {
return (
Shoppable categories
Curated infrastructure, organized for fast buying.
{categoryCards.map((c) => {
const Icon = c.icon;
return (
onNavigate(“catalog”)} className=”text-left”>
{c.title}
{c.items.map((item) => (
))}
);
})}
);
}
function OutcomesSection() {
const outcomes = [
[“Always-on communication”, “Multi-network connectivity, resilient failover, and field-to-control-center voice paths.”],
[“Reduced operational risk”, “Hardware, software, and connectivity designed as one stack instead of disconnected tools.”],
[“Real-time visibility”, “Routers, tablets, dispatch, cameras, telematics, and cloud coordination aligned by vertical.”],
[“Verified identity”, “F.R.E.D. enables biometric or NFC-aware operations where authentication matters most.”],
];
return (
Business outcomes
What TransitTechHub delivers
{outcomes.map(([title, body]) => (
{title}
{body}
))}
);
}
function FooterCTA({ onNavigate }) {
return (
Next step
Modernize your transportation infrastructure.
Shop by vertical, configure a full stack, or move from bundle selection to a true product detail and cart workflow.
onNavigate(“configurator”)} className=”rounded-2xl bg-cyan-400 px-6 py-6 text-base font-semibold text-slate-950 hover:bg-cyan-300″>Build Your Stack
onNavigate(“catalog”)} className=”rounded-2xl border-white/20 bg-white/5 px-6 py-6 text-base text-white hover:bg-white/10″>Browse Catalog
);
}
function ProductCard({ product, onNavigate, onAdd }) {
return (
{product.brand}
{product.name}
{product.subtitle}
Starting at
{currency(product.price)}
onNavigate(`product:${product.id}`)} className=”rounded-2xl border-white/20 bg-white/5 text-white hover:bg-white/10″>View
onAdd(product.id)} className=”rounded-2xl bg-cyan-400 text-slate-950 hover:bg-cyan-300″>Add
);
}
function CatalogPage({ onNavigate, onAdd }) {
const [query, setQuery] = useState(“”);
const [filter, setFilter] = useState(“All”);
const categories = [“All”, …Array.from(new Set(products.map((p) => p.category)))];
const filtered = products.filter((p) => {
const matchCategory = filter === “All” || p.category === filter;
const q = query.toLowerCase();
const matchQuery = !q || [p.name, p.brand, p.subtitle, p.category].join(” “).toLowerCase().includes(q);
return matchCategory && matchQuery;
});
return (
Catalog
Shop transportation infrastructure
Browse by category, search by brand, and move into true product detail pages with related solutions and cart-ready actions.
);
}
function ProductDetailPage({ product, onNavigate, onAdd, onAddBundle }) {
const related = product.relatedIds.map(getProduct).filter(Boolean);
const relatedBundles = bundles.filter((b) => b.items.includes(product.id));
return (
onNavigate(“catalog”)} className=”mb-8 text-sm text-cyan-300″>← Back to catalog
{product.brand}
{product.name}
{product.description}
Category
{product.category}
Starting price
{currency(product.price)}
Positioning
{product.badge}
Key features
{product.features.map((f) =>
)}
Applications
{product.applications.map((a) =>
)}
Works in these verticals
{product.compatibleVerticals.map((id) => (
onNavigate(id)} className=”rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-300 hover:bg-white/10″>
{verticals.find((v) => v.id === id)?.name || id}
))}
Purchase
{currency(product.price)}
{product.subtitle}
onAdd(product.id)} className=”flex-1 rounded-2xl bg-cyan-400 text-slate-950 hover:bg-cyan-300″>Add to cart
Request quote
Supports direct cart actions, quote flow, compatible verticals, and related system bundles.
Part of these system bundles
{relatedBundles.map((bundle) => (
{bundle.name}
{bundle.subtitle}
onAddBundle(bundle.id)} className=”rounded-2xl bg-cyan-400 text-slate-950 hover:bg-cyan-300″>Add
))}
{relatedBundles.length === 0 &&
No bundles mapped yet.
}
{related.length > 0 && (
)}
);
}
function VerticalSection({ title, ids, onNavigate, onAdd }) {
const items = ids.map(getProduct).filter(Boolean);
return (
{title}
Products aligned to this operating layer
);
}
function VerticalPage({ data, onNavigate, onAdd, onAddBundle }) {
const sectionsMap = {
“public-transit”: {
comms: [“klein-mic”, “klein-headset”, “orion-labs-ptt”],
connectivity: [“peplink-router”, “cradlepoint-router”, “verizon-plan”, “tmobile-plan”, “starlink-failover”],
vehicle: [“samsung-tab-active”, “proclip-dock”, “lava-hub”],
systems: [“tsl-cadavl”, “suremdm”, “samsara-telematics”, “camera-system”, “apc-suite”, “sunrise-signage”],
bundles: [“transit-comm-kit”],
},
“school-transportation”: {
comms: [“klein-mic”, “klein-headset”, “orion-labs-ptt”],
connectivity: [“peplink-router”, “verizon-plan”, “tmobile-plan”, “starlink-failover”],
vehicle: [“samsung-tab-active”, “proclip-dock”, “lava-hub”],
systems: [“fred-platform”, “tsl-cadavl”, “suremdm”, “camera-system”, “sunrise-signage”],
bundles: [“school-safety-kit”],
},
“nemt”: {
comms: [“klein-mic”, “klein-headset”, “orion-labs-ptt”],
connectivity: [“cradlepoint-router”, “verizon-plan”, “tmobile-plan”, “starlink-failover”],
vehicle: [“samsung-tab-active”, “proclip-dock”],
systems: [“fred-platform”, “tsl-cadavl”, “suremdm”, “camera-system”],
bundles: [“nemt-operations-kit”],
},
};
const mapped = sectionsMap[data.id] || {
comms: [“klein-mic”, “klein-headset”, “orion-labs-ptt”],
connectivity: [“peplink-router”, “verizon-plan”, “tmobile-plan”],
vehicle: [“samsung-tab-active”],
systems: [“suremdm”],
bundles: [],
};
const Icon = data.icon;
return (
onNavigate(“home”)} className=”mb-8 text-sm text-cyan-300″>← Back to homepage
Vertical solution
Request Quote
onNavigate(“configurator”)} className=”rounded-2xl border-white/20 bg-white/5 px-6 py-6 text-base text-white hover:bg-white/10″>Configure This Stack
{data.outcomes.map((o) => (
{o}
))}
{data.id === “school-transportation” ? (
) : (
Recommended system bundle
{mapped.bundles.map((id) => {
const bundle = bundles.find((b) => b.id === id);
if (!bundle) return null;
return (
{bundle.name}
{bundle.subtitle}
{currency(bundle.price)}
onAddBundle(bundle.id)} className=”mt-5 rounded-2xl bg-cyan-400 text-slate-950 hover:bg-cyan-300″>Add bundle to cart
);
})}
{mapped.bundles.length === 0 &&
Bundle mapping can be expanded for this vertical.
}
)}
);
}
function CartPage({ cart, setCart, onNavigate }) {
const entries = Object.entries(cart).filter(([, qty]) => qty > 0);
const lineItems = entries.map(([id, qty]) => {
const product = getProduct(id);
return product ? { type: “product”, id, qty, price: product.price, name: product.name, subtitle: product.subtitle } : null;
}).filter(Boolean);
const subtotal = lineItems.reduce((sum, item) => sum + item.price * item.qty, 0);
const inc = (id) => setCart((prev) => ({ …prev, [id]: (prev[id] || 0) + 1 }));
const dec = (id) => setCart((prev) => ({ …prev, [id]: Math.max(0, (prev[id] || 0) – 1) }));
return (
Cart state
Your fleet cart
A production-ready cart pattern with editable quantities, subtotaling, and a direct path to quote or checkout handoff.
onNavigate(“catalog”)} className=”rounded-2xl border-white/20 bg-white/5 text-white hover:bg-white/10″>Continue shopping
{lineItems.length === 0 ? (
Your cart is empty
Add products or system bundles from the catalog, configurator, or vertical pages.
onNavigate(“catalog”)} className=”mt-6 rounded-2xl bg-cyan-400 text-slate-950 hover:bg-cyan-300″>Browse catalog
) : (
{lineItems.map((item) => (
{item.name}
{item.subtitle}
onNavigate(`product:${item.id}`)} className=”mt-4 text-sm text-cyan-300″>View product details
dec(item.id)} className=”rounded-xl p-2 text-white hover:bg-white/10″>
{item.qty}
inc(item.id)} className=”rounded-xl p-2 text-white hover:bg-white/10″>
Line total
{currency(item.price * item.qty)}
))}
Summary
Items {lineItems.reduce((s, i) => s + i.qty, 0)}
Platform subtotal {currency(subtotal)}
Estimated total {currency(subtotal)}
Proceed to checkout
Request formal quote
Designed for blended e-commerce and enterprise quote workflows.
)}
);
}
function ConfiguratorPage({ onAdd }) {
const [step, setStep] = useState(1);
const [vertical, setVertical] = useState(“public-transit”);
const [fleetSize, setFleetSize] = useState(“25-100”);
const [features, setFeatures] = useState([“PTT / VoIP”, “Resilient connectivity”, “Identity / F.R.E.D.”]);
const options = [“PTT / VoIP”, “Resilient connectivity”, “Identity / F.R.E.D.”, “Cameras / telematics”, “APCs / signage”, “MDM / device management”];
const chosenVertical = useMemo(() => verticals.find((v) => v.id === vertical) || verticals[0], [vertical]);
const recommendations = useMemo(() => {
const base = [“samsung-tab-active”, “proclip-dock”, “peplink-router”, “verizon-plan”, “tmobile-plan”, “starlink-failover”, “klein-mic”, “klein-headset”, “orion-labs-ptt”];
if (features.includes(“Identity / F.R.E.D.”)) base.push(“fred-platform”);
if (features.includes(“MDM / device management”)) base.push(“suremdm”);
if (features.includes(“Cameras / telematics”)) base.push(“camera-system”, “samsara-telematics”);
if (features.includes(“APCs / signage”)) base.push(“apc-suite”, “sunrise-signage”);
return Array.from(new Set(base));
}, [features]);
const toggleFeature = (f) => setFeatures((prev) => prev.includes(f) ? prev.filter((x) => x !== f) : […prev, f]);
return (
Clickable prototype
Build your fleet stack
This flow now feeds directly into product-level cart actions, making the configurator a real commerce gateway instead of a static recommendation tool.
Configuration progress
Step {step} of 4
{[1,2,3,4].map((s) => (
setStep(s)} className={`w-full rounded-2xl border px-4 py-4 text-left ${step === s ? “border-cyan-400/40 bg-cyan-400/10 text-white” : “border-white/10 bg-white/5 text-slate-300”}`}>
Step {s}
{s===1?”Select vertical”:s===2?”Choose fleet size”:s===3?”Select capabilities”:”Review your output”}
))}
{step === 1 && (
Select your transportation vertical
{verticals.slice(0,6).map((v) => {
const Icon = v.icon;
return (
setVertical(v.id)} className={`rounded-2xl border p-4 text-left ${vertical === v.id ? “border-cyan-400/40 bg-cyan-400/10” : “border-white/10 bg-white/5”}`}>
{v.desc}
);
})}
)}
{step === 2 && (
Choose fleet size
{[“1-25”, “25-100”, “100+”].map((size) => (
setFleetSize(size)} className={`rounded-2xl border p-6 text-left ${fleetSize === size ? “border-cyan-400/40 bg-cyan-400/10” : “border-white/10 bg-white/5”}`}>
{size}
Vehicles in operation
))}
)}
{step === 3 && (
Select capabilities
{options.map((f) => (
toggleFeature(f)} className={`rounded-2xl border p-4 text-left ${features.includes(f) ? “border-cyan-400/40 bg-cyan-400/10” : “border-white/10 bg-white/5”}`}>
{f}
{features.includes(f) &&
}
))}
)}
{step === 4 && (
Your recommended infrastructure
Vertical
{chosenVertical.name}
{recommendations.map((id) => {
const p = getProduct(id);
if (!p) return null;
return (
onAdd(id)} className=”rounded-xl bg-cyan-400 px-3 py-2 text-xs font-medium text-slate-950″>Add
);
})}
recommendations.forEach((id) => onAdd(id))} className=”rounded-2xl bg-cyan-400 px-6 py-6 text-base font-semibold text-slate-950 hover:bg-cyan-300″>Add Full System to Cart
Request Quote
)}
setStep((s) => Math.max(1, s – 1))} className=”rounded-2xl border-white/20 bg-white/5 px-5 text-white hover:bg-white/10 disabled:opacity-40″>Back
setStep((s) => Math.min(4, s + 1))} className=”rounded-2xl bg-cyan-400 px-5 text-slate-950 hover:bg-cyan-300″>{step === 4 ? “Finished” : “Continue”}
);
}
export default function TransitTechHubPrototype() {
const [page, setPage] = useState(“home”);
const [cart, setCart] = useState({});
const productPageId = page.startsWith(“product:”) ? page.split(“:”)[1] : null;
const vertical = verticals.find((v) => v.id === page);
const cartCount = Object.values(cart).reduce((sum, qty) => sum + qty, 0);
const addToCart = (id) => setCart((prev) => ({ …prev, [id]: (prev[id] || 0) + 1 }));
const addBundleToCart = (bundleId) => {
const bundle = bundles.find((b) => b.id === bundleId);
if (!bundle) return;
setCart((prev) => {
const next = { …prev };
bundle.items.forEach((id) => {
next[id] = (next[id] || 0) + 1;
});
return next;
});
};
return (
{page === “home” && (
<>
);
}
