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/app/[locale]/contact-us/page.tsx

@@ -0,0 +1,44 @@
+import images from '@/assets/images/images';
+import InnerPageBanner from '@/components/layout/innerPages/banner';
+import ContactMap from '@/components/layout/map';
+import ContactForm from '@/components/pages/contact/ContactMeForm';
+import TouchUs from '@/components/pages/contact/TouchUs';
+import Image from 'next/image';
+import { getTranslations } from 'next-intl/server';
+import { ILayoutLocaleParams } from '@/models/layout';
+
+export default async function Contact({
+  params,
+}: {
+  params: ILayoutLocaleParams;
+}) {
+  const t = await getTranslations({ locale: params.locale });
+
+  return (
+    <main className="flex flex-col items-center justify-between">
+      <InnerPageBanner
+        title={t('pages_contact_title')}
+        imageSrc={images.blogBanner.src}
+      />
+
+      <div className="flex w-full flex-col bg-gray-200 pt-4 md:pt-28">
+        <div className="relative container mx-auto flex w-full flex-col items-stretch overflow-hidden rounded-lg md:flex-row">
+          <TouchUs />
+          <ContactForm />
+        </div>
+        <div className="absolute -bottom-[17.32rem] w-1/2 max-md:hidden md:w-2/5">
+          <Image
+            alt="footer-bg"
+            src={images.factoryVector}
+            className="h-full w-full object-cover"
+          />
+        </div>
+        <div className="mt-4 w-full md:mt-28">
+          <div className="h-64 w-full overflow-hidden rounded-lg bg-gray-200">
+            <ContactMap />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}