feat: Complete Spanish, French, Portuguese, Chinese localization and add German/Italian support

- Updated all Spanish (es) translation files with comprehensive translations for tracking, AI, family, insights, children, and settings pages
- Updated French (fr), Portuguese (pt), and Chinese (zh) translations to match English structure
- Added German (de) and Italian (it) language support with complete translation files
- Fixed medicine tracker route from /track/medication to /track/medicine
- Updated i18n config to support 7 languages: en, es, fr, pt, zh, de, it
- All tracking pages now fully localized: sleep, feeding, diaper, medicine, activity
- AI assistant interface fully translated with thinking messages and suggested questions
- Family management and insights pages now support all languages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/app/(auth)/onboarding/page.tsx

@@ -15,14 +15,26 @@ import {
   Alert,
   CircularProgress,
   MenuItem,
+  Card,
+  CardActionArea,
+  CardContent,
+  Radio,
+  RadioGroup,
+  FormControlLabel,
+  FormControl,
+  Grid,
 } from '@mui/material';
-import { ArrowBack, ArrowForward, Check } from '@mui/icons-material';
+import { ArrowBack, ArrowForward, Check, Language, Straighten } from '@mui/icons-material';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/auth/AuthContext';
 import { childrenApi } from '@/lib/api/children';
+import { useLocale, MeasurementSystem } from '@/hooks/useLocale';
+import { useTranslation } from '@/hooks/useTranslation';
+import { supportedLanguages } from '@/lib/i18n/config';
+import { usersApi } from '@/lib/api/users';
 
-const steps = ['Welcome', 'Add Child', 'Invite Family', 'Notifications'];
+const steps = ['Welcome', 'Language', 'Measurements', 'Add Child', 'Complete'];
 
 export default function OnboardingPage() {
   const [activeStep, setActiveStep] = useState(0);

maternal-web/app/children/page.tsx

@@ -216,7 +216,9 @@ export default function ChildrenPage() {
                   >
                     <Card
                       sx={{
-                        height: '100%',
+                        height: '280px', // Fixed height for consistency
+                        minHeight: '280px',
+                        width: '100%',
                         display: 'flex',
                         flexDirection: 'column',
                       }}

maternal-web/app/family/page.tsx

@@ -207,7 +207,7 @@ export default function FamilyPage() {
               {/* Family Share Code */}
               {family && (
                 <Grid item xs={12}>
-                  <Card>
+                  <Card sx={{ minHeight: '140px' }}>
                     <CardContent>
                       <Typography variant="h6" component="h2" fontWeight="600" gutterBottom>
                         {t('shareCode.title')}
@@ -241,7 +241,7 @@ export default function FamilyPage() {
 
               {/* Family Members */}
               <Grid item xs={12}>
-                <Card>
+                <Card sx={{ minHeight: '200px' }}>
                   <CardContent>
                     <Typography variant="h6" fontWeight="600" gutterBottom sx={{ mb: 3 }}>
                       {t('members.title', { count: members.length })}

maternal-web/app/page.tsx

@@ -165,7 +165,9 @@ export default function HomePage() {
                     aria-label={t('quickActions.navigateTo', { action: action.label })}
                     sx={{
                       p: 3,
-                      height: '100%',
+                      height: '140px', // Fixed height for consistency
+                      minHeight: '140px', // Ensure minimum height
+                      width: '100%', // Full width of grid container
                       display: 'flex',
                       flexDirection: 'column',
                       alignItems: 'center',
@@ -225,8 +227,10 @@ export default function HomePage() {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
-                        height: '100%',
-                        minHeight: '120px'
+                        justifyContent: 'center',
+                        height: '120px', // Fixed height for consistency
+                        minHeight: '120px',
+                        width: '100%'
                       }}
                     >
                       <Restaurant sx={{ fontSize: 32, color: 'primary.main', mb: 1 }} aria-hidden="true" />
@@ -245,8 +249,10 @@ export default function HomePage() {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
-                        height: '100%',
-                        minHeight: '120px'
+                        justifyContent: 'center',
+                        height: '120px', // Fixed height for consistency
+                        minHeight: '120px',
+                        width: '100%'
                       }}
                     >
                       <Hotel sx={{ fontSize: 32, color: 'info.main', mb: 1 }} aria-hidden="true" />
@@ -267,8 +273,10 @@ export default function HomePage() {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
-                        height: '100%',
-                        minHeight: '120px'
+                        justifyContent: 'center',
+                        height: '120px', // Fixed height for consistency
+                        minHeight: '120px',
+                        width: '100%'
                       }}
                     >
                       <BabyChangingStation sx={{ fontSize: 32, color: 'warning.main', mb: 1 }} aria-hidden="true" />
@@ -287,8 +295,10 @@ export default function HomePage() {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
-                        height: '100%',
-                        minHeight: '120px'
+                        justifyContent: 'center',
+                        height: '120px', // Fixed height for consistency
+                        minHeight: '120px',
+                        width: '100%'
                       }}
                     >
                       <MedicalServices sx={{ fontSize: 32, color: 'error.main', mb: 1 }} aria-hidden="true" />

maternal-web/app/settings/page.tsx

@@ -129,7 +129,7 @@ export default function SettingsPage() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.4 }}
       >
-        <Card sx={{ mb: 3 }}>
+        <Card sx={{ mb: 3, minHeight: '120px' }}>
           <CardContent>
             <Typography variant="h6" component="h2" fontWeight="600" gutterBottom>
               {t('profile.title')}
@@ -165,7 +165,7 @@ export default function SettingsPage() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.4, delay: 0.05 }}
       >
-        <Card sx={{ mb: 3 }}>
+        <Card sx={{ mb: 3, minHeight: '120px' }}>
           <CardContent>
             <Typography variant="h6" component="h2" fontWeight="600" gutterBottom>
               {t('preferences.title')}
@@ -192,7 +192,7 @@ export default function SettingsPage() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.4, delay: 0.1 }}
       >
-        <Card sx={{ mb: 3 }}>
+        <Card sx={{ mb: 3, minHeight: '120px' }}>
           <CardContent>
             <Typography variant="h6" component="h2" fontWeight="600" gutterBottom>
               {t('notifications.title')}
@@ -229,7 +229,7 @@ export default function SettingsPage() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.4, delay: 0.2 }}
       >
-        <Card sx={{ mb: 3 }}>
+        <Card sx={{ mb: 3, minHeight: '120px' }}>
           <CardContent>
             <Typography variant="h6" component="h2" fontWeight="600" gutterBottom>
               {t('appearance.title')}

maternal-web/app/track/page.tsx

@@ -60,7 +60,9 @@ export default function TrackPage() {
               <Grid item xs={12} sm={6} md={3} key={option.title}>
                 <Card
                   sx={{
-                    height: '100%',
+                    height: '180px', // Fixed height for consistency
+                    minHeight: '180px',
+                    width: '100%',
                     bgcolor: option.color,
                     '&:hover': {
                       transform: 'translateY(-4px)',