feat(i18n): implement translation basis

components/custom/navbar.tsx

@@ -4,9 +4,11 @@ import { useEffect, useState } from "react"
 import Link from "next/link"
 import { cn } from "@/lib/utils"
 import { ThemeSwitch } from "./theme-switch"
+import { useTranslations } from "next-intl"
 
 export default function Navbar() {
-  const [scrolled, setScrolled] = useState(false)
+  const [scrolled, setScrolled] = useState(false);
+  const t = useTranslations('pages');
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 10)
@@ -38,17 +40,17 @@ export default function Navbar() {
         <ul className="flex items-center gap-8 text-sm text-foreground/60">
           <li>
             <Link href="/" className="hover:text-foreground transition">
-              Home
+              {t('home')}
             </Link>
           </li>
           <li>
             <Link href="/about" className="hover:text-foreground transition">
-              About Me
+              {t('aboutMe')}
             </Link>
           </li>
           <li>
             <Link href="/projects" className="hover:text-foreground transition">
-              Projects
+              {t('projects')}
             </Link>
           </li>
         </ul>