Glassmorphic Nav Menu

import { Component } from "@/components/ui/glassmorphic-nav-menu"
export default function DemoDefault() {
    return (
        <div className="relative w-full min-h-screen bg-[#F0F2F5] overflow-auto">
            {/* Background patterns to show translucency */}
            <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
                <div className="absolute top-20 left-1/4 w-[500px] h-[500px] bg-purple-500 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-blob" />
                <div className="absolute top-20 right-1/4 w-[500px] h-[500px] bg-yellow-500 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-blob animation-delay-2000" />
                <div className="absolute top-1/2 left-1/3 w-[500px] h-[500px] bg-pink-500 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-blob animation-delay-4000" />
                <div className="absolute bottom-20 right-1/3 w-[600px] h-[600px] bg-blue-500 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-blob animation-delay-6000" />
            </div>
            {/* Content to allow scrolling */}
            <div className="relative z-10 max-w-4xl mx-auto p-8 space-y-12">
                <section className="text-center space-y-4 pt-40">
                    <h1 className="text-7xl font-black tracking-tighter text-black uppercase">
                        Glassmorphic Neo-Dock
                    </h1>
                    <p className="text-2xl text-gray-800 max-w-2xl mx-auto font-bold leading-tight">
                        A high-performance navigation menu blending Neo-Brutalist bold strokes with sophisticated glassmorphism.
                        Fluid collapsible states and smooth spring transitions.
                    </p>
                </section>
                <section className="grid grid-cols-1 gap-8">
                    {[
                        { title: "Glassmorphism", text: "The blur effect dynamically samples the background colors, creating a rich, frosted glass aesthetic that feels premium.", color: "bg-blue-400/30 border-blue-400/20" },
                        { title: "Fluid Physics", text: "Interactions feel natural and organic, with spring-based animations that react to the user's input velocity.", color: "bg-purple-400/30 border-purple-400/20" },
                        { title: "Neo-Brutalism", text: "Bold borders and hard shadows create a distinct visual hierarchy that stands out against the soft background elements.", color: "bg-pink-400/30 border-pink-400/20" },
                        { title: "Dynamic Layout", text: "The dock seamlessly adapts to its content, expanding and collapsing with smooth layout transitions.", color: "bg-orange-400/30 border-orange-400/20" },
                        { title: "Accessibility", text: "Built with semantic HTML and keyboard navigation in mind, ensuring a great experience for all users.", color: "bg-green-400/30 border-green-400/20" },
                        { title: "Performance", text: "Optimized for 60fps animations using hardware-accelerated transforms and isolated layout contexts.", color: "bg-yellow-400/30 border-yellow-400/20" }
                    ].map((item, i) => (
                        <div key={i} className={`p-12 ${item.color} backdrop-blur-sm border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rounded-xl transition-transform hover:-translate-y-1`}>
                            <h3 className="text-3xl font-black mb-4 text-black">{item.title}</h3>
                            <p className="text-lg text-gray-900 leading-relaxed font-bold">
                                {item.text}
                            </p>
                        </div>
                    ))}
                </section>
                <div className="h-[20vh]" /> {/* Spacer for scrolling */}
            </div>
            {/* The Dock Component */}
            <Component />
        </div>
    )
}