Add internationalization (i18n) support and update UI components

- Introduced a new .cursorrules file outlining i18n best practices for React components, including guidelines for text handling and translation key organization.
- Updated CheckboxInput.scss to enhance checkbox styling.
- Added new translation keys for sign-in titles and subtitles in English, Spanish, and French.
- Enhanced SignInPage and SignInForm components with i18n support, ensuring no hardcoded text is present.
- Improved SignInPage.scss for better layout and visual consistency.
- Established a structured approach for managing translations across the application.

Author: jkestering-modus

.cursorrules

@@ -0,0 +1,30 @@
+# Cursor Rules
+
+## Always Use i18n for Text in React Files
+
+Always use the internationalization (i18n) system for any text displayed to users in React components.
+
+```typescript
+// ❌ AVOID hardcoded text
+<label>Email</label>
+<span>Don't have an account?</span>
+<button>Log in</button>
+
+// ✅ PREFERRED - Use t() function from react-i18next
+<label>{t('label.email', { ns: 'auth' })}</label>
+<span>{t('no-account', { ns: 'auth' })}</span>
+<button>{t('signin', { ns: 'auth' })}</button>
+```
+
+### Translation Key Guidelines:
+- Use namespaces to organize translations (e.g., { ns: 'auth' })
+- Use hierarchical keys with dots for organization (e.g., 'label.email')
+- Ensure all keys are defined in the appropriate translation files
+
+### Common Namespaces:
+- 'common' - app-wide common labels and messages
+- 'auth' - authentication related texts
+- 'errors' - error messages
+- 'validation' - form validation messages
+
+This rule ensures our application supports multiple languages and facilitates future translations. 

frontend/src/common/components/Input/CheckboxInput.scss

@@ -1,3 +1,9 @@
 ion-checkbox.ls-checkbox-input {
   width: 100%;
+  --checkbox-label-justify-content: flex-start;
+  --checkbox-label-padding-start: 0.5rem;
+  
+  &::part(container) {
+    order: -1;
+  }
 }

frontend/src/common/utils/i18n/resources/en/auth.json

@@ -27,6 +27,8 @@
     "verification-code": "Verification Code"
   },
   "signin": "Sign In",
+  "signin.title": "Log in",
+  "signin.subtitle": "Login to access MedReport AI",
   "signup": "Sign Up",
   "signout": "Sign Out",
   "loading": "Loading...",

frontend/src/common/utils/i18n/resources/en/common.json

@@ -1,4 +1,7 @@
 {
+  "app": {
+    "name": "MEDReport AI"
+  },
   "confirm-prompt": "Are you sure?",
   "created": "created",
   "deleted": "deleted",

frontend/src/common/utils/i18n/resources/es/auth.json

@@ -14,5 +14,7 @@
     "remember-me": "Acuérdate de mí",
     "username": "Nombre de usuario"
   },
-  "signin": "Iniciar sesión"
+  "signin": "Iniciar sesión",
+  "signin.title": "Iniciar sesión",
+  "signin.subtitle": "Iniciar sesión para acceder a MEDReport AI"
 }

frontend/src/common/utils/i18n/resources/es/common.json

@@ -75,5 +75,8 @@
     "chat": {
       "title": "Asistente IA"
     }
+  },
+  "app": {
+    "name": "MEDReport AI"
   }
 }

frontend/src/common/utils/i18n/resources/fr/auth.json

@@ -7,12 +7,14 @@
     "part2": "données JSONPlaceholder",
     "part3": "Essayez un nom d'utilisateur comme ",
     "part4": " ou ",
-    "part5": "Vous pouvez utiliser n’importe quelle valeur comme mot de passe."
+    "part5": "Vous pouvez utiliser n'importe quelle valeur comme mot de passe."
   },
   "label": {
     "password": "Mot de passe",
     "remember-me": "Souviens-toi de moi",
     "username": "Nom d'utilisateur"
   },
-  "signin": "Se connecter"
+  "signin": "Se connecter",
+  "signin.title": "Se connecter",
+  "signin.subtitle": "Connectez-vous pour accéder à MEDReport AI"
 }

frontend/src/common/utils/i18n/resources/fr/common.json

@@ -75,5 +75,8 @@
     "chat": {
       "title": "Assistant IA"
     }
+  },
+  "app": {
+    "name": "MEDReport AI"
   }
 }

frontend/src/pages/Auth/SignIn/SignInPage.scss

@@ -1,9 +1,63 @@
 .ls-signin-page {
-  &__container {
-    max-width: 576px;
+  --ion-background-color: #1a233f;
+  
+  &__background {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem 1.5rem;
+  }
+
+  &__logo-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 2.5rem;
+  }
+
+  &__logo {
+    width: 3.5rem;
+    height: auto;
+    margin-right: 0.75rem;
+  }
+  
+  &__logo-text {
+    color: white;
+    font-size: 1.75rem;
+    font-weight: 600;
+  }
+
+  &__card {
+    width: 100%;
+    max-width: 30rem;
+    background-color: white;
+    border-radius: 1.5rem;
+    padding: 2.5rem 2rem;
+    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
+  }
+  
+  &__header {
+    margin-bottom: 2.5rem;
+    
+    h1 {
+      font-size: 2rem;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 0.5rem;
+      margin-top: 0;
+    }
+    
+    p {
+      font-size: 1.125rem;
+      color: #666;
+      margin: 0;
+    }
   }
 
   &__form {
-    margin: 2rem 0;
+    width: 100%;
+    margin: 0;
   }
 }

frontend/src/pages/Auth/SignIn/SignInPage.tsx

@@ -1,12 +1,11 @@
-import { IonContent, IonPage } from '@ionic/react';
+import { IonContent, IonPage, IonImg } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
 
 import './SignInPage.scss';
 import { PropsWithTestId } from 'common/components/types';
 import ProgressProvider from 'common/providers/ProgressProvider';
-import Header from 'common/components/Header/Header';
 import SignInForm from './components/SignInForm';
-import Container from 'common/components/Content/Container';
+import logo from 'assets/logo_ls.png';
 
 /**
  * Properties for the `SignInPage` component.
@@ -24,12 +23,22 @@ const SignInPage = ({ testid = 'page-signin' }: SignInPageProps): JSX.Element =>
   return (
     <IonPage className="ls-signin-page" data-testid={testid}>
       <ProgressProvider>
-        <Header title={t('ionic-playground')} />
-
         <IonContent fullscreen className="ion-padding">
-          <Container className="ls-signin-page__container" fixed>
-            <SignInForm className="ls-signin-page__form" />
-          </Container>
+          <div className="ls-signin-page__background">
+            <div className="ls-signin-page__logo-container">
+              <IonImg src={logo} alt="Logo" className="ls-signin-page__logo" />
+              <span className="ls-signin-page__logo-text">{t('app.name', { ns: 'common' })}</span>
+            </div>
+            
+            <div className="ls-signin-page__card">
+              <div className="ls-signin-page__header">
+                <h1>{t('signin.title', { ns: 'auth' })}</h1>
+                <p>{t('signin.subtitle', { ns: 'auth' })}</p>
+              </div>
+              
+              <SignInForm className="ls-signin-page__form" />
+            </div>
+          </div>
         </IonContent>
       </ProgressProvider>
     </IonPage>