Site logistique / Coordination de fret
LogisticsFlow
Une demo de site logistique et coordination de fret concue pour montrer comment une entreprise B2B peut presenter ses services clairement, generer des demandes et proposer des outils interactifs comme le suivi d'expedition dans une seule experience frontend haut de gamme.
Tech stack
Astro • TypeScript • Tailwind CSS • Zod
Montre un design B2B premium, un suivi d'expedition interactif, un formulaire valide, une base SEO solide et une architecture frontend prete pour de futures integrations backend.
Vue d’ensemble
LogisticsFlow est une demo frontend portfolio pour une entreprise fictive de logistique et coordination de fret. L’objectif n’etait pas de creer une simple vitrine, mais de montrer comment un site B2B moderne peut presenter une offre clairement, generer des demandes qualifiees et integrer des experiences interactives qui ressemblent deja a un vrai produit.
Ce que cette demo montre
- Un design B2B premium (une interface enterprise sobre, moderne et credible)
- Une experience frontend plus proche d’un produit que d’une simple page marketing
- Une structure scalable (contenu, validation, composants UI et logique utilitaire bien separes)
- Des bases SEO et accessibilite solides (metadata, canonical, focus states et reduced motion)
- Une architecture prete pour integration (les donnees de suivi de demo peuvent etre remplacees plus tard par une vraie API)
Ce que les visiteurs peuvent faire
- Parcourir une homepage complete avec services, workflow, secteurs, capacites de plateforme et valeur business
- Explorer plusieurs modules de service comme la coordination de fret, l’entreposage, la planification de routes, le support cross-border et la communication dediee avec un account manager
- Utiliser une demo de suivi d’expedition en entrant un numero de suivi et voir le statut, l’ETA, l’itineraire, l’origine, la destination, le niveau de service, la localisation actuelle et les etapes du trajet
- Envoyer une demande de contact via un formulaire valide
- Consulter les pages privacy et terms pour donner au projet le niveau de finition d’un vrai site d’entreprise
Fonctions orientees business
- Mise en page responsive avec navigation fixe et menu mobile
- Validation du numero de suivi avant affichage des resultats
- Etats de chargement, succes et erreur pour une experience plus credible
- Formulaire de contact avec feedback champ par champ et honeypot anti-spam
- Rendu static-first pour de bonnes performances et une complexite front reduite
- Separation du contenu et des donnees pour faciliter l’evolution du site
Notes de demo
- Le suivi repose sur des donnees locales de demo, mais la logique de validation et de recherche est deja separee pour permettre un branchement sur un vrai backend
- Le formulaire de contact valide deja les champs et peut envoyer les demandes vers un endpoint reel une fois configure
- La marque est fictive, mais la structure suit des pratiques frontend proches d’un vrai projet en production
Webitectural