Restaurant Terrace Story shadcn/tailwind block

About this block

Restaurant Terrace StoryPRO

A hotel restaurant section: a serif heading over a wide photograph that drifts against a smaller framed kitchen photo moving the other way, followed by a large chef quote with a reserve pill and a menu link, and a ruled list of sittings with their hours and notes.

Hotel7: Restaurant Terrace Story

A hotel restaurant section with a serif heading over a wide photograph that drifts down as you scroll while a smaller framed kitchen photo overlapping its corner moves up, followed by a large chef quote with a reserve pill and a menu link, and a ruled list of sittings and their hours.

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

Base UI flavor

bash

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

This installs the block to components/beste/block/hotel7.tsx plus the button22 sliding-marker pill used for the reserve action and the text1 word stagger behind the heading.

Quick start

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

tsx

import { Hotel7, hotel7Demo } from "@/components/beste/block/hotel7";

export default function Page() {
  return <Hotel7 {...hotel7Demo} />;
}

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

tsx

import { Hotel7 } from "@/components/beste/block/hotel7";

export default function Page() {
  return (
    <Hotel7
      eyebrow="The terrace"
      heading="Dinner under the vine, whatever the boats brought in."
      description="One long table, a wood fire, and a menu written each afternoon."
      image={{
        src: "https://oud.pics/b/hotel/ostria-dining-terrace.webp",
        alt: "A long candlelit table under a vine pergola above the sea at dusk",
      }}
      inset={{
        src: "https://oud.pics/b/hotel/ostria-chef-hands.webp",
        alt: "A chef's hands finishing a plate of tomatoes and herbs",
      }}
      quote={{
        text: "I cook what my grandmother cooked, with fewer ingredients and a little more patience.",
        name: "Benjamin Clementine",
        role: "Chef",
      }}
      sittings={[
        { name: "Breakfast", hours: "8:00 to 11:30", note: "Served until it is lunch" },
        { name: "Dinner", hours: "19:30 to 23:00", note: "Booking recommended in August" },
      ]}
      button={{ label: "Reserve a table", href: "/reserve", tone: "dark" }}
      link={{ label: "Read tonight's menu", href: "/menu" }}
      labels={{ hours: "When we serve" }}
    />
  );
}

Props

Prop	Type	Default	Description
`eyebrow`	`string`	–	Uppercase line above the heading
`heading`	`string`	–	Serif `<h2>`, staggered word by word through `Text1`
`description`	`string`	–	Paragraph beside the heading
`image`	`Image`	–	Wide photograph under the heading
`inset`	`Image`	–	Smaller framed photo overlapping the bottom right of the main one
`quote`	`Quote`	–	Large quote with a name and role
`sittings`	`Sitting[]`	`[]`	Ruled list of services with hours and an optional note
`button`	`ActionButton`	–	Pill link under the quote
`link`	`TextLink`	–	Text link with an arrow next to the button
`labels`	`Labels`	`{}`	Title above the sittings list
`className`	`string`	–	Extra classes for the outer `<section>`

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

type Quote = {
  text: string;
  name: string;
  role: string;
};

type Sitting = {
  name: string;
  hours: string;
  note?: string;
};

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

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

type Labels = {
  hours?: string;
};

Behavior notes

Both photos are tied to the scroll progress of the image band: the main photo (scaled to 1.25) moves from -12% to 12%, while the inset moves the opposite way, from 18% to -18%, so the two pull apart as the band passes.
The main photo is 4:3 on phones and a wide 21:9 from the medium breakpoint. The inset is 38% wide on phones and 24% from the medium breakpoint, capped at max-w-xs, with a thick border in the page background color.
Photos fade in from a blur once their file has loaded, and the heading, description, quote and sittings fade up as they enter the viewport (once).
The inset only renders inside the image band, so it needs image to be set. The quote column holds the button and link, so they are hidden when quote is omitted.
The quote is wrapped in curly quotation marks for you, and the button defaults to the dark tone.
Reduced motion turns off both parallax movements, the blur-ins and the entrances.

More Hotel blocks

View all Hotel

PRO

hotel8

Restaurant Menu Tabs

PRO

hotel9

Spa Ritual Menu

PRO

hotel31

Dinnerunderthevine,whatevertheboatsbroughtin.