Navbar update to match figma

src/app/components/NavBar.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import Image from "next/image";
-import { FaRegMoon } from "react-icons/fa6";
+import Link from "next/link";
 
 // TODO: theme switching
 
 export function Navbar() {
   return (
-    <div className="col-span-12 navbar">
-      <div className="navbar-start">
-        <a
+    <div className="col-span-12 !py-0 px-3 navbar h-20">
+      <div className="flex-none">
+        <Link
           href="/"
-          className="btn btn-ghost hover:bg-transparent no-underline text-xl p-0"
+          className="btn btn-ghost hover:bg-transparent no-underline hover:!no-underline text-xl join-item px-3"
         >
           <Image
             src="/logo_icon.svg"
@@ -19,18 +19,22 @@ export function Navbar() {
             height={40}
             className="!my-0"
           />
-          <span className="xs:invisible sm:visible uppercase">DeXter</span>
-        </a>
+          <span className="ml-6 pt-1 xs:invisible sm:visible hover:text-accent uppercase">
+            DeXter
+          </span>
+        </Link>
       </div>
-
-      <div className="navbar-end">
-        <div
-          className="btn mx-2 border-none"
-          style={{ height: "40px", minHeight: "40px" }}
-        >
-          <FaRegMoon className="h-6 w-6 text-secondary-content" />
+      <div className="flex-1 px-2 mx-2">
+        <div className="items-stretch hidden lg:flex">
+          <Link
+            className="btn btn-lg h-20 btn-ghost hover:!no-underline pt-2 border-t-0 border-x-0 border-b-4 border-transparent hover:border-accent hover:text-accent uppercase"
+            href="/"
+          >
+            Trade
+          </Link>
         </div>
-
+      </div>
+      <div className="navbar-end">
         <radix-connect-button></radix-connect-button>
       </div>
     </div>

src/app/landing/page.tsx

@@ -0,0 +1,3 @@
+export default function Landing() {
+  return <div className="col-span-full p-4">Landing</div>;
+}

src/app/markets/page.tsx

@@ -0,0 +1,3 @@
+export default function Markets() {
+  return <div className="col-span-full p-4">Markets</div>;
+}

src/app/trade/page.tsx

@@ -0,0 +1,3 @@
+export default function Markets() {
+  return <div className="col-span-full p-4">Trade</div>;
+}