Logistics Company Homepage Template

A complete logistics company homepage built with Bootstrap 6 for a fictional freight forwarder called Kestrel Logistics. It suits carriers, freight forwarders, 3PL warehouses and courier firms.

How it works

The root .kl-page pins data-bs-theme="light", loads Sora and IBM Plex Mono, and re-maps the Bootstrap 6 primary role (--bs-primary-*) to the brand teal. Inside .kl-hero the same role is switched to lime, so the Track button turns lime on the dark background. Section by section:

1. Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> on mobile and a "Services" .menu using menu-item-icon and menu-item-description.
2. Hero tracker: the .kl-track form checks the number against PATTERN (KS-0000-0000). lookUp() resolves a demo shipment from SHIPMENTS, and render() fills the .kl-result card: route, status badge, progress bar and a four-step .stepper. Day offsets are relative to today, so dates never go stale. Wrong formats and unknown numbers show the .invalid-feedback text.
3. Stats and services: a lime <dl> band, two photo cards and four icon services in .kl-svc-grid.
4. How it works: a stepper md:stepper-horizontal inside .contains-inline, vertical on phones.
5. Network: an inline SVG map with dashed routes beside a flush list-group of hubs.
6. Clients: industry chips and three result cards.
7. Quote form: <form data-bs-validate novalidate> with a Combobox for freight mode, a Range for weight, toggle chips for special handling, simulated sending and a toast with a reference number.

Customization

• Change --kl-teal and --kl-lime on .kl-page in style.css to rebrand, and update the --bs-primary-* overrides next to them.
• Replace lookUp() in script.js with a fetch() to your tracking API; it must return the same shape as the entries in SHIPMENTS.
• Adjust PATTERN to match your own tracking number format, and update the placeholder and demo buttons (data-kl-demo).
• Add handling options as more .kl-chip buttons with a data-kl-handling value; pressed chips are collected in handling on submit.
• Replace the setTimeout in the quote submit handler with fetch() to your quote endpoint.
• Delete the .kl-network or #kl-clients section (and its navbar link) for a shorter page.
• The photos come from Unsplash; replace them with your own fleet and warehouse photos.

Use cases

• Freight forwarders: a hero tracking form checks the number and shows a result card with route and status
• Carriers and couriers: a four-step stepper shows shipment progress
• 3PL warehouses: an inline SVG hub map sits beside a list of hubs
• Quote requests: a form with a freight mode combobox, weight range and special handling chips

Accessibility

A skip link jumps to #kl-main. The result card is a polite live region with aria-busy during lookups, the tracking input gets aria-invalid and is described by the help and error text, the chips use aria-pressed, the map has role="img" with a label, and the toast uses role="status". Focus outlines are visible, and motion is removed under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Bootstrap 5 developers will notice: btn-solid theme-primary replaces btn-primary, Dropdown is now Menu, the navbar uses a Drawer instead of navbar-collapse, badges use badge-subtle theme-success, and breakpoints are prefixes such as lg:col-6. Stepper, chips, Combobox and Range are new in Bootstrap 6. The Combobox keeps its choice after a submit, as it has no reset method.