Spedition und Logistik Website Sections
Für Speditionen, Transportunternehmen und Logistiker. Sendungsverfolgung, das Netz auf einer gezeichneten Karte, die Flotte maßstabsgetreu, eine Frachtanfrage und Laufzeiten nach Postleitzahl.
Kategorie wechseln
Marketing
- Hero17
- Features19
- Logo Clouds8
- Stats12
- Pricing11
- Testimonials15
- Call to Action11
- FAQ7
- Newsletter12
- Banners14
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust12
- Changelog und Roadmap10
- Launch und Waitlist14
- Product Tour6
- Press und Awards15
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Artikel-Bausteine20
- Gallery7
- Team8
- About11
- Content16
- Process7
- Contact8
- Comparison9
- Integrations9
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars10
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Analysen und Berichte10
- Tables6
- Settings5
- AI und Chat24
- Calendar5
- Inbox und Messages5
- Notifications6
- Files11
- Projects6
- Aufgaben und Planung20
- CRM und Rechnungen10
- Team und Zusammenarbeit20
- Karten und Orte4
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten22
- KI-Schreiben und Erstellen22
- KI-Einrichtung18
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
- Bauunternehmen5
- Solarbetrieb5
- Spedition und Logistik5
- Hotel4
- Verein und Hilfsorganisation5
- Apotheke5
- Optiker5
- Physiotherapie5
- Kreativagentur5
- Finanz-App5
- Restaurant4
- Club und Bar4
- Bäckerei4
- Yogastudio4
Elements
- Buttons35
- Forms und Inputs45
- Picker und Auswahlfelder29
- Spezielle Eingabefelder24
- Cards10
- Overlays44
- Navigation21
- Menüleisten und Umschalter14
- Data Display35
- Fortschritt und Zustände18
- Listen, Bäume und Timelines17
- Charts39
- Vergleichs-Charts34
- Statistik-Charts24
- KPI-, Live- und Karten-Charts26
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media27
- Code und JSON8
- Panels und Splitter4
Jede Palette auf ihrem Weg
Versender kommen auf die Website einer Spedition, um eine Sendung zu verfolgen, einen Preis anzufragen oder Laufzeiten zu prüfen. Diese Sections bedienen alle drei und zeigen das Netz und die Flotte hinter dem Versprechen. Karten und Fahrzeuge sind gezeichnet, die Seite kommt also mit sich selbst aus.
Die „Sendungsverfolgung“ nimmt eine Nummer auf und fährt einen Lkw durch fünf Schritte, der Verlauf folgt Eintrag für Eintrag, unbekannte Nummern bekommen einen hilfreichen Hinweis. „Netz und Standorte“ zeichnet Hubs, Depots und Partner auf eine Karte, der gewählte Standort zeigt Lager, Rampen, Leistungen und Telefon. „Flotte“ zeichnet Fahrzeugtypen maßstäblich gegen einen 13,6-Meter-Auflieger und füllt den Ladeplan mit Paletten. Die „Frachtanfrage“ fragt Strecke, Ware, Paletten, Gewicht und Extras ab, zählt die Lademeter und nennt das passende Fahrzeug. „Laufzeiten“ listet Relationen ab dem gewählten Depot mit Annahmeschluss und Abfahrtstagen und findet die Relation zu einer Postleitzahl.
Stell die Sendungsverfolgung in den Header oder auf den ersten Bildschirm, sie ist die meistgenutzte Funktion der Seite. In der Frachtanfrage sehen Versender an Lademetern und Fahrzeug sofort, ob die Anfrage passt. Halte die Laufzeiten aktuell, an ihnen messen Kunden dein Versprechen.
Spedition und Logistik
Details
Was Spedition und Logistik mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- Industries
- Variants
- 5
- Version
- 1.0.0 · seit 1.2.0
- Datei
- components/ui/logistics.tsx
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 81 eigene Texte
- Studio
- Im Code anpassen
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle LogisticsProps aus components/ui/logistics.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalLogisticsVarianttrackingnetworkfleetquotetransit-times
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodeshipmentsoptionalShipment[]tracking
defaultNumberoptionalstringtracking: number shown on load
locationsoptionalLogisticsLocation[]network
vehiclesoptionalLogisticsVehicle[]fleet, quote (the vehicle that fits)
onSubmitoptional(data: FreightQuote) => voidquote
originsoptional{ id: string; name: string }[]transit-times
lanesoptionalTransitLane[]
Eingebaute Texte
Diese Texte schreibt Spedition und Logistik selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 81 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| number | Englisch Tracking number | Deutsch Sendungsnummer |
| numberHint | Englisch You find it on the delivery note, for example {example} | Deutsch Sie steht auf dem Lieferschein, zum Beispiel {example} |
| find | Englisch Track shipment | Deutsch Sendung verfolgen |
| required | Englisch Please fill in this field. | Deutsch Bitte füllen Sie dieses Feld aus. |
| notFound | Englisch We could not find this number. Please check it against your delivery note. | Deutsch Diese Nummer finden wir nicht. Bitte gleichen Sie sie mit dem Lieferschein ab. |
| booked | Englisch Booked | Deutsch Gebucht |
| picked-up | Englisch Picked up | Deutsch Abgeholt |
| in-transit | Englisch On the way | Deutsch Unterwegs |
| out-for-delivery | Englisch Out for delivery | Deutsch In Zustellung |
| delivered | Englisch Delivered | Deutsch Zugestellt |
| eta | Englisch Expected delivery | Deutsch Voraussichtliche Zustellung |
| deliveredOn | Englisch Delivered | Deutsch Zugestellt |
| history | Englisch History | Deutsch Verlauf |
| from | Englisch From | Deutsch Von |
| to | Englisch To | Deutsch Nach |
| locations | Englisch Locations | Deutsch Standorte |
| hub | Englisch Hub | Deutsch Hub |
| depot | Englisch Depot | Deutsch Depot |
| partner | Englisch Partner | Deutsch Partner |
| area | Englisch Warehouse | Deutsch Lager |
| sqm | Englisch {n} m² | Deutsch {n} m² |
| docks | Englisch Loading docks | Deutsch Rampen |
| hours | Englisch Opening hours | Deutsch Öffnungszeiten |
| call | Englisch Call {name} | Deutsch {name} anrufen |
| vehicle | Englisch Vehicle | Deutsch Fahrzeug |
| payload | Englisch Payload | Deutsch Nutzlast |
| kg | Englisch {n} kg | Deutsch {n} kg |
| pallets | Englisch Euro pallets | Deutsch Europaletten |
| volume | Englisch Volume | Deutsch Volumen |
| m3 | Englisch {n} m³ | Deutsch {n} m³ |
| inner | Englisch Load space | Deutsch Laderaum |
| dims | Englisch {l} × {w} × {h} m | Deutsch {l} × {w} × {h} m |
| inFleet | Englisch {n} in our fleet | Deutsch {n} in unserer Flotte |
| loadPlan | Englisch Load plan from above | Deutsch Ladeplan von oben |
| lengthM | Englisch {n} m | Deutsch {n} m |
| route | Englisch Route | Deutsch Strecke |
| pickup | Englisch Pickup postcode and town | Deutsch Abholung, PLZ und Ort |
| delivery | Englisch Delivery postcode and town | Deutsch Zustellung, PLZ und Ort |
| date | Englisch Pickup date | Deutsch Abholdatum |
| freight | Englisch Freight | Deutsch Fracht |
| groupage | Englisch Groupage | Deutsch Stückgut |
| part | Englisch Part load | Deutsch Teilladung |
| full | Englisch Full load | Deutsch Komplettladung |
| chilled | Englisch Chilled | Deutsch Kühlware |
| palletsN | Englisch Pallets | Deutsch Paletten |
| less | Englisch One pallet less | Deutsch Eine Palette weniger |
| more | Englisch One pallet more | Deutsch Eine Palette mehr |
| weight | Englisch Total weight | Deutsch Gesamtgewicht |
| extras | Englisch Extras | Deutsch Extras |
| tailLift | Englisch Tail lift at delivery | Deutsch Hebebühne bei Zustellung |
| notice | Englisch Call before delivery | Deutsch Anruf vor Zustellung |
| dangerous | Englisch Dangerous goods | Deutsch Gefahrgut |
| company | Englisch Company | Deutsch Firma |
| name | Englisch Name | Deutsch Name |
| Englisch Email | Deutsch E-Mail | |
| phone | Englisch Phone | Deutsch Telefon |
| invalidEmail | Englisch Please enter a valid email address. | Deutsch Bitte geben Sie eine gültige E-Mail-Adresse ein. |
| invalidWeight | Englisch Please enter the weight in kg. | Deutsch Bitte geben Sie das Gewicht in kg an. |
| summary | Englisch Your freight | Deutsch Ihre Fracht |
| ldm | Englisch Loading metres | Deutsch Lademeter |
| fits | Englisch Fits into | Deutsch Passt in |
| tooBig | Englisch We split this freight over several vehicles | Deutsch Diese Fracht verteilen wir auf mehrere Fahrzeuge |
| send | Englisch Request a quote | Deutsch Angebot anfordern |
| sent | Englisch Thank you, your request is with dispatch | Deutsch Danke, Ihre Anfrage ist bei der Disposition |
| sentText | Englisch You receive a fixed price by email, usually within two hours on working days. | Deutsch Sie bekommen einen Festpreis per E-Mail, an Werktagen meist innerhalb von zwei Stunden. |
| again | Englisch Request another quote | Deutsch Weiteres Angebot anfordern |
| origin | Englisch Depart from | Deutsch Abfahrt ab |
| check | Englisch Postcode of the recipient | Deutsch Postleitzahl des Empfängers |
| checkHint | Englisch Shows the lane and the transit time | Deutsch Zeigt Linie und Laufzeit |
| checkBtn | Englisch Check transit time | Deutsch Laufzeit prüfen |
| codeError | Englisch Please enter at least the first two digits of the postcode. | Deutsch Bitte geben Sie mindestens die ersten zwei Ziffern der Postleitzahl ein. |
| region | Englisch Region | Deutsch Region |
| codes | Englisch Postcodes | Deutsch PLZ |
| codesN | Englisch {a} to {b} | Deutsch {a} bis {b} |
| transit | Englisch Transit time | Deutsch Laufzeit |
| hoursN | Englisch {n} h | Deutsch {n} Std. |
| cutoff | Englisch Book by | Deutsch Buchen bis |
| days | Englisch Departures | Deutsch Abfahrten |
| express | Englisch Express | Deutsch Express |
| answer | Englisch Book by {time}, the freight arrives within {n} hours. | Deutsch Bis {time} buchen, die Fracht ist innerhalb von {n} Stunden da. |
| noLane | Englisch For this postcode we arrange a partner lane. Ask dispatch for the transit time. | Deutsch Für diese Postleitzahl fahren wir mit einem Partner. Die Laufzeit nennt Ihnen die Disposition. |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Spedition und Logistik reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
- Setzt aria-checked, aria-invalid, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen img, radio, radiogroup, search und status.
- Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
- Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
- Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
- Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.
Bewegung
- Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
- Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Spedition und Logistik?
Mit aiw add @ai-website/logistics. Der Befehl legt die Datei components/ui/logistics.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section, motion, input und checkbox. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Spedition und Logistik?
5 Varianten, Sendungsverfolgung, Netz und Standorte, Flotte, Frachtanfrage und Laufzeiten. Du wählst sie mit der Prop variant, zum Beispiel variant="network".
Kann ich die Texte von Spedition und Logistik übersetzen?
Ja. Spedition und Logistik bringt 81 eigene Texte auf Deutsch und Englisch mit, etwa „Sendungsnummer“, „Sendung verfolgen“ und „Bitte füllen Sie dieses Feld aus.“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Spedition und Logistik einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Spedition und Logistik mit aiw_components und installieren sie mit aiw_add @ai-website/logistics. Nenn im Prompt die Variante, etwa variant="tracking", dann schreibt der Assistent deine Inhalte direkt in die Props.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Industries, demselben Bereich des Kits.
- SolarbetriebErsparnis-Schätzung, Ablauf bis zur Inbetriebnahme, Förderung und Finanzierung, Anlagenpakete und Live-Ertrag.
- HotelDas Haus Etage für Etage, Raten mit Storno, Arrangements Tag für Tag und Online-Check-in.
- BauunternehmenBauleistungen, Referenzen mit Kennzahlen, Bauablauf, Baustellen-Fortschritt und Anfrage zum Bauvorhaben.
- Verein und HilfsorganisationWirkung in Zahlen, Jahresbericht, Mittelverwendung, Projekte auf der Karte und Ehrenamt mit Anmeldung.
- Alles aus IndustriesFertige Sections für Praxen, Restaurants, Handwerk, Hotels, Schulen, Vereine und Creator.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Spedition und Logistik stehen.
Quellcode lädt