Split Hero With Floating Review

Hero118: Split Hero With Floating Review

Two-column hero: a parenthetical eyebrow, an oversized heading, supporting copy, a dark CTA pill and an overlapping avatar trust row on the left; a tall portrait image on the right with a star-rated testimonial card floating over its bottom corner.

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

Base UI flavor

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

This installs the block to components/beste/block/hero118.tsx, the badge7 component it uses for the eyebrow and trust labels, the button12 component it uses for the CTA, and their dependencies.

Quick start

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

import { Hero118, hero118Demo } from "@/components/beste/block/hero118";

export default function Page() {
  return <Hero118 {...hero118Demo} />;
}

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

import { Hero118 } from "@/components/beste/block/hero118";

export default function Page() {
  return (
    <Hero118
      labels={{ trust: "500+ teams onboard" }}
      badge={{ label: "Product studio" }}
      heading="Structured work for teams that ship."
      description="No vague decks, no drift. Just scoped work that lands on time."
      button={{ label: "Brief the studio", href: "https://beste.co" }}
      avatars={[
        {
          src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop",
          alt: "Studio lead portrait",
        },
        {
          src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop",
          alt: "Designer portrait",
        },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1703485393247-b90b4424a1b4?w=900&h=1125&fit=crop",
        alt: "Two colleagues in conversation",
      }}
      testimonial={{
        rating: 5,
        quote: "Cut our launch timeline in half.",
        name: "Jordan Blake",
        title: "Head of Product",
      }}
    />
  );
}

Props

type Hero118Labels = {
  trust?: string;
};

type ActionButton = {
  label: string;
  href: string;
};

type Avatar = {
  src: string;
  alt: string;
};

type HeroImage = {
  src: string;
  alt: string;
};

type FloatingTestimonial = {
  rating: number;
  quote: string;
  name: string;
  title: string;
};

Behavior notes

• heading renders as plain text ({heading}), not through dangerouslySetInnerHTML like most other blocks in this Hero set, so <strong> markup will not be interpreted here.
• Avatars overlap with a negative margin (-space-x-3) and each carries a border-2 border-background ring so they read as a stack rather than a plain row; the trust label (from labels.trust) sits beside the stack through a second Badge7, and the whole trust row only renders when there is at least one avatar or a trust label.
• The testimonial card is absolutely positioned over the image's bottom-right corner (bottom-6 right-6, md:bottom-8 md:right-8) with its width clamped to min(20rem, 82%) so it never overflows the image on narrow viewports.
• Star rating is rendered by looping Array.from({ length: testimonial.rating }), so it only supports whole-number, fully-filled stars; there is no partial-star or "out of 5" denominator shown.
• There is no animation, autoplay, or interactive state; the section is fully static aside from standard link/button hover styles.