Hero Overlay & Suite Cards

About31: Hero Overlay & Suite Cards

A dark-overlay hero image carries the badge, heading, and description centered in white text, followed by a three-column grid of suite/room cards, each tagged with a temperature and a capacity badge. Built for hotels and hospitality brands with a handful of distinct rooms or spaces to showcase.

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

Base UI flavor

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

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

Quick start

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

import { About31, about31Demo } from "@/components/beste/block/about31";

export default function AboutPage() {
  return <About31 {...about31Demo} />;
}

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

import { About31 } from "@/components/beste/block/about31";

export default function AboutPage() {
  return (
    <About31
      badge={{ label: "Arctic Experience" }}
      heading="Sleep inside a frozen cathedral"
      description="Rebuilt every winter from 30,000 tons of snow and ice."
      image={{
        src: "https://images.unsplash.com/photo-1551524559-8af4e6624178?w=1200&h=500&fit=crop",
        alt: "Ice hotel interior",
      }}
      suites={[
        {
          name: "Aurora Suite",
          temperature: "-5°C",
          capacity: "2 guests",
          description: "Carved walls depicting the northern lights.",
        },
        {
          name: "Ceremony Hall",
          temperature: "-7°C",
          capacity: "80 guests",
          description: "Vaulted ice ceiling with crystal chandeliers.",
        },
      ]}
      buttons={[{ label: "Book a Night", href: "https://beste.co" }]}
    />
  );
}

Props

type SuiteItem = {
  name: string;
  temperature: string;
  capacity: string;
  description: string;
};

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• The badge, heading, and description only render inside the hero when image is also set; without an image prop the entire header block (badge, heading, description) disappears, since all three are nested inside the image && (...) guard.
• The hero badge always renders with variant="secondary" hardcoded in the JSX, ignoring whatever badge.variant is passed in the prop; only badge.label is actually read.
• The hero uses a fixed <img width={1200} height={500}> with object-cover rather than the absolute inset-0 fill pattern used elsewhere in the set, so its aspect ratio comes from the intrinsic width/height attributes, not a Tailwind aspect-ratio class.
• A bg-black/50 overlay (z-10) sits between the image and the text (z-20), so overlay text stays legible regardless of the underlying photo's brightness.
• Each suite card shows two badges side by side, temperature as variant="secondary" and capacity as variant="outline", so the two are visually distinct even though both are plain strings with no unit validation.