Executive Summary
Importers shipping from China need to trust a forwarder before they send goods. RoyalJet needed a site that shows real operations, explains sea and air options clearly and turns visitors into quote requests without a heavy backend.
A fast static React site built around RoyalJet's own photos. Every quote and tracking request routes to WhatsApp pre-filled with the customer's details, the Guangzhou warehouse address copies in one click for suppliers, and each page ships its own metadata and structured data.
Core Capabilities & System Highlights
Cinematic Hero Slider
Crossfading photo slides with slow zoom, animated headlines and progress bars. Autoplay pauses on hover or when off-screen, with swipe and keyboard support.
Tracking Entry Point
Tracking field in the hero and on its own page, with a graceful maintenance notice that hands the customer to WhatsApp for a manual update.
One-Click Warehouse Address
The exact Chinese warehouse address with copy-to-clipboard and an English translation, ready to paste to suppliers.
WhatsApp Quote Flow
The quote form opens WhatsApp pre-filled with the customer's details, so no backend or inbox is needed.
System Architecture & Specs
React + TypeScript on Vite
Route-level code splitting, lazy-loaded images and self-hosted variable fonts with no external font requests.
Framer Motion + Tailwind CSS v4
Scroll parallax photo compositions, reveal animations and a service marquee, all respecting prefers-reduced-motion.
Build-Time Sitemap & Structured Data
Per-page titles and descriptions, Open Graph image, JSON-LD organisation data, and sitemap.xml and robots.txt generated at build time.
Key Engineering Trade-offs & Operational Notes
The hero moved from 3D renders to RoyalJet's own photos, because real operations build more trust with importers.
Online tracking isn't live yet, so the UI says so and offers a manual WhatsApp update instead of faking a result.
Contact details, services and FAQs are edited from a single content file.
Tech Stack & Role Matrix
Every library and framework in RoyalJet Int'l Shipping & Logistics was chosen with intentional architectural trade-offs to balance speed, type safety, security, and scalability.
| Technology | Category | System Role | Performance Rationale |
|---|---|---|---|
| React | Framework | Component-based marketing pages | Keeps sliders, forms and galleries reusable across seven pages. |
| Vite | Build | Static build and dev server | Tiny static output that deploys anywhere with no server costs. |
| Framer Motion | Animation | Hero, parallax and reveal motion | Declarative animation with built-in reduced-motion support. |
| Tailwind CSS | Styling | Design system and responsive layout | Consistent spacing and colour tokens across every page. |
Live Preview & Showcase
Metrics & Reliability
Pages
Home, About, Services, How It Works, Track, Contact, 404
Backend
Quotes and tracking route to WhatsApp
Accessibility
Skip link, keyboard menu, ARIA and reduced motion