Add hover/focus accent styles to navbar links

components/site-header.tsx

@@ -11,13 +11,25 @@ export function SiteHeader() {
   return (
     <header className="bg-white/80 backdrop-blur dark:bg-gray-950/80">
       <div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100">
-        <Link href="/" className="font-semibold">
+        <Link
+          href="/"
+          className="font-semibold transition hover:text-accent focus-visible:outline-none focus-visible:text-accent"
+        >
           {siteConfig.title}
         </Link>
         <nav className="flex items-center gap-4 text-sm">
-          <Link href="/blog">Blog</Link>
+          <Link
+            href="/blog"
+            className="transition hover:text-accent focus-visible:outline-none focus-visible:text-accent"
+          >
+            Blog
+          </Link>
           {pages.map((page) => (
-            <Link key={page._id} href={page.url}>
+            <Link
+              key={page._id}
+              href={page.url}
+              className="transition hover:text-accent focus-visible:outline-none focus-visible:text-accent"
+            >
               {page.title}
             </Link>
           ))}