Hero Section With Full Background Image
A studio hero on a full-bleed team photo: a Hanken Grotesk headline, a cream pill and the studio's services.
Features
- A full-bleed team photo that slowly drifts closer
- A warm shade lifting the lower left for the copy
- Light Fraunces headline with an italic amber accent
- Availability line, cream pill button and services list
Best for: Agencies, studios and service businesses that sell the people behind the work.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The headline. |
| accent | string | - | Optional ending set apart in the hero's accent colour. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The main button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| clients | Brand[] | - | Optional client logos (name and icon), along the bottom. |
| 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. |
FAQ
Is the Hero Section With Full Background Image free to use?
Yes. Hero Section With Full Background Image is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Hero Section With Full Background Image 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 Full Background Image 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 Full Background Image 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 Full Background Image 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.