Heroes

Hero with stats

A start-aligned hero with three numbers underneath it. The figures do the persuading the adjectives would have done.

3 components31 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

Button Hero Stats

Imports

import { Button, Hero, Stats } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import { Button, Hero, Stats } from '@the_viveksingh/vivek-ui'

export default function HeroWithStats() {
  return (
    <>
      <Hero
        align="start"
        padding="lg"
        eyebrow="Logistics"
        title="Deliveries that arrive when the app said they would"
        description="Route planning, live tracking and proof of delivery in one tool your drivers will actually open."
        actions={
          <>
            <Button size="lg">Book a demo</Button>
            <Button size="lg" variant="ghost">
              See pricing
            </Button>
          </>
        }
      />
      <Stats
        padding="sm"
        items={[
          { id: 'ontime', value: '98.4%', label: 'On-time deliveries' },
          { id: 'drivers', value: '12,000', label: 'Drivers on the road' },
          { id: 'cities', value: '140', label: 'Cities', description: 'Across 11 countries' },
        ]}
      />
    </>
  )
}

← All 62 blocks