Landing Page

This page plans the home page, https://workclock.karthik.nz/, section by section: what each section says, which facts it uses and where they come from, and a wireframe. Items marked Proposed are not decided; the rest follows the decision log on Design System.

The page has one job: in the first screen, show a developer what workclock computes, and further down give them the evidence to trust it. Words follow Writing Style; colours, type and spacing follow Design Tokens.

Rules for the whole page

Only verifiable facts. Each claim links to a file, a test, a workflow or a page the reader can open.
No invented social proof. No company logos, "used by", testimonials, star or download counters, or badges that show counts.
No hand-typed benchmark numbers. Figures come from benchmarks/RESULTS.md with its date and machine, or the page links there instead.
Before 0.1.0 is published, the install commands carry the README's status line: "In development. No release has been published yet."
Amber in four places only: the demo's due marker and label, the active code tab, the logo dot, and the pre-release Warning callout.
No scroll-triggered animation. The only motion is the due marker moving when an input changes, and none under prefers-reduced-motion.

1. Header

The same header links as the docs (Docs Site Structure), on Fumadocs' HomeLayout with the shared baseOptions() (Components): logo, Docs, Migrating, Playground, Benchmarks, search (Ctrl K / ⌘ K), GitHub, theme toggle. Sticky, 64 px.

2. Hero

Headline, one line, install commands, live demo, in that order.

Headline

Add 8 working hours. Land on Wednesday at 09:30.

Display size: 60 px on desktop, 38 px on phones, weight 600, tracking −0.035em (Typography). It is true for the README scenario: a ticket opened at 16:30 on Thursday 24 December 2026 in London, with 8 working hours, is due at 09:30 on Wednesday 30 December 2026. It matches the demo's default state, so it must change if the defaults change.

One line

Fast, correct business-time arithmetic for Rust, Python and JavaScript.

The one-line description from Brand, word for word. "Fast" and "correct" are allowed because section 4 links the proof.

Install commands

cargo add workclock jiff
pip install workclock
npm i workclock

One line per language, each with a copy button. The Rust line includes jiff because the Rust API takes and returns jiff types. uv add workclock is on the Install page.
Below, in text-2: "Rust 1.85+, Python 3.9+, Node.js 22+. MIT licence.", each item linked to its source (section 4).
Before 0.1.0, the status line sits directly above the commands as a Warning callout.
Proposed: a text link under the commands, "Coming from businesstimedelta?", that jumps to section 6.

Live demo: the week strip

A real Schedule from the workclock package, built from this repository's js/ folder and running in the browser as WebAssembly, so the demo matches the commit it was built from and works before 0.1.0. The visitor changes the inputs and watches the due time move. Components defines the week strip; this section defines what it does.

Default state, identical to the README quickstart:

Setting	Default
Zone	`Europe/London` (fixed)
Working hours	09:00–17:00 Monday to Friday, break 12:00–13:00 (fixed)
Holidays	2026-12-25 and 2026-12-28
Opened	Thursday 24 December 2026, 16:30
SLA	8 hours
Result	Due 09:30 on Wednesday 30 December 2026

Inputs:

Input	Control	Range
SLA	Number field "SLA (hours)" with − and + buttons	Proposed: 1 to 40 whole hours
Opened	A day in the strip (click or arrow keys) and a 24-hour time field	Proposed: any minute of the days shown
Holidays	A holiday toggle button on each working day's row	Any of the days shown

Proposed: editable working hours (start and end), the brief's "hours" input, added only if the strip stays readable on phones.

Output:

The due time as a sentence, the main result, 20 px text, tabular figures: "Due 09:30 on Wednesday 30 December 2026 (Europe/London)", in a polite live region (Accessibility).
The strip: work bars, used fill, hatched holidays, the amber marker. The marker moves (240 ms) on each change and jumps under reduced motion.
When the due time falls after the last day shown, the strip ends with an arrow and the sentence gives the due time. It never shows a wrong due time.
Proposed: under the sentence, the call the demo just made, in code font, for example support.add("2026-12-24T16:30:00Z", 8 * 3_600_000), changing with the inputs.

How it runs:

A client component loads the package in the browser. Proposed: the workclock/web entry with await init(), pending the prototype on Website Tech Stack.
Proposed: the strip shows the opened day through the due day, at least 7 and at most 14 days.
Before the WebAssembly loads, the strip shows the default state prerendered at build time, already correct, so nothing jumps.
The demo makes no request except for its own .wasm file from the site.

3. Same answer in three languages

Heading: "Same answer in Rust, Python and JavaScript". One code tab set, Rust, Python, JavaScript, holding the README quickstart word for word. Each tab ends in the same answer: due at 09:30 on 30 December 2026, and 2 hours 30 minutes used by 11:00 on 29 December.

