Fullscreen Hero with Logo Cloud

Hero86: Fullscreen Hero with Logo Cloud

Fullscreen, centered hero over an inset background image or video, with a bordered "trusted by" panel of partner and customer logos anchored to the bottom of the viewport.

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

Base UI flavor

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

This installs the block to components/beste/block/hero86.tsx along with the badge and button shadcn/ui primitives it depends on.

Quick start

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

import { Hero86, hero86Demo } from "@/components/beste/block/hero86";

export default function Page() {
  return <Hero86 {...hero86Demo} />;
}

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

import { Hero86 } from "@/components/beste/block/hero86";

export default function Page() {
  return (
    <Hero86
      badge={{ label: "Enterprise Ready", variant: "secondary" }}
      heading="Infrastructure that scales with your ambition"
      description="Deploy globally, scale instantly, and monitor everything."
      buttons={[
        { label: "Start Deploying", href: "/signup" },
        { label: "Talk to Sales", href: "/contact", variant: "outline" },
      ]}
      backgroundMedia={{ type: "image", src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1600&h=900&fit=crop" }}
      logosHeading="Trusted by industry leaders"
      logos={[
        { name: "Vercel", src: "https://upload.wikimedia.org/wikipedia/commons/5/5e/Vercel_logo_black.svg", alt: "Vercel" },
        { name: "GitHub", src: "https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg", alt: "GitHub" },
      ]}
      invertColor
    />
  );
}

Props

type LogoItem = {
  name: string;
  src: string;
  alt: string;
};

Behavior notes

• When invertColor is true, every logo <img> is run through a CSS filter chain (brightness-0 invert opacity-70) that forces it to render as a uniform semi-transparent white mark regardless of the logo's native colors, so mismatched brand-color SVGs still look consistent on a dark background; setting invertColor to false removes the filter and shows logos in their original colors.
• logos and the optional logosHeading share one bordered, backdrop-blur-md panel at the bottom of the viewport rather than individual cards per logo.
• The logo row is a static flex flex-wrap justify-center layout with no marquee, autoscroll, or looping animation.
• Like the other fullscreen heroes in this set, backgroundMedia sits in an inset rounded panel (not true edge-to-edge) with a bg-black/60 or bg-background/80 overlay depending on invertColor.