Hero183: Call Request Hero

A call-request hero: headline, intro and three short facts on one side, and on the other a soft panel holding name, email and phone fields under a full-width pill.

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

Base UI flavor

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

This installs the block to components/beste/block/hero183.tsx, the shadcn input and label primitives the form is built on, and the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Hero183, hero183Demo } from "@/components/beste/block/hero183";

export default function Page() {
  return <Hero183 {...hero183Demo} />;
}

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

import { Hero183 } from "@/components/beste/block/hero183";

export default function Page() {
  return (
    <Hero183
      eyebrow="First conversations, this week"
      heading="Leave your name. We call you, not the other way round."
      description="Twenty minutes on the phone to hear what brings you here."
      facts={["Free, always", "Reply within one working day", "Nothing is booked until we have spoken"]}
      form={{
        title: "Request a call",
        name: "Your name",
        email: "Email",
        phone: "Phone, if you would rather we call",
        button: "Request the call",
        note: "We never share your details.",
      }}
    />
  );
}

Props

type Hero183Form = {
  title: string;
  name: string;
  email: string;
  phone: string;
  button: string;
  note: string;
};

Behavior notes

• Field ids come from useId, so a page carrying this hero and another form keeps every Label pointing at its own input.
• The inputs are given an explicit bg-background because they sit on a bg-muted panel; without it the shadcn default would render a muted field on a muted surface.
• The phone field is typed tel and its label says it is optional in words rather than with an asterisk, which suits a form whose whole promise is that it asks for very little.
• The panel animates in as one block on a 0.5s delay rather than field by field, so it arrives as a card rather than as a form assembling itself.
• The headline runs with trigger="mount", and the copy and facts are offset from 0.4 + heading.split(" ").length * 0.07.
• The two columns are vertically centred, so a short fact list stays level with the panel instead of riding at its top.
• The form only calls preventDefault() on submit; nothing is collected or sent until you wire it up.