web_client/src/components/Navbar.tsx

import { ShieldCheck } from 'lucide-react';

export const Navbar = () => {
    return (
        <nav className="fixed top-0 w-full z-50 glass border-b border-slate-800">
            <div className="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
                <div className="flex items-center space-x-3">
                    <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center font-bold text-white">
                        <ShieldCheck className="w-6 h-6" />
                    </div>
                    <span className="text-xl font-extrabold tracking-tight text-white">UPIF</span>
                </div>
                <div className="hidden md:flex space-x-8 text-sm text-slate-400">
                    <a href="#thesis" className="hover:text-white transition">The Thesis</a>
                    <a href="#lab" className="hover:text-white transition">Interaction Lab</a>
                    <a href="#integration" className="hover:text-white transition">Docs</a>
                </div>
                <button className="bg-blue-600 px-5 py-2.5 rounded-full text-sm font-semibold hover:bg-blue-700 transition text-white">
                    Request Demo
                </button>
            </div>
        </nav>
    );
};