Rotating Quote Hero

Hero139: Rotating Quote Hero

Full-bleed hero built on a static background photograph washed in a dark gradient scrim, topped with a giant multi-line display heading and closed with a bottom testimonial card that auto-rotates through quotes on a timer, with click-to-jump dots underneath.

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

Base UI flavor

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

This installs the block to components/beste/block/hero139.tsx, the badge7 component it uses to render the eyebrow label, and its dependencies.

Quick start

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

import { Hero139, hero139Demo } from "@/components/beste/block/hero139";

export default function Page() {
  return <Hero139 {...hero139Demo} />;
}

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

import { Hero139 } from "@/components/beste/block/hero139";

export default function Page() {
  return (
    <Hero139
      badge={{ label: "Voices" }}
      heading="Trusted by teams who ship."
      backgroundImage={{
        src: "https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?w=1920&h=1200&fit=crop",
        alt: "Sunlight falling across a quiet mountain ridge",
      }}
      quotes={[
        {
          quote: "The clearest tool we have used all year.",
          name: "Jordan Ames",
          role: "VP Engineering, Fenwick",
          href: "https://beste.co",
        },
        {
          quote: "Set up in an afternoon, kept for the long run.",
          name: "Priya Nair",
          role: "Head of Design, Loom & Co",
        },
      ]}
    />
  );
}

Props

type Quote = {
  quote: string;
  name: string;
  role: string;
  href?: string;
};

Behavior notes

• A setInterval advances the active quote index every 5 seconds; the effect returns early and never starts a timer when there is one quote or none.
• All quotes are mounted in the DOM at all times, not conditionally rendered: the inactive ones sit absolute inset-0 opacity-0 pointer-events-none with aria-hidden, while the active one is relative opacity-100, cross-fading over a 700ms transition.
• Clicking a dot jumps active straight to that quote's index (aria-current reflects the selection) and the interval keeps counting from there, so a manual click does not pause or reset the rotation.
• The background photo sits behind a bg-gradient-to-t from-foreground/70 via-foreground/20 to-foreground/40 scrim so the light heading and badge stay legible over any image.
• The heading scales from text-6xl at mobile up to text-9xl at lg, intentionally dominating the viewport at desktop widths; the quote name links out via next/link only when href is set on that quote, otherwise it renders as plain text.