Split Hero with Feature List Panel

Hero91: Split Hero with Feature List Panel

Fullscreen 50/50 hero with a muted content panel on the left, a badge, heading, description, buttons, and a short icon-led feature list below them, and a video or image panel on the right. The feature rows sit under a top border, echoing the testimonial layout used elsewhere in this hero set but swapped for a feature summary.

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

Base UI flavor

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

This installs the block to components/beste/block/hero91.tsx and the shadcn/ui primitives it depends on: Badge and Button.

Quick start

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

import { Hero91, hero91Demo } from "@/components/beste/block/hero91";

export default function Page() {
  return <Hero91 {...hero91Demo} />;
}

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

import { Shield, Zap } from "lucide-react";
import { Hero91 } from "@/components/beste/block/hero91";

export default function Page() {
  return (
    <Hero91
      badge={{ label: "All-in-One", variant: "secondary" }}
      heading="Everything you need to scale your product"
      description="Stop juggling between tools. One platform for design, development, and deployment."
      buttons={[{ label: "Start Building", href: "/signup", variant: "default" }]}
      backgroundMedia={{ type: "image", src: "/hero/product.jpg", alt: "Product screen" }}
      features={[
        { icon: Zap, title: "Lightning Fast", description: "Sub-second builds with edge deployment" },
        { icon: Shield, title: "Enterprise Security", description: "SOC 2 compliant end-to-end" },
      ]}
    />
  );
}

Props

type Badge = { label: string; variant?: "default" | "secondary" | "outline" };
type Button = { label: string; href: string; variant?: "default" | "outline" };
type BackgroundMedia = { type: "image" | "video"; src: string; alt?: string };
type FeatureItem = { icon: LucideIcon; title: string; description: string };

Behavior notes

• The left panel sits on bg-muted/50, distinguishing it from the plain-background content panels used by the other split heroes in this set (hero89, hero92, hero94, hero96).
• backgroundMedia.type: "video" renders autoPlay loop muted playsInline with no poster fallback; "image" renders a plain <img>. Neither uses next/image.
• Each feature row shows the icon inside a size-10 circle tinted bg-primary/10 with a text-primary icon, distinct from the neutral icon treatment used in this set's overlay-card heroes (hero92, hero94).
• The feature list only appears when features is non-empty, and sits below a border-t divider directly under the buttons.
• Layout is flex-col on mobile and lg:flex-row at the lg breakpoint; the section carries min-h-screen.