Holographic Card

import HolographicCard from "@/components/ui/holographic-card";

export default function DemoOne() {
  return (
    <main className="relative min-h-screen w-full flex flex-col items-center justify-center bg-neutral-950 overflow-hidden selection:bg-blue-500/30">
      
      {/* 1. Global Ambient Glow (Background Lighting) */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-blue-500/20 blur-[120px] rounded-full pointer-events-none" />
      <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-purple-500/10 blur-[100px] rounded-full pointer-events-none" />

      {/* 2. Global Grid Pattern (Matches the card's internal grid) */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />

      {/* 3. Content Container */}
      <div className="relative z-10 container mx-auto px-4 flex flex-col items-center justify-center gap-12">
        
        {/* Hero Text to provide context */}
        <div className="text-center space-y-4">
          <div className="inline-block rounded-full bg-white/5 border border-white/10 px-3 py-1 text-xs text-neutral-400 mb-2">
            v2.0 System Online
          </div>
          <h1 className="text-4xl md:text-7xl font-bold tracking-tighter text-white bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400">
            Holographic <br /> <span className="text-blue-500">Security</span>
          </h1>
          <p className="text-neutral-400 max-w-md mx-auto text-sm md:text-lg leading-relaxed">
            Experience the next generation of biometrics. <br/> Interact with the enclave below.
          </p>
        </div>

        {/* The Card Component - Scaled up for impact */}
        <div className="transform-gpu scale-110 md:scale-125">
           {/* If DemoPage has its own background/padding, this wrapper isolates it */}
           <div className="[&>div]:bg-transparent [&>div]:p-0 [&>div]:min-h-0">
             <HolographicCard />
           </div>
        </div>

      </div>
    </main>
  );
}