aethex-forge/client/pages/ResearchLabs.tsx
2025-10-04 00:49:11 +00:00

592 lines
23 KiB
TypeScript

import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom";
import {
ArrowRight,
Beaker,
Brain,
CheckCircle,
Cpu,
Database,
Download,
ExternalLink,
Eye,
Microscope,
Shield,
Zap,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";
type Directive = {
title: string;
codename: string;
summary: string;
status: "Exploratory" | "Operational" | "In Testing" | "Stealth";
command: string;
output: string[];
link: string;
};
type Facility = {
name: string;
location: string;
equipment: string[];
capacity: string;
status: "Operational" | "Scaling" | "Prototype";
link: string;
};
type Transmission = {
headline: string;
description: string;
category: string;
priority: "High" | "Medium" | "Critical";
link: string;
};
const directives: Directive[] = [
{
title: "Project CHIMERA",
codename: "Synthetic Cognition",
summary:
"Fusion of quantum-inspired architectures with autonomous design heuristics for adaptive content generation.",
status: "Operational",
command: "$ run status --project=chimera",
output: [
"[SYSTEM] Quantum nodes linked",
"[I/O] Creativity gradient stable at 0.97",
"[SECURITY] Containment protocols verified",
],
link: "https://labs.aethex.biz/projects/chimera",
},
{
title: "Project ENIGMA",
codename: "Neural Defense",
summary:
"Real-time anomaly detection fabric with on-device heuristics hardened for hostile simulation environments.",
status: "In Testing",
command: "$ run status --project=enigma",
output: [
"[BUILD] Secure enclave compiled",
"[TELEMETRY] Latency delta: -38%",
"[FLAG] Adversarial fingerprints neutralised",
],
link: "https://labs.aethex.biz/projects/enigma",
},
{
title: "Project GENESIS",
codename: "Distributed Worlds",
summary:
"Composable metaverse tooling that stitches persistent realms with live player-authored logic streams.",
status: "Exploratory",
command: "$ run status --project=genesis",
output: [
"[SIM] Multi-realm handshake accepted",
"[GRAPH] Temporal mesh integrity: 99.2%",
"[NEXT] Requesting narrative assets",
],
link: "https://labs.aethex.biz/projects/genesis",
},
];
const facilities: Facility[] = [
{
name: "Signal Processing Bay",
location: "Deck 03 · Node West",
equipment: [
"GPU swarm (A100 x32)",
"Photonic inference cores",
"Adaptive RF shield array",
],
capacity: "12 researchers",
status: "Operational",
link: "https://labs.aethex.biz/facilities/signal-bay",
},
{
name: "Quantum Prototyping Wing",
location: "Deck 07 · Core Atrium",
equipment: [
"Superconducting qubit stack",
"Cryogenic vacuum chambers",
"Stabilised frequency lattice",
],
capacity: "9 researchers",
status: "Scaling",
link: "https://labs.aethex.biz/facilities/quantum-wing",
},
{
name: "Defense Simulation Hub",
location: "Deck 05 · South Array",
equipment: [
"Adversarial scenario engine",
"Distributed threat sandbox",
"Neural trace visualisers",
],
capacity: "15 researchers",
status: "Prototype",
link: "https://labs.aethex.biz/facilities/defense-hub",
},
];
const transmissions: Transmission[] = [
{
headline: "Zero-latency voxel streaming achieved",
description:
"Joint deployment between Labs mainframe and AeThex Forge cut render latency by 63% across 11 test regions.",
category: "Breakthrough",
priority: "High",
link: "https://labs.aethex.biz/updates/voxel-streaming",
},
{
headline: "Neural defense telemetry sync online",
description:
"Edge devices now receive live threat heuristics every 4.7 seconds via Labs relay with autonomous fallback.",
category: "Deployment",
priority: "Critical",
link: "https://labs.aethex.biz/updates/neural-defense",
},
{
headline: "Genesis Realm Editor private preview",
description:
"Closed group of 120 creators mapping persistent storylines with distributed logic patches in real time.",
category: "Programs",
priority: "Medium",
link: "https://labs.aethex.biz/updates/genesis-preview",
},
];
export default function ResearchLabs() {
const [isLoading, setIsLoading] = useState(true);
const toastShownRef = useRef(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
if (!toastShownRef.current) {
aethexToast.system("Labs mainframe linked");
toastShownRef.current = true;
}
}, 900);
return () => clearTimeout(timer);
}, []);
if (isLoading) {
return (
<LoadingScreen
message="Aligning with Labs mainframe..."
showProgress={true}
duration={900}
/>
);
}
return (
<Layout>
<div className="relative min-h-screen bg-black text-white">
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#facc15_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(250,204,21,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
<main className="relative z-10">
<section className="relative overflow-hidden py-20 lg:py-28">
<div className="container mx-auto max-w-6xl px-4 text-center">
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
<Badge
variant="outline"
className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 shadow-[0_0_20px_rgba(250,204,21,0.2)]"
>
<span className="mr-2 inline-flex h-2 w-2 animate-pulse rounded-full bg-yellow-300" />
Research & Development Uplink
</Badge>
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl lg:text-6xl">
AeThex | L.A.B.S. Interface
</h1>
<p className="text-lg text-yellow-100/90 sm:text-xl">
Real-time window into the AeThex Labs mainframe. Monitor
directives, facilities, and transmissions as they propagate
through the network.
</p>
<div className="flex flex-col gap-4 sm:flex-row">
<Button
asChild
size="lg"
className="bg-yellow-400 text-black shadow-[0_0_30px_rgba(250,204,21,0.35)] transition hover:bg-yellow-300"
>
<a
href="https://labs.aethex.biz"
target="_blank"
rel="noreferrer"
>
<Microscope className="mr-2 h-5 w-5" />
Access Labs Mainframe
</a>
</Button>
<Button
asChild
size="lg"
variant="outline"
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10"
>
<Link to="/docs">
<ExternalLink className="mr-2 h-5 w-5" />
View Research Library
</Link>
</Button>
<Button
asChild
size="lg"
variant="outline"
className="border-slate-800/80 bg-slate-900/60 text-yellow-200 hover:border-yellow-400/40"
>
<Link to="/contact">
<Beaker className="mr-2 h-5 w-5" />
Initiate Collaboration
</Link>
</Button>
</div>
</div>
</div>
</section>
<section className="border-y border-yellow-400/10 bg-black/80 py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="mb-12 flex items-start justify-between gap-6">
<div>
<h2 className="text-3xl font-bold text-yellow-300 sm:text-4xl">
Core Directives
</h2>
<p className="mt-3 max-w-2xl text-sm text-yellow-100/70 sm:text-base">
Programmes sourced from the Labs backbone. Tap into live
status feeds and request extended dossiers directly from the
Labs archive.
</p>
</div>
<Zap className="hidden h-10 w-10 text-yellow-400/70 sm:block" />
</div>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{directives.map((directive) => (
<Card
key={directive.title}
className="flex h-full flex-col border border-yellow-400/20 bg-black/60 backdrop-blur"
>
<CardHeader className="space-y-3">
<div className="flex items-center justify-between">
<CardTitle className="text-xl text-yellow-100">
{directive.title}
</CardTitle>
<Badge className="bg-yellow-500/10 text-xs text-yellow-300">
{directive.status}
</Badge>
</div>
<CardDescription className="text-sm uppercase tracking-wide text-yellow-200/70">
{directive.codename}
</CardDescription>
<p className="text-sm text-yellow-100/80">
{directive.summary}
</p>
</CardHeader>
<CardContent className="flex flex-1 flex-col gap-4">
<div className="rounded border border-yellow-400/20 bg-black/70 p-4 font-mono text-xs text-green-400">
<div className="mb-2 text-yellow-200/80">
{directive.command}
</div>
<div className="space-y-1 text-green-300/90">
{directive.output.map((line) => (
<div key={line} className="truncate">
{line}
</div>
))}
</div>
</div>
<Button
asChild
variant="link"
className="justify-start px-0 text-yellow-300 hover:text-yellow-200"
>
<a
href={directive.link}
target="_blank"
rel="noreferrer"
>
Request Full Report
<ArrowRight className="ml-2 h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
))}
</div>
</div>
</section>
<section className="py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="mb-10 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div>
<h2 className="text-3xl font-bold text-yellow-300 sm:text-4xl">
Labs Transmissions
</h2>
<p className="mt-2 max-w-3xl text-sm text-yellow-100/70 sm:text-base">
Broadcasts directly from Labs operations. Filtered for
Research & Development stakeholders across AeThex networks.
</p>
</div>
<Button
asChild
variant="outline"
className="border-yellow-400/40 text-yellow-200 hover:bg-yellow-500/10"
>
<a
href="https://labs.aethex.biz/updates"
target="_blank"
rel="noreferrer"
>
Browse Labs Timeline
<ExternalLink className="ml-2 h-4 w-4" />
</a>
</Button>
</div>
<div className="space-y-6">
{transmissions.map((transmission) => (
<Card
key={transmission.headline}
className="border border-yellow-400/10 bg-black/70 backdrop-blur"
>
<CardContent className="flex flex-col gap-6 p-6 md:flex-row md:items-center md:justify-between">
<div className="space-y-2">
<div className="flex items-center gap-3 text-sm uppercase tracking-wide text-yellow-400/70">
<span>{transmission.category}</span>
<span className="inline-flex items-center rounded-full border border-yellow-400/30 px-2 py-0.5 text-xs font-semibold text-yellow-200">
{transmission.priority} Priority
</span>
</div>
<h3 className="text-xl font-semibold text-yellow-100">
{transmission.headline}
</h3>
<p className="max-w-3xl text-sm text-yellow-100/75">
{transmission.description}
</p>
</div>
<div className="flex flex-wrap gap-3">
<Button
size="sm"
variant="outline"
className="border-yellow-400/50 text-yellow-200 hover:bg-yellow-500/10"
>
<Eye className="mr-2 h-4 w-4" />
Open Update
</Button>
<Button
size="sm"
variant="outline"
className="border-yellow-400/30 text-yellow-200"
>
<Download className="mr-2 h-4 w-4" />
Archive Packet
</Button>
<Button
asChild
size="sm"
className="bg-yellow-400 text-black hover:bg-yellow-300"
>
<a
href={transmission.link}
target="_blank"
rel="noreferrer"
>
Labs Detail
</a>
</Button>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
<section className="border-y border-yellow-400/10 bg-black/85 py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="mb-12 text-center">
<h2 className="text-3xl font-bold text-yellow-300 sm:text-4xl">
Research Facilities Network
</h2>
<p className="mt-3 text-sm text-yellow-100/70 sm:text-base">
Physical infrastructure tethered to Labs for rapid
prototyping, cyber defense simulations, and quantum-grade
production.
</p>
</div>
<div className="grid gap-6 md:grid-cols-3">
{facilities.map((facility) => (
<Card
key={facility.name}
className="flex h-full flex-col border border-yellow-400/15 bg-black/70 backdrop-blur"
>
<CardHeader className="space-y-2">
<div className="flex items-center justify-between">
<CardTitle className="text-lg text-yellow-100">
{facility.name}
</CardTitle>
<Badge className="bg-yellow-500/10 text-xs text-yellow-300">
{facility.status}
</Badge>
</div>
<CardDescription className="text-sm text-yellow-200/70">
{facility.location}
</CardDescription>
</CardHeader>
<CardContent className="flex flex-1 flex-col gap-4">
<div className="space-y-2">
<p className="text-xs uppercase text-yellow-400/80">
Equipment Loadout
</p>
<div className="space-y-2">
{facility.equipment.map((item) => (
<div
key={item}
className="flex items-center gap-2 text-sm text-yellow-100/80"
>
<CheckCircle className="h-3 w-3 text-yellow-300" />
<span>{item}</span>
</div>
))}
</div>
</div>
<div className="text-sm text-yellow-200/75">
Capacity:{" "}
<span className="font-semibold text-yellow-200">
{facility.capacity}
</span>
</div>
<Button
asChild
variant="link"
className="mt-auto justify-start px-0 text-yellow-300 hover:text-yellow-200"
>
<a
href={facility.link}
target="_blank"
rel="noreferrer"
>
Inspect Facility
<ArrowRight className="ml-2 h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
))}
</div>
</div>
</section>
<section className="py-20">
<div className="container mx-auto max-w-5xl px-4 text-center">
<div className="space-y-6">
<h2 className="text-3xl font-bold text-yellow-300 sm:text-4xl">
Sync With AeThex Labs
</h2>
<p className="mx-auto max-w-3xl text-sm text-yellow-100/70 sm:text-base">
Join the private Labs console for priority access to
directives, research packets, and sandbox environments crafted
by the Research & Development collective.
</p>
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
<Button
asChild
size="lg"
className="bg-yellow-400 text-black hover:bg-yellow-300"
>
<a
href="https://labs.aethex.biz/signup"
target="_blank"
rel="noreferrer"
>
<Brain className="mr-2 h-5 w-5" />
Request Labs Credentials
</a>
</Button>
<Button
asChild
size="lg"
variant="outline"
className="border-yellow-400/60 text-yellow-200 hover:bg-yellow-500/10"
>
<Link to="/community">
<Database className="mr-2 h-5 w-5" />
Meet the Research Community
</Link>
</Button>
</div>
<div className="grid gap-8 pt-10 sm:grid-cols-3">
<div className="space-y-2">
<Shield className="mx-auto h-8 w-8 text-yellow-400" />
<h3 className="text-lg font-semibold text-yellow-100">
Secure Relay
</h3>
<p className="text-sm text-yellow-100/70">
Labs transmissions are signed and checksum verified every
90 seconds.
</p>
</div>
<div className="space-y-2">
<Cpu className="mx-auto h-8 w-8 text-yellow-400" />
<h3 className="text-lg font-semibold text-yellow-100">
Adaptive Compute
</h3>
<p className="text-sm text-yellow-100/70">
Elastic compute mesh auto-balances workloads across Forge
and Labs infrastructure.
</p>
</div>
<div className="space-y-2">
<Beaker className="mx-auto h-8 w-8 text-yellow-400" />
<h3 className="text-lg font-semibold text-yellow-100">
Rapid Experimentation
</h3>
<p className="text-sm text-yellow-100/70">
Prototype, validate, and deploy concepts with Labs-grade
toolchains in under 24 hours.
</p>
</div>
</div>
<div className="mt-12 flex flex-col items-center gap-3">
<div className="inline-flex items-center gap-2 rounded-full border border-yellow-400/20 bg-black/70 px-5 py-2 text-xs font-semibold uppercase tracking-[0.35em] text-yellow-300">
<span className="h-2 w-2 rounded-full bg-yellow-300 animate-pulse" />
System Nominal
</div>
<a
href="https://labs.aethex.biz/status"
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-2 text-sm text-yellow-200 hover:text-yellow-100"
>
Labs Status Console
<ExternalLink className="h-3 w-3" />
</a>
</div>
</div>
</div>
</section>
</main>
</div>
</Layout>
);
}