Components / Layout
PageHero
Marketing page hero on the ink tone with a grid backdrop and violet glow. With a subtitle, the title becomes a mono kicker and the subtitle the headline.
Extracted fromMarketing site
Import
tsx
import { PageHero, Breadcrumbs } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { PageHero, Breadcrumbs } from "@somnia-chain/ui/next"Examples
Product hero with code aside
Somnia Oracle
Resolve any real-world question onchain, with receipts
Committees of Somnia Agents read the sources a question names and publish one answer, in minutes.
ask.ts
ts
const q = await oracle.ask({
question: "Will BTC close above $100k?",
sources: ["binance", "coinbase"],
})examples/page-hero/default.tsxShow codeHide code
tsx
import { CodeBlock, PageHero } from "@somnia-chain/ui"
export default function PageHeroExample() {
return (
<PageHero
crumbs={[
{ label: "Platform", href: "#" },
{ label: "Data & Truth", href: "#" },
]}
title="Somnia Oracle"
subtitle="Resolve any real-world question onchain, with receipts"
summary="Committees of Somnia Agents read the sources a question names and publish one answer, in minutes."
actions={[
{ label: "Talk to an expert", href: "#" },
{ label: "Read the docs", href: "#", variant: "secondary" },
]}
aside={
<CodeBlock
filename="ask.ts"
language="ts"
code={`const q = await oracle.ask({\n question: "Will BTC close above $100k?",\n sources: ["binance", "coinbase"],\n})`}
/>
}
/>
)
}Props
PageHero