ComponentsSite blocks

Process / steps

“How we work”: discovery → design → launch, a spa's first visit, SaaS setup. An ordered list — the order is announced, the numbers are visual — with hairline rules instead of cards; only the first step's marker carries the accent.

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

How we work

Six weeks from brief to launch

One team from the first visit to the thirtieth day after launch.

Start with a call

  1. Discovery

    Week 1

    Two hours at your place, not ours. We watch how bookings arrive today and who answers them.

  2. Design

    Weeks 2–3

    Real copy and your own photos from day one. One direction, refined — never three to pick from.

  3. Build & content

    Weeks 4–5

    Your staff learn to edit the menu while we build. Old URLs are redirected one by one.

  4. Launch & first month

    Week 6 →

    We watch Search Console and booking volume daily for thirty days and fix what we find.

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

<Steps
  title="Six weeks from *brief* to launch"
  steps={[
    { title: "Discovery", text: "Two hours at your place…", duration: "Week 1" },
    { title: "Design", text: "Real copy from day one…", duration: "Weeks 2–3" },
  ]}
/>

Examples

Horizontal (spa first visit)

A timeline from 56rem: numbers above the line, text below. Narrow containers turn it vertical.

Your first visit

What happens when you arrive

Come fifteen minutes early. Everything else is on us.

  1. Tea at reception

    A short form about pressure, allergies and anything we should avoid.

    10 min

  2. Hammam

    Steam, a kese scrub and a foam wash on the warm stone.

    20 min

  3. Your treatment

    Massage or facial in a private room on the second floor.

    50–90 min

  4. Rest

    The relaxation room, linden tea and lokum for as long as you like.

    No limit

Split (SaaS setup)

Sticky title + action on the start side, display-size numbers on the end side.

Setup

Live in an afternoon

No sales call needed. Most front desks are answering from Ledgerly the same day.

Try free for 14 days

  1. Connect WhatsApp Business

    Scan one QR code with the phone your front desk already uses. Existing chats stay where they are.

    5 min

  2. Add Instagram and your site form

    Log in with Meta; paste one line of HTML into your website, or use our plugin.

    10 min

  3. Invite the team

    Everyone gets their own login; conversations are assigned, never lost in someone’s phone.

    2 min

API

Steps

PropTypeDefault
variant
Layout (see examples).
"vertical" | "horizontal" | "split""vertical"
steps
{ title, text?, duration?, media? } — 2–8 steps.
StepsItem[]—
eyebrow / title / lead
Section header.
ReactNode—
actions
≤ 2, beside the header (vertical, split) or under the steps (horizontal).
SiteCta[]—
theme / anchor / id / className / labels / locale / components / editMode / headingLevel
Step titles are one heading level below the title.
BlockBaseProps—
Previous
Stepper
Next
Switch