Split Hero Section With Integrations Hub
A deep pine headline panel beside a hub fanning out to every app it connects, one by one.
Features
- A deep pine panel with a light Outfit headline and a white button
- A hub fanning out on one trunk to a column of app cards
- Waiting apps connect one by one: the branch draws in, then a green tick
- A soft tiled canvas behind the tree, fading at the edges
- Optional customer logos in a bordered grid under the split
Best for: Identity, security and integration products that want to show how much they connect at a glance.
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 in the pine panel. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The white button. |
| hub | { name: string; icon } | - | The product at the root of the tree. |
| apps | ConnectedApp[] | - | Apps on the trunk: name, status and tile tone. |
| connectedAtStart | number | 4 | How many apps start connected. |
| clients | { name: string; icon }[] | - | Customer logos in a bordered grid under the split. |
| clientsLabel | string | - | The line beside the logo grid. |
| nav | { brand: { name; icon }; links: Cta[]; cta: Cta } | - | Optional built-in navbar in this hero's style. |
| navSecondaryLabel | string | - | The quieter navbar button, such as Log in. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Split Hero Section With Integrations Hub free to use?
Yes. Split Hero Section With Integrations Hub is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Split Hero Section With Integrations Hub 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 Split Hero Section With Integrations Hub in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Split Hero Section With Integrations Hub need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Split Hero Section With Integrations Hub 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.