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 uniquement — React, depuis @krizaka/ui/product-page. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- The overview of each product (Orazaka, Orochia, Yazakia).
- A building block's page that argues its decisions.
Quand ne pas l’utiliser
- For the whole company's home.À la place : Landing page
- For the steps of how it works.À la place : How-it-works page
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { ProductPage } from "@krizaka/ui/product-page";Exemples
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 | Défaut | Description |
|---|---|---|---|
reasonLabelsrequis | { trap: string; more: ReactNode; } | — | The words of the cards: the trap's label (read, not shown) and the way in. |
reasonsrequis | readonly ProductReason[] | — | The traps it removes. |
reasonsHeadingrequis | { eyebrow?: ReactNode; title: ReactNode; lead?: ReactNode; } | — | The reasons' section heading. |
titlerequis | 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. |
Accessibilité
- One
h1in the hero; each card anarticlenamed by its title. - Decisions are an ordered list, each part labelled in words.
Bonnes pratiques
- 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).
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.