Getting Here Ways

Hotel47: Getting Here Ways

Three columns split by drawn rules, one per way of arriving, each with a line glyph that traces itself in, the journey time in large serif and a route line that runs out from port to port, closed by a pickup line with a drawn car.

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

Base UI flavor

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

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

Quick start

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

import { Hotel47, hotel47Demo } from "@/components/beste/block/hotel47";

export default function Page() {
  return <Hotel47 {...hotel47Demo} />;
}

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

import { Hotel47 } from "@/components/beste/block/hotel47";

export default function Page() {
  return (
    <Hotel47
      eyebrow="Getting here"
      heading="Three ways across the water"
      description="Whichever way you choose, the last twenty minutes are ours."
      ways={[
        { glyph: "ferry", title: "The big ferry", time: "4 h", stops: ["Piraeus", "Syros", "Parikia"], note: "Two decks and the best view of the islands arriving." },
        { glyph: "speedboat", title: "The fast boat", time: "3 h", stops: ["Rafina", "Mykonos", "Parikia"], note: "Leaves near the airport and makes fewer stops." },
        { glyph: "plane", title: "A small plane", time: "40 min", stops: ["Athens", "Paros"], note: "A propeller plane, then a short drive across the island." },
      ]}
      pickup={{ text: "Send us your boat or flight and someone will be waiting with the car.", link: { label: "Arrange a pickup", href: "/contact" } }}
    />
  );
}

Props

type GlyphName = "ferry" | "speedboat" | "plane" | "car";

type Way = {
  glyph: GlyphName;
  title: string;
  time: string;
  stops: string[];
  note: string;
};

type Pickup = {
  text: string;
  link?: { label: string; href: string };
};

Behavior notes

• Glyphs draw in with pathLength once in view; the pickup line always uses the car glyph in the primary color.
• Stops are spaced evenly along the route line: the first sits at the left edge, the last at the right, and the ones between are centered on their positions. The line draws first, then the stops pop in from left to right.
• The first and last stops get filled dots and full-strength labels; middle stops get hollow dots and muted labels. Hovering a column turns the route line and end dots to the primary color and lifts the glyph.
• From the medium breakpoint the columns sit in three with vertical rules that draw downward between them; below it they stack with horizontal rules on top of each.
• The pickup link is skipped when pickup.link is not set, and its arrow nudges diagonally on hover only when motion is allowed.
• With reduced motion the glyphs, rules and stops render in place with no draw.