Improve home page layout and typography

- Fix feature cards layout: 2 columns desktop, 1 mobile with consistent sizing
- Add Google Fonts: Merriweather for headings, Lato for body text
- Improve card content structure and spacing
- Center feature cards and stats section for better alignment
- Group all card content (icon, title, description) in single container
- Set fixed card dimensions (400px max width, 280px height)
- Add text overflow handling for descriptions (3 lines max)

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

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

app/[locale]/page.tsx

@@ -135,12 +135,14 @@ export default function Home() {
           {t('features.subtitle')}
         </Typography>
 
-        <Grid container spacing={4}>
+        <Grid container spacing={4} justifyContent="center">
           {features.map((feature, index) => (
-            <Grid item xs={12} sm={6} md={3} key={index}>
+            <Grid item xs={12} md={6} key={index} sx={{ display: 'flex', justifyContent: 'center' }}>
               <Card
                 sx={{
                   height: '100%',
+                  width: '100%',
+                  maxWidth: 400,
                   display: 'flex',
                   flexDirection: 'column',
                   transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
@@ -152,16 +154,37 @@ export default function Home() {
                 }}
                 onClick={() => router.push(`/${locale}${feature.path}`)}
               >
-                <CardContent sx={{ flexGrow: 1, textAlign: 'center', p: 3 }}>
-                  <Box sx={{ mb: 2 }}>
-                    {feature.icon}
+                <CardContent sx={{
+                  flexGrow: 1,
+                  textAlign: 'center',
+                  p: 4,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  height: 280,
+                  width: '100%'
+                }}>
+                  <Box>
+                    <Box sx={{ mb: 2 }}>
+                      {feature.icon}
+                    </Box>
+                    <Typography variant="h5" component="h3" sx={{ fontWeight: 600, mb: 2 }}>
+                      {feature.title}
+                    </Typography>
+                    <Typography
+                      variant="body1"
+                      color="text.secondary"
+                      sx={{
+                        lineHeight: 1.6,
+                        overflow: 'hidden',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 3,
+                        WebkitBoxOrient: 'vertical',
+                      }}
+                    >
+                      {feature.description}
+                    </Typography>
                   </Box>
-                  <Typography variant="h6" component="h3" gutterBottom>
-                    {feature.title}
-                  </Typography>
-                  <Typography variant="body2" color="text.secondary">
-                    {feature.description}
-                  </Typography>
                 </CardContent>
               </Card>
             </Grid>
@@ -172,7 +195,7 @@ export default function Home() {
       {/* Stats Section */}
       <Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
         <Container maxWidth="lg">
-          <Grid container spacing={4} textAlign="center">
+          <Grid container spacing={4} textAlign="center" justifyContent="center">
             <Grid item xs={12} sm={4}>
               <Typography variant="h3" color="primary.main" gutterBottom>
                 66