Merge branch 'develop' of git.lumeweb.com:LumeWeb/web3.news into develop

src/components/LayoutHeader.tsx

@@ -1,31 +1,40 @@
 import React from "react"
 import Image from "next/image"
+import Link from "next/link"
 
 type Props = {}
 
 export const Header = ({}: Props) => {
   return (
     <header className="w-full flex flex-row justify-between relative">
-        <div className="flex-1">
+      <div className="flex flex-col">
         <Web3NewsLogo />
-        </div>
+        <div className="relative mt-1">
-        <div className="w-28 h-8 relative">
           <Image
-            className="-right-4 top-0 absolute"
+            className="-right-8 -top-3 absolute"
             width={28}
             height={24}
             src="/lume-logo-sm.png"
             alt=""
           />
-          <span className="left-0 top-[6px] absolute text-white text-opacity-50 text-sm font-normal font-secondary leading-7">
+          <span className="right-0 -top-[6px] absolute text-white text-opacity-50 text-sm font-normal font-secondary leading-7">
             a Lume project
           </span>
         </div>
+      </div>
+      <div className="flex gap-3 font-normal flex-row text-gray-300 rounded">
+        <Link href="/about" className="hover:text-white p-2 px-4 hover:bg-gray-800 rounded">
+          About
+        </Link>
+        <Link href="/donate" className="hover:text-white p-2 px-4 hover:bg-gray-800 rounded">
+          Contribute
+        </Link>
+      </div>
     </header>
   )
-  }
+}
 
-  const Web3NewsLogo = ({ className }: { className?: string }) => {
+const Web3NewsLogo = ({ className }: { className?: string }) => {
   return (
     <svg
       className={className}
@@ -45,6 +54,6 @@ export const Header = ({}: Props) => {
       />
     </svg>
   )
-  }
+}
 
 export default Header