Krizaka
Documentation

Landing page

A landing page: the promise beside the product alive in a window, a band of proofs, the features as a bento where the main one takes the room, the closing call.

WebBetaTemplates

Web only — React, from @krizaka/ui/landing-page. Beta: its API may still change in a minor version.

When to use

  • The home of a company or a product line.
  • A campaign page that must sell in one screen.

When not to use

  • For one product's page, with its traps and decisions.Use instead: Product page
  • For a list of entry points.Use instead: Docs hub page

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { LandingPage } from "@krizaka/ui/landing-page";

Examples

Krizaka

The studio's landing: the promise, the console alive, proofs, three products in a bento.

Software studio · Montréal

Products that keep what is yours

Krizaka builds sovereign AI and a platform where creators are paid — open source, on your servers or ours.

$ npx orazaka install

✓ 1,284 answers this week, none left the server

34
public repositories
Apache-2.0
every line
0
telemetry calls

What we build

Three products, one way of building

  • Orazaka — the AI that never leaves home

    Chat, image, voice and video on your own server, one governed pipeline.

  • Orochia

    Creators paid 90 % of what fans spend.

  • Yazakia

    Meet by talking first — coming.

  • Open building blocks

    Users, billing, notifications — on Maven Central and npm.

  • One design system

    Krizaka UI, web and mobile, documented from its code.

Something to build together?

Tell us what you need; a person answers within two days.

Props

A landing page: split hero with the product alive, proofs, a bento of features, the closing call.

PropTypeDefaultDescription
featuresrequiredreadonly LandingFeature[]—The features, as a bento.
titlerequiredReactNode—The promise: the page's h1.
visualrequiredReactNode—The product, alive, beside the words: a recording, a live demo (framed as a window).
actionsReactNode—The hero's actions (the main one cut, with shimmer).
closing{ title: ReactNode; body?: ReactNode; actions: ReactNode; }—The closing call: its title, body and actions.
eyebrowReactNode—A mono line above the title.
featuresHeading{ eyebrow?: ReactNode; title: ReactNode; lead?: ReactNode; }—The features' section: its eyebrow, title and lead.
leadReactNode—One or two sentences under it.
proofsreadonly { value: ReactNode; label: ReactNode; }[]—Figures or facts in a band under the hero: { value, label }.
visualLabelReactNode—The window's caption (orochia.app — studio).

Accessibility

  • The hero's title is the page's h1; the window is a figure, its bar decorative.
  • Proofs are a description list; the bento a list of features.

Best practices

  • One lg feature in the bento: the one the visitor came for.
  • The window shows the real product (a recording, a demo), never a mock-up.
  • Three or four proofs, each a fact that can be checked.
  • Words and content arrive as props; the motion is the platform's ([data-reveal], still under reduced motion).

Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

How-it-works page

How a product works, told in steps along a numbered line — each step its words beside its visual, the sides alternating on a wide screen.

Legal page

A policy or terms: the date in force, the short version in plain words, the sections in a narrow column with their contents beside them.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components