Staaarter

Restaurant Opening Soon

A split-screen opening-soon layout for a restaurant or venue: one side shows an interior photo, the other carries the venue name, an eyebrow, a heading, an icon-led grid of opening details (address, date, hours), and an email form with a success state.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/restaurant-opening-soon.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon56.tsx instead.

Usage

The file also exports comingsoon56Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon56, comingsoon56Demo } from "@/components/blocks/coming-soon/comingsoon56";

export default function Page() {
  return <ComingSoon56 {...comingsoon56Demo} />;
}

Props

PropTypeDefaultDescription
imageMediaSlotImagenoneInterior or venue photo for the image side.
venueNamestring"The Hollow Fig"Restaurant or venue name.
eyebrowstring"Opening soon"Small label above the heading.
headingstring"A new table is being set"Main heading under the eyebrow.
descriptionstring"We're putting the finishing touches on the dining room. Join the list and we'll email you the moment we open the doors."Supporting sentence under the heading.
detailsOpeningDetail[]noneIcon-led opening-details rows, e.g. address, opening date, and hours.
classNamestringnoneExtra classes for the outer section element.

Types

export interface OpeningDetail {
  icon: "address" | "date" | "hours";
  label: string;
  value: string;
}

Behavior notes

  • The email form is a real controlled input with a submit handler that flips local state to a success message, nothing is sent over the network.
  • The interior photo, venue name, eyebrow, heading, and opening-details grid are all static and non-interactive.
  • Each detail's icon (MapPin, Calendar, or Clock) is chosen internally from the `icon` string key rather than passed in as a component, so the block stays a plain data prop from the outside.
  • Below the lg breakpoint the two-column grid collapses to a single stacked column, the photo renders above the details and form.