Featured Offer Countdown

Hotel12: Featured Offer Countdown

A single offer on a rounded dark band: the photograph drifts behind a left-to-right scrim and a film-grain layer, with a serif heading, a dotted list of inclusions, the offer price next to the struck-through usual rate, a pill button and a four-cell countdown whose digits roll up every second.

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

Base UI flavor

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

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

Quick start

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

import { Hotel12, hotel12Demo } from "@/components/beste/block/hotel12";

export default function Page() {
  return <Hotel12 {...hotel12Demo} />;
}

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

import { Hotel12 } from "@/components/beste/block/hotel12";

export default function Page() {
  return (
    <Hotel12
      eyebrow="October on the roof"
      heading="The rooftop suite, at its quietest and warmest."
      description="Book the suite with the plunge pool for any three nights in October and we will take a third off."
      includes={["Plunge pool warmed to 30 degrees", "Transfer from the port"]}
      price={{ label: "Three nights from", value: "€1,440", was: "€2,160" }}
      endsAt="2026-10-31T23:59:00+03:00"
      button={{ label: "Claim the October rate", href: "/offers/october", tone: "light" }}
      image={{ src: "https://oud.pics/b/hotel/ostria-rooftop-suite.webp", alt: "A rooftop terrace with a plunge pool facing the sunset sea" }}
      labels={{
        endsIn: "Booking closes in",
        ended: "This offer has ended",
        units: { days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" },
      }}
    />
  );
}

Props

type Price = {
  label: string;
  value: string;
  was?: string;
  unit?: string;
};

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

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

type Labels = {
  endsIn?: string;
  ended?: string;
  units?: { days: string; hours: string; minutes: string; seconds: string };
};

Behavior notes

• endsAt wins when both deadlines are set; with only endsInDays the target is that many days after the visitor's page load, so it never runs out on a cached page. With neither, the countdown panel is not rendered.
• A one-second interval updates the remaining time and is cleared on unmount. Each changed digit pair slides up out of its cell while the new one slides in from below; with reduced motion they cross-fade instead.
• Once the deadline passes the cells show 00 and the title switches from labels.endsIn to labels.ended. Without labels.units the cells stay at 00 with no unit names.
• The photograph sits in a layer scaled to 125% that moves from -12% to 12% with scroll, and fades in from a 24px blur once loaded. Reduced motion holds it still.
• On large screens the copy takes seven columns and the countdown four, aligned to the bottom; below that the countdown stacks under the price.
• price.unit is part of the type but is not rendered; the button tone falls back to light when omitted.