Spaces:
Sleeping
Sleeping
File size: 2,356 Bytes
53c9876 | 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 | 'use client';
import { ReactNode } from "react";
import { Activity } from "lucide-react";
import Link from "next/link";
export function AppShell({ children }: { children: ReactNode }) {
return (
<div className="h-screen w-screen bg-[#030305] text-slate-300 flex flex-col relative overflow-hidden">
{/* Cyber Grid Background */}
<div
className="absolute inset-0 pointer-events-none z-0 opacity-15"
style={{
backgroundImage: 'linear-gradient(rgba(0, 243, 255, 0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 243, 255, 0.25) 1px, transparent 1px)',
backgroundSize: '40px 40px',
backgroundPosition: 'center center'
}}
/>
{/* Deep gradient glow */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-4xl h-[400px] bg-cyan-500/10 blur-[120px] rounded-full pointer-events-none z-0" />
{/* Top Navigation */}
<header className="h-[72px] border-b border-cyan-500/20 bg-[#0A0A0F]/80 backdrop-blur-md z-50 flex items-center justify-between px-6 shrink-0 relative shadow-[0_0_20px_rgba(0,243,255,0.05)]">
<Link href="/" className="flex items-center gap-3 text-cyan-400 font-display text-2xl font-bold tracking-[0.25em] hover:text-cyan-300 transition-colors cursor-pointer group">
<div className="relative">
<Activity className="h-7 w-7 group-hover:animate-pulse" />
<div className="absolute inset-0 bg-cyan-400 blur-md opacity-40 group-hover:opacity-80 transition-opacity" />
</div>
HYDROSENSE
</Link>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 text-xs font-display tracking-widest text-green-400 bg-green-500/10 px-3 py-1.5 rounded-full border border-green-500/20">
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
UPLINK SECURE
</div>
</div>
</header>
{/* Main Content Area */}
<main className="flex-1 flex flex-col relative z-10 overflow-hidden">
{children}
</main>
</div>
);
}
|