ComponentsSite blocks

Hero

The first screen and the page h1, in five characters per sector — editorial (agency), split media (spa, clinic), full bleed (restaurant), product (SaaS) and statement (manifesto). The generic “centred title + two buttons + abstract visual” is deliberately absent. Server component, above the fold, so nothing animates in; the hero image gets fetchpriority=high.

blocks/site/hero.tsx, blocks/site/hero-video.tsx, blocks/site/registry-1.ts, styles/blocks.csstheme · material · accent · density · font

Studio Arda · Maltepe, Istanbul

Websites for places people actually visit.

We design and run sites for restaurants, clinics and hotels on the Asian side — menus your staff can edit and booking that lands on WhatsApp.

See the work

Founded: 2014
Sites live: 126
Team: 9 people, one office

The studio’s long table by the window, late afternoon

Installation

$ pnpm add @vamos-ui/react

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 { Hero } from "@vamos-ui/react/blocks";

<Hero
  variant="split-media"
  eyebrow="Day spa · Moda"
  title="Two hours, *nowhere* to be."         // one *emphasis*; renders the page h1
  lead="A marble hammam, a quiet pool…"
  actions={[{ link: { href: "/book", label: "Book a treatment" }, style: "primary" }]}
  media={{ src, alt, width, height, focal: { x: 0.5, y: 0.4 } }}
  caption="Treatment room 3, 2nd floor"
/>

Image sizes hints: split-media (min-width: 56rem) 42vw, 100vw · full-bleed 100vw · product min(100vw, 90rem). Titles use hyphens: manual (automatic hyphenation is unreliable in Turkish).

Examples

Split media (spa)

7/5 split; the portrait bleeds off the end edge (start edge in RTL) with a mono caption. Phones: photo on top, cropped square.

Day spa · Moda

Two hours, nowhere to be.

A marble hammam, a quiet pool and therapists who have been with us for a decade. Open daily from 10 am; last treatment at 8.

Book a treatment Treatments & prices

Address: Bahariye Cd. 41, Kadıköy
Open: Daily 10:00–21:00

A therapist laying warm stones beside a massage table — Treatment room 3, 2nd floor

Full bleed (restaurant) with an overlay navbar

Forced dark under a bottom-up scrim. video={{ src: "/dusk.mp4" }} plays muted and looping with a pause button; reduced motion keeps the poster.

Meyhane · Cevizli

Dinner, slowly.

Twenty-two cold meze and fish from the morning boats.

Tonight’s menu

Product (SaaS)

Release chip, two actions, and the product without device frame, cropped by the section edge. screenshot takes an image; visual takes live JSX.

v2.4November — shared inboxes

Every booking request in one inbox.

WhatsApp, Instagram and your website form, answered by the whole front desk. Set up in an afternoon.

Try free for 14 days Watch a 3-min demo

Teams: 1,900+
Median reply: 11 min

Elif Kaya2mTable for 4 on Friday at 20:30?WhatsApp
Can Demir14mDo you have a vegan menu?Instagram
Website form1hBirthday dinner, 12 people, 21 NovForm
Zeynep Aydın3hThank you, see you tonight!WhatsApp

Elif Kaya · WhatsApp

Hi! Table for 4 on Friday at 20:30? One of us is vegetarian.

Of course — Friday 20:30 for four, by the window. Our meze are mostly vegetarian.

Sent by Deniz · booking created

Statement

No image: one centred sentence at display-2xl, services as slash-separated links.

We build sites that open the door, not just a browser tab.

One hero × four font presets

Italic serif emphasis in editorial; accent-ink emphasis in grotesk, corporate and system; display sizes follow --display-scale.

data-font="editorial"

Fish from the morning boats.

Twenty-two cold meze, a raki list that runs to the back page, and a table by the water from 6 pm.

Book a table

data-font="grotesk"

Fish from the morning boats.

Twenty-two cold meze, a raki list that runs to the back page, and a table by the water from 6 pm.

Book a table

data-font="corporate"

Fish from the morning boats.

Twenty-two cold meze, a raki list that runs to the back page, and a table by the water from 6 pm.

Book a table

data-font="system"

Fish from the morning boats.

Twenty-two cold meze, a raki list that runs to the back page, and a table by the water from 6 pm.

Book a table

API

Hero

Prop	Type	Default
`variant` Character (see examples).	`"editorial" \| "split-media" \| "full-bleed" \| "product" \| "statement"`	`"editorial"`
`title` The page h1. A string supports one emphasis. ≤ 9 words reads best (lint).	`ReactNode`	`—`
`eyebrow` Small mono line above the title.	`ReactNode`	`—`
`lead` Intro paragraph (≤ 240 characters in the schema).	`ReactNode`	`—`
`actions` ≤ 2, one primary. Editorial shows the first as a text link.	`SiteCta[]`	`—`
`media` editorial strip (21:9), split-media portrait (4:5), full-bleed background / video poster.	`ImageData`	`—`
`video` full-bleed: muted looping MP4 + pause button (WCAG 2.2.2).	`{ src: string }`	`—`
`caption` split-media: mono caption in the photo's corner.	`ReactNode`	`—`
`meta` Up to 4 true facts (Founded · 2014).	`SiteMeta[]`	`—`
`screenshot / visual` product: the product shot, cropped by the section's bottom edge.	`ImageData / ReactNode`	`—`
`release` product: chip above the title.	`{ label; href; tag? }`	`—`
`services` statement: slash-separated links.	`{ label; href }[]`	`—`
`aside` full-bleed: the corner card (glassy in glass mode).	`{ title; body?; cta? }`	`—`
`height` full-bleed: screen fills 100svh.	`"auto" \| "screen"`	`"auto"`
`headingLevel` The renderer passes 2 to every hero after the first.	`1 \| 2 \| 3`	`1`
`theme / anchor / id / className / labels / locale / components / editMode` Section theming and adapters (full-bleed always forces mode: dark).	`BlockBaseProps`	`—`

Heatmap

Hierarchy chart