feat: add internationalization support for auth components and pages, including translations for Amharic and English

libs/auth/src/lib/components/AuthShell.tsx

@@ -15,6 +15,7 @@ import {
   type BoxProps,
 } from '@mantine/core';
 import { IconCheck, IconMoon, IconSun } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import { useAuthConfig } from '../AuthConfig';
 
 export function BrandMark({ size = 44, ...boxProps }: BoxProps & { size?: number }) {
@@ -33,6 +34,7 @@ export function BrandMark({ size = 44, ...boxProps }: BoxProps & { size?: number
 }
 
 function ThemeToggle() {
+  const { t } = useTranslation();
   const { setColorScheme } = useMantineColorScheme();
   const computed = useComputedColorScheme('light');
   const isDark = computed === 'dark';
@@ -40,7 +42,7 @@ function ThemeToggle() {
   return (
     <UnstyledButton
       onClick={() => setColorScheme(isDark ? 'light' : 'dark')}
-      aria-label="Toggle theme"
+      aria-label={t('authShell.toggleTheme', 'Toggle theme')}
       style={{
         display: 'flex',
         alignItems: 'center',
@@ -60,28 +62,32 @@ function ThemeToggle() {
   );
 }
 
-const FEATURES = [
-  'Submit applications online, 24/7',
-  'Real-time status tracking & alerts',
-  'Available in English & አማርኛ',
-];
-
 interface AuthShellProps {
   children: ReactNode;
   brandTitle?: string;
   brandSubtitle?: string;
 }
 
-export function AuthShell({
-  children,
-  brandTitle = 'Maritime licensing, made simple.',
-  brandSubtitle = 'Apply for vessel and seafarer licenses, upload documents, and track every application in one secure portal.',
-}: AuthShellProps) {
+export function AuthShell({ children, brandTitle, brandSubtitle }: AuthShellProps) {
+  const { t } = useTranslation();
   const theme = useMantineTheme();
   const { logoUrl } = useAuthConfig();
   const heroGradient = theme.other.heroGradient as string;
   const computed = useComputedColorScheme('light');
   const isDark = computed === 'dark';
+  const resolvedBrandTitle =
+    brandTitle ?? t('authShell.brandTitle', 'Maritime licensing, made simple.');
+  const resolvedBrandSubtitle =
+    brandSubtitle ??
+    t(
+      'authShell.brandSubtitle',
+      'Apply for vessel and seafarer licenses, upload documents, and track every application in one secure portal.',
+    );
+  const FEATURES = [
+    t('authShell.feature1', 'Submit applications online, 24/7'),
+    t('authShell.feature2', 'Real-time status tracking & alerts'),
+    t('authShell.feature3', 'Available in English & አማርኛ'),
+  ];
 
   return (
     <Box
@@ -175,10 +181,10 @@ export function AuthShell({
 
                 <Stack gap={6}>
                   <Title order={2} c="white" fz={rem(28)} lh={1.2} fw={700}>
-                    {brandTitle}
+                    {resolvedBrandTitle}
                   </Title>
                   <Text fz="sm" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
-                    {brandSubtitle}
+                    {resolvedBrandSubtitle}
                   </Text>
                 </Stack>
 
@@ -204,7 +210,7 @@ export function AuthShell({
                 </Stack>
 
                 <Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
-                  © 2026 Ethiopian Maritime Authority
+                  {t('authShell.copyright', '© 2026 Ethiopian Maritime Authority')}
                 </Text>
               </Stack>
             </Box>