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/pages/about/TopInfo.tsx

@@ -1,16 +1,24 @@
+'use client';
+
 import routeFactory from '@/assets/constants/routeFactory';
 import images from '@/assets/images/images';
 import AchievementTextBox from '@/components/layout/achievementTextBox';
 import SectionTitle from '@/components/layout/sectionTitle';
 import Button from '@/components/uikit/button';
-import { t } from '@/locales/translates';
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation';
 
 export default function AboutTopInfo() {
+  const t = useTranslations();
+  const params = useParams();
+  const locale = params.locale as string;
+  const routes = routeFactory(t, locale);
+
   const topInfoAchievementTitles = [
-    t('com_about_info_achievements_1') as string,
-    t('com_about_info_achievements_2') as string,
-    t('com_about_info_achievements_3') as string,
-    t('com_about_info_achievements_4') as string,
+    t('com_about_info_achievements_1'),
+    t('com_about_info_achievements_2'),
+    t('com_about_info_achievements_3'),
+    t('com_about_info_achievements_4'),
   ];
 
   return (
@@ -30,7 +38,7 @@ export default function AboutTopInfo() {
             <div className="flex items-center justify-center gap-5 pb-5">
               <span className="text-primary text-5xl">+25</span>
               <span className="text-base text-gray-300">
-                {t('com_about_info_years_experience') as string}
+                {t('com_about_info_years_experience')}
               </span>
             </div>
           </div>
@@ -45,14 +53,14 @@ export default function AboutTopInfo() {
         </div>
         <div className="flex flex-col pt-16 pb-20">
           <SectionTitle
-            title={t('pages_about_title') as string}
-            description={t('com_about_info_title') as string}
-            description_bold={t('com_about_info_title_bold') as string}
+            title={t('pages_about_title')}
+            description={t('com_about_info_title')}
+            description_bold={t('com_about_info_title_bold')}
           />
 
           <div className="mt-5">
             <p className="text-base font-light text-gray-300">
-              {t('com_about_info_description') as string}
+              {t('com_about_info_description')}
             </p>
           </div>
           <div className="mt-10 flex flex-col gap-4">
@@ -61,8 +69,8 @@ export default function AboutTopInfo() {
             ))}
           </div>
           <div className="mt-10">
-            <Button endIcon="showMore" link={routeFactory.contact.route()}>
-              {t('pages_contact_title') as string}
+            <Button endIcon="showMore" link={routes.contact.route()}>
+              {t('pages_contact_title')}
             </Button>
           </div>
         </div>

src/components/pages/home/HomeStorySection.tsx

@@ -1,24 +1,28 @@
+'use client';
+
 import images from '@/assets/images/images';
 import SectionTitle from '@/components/layout/sectionTitle';
-import { t } from '@/locales/translates';
 import Image from 'next/image';
+import { useTranslations } from 'next-intl';
 
 export default function HomeStorySection({
   className = '',
 }: {
   className?: string;
 }) {
+  const t = useTranslations();
+
   const statisticsData = [
     {
-      title: t('com_home_story_projects_count') as string,
+      title: t('com_home_story_projects_count'),
       count: '10K',
     },
     {
-      title: t('com_home_story_customer_count') as string,
+      title: t('com_home_story_customer_count'),
       count: '500',
     },
     {
-      title: t('com_home_story_experience') as string,
+      title: t('com_home_story_experience'),
       count: '25',
     },
   ];
@@ -27,9 +31,9 @@ export default function HomeStorySection({
     <div className={`container mx-auto flex flex-col gap-12 ${className}`}>
       <div className="grid grid-cols-2 gap-10">
         <SectionTitle
-          title={t('com_home_story_title') as string}
-          description={t('com_home_story_slogan') as string}
-          description_bold={t('com_home_story_slogan_bold') as string}
+          title={t('com_home_story_title')}
+          description={t('com_home_story_slogan')}
+          description_bold={t('com_home_story_slogan_bold')}
         />
         <div className="grid grid-cols-2 gap-3">
           {[images.homeBanner, images.aboutImg_1].map((e, i) => (
@@ -53,7 +57,7 @@ export default function HomeStorySection({
         </div>
         <div className="flex flex-col py-8">
           <p className="text-base font-light text-gray-500">
-            {t('com_home_story_description') as string}
+            {t('com_home_story_description')}
           </p>
           <hr className="my-10 text-gray-100/50" />
           <div className="grid grid-cols-3 justify-between gap-1">

src/components/pages/home/Products.tsx

@@ -1,14 +1,22 @@
 import images from '@/assets/images/images';
 import SectionTitle from '@/components/layout/sectionTitle';
-import { t } from '@/locales/translates';
 import type { IProductCategoryCardProps } from '../productCategories/productCategoryCard.d';
 import { getProductCategories } from '@/services/products';
 import Link from 'next/link';
 import routeFactory from '@/assets/constants/routeFactory';
+import { getTranslations } from 'next-intl/server';
+import { ILayoutLocaleParams } from '@/models/layout';
+import { TLocales } from '@/locales/translates';
 
-export default async function HomePageProducts() {
+interface Props {
+  locale: TLocales;
+}
+
+export default async function HomePageProducts({ locale }: Props) {
+  const t = await getTranslations({ locale });
   const productCategories: IProductCategoryCardProps[] =
     await getProductCategories();
+  const routes = routeFactory(t, locale);
 
   return (
     <div className="w-full">
@@ -19,12 +27,12 @@ export default async function HomePageProducts() {
         <div className="absolute inset-0 z-10 bg-black opacity-50" />
         <div className="relative z-20 container mx-auto grid grid-cols-2 gap-28">
           <SectionTitle
-            title={t('pages_product_categories_title') as string}
-            description={t('com_home_products_title') as string}
+            title={t('pages_product_categories_title')}
+            description={t('com_home_products_title')}
             reverseColor
           />
           <h4 className="pt-10 text-base font-extralight tracking-normal text-white">
-            {t('com_home_products_description') as string}
+            {t('com_home_products_description')}
           </h4>
         </div>
       </div>
@@ -32,16 +40,17 @@ export default async function HomePageProducts() {
       <div className="relative top-[-100px] z-20 container mx-auto w-full">
         <div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl md:grid-cols-2 lg:grid-cols-4">
           {productCategories.map((category, index) => (
-            <Link href={routeFactory.products.route(category.id)}>
+            <Link key={category.id} href={routes.products.route(category.id)}>
               <div
-                key={index}
                 className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${index ? 'border-s-[1px] border-gray-100' : ''}`}
               >
                 <h3 className="text-xl font-bold text-gray-500">
                   {category.title}
                 </h3>
                 <p className="text-lg font-light text-gray-400">
-                  {`Includes ${category.typesCount} Products`}
+                  {t('com_products_category_types_count', {
+                    count: category.typesCount,
+                  })}
                 </p>
               </div>
             </Link>

src/components/pages/productCategories/ProductCategoryCard.tsx

@@ -1,9 +1,12 @@
+'use client';
+
 import { Icon } from '@/components/uikit/icons';
 import type { IProductCategoryCardProps } from './productCategoryCard.d';
 import AchievementTextBox from '@/components/layout/achievementTextBox';
-import { t } from '@/locales/translates';
 import Button from '@/components/uikit/button';
 import routeFactory from '@/assets/constants/routeFactory';
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation';
 
 export default function ProductsCategoryCard({
   icon,
@@ -13,6 +16,11 @@ export default function ProductsCategoryCard({
   bestForTitle,
   id,
 }: IProductCategoryCardProps) {
+  const t = useTranslations();
+  const params = useParams();
+  const locale = params.locale as string;
+  const routes = routeFactory(t, locale);
+
   return (
     <div className="relative overflow-hidden rounded-4xl bg-gray-100 p-3 sm:p-6 md:p-10">
       <div className="absolute -end-2 -top-2">
@@ -22,22 +30,18 @@ export default function ProductsCategoryCard({
       <div className="flex flex-col gap-4 pt-32">
         <h2 className="text-xl font-semibold text-gray-500">{title}</h2>
         <AchievementTextBox
-          title={
-            t('com_products_category_types_count', {
-              count: typesCount,
-            }) as string
-          }
+          title={t('com_products_category_types_count', { count: typesCount })}
         />
         <AchievementTextBox title={priceTypeTitle} />
         <AchievementTextBox title={bestForTitle} />
       </div>
       <div className="mt-24 w-auto">
         <Button
-          link={routeFactory.products.route(id)}
+          link={routes.products.route(id)}
           endIcon="showMore"
           className="w-fit"
         >
-          {t('com_products_category_show_all_CTA') as string}
+          {t('com_products_category_show_all_CTA')}
         </Button>
       </div>
     </div>

src/components/pages/productCategories/ProductCategoryCardInProducts.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import AchievementTextBox from '@/components/layout/achievementTextBox';
 import type { IProductCategoryCardProps } from './productCategoryCard.d';
-import { t } from '@/locales/translates';
 import { Icon } from '@/components/uikit/icons';
+import { useTranslations } from 'next-intl';
 
 export default function ProductCategoryCardInProducts({
   productCategory,
@@ -10,6 +12,8 @@ export default function ProductCategoryCardInProducts({
   productCategory: IProductCategoryCardProps;
   className?: string;
 }) {
+  const t = useTranslations();
+
   return (
     <div className="">
       <div
@@ -23,19 +27,15 @@ export default function ProductCategoryCardInProducts({
         </div>
         <div className="flex flex-col gap-5">
           <h1 className="text-2xl font-semibold text-white">
-            {
-              t('com_products_products_category_title', {
-                title: productCategory.title,
-              }) as string
-            }
+            {t('com_products_products_category_title', {
+              title: productCategory.title,
+            })}
           </h1>
           <AchievementTextBox
             reverseColor
-            title={
-              t('com_products_category_types_count', {
-                count: productCategory.typesCount,
-              }) as string
-            }
+            title={t('com_products_category_types_count', {
+              count: productCategory.typesCount,
+            })}
           />
           <AchievementTextBox
             reverseColor