Hero Section With Isometric Illustration

A field-service hero on mint: copy and stats on the left, a town drawn in code on the right where a van works its jobs live.

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

Features

A town drawn in code (isometric SVG, crisp at any size) in the hero's mint palette
A live location puck that drives the dotted loop on transforms, turning with the road
Job pins that drop in, pulse while the van heads their way and turn into checks when done
A dispatch card counting down the ETA, and a customer text sent as the van sets off
Copy on the left with three stats; logos in one quiet row under the map
Holds a still, readable frame for reduced motion

Best for: Home services, logistics and field teams that want to show the work on a map.

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.

Prop	Type	Default	Description
title	string	-	The headline's first line.
accent	string	-	Optional second line set apart in the hero's green.
description	string	-	The line under the headline.
primaryCta	{ label: string; href: string }	-	The main button.
secondaryCta	{ label: string; href: string }	-	Optional second button.
stats	{ value: string; label: string }[]	-	Three numbers under the buttons.
driver	{ name: string; vehicle: string }	-	Who drives the van on the map, shown on the dispatch card and in the customer text.
stops	{ address; job; window; etaMinutes }[]	-	The three jobs in driving order: booked window, and the drive time counted down live.
clients	{ name: string; icon }[]	-	Optional customer logos in one row under the map.
clientsLabel	string	-	The line above the logos, such as Crews at these companies run on Routewise.
nav	{ brand: { name; icon }; links: Cta[]; cta: Cta }	-	Optional built-in navbar in this hero's style.
className	string	-	Extra classes for the section.

Is the Hero Section With Isometric Illustration free to use?

Yes. Hero Section With Isometric Illustration is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does Hero Section With Isometric Illustration 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 Hero Section With Isometric Illustration in JavaScript instead of TypeScript?

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

What does Hero Section With Isometric Illustration need installed?

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

Is Hero Section With Isometric Illustration 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.