File size: 5,321 Bytes
c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b 5fb7488 c35213b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | import Link from 'next/link';
export default function Home() {
return (
<main className="min-h-[100dvh] bg-black text-white selection:bg-white/20 selection:text-white font-sans p-4 md:p-6 lg:p-8 flex flex-col overflow-hidden">
{/* Strict Architectural Grid Container */}
<div className="flex-1 w-full grid grid-cols-1 lg:grid-cols-12 gap-px bg-zinc-800 border border-zinc-800 rounded-sm overflow-hidden relative shadow-2xl">
{/* Left Side: Massive Branding (8 columns) */}
<div className="lg:col-span-8 lg:col-start-1 bg-black p-6 sm:p-8 md:p-12 lg:p-16 flex flex-col justify-between relative group min-h-[50vh] lg:min-h-0">
<div className="flex-1 flex flex-col justify-center max-w-full overflow-hidden">
{/* Fluid Typography using clamp and vw to perfectly fit without wrapping/overflowing */}
<h1 className="font-bold tracking-tighter leading-[0.85] uppercase text-white w-full">
<span className="block text-[15vw] lg:text-[7vw] xl:text-[8vw] 2xl:text-[9rem]">Wyvern</span>
<span className="block text-[15vw] lg:text-[7vw] xl:text-[8vw] 2xl:text-[9rem] text-zinc-600">Softworks</span>
</h1>
<p className="font-mono text-[10px] sm:text-xs md:text-sm text-zinc-400 max-w-xl mt-8 md:mt-12 lg:mt-16 leading-relaxed tracking-wide">
Premium software drops, zero-day scripts, and enterprise cracks. Architected with industrial precision and void of unnecessary aesthetics. Access requires clearance.
</p>
</div>
<div className="font-mono text-[9px] sm:text-[10px] text-zinc-600 tracking-widest mt-8">
A PROJECT BY APRK // EST. 2026
</div>
</div>
{/* Right Side: Navigation Grid (4 columns) */}
<div className="lg:col-span-4 bg-black flex flex-col lg:h-full lg:overflow-y-auto border-t lg:border-t-0 border-zinc-900">
<div className="p-8 border-b border-zinc-900 shrink-0 bg-black sticky top-0 z-10">
<div className="flex flex-col gap-1">
<span className="font-mono text-[10px] tracking-[0.3em] text-zinc-600 uppercase">SYSTEM</span>
<span className="font-black text-xs tracking-tighter uppercase text-white">MODULES</span>
</div>
</div>
<div className="flex-1 flex flex-col">
{[
{ id: 'sources', label: 'Sources', index: '01', desc: 'Resource Directory' },
{ id: 'cracks', label: 'Cracks', index: '02', desc: 'Bypass Protocols' },
{ id: 'scripts', label: 'Scripts', index: '03', desc: 'Automated Logic' },
{ id: 'tools', label: 'Tools', index: '04', desc: 'Utility Suite' },
].map((mod) => (
<Link
key={mod.id}
href={`/${mod.id}`}
className="flex-1 min-h-[100px] p-8 border-b border-zinc-900 flex flex-col justify-center gap-2 group hover:bg-white transition-all duration-500"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<span className="font-mono text-[10px] text-zinc-800 group-hover:text-black/30 transition-colors">
{mod.index}
</span>
<span className="font-black text-xl tracking-tighter uppercase italic group-hover:text-black transition-colors">
{mod.label}
</span>
</div>
<span className="font-mono text-zinc-800 group-hover:text-black transition-colors">→</span>
</div>
<p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase group-hover:text-black/60 transition-colors">
{mod.desc}
</p>
</Link>
))}
<Link href="/vip" className="flex-1 min-h-[120px] p-8 bg-zinc-950 flex flex-col justify-center gap-2 group hover:bg-white transition-all duration-500 relative overflow-hidden">
<div className="absolute top-0 left-0 w-2 h-full bg-white -translate-x-full group-hover:translate-x-0 transition-transform duration-500" />
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<span className="font-mono text-[10px] text-zinc-800 group-hover:text-black/30 transition-colors">
EXP
</span>
<span className="font-black text-xl tracking-tighter uppercase text-white group-hover:text-black transition-colors italic">
VIP Access
</span>
</div>
<div className="w-2 h-2 bg-white rounded-full group-hover:bg-black transition-colors shadow-[0_0_10px_rgba(255,255,255,0.5)] group-hover:shadow-none animate-pulse" />
</div>
<p className="font-mono text-[9px] tracking-widest text-zinc-500 uppercase group-hover:text-black/60 transition-colors">
Clearance Elevation Required
</p>
</Link>
</div>
</div>
</div>
</main>
);
}
|