Seasonal Stay Offers shadcn/tailwind block

About this block

Seasonal Stay OffersPRO

Three staggered offer cards for a hotel's packages: each portrait photograph drifts in its frame and leans in on hover under a length-of-stay pill, followed by a serif title, a short pitch, a dotted list of what is included and a ruled line with the starting price and the season it is valid.

Hotel11: Seasonal Stay Offers

Three offer cards in a staggered row, the middle one dropped lower on large screens, each with a portrait photograph that drifts inside its frame as you scroll and leans in on hover, a length-of-stay pill, a serif title, a dotted list of inclusions and a ruled footer with the starting price and the season.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

bash

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

Base UI flavor

bash

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

This installs the block to components/beste/block/hotel11.tsx plus the text1 word stagger it uses for the heading.

Quick start

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

tsx

import { Hotel11, hotel11Demo } from "@/components/beste/block/hotel11";

export default function Page() {
  return <Hotel11 {...hotel11Demo} />;
}

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

tsx

import { Hotel11 } from "@/components/beste/block/hotel11";

export default function Page() {
  return (
    <Hotel11
      eyebrow="Offers"
      heading="Reasons to stay a little longer."
      description="A few stays we put together for the quieter months on Paros."
      link={{ label: "All offers and gift stays", href: "/offers" }}
      offers={[
        {
          title: "Slow honeymoon",
          description: "A sea suite, a private dinner on the cliff and nobody asking when you plan to get up.",
          stay: "4 nights",
          includes: ["Dinner for two on the cliff", "Hammam for two", "Late checkout"],
          price: "€2,140",
          valid: "May to October",
          href: "/offers/honeymoon",
          image: { src: "https://oud.pics/b/hotel/ostria-couple-sunset.webp", alt: "A couple watching the sea at sunset from a white terrace wall" },
        },
        {
          title: "Three coves by boat",
          description: "A day on our wooden caique to coves you can only reach from the water.",
          stay: "3 nights",
          includes: ["Full day on the boat", "Picnic lunch from the kitchen"],
          price: "€1,390",
          valid: "June to September",
          href: "/offers/coves",
          image: { src: "https://oud.pics/b/hotel/ostria-boat-cove.webp", alt: "A small wooden boat anchored in a turquoise cove" },
        },
      ]}
      labels={{ from: "From" }}
    />
  );
}

Props

Prop	Type	Default	Description
`eyebrow`	`string`	–	Uppercase line above the heading
`heading`	`string`	–	Serif section heading, through `Text1`
`description`	`string`	–	Paragraph in the right column of the header
`link`	`HeaderLink`	–	Text link with an arrow under the description
`offers`	`Offer[]`	`[]`	The offer cards, each one a link
`labels`	`Labels`	`{}`	Word printed before each price
`className`	`string`	–	Extra classes for the outer `<section>`

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

type Offer = {
  title: string;
  description: string;
  stay: string;
  includes: string[];
  price: string;
  valid: string;
  href: string;
  image: { src: string; alt: string };
};

type Labels = {
  from?: string;
};

Behavior notes

Each card rises 40px into place with whileInView (once), delayed by 0.12s per index so the row arrives left to right.
The photograph sits in an oversized layer that moves from -8% to 8% as the card crosses the viewport, and fades in from a 24px blur only after the file has loaded.
Hovering a card scales the photograph to 105% and nudges the arrow up and to the right; the whole card is one Link to href.
The grid is one column on phones, two from the medium breakpoint and three from large, where every second card of each row of three is pushed down 80px.
With reduced motion the parallax, the rise and the blur-in are switched off and the arrow nudge is gated behind motion-safe.
The header link and description render only when passed; labels.from is printed as is before each price, so leaving it out shows the price alone.

More Hotel blocks

View all Hotel

PRO

hotel12

Featured Offer Countdown

PRO

hotel45

Gift a Stay List

PRO

hotel4

Reasonstostayalittlelonger.

Slow honeymoon

Three coves by boat

Early summer swim