Heroes

Hero with a logo strip

A centred hero followed immediately by the companies that already use the product — social proof before the fold ends.

3 components34 linesServer safeSource on GitHub

Live demo

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

What it uses

Button Hero LogoCloud

Imports

import { Button, Hero, LogoCloud } 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, LogoCloud } from '@the_viveksingh/vivek-ui'

export default function HeroWithLogos() {
  return (
    <>
      <Hero
        padding="lg"
        eyebrow="Payments"
        title="Accept payments in every country you sell to"
        description="One integration, 135 currencies, payouts in yours. Pricing that does not need a call."
        actions={
          <>
            <Button size="lg">Create an account</Button>
            <Button size="lg" variant="outline">
              Talk to sales
            </Button>
          </>
        }
      />
      <LogoCloud
        padding="sm"
        title="Trusted by finance teams at"
        logos={[
          { alt: 'Meridian' },
          { alt: 'Halcyon' },
          { alt: 'Fieldwork' },
          { alt: 'Northgate' },
          { alt: 'Overtone' },
          { alt: 'Palisade' },
        ]}
      />
    </>
  )
}

← All 62 blocks