Add locale switcher component and integrate internationalization improvements

- Introduced `LocaleSwitcher` component for language selection with support for locale-aware dropdown and ARIA accessibility.
- Updated layouts (`Header`, `Breadcrumbs`, `Home`) to include the new locale switcher.
- Expanded localization files (`en.json`, `it.json`) with new keys for language switching.
- Adjusted i18n configuration to enhance routing and message imports.
- Updated Jest module mappings to mock new i18n components and utilities.

frontend/jest.config.js

@@ -10,8 +10,10 @@ const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   testEnvironment: 'jest-environment-jsdom',
   moduleNameMapper: {
+    '^next-intl$': '<rootDir>/tests/__mocks__/next-intl.tsx',
     '^next-intl/routing$': '<rootDir>/tests/__mocks__/next-intl-routing.tsx',
     '^next-intl/navigation$': '<rootDir>/tests/__mocks__/next-intl-navigation.tsx',
+    '^@/components/i18n$': '<rootDir>/tests/__mocks__/components-i18n.tsx',
     '^@/(.*)$': '<rootDir>/src/$1',
   },
   testMatch: ['<rootDir>/tests/**/*.test.ts', '<rootDir>/tests/**/*.test.tsx'],

frontend/messages/en.json

@@ -161,5 +161,11 @@
     "maxLength": "Maximum {count} characters allowed",
     "pattern": "Invalid format",
     "passwordMismatch": "Passwords do not match"
+  },
+  "locale": {
+    "en": "English",
+    "it": "Italian",
+    "switchLanguage": "Switch language",
+    "currentLanguage": "Current language"
   }
 }

frontend/messages/it.json

@@ -161,5 +161,11 @@
     "maxLength": "Massimo {count} caratteri consentiti",
     "pattern": "Formato non valido",
     "passwordMismatch": "Le password non corrispondono"
+  },
+  "locale": {
+    "en": "Inglese",
+    "it": "Italiano",
+    "switchLanguage": "Cambia lingua",
+    "currentLanguage": "Lingua corrente"
   }
 }

frontend/src/components/admin/Breadcrumbs.tsx

@@ -25,6 +25,7 @@ export function Breadcrumbs() {
   const pathname = usePathname();
 
   // Generate breadcrumb items from pathname
+  // Note: usePathname() from next-intl returns path WITHOUT locale prefix
   const generateBreadcrumbs = (): BreadcrumbItem[] => {
     const segments = pathname.split('/').filter(Boolean);
     const breadcrumbs: BreadcrumbItem[] = [];

frontend/src/components/home/Header.tsx

@@ -10,6 +10,7 @@ import { Link } from '@/lib/i18n/routing';
 import { Menu, X, Github, Star } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { LocaleSwitcher } from '@/components/i18n';
 
 interface HeaderProps {
   onOpenDemoModal: () => void;
@@ -63,6 +64,9 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
               </span>
             </a>
 
+            {/* Locale Switcher */}
+            <LocaleSwitcher />
+
             {/* CTAs */}
             <Button onClick={onOpenDemoModal} variant="default" size="sm">
               Try Demo
@@ -113,6 +117,11 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
                 </a>
 
                 <div className="border-t pt-4 mt-4 space-y-3">
+                  {/* Locale Switcher */}
+                  <div className="flex justify-center">
+                    <LocaleSwitcher />
+                  </div>
+
                   <Button
                     onClick={() => {
                       setMobileMenuOpen(false);

frontend/src/components/i18n/LocaleSwitcher.tsx

@@ -0,0 +1,76 @@
+/**
+ * LocaleSwitcher Component
+ *
+ * Allows users to switch between available locales (EN, IT).
+ * Maintains the current pathname when switching languages.
+ *
+ * Features:
+ * - Dropdown menu with available locales
+ * - Shows current locale with visual indicator
+ * - Preserves pathname when switching
+ * - Accessible with proper ARIA labels
+ * - Translated labels using next-intl
+ */
+
+'use client';
+
+import { useLocale, useTranslations } from 'next-intl';
+import { usePathname, useRouter, type Locale } from '@/lib/i18n/routing';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Check, Languages } from 'lucide-react';
+import { routing } from '@/lib/i18n/routing';
+import { useTransition } from 'react';
+
+export function LocaleSwitcher() {
+  const t = useTranslations('locale');
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isPending, startTransition] = useTransition();
+
+  const handleLocaleChange = (newLocale: Locale) => {
+    startTransition(() => {
+      // Navigate to the same pathname with the new locale
+      router.replace(pathname, { locale: newLocale });
+    });
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="gap-2"
+          disabled={isPending}
+          aria-label={t('switchLanguage')}
+        >
+          <Languages className="h-4 w-4" aria-hidden="true" />
+          <span className="uppercase text-xs font-semibold">{locale}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {routing.locales.map((loc) => (
+          <DropdownMenuItem
+            key={loc}
+            onClick={() => handleLocaleChange(loc)}
+            className="cursor-pointer gap-2"
+          >
+            <Check
+              className={`h-4 w-4 ${locale === loc ? 'opacity-100' : 'opacity-0'}`}
+              aria-hidden="true"
+            />
+            <span>{t(loc)}</span>
+            <span className="ml-auto text-xs text-muted-foreground uppercase">{loc}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

frontend/src/components/i18n/index.ts

@@ -0,0 +1,6 @@
+/**
+ * i18n Components
+ * Exports internationalization-related components
+ */
+
+export { LocaleSwitcher } from './LocaleSwitcher';

frontend/src/components/layout/Header.tsx

@@ -23,6 +23,7 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Settings, LogOut, User, Shield } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { ThemeToggle } from '@/components/theme';
+import { LocaleSwitcher } from '@/components/i18n';
 
 /**
  * Get user initials for avatar
@@ -92,9 +93,10 @@ export function Header() {
           </nav>
         </div>
 
-        {/* Right side - Theme toggle and user menu */}
+        {/* Right side - Theme toggle, locale switcher, and user menu */}
         <div className="ml-auto flex items-center space-x-2">
           <ThemeToggle />
+          <LocaleSwitcher />
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" className="relative h-10 w-10 rounded-full">

frontend/src/lib/i18n/request.ts

@@ -32,7 +32,7 @@ export default getRequestConfig(async ({ locale }) => {
 
     // Load messages for the requested locale
     // Dynamic import ensures only the requested locale is loaded
-    messages: (await import(`../../messages/${validLocale}.json`)).default,
+    messages: (await import(`../../../messages/${validLocale}.json`)).default,
 
     // Optional: Configure time zone
     // This will be used for date/time formatting