Left-Aligned Hero with Gradient Overlay

Hero82: Left-Aligned Hero with Gradient Overlay

Fullscreen hero with left-aligned copy over an inset background image or video, darkened by a directional left-to-right gradient so the text stays legible while the right side of the image stays visible.

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

Base UI flavor

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

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

Quick start

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

import { Hero82, hero82Demo } from "@/components/beste/block/hero82";

export default function Page() {
  return <Hero82 {...hero82Demo} />;
}

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

import { Hero82 } from "@/components/beste/block/hero82";

export default function Page() {
  return (
    <Hero82
      badge={{ label: "Introducing V2", variant: "secondary" }}
      heading="Design without limits, build without boundaries"
      description="A modern workspace for teams who want to move fast."
      buttons={[
        { label: "Get Started", href: "/signup" },
        { label: "Learn More", href: "/product", variant: "outline" },
      ]}
      backgroundMedia={{ type: "image", src: "https://images.unsplash.com/photo-1621063573999-5af1e96634f8?w=1600&h=900&fit=crop" }}
      invertColor
    />
  );
}

Props

Behavior notes

• Content is constrained to max-w-xl and left-aligned inside a much wider max-w-7xl container with heavy horizontal padding (px-12 up to px-20 on lg), instead of being centered like most other heroes in this set.
• The overlay is a directional gradient, bg-gradient-to-r from-black/80 via-black/60 to-black/30 (or the background-token equivalent when invertColor is false), so the left side of the image is darkest where the text sits and the right side stays comparatively visible.
• backgroundMedia sits in an inset rounded panel (inset-x-6 top-6 bottom-6, inset-x-8/top-8/bottom-8 on lg) rather than true edge-to-edge; it accepts either a video (autoPlay/loop/muted/playsInline) or a static image.
• The section is min-h-screen with the content vertically centered via flex items-center inside it, so the left column's vertical position tracks the viewport height rather than a fixed offset.