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/footer/Footer.tsx

@@ -1,13 +1,25 @@
+'use client';
+
 import images from '@/assets/images/images';
-import { t } from '@/locales/translates';
 import Image from 'next/image';
 import Link from 'next/link';
 import FooterMenuBuilder from './FooterMenuBuilder';
-import { appConstants } from '@/assets/constants';
 import FooterMenuBuilderWrapper from './FooterMenuBuilderWrapper';
 import FooterInfo from './FooterInfo';
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation';
+import { getQuickLinks } from '@/assets/constants/footerMenu/quickLinks.const';
+import { getWhoAreWeLinks } from '@/assets/constants/footerMenu/whoAreWe.const';
+import { TLocales } from '@/locales/translates';
 
 export default function Footer() {
+  const t = useTranslations();
+  const params = useParams();
+  const locale = params.locale as TLocales;
+
+  const quickLinks = getQuickLinks(t, locale);
+  const whoAreWeLinks = getWhoAreWeLinks(t, locale);
+
   return (
     <div className="relative w-full bg-gray-500 pt-24 text-white">
       <div className="absolute inset-0 z-10 flex items-end justify-start">
@@ -21,28 +33,26 @@ export default function Footer() {
       </div>
       <div className="relative z-20 container mx-auto">
         <div className="flex max-w-[920px] flex-col gap-5 pb-10">
-          <p className="text-5xl tracking-tighter">
-            {t('footer_title') as string}
-          </p>
+          <p className="text-5xl tracking-tighter">{t('footer_title')}</p>
           <h5 className="text-base tracking-normal">
-            {t('footer_description') as string}
+            {t('footer_description')}
           </h5>
         </div>
         <div className="flex items-start justify-between gap-8 border-y border-gray-300/50 py-14 max-lg:flex-col-reverse">
           <FooterInfo withLogo className="lg:max-w-[200px]" />
           <div className="grid w-full grid-cols-2 gap-5 md:grid-cols-3 md:gap-10 lg:max-w-3/5">
             <FooterMenuBuilder
-              title={t('footer_links_quick_links') as string}
-              links={appConstants.footerMenu.quickLinks}
+              title={t('footer_links_quick_links')}
+              links={quickLinks}
               className="max-md:text-center"
             />
             <FooterMenuBuilder
-              title={t('footer_links_who_we_are') as string}
-              links={appConstants.footerMenu.whoAreWeLinks}
+              title={t('footer_links_who_we_are')}
+              links={whoAreWeLinks}
               className="max-md:text-center"
             />
             <FooterMenuBuilderWrapper
-              title={t('footer_links_contact') as string}
+              title={t('footer_links_contact')}
               className="max-md:col-span-2 max-md:text-center"
             >
               <div className="flex flex-col gap-4">
@@ -59,7 +69,7 @@ export default function Footer() {
                   info@sample.com
                 </Link>
                 <span className="text-sm tracking-tight text-gray-100 hover:text-gray-200">
-                  {t('footer_links_address') as string}
+                  {t('footer_links_address')}
                 </span>
               </div>
             </FooterMenuBuilderWrapper>
@@ -67,9 +77,7 @@ export default function Footer() {
         </div>
 
         <div className="py-8 lg:py-14">
-          <p className="text-center text-sm">
-            {t('footer_copyright') as string}
-          </p>
+          <p className="text-center text-sm">{t('footer_copyright')}</p>
         </div>
       </div>
     </div>