mirror of
https://github.com/DeBrosOfficial/orama.git
synced 2026-06-17 05:04:12 +00:00
93dface005
- Add --fanout flag to push command for server-to-server deployment - Implement agent forwarding for efficient multi-node distribution - Update landing page scene heights and section padding for mobile devices
1251 lines
56 KiB
TypeScript
1251 lines
56 KiB
TypeScript
import { useState, lazy, Suspense } from "react";
|
||
import { Link } from "react-router";
|
||
import { Page } from "../components/layout/page";
|
||
import { SplitText } from "../components/ui/split-text";
|
||
|
||
const ConsensusScene = lazy(() =>
|
||
import("../components/landing/consensus-scene").then((m) => ({
|
||
default: m.ConsensusScene,
|
||
})),
|
||
);
|
||
|
||
const OramaOneInline = lazy(() =>
|
||
import("../components/landing/orama-one-scene").then((m) => ({
|
||
default: m.OramaOneInline,
|
||
})),
|
||
);
|
||
import { Section } from "../components/layout/section";
|
||
import { SectionHeader } from "../components/ui/section-header";
|
||
import { Button } from "../components/ui/button";
|
||
import { DashedPanel } from "../components/ui/dashed-panel";
|
||
import { CrosshairDivider } from "../components/ui/crosshair-divider";
|
||
import { AnimateIn } from "../components/ui/animate-in";
|
||
import { StatusDot } from "../components/ui/status-dot";
|
||
import { SILVER } from "../components/ui/silver-theme";
|
||
import {
|
||
ArrowRight,
|
||
ExternalLink,
|
||
Coins,
|
||
Vote,
|
||
Cpu,
|
||
Server,
|
||
Wallet,
|
||
Repeat,
|
||
ChevronRight,
|
||
Zap,
|
||
Shield,
|
||
Lock,
|
||
Eye,
|
||
EyeOff,
|
||
} from "lucide-react";
|
||
|
||
/* ═══════════════════════════════════════════
|
||
1. HERO
|
||
═══════════════════════════════════════════ */
|
||
function BlockchainHero() {
|
||
return (
|
||
<Section padding="wide">
|
||
<div className="flex flex-col items-center text-center min-h-[70vh] justify-center gap-6 max-w-3xl mx-auto">
|
||
<span
|
||
className="inline-flex items-center px-3 py-1 text-xs font-mono tracking-widest uppercase rounded-full"
|
||
style={{ border: `1px dashed ${SILVER.mid}`, color: SILVER.light }}
|
||
>
|
||
STANDALONE L1 BLOCKCHAIN
|
||
</span>
|
||
|
||
<h1 className="font-display font-bold text-4xl lg:text-6xl leading-tight">
|
||
<SplitText
|
||
text="The eternal decentralized"
|
||
className="text-fg"
|
||
delay={30}
|
||
duration={0.6}
|
||
splitType="chars"
|
||
from={{ opacity: 0, y: 30 }}
|
||
to={{ opacity: 1, y: 0 }}
|
||
/>
|
||
<br />
|
||
<SplitText
|
||
text="computer & financial system."
|
||
delay={30}
|
||
duration={0.6}
|
||
splitType="chars"
|
||
from={{ opacity: 0, y: 30 }}
|
||
to={{ opacity: 1, y: 0 }}
|
||
className=""
|
||
/>
|
||
</h1>
|
||
|
||
<style>{`
|
||
h1 > span:last-of-type .split-char {
|
||
background: ${SILVER.gradient};
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
`}</style>
|
||
|
||
<p className="text-muted text-sm leading-relaxed max-w-lg">
|
||
Orama combines Bitcoin-grade scarcity with a global decentralized cloud.
|
||
210,000,000 $ORAMA hard cap. Zero pre-mine. 100% mined. BTC-only economy.
|
||
Pure WASM smart contracts. Built for a 1,000-year horizon.
|
||
</p>
|
||
|
||
<div className="flex flex-wrap items-center gap-3 justify-center pt-4">
|
||
<Button asChild variant="ghost" size="lg">
|
||
<a href="/orama-whitepaper-v3.pdf" target="_blank" rel="noopener noreferrer">
|
||
Whitepaper
|
||
<ExternalLink className="w-3.5 h-3.5 ml-2" />
|
||
</a>
|
||
</Button>
|
||
<Button asChild variant="ghost" size="lg">
|
||
<Link to="/investors#participate">
|
||
Run a Node
|
||
<ArrowRight className="w-3.5 h-3.5 ml-2" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
2. TWO LAYERS
|
||
═══════════════════════════════════════════ */
|
||
function TwoLayers() {
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="Two Layers, One Chain"
|
||
subtitle="An immutable financial core and a modular compute layer — tightly integrated, never separable."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
|
||
<AnimateIn>
|
||
<DashedPanel withCorners withBackground className="h-full border-accent/30">
|
||
<div className="flex flex-col gap-4 p-4">
|
||
<div className="flex items-center gap-2">
|
||
<Lock className="w-6 h-6 text-accent" />
|
||
<span className="text-xs font-mono text-accent tracking-wider uppercase">Immutable</span>
|
||
</div>
|
||
<h3 className="font-display font-bold text-fg text-lg">Financial Core</h3>
|
||
<p className="text-muted text-sm leading-relaxed">
|
||
BTC + $ORAMA economics. 210M hard cap, emission schedule, halving, BTC-only economy,
|
||
100% mining distribution, and BTC bridge security. Designed to be unchangeable for 1,000 years.
|
||
No governance vote can ever modify these rules.
|
||
</p>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
<AnimateIn>
|
||
<DashedPanel withBackground className="h-full">
|
||
<div className="flex flex-col gap-4 p-4">
|
||
<div className="flex items-center gap-2">
|
||
<Cpu className="w-6 h-6 text-accent" />
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">Upgradable</span>
|
||
</div>
|
||
<h3 className="font-display font-bold text-fg text-lg">Compute Layer</h3>
|
||
<p className="text-muted text-sm leading-relaxed">
|
||
Pure WASM execution, distributed SQL, KV store, IPFS, serverless functions,
|
||
AI Marketplace, and native BTC bridge. Upgradable via governance but can never
|
||
break the money layer. Write contracts in Rust, Go, TypeScript, or C++.
|
||
</p>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
</div>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
3. CONSENSUS — THREE PILLARS
|
||
═══════════════════════════════════════════ */
|
||
function ThreePillars() {
|
||
const pillars = [
|
||
{
|
||
icon: Coins,
|
||
title: "Proof of Stake",
|
||
description: "Classic staking for economic security. Validators stake $ORAMA as collateral. Minimum 1,000 $ORAMA at mainnet. Slashing for double-signing (100%), downtime (5-30%), and false attestation (50%).",
|
||
primary: false,
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: "Proof of Contribution",
|
||
description: "Real work performed, measured on-chain every epoch (1 hour). Uptime 40%, bandwidth 30%, compute/storage 20%, reliability 10%. Contribution score directly multiplies your earning power.",
|
||
primary: true,
|
||
},
|
||
{
|
||
icon: Server,
|
||
title: "Proof of Infrastructure",
|
||
description: "Nodes running OramaOS receive a 1.5x multiplier via TPM-based remote attestation. A node runner with modest stake but perfect uptime and OramaOS earns more than a whale who only stakes.",
|
||
primary: false,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="Hybrid Consensus"
|
||
subtitle="Three mechanisms combined — stake, contribution, and infrastructure."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
|
||
{pillars.map((p) => (
|
||
<AnimateIn key={p.title}>
|
||
<DashedPanel withCorners={p.primary} withBackground className={`h-full ${p.primary ? "border-accent/30" : ""}`}>
|
||
<div className="flex flex-col gap-4 p-3">
|
||
<div className="flex items-center gap-2">
|
||
<p.icon className="w-6 h-6 text-accent" />
|
||
{p.primary && (
|
||
<span className="text-xs font-mono text-accent tracking-wider uppercase">Core</span>
|
||
)}
|
||
</div>
|
||
<h3 className="font-display font-bold text-fg">{p.title}</h3>
|
||
<p className="text-muted text-sm leading-relaxed">{p.description}</p>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
))}
|
||
</div>
|
||
|
||
{/* Effective Power Formula */}
|
||
<AnimateIn>
|
||
<div className="mt-6">
|
||
<DashedPanel withCorners withBackground>
|
||
<div className="flex flex-col gap-4 p-4">
|
||
<h3 className="font-display font-bold text-fg text-center">Effective Power Formula</h3>
|
||
<div className="text-center font-mono text-sm sm:text-base text-fg py-3 px-4 rounded-lg" style={{ background: "rgba(255,255,255,0.03)" }}>
|
||
Effective Power = Staked $ORAMA × (1 + Contribution Score) × Infrastructure Multiplier
|
||
</div>
|
||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||
<div className="flex flex-col gap-1 items-center text-center">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">Block Time</span>
|
||
<span className="font-display font-bold text-fg">6 seconds</span>
|
||
</div>
|
||
<div className="flex flex-col gap-1 items-center text-center">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">Epoch</span>
|
||
<span className="font-display font-bold text-fg">1 hour</span>
|
||
</div>
|
||
<div className="flex flex-col gap-1 items-center text-center">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">Blocks/Day</span>
|
||
<span className="font-display font-bold text-fg">14,400</span>
|
||
</div>
|
||
<div className="flex flex-col gap-1 items-center text-center">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">Finality</span>
|
||
<span className="font-display font-bold text-fg">BFT / 1 hr</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DashedPanel>
|
||
</div>
|
||
</AnimateIn>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
4. TOKENOMICS — Emission Schedule
|
||
═══════════════════════════════════════════ */
|
||
function TokenomicsSection() {
|
||
const utilities = [
|
||
{ icon: Zap, title: "Gas Currency", desc: "All transactions require $ORAMA. Base fee burned. EIP-1559 congestion multiplier." },
|
||
{ icon: Coins, title: "Staking", desc: "Validators stake $ORAMA. Minimum 1,000 at mainnet. Slashing for malicious behavior." },
|
||
{ icon: Vote, title: "Governance", desc: "25% of total voting power (quadratic). NFT holders control the other 75%." },
|
||
{ icon: Wallet, title: "Service Payments", desc: "SQL, KV, IPFS, compute, AI inference, DEX trades — all paid in $ORAMA." },
|
||
];
|
||
|
||
const emissionSchedule = [
|
||
{ era: "1", years: "1-2", reward: "100 $ORAMA", annual: "~52.5M", cumulative: "~105M" },
|
||
{ era: "2", years: "3-4", reward: "50 $ORAMA", annual: "~26.25M", cumulative: "~157.5M" },
|
||
{ era: "3", years: "5-6", reward: "25 $ORAMA", annual: "~13.1M", cumulative: "~183.7M" },
|
||
{ era: "4", years: "7-8", reward: "12.5 $ORAMA", annual: "~6.6M", cumulative: "~196.9M" },
|
||
{ era: "5", years: "9-10", reward: "6.25 $ORAMA", annual: "~3.3M", cumulative: "~203.5M" },
|
||
{ era: "6+", years: "11+", reward: "Halving", annual: "Decreasing", cumulative: "210M cap" },
|
||
];
|
||
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="Tokenomics"
|
||
subtitle="$ORAMA — 210,000,000 hard cap. Zero pre-mine. 100% mined."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
{/* Token overview + utility */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8 items-center">
|
||
<AnimateIn>
|
||
<div className="flex flex-col gap-5">
|
||
<span
|
||
className="font-display font-bold text-4xl"
|
||
style={{ background: SILVER.gradient, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}
|
||
>
|
||
$ORAMA
|
||
</span>
|
||
<div className="grid grid-cols-3 gap-3">
|
||
<DashedPanel withBackground>
|
||
<div className="flex flex-col gap-1 p-2">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">Hard Cap</span>
|
||
<span className="font-display font-bold text-fg">210,000,000</span>
|
||
</div>
|
||
</DashedPanel>
|
||
<DashedPanel withBackground>
|
||
<div className="flex flex-col gap-1 p-2">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">Pre-Mine</span>
|
||
<span className="font-display font-bold text-fg">0%</span>
|
||
</div>
|
||
</DashedPanel>
|
||
<DashedPanel withCorners withBackground className="border-accent/30">
|
||
<div className="flex flex-col gap-1 p-2">
|
||
<span className="text-xs font-mono text-accent tracking-wider uppercase">Smallest Unit</span>
|
||
<span className="font-display font-bold text-fg">1M rays</span>
|
||
</div>
|
||
</DashedPanel>
|
||
</div>
|
||
|
||
{/* Block reward split */}
|
||
<DashedPanel withBackground>
|
||
<div className="flex flex-col gap-3 p-2">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">Block Reward Distribution</span>
|
||
<div className="flex h-3 rounded-full overflow-hidden">
|
||
<div className="h-full" style={{ width: "80%", background: SILVER.light }} title="Block Proposer" />
|
||
<div className="h-full" style={{ width: "20%", background: SILVER.dark }} title="Bonding Curve" />
|
||
</div>
|
||
<div className="flex items-center justify-between text-xs font-mono text-muted">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="w-2 h-2 rounded-sm" style={{ background: SILVER.light }} />
|
||
<span>80% Block Proposer</span>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="w-2 h-2 rounded-sm" style={{ background: SILVER.dark }} />
|
||
<span>20% Bonding Curve (cap 21M)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DashedPanel>
|
||
|
||
<p className="text-muted text-sm leading-relaxed">
|
||
Every single $ORAMA is earned by running a node. No team allocation, no investor round,
|
||
no foundation reserve, no airdrop. The creators earn tokens the same way as everyone else.
|
||
50% of total supply emitted in the first 2 years. Bitcoin-style halving every 2 years.
|
||
</p>
|
||
</div>
|
||
</AnimateIn>
|
||
<AnimateIn>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
{utilities.map((u) => (
|
||
<DashedPanel key={u.title} withBackground className="h-full">
|
||
<div className="flex flex-col gap-2 p-2">
|
||
<u.icon className="w-4 h-4 text-accent" />
|
||
<h4 className="font-display font-bold text-sm text-fg">{u.title}</h4>
|
||
<p className="text-muted text-xs leading-relaxed">{u.desc}</p>
|
||
</div>
|
||
</DashedPanel>
|
||
))}
|
||
</div>
|
||
</AnimateIn>
|
||
</div>
|
||
|
||
{/* Emission schedule table + fee schedule */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
|
||
{/* Emission schedule */}
|
||
<AnimateIn>
|
||
<DashedPanel withCorners withBackground>
|
||
<div className="overflow-x-auto p-2">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase block mb-3 px-1">Emission Schedule</span>
|
||
<table className="w-full text-left text-xs sm:text-sm">
|
||
<thead>
|
||
<tr className="border-b border-dashed border-border">
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2 pr-3">Era</th>
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2 pr-3">Years</th>
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2 pr-3">Block Reward</th>
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2">Cumulative</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{emissionSchedule.map((row) => (
|
||
<tr key={row.era} className="border-b border-border/50">
|
||
<td className="text-sm text-fg py-2 pr-3 font-mono">{row.era}</td>
|
||
<td className="text-sm text-fg py-2 pr-3 font-mono">{row.years}</td>
|
||
<td className="text-sm text-fg py-2 pr-3 font-mono">{row.reward}</td>
|
||
<td className="text-sm text-fg py-2 font-mono">{row.cumulative}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
|
||
{/* Fee schedule */}
|
||
<AnimateIn>
|
||
<DashedPanel withBackground>
|
||
<div className="overflow-x-auto p-2">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase block mb-3 px-1">Genesis Fee Schedule</span>
|
||
<table className="w-full text-left text-xs sm:text-sm">
|
||
<thead>
|
||
<tr className="border-b border-dashed border-border">
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2 pr-3">Operation</th>
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2">Cost</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{[
|
||
{ op: "Transfer", cost: "1,000 rays" },
|
||
{ op: "WASM Execution", cost: "1,000 rays / 1M instr." },
|
||
{ op: "SQL Query", cost: "500 rays" },
|
||
{ op: "IPFS Storage", cost: "10,000 rays / MB" },
|
||
{ op: "KV Read/Write", cost: "200 rays" },
|
||
{ op: "DEX Trade", cost: "1,000 rays" },
|
||
{ op: "Private (zk-SNARK)", cost: "4x public" },
|
||
].map((row) => (
|
||
<tr key={row.op} className="border-b border-border/50">
|
||
<td className="text-sm text-fg py-2 pr-3">{row.op}</td>
|
||
<td className="text-sm text-fg py-2 font-mono">{row.cost}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
</div>
|
||
|
||
<AnimateIn>
|
||
<div className="flex flex-wrap items-center justify-center gap-3 mt-8">
|
||
<Button asChild variant="ghost" size="lg">
|
||
<a href="/orama-whitepaper-v3.pdf" target="_blank" rel="noopener noreferrer">
|
||
Full Tokenomics in Whitepaper
|
||
<ExternalLink className="w-3.5 h-3.5 ml-2" />
|
||
</a>
|
||
</Button>
|
||
</div>
|
||
</AnimateIn>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
5. HOW TO ACQUIRE $ORAMA
|
||
═══════════════════════════════════════════ */
|
||
function AcquireSection() {
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="How to Acquire $ORAMA"
|
||
subtitle="No pre-sale. No airdrop. Two ways to get $ORAMA."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
|
||
{/* Mine it */}
|
||
<AnimateIn>
|
||
<DashedPanel withCorners withBackground className="h-full border-accent/30">
|
||
<div className="flex flex-col gap-4 p-4">
|
||
<div className="flex items-center gap-2">
|
||
<Server className="w-6 h-6 text-accent" />
|
||
<span className="text-xs font-mono text-accent tracking-wider uppercase">Primary</span>
|
||
</div>
|
||
<h3 className="font-display font-bold text-xl text-fg">Run a Node</h3>
|
||
<p className="text-sm text-muted leading-relaxed">
|
||
Run a node and mine $ORAMA. During testnet, no staking required — any node operator
|
||
can participate and earn. Testnet tokens carry over to mainnet. At mainnet,
|
||
1,000 $ORAMA minimum stake activates, but testnet runners will already have earned more than enough.
|
||
</p>
|
||
<ul className="flex flex-col gap-2">
|
||
{[
|
||
"Era 1: 100 $ORAMA per block (~52.5M/year)",
|
||
"80% goes directly to the block proposer",
|
||
"OramaOS = 1.5x infrastructure multiplier",
|
||
"No staking needed during testnet",
|
||
"Testnet tokens are real — they carry over",
|
||
].map((item) => (
|
||
<li key={item} className="flex items-start gap-2">
|
||
<ChevronRight className="w-3.5 h-3.5 mt-0.5 shrink-0 text-accent" />
|
||
<span className="text-xs text-muted">{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<Button asChild variant="ghost" size="sm" className="w-fit">
|
||
<Link to="/node">
|
||
Learn About Running a Node
|
||
<ArrowRight className="w-3.5 h-3.5 ml-2" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
|
||
{/* Buy from bonding curve */}
|
||
<AnimateIn>
|
||
<DashedPanel withBackground className="h-full">
|
||
<div className="flex flex-col gap-4 p-4">
|
||
<div className="flex items-center gap-2">
|
||
<Coins className="w-6 h-6 text-accent" />
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">Secondary</span>
|
||
</div>
|
||
<h3 className="font-display font-bold text-xl text-fg">Buy with BTC</h3>
|
||
<p className="text-sm text-muted leading-relaxed">
|
||
Bridge BTC onto Orama and purchase $ORAMA from the protocol bonding curve or the
|
||
native order book. The bonding curve is always available as a guaranteed liquidity backstop.
|
||
Price follows a square root function — cheap early, expensive later.
|
||
</p>
|
||
<ul className="flex flex-col gap-2">
|
||
{[
|
||
"Bonding curve: Price = k x sqrt(total_sold)",
|
||
"k = 0.0000000006 BTC at genesis",
|
||
"Max 21M tokens via bonding curve",
|
||
"~38.5 BTC fills the entire curve",
|
||
"BTC reserve directly backs the bridge",
|
||
].map((item) => (
|
||
<li key={item} className="flex items-start gap-2">
|
||
<ChevronRight className="w-3.5 h-3.5 mt-0.5 shrink-0 text-accent" />
|
||
<span className="text-xs text-muted">{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<p className="text-xs text-muted/60 font-mono">
|
||
BTC only. No ETH, SOL, or stablecoins accepted.
|
||
</p>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
</div>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
6. ORAMA ONE — Hardware Node
|
||
═══════════════════════════════════════════ */
|
||
function OramaOneBlockchain() {
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="Orama One"
|
||
subtitle="The people's hardware node. Plug in, connect, earn."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8 items-center">
|
||
<AnimateIn>
|
||
<DashedPanel withCorners withBackground>
|
||
<div className="flex flex-col items-center text-center gap-6 py-8 px-4">
|
||
<span
|
||
className="inline-flex items-center px-3 py-1 text-xs font-mono tracking-widest uppercase rounded-full"
|
||
style={{ border: `1px dashed ${SILVER.mid}`, color: SILVER.light }}
|
||
>
|
||
HARDWARE NODE
|
||
</span>
|
||
|
||
<h3
|
||
className="font-display font-bold text-3xl"
|
||
style={{
|
||
background: SILVER.gradient,
|
||
WebkitBackgroundClip: "text",
|
||
WebkitTextFillColor: "transparent",
|
||
}}
|
||
>
|
||
Orama One
|
||
</h3>
|
||
|
||
<p className="text-muted text-sm leading-relaxed max-w-sm">
|
||
A purpose-built, 3D-printed hardware node. Pre-loaded with OramaOS.
|
||
Plug in power, connect to internet, it joins the network automatically.
|
||
Silent, low-power, designed for your desk.
|
||
</p>
|
||
|
||
<p className="text-xs font-mono text-muted/50 tracking-wider uppercase">
|
||
Coming soon — details to be announced
|
||
</p>
|
||
|
||
<Suspense fallback={null}>
|
||
<OramaOneInline />
|
||
</Suspense>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
|
||
<AnimateIn>
|
||
<div className="flex flex-col gap-5">
|
||
<h3 className="font-display font-bold text-xl text-fg">
|
||
OramaOS — hardened like a hardware wallet
|
||
</h3>
|
||
|
||
<p className="text-muted text-sm leading-relaxed">
|
||
OramaOS is a custom minimal operating system purpose-built for Orama nodes.
|
||
Running OramaOS provides the{" "}
|
||
<span className="text-fg font-semibold">1.5x Infrastructure Multiplier</span>,
|
||
verified via TPM-based remote attestation every epoch.
|
||
</p>
|
||
|
||
<ul className="flex flex-col gap-2">
|
||
{[
|
||
"No SSH — zero remote attack surface",
|
||
"Read-only root filesystem — tamper-proof",
|
||
"Full-disk encryption with Shamir secret sharing",
|
||
"Atomic updates with automatic rollback",
|
||
"Single root process (orama-agent) — minimal OS",
|
||
"TPM attestation — cryptographic proof, not trust",
|
||
"4+ cores, 8GB RAM, 256GB NVMe, TPM 2.0",
|
||
].map((item) => (
|
||
<li key={item} className="flex items-start gap-2">
|
||
<ChevronRight className="w-3.5 h-3.5 mt-0.5 shrink-0 text-accent" />
|
||
<span className="text-xs text-muted">{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</AnimateIn>
|
||
</div>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
7. BTC BRIDGE & NATIVE DEX
|
||
═══════════════════════════════════════════ */
|
||
function BtcBridgeAndDex() {
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="BTC-Only Economy"
|
||
subtitle="Two assets exist on Orama: BTC and $ORAMA. Nothing else."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
|
||
{/* BTC Bridge */}
|
||
<AnimateIn>
|
||
<DashedPanel withCorners withBackground className="h-full">
|
||
<div className="flex flex-col gap-4 p-4">
|
||
<div className="flex items-center gap-2">
|
||
<Shield className="w-5 h-5 text-accent" />
|
||
<h3 className="font-display font-bold text-fg">Trust-Minimized BTC Bridge</h3>
|
||
</div>
|
||
<p className="text-sm text-muted leading-relaxed">
|
||
Built into the protocol from genesis. Deposit BTC, receive native BTC on Orama 1:1.
|
||
Withdraw back to Bitcoin mainnet with Bitcoin-level security.
|
||
</p>
|
||
<ul className="flex flex-col gap-2">
|
||
{[
|
||
"Bitcoin light-client + zk-proofs + BitVM fraud proofs",
|
||
"1-of-N honest assumption — one honest validator is enough",
|
||
"0.25% bridge fee (50% validators, 50% auto-swap for Team NFTs)",
|
||
"Protocol reserve from bonding curve backs the bridge",
|
||
"Auto-halt on anomalous withdrawals (>10% in one epoch)",
|
||
"Min 0.001 BTC per bridge transaction",
|
||
].map((item) => (
|
||
<li key={item} className="flex items-start gap-2">
|
||
<ChevronRight className="w-3.5 h-3.5 mt-0.5 shrink-0 text-accent" />
|
||
<span className="text-xs text-muted">{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
|
||
{/* Native Order Book */}
|
||
<AnimateIn>
|
||
<DashedPanel withBackground className="h-full">
|
||
<div className="flex flex-col gap-4 p-4">
|
||
<div className="flex items-center gap-2">
|
||
<Repeat className="w-5 h-5 text-accent" />
|
||
<h3 className="font-display font-bold text-fg">Native Order Book</h3>
|
||
</div>
|
||
<p className="text-sm text-muted leading-relaxed">
|
||
A protocol-native order book — a chain primitive, not a smart contract.
|
||
One pair: $ORAMA/BTC. Pure price discovery.
|
||
No intermediary. No privileged LP class.
|
||
</p>
|
||
<ul className="flex flex-col gap-2">
|
||
{[
|
||
"Order book, NOT an AMM — no liquidity pools",
|
||
"Limit orders, market orders, cancellation",
|
||
"Randomized in-block ordering — no MEV/front-running",
|
||
"Callable from WASM contracts and external RPC",
|
||
"No listing fees, no gatekeepers, permissionless",
|
||
"Custom WASM tokens trade against $ORAMA",
|
||
].map((item) => (
|
||
<li key={item} className="flex items-start gap-2">
|
||
<ChevronRight className="w-3.5 h-3.5 mt-0.5 shrink-0 text-accent" />
|
||
<span className="text-xs text-muted">{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
</div>
|
||
|
||
{/* Asset hierarchy */}
|
||
<AnimateIn>
|
||
<div className="mt-6">
|
||
<DashedPanel withBackground>
|
||
<div className="flex flex-col sm:flex-row items-center justify-center gap-3 p-4 font-mono text-sm">
|
||
<span className="font-bold" style={{ color: "#F7931A" }}>BTC</span>
|
||
<span className="text-muted">{"<->"}</span>
|
||
<span className="text-xs text-muted">protocol order book</span>
|
||
<span className="text-muted">{"<->"}</span>
|
||
<span className="font-bold" style={{ background: SILVER.gradient, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>$ORAMA</span>
|
||
<span className="text-muted">{"<->"}</span>
|
||
<span className="text-xs text-muted">WASM DEX contracts</span>
|
||
<span className="text-muted">{"<->"}</span>
|
||
<span className="font-bold text-fg">Custom Tokens</span>
|
||
</div>
|
||
</DashedPanel>
|
||
</div>
|
||
</AnimateIn>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
8. PRIVACY
|
||
═══════════════════════════════════════════ */
|
||
function PrivacySection() {
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="Per-Transaction Privacy"
|
||
subtitle="PLONK zk-SNARKs with a universal trusted setup — upgrade privacy without new ceremonies."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
|
||
<AnimateIn>
|
||
<DashedPanel withBackground className="h-full">
|
||
<div className="flex flex-col items-center text-center gap-3 p-5">
|
||
<Eye className="w-8 h-8 text-accent" />
|
||
<h3 className="font-display font-bold text-fg text-lg">Public (Default)</h3>
|
||
<p className="text-xs text-muted max-w-xs">
|
||
Fully transparent, lowest cost. Standard gas fees apply.
|
||
</p>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
<AnimateIn>
|
||
<DashedPanel withCorners withBackground className="h-full border-accent/30">
|
||
<div className="flex flex-col items-center text-center gap-3 p-5">
|
||
<EyeOff className="w-8 h-8 text-accent" />
|
||
<h3 className="font-display font-bold text-fg text-lg">Private (4x Gas)</h3>
|
||
<p className="text-xs text-muted max-w-xs">
|
||
PLONK zk-SNARKs shield sender, receiver, and amount.
|
||
Only participants know the details. Transaction existence is still visible on-chain.
|
||
</p>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
</div>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
9. ANGELS & AI MARKETPLACE
|
||
═══════════════════════════════════════════ */
|
||
function AngelsSection() {
|
||
const steps = [
|
||
{ number: "01", title: "Build", desc: "Create an AI agent or model in any WASM-compatible language" },
|
||
{ number: "02", title: "Deploy", desc: "Register on the AI Marketplace — pricing set by the provider" },
|
||
{ number: "03", title: "Earn", desc: "Get paid in $ORAMA per API call. Transparent, competitive marketplace" },
|
||
];
|
||
|
||
const useCases = [
|
||
{ icon: Cpu, title: "Model Hosting", desc: "Host AI models, get paid per request" },
|
||
{ icon: Zap, title: "Angels", desc: "Autonomous agents with on-chain access" },
|
||
{ icon: Wallet, title: "On-Chain AI", desc: "Angels hold $ORAMA, execute transactions" },
|
||
{ icon: Server, title: "Compute", desc: "Capped at 10% of total network nodes" },
|
||
];
|
||
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="AI Marketplace & Angels"
|
||
subtitle="A protocol-level primitive for hosting and consuming AI models and autonomous agents."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
{/* How it works — 3 steps */}
|
||
<div className="grid grid-cols-3 gap-3 mt-8">
|
||
{steps.map((step) => (
|
||
<AnimateIn key={step.number}>
|
||
<DashedPanel withBackground className="h-full">
|
||
<div className="flex flex-col items-center text-center gap-2 p-4">
|
||
<span className="text-xs font-mono text-accent tracking-wider">{step.number}</span>
|
||
<h3 className="font-display font-bold text-fg">{step.title}</h3>
|
||
<p className="text-muted text-xs">{step.desc}</p>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
))}
|
||
</div>
|
||
|
||
{/* Angel Marketplace preview */}
|
||
<AnimateIn>
|
||
<div className="mt-6">
|
||
<DashedPanel withCorners withBackground>
|
||
<div className="flex flex-col gap-5 p-4">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="font-display font-bold text-fg">What Angels Can Do</h3>
|
||
<span className="text-xs font-mono text-muted/50 tracking-wider">COMING SOON</span>
|
||
</div>
|
||
|
||
<p className="text-sm text-muted leading-relaxed">
|
||
Angels are autonomous AI agents that interact with Orama's on-chain primitives:
|
||
SQL, KV store, IPFS, BTC bridge, and the native DEX. They hold $ORAMA,
|
||
execute transactions, manage data, and interact with other Angels.
|
||
Builders set per-request or subscription pricing in $ORAMA.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||
{useCases.map((uc) => (
|
||
<div key={uc.title} className="flex flex-col items-center text-center gap-2 py-3">
|
||
<uc.icon className="w-5 h-5 text-accent" />
|
||
<span className="text-sm font-display font-bold text-fg">{uc.title}</span>
|
||
<span className="text-xs text-muted">{uc.desc}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<p className="text-xs text-muted text-center">
|
||
Compute providers run standard nodes plus optional AI capacity. AI revenue is purely market-driven.
|
||
The protocol caps compute-provider nodes at 10% of total network nodes.
|
||
</p>
|
||
</div>
|
||
</DashedPanel>
|
||
</div>
|
||
</AnimateIn>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
10. GOVERNANCE & NFTs
|
||
═══════════════════════════════════════════ */
|
||
function GovernanceSection() {
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="On-Chain Governance"
|
||
subtitle="Fully on-chain. No off-chain snapshots. NFT holders control 75% of voting power."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
|
||
{[
|
||
{
|
||
title: "DeBros Team NFTs (100)",
|
||
power: "40%",
|
||
detail: "5 votes per NFT. 50% of bridge fees auto-swapped to $ORAMA. Emergency governance (24h). Migrated from Solana.",
|
||
highlight: true,
|
||
},
|
||
{
|
||
title: "DeBros NFTs (700)",
|
||
power: "35%",
|
||
detail: "1 vote per NFT. The community that built the network before the blockchain existed. Migrated from Solana.",
|
||
highlight: false,
|
||
},
|
||
{
|
||
title: "$ORAMA Holders",
|
||
power: "25%",
|
||
detail: "Quadratic voting: sqrt(tokens held). No whale can outweigh NFT holders. Open to all token holders.",
|
||
highlight: false,
|
||
},
|
||
].map((g) => (
|
||
<AnimateIn key={g.title}>
|
||
<DashedPanel withCorners={g.highlight} withBackground className={`h-full ${g.highlight ? "border-accent/30" : ""}`}>
|
||
<div className="flex flex-col gap-3 p-3">
|
||
<span className="font-display font-bold text-3xl text-accent">{g.power}</span>
|
||
<h3 className="font-display font-bold text-fg">{g.title}</h3>
|
||
<p className="text-muted text-sm leading-relaxed">{g.detail}</p>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
))}
|
||
</div>
|
||
|
||
{/* Three tiers */}
|
||
<AnimateIn>
|
||
<div className="mt-6">
|
||
<DashedPanel withBackground>
|
||
<div className="overflow-x-auto p-2">
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase block mb-3 px-1">Decision Tiers</span>
|
||
<table className="w-full text-left text-xs sm:text-sm">
|
||
<thead>
|
||
<tr className="border-b border-dashed border-border">
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2 pr-3">Tier</th>
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2 pr-3">Period</th>
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2 pr-3">Threshold</th>
|
||
<th className="text-xs font-mono text-muted tracking-wider uppercase py-2">Scope</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{[
|
||
{ tier: "Emergency", period: "24 hours", threshold: "60% Team NFTs", scope: "Security patches, exploits" },
|
||
{ tier: "Protocol", period: "3 days", threshold: "66% all groups", scope: "Fee changes, new primitives, upgrades" },
|
||
{ tier: "Constitutional", period: "14 days", threshold: "90% all groups", scope: "Governance structure, bridge fees" },
|
||
].map((row) => (
|
||
<tr key={row.tier} className="border-b border-border/50">
|
||
<td className="text-sm text-fg py-2 pr-3 font-bold">{row.tier}</td>
|
||
<td className="text-sm text-fg py-2 pr-3 font-mono">{row.period}</td>
|
||
<td className="text-sm text-fg py-2 pr-3 font-mono">{row.threshold}</td>
|
||
<td className="text-sm text-muted py-2">{row.scope}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</DashedPanel>
|
||
</div>
|
||
</AnimateIn>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
11. ROOTWALLET & OPEN SOURCE
|
||
═══════════════════════════════════════════ */
|
||
function RootWalletSection() {
|
||
return (
|
||
<Section>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<AnimateIn>
|
||
<DashedPanel withCorners withBackground>
|
||
<div className="flex flex-col items-center text-center gap-3 p-5">
|
||
<span
|
||
className="font-display font-bold text-xl"
|
||
style={{ background: SILVER.gradient, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}
|
||
>
|
||
RootWallet
|
||
</span>
|
||
<p className="text-xs text-muted max-w-xs">
|
||
The official wallet of the Orama Network. Manage $ORAMA, bridged BTC,
|
||
governance votes, and Angel interactions — all in one place.
|
||
</p>
|
||
<Button asChild variant="ghost" size="sm">
|
||
<a href="https://rootwallet.io" target="_blank" rel="noopener noreferrer">
|
||
rootwallet.io <ExternalLink className="w-3 h-3 ml-1" />
|
||
</a>
|
||
</Button>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
|
||
<AnimateIn>
|
||
<DashedPanel withBackground>
|
||
<div className="flex flex-col items-center text-center gap-3 p-5">
|
||
<span className="font-display font-bold text-xl text-fg">Open Source</span>
|
||
<p className="text-xs text-muted max-w-xs">
|
||
Orama Network is fully open source. All critical protocol components are verifiable.
|
||
Bug bounty program from testnet launch.
|
||
</p>
|
||
<div className="flex flex-wrap gap-2 justify-center">
|
||
<Button asChild variant="ghost" size="sm">
|
||
<a href="https://github.com/DeBrosDAO/orama" target="_blank" rel="noopener noreferrer">
|
||
Orama <ExternalLink className="w-3 h-3 ml-1" />
|
||
</a>
|
||
</Button>
|
||
<Button asChild variant="ghost" size="sm">
|
||
<a href="https://github.com/DeBrosDAO/network-ts-sdk" target="_blank" rel="noopener noreferrer">
|
||
SDK <ExternalLink className="w-3 h-3 ml-1" />
|
||
</a>
|
||
</Button>
|
||
<Button asChild variant="ghost" size="sm">
|
||
<a href="https://github.com/DeBrosDAO/orama-vault" target="_blank" rel="noopener noreferrer">
|
||
Vault <ExternalLink className="w-3 h-3 ml-1" />
|
||
</a>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
</div>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
12. ROADMAP
|
||
═══════════════════════════════════════════ */
|
||
function BlockchainRoadmap() {
|
||
const phases = [
|
||
{
|
||
status: "live" as const,
|
||
label: "NOW",
|
||
title: "Infrastructure Live",
|
||
items: [
|
||
"50+ nodes running across devnet and testnet",
|
||
"Core infrastructure operational (SQL, Cache, Storage, DNS)",
|
||
"Orama Proxy integrated with Anyone Protocol",
|
||
"AnChat Lite in closed beta",
|
||
],
|
||
},
|
||
{
|
||
status: "building" as const,
|
||
label: "TESTNET",
|
||
title: "Blockchain Testnet",
|
||
items: [
|
||
"L1 blockchain testnet — nodes begin earning $ORAMA",
|
||
"No staking required — all operators can participate",
|
||
"Testnet tokens carry over to mainnet (no reset)",
|
||
"PLONK trusted setup ceremony",
|
||
"Bug bounty program launches",
|
||
"AI Marketplace beta, Angels framework",
|
||
],
|
||
},
|
||
{
|
||
status: "planned" as const,
|
||
label: "TESTNET MATURITY",
|
||
title: "300-Node Threshold",
|
||
items: [
|
||
"Reach 300 independent nodes — hard genesis requirement",
|
||
"Bonding curve live on testnet",
|
||
"Native order book testing",
|
||
"DeBros NFT migration preparation",
|
||
"Orama One pre-orders",
|
||
],
|
||
},
|
||
{
|
||
status: "planned" as const,
|
||
label: "MAINNET",
|
||
title: "Full Launch",
|
||
items: [
|
||
"Full production launch — L1 blockchain live",
|
||
"BTC bridge live with trust-minimized security",
|
||
"Native DEX (order book) live — $ORAMA/BTC",
|
||
"Staking activated (1,000 $ORAMA minimum)",
|
||
"DeBros NFT bridge revenue begins",
|
||
"On-chain governance live",
|
||
],
|
||
},
|
||
];
|
||
|
||
const statusConfig = {
|
||
live: { dot: "active" as const, label: "LIVE" },
|
||
building: { dot: "warning" as const, label: "IN PROGRESS" },
|
||
planned: { dot: "neutral" as const, label: "PLANNED" },
|
||
};
|
||
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader
|
||
title="Roadmap"
|
||
subtitle="Milestone-based. No fixed dates. Ship when ready."
|
||
/>
|
||
</AnimateIn>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
|
||
{phases.map((phase) => (
|
||
<AnimateIn key={phase.label}>
|
||
<DashedPanel withCorners={phase.status === "live"} withBackground className={`h-full ${phase.status === "live" ? "border-accent/30" : ""}`}>
|
||
<div className="flex flex-col gap-3 p-3">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<StatusDot status={statusConfig[phase.status].dot} />
|
||
<span className="text-xs font-mono text-muted tracking-wider uppercase">
|
||
{statusConfig[phase.status].label}
|
||
</span>
|
||
</div>
|
||
<span className="text-xs font-mono text-accent tracking-wider">{phase.label}</span>
|
||
</div>
|
||
<h3 className="font-display font-bold text-lg text-fg">{phase.title}</h3>
|
||
<ul className="flex flex-col gap-2">
|
||
{phase.items.map((item) => (
|
||
<li key={item} className="flex items-start gap-2">
|
||
<ChevronRight className="w-3.5 h-3.5 mt-0.5 shrink-0 text-accent" />
|
||
<span className="text-xs text-muted">{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
))}
|
||
</div>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
13. FAQ
|
||
═══════════════════════════════════════════ */
|
||
function BlockchainFAQ() {
|
||
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
||
|
||
const faqs = [
|
||
{
|
||
question: "Is this an EVM-compatible chain?",
|
||
answer: "No. Orama is a pure WASM blockchain from genesis. Developers write smart contracts in Rust, Go, TypeScript, C++, or any language that compiles to WebAssembly. No EVM, no Solidity.",
|
||
},
|
||
{
|
||
question: "Is this a fork of another chain?",
|
||
answer: "No. Orama is built from first principles — a standalone L1 with its own consensus (hybrid PoS + Proof of Contribution + Proof of Infrastructure), its own VM (WASM), and its own economic model (BTC-only, 100% mined).",
|
||
},
|
||
{
|
||
question: "How do I get $ORAMA?",
|
||
answer: "Run a node and mine it. During testnet, no staking is required — anyone can participate. Alternatively, bridge BTC onto Orama and buy $ORAMA from the bonding curve or the native order book. There is no pre-sale, airdrop, or investor allocation.",
|
||
},
|
||
{
|
||
question: "Can I pay with ETH or SOL?",
|
||
answer: "No. Orama is a BTC-only economy. The only two assets on Orama are BTC (bridged from Bitcoin mainnet) and $ORAMA. No ETH, SOL, stablecoins, or other altcoins exist on the chain.",
|
||
},
|
||
{
|
||
question: "When is mainnet?",
|
||
answer: "Mainnet launches when the 300-node genesis requirement is met and the testnet has proven stability. The roadmap is milestone-based, not date-based. During testnet, tokens are real and carry over to mainnet — there is no reset.",
|
||
},
|
||
{
|
||
question: "What is Proof of Infrastructure?",
|
||
answer: "Nodes running the hardened OramaOS operating system receive a 1.5x multiplier to their Effective Power, verified via TPM-based remote attestation. Combined with Proof of Contribution (real work: uptime, compute, bandwidth) and Proof of Stake, this ensures a node doing real work outearns a whale who only stakes capital.",
|
||
},
|
||
{
|
||
question: "What are Angels?",
|
||
answer: "Angels are autonomous AI agents that run on the Orama Network. They can interact with on-chain primitives (SQL, KV, IPFS, BTC bridge, DEX), hold $ORAMA, execute transactions, and interact with other Angels. Builders deploy them to the AI Marketplace and set per-request or subscription pricing in $ORAMA.",
|
||
},
|
||
{
|
||
question: "What about privacy?",
|
||
answer: "Every transaction has a public/private toggle. Private transactions use PLONK zk-SNARKs to shield sender, receiver, and amount. Gas cost for private mode is 4x public. PLONK uses a universal trusted setup performed once at genesis — no new ceremony needed for circuit upgrades.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Section>
|
||
<AnimateIn>
|
||
<SectionHeader title="FAQ" subtitle="Common questions about the Orama L1." />
|
||
</AnimateIn>
|
||
|
||
<div className="flex flex-col gap-2 mt-8 max-w-3xl mx-auto">
|
||
{faqs.map((faq, i) => (
|
||
<AnimateIn key={i}>
|
||
<button
|
||
type="button"
|
||
onClick={() => setOpenIndex(openIndex === i ? null : i)}
|
||
className="w-full text-left"
|
||
>
|
||
<DashedPanel withBackground>
|
||
<div className="flex flex-col gap-0 p-2">
|
||
<div className="flex items-center justify-between gap-4">
|
||
<h3 className="font-display font-bold text-fg text-sm sm:text-base">{faq.question}</h3>
|
||
<ChevronRight className={`w-4 h-4 shrink-0 text-muted transition-transform duration-200 ${openIndex === i ? "rotate-90" : ""}`} />
|
||
</div>
|
||
<div className={`overflow-hidden transition-all duration-300 ${openIndex === i ? "max-h-60 mt-3 opacity-100" : "max-h-0 opacity-0"}`}>
|
||
<p className="text-muted text-sm leading-relaxed">{faq.answer}</p>
|
||
</div>
|
||
</div>
|
||
</DashedPanel>
|
||
</button>
|
||
</AnimateIn>
|
||
))}
|
||
</div>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
14. FINAL CTA
|
||
═══════════════════════════════════════════ */
|
||
function BlockchainCTA() {
|
||
return (
|
||
<Section padding="wide">
|
||
<AnimateIn>
|
||
<DashedPanel withCorners withBackground>
|
||
<div className="flex flex-col items-center text-center gap-6 py-8">
|
||
<span
|
||
className="inline-flex items-center px-3 py-1 text-xs font-mono tracking-widest uppercase rounded-full"
|
||
style={{ border: `1px dashed ${SILVER.mid}`, color: SILVER.light }}
|
||
>
|
||
100% MINED — ZERO PRE-MINE
|
||
</span>
|
||
|
||
<h2 className="font-display font-bold text-2xl lg:text-3xl text-fg">
|
||
The eternal decentralized computer.
|
||
<br />
|
||
<span
|
||
style={{
|
||
background: SILVER.gradient,
|
||
WebkitBackgroundClip: "text",
|
||
WebkitTextFillColor: "transparent",
|
||
}}
|
||
>
|
||
Run a node. Mine $ORAMA.
|
||
</span>
|
||
</h2>
|
||
|
||
<p className="text-muted text-sm max-w-lg">
|
||
No tokens to buy beforehand. No pre-sale to miss. Run a node, earn $ORAMA,
|
||
and be part of the only blockchain where everyone starts equal.
|
||
</p>
|
||
|
||
<div className="flex flex-wrap items-center gap-3 justify-center">
|
||
<Button asChild variant="ghost" size="lg">
|
||
<Link to="/node">
|
||
Run a Node
|
||
<ArrowRight className="w-3.5 h-3.5 ml-2" />
|
||
</Link>
|
||
</Button>
|
||
<Button asChild variant="ghost" size="lg">
|
||
<a href="/orama-whitepaper-v3.pdf" target="_blank" rel="noopener noreferrer">
|
||
Read Whitepaper
|
||
<ExternalLink className="w-3.5 h-3.5 ml-2" />
|
||
</a>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DashedPanel>
|
||
</AnimateIn>
|
||
</Section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════
|
||
PAGE
|
||
═══════════════════════════════════════════ */
|
||
export default function Blockchain() {
|
||
return (
|
||
<Page title="Orama L1 Blockchain — The Eternal Decentralized Computer">
|
||
<BlockchainHero />
|
||
<Suspense fallback={null}>
|
||
<ConsensusScene />
|
||
</Suspense>
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<TwoLayers />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<ThreePillars />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<TokenomicsSection />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<AcquireSection />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<OramaOneBlockchain />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<BtcBridgeAndDex />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<PrivacySection />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<AngelsSection />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<GovernanceSection />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<RootWalletSection />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<BlockchainRoadmap />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<BlockchainFAQ />
|
||
<Section padding="none"><CrosshairDivider /></Section>
|
||
<BlockchainCTA />
|
||
</Page>
|
||
);
|
||
}
|