Fintech Hero Section With Gradient Cards

A light fintech hero: a split headline over a staggered strip of gradient tiles, each one a live product fragment.

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

Features

Four gradient tiles, each a product fragment: a payout, a treasury balance, a customer result and issued cards
A cross-border payout plays through its stages while past receipts fan behind it
The balance rolls up digit by digit as each new transaction slides in at the top of the feed
Team cards fan open and closed while a sheen sweeps across the front one
A staggered bento running off the fold on wide screens, two by two on tablets and a swipeable row on phones
Everything holds still for reduced motion

Best for: Fintech, banking-as-a-service and payments platforms that want to show several products at once.

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
eyebrow	string	-	A short label above the headline, beside an orange dot.
title	string	-	The headline's first line, in black.
accent	string	-	The headline's second line, in grey.
description	string	-	The pitch beside the headline.
primaryCta	{ label: string; href: string }	-	The black pill with an arrow.
secondaryCta	{ label: string; href: string }	-	Optional plain text link beside it.
tiles	{ payout; balance; story; cardFan }	-	The four fragments: a payout and its stages, a balance with its transactions, a customer photo and result, and the issued cards.
cardLogo	ComponentType<{ className?: string }>	-	The product's logo, printed on the issued cards.
nav	{ brand: { name; icon }; links: Cta[]; cta: Cta }	-	Optional built-in navbar in this hero's style.
signIn	{ label: string; href: string }	-	Optional quiet link in the navbar, before its button.
className	string	-	Extra classes for the section.

Is the Fintech Hero Section With Gradient Cards free to use?

Yes. Fintech Hero Section With Gradient 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 Gradient 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 Gradient 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 Gradient Cards need installed?

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

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