78a071ba02
Add persistent onion key backup and restore, improve startup resilience, and flesh out the major site verticals with richer navigation, search coverage, and operator documentation. Made-with: Cursor
70 lines
3.4 KiB
TypeScript
70 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import ThemedLayout from "@/components/layouts/ThemedLayout";
|
|
|
|
export default function AwardsPage() {
|
|
const [glitch, setGlitch] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setGlitch(true);
|
|
setTimeout(() => setGlitch(false), 100);
|
|
}, 3000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const awards = [
|
|
{ year: "2025", title: "Best Market Infrastructure", winner: "The Candy Shop", icon: "🏆" },
|
|
{ year: "2024", title: "Most Secure Node", winner: "The Sanctuary", icon: "🛡️" },
|
|
{ year: "2024", title: "Innovation in Shared Entities", winner: "Darknet Ping Pong", icon: "🔮" },
|
|
{ year: "2023", title: "Excellence in OpSec Training", winner: "Arb Academy", icon: "🎓" },
|
|
];
|
|
|
|
return (
|
|
<ThemedLayout theme="mystic" title="The Shadow Awards">
|
|
<div className={`max-w-5xl mx-auto pt-12 transition-all duration-75 ${glitch ? 'skew-x-1 scale-105 blur-[1px]' : ''}`}>
|
|
<header className="text-center mb-20 relative">
|
|
<div className="absolute inset-0 flex items-center justify-center opacity-10 pointer-events-none">
|
|
<div className="text-[200px] font-black">S.A.</div>
|
|
</div>
|
|
<h1 className="text-7xl font-serif italic mb-4 relative z-10">The Shadow Awards</h1>
|
|
<p className="text-xs uppercase tracking-[1em] opacity-40">Recognizing Excellence in the Void</p>
|
|
</header>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-20">
|
|
{awards.map((a, i) => (
|
|
<div key={i} className="group border-2 border-[#d4af37]/20 p-12 bg-black/40 hover:border-[#d4af37]/60 transition-all relative overflow-hidden">
|
|
<div className="absolute -right-4 -bottom-4 text-8xl opacity-5 group-hover:opacity-10 transition-opacity">
|
|
{a.icon}
|
|
</div>
|
|
<div className="text-[#d4af37] text-xs font-bold mb-2">{a.year} Laureate</div>
|
|
<h3 className="text-3xl font-serif mb-4">{a.title}</h3>
|
|
<div className="text-white/60 text-sm italic">Awarded to:</div>
|
|
<div className="text-xl font-bold text-white uppercase tracking-widest">{a.winner}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<section className="border-t-2 border-[#d4af37]/20 pt-20 text-center">
|
|
<h2 className="text-4xl font-serif mb-8 italic">Official Accreditation</h2>
|
|
<div className="flex justify-center gap-12 opacity-40 grayscale hover:grayscale-0 transition-all">
|
|
<img src="https://www.svgrepo.com/show/443364/award-badge.svg" className="h-24 invert" />
|
|
<img src="https://www.svgrepo.com/show/443365/award-ribbon.svg" className="h-24 invert" />
|
|
<img src="https://www.svgrepo.com/show/443366/award-star.svg" className="h-24 invert" />
|
|
</div>
|
|
<p className="mt-12 text-[10px] uppercase tracking-widest opacity-30 max-w-2xl mx-auto leading-loose">
|
|
The Shadow Awards committee is comprised of anonymous delegates from the top 100 nodes.
|
|
Selection is based on uptime, security, and contribution to the network's growth.
|
|
</p>
|
|
</section>
|
|
|
|
<div className="mt-32 text-center">
|
|
<div className="text-[8px] opacity-20 uppercase tracking-[0.5em] mb-4">End of Official Record</div>
|
|
<div className="text-red-500 text-[10px] font-bold"></div>
|
|
</div>
|
|
</div>
|
|
</ThemedLayout>
|
|
);
|
|
}
|