Migrate all pages from Grid to Box components using flexbox layout

- Migrated search page to use Box with flexbox for responsive layout
- Updated bible reader controls to use Box instead of Grid
- Converted home page hero, features, and stats sections to flexbox
- Removed Grid imports and replaced with Box components across all pages
- Maintained responsive behavior using sx breakpoints and flex properties

app/[locale]/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 import {
   Container,
-  Grid,
   Card,
   CardContent,
   Typography,
@@ -70,8 +69,8 @@ export default function Home() {
         }}
       >
         <Container maxWidth="lg">
-          <Grid container spacing={4} alignItems="center">
-            <Grid item xs={12} md={8}>
+          <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 60%' } }}>
               <Typography variant="h2" component="h1" gutterBottom>
                 {t('hero.title')}
               </Typography>
@@ -113,13 +112,13 @@ export default function Home() {
                   {t('hero.cta.askAI')}
                 </Button>
               </Box>
-            </Grid>
-            <Grid item xs={12} md={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 40%' } }}>
               <Box sx={{ textAlign: 'center' }}>
                 <MenuBook sx={{ fontSize: 120, opacity: 0.8 }} />
               </Box>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
         </Container>
       </Box>
 
@@ -137,9 +136,9 @@ export default function Home() {
           {t('features.subtitle')}
         </Typography>
 
-        <Grid container spacing={4} justifyContent="center">
+        <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
           {features.map((feature, index) => (
-            <Grid item xs={12} md={6} key={index} sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Box key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 16px)' }, display: 'flex', justifyContent: 'center' }}>
               <Card
                 sx={{
                   height: '100%',
@@ -195,34 +194,34 @@ export default function Home() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
           ))}
-        </Grid>
+        </Box>
       </Container>
 
       {/* Stats Section */}
       <Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
         <Container maxWidth="lg">
-          <Grid container spacing={4} textAlign="center" justifyContent="center">
-            <Grid item xs={12} sm={4}>
+          <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', textAlign: 'center', justifyContent: 'center' }}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
               <Typography variant="h3" color="primary.main" gutterBottom>
                 66
               </Typography>
               <Typography variant="h6">{t('stats.books')}</Typography>
-            </Grid>
-            <Grid item xs={12} sm={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
               <Typography variant="h3" color="secondary.main" gutterBottom>
                 31,000+
               </Typography>
               <Typography variant="h6">{t('stats.verses')}</Typography>
-            </Grid>
-            <Grid item xs={12} sm={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
               <Typography variant="h3" color="success.main" gutterBottom>
                 24/7
               </Typography>
               <Typography variant="h6">{t('stats.aiAvailable')}</Typography>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
         </Container>
       </Paper>