Bosia Bosia v0.8.11

Process Sections

Process sections — a numbered how-it-works row and a vertical milestone timeline.

"How it works" sections for a service, agency or product site. Each is a self-contained, full-width Svelte <section> built only from semantic tokens, so it restyles across every theme. Try the theme switcher above the preview.

Preview

How it works

From first call to launch day, the same four steps every time.

  1. 1

    Discover

    A short call to understand the goal, the audience and what done looks like.

  2. 2

    Design

    Wireframes first, then a polished design you can click through and react to.

  3. 3

    Build

    Weekly releases you can try in the browser — no big reveal at the end.

  4. 4

    Launch

    We ship it, watch the first real users and fix what they trip over.

Our story

The milestones that got us from a side project to a real company.

  1. 2022

    The side project

    Two of us, one laptop, evenings and weekends. The first version ships to ten friends.

  2. 2023

    First paying customers

    Word of mouth brings the first hundred accounts — enough to quit the day jobs.

  3. 2024

    The team grows

    Design, support and engineering hires turn a duo into a team of eight.

  4. 2025

    Going international

    Half of new signups now come from outside the country. We localise everything.

  5. Today

    Just getting started

    Thousands of teams rely on us daily. The roadmap is longer than ever.

Install

bun x bosia@latest add block process/steps
bun x bosia@latest add block process/timeline

The blocks

  • steps — a centered heading over a numbered horizontal row of steps, connector lines on desktop.
  • timeline — a vertical milestone timeline with year labels — good for an "our story" section on an about page.

Usage

<script lang="ts">
	import Steps from "$lib/blocks/process/steps/block.svelte";
</script>

<Steps />

Both blocks ship with sample copy so they render standalone. To use your own, pass heading, intro and the list: steps takes steps (array of { title, description }), timeline takes entries (array of { label, title, description }).

Source

src/lib/blocks/process/*/block.svelte