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>