135 lines
6.9 KiB
TypeScript
135 lines
6.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import Navbar from "@/components/Navbar";
|
|
|
|
const LISTINGS = [
|
|
{ id: "1", title: "Verified exit scam early warning — active market", category: "Market Intel", price: 8, verified: true, age: "2h ago", rep: 94 },
|
|
{ id: "2", title: "Opsec hole in popular forum software (CVE-pending)", category: "Vulnerability", price: 25, verified: true, age: "6h ago", rep: 88 },
|
|
{ id: "3", title: "Darknet exchange front-running scheme — evidence package", category: "Fraud Intel", price: 15, verified: false, age: "1d ago", rep: 72 },
|
|
{ id: "4", title: "Law enforcement infrastructure node IPs (EU)", category: "Counter-Intel", price: 40, verified: true, age: "2d ago", rep: 91 },
|
|
{ id: "5", title: "Compromised vendor PGP key — do not transact", category: "Crypto", price: 5, verified: true, age: "3h ago", rep: 99 },
|
|
{ id: "6", title: "Tor relay operator correlation attack proof-of-concept", category: "Network", price: 30, verified: false, age: "5d ago", rep: 65 },
|
|
];
|
|
|
|
const CATS = ["All", "Market Intel", "Vulnerability", "Fraud Intel", "Counter-Intel", "Crypto", "Network"];
|
|
|
|
export default function OraclePage() {
|
|
const [cat, setCat] = useState("All");
|
|
|
|
const filtered = cat === "All" ? LISTINGS : LISTINGS.filter((l) => l.category === cat);
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
<main className="min-h-screen bg-[#0a0a0a] pt-24 pb-20">
|
|
{/* Header */}
|
|
<section className="container mx-auto max-w-6xl px-4 mb-12">
|
|
<p className="mb-2 font-mono text-[10px] uppercase tracking-[0.35em] text-neon-purple/70">
|
|
the oracle · verified intelligence market
|
|
</p>
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<h1 className="font-orbitron text-4xl font-bold md:text-5xl">
|
|
THE <span className="text-neon-purple">ORACLE</span>
|
|
</h1>
|
|
<p className="mt-3 max-w-xl text-foreground/60">
|
|
Buy and sell verified darknet intelligence. Listings are staked — submitters put VOID credits at risk. Community verification ensures accuracy.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<Link href="/sign-in" className="rounded-lg border border-neon-purple/40 bg-neon-purple/10 px-4 py-2 text-sm font-bold text-neon-purple hover:bg-neon-purple/20">
|
|
Submit intel →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats bar */}
|
|
<section className="container mx-auto max-w-6xl px-4 mb-8">
|
|
<div className="flex flex-wrap gap-6 rounded-xl border border-zinc-800 bg-black/40 p-4 text-sm">
|
|
{[
|
|
{ label: "Active listings", value: LISTINGS.length },
|
|
{ label: "Verified", value: LISTINGS.filter((l) => l.verified).length },
|
|
{ label: "Avg price", value: `✦ ${Math.round(LISTINGS.reduce((a, l) => a + l.price, 0) / LISTINGS.length)} VOID` },
|
|
{ label: "Avg rep score", value: `${Math.round(LISTINGS.reduce((a, l) => a + l.rep, 0) / LISTINGS.length)}%` },
|
|
].map((s) => (
|
|
<div key={s.label}>
|
|
<p className="text-xs text-foreground/40 uppercase tracking-wider">{s.label}</p>
|
|
<p className="font-bold text-foreground">{s.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Category filter */}
|
|
<section className="container mx-auto max-w-6xl px-4 mb-6">
|
|
<div className="flex flex-wrap gap-2">
|
|
{CATS.map((c) => (
|
|
<button
|
|
key={c}
|
|
onClick={() => setCat(c)}
|
|
className={`rounded-full px-4 py-1.5 text-xs font-semibold border transition ${
|
|
cat === c
|
|
? "border-neon-purple/60 bg-neon-purple/20 text-neon-purple"
|
|
: "border-zinc-700 bg-zinc-900 text-foreground/60 hover:border-zinc-500"
|
|
}`}
|
|
>
|
|
{c}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Listings */}
|
|
<section className="container mx-auto max-w-6xl px-4">
|
|
<div className="space-y-3">
|
|
{filtered.map((listing) => (
|
|
<div
|
|
key={listing.id}
|
|
className="flex flex-col gap-3 rounded-xl border border-zinc-700/40 bg-black/40 p-5 sm:flex-row sm:items-center hover:border-zinc-500 transition cursor-pointer"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="rounded-full border border-zinc-600 bg-zinc-800 px-2 py-0.5 text-[9px] uppercase tracking-wider text-zinc-400">
|
|
{listing.category}
|
|
</span>
|
|
{listing.verified && (
|
|
<span className="rounded-full border border-neon-cyan/30 bg-neon-cyan/10 px-2 py-0.5 text-[9px] uppercase tracking-wider text-neon-cyan">
|
|
✓ verified
|
|
</span>
|
|
)}
|
|
<span className="text-[10px] text-foreground/30">{listing.age}</span>
|
|
</div>
|
|
<p className="font-semibold text-foreground text-sm leading-snug">{listing.title}</p>
|
|
<div className="mt-1 flex items-center gap-3">
|
|
<span className="text-xs text-foreground/40">Rep: <span className={listing.rep >= 85 ? "text-neon-green" : listing.rep >= 65 ? "text-yellow-500" : "text-red-400"}>{listing.rep}%</span></span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 shrink-0">
|
|
<span className="font-mono text-base font-bold text-neon-purple">✦ {listing.price}</span>
|
|
<button className="rounded-lg border border-neon-purple/40 bg-neon-purple/10 px-4 py-1.5 text-xs font-bold text-neon-purple hover:bg-neon-purple/20 transition">
|
|
Purchase
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Submit box */}
|
|
<section className="container mx-auto max-w-3xl px-4 mt-16">
|
|
<div className="rounded-2xl border border-neon-purple/20 bg-neon-purple/5 p-8 text-center">
|
|
<h2 className="font-orbitron text-xl font-bold mb-2">Have actionable intelligence?</h2>
|
|
<p className="text-sm text-foreground/60 mb-5">Submit a listing. Stake VOID credits to guarantee accuracy — payouts on verified buys.</p>
|
|
<Link href="/sign-in" className="inline-block rounded-full bg-neon-purple/20 border border-neon-purple/40 px-6 py-2.5 text-sm font-bold text-neon-purple hover:bg-neon-purple/30">
|
|
Submit Intelligence →
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|