The tab choice is remembered across the site (Components, code tabs); the active tab is underlined in accent.
Under the block: "These three samples run in CI as written.", linking the tests that run them: the README doctest in crates/workclock-wasm/src/lib.rs, tests/python/test_readme.py and js/test/readme.test.ts.
A link to the full programs: sla.rs, sla.py, sla.mjs.

4. How you can check it

A grid of short statements, each with its link. Each was true of the repository on 2026-10-24; re-check before launch.

Statement	Source
Every rule and edge case is specified with an example and an ID.	DESIGN.md
The Rust, Python and JavaScript test suites all run the same file of examples, so the bindings cannot disagree on them.	`tests/fixtures/design_examples.json`
Each binding is compared with a brute-force oracle on random schedules: proptest (Rust), Hypothesis (Python), fast-check (JavaScript).	`oracle_properties.rs`, `test_properties.py`, `properties.test.ts`
`workclock.compat` is tested against businesstimedelta 1.0.1 where 1.0.1 is correct, and against the oracle everywhere.	`tests/python/test_differential.py`
businesstimedelta's own test suite runs against `workclock.compat` in CI.	`tests/python/upstream`
Each upstream bug it fixes has a test: issues 8, 9, 10 and 12, and overnight shifts.	`tests/python/upstream_issues`
CI fails if line coverage of the Rust crate drops below 90%.	`ci.yml`, job `coverage`
Tested on Linux, macOS and Windows; Python 3.9 and 3.15; Node.js 22, 24 and 26; Rust 1.85 checked separately.	`ci.yml`, jobs `test`, `python-test`, `wasm`, `msrv`
Benchmarks compare every binding with businesstimedelta 1.0.1, with medians, p95s, date and machine.	Benchmarks, RESULTS.md
The npm package is published with provenance, so npm shows which workflow run built it.	`release.yml`, job `npm`
PyPI packages are published from GitHub Actions with trusted publishing, without a stored token.	`release.yml`, job `pypi`; Release Process
Every GitHub Action is pinned to a commit SHA.	ADR 0002
MIT licence. Rust 1.85+, CPython 3.9+, Node.js 22+.	LICENSE, README requirements

