Lead Capture Hero with Email Input

Hero88: Lead Capture Hero with Email Input

Fullscreen, centered hero built around an email capture row instead of CTA buttons: a controlled email input plus a submit button sit inside a bordered glass field, with a footnote and a secondary link underneath, over an inset background image or video.

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

Base UI flavor

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

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

Quick start

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

import { Hero88, hero88Demo } from "@/components/beste/block/hero88";

export default function Page() {
  return <Hero88 {...hero88Demo} />;
}

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

import { Hero88 } from "@/components/beste/block/hero88";

export default function Page() {
  return (
    <Hero88
      badge={{ label: "Early Access", variant: "secondary" }}
      heading="Be the first to experience what's next"
      description="Sign up for early access and get a front-row seat to what's coming."
      backgroundMedia={{ type: "image", src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1600&h=900&fit=crop" }}
      inputPlaceholder="Enter your email"
      submitLabel="Get Early Access"
      footnote="No spam, ever. Unsubscribe anytime."
      secondaryLink={{ label: "Or explore the docs first", href: "/docs" }}
      invertColor
    />
  );
}

Props

Behavior notes

• The email field is a fully controlled input (local useState), but the component exposes no onSubmit or onChange callback prop: the "Get Early Access" button has no click handler wired up, so consumers need to add their own submit logic around the installed component.
• The input and button are not wrapped in a <form>, just a flex row, so pressing Enter in the field does not trigger any submission by default.
• secondaryLink renders as a text link below the input block with a trailing arrow icon that translates right on hover (group/hero88), the same hover pattern used by the announcement pill in hero87.
• invertColor (default true) governs the input's border, background, and placeholder colors (translucent white on dark vs. bg-background/60 on light) in addition to the heading, description, and background overlay.