Freight Forwarding Landing Page With Flip Board Hero

A complete freight and shipping company website template: a mechanical flip board headline whose 3D flaps fall into place, a live shipment board, ticket-cut buttons, a carrier conveyor, a route timeline with a moving train, an arrivals board of results, shipping-label reviews, boarding-pass pricing, an information desk FAQ and a footer drawn as a transit map.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Features

Mechanical flip board text that flips through letters and lands left to right, in the navbar, the headline, the board and the footer
A live shipment board: every few seconds the top load leaves, statuses ripple down and a new departure flips in
Ticket-cut buttons with a perforation and notches; the stub tears a little away on hover
Features as stops on a route timeline: a train runs stop to stop and the track fills behind it
Boarding-pass pricing: each plan printed as a ticket with a perforated stub and barcode, monthly or yearly
Carriers ride a conveyor belt as parcels; results flip in on an arrivals board
Customer reviews printed on shipping labels that hang from a string and swing on hover
An information desk FAQ with numbered flap tiles and answers that slide open
A footer drawn as a transit map: each link column is a coloured line with a station per link
Holds still off screen and for reduced motion; keyboard reachable with visible focus

Best for: Freight forwarders, trucking and shipping companies, and transport booking or dispatch apps that want a website no competitor has.

Installation

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Props

Prop	Type	Default	Description
content	TransitContent	-	Everything the page says: brand, nav, hero, departures, route stops, fares and the closing board.
className	string	-	Classes on the page.

FAQ

Is the Freight Forwarding Landing Page With Flip Board Hero free to use?

Yes. Freight Forwarding Landing Page With Flip Board Hero is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does Freight Forwarding Landing Page With Flip Board Hero work with Next.js and React?

Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).

Can I use Freight Forwarding Landing Page With Flip Board Hero in JavaScript instead of TypeScript?

Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.

What does Freight Forwarding Landing Page With Flip Board Hero need installed?

motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.

Is Freight Forwarding Landing Page With Flip Board Hero accessible?

Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.