Getting here
Fly to the island or take the ferry from Piraeus. Tell us when you land and someone from the house will be waiting with cold water and the car.
From the house
A location section for a hotel: an aerial photograph that settles from a slight zoom as you scroll, marked with the hotel's name and pins for nearby places, beside the serif address with coordinates, an open-in-maps pill and a ruled list of travel times. Hovering a pin or a row lights up its partner.
A location section built on an aerial photograph that settles from a 112% zoom as you scroll, marked with a pulsing label for the hotel and pins for nearby places, followed by the serif address with coordinates, an open-in-maps pill and a ruled list of travel times whose rows light up together with their pins.
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.
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/hotel15?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/hotel15?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hotel15.tsx plus the button22 sliding-marker pill for the maps link and the text1 word stagger for the heading.
The installed file exports hotel15Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { Hotel15, hotel15Demo } from "@/components/beste/block/hotel15";
export default function Page() {
return <Hotel15 {...hotel15Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hotel15 } from "@/components/beste/block/hotel15";
import { Footprints, Plane, Ship } from "lucide-react";
export default function Page() {
return (
<Hotel15
eyebrow="Getting here"
heading="Easy to reach, hard to leave."
description="Fly to the island or take the ferry from Piraeus."
image={{ src: "https://oud.pics/b/hotel/ostria-aerial-cove.webp", alt: "An aerial view of a turquoise cove and a small harbor" }}
home={{ label: "Ostria", x: 78, y: 40 }}
places={[
{ name: "The village harbor", time: "6 min", detail: "On foot, down the old stone path", icon: Footprints, pin: { x: 44, y: 47 } },
{ name: "Ferry port", time: "20 min", detail: "Transfer by car", icon: Ship, pin: { x: 20, y: 47 } },
{ name: "Island airport", time: "25 min", detail: "Daily flights from Athens", icon: Plane },
]}
address={{ lines: ["Ostria Cove", "Paros 844 00, Greece"], coordinates: "37.0853° N, 25.1518° E" }}
button={{ label: "Open in maps", href: "https://maps.google.com", tone: "dark" }}
labels={{ address: "Address", distances: "From the house" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Uppercase line above the heading |
heading | string | – | Serif heading, through Text1 |
description | string | – | Paragraph in the right column of the header |
image | Image | – | Aerial photograph; the map, pins and home label render only with it |
home | Home | – | Hotel label, placed by percentage of the photo's width and height |
places | Place[] | [] | Travel list rows, optionally pinned on the photo |
address | Address | – | Address lines and optional coordinates |
button | ActionButton | – | Button22 pill under the address |
labels | Labels | {} | Small titles above the address and the travel list |
className | string | – | Extra classes for the outer <section> |
type Image = {
src: string;
alt: string;
};
type Home = {
label: string;
x: number;
y: number;
};
type Place = {
name: string;
time: string;
detail: string;
icon: LucideIcon;
pin?: { x: number; y: number };
};
type Address = {
lines: string[];
coordinates?: string;
};
type ActionButton = {
label: string;
href: string;
tone?: "primary" | "light" | "dark" | "outline";
};
type Labels = {
address?: string;
distances?: string;
};pin still gets a row in the list but no marker on the photo.animate-ping; reduced motion removes the pulse, the zoom and the entrance motion.address or button is set, the travel list only when places has entries; the button tone falls back to dark.