Add Phase 2 & 3: Web frontend with authentication and tracking features

- Initialize Next.js 14 web application with Material UI and TypeScript
- Implement authentication (login/register) with device fingerprint
- Create mobile-first responsive layout with app shell pattern
- Add tracking pages for feeding, sleep, and diaper changes
- Implement activity history with filtering
- Configure backend CORS for web frontend (port 3030)
- Update backend port to 3020, frontend to 3030
- Fix API response handling for auth endpoints

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

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

maternal-web/app/page.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { Box, Typography, Button, Paper, Grid } from '@mui/material';
+import { AppShell } from '@/components/layouts/AppShell/AppShell';
+import { ProtectedRoute } from '@/components/common/ProtectedRoute';
+import {
+  Restaurant,
+  Hotel,
+  BabyChangingStation,
+  Insights,
+} from '@mui/icons-material';
+import { motion } from 'framer-motion';
+import { useAuth } from '@/lib/auth/AuthContext';
+import { useRouter } from 'next/navigation';
+
+export default function HomePage() {
+  const { user } = useAuth();
+  const router = useRouter();
+  const quickActions = [
+    { icon: <Restaurant />, label: 'Feeding', color: '#FFB6C1', path: '/track/feeding' },
+    { icon: <Hotel />, label: 'Sleep', color: '#B6D7FF', path: '/track/sleep' },
+    { icon: <BabyChangingStation />, label: 'Diaper', color: '#FFE4B5', path: '/track/diaper' },
+    { icon: <Insights />, label: 'Insights', color: '#E6E6FA', path: '/insights' },
+  ];
+
+  return (
+    <ProtectedRoute>
+      <AppShell>
+        <Box>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <Typography variant="h4" gutterBottom fontWeight="600" sx={{ mb: 1 }}>
+              Welcome Back{user?.name ? `, ${user.name}` : ''}! 👋
+            </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+            Track your child's activities and get AI-powered insights
+          </Typography>
+
+          {/* Quick Actions */}
+          <Typography variant="h6" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
+            Quick Actions
+          </Typography>
+          <Grid container spacing={2} sx={{ mb: 4 }}>
+            {quickActions.map((action, index) => (
+              <Grid item xs={6} sm={3} key={action.label}>
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.3, delay: index * 0.1 }}
+                >
+                  <Paper
+                    onClick={() => router.push(action.path)}
+                    sx={{
+                      p: 3,
+                      textAlign: 'center',
+                      cursor: 'pointer',
+                      bgcolor: action.color,
+                      color: 'white',
+                      transition: 'transform 0.2s',
+                      '&:hover': {
+                        transform: 'scale(1.05)',
+                      },
+                    }}
+                  >
+                    <Box sx={{ fontSize: 48, mb: 1 }}>{action.icon}</Box>
+                    <Typography variant="body1" fontWeight="600">
+                      {action.label}
+                    </Typography>
+                  </Paper>
+                </motion.div>
+              </Grid>
+            ))}
+          </Grid>
+
+          {/* Recent Activity */}
+          <Typography variant="h6" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
+            Today's Summary
+          </Typography>
+          <Paper sx={{ p: 3 }}>
+            <Grid container spacing={3}>
+              <Grid item xs={4}>
+                <Box textAlign="center">
+                  <Restaurant sx={{ fontSize: 32, color: 'primary.main', mb: 1 }} />
+                  <Typography variant="h5" fontWeight="600">8</Typography>
+                  <Typography variant="body2" color="text.secondary">Feedings</Typography>
+                </Box>
+              </Grid>
+              <Grid item xs={4}>
+                <Box textAlign="center">
+                  <Hotel sx={{ fontSize: 32, color: 'info.main', mb: 1 }} />
+                  <Typography variant="h5" fontWeight="600">12h</Typography>
+                  <Typography variant="body2" color="text.secondary">Sleep</Typography>
+                </Box>
+              </Grid>
+              <Grid item xs={4}>
+                <Box textAlign="center">
+                  <BabyChangingStation sx={{ fontSize: 32, color: 'warning.main', mb: 1 }} />
+                  <Typography variant="h5" fontWeight="600">6</Typography>
+                  <Typography variant="body2" color="text.secondary">Diapers</Typography>
+                </Box>
+              </Grid>
+            </Grid>
+          </Paper>
+
+          {/* Next Predicted Activity */}
+          <Box sx={{ mt: 4 }}>
+            <Paper sx={{ p: 3, bgcolor: 'primary.light' }}>
+              <Typography variant="body2" color="text.secondary" gutterBottom>
+                Next Predicted Activity
+              </Typography>
+              <Typography variant="h6" fontWeight="600" gutterBottom>
+                Nap time in 45 minutes
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Based on your child's sleep patterns
+              </Typography>
+            </Paper>
+          </Box>
+          </motion.div>
+        </Box>
+      </AppShell>
+    </ProtectedRoute>
+  );
+}