Layout with Hidden Navigation
Conceals navigation behind a trigger icon to maximize content area — the entire screen becomes the canvas, with UI chrome revealed only on demand.
AI Prompt
Build a hidden navigation layout in Next.js with Tailwind CSS. Default state: only a hamburger icon (24×24, top-right, `fixed`) visible against the page content. The trigger should have a subtle `hover:bg-white/10` state. When clicked, a full-screen overlay slides in from the right using `translate-x-0` ↔ `translate-x-full` with `transition-transform duration-300 ease-in-out`. Overlay: `fixed inset-0 z-50 bg-slate-950 flex`. Left side of overlay (60%): vertical list of nav links — giant typography (`text-5xl md:text-7xl font-black`) with a `hover:text-indigo-400` transition and a sequential `delay-[Nms]` animation that slides each link in from the bottom using `translate-y-4 opacity-0` → `translate-y-0 opacity-100`. Right side (40%): a minimal sidebar with current time, a 3-line address/contact block, and small social links at the bottom. Close button: top-right X icon. Prevent body scroll when overlay is open using `document.body.style.overflow`. Below the nav, the main content should be full-bleed with no chrome — use a dark or textured background, large centered hero text, and a mouse-follower cursor effect built with `onMouseMove` and CSS `transform: translate()`.