Merge pull request #265 from enyinnaya1234/fix-262

Fix: Replace Logo text in header with the LyricsFlip Logo

frontend/components/Navbar.jsx

@@ -57,9 +57,12 @@ const Navbar = () => {
   const renderContent = () => (
     <div className="container mx-auto flex items-center justify-between">
       <div className="flex-none">
-        <Link href="#" className="-m-1.5 p-1.5">
+        <Link href="/" className="-m-1.5 p-1.5">
           <span className="sr-only">LyricsFlip</span>
-          <span className="text-3xl font-bold text-white">LOGO</span>
+          <img src="/assets/LyricsFlipLogo.svg"
+           alt="LyricFlip Logo"
+          width="65"
+          />
         </Link>
       </div>
 
@@ -98,7 +101,12 @@ const Navbar = () => {
           <div className="fixed inset-0 bg-black/30 backdrop-blur-sm z-40" />
           <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full max-w-xs overflow-y-auto bg-[#040311] px-6 py-6">
             <div className="flex items-center justify-between">
-              <span className="text-2xl font-bold text-white">LOGO</span>
+              <span className="text-2xl font-bold text-white">
+              <img src="/assets/LyricsFlipLogo.svg"
+                alt="LyricFlip Logo"
+                width="30"
+              />
+              </span>
               <button
                 type="button"
                 onClick={() => setMobileMenuOpen(false)}