aramjonghu-site/frontend/src/components/Header.jsx

export default function Header() {

  return (
    <header className="bg-ctp-base dark:bg-ctp-crust left-0 bouder-b border-ctp-overlay0 fixed top-0 z-50 w-full">
      <nav className="mx-auto max-w-[80%] flex items-center justify-between p-4 w-full">

        <a href="/" className="flex items-center gap-2">
          <img src="../assets/logo.png" alt="AramJonghu" className="h-8 w-auto" />
        </a>

        <div className="hidden md:flex gap-10">
          <a href="https://aramjonghu.nl/nextcloud" className="text-ctp-text hover:text-ctp-subtext1">Nextcloud</a>
          <a href="https://music.aramjonghu.nl" className="text-ctp-text hover:text-ctp-subtext1">Music</a>
          <a href="https://stream.aramjonghu.nl" className="text-ctp-text hover:text-ctp-subtext1">Stream</a>
        </div>

      </nav>
    </header>
  );
}