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 only — React, from @krizaka/ui/marketing-layout. Beta: its API may still change in a minor version.
When to use
- Every public page of a Krizaka site: a product, pricing, a hub, a story.
- A product's public landing.
When not to use
- For a signed-in screen.Use instead: App shell
- For a documentation page with a sidebar.Use instead: Docs layout
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { MarketingLayout } from "@krizaka/ui/marketing-layout";Examples
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 | Default | Description |
|---|---|---|---|
headerrequired | ReactNode | — | The site's bar (a floating NavBar of @krizaka /ui/nav-bar). |
skipLabelrequired | string | — | The words of the link that skips to the content (Skip to content). |
footer | ReactNode | — | The site's footer. |
Accessibility
main#contentreceives the focus from the skip link.- The bar floats over the hero:
--kz-hero-topkeeps the title clear of it.
Keyboard
| Keys | Action |
|---|---|
| Tab | The first stop is the skip link, which jumps to the page's content. |
Best practices
- 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.
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
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.