feat: enhance internationalization and update application branding

- Updated application title and page titles from "DevHub" to "DevLab" across multiple locales.
- Added new translations for the home, about, contact, and JSON viewer pages to support enhanced user experience.
- Integrated language switcher in the layout for improved accessibility.
- Revised BMI calculator and contact form to reflect new branding and improved user guidance.

src/layout/hero-layout/index.tsx

@@ -1,6 +1,8 @@
 import { Outlet, Link, useLocation } from "react-router-dom"
 import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
 import dayjs from "dayjs"
+import LanguageSwitcher from "@/components/language-switcher"
 
 /**
  * Main application component that serves as the root layout.
@@ -8,6 +10,7 @@ import dayjs from "dayjs"
  */
 export default function HeroLayout() {
   const today = useMemo(() => dayjs(), [])
+  const { t } = useTranslation()
 
   return (
     <div className="h-screen bg-gray-50 flex flex-col overflow-hidden">
@@ -17,29 +20,32 @@ export default function HeroLayout() {
           <div className="flex justify-between items-center h-16">
             <div className="flex items-center">
               <h1 className="text-xl font-semibold text-gray-900">
-                DevLab
+                {t("app.title")}
               </h1>
             </div>
-            <nav className="flex space-x-8">
-              <Link
-                to="/"
-                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-              >
-                Home
-              </Link>
-              <Link
-                to="/about"
-                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-              >
-                About
-              </Link>
-              <Link
-                to="/contact"
-                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-              >
-                Contact
-              </Link>
-            </nav>
+            <div className="flex items-center gap-4">
+              <nav className="flex space-x-8">
+                <Link
+                  to="/"
+                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+                >
+                  {t("navigation.home")}
+                </Link>
+                <Link
+                  to="/about"
+                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+                >
+                  {t("navigation.about")}
+                </Link>
+                <Link
+                  to="/contact"
+                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+                >
+                  {t("navigation.contact")}
+                </Link>
+              </nav>
+              <LanguageSwitcher />
+            </div>
           </div>
         </div>
       </header>
@@ -53,7 +59,7 @@ export default function HeroLayout() {
       <footer className="bg-white border-t shrink-0">
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <p className="text-center text-sm text-gray-500">
-            © 2024-{today.year()} OnixByte. Built with React & TypeScript.
+            {t("app.copyright", { year: today.year() })}
           </p>
         </div>
       </footer>