feat(i18n): add internationalization support with English and German translations

- Integrated i18next for language detection and translation management.
- Added translation files for English and German languages.
- Implemented translation keys for notifications, reminders, and common UI elements.
- Updated main application entry point to include i18n initialization.
- Styled language selection dropdown in settings.
- Enhanced package dependencies to include i18next and react-i18next.

frontend/src/styles.css

@@ -825,6 +825,42 @@ textarea {
   gap: 0.75rem;
 }
 
+.setting-row.language-row {
+  justify-content: flex-start;
+  gap: 1.5rem;
+}
+
+.language-select {
+  width: auto;
+  min-width: 160px;
+  max-width: 200px;
+  padding: 0.6rem 2rem 0.6rem 0.75rem;
+  font-size: 1rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  color: var(--text-primary);
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+}
+
+.language-select:hover {
+  border-color: var(--accent);
+}
+
+.language-select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.language-select option {
+  padding: 0.5rem;
+}
+
 .setting-info {
   flex: 1;
 }