chore(i18n): use default i18n provider, define LanguageManager component to handle direction and lng

src/App.tsx

@@ -1,10 +1,20 @@
+import { CssBaseline } from '@mui/material';
 import './App.css';
+import { useTranslation } from 'react-i18next';
+import { LanguageManager } from './components/LanguageManager';
 
 function App() {
+  const { t } = useTranslation();
+
   return (
-    <div>
-      <h1>Hello World</h1>
-    </div>
+    <>
+      <CssBaseline />
+      <LanguageManager />
+      <div style={{ padding: '16px' }}>
+        <h1>{t('helloWorld')}</h1>
+        <p>The main content and router will go here.</p>
+      </div>
+    </>
   );
 }