End-of-page call to action — “Get a quote”, “Book a table”, “Start a 14-day trial” — plus a newsletter signup and a booking bar for appointments and reservations. Server component: the newsletter is a plain form that works without JS, the booking bar a ~2 KB island that prefills WhatsApp with Intl-formatted dates, and calendar embeds a click-to-load facade.
Book the long table
Up to fourteen guests, a set menu of nine plates and the wine pairing Ece picks on the day.
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { Cta, waLink } from "@vamos-ui/react/blocks";
<Cta
title="Book the *long table*"
actions={[{ link: { href: "/reservations", label: "Book a table" }, style: "primary" }]}
contact={{ phone: "+902160000000", whatsapp: "+905321234567" }}
/>
<Cta variant="newsletter" title="The Thursday wine list" newsletter={{ action: subscribe /* server action */, status, message }} />
<Cta variant="booking" title="Reserve a table"
booking={{ provider: "whatsapp", whatsapp: "+905321234567", closedDays: ["mon"], timeZone: "Europe/Istanbul" }} />Message template placeholders: {date}, {time}, {guests} (already pluralised), {service}. Default: “Hi, I’d like to book for {guests} on {date} at {time}.”
Examples
Split with a photo
Title + action at the start, a cropped photo at the end; the band height follows the photo.
Groups
Bring your team for lunch
Weekday set lunch for six to twenty, in and out in fifty minutes. ₺1,350 per person, VAT included.
Minimal
No background change, one huge underlined text link, no buttons — one of the two places centred alignment is allowed.
Have a place people should find?
Let’s talk about your projectWe reply within one working day. Studio Arda, Rıhtım Caddesi 14, Cevizli.
Booking → WhatsApp (restaurant)
Date · time · guests with visible mono labels; past dates disabled in the business time zone, closed days refused with a localized message; opens wa.me with the message filled in.
Tuesday to Sunday
Reserve a table
Groups of eleven or more: call 0216 000 00 00.
Booking → booking page (spa)
provider="url" sends service, date and time as query params (plain GET — no JS needed).
Find a time
Booking → calendar embed
A static preview and “Open calendar”; the iframe loads in place only after a click.
Book a free consultation
Twenty minutes with Dr. Aylin Er, in Suadiye or by video.
API
Cta
| Prop | Type | Default |
|---|---|---|
variantCharacter (see examples). band defaults to theme.surface = "accent". | "band" | "split" | "minimal" | "newsletter" | "booking" | "band" |
titleh2 (one *emphasis*). | ReactNode | — |
eyebrow / lead / fineprintSupporting copy. | ReactNode | — |
actions≤ 2, one primary (later primaries demoted). minimal uses the first as a large text link. | SiteCta[] | — |
mediasplit: the photo (4:5 crop). | ImageData | — |
contactMono phone + WhatsApp line (E.164); WhatsApp announces “(opens WhatsApp)”. | { phone?; whatsapp?; whatsappText? } | — |
newsletteraction is a URL or a server action. consent is RichDoc or text — the legal copy is the app's responsibility (e.g. İYS/ETK in Turkey). | { action?; placeholder?; buttonLabel?; consent?; status?; message? } | — |
booking{ provider: whatsapp | url | phone | embed, whatsapp?, phone?, url?, fields?, services?, times?, maxGuests?, closedDays?, timeZone?, messageTemplate?, preview? } | CtaBookingConfig | — |
labelsdate, time, guests, guestsCount, askAvailability, closedOn, bookingMessage, subscribe, subscribed… | Partial<Site1Labels> | — |
theme / anchor / id / className / locale / components / editMode / headingLevellocale drives the WhatsApp message's date and time format. | BlockBaseProps | — |
waLink(e164, text?)
| Prop | Type | Default |
|---|---|---|
returnshttps://wa.me/<digits>?text=<encoded> | string | — |