Split Hero

Two-column hero with text on one side and an image on the other. Staggered entrance animations with a decorative gradient blob behind the image.

herosplitimagetwo-column

Installation

bash

# Copy split-hero.tsx to your project
cp components/ui/split-hero.tsx your-project/components/ui/split-hero.tsx

How to use

tsx

import { SplitHero } from "@/components/ui/split-hero";

tsx

<SplitHero
  heading={<>Ship faster with<br /><span className="text-violet-500">better tools</span></>}
  subheading="A clean two-column hero layout with image and text."
  imageSrc="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80"
>
  <button className="px-6 py-3 bg-zinc-900 text-white rounded-lg">Get Started</button>
  <button className="px-6 py-3 text-zinc-600">Learn more</button>
</SplitHero>

Dependencies

framer-motion

Exports

SplitHero

File

components/ui/split-hero.tsx

Preview

Ship faster with
better tools

A clean two-column hero layout with smooth entrance animations and a decorative gradient blob behind the image.