Split Hero with Floating Feature Cards

Hero61: Split Hero with Floating Feature Cards

Split hero for SaaS launches: an announcement banner above a two-column layout with a highlighted heading and social-proof metrics on one side, and three feature cards scattered at fixed offsets and rotations on the other, each lifting on hover.

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/hero61?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero61.tsx and its shadcn/ui dependencies: Badge, Button.

Quick start

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

import { Hero61, hero61Demo } from "@/components/beste/block/hero61";

export default function Page() {
  return <Hero61 {...hero61Demo} />;
}

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

import { Gauge, Users, Zap } from "lucide-react";
import { Hero61 } from "@/components/beste/block/hero61";

export default function Page() {
  return (
    <Hero61
      announcement={{ label: "Introducing v2.0 with AI-powered workflows", href: "/changelog" }}
      badge={{ label: "Now Available" }}
      heading="Build products faster with <strong>intelligent automation</strong>"
      description="AI-assisted tools that understand your codebase and help you ship faster."
      buttons={[{ label: "Start Free Trial", href: "https://beste.co" }]}
      metrics={[
        { icon: Users, value: "50K+", label: "Developers" },
        { icon: Gauge, value: "99.9%", label: "Uptime" },
      ]}
      featureCards={[
        { icon: Zap, title: "Lightning Fast", description: "Deploy in seconds with zero configuration" },
        { icon: Gauge, title: "Real-time Analytics", description: "Monitor performance with live dashboards" },
      ]}
      displayPosition="right"
    />
  );
}

Props

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost";
};

type Metric = {
  icon?: LucideIcon;
  value: string;
  label: string;
};

type FeatureCard = {
  icon: LucideIcon;
  title: string;
  description: string;
};

Behavior notes

• heading is rendered with dangerouslySetInnerHTML, so <strong> tags in the string are picked up by [&>strong]:text-primary for a highlighted-word effect (the demo highlights "intelligent automation"); pass plain text if you don't need the highlight.
• displayPosition reorders only the feature-card column: "right" (the default) leaves the text column first and cards second; "left" moves the text column to lg:order-2, putting the cards first.
• On lg and up, the three featureCards are positioned absolutely inside a relative h-[500px] box at fixed coordinates and rotations cycling through top-0 right-0 rotate-3, top-1/3 left-0 -rotate-2, and bottom-0 right-8 rotate-1 (via positions[index % 3]), each lifting -translate-y-2 with a stronger shadow on hover.
• Below lg, that absolutely positioned stack is hidden (hidden lg:block) and a second, separate render of the same featureCards data appears instead, laid out as a static sm:grid-cols-3 grid with no rotation or absolute positioning: the cards are rendered twice in the markup and swapped by breakpoint, not repositioned by CSS from a single render.
• The announcement pill's arrow (ArrowRight) nudges right on hover via group-hover:translate-x-0.5; the whole pill is one next/link hit target.