Book Direct Comparison

Hotel6: Book Direct Comparison

A book-direct section with a tall photograph that drifts inside its sticky frame, beside a serif heading and a ruled three-column table comparing what guests get by booking here against elsewhere, using check and dash marks or short values.

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://beste.dev/r/hotel6?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/hotel6?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hotel6.tsx plus the button22 sliding-marker pill used for the call to action and the text1 word stagger behind the heading.

Quick start

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

import { Hotel6, hotel6Demo } from "@/components/beste/block/hotel6";

export default function Page() {
  return <Hotel6 {...hotel6Demo} />;
}

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

import { Hotel6 } from "@/components/beste/block/hotel6";

export default function Page() {
  return (
    <Hotel6
      eyebrow="Book with us"
      heading="The same room, a little more of everything."
      description="When you book here the commission stays in the house, so we hand it back to you."
      columns={{ direct: "Here", elsewhere: "Elsewhere" }}
      perks={[
        { label: "Lowest nightly rate, guaranteed", direct: true, elsewhere: false },
        { label: "Breakfast on the terrace", direct: "Included", elsewhere: "€28 a person" },
        { label: "Late checkout", direct: "2 pm, always", elsewhere: false },
      ]}
      button={{ label: "Book directly", href: "/book", tone: "dark" }}
      note="Found it cheaper somewhere else? Write to [email protected] and we will match it."
      image={{
        src: "https://oud.pics/b/hotel/ostria-breakfast-tray.webp",
        alt: "A wooden breakfast tray with coffee, figs and bread on a linen bed",
      }}
      caption="Breakfast in bed, on the house"
      labels={{ included: "Included", notIncluded: "Not included" }}
    />
  );
}

Props

type Columns = {
  direct: string;
  elsewhere: string;
};

type Perk = {
  label: string;
  direct: string | boolean;
  elsewhere: string | boolean;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

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

type Labels = {
  included?: string;
  notIncluded?: string;
};

Behavior notes

• A perk value of true renders a check, false renders a muted dash, and any string is printed as is. The marks use labels.included and labels.notIncluded as their accessible names.
• The photo is scaled to 1.2 inside its 4:5 frame and moves from -10% to 10% as the frame crosses the viewport. It fades in from a blur once loaded, and the frame is sticky from the medium breakpoint.
• The column header sits on a dark rule and every row has a hairline beneath it. Both draw in from the left with scaleX as they enter the viewport (once), and rows fade up with a 0.08 second stagger.
• The value columns are 6.5rem wide on phones and 9rem from the small breakpoint. The page is a 5 and 7 column split from the medium breakpoint and stacks below it.
• The header row is skipped when columns is omitted, the table when perks is empty, the photo column when image is missing, and the button area when neither button nor note is set. The button defaults to the dark tone.
• Reduced motion turns off the parallax, the blur-in and every entrance.