Add next-intl to internationalize our project

components/NavItems/NavItem.tsx

@@ -1,17 +1,21 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 type NavItemProps = {
   item: {
-    label: string;
+    labelKey: string;
     href: string;
   };
 };
 
-export const NavItem: React.FC<NavItemProps> = ({ item: { label, href } }) => {
+export const NavItem: React.FC<NavItemProps> = ({
+  item: { labelKey, href },
+}) => {
   const pathname = usePathname();
+  const t = useTranslations();
 
   const isActive = (path: string) => {
     if (path === "/") return pathname === "/";
@@ -19,12 +23,13 @@ export const NavItem: React.FC<NavItemProps> = ({ item: { label, href } }) => {
   };
 
   const active = isActive(href);
+  const label = t(labelKey);
 
   return (
     <li key={href}>
       <Link
         href={href}
-        className={`hover:text-yellow-500 transition-colors ${active ? "text-gray-100 font-bold" : ""}`}
+        className={`transition-colors hover:text-yellow-500 ${active ? "font-bold text-gray-100" : ""}`}
       >
         {label}
       </Link>