Collage Hero

Hero114: Collage Hero

Split studio hero pairing a two-tone headline, description and dual CTAs with a uniform 2x2 image collage on the opposite column. Each collage tile is a fixed square with its own hover zoom, keeping the grid tidy rather than an irregular masonry layout.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero114?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero114?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero114.tsx, the badge6 component it uses for the eyebrow label, the button1 component it uses for the primary CTA pill, and their dependencies.

Quick start

The installed file exports hero114Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero114, hero114Demo } from "@/components/beste/block/hero114";

export default function Page() {
  return <Hero114 {...hero114Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero114 } from "@/components/beste/block/hero114";

export default function Page() {
  return (
    <Hero114
      label="Northwind Studio"
      heading="Identity systems that <strong>ship and scale.</strong>"
      description="From first sketch to full brand system, built for teams that move fast."
      buttons={[
        { label: "Start a project", href: "https://beste.co", variant: "primary" },
        { label: "View our work", href: "https://beste.co", variant: "outline" },
      ]}
      images={[
        {
          src: "https://images.unsplash.com/photo-1558655146-d09347e92766?w=800&h=800&fit=crop",
          alt: "Color swatches arranged on a studio desk",
        },
        {
          src: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=800&fit=crop",
          alt: "Poster pinned to a studio wall",
        },
        {
          src: "https://images.unsplash.com/photo-1626785774573-4b799315345d?w=800&h=800&fit=crop",
          alt: "Team sketching ideas during a workshop",
        },
      ]}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  variant?: "primary" | "outline";
};

type ImageItem = {
  src: string;
  alt: string;
};

Behavior notes

• The collage always renders a grid-cols-2 grid; images is sliced to images.slice(0, 4), so passing more than four is silently truncated and passing fewer leaves that many cells simply absent rather than backfilled.
• Each tile has its own group/hero114 hover, independent of its siblings: object-cover image scales to 105% over 500ms on hover of that specific cell.
• Only the primary button variant goes through Button1; outline is a hand-built bordered Link with uppercase, letter-spaced text, so its focus and hover styling is defined locally in this component rather than inherited from Button1.
• The two-column layout only activates at the lg breakpoint; below that, copy and collage stack vertically with the copy first.
• There is no animation on mount and no autoplay; every tile and CTA is static except for the per-tile hover scale.