Provenance and trusted publishing are also visible on the package pages on npmjs.com and pypi.org; the section links to the workflow. The site uses RESULTS.md only (the wiki's Benchmarks page is a day older).

5. Use cases

Heading: "What it is for". Four text cards from the README on surface with a 1px rule border, each linking to the docs page for its function. No illustrations.

Use case (README)	Question	Function
Support-ticket SLAs	When is a ticket due, and how much of its SLA has elapsed?	`add`, `between`
Payroll and overtime	How many hours of a shift fell inside contracted time?	`between`
Staff rosters, including overnight shifts	When does the next shift start and end?	`next_period` / `nextPeriod`
Delivery ETAs that only count operating hours	When does a parcel arrive?	`add`

6. Coming from businesstimedelta

A full-width Note callout:

Coming from businesstimedelta? Most code migrates with one line:
import workclock.compat as businesstimedelta
It fixes overnight shifts, the crash past the last holiday (#8, #10) and the infinite loop with holidays in another zone (#9). MIGRATING.md lists every difference.

"Most code", not "all code": MIGRATING.md lists intentional differences.

7. Footer

Plain text in text-2 on bg, a rule line above.

Column	Links
Project	GitHub repository, Changelog, Security (`SECURITY.md`), Contributing
Packages	crates.io, docs.rs, PyPI, npm
Docs	Install, Concepts, Migrating, Benchmarks, `llms.txt`

Bottom line: "workclock is MIT licensed. It ports the tests and API of businesstimedelta by Sebastiaan Boer (MIT)." This matches the README's credit and the NOTICE file.

Wireframe

Desktop, 1200 px container:

┌──────────────────────────────────────────────────────────────────────────────┐
│ [mark] workclock    Docs  Migrating  Playground  Benchmarks  [⌕ ⌘K] [GH] [◐] │ 64px sticky
├──────────────────────────────────────────────────────────────────────────────┤
│   Add 8 working hours.                                                       │ headline, 60px
│   Land on Wednesday at 09:30.                                                │
│                                                                              │
│   Fast, correct business-time arithmetic for Rust, Python and JavaScript.    │ one line
│                                                                              │
│   ┌ Warning: In development. No release has been published yet. ────────┐    │ amber callout
│   │ cargo add workclock jiff                                       [⧉]  │    │ (pre-release only)
│   │ pip install workclock                                          [⧉]  │    │
│   │ npm i workclock                                                [⧉]  │    │
│   └─────────────────────────────────────────────────────────────────────┘    │
│   Rust 1.85+ · Python 3.9+ · Node.js 22+ · MIT       Migrating? →            │
│                                                                              │
│ ┌─ demo frame (surface, radius 12) ────────────────────────────────────────┐ │
│ │ SLA (hours) [−] 8 [+]    Opened [Thu 24 Dec] [16:30]    Europe/London    │ │
│ │                                                                          │ │
│ │           08:00   10:00   12:00   14:00   16:00   18:00                  │ │
│ │ Thu 24 [ ]│       │       │       │      ●███│                           │ │
│ │ Fri 25 [h]│       ╱╱╱╱╱╱╱ Holiday ╱╱╱╱╱╱╱╱  │                            │ │
│ │ Sat–Sun   │       │       Weekend │       │                              │ │
│ │ Mon 28 [h]│       ╱╱╱╱╱╱╱ Holiday ╱╱╱╱╱╱╱╱  │                            │ │
│ │ Tue 29 [ ]│   ████████████░  ░██████████████│                            │ │
│ │ Wed 30 [ ]│   ███|  Due Wed 30 Dec, 09:30   │                            │ │
│ │ Working hours 09:00–17:00, break 12:00–13:00. Times in Europe/London.    │ │
│ │                                                                          │ │
│ │ Due 09:30 on Wednesday 30 December 2026 (Europe/London)                  │ │ live region
│ └──────────────────────────────────────────────────────────────────────────┘ │
│                                                                              │
│   Same answer in Rust, Python and JavaScript                                 │ H2
│   ┌ [Rust] Python  JavaScript ──────────────────────────────────────────┐    │ amber underline
│   │ ...README quickstart...                                             │    │ on active tab
│   └─────────────────────────────────────────────────────────────────────┘    │
│   These three samples run in CI as written.                                  │
│                                                                              │
│   How you can check it          (grid of statements with links)              │ H2
│   What it is for                (four use-case cards)                        │ H2
│   ┌ Note: Coming from businesstimedelta? ───────────────────────────────┐    │
│   └─────────────────────────────────────────────────────────────────────┘    │
├──────────────────────────────────────────────────────────────────────────────┤
│ Project            Packages            Docs                                  │ footer
│ workclock is MIT licensed. It ports the tests and API of businesstimedelta…  │
└──────────────────────────────────────────────────────────────────────────────┘

Key: ░ working hours not yet counted (work), █ counted time (used), ● start, | due marker (accent), [h] holiday toggle pressed, [ ] not pressed.

Phone, 375 px wide, 16 px gutters:

┌───────────────────────────┐
│ [mark]            [⌕] [≡] │
├───────────────────────────┤
│ Add 8 working hours.      │ 38px
│ Land on Wednesday         │
│ at 09:30.                 │
│                           │
│ Fast, correct business-   │
│ time arithmetic for Rust, │
│ Python and JavaScript.    │
│                           │
│ ┌ Warning: In develop… ─┐ │
│ │ cargo add workclo…[⧉] │ │ commands scroll
│ │ pip install workc…[⧉] │ │ inside the block,
│ │ npm i workclock   [⧉] │ │ never the page
│ └───────────────────────┘ │
│                           │
│ ┌ demo ─────────────────┐ │
│ │ SLA (hours) [−] 8 [+] │ │ inputs stack
│ │ Opened Thu 24 [16:30] │ │
│ │ Thu    ░░░░░█         │ │ one row per day,
│ │ Fri    Holiday        │ │ weekends folded,
│ │ Sat–Sun Weekend       │ │ axis every 4 hours
│ │ Mon    Holiday        │ │
│ │ Tue    ██████         │ │
│ │ Wed    █|             │ │
│ │ Due 09:30 on Wed      │ │
│ │ 30 Dec 2026           │ │
│ └───────────────────────┘ │
│ ...sections stack...      │
└───────────────────────────┘

Open items

Proposed: the "Coming from businesstimedelta?" link; input ranges; editable working hours; the "call just made" code line; the 7–14 day range; the workclock/web entry (pending the prototype).
Benchmarks on the landing page, owner to pick: (1) link only to the Benchmarks page, or (2) numbers read at build time from benchmarks/RESULTS.md (the "single" medians for Rust, JavaScript, Python and businesstimedelta 1.0.1, with the date and CPU line), so nothing is typed by hand.

workclock is MIT licensed. The repository documentation is authoritative; this wiki summarises it.

Design System

Landing Page

Rules for the whole page

1. Header

2. Hero

Headline

One line

Install commands

Live demo: the week strip

3. Same answer in three languages

4. How you can check it

5. Use cases

6. Coming from businesstimedelta

7. Footer

Wireframe

Open items

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally