Marketing layout
A site's page: the link that skips to the content, the floating bar, the page made of a PageHero and Sections in one frame, the footer.
Web uniquement — React, depuis @krizaka/ui/marketing-layout. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Every public page of a Krizaka site: a product, pricing, a hub, a story.
- A product's public landing.
Quand ne pas l’utiliser
- For a signed-in screen.À la place : App shell
- For a documentation page with a sidebar.À la place : Docs layout
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { MarketingLayout } from "@krizaka/ui/marketing-layout";Exemples
A product page
Orazaka's page: hero with facts, reasons, decisions, the owl's promise, the closing call.
Sovereign AI · open source
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
Decisions
What we chose, and what it costs you
We chose
Local models by default.
We refused
A hosted API as the default path.
Because
A prompt that never leaves cannot leak.
What it costs you
You need a GPU, or patience on a CPU.
We chose
Zero telemetry.
We refused
Anonymous usage statistics.
Because
Anonymous rarely stays anonymous.
What it costs you
You tell us what breaks.
Every personal record stays in Québec, and you can read who touched it.
Ready to run it at home?
Three commands, then your first private answer.
Pricing and credits
Plans side by side, what a credit buys, the credits left.
Pricing
Pay once for what was done
Credits buy answers, images and minutes of video — never a seat you do not use.
Community
Freeself-hosted
- — Every feature
- — Your hardware
- — Community support
Workspace
Most chosen€29per month · 12,000 credits
- — Packs & Studios
- — Shared workspaces
- — Email support
Sovereign
Customon your servers
- — Installation with you
- — Law 25 review
- — A named engineer
Your credits
One credit ≈ one chat answer · 4 credits an image · 30 a minute of video.
A documentation hub
Groups of compact link cards under the hero.
Documentation
Build with Krizaka
The building blocks the products are made of, documented from their source.
The layout alone
Skip link, bar, hero, a section and a footer.
Props
A site's page: skip link, floating bar, the page, the footer.
| Prop | Type | Défaut | Description |
|---|---|---|---|
headerrequis | ReactNode | — | The site's bar (a floating NavBar of @krizaka /ui/nav-bar). |
skipLabelrequis | string | — | The words of the link that skips to the content (Skip to content). |
footer | ReactNode | — | The site's footer. |
Accessibilité
main#contentreceives the focus from the skip link.- The bar floats over the hero:
--kz-hero-topkeeps the title clear of it.
Clavier
| Touches | Action |
|---|---|
| Tab | The first stop is the skip link, which jumps to the page's content. |
Bonnes pratiques
- One PageHero per page, then Sections; the main action of the page is the only one with
shimmer. - Give the bar the frame's width (
--kz-page-max): its edges are the content's. - Templates show complete pages: copy one, keep its order.
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
Docs layout
A documentation page in the site's frame: the pages, the article and its contents on a wide screen; on a phone the pages fold into a disclosure above the article.
Settings layout
Settings: the sections on the side (a row of chips that scrolls on a phone) and the current section's forms, each a titled card with its own save.