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/assets/constants/footerMenu/index.ts

@@ -1,7 +1,19 @@
-import { quickLinks } from './quickLinks.const';
-import { whoAreWeLinks } from './whoAreWe.const';
+'use client';
 
-export const footerMenu = {
-  quickLinks,
-  whoAreWeLinks,
-};
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation';
+import { getQuickLinks } from '@/assets/constants/footerMenu/quickLinks.const';
+
+import { getWhoAreWeLinks } from './whoAreWe.const';
+import { TLocales } from '@/locales/translates';
+
+export default function FooterMenu() {
+  const t = useTranslations();
+  const { locale } = useParams();
+  const quickLinks = getQuickLinks(t, locale as TLocales);
+  const whoAreWeLinks = getWhoAreWeLinks(t, locale as TLocales);
+  return {
+    quickLinks,
+    whoAreWeLinks,
+  };
+}

src/assets/constants/footerMenu/quickLinks.const.ts

@@ -1,16 +1,19 @@
 import routeFactory from '../routeFactory';
 
-export const quickLinks = [
-  {
-    title: routeFactory.home.title,
-    link: routeFactory.home.route(),
-  },
-  {
-    title: routeFactory.productCategories.title,
-    link: routeFactory.productCategories.route(),
-  },
-  {
-    title: routeFactory.projects.title,
-    link: routeFactory.projects.route(),
-  },
-] as any[];
+export function getQuickLinks(t: (key: string) => string, locale: string) {
+  const routes = routeFactory(t, locale);
+  return [
+    {
+      title: routes.home.title,
+      link: routes.home.route(),
+    },
+    {
+      title: routes.productCategories.title,
+      link: routes.productCategories.route(),
+    },
+    {
+      title: routes.projects.title,
+      link: routes.projects.route(),
+    },
+  ];
+}

src/assets/constants/footerMenu/whoAreWe.const.ts

@@ -1,12 +1,15 @@
 import routeFactory from '../routeFactory';
 
-export const whoAreWeLinks = [
-  {
-    title: routeFactory.about.title,
-    link: routeFactory.about.route(),
-  },
-  {
-    title: routeFactory.contact.title,
-    link: routeFactory.contact.route(),
-  },
-] as any[];
+export function getWhoAreWeLinks(t: (key: string) => string, locale: string) {
+  const routes = routeFactory(t, locale);
+  return [
+    {
+      title: routes.about.title,
+      link: routes.about.route(),
+    },
+    {
+      title: routes.contact.title,
+      link: routes.contact.route(),
+    },
+  ];
+}

src/assets/constants/index.ts

@@ -1,4 +1,4 @@
-import { footerMenu } from './footerMenu';
+import footerMenu from './footerMenu';
 import routeFactory from './routeFactory';
 import socials from './socials';
 

src/assets/constants/routeFactory/index.ts

@@ -1,32 +1,45 @@
-import { t, translates } from '@/locales/translates';
+type RouteFactory = (
+  t: (key: string) => string,
+  locale: string,
+) => {
+  home: { title: string; route: () => string };
+  productCategories: { title: string; route: () => string };
+  products: { title: string; route: (productId: string) => string };
+  projects: { title: string; route: () => string };
+  about: { title: string; route: () => string };
+  blog: { title: string; route: () => string };
+  contact: { title: string; route: () => string };
+};
 
-export default {
+const routeFactory: RouteFactory = (t, locale) => ({
   home: {
-    title: t('pages_home_title') as string,
-    route: () => '/',
+    title: t('pages_home_title'),
+    route: () => `/${locale}`,
   },
   productCategories: {
-    title: t('pages_product_categories_title') as string,
-    route: () => '/product-categories',
+    title: t('pages_product_categories_title'),
+    route: () => `/${locale}/product-categories`,
   },
   products: {
-    title: t('pages_products_title') as string,
-    route: (productId: string) => `/product-categories/${productId}`,
+    title: t('pages_products_title'),
+    route: (productId: string) => `/${locale}/product-categories/${productId}`,
   },
   projects: {
-    title: t('pages_projects_title') as string,
-    route: () => '/projects',
+    title: t('pages_projects_title'),
+    route: () => `/${locale}/projects`,
   },
   about: {
-    title: t('pages_about_title') as string,
-    route: () => '/about-us',
+    title: t('pages_about_title'),
+    route: () => `/${locale}/about-us`,
   },
   blog: {
-    title: t('pages_blog_title') as string,
-    route: () => '/blog-us',
+    title: t('pages_blog_title'),
+    route: () => `/${locale}/blog-us`,
   },
   contact: {
-    title: t('pages_contact_title') as string,
-    route: () => '/contact',
+    title: t('pages_contact_title'),
+    route: () => `/${locale}/contact`,
   },
-};
+});
+
+export default routeFactory;