Fintech Hero Section With Bento Cards

A white and emerald fintech hero: a split Manrope header over a bento of live billing cards.

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

Features

Split header: a huge Manrope headline left, the pitch and buttons right
Revenue chart that draws itself, an invoice list and usage meters that fill
A skyline of emerald bars rising and falling behind the cards, like a live chart
Squared black and hairline buttons

Best for: Fintech, billing and payments products that want to show real numbers the moment the page opens.

npm install motion @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.
accent	string	-	Optional ending in emerald.
description	string	-	The pitch beside the headline.
primaryCta	{ label: string; href: string }	-	The black button.
secondaryCta	{ label: string; href: string }	-	Optional outlined button.
facts	string[]	-	Short facts under the buttons.
revenue	{ label; value; change }	-	The revenue card's numbers.
invoices	Invoice[]	-	Rows for the invoice list: customer, amount, isPaid.
meters	UsageMeter[]	-	Usage bars: label, value, percent.
clients	Brand[]	-	Optional client logos (name and icon), in a marquee under the cards.
clientsLabel	string	-	Optional line above the client logos.
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 Fintech Hero Section With Bento Cards free to use?

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

Does Fintech Hero Section With Bento Cards 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 Fintech Hero Section With Bento Cards in JavaScript instead of TypeScript?

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

What does Fintech Hero Section With Bento Cards need installed?

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

Is Fintech Hero Section With Bento Cards 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.