feat: update NotFound and contact components for improved internationalization support

src/app/[...not_found]/page.tsx

@@ -1,16 +1,24 @@
 import routeFactory from '@/assets/constants/routeFactory';
 import images from '@/assets/images/images';
 import Button from '@/components/uikit/button';
-import { t } from '@/locales/translates';
+import { ILayoutLocaleParams } from '@/models/layout';
+import { getTranslations } from 'next-intl/server';
+
+export default async function NotFound({
+  params,
+}: {
+  params: ILayoutLocaleParams;
+}) {
+  const t = await getTranslations({ locale: params.locale });
+  const routes = routeFactory(t, params.locale);
 
-export default function NotFound() {
   return (
     <div className="container mx-auto my-32 flex flex-col items-center justify-center gap-6">
       <h2 className="text-center text-4xl md:text-[5rem]">
-        {t('pages_notFound_title') as string}
+        {t('pages_notFound_title')}
       </h2>
       <p className="text-center text-xl text-gray-300 md:text-2xl">
-        {t('pages_notFound_description') as string}
+        {t('pages_notFound_description')}
       </p>
       <div>
         <img
@@ -19,12 +27,8 @@ export default function NotFound() {
           className="aspect-square"
         />
       </div>
-      <Button
+      <Button link={routes.home.route()} endIcon="showMore" className="w-fit">
-        link={routeFactory.home.route()}
+        {t('pages_notFound_button')}
-        endIcon="showMore"
-        className="w-fit"
-      >
-        {t('pages_notFound_button') as string}
       </Button>
     </div>
   );

src/assets/constants/routeFactory/index.ts

@@ -38,7 +38,7 @@ const routeFactory: RouteFactory = (t, locale) => ({
   },
   contact: {
     title: t('pages_contact_title'),
-    route: () => `/${locale}/contact`,
+    route: () => `/${locale}/contact-us`,
   },
 });
 

src/components/pages/contact/ContactMeForm.tsx

@@ -1,40 +1,30 @@
+'use client';
+
 import Button from '@/components/uikit/button';
 import FormField from '@/components/uikit/inputs';
-import { t } from '@/locales/translates';
+import { useTranslations } from 'next-intl';
 
 const ContactForm = () => {
+  const t = useTranslations();
+
   return (
     <div className="w-full rounded-4xl bg-white p-4 md:w-1/2">
       <h2 className="mt-8 mb-10 text-5xl text-gray-800">
-        {t('com_contact_title') as string}{' '}
+        {t('com_contact_title')}{' '}
         <span className="text-5xl font-bold">
-          {' '}
+          {t('com_contact_title_bold')}
-          {t('com_contact_title_bold') as string}
         </span>
       </h2>
       <div className="space-y-6">
         <div className="flex flex-col gap-6 md:flex-row md:gap-8">
-          <FormField
+          <FormField type="text" placeholder={t('com_contact_first_name')} />
-            type="text"
+          <FormField type="text" placeholder={t('com_contact_last_name')} />
-            placeholder={t('com_contact_first_name') as string}
-          />
-
-          <FormField
-            type="text"
-            placeholder={t('com_contact_last_name') as string}
-          />
         </div>
-        <FormField
+        <FormField type="email" placeholder={t('com_contact_email')} />
-          type="email"
+        <FormField type="tel" placeholder={t('com_contact_phone')} />
-          placeholder={t('com_contact_email') as string}
+        <FormField type="textarea" placeholder={t('com_contact_textarea')} />
-        />
-        <FormField type="tel" placeholder={t('com_contact_phone') as string} />
-        <FormField
-          type="textarea"
-          placeholder={t('com_contact_textarea') as string}
-        />
 
-        <Button className="w-full">Submit Message</Button>
+        <Button>Submit Message</Button>
       </div>
     </div>
   );

src/components/pages/contact/TouchUs.tsx

@@ -1,22 +1,25 @@
+'use client';
+
 import { Icon } from '@/components/uikit/icons';
-import { t } from '@/locales/translates';
+import { useTranslations } from 'next-intl';
 
 const TouchUs = () => {
+  const t = useTranslations();
+
   return (
     <div className="w-full p-8 md:w-1/2">
       <div className="mb-3.5 flex items-center gap-0.5 text-base">
-        {' '}
         <Icon name="setting" className="text-primary h-4 w-4" />
-        <p>{t('pages_contact_title') as string}</p>
+        <p>{t('pages_contact_title')}</p>
       </div>
       <h1 className="mb-5 text-3xl font-light text-gray-800 md:text-5xl">
-        {t('com_contact_touch_title') as string}{' '}
+        {t('com_contact_touch_title')}{' '}
         <span className="text-3xl font-light md:text-5xl md:font-bold">
-          {t('com_contact_touch_title_bold') as string}
+          {t('com_contact_touch_title_bold')}
         </span>
       </h1>
       <p className="mb-10 text-base font-normal text-gray-600">
-        {t('com_contact_touch_description') as string}
+        {t('com_contact_touch_description')}
       </p>
 
       <div className="flex flex-col justify-between gap-10">
@@ -26,7 +29,7 @@ const TouchUs = () => {
           </div>
           <div>
             <h3 className="font-semibold text-gray-800">
-              {t('com_contact_touch_option_1') as string}
+              {t('com_contact_touch_option_1')}
             </h3>
             <p className="text-gray-600">+44 (0) 20 1234 5678</p>
           </div>
@@ -38,7 +41,7 @@ const TouchUs = () => {
           </div>
           <div>
             <h3 className="font-semibold text-gray-800">
-              {t('com_contact_touch_option_2') as string}
+              {t('com_contact_touch_option_2')}
             </h3>
             <p className="text-gray-600">support@mybusiness.com</p>
           </div>
@@ -50,10 +53,10 @@ const TouchUs = () => {
           </div>
           <div>
             <h3 className="font-semibold text-gray-800">
-              {t('com_contact_touch_option_3') as string}
+              {t('com_contact_touch_option_3')}
             </h3>
             <p className="text-gray-600">
-              {t('com_contact_touch_option_3_description') as string}
+              {t('com_contact_touch_option_3_description')}
             </p>
           </div>
         </div>