feat: implement internationalization and routing for locale-based pages

- Added RootLayout component to handle locale and message loading.
- Created Home page with header, about info, products, and story sections.
- Developed ProductPage for displaying product categories and products.
- Implemented ProductsPage to list product categories with banners.
- Added Projects page with a grid layout for project display.
- Configured server settings for port and host.
- Established navigation and routing for internationalization.
- Set up request handling for locale and message retrieval.
- Defined routing structure for supported locales.
- Created middleware for locale-based routing.
- Defined layout parameters for locale handling.

src/components/layout/navbar/index.tsx

@@ -1,113 +1,33 @@
-// 'use client';
-
-// import images from '@/assets/images/images';
-// import { Icon } from '@/components/uikit/icons';
-// import { t } from '@/locales/translates';
-// import Image from 'next/image';
-// import Link from 'next/link';
-// import { usePathname } from 'next/navigation';
-// import { useState } from 'react';
-
-// export default function Navbar() {
-//   const [open, setOpen] = useState(false);
-//   const pathname = usePathname();
-
-//   const links = [
-//     { href: '/', label: t('pages_home_title') as string },
-//     { href: '/about', label: t('pages_about_title') as string },
-//     { href: '/blog', label: t('pages_contact_title') as string },
-//     { href: '/contact', label: t('pages_contact_title') as string },
-//     { href: '/product', label: t('pages_product_categories_title') as string },
-//     { href: '/project', label: t('pages_projects_title') as string },
-//   ];
-
-//   const linkClass = (href: string) =>
-//     pathname === href ? ' text-red-500 font-semibold' : 'text-white';
-
-//   return (
-//     <nav className="relative z-10 container mx-auto shrink-0 bg-transparent pt-7 pb-3 md:py-11">
-//       <div className="flex items-center justify-between border-b-0 border-white/10 pb-6 md:border-b-[1px]">
-//         <Link href="/" className="h-12 w-auto">
-//           <Image
-//             alt="logo"
-//             src={images.logo}
-//             className="h-full w-auto object-contain"
-//           />
-//         </Link>
-//         <ul className="hidden space-x-6 text-sm md:flex lg:text-base">
-//           {links.map(({ href, label }) => (
-//             <li key={href}>
-//               <Link
-//                 href={href}
-//                 className={`${linkClass(href)} hover:text-primary-light`}
-//               >
-//                 {label}
-//               </Link>
-//             </li>
-//           ))}
-//           <li>
-//             <a className="flex items-center gap-2" href="tel:+098123456789">
-//               <Icon name="phone" className="text-primary" />
-//               <p>+098 123456789</p>
-//             </a>
-//           </li>
-//         </ul>
-
-//         <button
-//           className="text-gray-700 md:hidden"
-//           onClick={() => setOpen(!open)}
-//         >
-//           {open ? (
-//             <Icon name="close" className="text-white" />
-//           ) : (
-//             <Icon name="menu" className="text-white" />
-//           )}
-//         </button>
-//       </div>
-
-//       {open && (
-//         <ul className="mt-2 space-y-2 px-2 md:hidden">
-//           {links.map(({ href, label }) => (
-//             <li key={href}>
-//               <Link
-//                 href={href}
-//                 className={linkClass(href)}
-//                 onClick={() => setOpen(false)}
-//               >
-//                 {label}
-//               </Link>
-//             </li>
-//           ))}
-//         </ul>
-//       )}
-//     </nav>
-//   );
-// }
-
 'use client';
 
 import images from '@/assets/images/images';
 import { Icon } from '@/components/uikit/icons';
 import Image from 'next/image';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname, useParams } from 'next/navigation';
 import { useState } from 'react';
 import HamburgerMenu from '../hamburgerMenu';
-import { t } from '@/locales/translates';
+import { useTranslations } from 'next-intl';
 import routeFactory from '@/assets/constants/routeFactory';
 
 export default function Navbar() {
   const [open, setOpen] = useState(false);
   const pathname = usePathname();
+  const params = useParams();
+  const locale = params.locale as string;
+  const t = useTranslations();
 
+  // Get localized routes
+  const routes = routeFactory(t, locale);
   const links = [
-    routeFactory.home,
-    routeFactory.productCategories,
-    routeFactory.projects,
-    routeFactory.blog,
-    routeFactory.about,
-    routeFactory.contact,
+    routes.home,
+    routes.productCategories,
+    routes.projects,
+    routes.blog,
+    routes.about,
+    routes.contact,
   ];
+
   const linkClass = (href: string) =>
     pathname === href ? 'text-primary font-semibold' : 'text-white';
 
@@ -115,7 +35,7 @@ export default function Navbar() {
     <>
       <nav className="relative z-50 container mx-auto bg-transparent pt-7 pb-3 md:py-11">
         <div className="flex items-center justify-between border-b-0 border-white/10 pb-6 md:border-b">
-          <Link href="/" className="h-12 w-auto">
+          <Link href={`/${locale}`} className="h-12 w-auto">
             <Image
               alt="logo"
               src={images.logo}