AI Data Company Landing New
A dark editorial landing page for an AI training data company with a dataset catalog, sample explorer, pipeline and compliance story.
Installation
01
Install with the shadcn CLI. The NiceUI theme comes along the first time.
$ npx shadcn@latest add https://niceui.dev/r/landing-ai-data-landing.json02
Or copy the source below (13 files). Dependencies: lucide-react.
Source
components/niceui/pages/landing/LandingPageCorpus.tsx
import { CorpusCatalog } from './corpus/Catalog';
import { CorpusFaq, CorpusPricing, CorpusTestimonials } from './corpus/Closing';
import { CorpusContact, CorpusFooter } from './corpus/Contact';
import { CorpusDelivery } from './corpus/Delivery';
import { CorpusExplorer } from './corpus/Explorer';
import { CorpusHero, CorpusNav } from './corpus/Hero';
import { CorpusPipeline } from './corpus/Pipeline';
import { CorpusProof } from './corpus/Proof';
import { CorpusTrust } from './corpus/Trust';
export function LandingPageCorpus() {
return (
<div className="relative min-h-screen bg-[#07090A] font-sans text-zinc-200 antialiased selection:bg-teal-300/25 selection:text-white">
<div aria-hidden className="dither-noise pointer-events-none fixed inset-0 z-0 opacity-40" />
<div className="relative">
<CorpusNav />
<CorpusHero />
<CorpusProof />
<CorpusCatalog />
<CorpusExplorer />
<CorpusPipeline />
<CorpusTrust />
<CorpusDelivery />
<CorpusPricing />
<CorpusTestimonials />
<CorpusFaq />
<CorpusContact />
<CorpusFooter />
</div>
</div>
);
}components/niceui/pages/landing/corpus/Catalog.tsx
import { useEffect, useMemo, useState } from 'react';
import { ArrowUpRight, AudioLines, CalendarClock, Check, Code2, FileText, Globe2, Image as ImageIcon, ListChecks, Loader2, Search, ThumbsUp, Video, X } from 'lucide-react';
import { cn } from '@/lib/cn';
import { Reveal } from '@/components/niceui/pages/landing/shared/motion';
import { DATASETS, TABS, type Dataset, type Modality } from './catalogData';
import { Button, Chip, Container, SectionHeading } from './ui';
const ICONS: Record<Modality, typeof FileText> = { Text: FileText, Code: Code2, Image: ImageIcon, Audio: AudioLines, Video: Video, RLHF: ThumbsUp, Eval: ListChecks };
function Sparkline({ data, className }: { data: number[]; className?: string }) {
const max = Math.max(...data);
const min = Math.min(...data);
const pts = data.map((v, i) => `${(i / (data.length - 1)) * 100},${28 - ((v - min) / (max - min || 1)) * 24}`).join(' ');
return (
<svg viewBox="0 0 100 30" preserveAspectRatio="none" className={cn('h-8 w-full', className)}>
<defs>
<linearGradient id="cx-spark" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stopColor="rgb(94 234 212)" stopOpacity="0.25" />
<stop offset="100%" stopColor="rgb(94 234 212)" stopOpacity="0" />
</linearGradient>
</defs>
<polygon points={`0,30 ${pts} 100,30`} fill="url(#cx-spark)" />
<polyline points={pts} fill="none" stroke="rgb(94 234 212)" strokeWidth="1.25" vectorEffect="non-scaling-stroke" />
</svg>
);
}
function DatasetCard({ d, index, onOpen }: { d: Dataset; index: number; onOpen: () => void }) {
const Icon = ICONS[d.modality];
return (
<button
type="button"
onClick={onOpen}
className="group relative flex animate-scale-in flex-col rounded-2xl border border-white/[0.07] bg-white/[0.02] p-6 text-left transition-all duration-500 ease-smooth hover:-translate-y-1 hover:border-teal-300/30 hover:bg-white/[0.04] hover:shadow-[0_24px_60px_-20px_rgba(94,234,212,0.2)]"
style={{ animationDelay: `${index * 50}ms` }}
>
<div className="flex items-start justify-between">
<span className="grid h-10 w-10 place-items-center rounded-xl border border-white/10 bg-white/[0.03] text-zinc-200 transition-colors group-hover:border-teal-300/30 group-hover:text-teal-200">
<Icon className="h-[18px] w-[18px]" strokeWidth={1.5} />
</span>
<Chip tone={d.license === 'Commercial' ? 'teal' : 'amber'}>{d.license}</Chip>
</div>
<h3 className="mt-5 text-lg font-medium text-white">{d.name}</h3>
<p className="mt-1 font-mono text-xs text-zinc-400">
{d.size} · {d.records}
</p>
<div className="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-xs text-zinc-400">
<span className="inline-flex items-center gap-1.5"><Globe2 className="h-3.5 w-3.5" />{d.languages}</span>
<span className="inline-flex items-center gap-1.5"><CalendarClock className="h-3.5 w-3.5" />{d.freshness}</span>
</div>
<Sparkline data={d.spark} className="mt-5 opacity-70 transition-opacity group-hover:opacity-100" />
<div className="mt-4">
<div className="flex items-center justify-between font-mono text-[10.5px] uppercase tracking-wider text-zinc-500">
<span>Quality index</span>
<span className="text-zinc-300">{d.quality}</span>
</div>
<div className="mt-2 h-1 overflow-hidden rounded-full bg-white/[0.06]">
<div className="h-full rounded-full bg-gradient-to-r from-teal-300 to-emerald-200 transition-all duration-1000 ease-smooth" style={{ width: `${d.quality}%` }} />
</div>
</div>
<ArrowUpRight className="absolute right-6 top-[4.5rem] h-4 w-4 text-zinc-500 opacity-0 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-teal-200 group-hover:opacity-100" />
</button>
);
}
function Drawer({ d, onClose }: { d: Dataset; onClose: () => void }) {
const [state, setState] = useState<'idle' | 'loading' | 'done'>('idle');
useEffect(() => {
const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onClose]);
useEffect(() => {
if (state !== 'loading') return;
const t = window.setTimeout(() => setState('done'), 1400);
return () => window.clearTimeout(t);
}, [state]);
const Icon = ICONS[d.modality];
return (
<div className="fixed inset-0 z-[100] flex justify-end" role="dialog" aria-modal="true" aria-label={d.name}>
<button type="button" aria-label="Close" onClick={onClose} className="absolute inset-0 animate-fade-in bg-black/70 backdrop-blur-sm" />
<aside className="relative flex h-full w-full max-w-xl animate-slide-in-right flex-col overflow-y-auto border-l border-white/10 bg-[#0A0D0E] shadow-2xl">
<div className="dither-dots pointer-events-none absolute inset-x-0 top-0 h-48 [mask-image:linear-gradient(black,transparent)]" />
<div className="relative flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
<span className="inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-wider text-zinc-400">
<Icon className="h-3.5 w-3.5" /> {d.modality} · {d.id}
</span>
<button type="button" onClick={onClose} className="grid h-8 w-8 place-items-center rounded-lg border border-white/10 text-zinc-300 transition hover:border-white/25 hover:text-white" aria-label="Close drawer">
<X className="h-4 w-4" />
</button>
</div>
<div className="relative space-y-8 p-6">
<div>
<div className="flex flex-wrap gap-2">
<Chip tone={d.license === 'Commercial' ? 'teal' : 'amber'}>{d.license} license</Chip>
<Chip>{d.languages}</Chip>
<Chip>{d.freshness}</Chip>
</div>
<h3 className="mt-4 font-serif text-4xl leading-tight text-white">{d.name}</h3>
<p className="mt-3 leading-relaxed text-zinc-400">{d.description}</p>
</div>
<div className="grid grid-cols-3 gap-px overflow-hidden rounded-xl border border-white/[0.06] bg-white/[0.06]">
{[['Volume', d.size], ['Records', d.records], ['Quality', `${d.quality}/100`]].map(([k, v]) => (
<div key={k} className="bg-[#0A0D0E] p-4">
<div className="font-mono text-[10px] uppercase tracking-wider text-zinc-500">{k}</div>
<div className="mt-1 text-sm text-white">{v}</div>
</div>
))}
</div>
<div>
<h4 className="font-mono text-[11px] uppercase tracking-[0.18em] text-zinc-400">Schema</h4>
<div className="mt-3 overflow-hidden rounded-xl border border-white/[0.06]">
<table className="w-full text-left text-sm">
<tbody>
{d.schema.map(([f, t, desc]) => (
<tr key={f} className="border-b border-white/[0.05] last:border-0 hover:bg-white/[0.02]">
<td className="px-4 py-2.5 font-mono text-xs text-teal-200">{f}</td>
<td className="px-4 py-2.5 font-mono text-xs text-amber-200/90">{t}</td>
<td className="px-4 py-2.5 text-xs text-zinc-400">{desc}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div>
<h4 className="font-mono text-[11px] uppercase tracking-[0.18em] text-zinc-400">Sample record</h4>
<pre className="mt-3 overflow-x-auto rounded-xl border border-white/[0.06] bg-black/40 p-4 font-mono text-[11.5px] leading-relaxed text-zinc-300">
{JSON.stringify(d.sample, null, 2)}
</pre>
</div>
<div className="flex flex-col gap-4 rounded-xl border border-teal-300/20 bg-teal-300/[0.05] p-5 sm:flex-row sm:items-center sm:justify-between">
<div>
<div className="font-mono text-[10.5px] uppercase tracking-wider text-teal-200/80">Indicative pricing</div>
<div className="mt-1 text-white">{d.price}</div>
</div>
<Button onClick={() => state === 'idle' && setState('loading')} disabled={state === 'loading'} className={cn(state === 'done' && 'bg-emerald-200')}>
{state === 'idle' && 'Request sample'}
{state === 'loading' && (<><Loader2 className="h-4 w-4 animate-spin" /> Preparing…</>)}
{state === 'done' && (<><Check className="h-4 w-4" /> Sample link sent</>)}
</Button>
</div>
{state === 'done' && (
<p className="animate-fade-up text-sm leading-relaxed text-zinc-400">
A signed 1,000-record sample with its license receipts will arrive in your inbox within minutes. Link expires in 72 hours.
</p>
)}
</div>
</aside>
</div>
);
}
export function CorpusCatalog() {
const [tab, setTab] = useState<(typeof TABS)[number]>('All');
const [q, setQ] = useState('');
const [open, setOpen] = useState<Dataset | null>(null);
const list = useMemo(() => {
const term = q.trim().toLowerCase();
return DATASETS.filter((d) => (tab === 'All' || d.modality === tab) && (!term || `${d.name} ${d.description} ${d.languages}`.toLowerCase().includes(term)));
}, [tab, q]);
return (
<section id="catalog" className="relative scroll-mt-20 py-24 sm:py-32">
<Container>
<div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
<Reveal>
<SectionHeading
eyebrow="01 — Catalog"
title={<>A licensed library, <em className="italic text-teal-100">ready to ship.</em></>}
sub="Over 340 production datasets with clean provenance. Filter by modality, inspect schemas, and pull a signed sample in minutes."
/>
</Reveal>
<Reveal delay={100} className="w-full lg:w-80">
<label className="flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-4 py-2.5 transition focus-within:border-teal-300/40 focus-within:bg-white/[0.05]">
<Search className="h-4 w-4 text-zinc-500" />
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search datasets, languages…" className="w-full bg-transparent text-sm text-white placeholder:text-zinc-500 focus:outline-none" />
{q && (
<button type="button" onClick={() => setQ('')} aria-label="Clear search" className="text-zinc-500 hover:text-white">
<X className="h-3.5 w-3.5" />
</button>
)}
</label>
</Reveal>
</div>
<div className="mt-10 flex gap-1 overflow-x-auto rounded-full border border-white/[0.07] bg-white/[0.02] p-1 [scrollbar-width:none] sm:inline-flex">
{TABS.map((t) => {
const count = t === 'All' ? DATASETS.length : DATASETS.filter((d) => d.modality === t).length;
return (
<button
key={t}
type="button"
onClick={() => setTab(t)}
className={cn('relative shrink-0 rounded-full px-4 py-1.5 text-sm transition-all duration-300 ease-smooth', tab === t ? 'bg-white text-[#07090A]' : 'text-zinc-400 hover:text-white')}
>
{t}
<span className={cn('ml-1.5 font-mono text-[10px]', tab === t ? 'text-zinc-600' : 'text-zinc-500')}>{count}</span>
</button>
);
})}
</div>
<div key={`${tab}-${q}`} className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{list.map((d, i) => (
<DatasetCard key={d.id} d={d} index={i} onOpen={() => setOpen(d)} />
))}
{list.length === 0 && (
<div className="col-span-full animate-fade-in rounded-2xl border border-dashed border-white/10 p-12 text-center text-zinc-400">
No datasets match "{q}". We can collect it for you —{' '}
<button type="button" className="text-teal-200 underline-offset-4 hover:underline" onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>
request a custom collection
</button>
.
</div>
)}
</div>
</Container>
{open && <Drawer d={open} onClose={() => setOpen(null)} />}
</section>
);
}components/niceui/pages/landing/shared/motion.tsx
import { type ReactNode, useEffect, useRef, useState } from 'react';
import { cn } from '@/lib/cn';
export function useInView<T extends Element>(threshold = 0.2) {
const ref = useRef<T>(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setInView(true);
io.disconnect();
}
},
{ threshold },
);
io.observe(el);
return () => io.disconnect();
}, [threshold]);
return { ref, inView };
}
export function Reveal({ children, delay = 0, className }: { children: ReactNode; delay?: number; className?: string }) {
const { ref, inView } = useInView<HTMLDivElement>(0.15);
return (
<div
ref={ref}
className={cn('transition-all duration-1000 ease-smooth', inView ? 'translate-y-0 opacity-100 blur-0' : 'translate-y-6 opacity-0 blur-[2px]', className)}
style={{ transitionDelay: `${delay}ms` }}
>
{children}
</div>
);
}
export function useCountUp(target: number, active: boolean, duration = 1800) {
const [val, setVal] = useState(0);
useEffect(() => {
if (!active) return;
let raf = 0;
const start = performance.now();
const loop = (now: number) => {
const t = Math.min(1, (now - start) / duration);
setVal(target * (1 - Math.pow(2, -10 * t)));
if (t < 1) raf = requestAnimationFrame(loop);
else setVal(target);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [target, active, duration]);
return val;
}components/niceui/pages/landing/corpus/catalogData.tsx
export type Modality = 'Text' | 'Code' | 'Image' | 'Audio' | 'Video' | 'RLHF' | 'Eval';
export type Dataset = {
id: string;
name: string;
modality: Modality;
size: string;
records: string;
license: 'Commercial' | 'Research';
languages: string;
freshness: string;
quality: number;
spark: number[];
description: string;
schema: [string, string, string][];
sample: Record<string, unknown>;
price: string;
};
const s = (seed: number) => Array.from({ length: 14 }, (_, i) => 30 + Math.round(40 * Math.abs(Math.sin(seed + i * 0.7)) + i * 2));
export const DATASETS: Dataset[] = [
{
id: 'polyglot-web-v4', name: 'Polyglot Web v4', modality: 'Text', size: '1.8T tokens', records: '2.4B docs', license: 'Commercial', languages: '212 languages', freshness: 'Updated 3d ago', quality: 96, spark: s(1),
description: 'Licensed long-form web text with publisher agreements, deduplicated at the paragraph level and scored for quality and toxicity.',
schema: [['id', 'string', 'Stable record id'], ['text', 'string', 'Normalized UTF-8 body'], ['lang', 'iso639-3', 'Detected language'], ['quality', 'float', '0–1 classifier score'], ['receipt', 'string', 'License receipt id']],
sample: { id: 'pw4-88120931', lang: 'por', quality: 0.94, text: 'A fotossíntese converte energia luminosa em energia química…', receipt: 'rcpt_4b1e' },
price: 'from $0.40 / 1M tokens',
},
{
id: 'stackline-code', name: 'Stackline Code', modality: 'Code', size: '640B tokens', records: '310M files', license: 'Commercial', languages: '61 languages', freshness: 'Updated 1w ago', quality: 94, spark: s(2),
description: 'Permissively licensed repositories with SPDX-verified licenses, commit history, test outcomes and execution traces.',
schema: [['repo', 'string', 'Origin repository'], ['path', 'string', 'File path'], ['content', 'string', 'Source code'], ['spdx', 'string', 'Verified license'], ['tests_pass', 'bool', 'CI outcome']],
sample: { repo: 'acme/tensor-utils', path: 'src/ops.rs', spdx: 'Apache-2.0', tests_pass: true, content: 'pub fn softmax(x: &[f32]) -> Vec<f32> { … }' },
price: 'from $0.85 / 1M tokens',
},
{
id: 'lumen-captions', name: 'Lumen Captions', modality: 'Image', size: '120M images', records: '120M pairs', license: 'Commercial', languages: '34 languages', freshness: 'Updated 2w ago', quality: 97, spark: s(3),
description: 'Photographer-licensed images with dense human captions, region boxes and aesthetic ratings. Model releases on file.',
schema: [['image_uri', 'uri', 'Signed S3 object'], ['caption', 'string', 'Dense caption'], ['regions', 'bbox[]', 'Labeled regions'], ['aesthetic', 'float', '1–10 rating'], ['release', 'string', 'Model release id']],
sample: { image_uri: 's3://corpus/lumen/0x91f2.jpg', caption: 'Aerial view of commuters crossing a striped intersection at noon', regions: 14, aesthetic: 7.8 },
price: 'from $0.012 / image',
},
{
id: 'chorus-speech', name: 'Chorus Speech', modality: 'Audio', size: '1.2M hours', records: '84M utterances', license: 'Commercial', languages: '94 locales', freshness: 'Updated 5d ago', quality: 95, spark: s(4),
description: 'Consented conversational and read speech with word-level timestamps, speaker diarization and accent metadata.',
schema: [['audio_uri', 'uri', '48kHz FLAC'], ['transcript', 'string', 'Verbatim text'], ['words', 'word[]', 'Aligned timestamps'], ['speaker', 'object', 'Demographics (opt-in)'], ['consent', 'string', 'Consent record']],
sample: { audio_uri: 's3://corpus/chorus/es-MX/71af.flac', duration_s: 6.42, transcript: '¿Podrías revisar el informe antes del viernes?', consent: 'cns_2290' },
price: 'from $18 / hour',
},
{
id: 'motion-atlas', name: 'Motion Atlas', modality: 'Video', size: '410K hours', records: '22M clips', license: 'Research', languages: 'Multilingual', freshness: 'Updated 1mo ago', quality: 92, spark: s(5),
description: 'Egocentric and third-person video with temporal action segments, camera motion labels and dense narration.',
schema: [['clip_uri', 'uri', '1080p H.265'], ['fps', 'int', 'Frame rate'], ['actions', 'segment[]', 'Temporal labels'], ['narration', 'string', 'Time-aligned narration']],
sample: { clip_uri: 's3://corpus/motion/ego/5512.mp4', fps: 30, actions: [{ t0: 1.2, t1: 3.8, label: 'pour water' }] },
price: 'from $42 / hour',
},
{
id: 'preference-atlas-v3', name: 'Preference Atlas v3', modality: 'RLHF', size: '14M pairs', records: '14M comparisons', license: 'Commercial', languages: '28 languages', freshness: 'Updated 2d ago', quality: 98, spark: s(6),
description: 'Expert-ranked response pairs across reasoning, coding, safety and creative writing with written rationales.',
schema: [['prompt', 'string', 'User turn'], ['chosen', 'string', 'Preferred response'], ['rejected', 'string', 'Dispreferred response'], ['rationale', 'string', 'Annotator explanation'], ['agreement', 'float', 'Inter-rater κ']],
sample: { prompt: 'Explain why the sky is blue to a 7-year-old.', chosen: 'Sunlight is made of many colors…', rejected: 'Rayleigh scattering ∝ 1/λ⁴…', agreement: 0.91 },
price: 'from $1.10 / pair',
},
{
id: 'safety-dialogues', name: 'Safety Dialogues', modality: 'RLHF', size: '2.6M turns', records: '410K convos', license: 'Research', languages: '12 languages', freshness: 'Updated 1w ago', quality: 97, spark: s(7),
description: 'Red-team conversations with policy labels, refusal quality ratings and safe-completion rewrites.',
schema: [['dialogue', 'turn[]', 'Multi-turn conversation'], ['policy', 'string', 'Violated category'], ['rewrite', 'string', 'Safe completion']],
sample: { policy: 'none', turns: 6, refusal_quality: 4.5, rewrite: 'Here is a safer way to approach this…' },
price: 'from $2.40 / turn',
},
{
id: 'gradient-eval', name: 'Gradient Reasoning Eval', modality: 'Eval', size: '48K items', records: '48K problems', license: 'Research', languages: 'English', freshness: 'Sealed · Q3', quality: 99, spark: s(8),
description: 'Never-published, contamination-audited problems in math, science and multi-step reasoning written by PhDs.',
schema: [['question', 'string', 'Problem statement'], ['answer', 'string', 'Canonical answer'], ['difficulty', 'int', '1–5'], ['canary', 'string', 'Contamination canary']],
sample: { question: 'Let f(x)=x³−3x. Count real solutions of f(f(x))=0.', answer: '9', difficulty: 4, canary: 'cx-canary-7a1' },
price: 'Custom, sealed access',
},
{
id: 'agentic-tasks', name: 'Agentic Tasks', modality: 'Eval', size: '9.2K tasks', records: '9.2K environments', license: 'Commercial', languages: 'English', freshness: 'Updated 4d ago', quality: 96, spark: s(9),
description: 'Containerized software and browser tasks with hidden test suites for evaluating long-horizon agents.',
schema: [['task_id', 'string', 'Task id'], ['env', 'docker', 'Reproducible image'], ['tests', 'hidden', 'Grader suite']],
sample: { task_id: 'agt-2219', env: 'corpus/env:py311-web', steps_median: 38, pass_at_1: 0.31 },
price: 'from $24K / suite',
},
{
id: 'scholar-full', name: 'Scholar Full-Text', modality: 'Text', size: '420B tokens', records: '61M papers', license: 'Commercial', languages: '18 languages', freshness: 'Updated 6d ago', quality: 98, spark: s(10),
description: 'Peer-reviewed full-text articles licensed from 300+ publishers, with LaTeX math, figures and citations preserved.',
schema: [['doi', 'string', 'Digital object id'], ['body', 'markdown', 'Full text with LaTeX'], ['citations', 'string[]', 'Resolved references']],
sample: { doi: '10.5555/corpus.2024.118', field: 'condensed matter', tokens: 14210 },
price: 'from $1.20 / 1M tokens',
},
];
export const TABS: ('All' | Modality)[] = ['All', 'Text', 'Code', 'Image', 'Audio', 'Video', 'RLHF', 'Eval'];components/niceui/pages/landing/corpus/ui.tsx
import { type ReactNode, useState } from 'react';
import { Check, Copy, Layers } from 'lucide-react';
import { cn } from '@/lib/cn';
export function scrollToId(id: string) {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
export function Container({ children, className }: { children: ReactNode; className?: string }) {
return <div className={cn('mx-auto w-full max-w-7xl px-6 lg:px-8', className)}>{children}</div>;
}
export function Logo({ className }: { className?: string }) {
return (
<span className={cn('inline-flex items-center gap-2.5', className)}>
<span className="relative grid h-7 w-7 place-items-center rounded-md border border-teal-300/30 bg-teal-300/10">
<Layers className="h-4 w-4 text-teal-200" strokeWidth={1.75} />
<span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 rounded-full bg-amber-300" />
</span>
<span className="font-serif text-2xl leading-none tracking-tight text-white">Corpus</span>
</span>
);
}
export function Eyebrow({ children, className }: { children: ReactNode; className?: string }) {
return (
<div className={cn('inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.18em] text-teal-200/90', className)}>
<span className="h-px w-6 bg-teal-300/50" />
{children}
</div>
);
}
export function SectionHeading({
eyebrow,
title,
sub,
align = 'left',
className,
}: {
eyebrow: string;
title: ReactNode;
sub?: ReactNode;
align?: 'left' | 'center';
className?: string;
}) {
return (
<div className={cn('max-w-3xl', align === 'center' && 'mx-auto text-center', className)}>
<Eyebrow className={align === 'center' ? 'justify-center' : undefined}>{eyebrow}</Eyebrow>
<h2 className="mt-5 font-serif text-4xl leading-[1.1] tracking-tight text-white sm:text-5xl lg:text-6xl">{title}</h2>
{sub && <p className="mt-5 text-base leading-relaxed text-zinc-400 sm:text-lg">{sub}</p>}
</div>
);
}
type BtnProps = { children: ReactNode; onClick?: () => void; className?: string; variant?: 'primary' | 'ghost' | 'outline'; type?: 'button' | 'submit'; disabled?: boolean };
export function Button({ children, onClick, className, variant = 'primary', type = 'button', disabled }: BtnProps) {
return (
<button
type={type}
onClick={onClick}
disabled={disabled}
className={cn(
'group inline-flex items-center justify-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium transition-all duration-300 ease-smooth focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-300/60 disabled:cursor-not-allowed disabled:opacity-60',
variant === 'primary' && 'bg-teal-200 text-[#04110e] shadow-[0_0_0_1px_rgba(94,234,212,0.4),0_8px_32px_-8px_rgba(94,234,212,0.55)] hover:bg-teal-100 hover:shadow-[0_0_0_1px_rgba(94,234,212,0.6),0_12px_40px_-8px_rgba(94,234,212,0.7)] active:scale-[0.98]',
variant === 'outline' && 'border border-white/15 bg-white/[0.03] text-zinc-100 hover:border-white/30 hover:bg-white/[0.07] active:scale-[0.98]',
variant === 'ghost' && 'text-zinc-300 hover:bg-white/5 hover:text-white',
className,
)}
>
{children}
</button>
);
}
export function Chip({ children, tone = 'neutral', className }: { children: ReactNode; tone?: 'neutral' | 'teal' | 'amber'; className?: string }) {
return (
<span
className={cn(
'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-mono text-[10.5px] uppercase tracking-wider',
tone === 'neutral' && 'border-white/10 bg-white/[0.03] text-zinc-300',
tone === 'teal' && 'border-teal-300/25 bg-teal-300/10 text-teal-200',
tone === 'amber' && 'border-amber-300/25 bg-amber-300/10 text-amber-200',
className,
)}
>
{children}
</span>
);
}
export function Panel({ children, className }: { children: ReactNode; className?: string }) {
return (
<div className={cn('relative overflow-hidden rounded-2xl border border-white/[0.08] bg-gradient-to-b from-white/[0.04] to-white/[0.01] shadow-[0_24px_64px_-24px_rgba(0,0,0,0.8)]', className)}>
{children}
</div>
);
}
export function WindowBar({ title, right }: { title: string; right?: ReactNode }) {
return (
<div className="flex items-center justify-between border-b border-white/[0.06] px-4 py-2.5">
<div className="flex items-center gap-3">
<div className="flex gap-1.5">
<span className="h-2.5 w-2.5 rounded-full bg-white/10" />
<span className="h-2.5 w-2.5 rounded-full bg-white/10" />
<span className="h-2.5 w-2.5 rounded-full bg-white/10" />
</div>
<span className="font-mono text-[11px] text-zinc-400">{title}</span>
</div>
{right}
</div>
);
}
export function CopyButton({ text, className }: { text: string; className?: string }) {
const [copied, setCopied] = useState(false);
const copy = () => {
void navigator.clipboard?.writeText(text).catch(() => undefined);
setCopied(true);
window.setTimeout(() => setCopied(false), 1600);
};
return (
<button
type="button"
onClick={copy}
aria-label="Copy code"
className={cn('inline-flex items-center gap-1.5 rounded-md border border-white/10 px-2 py-1 font-mono text-[11px] text-zinc-300 transition hover:border-white/25 hover:text-white', className)}
>
{copied ? <Check className="h-3.5 w-3.5 text-teal-300" /> : <Copy className="h-3.5 w-3.5" />}
{copied ? 'Copied' : 'Copy'}
</button>
);
}
export function Grain() {
return <div aria-hidden className="dither-noise pointer-events-none absolute inset-0 opacity-60" />;
}
export function formatCompact(n: number, digits = 1) {
if (n >= 1e12) return `${(n / 1e12).toFixed(digits)}T`;
if (n >= 1e9) return `${(n / 1e9).toFixed(digits)}B`;
if (n >= 1e6) return `${(n / 1e6).toFixed(digits)}M`;
if (n >= 1e3) return `${(n / 1e3).toFixed(digits)}K`;
return n.toFixed(0);
}components/niceui/pages/landing/corpus/Closing.tsx
import { useState } from 'react';
import { ArrowRight, Check, Plus, Quote } from 'lucide-react';
import { cn } from '@/lib/cn';
import { Reveal } from '@/components/niceui/pages/landing/shared/motion';
import { Button, Container, SectionHeading, scrollToId } from './ui';
const PLANS = [
{
name: 'Catalog license',
price: 'From $40K',
unit: 'per dataset / year',
blurb: 'Off-the-shelf datasets with commercial rights, ready to download today.',
features: ['Any dataset in the catalog', 'Per-record license receipts', 'Quarterly refreshes', 'Streaming API + bucket delivery', 'Email support'],
cta: 'Browse catalog',
target: 'catalog',
},
{
name: 'Custom collection',
price: 'From $250K',
unit: 'per program',
blurb: 'We source, license and label new data to your spec, with your rubric.',
features: ['Dedicated research PM', 'Expert annotator pools', 'Custom RLHF & eval design', 'Weekly gold-set reports', 'Exclusivity options'],
cta: 'Scope a program',
target: 'contact',
featured: true,
},
{
name: 'Enterprise',
price: 'Custom',
unit: 'multi-year',
blurb: 'Full-stack data partnership for labs training frontier-scale models.',
features: ['Unlimited catalog access', 'Indemnification up to $50M', 'Data residency & air-gap', 'Dedicated legal liaison', '24/7 incident response'],
cta: 'Talk to sales',
target: 'contact',
},
];
export function CorpusPricing() {
return (
<section id="pricing" className="relative scroll-mt-20 border-t border-white/[0.06] py-24 sm:py-32">
<Container>
<Reveal>
<SectionHeading align="center" eyebrow="06 — Engagement" title={<>Licensing that scales with <em className="italic text-teal-100">your ambition.</em></>} sub="Transparent starting points. Every plan includes indemnification and full provenance." />
</Reveal>
<div className="mt-14 grid gap-4 lg:grid-cols-3">
{PLANS.map((p, i) => (
<Reveal key={p.name} delay={i * 100}>
<div className={cn('group relative flex h-full flex-col rounded-2xl border p-8 transition-all duration-500 ease-smooth hover:-translate-y-1', p.featured ? 'border-teal-300/40 bg-gradient-to-b from-teal-300/[0.08] to-transparent shadow-[0_30px_80px_-30px_rgba(94,234,212,0.35)]' : 'border-white/[0.08] bg-white/[0.02] hover:border-white/20')}>
{p.featured && <span className="absolute -top-3 left-8 rounded-full bg-teal-200 px-3 py-1 font-mono text-[10px] uppercase tracking-wider text-[#04110e]">Most chosen</span>}
<h3 className="text-lg font-medium text-white">{p.name}</h3>
<p className="mt-2 text-sm leading-relaxed text-zinc-400">{p.blurb}</p>
<div className="mt-8 flex items-baseline gap-2">
<span className="font-serif text-5xl tracking-tight text-white">{p.price}</span>
</div>
<div className="mt-1 font-mono text-[11px] uppercase tracking-wider text-zinc-500">{p.unit}</div>
<ul className="mt-8 flex-1 space-y-3 border-t border-white/[0.06] pt-8">
{p.features.map((f) => (
<li key={f} className="flex items-start gap-3 text-sm text-zinc-300">
<Check className={cn('mt-0.5 h-4 w-4 shrink-0', p.featured ? 'text-teal-300' : 'text-zinc-400')} />
{f}
</li>
))}
</ul>
<Button variant={p.featured ? 'primary' : 'outline'} onClick={() => scrollToId(p.target)} className="mt-8 w-full">
{p.cta} <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
</Button>
</div>
</Reveal>
))}
</div>
</Container>
</section>
);
}
const QUOTES = [
{ q: 'Corpus is the only vendor whose receipts our legal team accepted without a second review. That alone saved us a quarter.', n: 'Dr. Lena Hoffmann', r: 'Head of Pretraining, Helix Labs' },
{ q: 'Their preference data moved our reward model more than three times the volume from crowd vendors. Expert rationales are the difference.', n: 'Ravi Menon', r: 'Alignment Lead, Northwind AI' },
{ q: 'We gave them an eval spec on Monday and had a contamination-audited, sealed benchmark three weeks later. Remarkable rigor.', n: 'Sofia Alvarez', r: 'Research Scientist, Parallel' },
];
export function CorpusTestimonials() {
const [i, setI] = useState(0);
return (
<section className="relative border-t border-white/[0.06] py-24 sm:py-32">
<div aria-hidden className="dither-dots pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,black,transparent_65%)]" />
<Container className="relative">
<Reveal className="mx-auto max-w-4xl text-center">
<Quote className="mx-auto h-8 w-8 text-teal-300/60" strokeWidth={1.25} />
<blockquote key={i} className="mt-8 animate-fade-up font-serif text-3xl leading-[1.25] text-white sm:text-4xl lg:text-5xl">"{QUOTES[i].q}"</blockquote>
<div key={`a-${i}`} className="mt-8 animate-fade-in">
<div className="text-white">{QUOTES[i].n}</div>
<div className="mt-1 font-mono text-xs text-zinc-400">{QUOTES[i].r}</div>
</div>
<div className="mt-10 flex justify-center gap-2">
{QUOTES.map((x, k) => (
<button key={x.n} type="button" onClick={() => setI(k)} aria-label={`Testimonial from ${x.n}`} className={cn('h-1.5 rounded-full transition-all duration-500 ease-smooth', k === i ? 'w-10 bg-teal-300' : 'w-4 bg-white/20 hover:bg-white/40')} />
))}
</div>
</Reveal>
</Container>
</section>
);
}
const FAQS = [
['Where does your data come from?', 'Exclusively from direct agreements: publishers, code owners who opted in, stock and studio partners, and paid contributors who signed explicit consent. We never train on, or resell, scraped data of unknown provenance.'],
['What does indemnification cover?', 'Enterprise and custom programs include IP indemnification for claims arising from the licensed data, backed by insurance. Catalog licenses include indemnification up to the contract value.'],
['Can you dedupe against our existing corpora?', 'Yes. We run exact, MinHash and embedding-based dedupe against hashes of your data inside your VPC, so your raw data never leaves your environment.'],
['How do you handle opt-outs after delivery?', 'Each record carries a receipt id. When a rights holder opts out, we publish a signed revocation list and replacement records so you can exclude them from future training runs.'],
['Who are your annotators?', '38,000 vetted specialists across 120 countries — clinicians, engineers, lawyers, mathematicians and native-speaker linguists — paid above local living-wage benchmarks.'],
];
export function CorpusFaq() {
const [open, setOpen] = useState<number | null>(0);
return (
<section className="relative border-t border-white/[0.06] py-24 sm:py-32">
<Container className="grid gap-12 lg:grid-cols-[minmax(0,4fr)_minmax(0,8fr)]">
<Reveal>
<SectionHeading eyebrow="07 — FAQ" title={<>Questions, <em className="italic text-teal-100">answered.</em></>} sub="Can't find what you need? Our data counsel team replies within one business day." />
</Reveal>
<Reveal delay={100}>
<div className="divide-y divide-white/[0.07] border-y border-white/[0.07]">
{FAQS.map(([q, a], i) => {
const on = open === i;
return (
<div key={q}>
<button type="button" onClick={() => setOpen(on ? null : i)} aria-expanded={on} className="group flex w-full items-center justify-between gap-6 py-6 text-left">
<span className={cn('text-lg transition-colors', on ? 'text-white' : 'text-zinc-300 group-hover:text-white')}>{q}</span>
<span className={cn('grid h-8 w-8 shrink-0 place-items-center rounded-full border transition-all duration-500 ease-smooth', on ? 'rotate-45 border-teal-300/40 bg-teal-300/10 text-teal-200' : 'border-white/10 text-zinc-400')}>
<Plus className="h-4 w-4" />
</span>
</button>
<div className={cn('grid transition-all duration-500 ease-smooth', on ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0')}>
<p className="min-h-0 overflow-hidden pr-14 leading-relaxed text-zinc-400">
<span className="block pb-6">{a}</span>
</p>
</div>
</div>
);
})}
</div>
</Reveal>
</Container>
</section>
);
}components/niceui/pages/landing/corpus/Contact.tsx
import { type ChangeEvent, type FormEvent, type ReactNode, useEffect, useState } from 'react';
import { ArrowRight, CheckCircle2, Github, Linkedin, Loader2, Twitter } from 'lucide-react';
import { cn } from '@/lib/cn';
import { Reveal } from '@/components/niceui/pages/landing/shared/motion';
import { Button, Container, Eyebrow, Logo, scrollToId } from './ui';
const INTERESTS = ['Text', 'Code', 'Vision', 'Audio', 'RLHF', 'Evals'];
type Errors = Partial<Record<'name' | 'email' | 'company', string>>;
function Field({ label, error, children }: { label: string; error?: string; children: ReactNode }) {
return (
<label className="block">
<span className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-zinc-400">{label}</span>
<div className="mt-2">{children}</div>
<span className={cn('mt-1.5 block h-4 text-xs text-amber-300 transition-opacity', error ? 'opacity-100' : 'opacity-0')}>{error}</span>
</label>
);
}
const inputCls = (err?: string) =>
cn('w-full rounded-xl border bg-white/[0.03] px-4 py-3 text-sm text-white placeholder:text-zinc-500 transition focus:bg-white/[0.05] focus:outline-none', err ? 'border-amber-300/50' : 'border-white/10 focus:border-teal-300/50');
export function CorpusContact() {
const [form, setForm] = useState({ name: '', email: '', company: '', message: '' });
const [interests, setInterests] = useState<string[]>(['RLHF']);
const [errors, setErrors] = useState<Errors>({});
const [status, setStatus] = useState<'idle' | 'sending' | 'sent'>('idle');
useEffect(() => {
if (status !== 'sending') return;
const t = window.setTimeout(() => setStatus('sent'), 1500);
return () => window.clearTimeout(t);
}, [status]);
const validate = (): Errors => {
const e: Errors = {};
if (form.name.trim().length < 2) e.name = 'Please enter your name.';
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Enter a valid work email.';
else if (/@(gmail|yahoo|hotmail|outlook)\./i.test(form.email)) e.email = 'Please use your work email.';
if (!form.company.trim()) e.company = 'Which lab or company?';
return e;
};
const submit = (ev: FormEvent) => {
ev.preventDefault();
const e = validate();
setErrors(e);
if (Object.keys(e).length === 0) setStatus('sending');
};
const set = (k: keyof typeof form) => (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setForm((f) => ({ ...f, [k]: ev.target.value }));
if (k in errors) setErrors((er) => ({ ...er, [k]: undefined }));
};
return (
<section id="contact" className="relative scroll-mt-20 overflow-hidden border-t border-white/[0.06] py-24 sm:py-32">
<div aria-hidden className="pointer-events-none absolute inset-0">
<div className="absolute bottom-[-30%] left-1/2 h-[700px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,rgba(94,234,212,0.14),transparent)]" />
<div className="dither-grid absolute inset-0 [mask-image:linear-gradient(to_top,black,transparent_70%)]" />
</div>
<Container className="relative grid gap-12 lg:grid-cols-2 lg:items-start">
<Reveal>
<Eyebrow>08 — Get started</Eyebrow>
<h2 className="mt-5 font-serif text-5xl leading-[1.05] tracking-tight text-white sm:text-6xl lg:text-7xl">
Train on data you can <em className="bg-gradient-to-r from-teal-200 to-amber-200 bg-clip-text italic text-transparent">stand behind.</em>
</h2>
<p className="mt-6 max-w-md text-lg leading-relaxed text-zinc-400">Tell us what you're building. A research lead — not a sales script — will reply within one business day with samples and a scoping plan.</p>
<div className="mt-10 grid max-w-md grid-cols-3 gap-6 border-t border-white/[0.07] pt-8">
{[['< 24h', 'response'], ['1K', 'free sample rows'], ['$50M', 'indemnity cap']].map(([v, l]) => (
<div key={l}>
<div className="font-serif text-3xl text-white">{v}</div>
<div className="mt-1 font-mono text-[10.5px] uppercase tracking-wider text-zinc-500">{l}</div>
</div>
))}
</div>
</Reveal>
<Reveal delay={120}>
<div className="relative overflow-hidden rounded-3xl border border-white/10 bg-[#0A0D0E]/80 p-6 shadow-[0_40px_120px_-40px_rgba(0,0,0,0.9)] backdrop-blur sm:p-8">
{status === 'sent' ? (
<div className="flex min-h-[480px] animate-scale-in flex-col items-center justify-center text-center">
<span className="relative grid h-16 w-16 place-items-center">
<span className="absolute inset-0 animate-pulse-ring rounded-full bg-teal-300/40" />
<CheckCircle2 className="relative h-12 w-12 text-teal-300" strokeWidth={1.25} />
</span>
<h3 className="mt-6 font-serif text-3xl text-white">Thank you, {form.name.split(' ')[0]}.</h3>
<p className="mt-3 max-w-sm leading-relaxed text-zinc-400">We've received your request. Expect a note from a Corpus research lead at <span className="text-white">{form.email}</span> shortly.</p>
<Button variant="outline" className="mt-8" onClick={() => { setStatus('idle'); setForm({ name: '', email: '', company: '', message: '' }); }}>
Send another
</Button>
</div>
) : (
<form onSubmit={submit} noValidate className="space-y-2">
<div className="grid gap-x-4 sm:grid-cols-2">
<Field label="Full name" error={errors.name}>
<input value={form.name} onChange={set('name')} placeholder="Ada Lovelace" className={inputCls(errors.name)} />
</Field>
<Field label="Work email" error={errors.email}>
<input type="email" value={form.email} onChange={set('email')} placeholder="ada@lab.ai" className={inputCls(errors.email)} />
</Field>
</div>
<Field label="Lab / company" error={errors.company}>
<input value={form.company} onChange={set('company')} placeholder="Helix Labs" className={inputCls(errors.company)} />
</Field>
<div className="pb-5">
<span className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-zinc-400">Interested in</span>
<div className="mt-2 flex flex-wrap gap-2">
{INTERESTS.map((x) => {
const on = interests.includes(x);
return (
<button key={x} type="button" aria-pressed={on} onClick={() => setInterests((s) => (on ? s.filter((v) => v !== x) : [...s, x]))} className={cn('rounded-full border px-3.5 py-1.5 text-sm transition-all duration-300 active:scale-95', on ? 'border-teal-300/50 bg-teal-300/15 text-teal-100' : 'border-white/10 text-zinc-400 hover:border-white/25 hover:text-white')}>
{x}
</button>
);
})}
</div>
</div>
<Field label="What are you training?">
<textarea value={form.message} onChange={set('message')} rows={4} placeholder="e.g. 200K expert-ranked coding preference pairs, Rust + Go, by Q3" className={cn(inputCls(), 'resize-none')} />
</Field>
<Button type="submit" disabled={status === 'sending'} className="w-full py-3">
{status === 'sending' ? (<><Loader2 className="h-4 w-4 animate-spin" /> Sending…</>) : (<>Request samples & scoping <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" /></>)}
</Button>
<p className="pt-2 text-center text-xs text-zinc-500">By submitting you agree to our privacy policy. We never share your details.</p>
</form>
)}
</div>
</Reveal>
</Container>
</section>
);
}
const FOOT = [
{ h: 'Data', l: [['Catalog', 'catalog'], ['Sample explorer', 'explorer'], ['Custom collection', 'pricing'], ['Evaluations', 'catalog']] },
{ h: 'Platform', l: [['Pipeline', 'pipeline'], ['Delivery & API', 'delivery'], ['Provenance', 'trust'], ['Pricing', 'pricing']] },
{ h: 'Company', l: [['Contact', 'contact'], ['Trust center', 'trust'], ['Annotator program', 'pipeline'], ['Careers', 'contact']] },
];
export function CorpusFooter() {
return (
<footer className="relative overflow-hidden border-t border-white/[0.06] bg-[#050607]">
<div aria-hidden className="dither-diagonal pointer-events-none absolute inset-0 opacity-60" />
<Container className="relative py-16">
<div className="grid gap-12 lg:grid-cols-[minmax(0,4fr)_minmax(0,8fr)]">
<div>
<Logo />
<p className="mt-5 max-w-xs text-sm leading-relaxed text-zinc-400">Licensed, curated training data for frontier AI. Every record accounted for.</p>
<div className="mt-6 flex gap-2">
{[Twitter, Github, Linkedin].map((Icon, i) => (
<button key={i} type="button" aria-label="Social link" className="grid h-9 w-9 place-items-center rounded-lg border border-white/10 text-zinc-400 transition hover:border-white/25 hover:text-white">
<Icon className="h-4 w-4" />
</button>
))}
</div>
</div>
<div className="grid grid-cols-2 gap-8 sm:grid-cols-3">
{FOOT.map((c) => (
<div key={c.h}>
<div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-zinc-500">{c.h}</div>
<ul className="mt-4 space-y-2.5">
{c.l.map(([label, id]) => (
<li key={label}>
<button type="button" onClick={() => scrollToId(id)} className="text-sm text-zinc-400 transition-colors hover:text-white">{label}</button>
</li>
))}
</ul>
</div>
))}
</div>
</div>
<div className="mt-16 select-none font-serif text-[22vw] leading-[0.8] tracking-tighter text-white/[0.04] lg:text-[16rem]">Corpus</div>
<div className="mt-8 flex flex-col gap-4 border-t border-white/[0.06] pt-8 font-mono text-[11px] text-zinc-500 sm:flex-row sm:items-center sm:justify-between">
<span>© {new Date().getFullYear()} Corpus Data, Inc. All rights reserved.</span>
<span className="inline-flex items-center gap-2">
<span className="h-1.5 w-1.5 rounded-full bg-teal-300" /> All systems operational · SOC 2 Type II · ISO 27001
</span>
</div>
</Container>
</footer>
);
}components/niceui/pages/landing/corpus/Delivery.tsx
import { useState } from 'react';
import { Box, Cloud, Container as ContainerIcon, Database, HardDrive, Server, Snowflake, Terminal } from 'lucide-react';
import { cn } from '@/lib/cn';
import { Reveal } from '@/components/niceui/pages/landing/shared/motion';
import { Container, CopyButton, Panel, SectionHeading } from './ui';
const SNIPPETS = {
Python: `import os, corpus
client = corpus.Client(api_key=os.environ["CORPUS_KEY"])
ds = client.datasets.get("polyglot-web-v4", version="4.2")
for batch in ds.stream(split="train", batch_size=1024,
filters={"lang": ["en", "ja"], "quality": ">0.9"}):
trainer.step(batch)
ds.receipts.export("audit/receipts.parquet")`,
cURL: `curl https://api.corpus.ai/v1/datasets/polyglot-web-v4/export \\
-H "Authorization: Bearer $CORPUS_KEY" \\
-H "Content-Type: application/json" \\
-d '{
"format": "parquet",
"shard_size_mb": 512,
"destination": "s3://lab-bucket/corpus/"
}'`,
S3: `# Delivered via cross-account role, no keys exchanged
aws s3 ls s3://corpus-deliveries/acme-labs/polyglot-web-v4/
PRE train/
PRE validation/
manifest.json # sha256 per shard, signed
receipts.parquet # one license receipt per record`,
} as const;
type Lang = keyof typeof SNIPPETS;
function highlight(line: string, lang: Lang) {
if (line.trimStart().startsWith('#')) return <span className="text-zinc-500">{line}</span>;
const parts = line.split(/("[^"]*"|'[^']*'|\b(?:import|for|in|curl|aws)\b|\s-[HdX]\s|#.*$)/g);
return parts.map((p, i) => {
if (!p) return null;
if (p.startsWith('#')) return <span key={i} className="text-zinc-500">{p}</span>;
if (/^["']/.test(p)) return <span key={i} className="text-teal-200">{p}</span>;
if (/^(import|for|in|curl|aws)$/.test(p)) return <span key={i} className="text-amber-200">{p}</span>;
if (/^\s-[HdX]\s$/.test(p)) return <span key={i} className="text-emerald-300">{p}</span>;
return <span key={i} className={lang === 'S3' ? 'text-zinc-300' : 'text-zinc-200'}>{p}</span>;
});
}
const DESTS = [
{ name: 'Amazon S3', icon: Cloud },
{ name: 'Google Cloud Storage', icon: HardDrive },
{ name: 'Azure Blob', icon: Box },
{ name: 'Snowflake', icon: Snowflake },
{ name: 'Databricks', icon: Database },
{ name: 'Hugging Face (private)', icon: ContainerIcon },
{ name: 'On-prem / air-gapped', icon: Server },
{ name: 'Streaming API', icon: Terminal },
];
export function CorpusDelivery() {
const [lang, setLang] = useState<Lang>('Python');
const code = SNIPPETS[lang];
return (
<section id="delivery" className="relative scroll-mt-20 border-t border-white/[0.06] py-24 sm:py-32">
<Container className="grid gap-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:items-center">
<Reveal>
<SectionHeading eyebrow="05 — Delivery" title={<>From contract to <em className="italic text-teal-100">dataloader</em> in an afternoon.</>} sub="Stream directly into training, export sharded Parquet or WebDataset, or receive a signed drop in your own bucket." />
<div className="mt-10 grid grid-cols-2 gap-2">
{DESTS.map(({ name, icon: Icon }) => (
<div key={name} className="group flex items-center gap-3 rounded-xl border border-white/[0.07] bg-white/[0.02] px-3 py-2.5 text-sm text-zinc-300 transition hover:border-teal-300/30 hover:text-white">
<Icon className="h-4 w-4 shrink-0 text-zinc-500 transition-colors group-hover:text-teal-200" strokeWidth={1.5} />
<span className="truncate">{name}</span>
</div>
))}
</div>
</Reveal>
<Reveal delay={120}>
<Panel>
<div className="flex items-center justify-between border-b border-white/[0.06] px-3 py-2">
<div className="flex gap-1">
{(Object.keys(SNIPPETS) as Lang[]).map((l) => (
<button key={l} type="button" onClick={() => setLang(l)} className={cn('rounded-md px-3 py-1.5 font-mono text-xs transition-colors', lang === l ? 'bg-white/[0.08] text-white' : 'text-zinc-400 hover:text-white')}>
{l}
</button>
))}
</div>
<CopyButton text={code} />
</div>
<pre key={lang} className="min-h-[300px] animate-fade-in overflow-x-auto p-5 font-mono text-[12.5px] leading-[1.75]">
{code.split('\n').map((line, i) => (
<div key={i} className="flex">
<span className="mr-5 w-5 shrink-0 select-none text-right text-zinc-600">{i + 1}</span>
<span className="whitespace-pre">{highlight(line, lang)}</span>
</div>
))}
</pre>
</Panel>
</Reveal>
</Container>
</section>
);
}components/niceui/pages/landing/corpus/Explorer.tsx
import { useEffect, useMemo, useRef, useState } from 'react';
import { AudioLines, Braces, Check, Eye, EyeOff, Image as ImageIcon, Pause, Play, RotateCcw, ThumbsDown, ThumbsUp } from 'lucide-react';
import { cn } from '@/lib/cn';
import { Reveal } from '@/components/niceui/pages/landing/shared/motion';
import { Chip, Container, Panel, SectionHeading, WindowBar } from './ui';
const RECORD = {
id: 'pw4-88120931',
source: { publisher: 'Revista Ciência Hoje', license: 'commercial', receipt: 'rcpt_4b1e9a' },
lang: 'por',
tokens: 1874,
quality: 0.942,
toxicity: 0.003,
pii_scrubbed: true,
dedup_cluster: null,
text: 'A fotossíntese converte energia luminosa em energia química…',
};
function HighlightedJson({ value }: { value: unknown }) {
const lines = JSON.stringify(value, null, 2).split('\n');
return (
<pre className="overflow-x-auto p-5 font-mono text-[12.5px] leading-[1.7]">
{lines.map((line, i) => {
const m = line.match(/^(\s*)("[^"]+":\s)?(.*)$/);
const [, indent = '', key = '', rest = ''] = m ?? [];
const val = rest.replace(/,$/, '');
const comma = rest.endsWith(',') ? ',' : '';
const cls = val.startsWith('"') ? 'text-teal-200' : /^-?\d/.test(val) ? 'text-amber-200' : /^(true|false|null)$/.test(val) ? 'text-emerald-300' : 'text-zinc-500';
return (
<div key={i} className="group flex hover:bg-white/[0.03]">
<span className="mr-5 w-6 select-none text-right text-zinc-600">{i + 1}</span>
<span className="whitespace-pre">
{indent}
{key && <span className="text-zinc-300">{key.replace(/:\s$/, '')}</span>}
{key && <span className="text-zinc-500">: </span>}
<span className={cls}>{val}</span>
<span className="text-zinc-500">{comma}</span>
</span>
</div>
);
})}
</pre>
);
}
function PreferencePair() {
const [show, setShow] = useState(true);
return (
<div className="space-y-4 p-5">
<div className="rounded-xl border border-white/[0.06] bg-white/[0.02] p-4">
<div className="font-mono text-[10.5px] uppercase tracking-wider text-zinc-500">Prompt</div>
<p className="mt-2 text-sm leading-relaxed text-zinc-200">My sourdough is dense and gummy inside. What's most likely going wrong?</p>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="rounded-xl border border-teal-300/30 bg-teal-300/[0.04] p-4">
<div className="flex items-center justify-between">
<Chip tone="teal"><ThumbsUp className="h-3 w-3" /> Chosen</Chip>
<span className="font-mono text-[11px] text-teal-200">score 6.4</span>
</div>
<p className="mt-3 text-sm leading-relaxed text-zinc-300">
Most often it's under-proofing. Check that the dough has grown ~50–75% and passes the poke test. Also let the loaf cool fully — slicing early makes the crumb seem gummy.
</p>
</div>
<div className="rounded-xl border border-white/[0.08] bg-white/[0.02] p-4">
<div className="flex items-center justify-between">
<Chip><ThumbsDown className="h-3 w-3" /> Rejected</Chip>
<span className="font-mono text-[11px] text-zinc-400">score 3.1</span>
</div>
<p className="mt-3 text-sm leading-relaxed text-zinc-400">
Your starter is probably dead. Throw it out and buy commercial yeast instead, which is much more reliable for home bakers.
</p>
</div>
</div>
<button type="button" onClick={() => setShow((s) => !s)} className="inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-wider text-zinc-400 transition hover:text-white">
{show ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />} {show ? 'Hide' : 'Show'} annotator rationale
</button>
<div className={cn('grid transition-all duration-500 ease-smooth', show ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0')}>
<div className="min-h-0 overflow-hidden">
<div className="rounded-xl border border-amber-300/20 bg-amber-300/[0.04] p-4">
<div className="flex flex-wrap items-center gap-2 font-mono text-[10.5px] uppercase tracking-wider text-amber-200">
Annotator #A-2291 · Professional baker · κ 0.91
</div>
<p className="mt-2 text-sm leading-relaxed text-zinc-300">
"A diagnoses the common cause with an actionable test. B makes an unsupported leap and gives advice that discards a working starter."
</p>
<div className="mt-4 grid grid-cols-3 gap-3">
{[['Helpfulness', 92], ['Accuracy', 96], ['Harmlessness', 99]].map(([k, v]) => (
<div key={k}>
<div className="flex justify-between font-mono text-[10px] text-zinc-400"><span>{k}</span><span>{v}</span></div>
<div className="mt-1.5 h-1 rounded-full bg-white/[0.06]"><div className="h-full rounded-full bg-amber-200" style={{ width: `${v}%` }} /></div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
}
const BOXES = [
{ label: 'pedestrian', conf: 0.98, x: 22, y: 30, w: 8, h: 20 },
{ label: 'pedestrian', conf: 0.96, x: 46, y: 46, w: 8, h: 21 },
{ label: 'crosswalk', conf: 0.99, x: 8, y: 62, w: 84, h: 22 },
{ label: 'pedestrian', conf: 0.93, x: 68, y: 22, w: 8, h: 19 },
];
function ImageSample() {
const [show, setShow] = useState(true);
const [hover, setHover] = useState<number | null>(null);
return (
<div className="grid gap-5 p-5 md:grid-cols-[1fr_200px]">
<div className="relative overflow-hidden rounded-xl border border-white/[0.06]">
<img src="https://images.pexels.com/photos/10121600/pexels-photo-10121600.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Aerial view of pedestrians crossing a city street" className="aspect-[3/2] w-full object-cover" loading="lazy" />
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
{BOXES.map((b, i) => (
<div
key={i}
onMouseEnter={() => setHover(i)}
onMouseLeave={() => setHover(null)}
className={cn('absolute rounded-[3px] border-[1.5px] transition-all duration-500 ease-smooth', b.label === 'crosswalk' ? 'border-amber-300' : 'border-teal-300', show ? 'scale-100 opacity-100' : 'scale-95 opacity-0', hover !== null && hover !== i && 'opacity-30', hover === i && 'bg-teal-300/10')}
style={{ left: `${b.x}%`, top: `${b.y}%`, width: `${b.w}%`, height: `${b.h}%`, transitionDelay: show ? `${i * 90}ms` : '0ms' }}
>
<span className={cn('absolute -top-5 left-0 whitespace-nowrap rounded-sm px-1 font-mono text-[9.5px] text-black', b.label === 'crosswalk' ? 'bg-amber-300' : 'bg-teal-300')}>
{b.label} {b.conf.toFixed(2)}
</span>
</div>
))}
</div>
<div className="space-y-3">
<button type="button" onClick={() => setShow((s) => !s)} className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-white/10 px-3 py-2 font-mono text-[11px] text-zinc-300 transition hover:border-white/25 hover:text-white">
{show ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />} {show ? 'Hide' : 'Show'} labels
</button>
<ul className="space-y-1.5">
{BOXES.map((b, i) => (
<li key={i} onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)} className={cn('flex cursor-default items-center justify-between rounded-lg border px-3 py-2 font-mono text-[11px] transition', hover === i ? 'border-teal-300/40 bg-teal-300/10 text-white' : 'border-white/[0.06] text-zinc-400')}>
<span className="flex items-center gap-2"><span className={cn('h-2 w-2 rounded-sm', b.label === 'crosswalk' ? 'bg-amber-300' : 'bg-teal-300')} />{b.label}</span>
<span>{b.conf.toFixed(2)}</span>
</li>
))}
</ul>
<p className="text-xs leading-relaxed text-zinc-400">Caption: "Aerial view of commuters crossing a striped intersection at midday."</p>
</div>
</div>
);
}
const WORDS = '¿Podrías revisar el informe trimestral antes del viernes? Necesito enviarlo a la junta.'.split(' ');
const DURATION = 6.4;
function AudioSample() {
const [t, setT] = useState(0);
const [playing, setPlaying] = useState(false);
const last = useRef(0);
const bars = useMemo(() => Array.from({ length: 96 }, (_, i) => 0.18 + 0.82 * Math.abs(Math.sin(i * 0.37) * Math.cos(i * 0.11 + 1.3))), []);
useEffect(() => {
if (!playing) return;
let raf = 0;
last.current = performance.now();
const loop = (now: number) => {
const dt = (now - last.current) / 1000;
last.current = now;
setT((v) => {
const nv = v + dt;
if (nv >= DURATION) {
setPlaying(false);
return DURATION;
}
return nv;
});
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [playing]);
const p = t / DURATION;
const toggle = () => {
if (t >= DURATION) setT(0);
setPlaying((v) => !v);
};
return (
<div className="space-y-5 p-5">
<div className="flex items-center gap-4">
<button type="button" onClick={toggle} aria-label={playing ? 'Pause' : 'Play'} className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-teal-200 text-[#04110e] shadow-[0_8px_30px_-8px_rgba(94,234,212,0.6)] transition hover:scale-105 active:scale-95">
{playing ? <Pause className="h-5 w-5" /> : <Play className="ml-0.5 h-5 w-5" />}
</button>
<div className="min-w-0 flex-1">
<div className="flex h-16 items-center gap-[2px]">
{bars.map((h, i) => (
<span key={i} className={cn('flex-1 rounded-full transition-colors duration-150', i / bars.length <= p ? 'bg-teal-300' : 'bg-white/15')} style={{ height: `${h * 100}%` }} />
))}
</div>
<div className="mt-2 flex justify-between font-mono text-[10.5px] text-zinc-500">
<span>{t.toFixed(2)}s</span>
<span>es-MX · 48kHz · speaker F/34</span>
<span>{DURATION.toFixed(2)}s</span>
</div>
</div>
<button type="button" onClick={() => { setT(0); setPlaying(false); }} aria-label="Restart" className="grid h-9 w-9 place-items-center rounded-lg border border-white/10 text-zinc-400 transition hover:text-white">
<RotateCcw className="h-4 w-4" />
</button>
</div>
<div className="rounded-xl border border-white/[0.06] bg-white/[0.02] p-4 text-lg leading-relaxed">
{WORDS.map((w, i) => {
const start = (i / WORDS.length) * DURATION;
const active = t >= start && t < start + DURATION / WORDS.length;
return (
<span key={i} className={cn('mr-1.5 inline-block rounded px-0.5 transition-colors duration-200', active ? 'bg-teal-300/20 text-white' : t > start ? 'text-zinc-200' : 'text-zinc-500')}>
{w}
</span>
);
})}
</div>
<div className="flex flex-wrap gap-2">
<Chip tone="teal"><Check className="h-3 w-3" /> Consent cns_2290</Chip>
<Chip>WER-verified 0.6%</Chip>
<Chip>Word-aligned</Chip>
</div>
</div>
);
}
const TABS = [
{ id: 'json', label: 'Text record', icon: Braces, file: 'polyglot-web-v4/train-00041.jsonl' },
{ id: 'pref', label: 'Preference pair', icon: ThumbsUp, file: 'preference-atlas-v3/pairs-0193.jsonl' },
{ id: 'image', label: 'Image + boxes', icon: ImageIcon, file: 'lumen-captions/0x91f2.json' },
{ id: 'audio', label: 'Audio + transcript', icon: AudioLines, file: 'chorus-speech/es-MX/71af.flac' },
] as const;
export function CorpusExplorer() {
const [tab, setTab] = useState<(typeof TABS)[number]['id']>('json');
const current = TABS.find((x) => x.id === tab) ?? TABS[0];
return (
<section id="explorer" className="relative scroll-mt-20 border-t border-white/[0.06] py-24 sm:py-32">
<div aria-hidden className="dither-diagonal pointer-events-none absolute inset-0 opacity-40 [mask-image:radial-gradient(ellipse_at_center,black,transparent_70%)]" />
<Container className="relative">
<Reveal>
<SectionHeading align="center" eyebrow="02 — Sample explorer" title={<>Inspect the data <em className="italic text-teal-100">before</em> you buy it.</>} sub="Real record structures from our catalog. Every field, label and rationale exactly as it ships." />
</Reveal>
<Reveal delay={120} className="mt-12">
<div className="mx-auto flex max-w-max flex-wrap justify-center gap-2">
{TABS.map(({ id, label, icon: Icon }) => (
<button key={id} type="button" onClick={() => setTab(id)} className={cn('inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm transition-all duration-300', tab === id ? 'border-teal-300/40 bg-teal-300/10 text-white' : 'border-white/10 text-zinc-400 hover:border-white/20 hover:text-white')}>
<Icon className="h-4 w-4" /> {label}
</button>
))}
</div>
<Panel className="mx-auto mt-8 max-w-4xl">
<WindowBar title={current.file} right={<Chip tone="teal">license verified</Chip>} />
<div key={tab} className="animate-fade-up">
{tab === 'json' && <HighlightedJson value={RECORD} />}
{tab === 'pref' && <PreferencePair />}
{tab === 'image' && <ImageSample />}
{tab === 'audio' && <AudioSample />}
</div>
</Panel>
</Reveal>
</Container>
</section>
);
}components/niceui/pages/landing/corpus/Hero.tsx
import { useEffect, useMemo, useState } from 'react';
import { ArrowRight, AudioLines, Code2, FileText, Image as ImageIcon, ListChecks, Menu, ThumbsUp, Video, X } from 'lucide-react';
import { cn } from '@/lib/cn';
import { Button, Chip, Container, Logo, Panel, WindowBar, scrollToId } from './ui';
const NAV = [
{ id: 'catalog', label: 'Catalog' },
{ id: 'explorer', label: 'Explorer' },
{ id: 'pipeline', label: 'Pipeline' },
{ id: 'trust', label: 'Trust' },
{ id: 'delivery', label: 'Delivery' },
{ id: 'pricing', label: 'Pricing' },
];
export function CorpusNav() {
const [open, setOpen] = useState(false);
const go = (id: string) => {
setOpen(false);
scrollToId(id);
};
return (
<header className="sticky top-0 z-50 border-b border-white/[0.06] bg-[#07090A]/75 backdrop-blur-xl">
<Container className="flex h-16 items-center justify-between">
<button type="button" onClick={() => go('top')} aria-label="Corpus home">
<Logo />
</button>
<nav className="hidden items-center gap-1 md:flex">
{NAV.map((n) => (
<button
key={n.id}
type="button"
onClick={() => go(n.id)}
className="rounded-full px-3.5 py-1.5 text-sm text-zinc-400 transition-colors hover:bg-white/[0.05] hover:text-white"
>
{n.label}
</button>
))}
</nav>
<div className="hidden items-center gap-2 md:flex">
<Button variant="ghost" onClick={() => go('explorer')} className="px-4">
Browse samples
</Button>
<Button onClick={() => go('contact')} className="px-4 py-2">
Talk to sales <ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
</Button>
</div>
<button
type="button"
className="grid h-9 w-9 place-items-center rounded-lg border border-white/10 text-zinc-200 md:hidden"
onClick={() => setOpen((o) => !o)}
aria-label="Toggle menu"
>
{open ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
</button>
</Container>
<div className={cn('grid overflow-hidden border-white/[0.06] transition-all duration-500 ease-smooth md:hidden', open ? 'grid-rows-[1fr] border-t' : 'grid-rows-[0fr]')}>
<div className="min-h-0">
<Container className="flex flex-col gap-1 py-4">
{NAV.map((n) => (
<button key={n.id} type="button" onClick={() => go(n.id)} className="rounded-lg px-3 py-2.5 text-left text-sm text-zinc-300 hover:bg-white/5 hover:text-white">
{n.label}
</button>
))}
<Button onClick={() => go('contact')} className="mt-2 w-full">
Talk to sales
</Button>
</Container>
</div>
</div>
</header>
);
}
const MODALITIES = [
{ icon: FileText, label: 'Text' },
{ icon: Code2, label: 'Code' },
{ icon: ImageIcon, label: 'Image' },
{ icon: AudioLines, label: 'Audio' },
{ icon: Video, label: 'Video' },
{ icon: ThumbsUp, label: 'RLHF' },
{ icon: ListChecks, label: 'Eval' },
];
const TOKENS = [
'the', '▁model', 'def', '(', 'λ', 'Σ', 'proof', '→', 'élan', '数据', 'return', '{', 'img_0x3f', 'wav:16k', '0.982', 'chosen', 'rejected', '</s>', 'tensor', 'ℝⁿ', 'licensed', 'consent', '▁frontier', 'αβ', 'import', 'bbox', 'frame_24', 'SPDX', 'MIT', 'tok', 'ja', 'sw', 'pt-BR', '∂L', 'quorum', 'eval@k',
];
function StreamColumn({ seed, duration, hot }: { seed: number; duration: number; hot: number }) {
const items = useMemo(() => Array.from({ length: 22 }, (_, i) => TOKENS[(seed * 7 + i * 5) % TOKENS.length]), [seed]);
return (
<div className="relative h-full overflow-hidden">
<div className="animate-marquee-y flex flex-col gap-2" style={{ animationDuration: `${duration}s` }}>
{[...items, ...items].map((t, i) => (
<span
key={i}
className={cn(
'block truncate rounded border px-1.5 py-1 text-center font-mono text-[10.5px] leading-none',
i % hot === 0 ? 'border-teal-300/30 bg-teal-300/10 text-teal-200' : i % (hot + 3) === 0 ? 'border-amber-300/25 bg-amber-300/[0.07] text-amber-200' : 'border-white/[0.06] bg-white/[0.02] text-zinc-500',
)}
>
{t}
</span>
))}
</div>
</div>
);
}
function DataStream() {
const [count, setCount] = useState(4_213_887_402_118);
useEffect(() => {
const id = window.setInterval(() => setCount((c) => c + Math.floor(120_000 + Math.random() * 260_000)), 80);
return () => window.clearInterval(id);
}, []);
const cols = [
{ d: 26, h: 5 }, { d: 34, h: 7 }, { d: 22, h: 4 }, { d: 30, h: 6 }, { d: 38, h: 5 }, { d: 24, h: 8 }, { d: 32, h: 4 }, { d: 28, h: 6 },
];
return (
<Panel className="h-full">
<WindowBar
title="stream://corpus/global"
right={
<span className="inline-flex items-center gap-2 font-mono text-[10.5px] uppercase tracking-wider text-teal-200">
<span className="relative flex h-1.5 w-1.5">
<span className="absolute inset-0 animate-pulse-ring rounded-full bg-teal-300" />
<span className="relative h-1.5 w-1.5 rounded-full bg-teal-300" />
</span>
Live
</span>
}
/>
<div className="relative h-[320px] sm:h-[360px]">
<div className="dither-grid absolute inset-0 opacity-70" />
<div className="mask-fade-y absolute inset-0 grid grid-cols-5 gap-2 px-4 py-2 sm:grid-cols-8">
{cols.map((c, i) => (
<div key={i} className={cn(i >= 5 && 'hidden sm:block')}>
<StreamColumn seed={i + 1} duration={c.d} hot={c.h} />
</div>
))}
</div>
<div className="pointer-events-none absolute inset-x-0 top-1/2 h-16 -translate-y-1/2 border-y border-teal-300/25 bg-gradient-to-r from-transparent via-teal-300/[0.08] to-transparent" />
<div className="pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-center">
<div className="rounded-xl border border-white/10 bg-[#07090A]/90 px-5 py-3 text-center shadow-[0_20px_60px_-10px_rgba(0,0,0,0.9)] backdrop-blur">
<div className="font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-400">Tokens delivered</div>
<div className="mt-1 font-mono text-xl tabular-nums text-white sm:text-2xl">{count.toLocaleString('en-US')}</div>
</div>
</div>
</div>
<div className="flex flex-wrap gap-2 border-t border-white/[0.06] px-4 py-3">
{MODALITIES.map(({ icon: Icon, label }, i) => (
<span
key={label}
className="inline-flex animate-fade-up items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-1 font-mono text-[10.5px] text-zinc-300 transition hover:border-teal-300/40 hover:text-teal-100"
style={{ animationDelay: `${600 + i * 80}ms` }}
>
<Icon className="h-3 w-3" /> {label}
</span>
))}
</div>
</Panel>
);
}
const JSONL = [
'{"id":"cx-00041","lang":"en","tokens":2048,"license":"CC-BY-4.0","receipt":"rcpt_9f2a"}',
'{"id":"cx-00042","lang":"ja","tokens":1771,"license":"commercial","receipt":"rcpt_9f2b"}',
'{"id":"cx-00043","lang":"py","tokens":3302,"license":"MIT","receipt":"rcpt_9f2c"}',
'{"id":"cx-00044","lang":"sw","tokens":1288,"license":"commercial","receipt":"rcpt_9f2d"}',
'{"id":"cx-00045","lang":"de","tokens":2610,"license":"commercial","receipt":"rcpt_9f2e"}',
'{"id":"cx-00046","lang":"rs","tokens":1954,"license":"Apache-2.0","receipt":"rcpt_9f2f"}',
];
function JsonLine({ line }: { line: string }) {
const parts = line.split(/("[^"]*"|\d+)/g).filter(Boolean);
let keyNext = true;
return (
<span>
{parts.map((p, i) => {
if (p.startsWith('"')) {
const isKey = keyNext;
keyNext = !keyNext;
return <span key={i} className={isKey ? 'text-zinc-400' : 'text-teal-200'}>{p}</span>;
}
if (/^\d+$/.test(p)) {
keyNext = true;
return <span key={i} className="text-amber-200">{p}</span>;
}
if (p.includes(',')) keyNext = true;
return <span key={i} className="text-zinc-600">{p}</span>;
})}
</span>
);
}
function Terminal() {
const [n, setN] = useState(0);
useEffect(() => {
const id = window.setInterval(() => setN((v) => (v >= JSONL.length + 3 ? 0 : v + 1)), 650);
return () => window.clearInterval(id);
}, []);
const shown = JSONL.slice(0, Math.min(n, JSONL.length));
return (
<Panel className="h-full">
<WindowBar title="python — corpus" right={<Chip tone="teal">200 OK</Chip>} />
<div className="space-y-3 p-4 font-mono text-[11.5px] leading-relaxed">
<div className="text-zinc-300">
<span className="text-teal-300">›</span> ds = corpus.datasets.get(<span className="text-amber-200">"polyglot-web-v4"</span>)
</div>
<div className="text-zinc-300">
<span className="text-teal-300">›</span> for row in ds.stream(split=<span className="text-amber-200">"train"</span>):
</div>
<div className="min-h-[188px] space-y-1.5 rounded-lg border border-white/[0.06] bg-black/40 p-3">
{shown.map((l, i) => (
<div key={`${l}-${i}`} className="animate-fade-up truncate">
<JsonLine line={l} />
</div>
))}
<span className="inline-block h-3.5 w-1.5 animate-blink bg-teal-300 align-middle" />
</div>
<div className="flex items-center justify-between text-[10.5px] text-zinc-500">
<span>{shown.length * 1024} rows · verified</span>
<span>p50 38ms</span>
</div>
</div>
</Panel>
);
}
export function CorpusHero() {
return (
<section id="top" className="relative scroll-mt-20 overflow-hidden pb-24 pt-20 sm:pt-28">
<div aria-hidden className="pointer-events-none absolute inset-0">
<div className="absolute left-1/2 top-[-20%] h-[640px] w-[1100px] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,rgba(94,234,212,0.16),transparent)] blur-2xl" />
<div className="absolute right-[-10%] top-[30%] h-[420px] w-[520px] rounded-full bg-[radial-gradient(closest-side,rgba(252,211,77,0.07),transparent)] blur-2xl" />
<div className="dither-dots absolute inset-0 [mask-image:radial-gradient(ellipse_at_top,black,transparent_70%)]" />
</div>
<Container className="relative">
<div className="animate-fade-down">
<button
type="button"
onClick={() => scrollToId('catalog')}
className="group inline-flex items-center gap-3 rounded-full border border-white/10 bg-white/[0.03] py-1 pl-1 pr-4 text-xs text-zinc-300 transition hover:border-teal-300/30"
>
<span className="rounded-full bg-teal-300/15 px-2.5 py-0.5 font-mono text-[10.5px] uppercase tracking-wider text-teal-200">New</span>
Preference Atlas v3 — 14M expert-ranked pairs
<ArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
</button>
</div>
<h1 className="mt-8 max-w-5xl animate-fade-up font-serif text-[3.25rem] leading-[1.02] tracking-tight text-white sm:text-7xl lg:text-[6.5rem]" style={{ animationDelay: '80ms' }}>
The data behind <em className="bg-gradient-to-r from-teal-200 via-emerald-200 to-amber-200 bg-clip-text italic text-transparent">frontier</em> models.
</h1>
<div className="mt-8 grid gap-8 lg:grid-cols-12 lg:items-end">
<p className="max-w-xl animate-fade-up text-lg leading-relaxed text-zinc-400 lg:col-span-7" style={{ animationDelay: '160ms' }}>
Corpus licenses, curates and delivers training data for the world's leading AI labs — text, code, vision, speech and human preference data, with a consent trail
for every single record.
</p>
<div className="flex animate-fade-up flex-wrap gap-3 lg:col-span-5 lg:justify-end" style={{ animationDelay: '240ms' }}>
<Button onClick={() => scrollToId('catalog')} className="px-6 py-3">
Explore the catalog <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
</Button>
<Button variant="outline" onClick={() => scrollToId('contact')} className="px-6 py-3">
Commission a dataset
</Button>
</div>
</div>
<div className="mt-16 grid animate-fade-up gap-4 lg:grid-cols-12" style={{ animationDelay: '360ms' }}>
<div className="lg:col-span-7">
<DataStream />
</div>
<div className="lg:col-span-5">
<Terminal />
</div>
</div>
</Container>
</section>
);
}components/niceui/pages/landing/corpus/Pipeline.tsx
import { useEffect, useState } from 'react';
import { BadgeCheck, CheckCircle2, CloudUpload, Copy, FileSignature, Globe, ScanEye, ShieldCheck, Tags, UserRound } from 'lucide-react';
import { cn } from '@/lib/cn';
import { Reveal, useInView } from '@/components/niceui/pages/landing/shared/motion';
import { Container, Panel, SectionHeading } from './ui';
function useArm(delay = 80) {
const [on, setOn] = useState(false);
useEffect(() => {
const t = window.setTimeout(() => setOn(true), delay);
return () => window.clearTimeout(t);
}, [delay]);
return on;
}
function SourcingVis() {
const on = useArm();
const srcs = ['Publishers', 'Repos', 'Studios', 'Annotators', 'Archives', 'Creators'];
return (
<div className="relative grid h-full grid-cols-[1fr_auto] items-center gap-6">
<div className="space-y-2">
{srcs.map((s, i) => (
<div key={s} className={cn('flex items-center gap-3 transition-all duration-700 ease-smooth', on ? 'translate-x-0 opacity-100' : '-translate-x-4 opacity-0')} style={{ transitionDelay: `${i * 90}ms` }}>
<span className="w-24 font-mono text-[11px] text-zinc-400">{s}</span>
<span className="relative h-px flex-1 overflow-hidden bg-white/10">
<span className="absolute inset-0 animate-shimmer bg-gradient-to-r from-transparent via-teal-300 to-transparent bg-[length:200%_100%]" style={{ animationDelay: `${i * 0.3}s` }} />
</span>
</div>
))}
</div>
<div className={cn('grid h-24 w-24 place-items-center rounded-2xl border border-teal-300/30 bg-teal-300/10 transition-all duration-700 ease-spring', on ? 'scale-100' : 'scale-75')}>
<Globe className="h-8 w-8 text-teal-200" strokeWidth={1.25} />
</div>
</div>
);
}
function LicensingVis() {
const on = useArm();
const rows = ['Rights holder verified', 'Commercial use granted', 'Subject consent on file', 'Opt-out honoured'];
return (
<div className="mx-auto w-full max-w-sm rounded-xl border border-white/10 bg-white/[0.03] p-5">
<div className="flex items-center justify-between">
<span className="font-mono text-[11px] text-zinc-400">rcpt_4b1e9a</span>
<FileSignature className="h-4 w-4 text-amber-200" />
</div>
<div className="mt-4 space-y-2.5">
{rows.map((r, i) => (
<div key={r} className={cn('flex items-center gap-2.5 text-sm transition-all duration-500', on ? 'text-zinc-200 opacity-100' : 'text-zinc-500 opacity-40')} style={{ transitionDelay: `${300 + i * 350}ms` }}>
<CheckCircle2 className={cn('h-4 w-4 transition-colors duration-500', on ? 'text-teal-300' : 'text-zinc-600')} style={{ transitionDelay: `${300 + i * 350}ms` }} />
{r}
</div>
))}
</div>
<div className={cn('mt-5 inline-flex rotate-[-6deg] rounded border-2 border-amber-300/70 px-3 py-1 font-mono text-xs uppercase tracking-widest text-amber-200 transition-all duration-500 ease-spring', on ? 'scale-100 opacity-100' : 'scale-150 opacity-0')} style={{ transitionDelay: '1800ms' }}>
Licensed
</div>
</div>
);
}
function DedupeVis() {
const on = useArm(300);
const recs = ['The quick brown fox jumps…', 'The quick brown fox jumps…', 'the quick brown fox jumps!', 'The quick brown fox jumped…', 'A lazy dog sleeps in sun…'];
return (
<div className="relative mx-auto h-56 w-full max-w-sm">
{recs.map((r, i) => {
const dup = i < 4;
return (
<div
key={i}
className={cn('absolute left-0 right-0 flex items-center justify-between rounded-lg border px-3 py-2 font-mono text-[11px] transition-all duration-1000 ease-smooth', dup ? 'border-white/10 bg-white/[0.03] text-zinc-300' : 'border-teal-300/30 bg-teal-300/[0.06] text-teal-100', on && dup && i > 0 && 'opacity-0')}
style={{ top: on && dup ? '30%' : `${i * 20}%`, transitionDelay: `${i * 120}ms` }}
>
<span className="truncate">{r}</span>
<span className="ml-2 shrink-0 text-zinc-500">{dup ? `sim ${(0.99 - i * 0.03).toFixed(2)}` : 'unique'}</span>
</div>
);
})}
<div className={cn('absolute bottom-0 left-0 flex items-center gap-2 font-mono text-[11px] text-teal-200 transition-opacity duration-500', on ? 'opacity-100' : 'opacity-0')} style={{ transitionDelay: '1200ms' }}>
<Copy className="h-3.5 w-3.5" /> 3 near-duplicates collapsed · MinHash + embedding
</div>
</div>
);
}
function PiiVis() {
const on = useArm(300);
const parts: [string, boolean][] = [['Hi, I\'m ', false], ['Maria Okafor', true], [', reach me at ', false], ['maria.o@mail.com', true], [' or ', false], ['+1 415 555 0182', true], ['. My order shipped to ', false], ['221 Elm St', true], [' last week.', false]];
let k = 0;
return (
<div className="mx-auto max-w-md rounded-xl border border-white/10 bg-white/[0.03] p-5 text-[15px] leading-loose text-zinc-300">
{parts.map(([t, pii], i) => {
if (!pii) return <span key={i}>{t}</span>;
const d = 200 + k++ * 300;
return (
<span key={i} className="relative inline-block">
<span className={cn('transition-opacity duration-300', on ? 'opacity-0' : 'opacity-100')} style={{ transitionDelay: `${d + 300}ms` }}>{t}</span>
<span className={cn('absolute inset-y-1 left-0 origin-left rounded-sm bg-zinc-200 transition-transform duration-500 ease-smooth', on ? 'scale-x-100' : 'scale-x-0')} style={{ right: 0, transitionDelay: `${d}ms` }} />
</span>
);
})}
<div className="mt-4 flex flex-wrap gap-2 font-mono text-[10.5px] text-amber-200">
{['PERSON', 'EMAIL', 'PHONE', 'ADDRESS'].map((l) => <span key={l} className="rounded border border-amber-300/25 px-1.5 py-0.5">{l}</span>)}
</div>
</div>
);
}
function LabelVis() {
const on = useArm();
const people = [['Dr. A. Rao', 'Cardiology', 'diagnosis: correct'], ['J. Lindqvist', 'Rust engineer', 'bug: off-by-one'], ['M. Tanaka', 'Translator · JA', 'fluency: 5/5']];
return (
<div className="mx-auto w-full max-w-md space-y-3">
{people.map(([n, role, label], i) => (
<div key={n} className={cn('flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] p-3 transition-all duration-700 ease-smooth', on ? 'translate-y-0 opacity-100' : 'translate-y-3 opacity-0')} style={{ transitionDelay: `${i * 200}ms` }}>
<span className="grid h-9 w-9 place-items-center rounded-full border border-white/10 bg-white/[0.04]"><UserRound className="h-4 w-4 text-zinc-300" /></span>
<div className="min-w-0 flex-1">
<div className="text-sm text-white">{n}</div>
<div className="font-mono text-[10.5px] text-zinc-500">{role}</div>
</div>
<span className={cn('rounded-full border border-teal-300/30 bg-teal-300/10 px-2.5 py-1 font-mono text-[10.5px] text-teal-200 transition-all duration-500 ease-spring', on ? 'scale-100 opacity-100' : 'scale-75 opacity-0')} style={{ transitionDelay: `${600 + i * 250}ms` }}>
{label}
</span>
</div>
))}
</div>
);
}
function QaVis() {
const on = useArm(200);
const r = 52;
const c = 2 * Math.PI * r;
return (
<div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-center">
<div className="relative h-36 w-36">
<svg viewBox="0 0 120 120" className="h-full w-full -rotate-90">
<circle cx="60" cy="60" r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="6" />
<circle cx="60" cy="60" r={r} fill="none" stroke="rgb(94 234 212)" strokeWidth="6" strokeLinecap="round" strokeDasharray={c} strokeDashoffset={on ? c * 0.003 : c} className="transition-[stroke-dashoffset] duration-[1800ms] ease-smooth" />
</svg>
<div className="absolute inset-0 grid place-items-center text-center">
<div><div className="font-serif text-3xl text-white">99.7%</div><div className="font-mono text-[10px] text-zinc-500">agreement</div></div>
</div>
</div>
<ul className="space-y-2 text-sm text-zinc-300">
{['Gold-set injection 5%', 'Triple adjudication', 'Blind audit by 2nd vendor', 'Drift monitoring'].map((x, i) => (
<li key={x} className={cn('flex items-center gap-2 transition-all duration-500', on ? 'opacity-100' : 'opacity-0')} style={{ transitionDelay: `${400 + i * 200}ms` }}>
<BadgeCheck className="h-4 w-4 text-teal-300" />{x}
</li>
))}
</ul>
</div>
);
}
function DeliveryVis() {
const on = useArm(200);
return (
<div className="mx-auto w-full max-w-md space-y-4">
{[['s3://lab-bucket/corpus/', '2.4 TB'], ['gs://train-data/polyglot/', '880 GB'], ['hf://org/private-mirror', '120 GB']].map(([d, s], i) => (
<div key={d}>
<div className="flex justify-between font-mono text-[11px] text-zinc-400"><span>{d}</span><span>{s}</span></div>
<div className="mt-2 h-1.5 overflow-hidden rounded-full bg-white/[0.06]">
<div className="h-full rounded-full bg-gradient-to-r from-teal-300 to-amber-200 transition-[width] duration-[2200ms] ease-smooth" style={{ width: on ? '100%' : '0%', transitionDelay: `${i * 300}ms` }} />
</div>
</div>
))}
<div className={cn('flex items-center gap-2 font-mono text-[11px] text-teal-200 transition-opacity duration-500', on ? 'opacity-100' : 'opacity-0')} style={{ transitionDelay: '2400ms' }}>
<CheckCircle2 className="h-4 w-4" /> Checksums verified · manifest signed
</div>
</div>
);
}
const STEPS = [
{ title: 'Sourcing', icon: Globe, body: 'Direct agreements with 1,400+ publishers, studios, repositories and contributor networks.', Vis: SourcingVis },
{ title: 'Licensing & consent', icon: FileSignature, body: 'Every record is bound to a rights receipt and, where people are involved, explicit consent.', Vis: LicensingVis },
{ title: 'Deduplication', icon: Copy, body: 'Exact, near-duplicate and semantic dedupe across your existing corpora, not just ours.', Vis: DedupeVis },
{ title: 'PII scrubbing', icon: ScanEye, body: 'Multi-pass detection across 40 entity types with human review on ambiguous spans.', Vis: PiiVis },
{ title: 'Expert labeling', icon: Tags, body: '38,000 vetted specialists — physicians, engineers, lawyers, linguists — not crowd clicks.', Vis: LabelVis },
{ title: 'QA', icon: ShieldCheck, body: 'Gold sets, triple adjudication and independent audits before anything leaves the building.', Vis: QaVis },
{ title: 'Delivery', icon: CloudUpload, body: 'Sharded, checksummed and streamed to your bucket with a signed manifest.', Vis: DeliveryVis },
];
const STEP_MS = 4200;
export function CorpusPipeline() {
const [active, setActive] = useState(0);
const [paused, setPaused] = useState(false);
const { ref, inView } = useInView<HTMLDivElement>(0.3);
useEffect(() => {
if (!inView || paused) return;
const t = window.setTimeout(() => setActive((a) => (a + 1) % STEPS.length), STEP_MS);
return () => window.clearTimeout(t);
}, [active, inView, paused]);
const Vis = STEPS[active].Vis;
return (
<section id="pipeline" className="relative scroll-mt-20 border-t border-white/[0.06] py-24 sm:py-32">
<Container>
<Reveal>
<SectionHeading eyebrow="03 — Pipeline" title={<>Seven gates between the world and <em className="italic text-teal-100">your weights.</em></>} sub="Every dataset passes the same audited pipeline. Nothing is scraped, nothing is skipped." />
</Reveal>
<div ref={ref} className="mt-14 grid gap-6 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
<ol className="space-y-1">
{STEPS.map(({ title, icon: Icon, body }, i) => {
const on = i === active;
return (
<li key={title}>
<button type="button" onClick={() => setActive(i)} className={cn('relative w-full overflow-hidden rounded-xl border px-4 py-3.5 text-left transition-all duration-500 ease-smooth', on ? 'border-white/10 bg-white/[0.04]' : 'border-transparent hover:bg-white/[0.02]')}>
<div className="flex items-center gap-3">
<span className="font-mono text-[11px] text-zinc-500">0{i + 1}</span>
<Icon className={cn('h-4 w-4 transition-colors', on ? 'text-teal-200' : i < active ? 'text-teal-300/60' : 'text-zinc-500')} />
<span className={cn('text-[15px] transition-colors', on ? 'text-white' : 'text-zinc-400')}>{title}</span>
</div>
<div className={cn('grid transition-all duration-500 ease-smooth', on ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0')}>
<p className="min-h-0 overflow-hidden pl-[3.4rem] pt-2 text-sm leading-relaxed text-zinc-400">{body}</p>
</div>
{on && (
<span className="absolute inset-x-0 bottom-0 h-px bg-white/[0.06]">
<span key={`${active}-${paused}`} className="block h-full bg-teal-300" style={{ animation: paused || !inView ? 'none' : `cx-progress ${STEP_MS}ms linear both`, width: paused ? '100%' : undefined }} />
</span>
)}
</button>
</li>
);
})}
</ol>
<Panel className="min-h-[420px]">
<div className="dither-grid absolute inset-0 opacity-60" />
<div className="relative flex items-center justify-between border-b border-white/[0.06] px-5 py-3 font-mono text-[11px] text-zinc-400">
<span>stage {active + 1}/{STEPS.length} · {STEPS[active].title.toLowerCase()}</span>
<span className="flex gap-1">{STEPS.map((_, i) => <span key={i} className={cn('h-1 w-4 rounded-full transition-colors duration-500', i <= active ? 'bg-teal-300' : 'bg-white/10')} />)}</span>
</div>
<div key={active} className="relative flex min-h-[360px] animate-fade-in items-center p-6 sm:p-10">
<div className="w-full"><Vis /></div>
</div>
</Panel>
</div>
</Container>
<style>{`@keyframes cx-progress{from{width:0}to{width:100%}}`}</style>
</section>
);
}components/niceui/pages/landing/corpus/Proof.tsx
import { Atom, Bird, Compass, Dna, Orbit, Rows3, Waves, Wind } from 'lucide-react';
import { useCountUp, useInView } from '@/components/niceui/pages/landing/shared/motion';
import { Container } from './ui';
const LABS = [
{ name: 'Helix Labs', icon: Dna, style: 'font-serif text-2xl italic' },
{ name: 'NORTHWIND AI', icon: Wind, style: 'font-mono text-sm tracking-[0.25em]' },
{ name: 'Parallel', icon: Rows3, style: 'font-sans text-xl font-semibold tracking-tight' },
{ name: 'orbital', icon: Orbit, style: 'font-sans text-xl lowercase tracking-wide' },
{ name: 'Fathom', icon: Waves, style: 'font-serif text-2xl' },
{ name: 'KESTREL', icon: Bird, style: 'font-sans text-base font-semibold tracking-[0.3em]' },
{ name: 'Meridian Research', icon: Compass, style: 'font-serif text-xl italic' },
{ name: 'Quanta', icon: Atom, style: 'font-mono text-lg' },
];
function Stat({ value, decimals, suffix, label, note, active, delay }: { value: number; decimals: number; suffix: string; label: string; note: string; active: boolean; delay: number }) {
const v = useCountUp(value, active, 2000);
return (
<div className="group relative bg-[#07090A] p-6 transition-colors duration-500 hover:bg-white/[0.02] sm:p-8" style={{ transitionDelay: `${delay}ms` }}>
<div className="font-mono text-[11px] uppercase tracking-[0.18em] text-zinc-500">{label}</div>
<div className="mt-4 font-serif text-5xl leading-none tracking-tight text-white tabular-nums sm:text-6xl">
{v.toFixed(decimals)}
<span className="text-teal-200">{suffix}</span>
</div>
<div className="mt-4 text-sm leading-relaxed text-zinc-400">{note}</div>
<div className="absolute inset-x-0 bottom-0 h-px origin-left scale-x-0 bg-gradient-to-r from-teal-300/70 to-transparent transition-transform duration-700 ease-smooth group-hover:scale-x-100" />
</div>
);
}
export function CorpusProof() {
const { ref, inView } = useInView<HTMLDivElement>(0.3);
return (
<section className="relative border-y border-white/[0.06] bg-[#07090A]">
<div className="py-12">
<Container>
<p className="text-center font-mono text-[11px] uppercase tracking-[0.2em] text-zinc-500">Trusted by research teams training at the frontier</p>
</Container>
<div className="mask-fade-x relative mt-8 overflow-hidden">
<div className="flex w-max animate-marquee items-center hover:[animation-play-state:paused]">
{[...LABS, ...LABS].map(({ name, icon: Icon, style }, i) => (
<div key={i} className="flex items-center gap-2.5 px-10 text-zinc-400 transition-colors duration-300 hover:text-white">
<Icon className="h-5 w-5" strokeWidth={1.5} />
<span className={style}>{name}</span>
</div>
))}
</div>
</div>
</div>
<Container>
<div ref={ref} className="grid grid-cols-1 gap-px overflow-hidden rounded-2xl border border-white/[0.06] bg-white/[0.06] sm:grid-cols-2 lg:grid-cols-4">
<Stat active={inView} delay={0} value={4.2} decimals={1} suffix="T" label="Licensed tokens" note="Across 212 languages and 61 programming languages." />
<Stat active={inView} delay={80} value={180} decimals={0} suffix="M" label="Annotated images" note="Boxes, masks, captions and dense region descriptions." />
<Stat active={inView} delay={160} value={2.1} decimals={1} suffix="M hrs" label="Consented audio" note="Studio and in-the-wild speech, 94 locales." />
<Stat active={inView} delay={240} value={99.7} decimals={1} suffix="%" label="Label accuracy" note="Measured on blind, triple-adjudicated audits." />
</div>
</Container>
<div className="h-24" />
</section>
);
}components/niceui/pages/landing/corpus/Trust.tsx
import { useState } from 'react';
import { BadgeCheck, Database, FileCheck2, Fingerprint, Globe2, Lock, Receipt, Scale, ShieldCheck, Sparkles } from 'lucide-react';
import { cn } from '@/lib/cn';
import { Reveal, useInView } from '@/components/niceui/pages/landing/shared/motion';
import { Chip, Container, Panel, SectionHeading } from './ui';
const LINEAGE = [
{ icon: Globe2, label: 'Source', meta: 'Revista Ciência Hoje' },
{ icon: Receipt, label: 'Receipt', meta: 'rcpt_4b1e9a' },
{ icon: Fingerprint, label: 'Transform', meta: 'dedupe · pii · v4.2' },
{ icon: Database, label: 'Shard', meta: 'train-00041' },
{ icon: Sparkles, label: 'Your model', meta: 'run 2291-b' },
];
function Lineage() {
const { ref, inView } = useInView<HTMLDivElement>(0.4);
return (
<Panel className="p-6 sm:p-8">
<div className="flex items-center justify-between">
<span className="font-mono text-[11px] uppercase tracking-[0.18em] text-zinc-400">Lineage · pw4-88120931</span>
<Chip tone="teal">Verifiable</Chip>
</div>
<div ref={ref} className="relative mt-8 grid grid-cols-1 gap-4 sm:grid-cols-5 sm:gap-2">
<div className="absolute left-[10%] right-[10%] top-6 hidden h-px bg-white/10 sm:block">
<div className={cn('h-full bg-gradient-to-r from-teal-300 via-emerald-200 to-amber-200 transition-[width] duration-[2000ms] ease-smooth', inView ? 'w-full' : 'w-0')} />
</div>
{LINEAGE.map(({ icon: Icon, label, meta }, i) => (
<div key={label} className={cn('relative flex items-center gap-4 transition-all duration-700 ease-smooth sm:flex-col sm:text-center', inView ? 'translate-y-0 opacity-100' : 'translate-y-3 opacity-0')} style={{ transitionDelay: `${i * 300}ms` }}>
<span className={cn('relative grid h-12 w-12 shrink-0 place-items-center rounded-xl border bg-[#0A0D0E]', i === LINEAGE.length - 1 ? 'border-amber-300/40 text-amber-200' : 'border-teal-300/30 text-teal-200')}>
<Icon className="h-5 w-5" strokeWidth={1.5} />
</span>
<div>
<div className="text-sm text-white">{label}</div>
<div className="mt-0.5 font-mono text-[10.5px] text-zinc-500">{meta}</div>
</div>
</div>
))}
</div>
</Panel>
);
}
const CERTS = [
{ name: 'SOC 2', sub: 'Type II', icon: ShieldCheck },
{ name: 'ISO', sub: '27001', icon: BadgeCheck },
{ name: 'GDPR', sub: 'EU · UK', icon: Scale },
{ name: 'CCPA', sub: 'CPRA ready', icon: Lock },
];
const REGIONS = [
{ name: 'US East', code: 'us-east-1', x: 27, y: 38 },
{ name: 'US West', code: 'us-west-2', x: 15, y: 36 },
{ name: 'Frankfurt', code: 'eu-central-1', x: 51, y: 30 },
{ name: 'London', code: 'eu-west-2', x: 47, y: 28 },
{ name: 'Tokyo', code: 'ap-northeast-1', x: 85, y: 38 },
{ name: 'Singapore', code: 'ap-southeast-1', x: 77, y: 58 },
];
function Residency() {
const [sel, setSel] = useState(2);
return (
<Panel className="p-6 sm:p-8">
<div className="flex items-center justify-between">
<span className="font-mono text-[11px] uppercase tracking-[0.18em] text-zinc-400">Data residency</span>
<span className="font-mono text-[11px] text-teal-200">{REGIONS[sel].code}</span>
</div>
<div className="relative mt-6 aspect-[2/1] overflow-hidden rounded-xl border border-white/[0.06]">
<div className="dot-bg absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_80%)]" />
<svg viewBox="0 0 200 100" className="absolute inset-0 h-full w-full opacity-30" preserveAspectRatio="none">
<path d="M18 30 Q30 18 52 26 T70 44 Q60 60 48 52 T22 48 Z M90 22 Q110 14 128 24 T160 26 Q178 34 170 52 Q150 70 128 56 T96 46 Z M150 62 Q164 64 170 74 Q160 84 150 76 Z M40 62 Q54 64 58 80 Q48 92 42 80 Z" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.15)" strokeWidth="0.4" />
</svg>
{REGIONS.map((r, i) => (
<button key={r.code} type="button" onClick={() => setSel(i)} aria-label={r.name} className="group absolute -translate-x-1/2 -translate-y-1/2" style={{ left: `${r.x}%`, top: `${r.y}%` }}>
<span className="relative flex h-3 w-3 items-center justify-center">
{sel === i && <span className="absolute inset-0 animate-pulse-ring rounded-full bg-teal-300" />}
<span className={cn('relative h-2 w-2 rounded-full transition-all', sel === i ? 'scale-125 bg-teal-300' : 'bg-zinc-400 group-hover:bg-white')} />
</span>
<span className={cn('absolute left-1/2 top-4 -translate-x-1/2 whitespace-nowrap rounded border border-white/10 bg-[#07090A]/90 px-1.5 py-0.5 font-mono text-[10px] transition-opacity', sel === i ? 'text-white opacity-100' : 'text-zinc-400 opacity-0 group-hover:opacity-100')}>
{r.name}
</span>
</button>
))}
</div>
<p className="mt-5 text-sm leading-relaxed text-zinc-400">
Pin storage, processing and annotation to a single jurisdiction. Data never transits outside <span className="text-white">{REGIONS[sel].name}</span> without written approval.
</p>
</Panel>
);
}
export function CorpusTrust() {
return (
<section id="trust" className="relative scroll-mt-20 border-t border-white/[0.06] py-24 sm:py-32">
<div aria-hidden className="pointer-events-none absolute left-1/2 top-0 h-[480px] w-[900px] -translate-x-1/2 bg-[radial-gradient(closest-side,rgba(252,211,77,0.06),transparent)]" />
<Container className="relative">
<Reveal>
<SectionHeading eyebrow="04 — Trust & compliance" title={<>Provenance you can <em className="italic text-amber-100">put in a filing.</em></>} sub="Regulators, auditors and your general counsel will ask where the data came from. With Corpus, the answer is a link." />
</Reveal>
<Reveal delay={100} className="mt-14">
<Lineage />
</Reveal>
<div className="mt-4 grid gap-4 lg:grid-cols-2">
<Reveal delay={150}>
<Panel className="h-full p-6 sm:p-8">
<span className="font-mono text-[11px] uppercase tracking-[0.18em] text-zinc-400">License receipts</span>
<h3 className="mt-4 font-serif text-3xl leading-tight text-white">Every record has a receipt.</h3>
<p className="mt-3 leading-relaxed text-zinc-400">
A signed, immutable document that names the rights holder, the grant, the consent basis and every transformation applied. Query it by record id, export it for audits, or revoke downstream on opt-out.
</p>
<div className="mt-6 rounded-xl border border-dashed border-white/15 bg-black/30 p-4 font-mono text-[11.5px] leading-relaxed">
<div className="flex items-center gap-2 text-teal-200"><FileCheck2 className="h-3.5 w-3.5" /> receipt rcpt_4b1e9a</div>
<div className="mt-2 grid grid-cols-[110px_1fr] gap-y-1 text-zinc-400">
<span>holder</span><span className="text-zinc-200">Revista Ciência Hoje Ltda.</span>
<span>grant</span><span className="text-zinc-200">commercial · training · perpetual</span>
<span>consent</span><span className="text-zinc-200">n/a (non-personal)</span>
<span>signature</span><span className="truncate text-amber-200">ed25519:9f2a…c41e</span>
</div>
</div>
</Panel>
</Reveal>
<Reveal delay={200}>
<Residency />
</Reveal>
</div>
<div className="mt-4 grid grid-cols-2 gap-4 lg:grid-cols-4">
{CERTS.map(({ name, sub, icon: Icon }, i) => (
<Reveal key={name} delay={250 + i * 60}>
<div className="group relative overflow-hidden rounded-2xl border border-white/[0.07] bg-white/[0.02] p-6 text-center transition-all duration-500 hover:-translate-y-0.5 hover:border-teal-300/30">
<div className="dither-cross pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
<div className="relative mx-auto grid h-14 w-14 place-items-center rounded-full border border-white/10 bg-gradient-to-b from-white/[0.06] to-transparent">
<Icon className="h-6 w-6 text-teal-200" strokeWidth={1.25} />
</div>
<div className="relative mt-4 font-serif text-2xl text-white">{name}</div>
<div className="relative font-mono text-[11px] uppercase tracking-wider text-zinc-400">{sub}</div>
</div>
</Reveal>
))}
</div>
</Container>
</section>
);
}