Wedding Exclusive Use

Hotel13: Wedding Exclusive Use

A wedding section with a serif heading, an intro, a proposal pill and the planner's portrait on the left, and two overlapping photographs on the right that move in opposite directions as you scroll, with a short caption under them.

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

Base UI flavor

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

This installs the block to components/beste/block/hotel13.tsx plus the button22 sliding-marker pill for the proposal button and the text1 word stagger for the heading.

Quick start

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

import { Hotel13, hotel13Demo } from "@/components/beste/block/hotel13";

export default function Page() {
  return <Hotel13 {...hotel13Demo} />;
}

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

import { Hotel13 } from "@/components/beste/block/hotel13";

export default function Page() {
  return (
    <Hotel13
      eyebrow="Weddings"
      heading="The whole house, for the people you love most."
      description="Once a month we close the hotel to everyone else: all twelve rooms, the olive grove for dinner and the cliff for the vows."
      button={{ label: "Request a proposal", href: "/weddings/proposal", tone: "dark" }}
      planner={{
        name: "Jessica Pratt",
        role: "Looks after every wedding",
        avatar: { src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=200&h=200&fit=crop", alt: "Portrait of Jessica Pratt" },
      }}
      images={{
        main: { src: "https://oud.pics/b/hotel/ostria-wedding-table.webp", alt: "A candlelit wedding table in an olive grove at dusk" },
        inset: { src: "https://oud.pics/b/hotel/ostria-ceremony-cliff.webp", alt: "Chairs facing an olive branch arch on a clifftop" },
      }}
      caption="Dinner in the grove, vows on the cliff"
    />
  );
}

Props

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

type Planner = {
  name: string;
  role: string;
  avatar?: { src: string; alt: string };
};

type Images = {
  main: { src: string; alt: string };
  inset: { src: string; alt: string };
};

Behavior notes

• As the photo stage crosses the viewport, the main photograph moves from -8% to 8% inside its frame while the inset moves from 14% to -14%, so the two slide past each other.
• Both photographs rise into place with whileInView (once), the inset 0.2s after the main, and each fades in from a 24px blur only after the file has loaded.
• The main frame is 82% wide and the inset 46%, pinned to the bottom right with a border in the background color and a large shadow; the main frame is 4:5 on phones, 4:3 from sm and 4:5 again on large screens.
• From the large breakpoint the copy takes five columns and the photographs seven; below it they stack, copy first.
• Without images the whole photo column (and the caption) is skipped. The planner avatar is optional and the button tone falls back to dark.
• Reduced motion turns off the parallax, the rise and the blur-in.