Product page
A product's overview in its brand: split hero with facts and the product alive, the traps it removes as compact argument cards, its decisions with their cost, the promise a bird keeps, the closing call.
Web only — React, from @krizaka/ui/product-page. Beta: its API may still change in a minor version.
When to use
- The overview of each product (Orazaka, Orochia, Yazakia).
- A building block's page that argues its decisions.
When not to use
- For the whole company's home.Use instead: Landing page
- For the steps of how it works.Use instead: How-it-works page
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ProductPage } from "@krizaka/ui/product-page";Examples
Orazaka
The sovereign AI engine's overview, in its orange.
Orazaka · sovereign AI
The AI that never leaves home
Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere.
- Apache-2.0
- Law 25 · GDPR
“Summarise the lease in plain French.” — answered locally in 1.8 s.
Decisions
What we chose, and what it costs you
We chose
Local models by default.
We refused
A hosted API by default.
Because
A prompt that never leaves cannot leak.
What it costs you
A GPU, or patience.
Every personal record stays in Québec, and you can read who touched it.
Ready to run it at home?
Props
A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call.
| Prop | Type | Default | Description |
|---|---|---|---|
reasonLabelsrequired | { trap: string; more: ReactNode; } | — | The words of the cards: the trap's label (read, not shown) and the way in. |
reasonsrequired | readonly ProductReason[] | — | The traps it removes. |
reasonsHeadingrequired | { eyebrow?: ReactNode; title: ReactNode; lead?: ReactNode; } | — | The reasons' section heading. |
titlerequired | ReactNode | — | The promise: the page's h1. |
actions | ReactNode | — | The hero's actions. |
brand | string | — | The product's brand (orazaka, orochia…): the page wears .brand-<id>. |
closing | { title: ReactNode; body?: ReactNode; actions: ReactNode; } | — | The closing call. |
decisions | { eyebrow?: ReactNode; title: ReactNode; items: readonly Decision[]; labels: { chose: ReactNode; refused: ReactNode; because: ReactNode; cost: ReactNode; }; } | — | The decisions' section: heading, decisions and their four labels. |
facts | readonly Fact[] | — | Facts under the lead (open source, a law it keeps). |
lead | ReactNode | — | One or two sentences under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
mark | ReactNode | — | The product's mark and name, above the title. |
promise | { bird: "falcon" | "owl" | "duck" | "flamingo" | "pigeon" | "lovebird" | "crane"; label: ReactNode; text: ReactNode; } | — | The promise a bird keeps, under the decisions. |
visual | ReactNode | — | The product alive, in a window beside the words. |
visualLabel | ReactNode | — | The window's caption. |
Accessibility
- One
h1in the hero; each card anarticlenamed by its title. - Decisions are an ordered list, each part labelled in words.
Best practices
- The traps in one line each; the long version on the page
hrefleads to. - Say what every decision costs: a decision without its cost is an advertisement.
- Pass
brand: the page wears the product's colour. - Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Pricing page
Plans and what they cost: the plans side by side with the featured one lifted, the comparison as a table, what a credit buys, the questions people ask.
Status page
Where things stand: the overall state in words and colour, each service on its line, the incidents — or, for what is not built yet, its progress and how to hear about it.