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]/bookmarks/page.tsx

@@ -16,7 +16,6 @@ import {
   Button,
   Chip,
   Divider,
-  Grid,
   IconButton,
   Alert,
   CircularProgress,
@@ -222,8 +221,8 @@ export default function BookmarksPage() {
           </Box>
 
           {/* Stats */}
-          <Grid container spacing={3} sx={{ mb: 4 }}>
-            <Grid item xs={12} sm={4}>
+          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap', mb: 4 }}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
               <Card variant="outlined">
                 <CardContent sx={{ textAlign: 'center' }}>
                   <Typography variant="h4" color="primary">
@@ -234,8 +233,8 @@ export default function BookmarksPage() {
                   </Typography>
                 </CardContent>
               </Card>
-            </Grid>
-            <Grid item xs={12} sm={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
               <Card variant="outlined">
                 <CardContent sx={{ textAlign: 'center' }}>
                   <Typography variant="h4" color="success.main">
@@ -246,8 +245,8 @@ export default function BookmarksPage() {
                   </Typography>
                 </CardContent>
               </Card>
-            </Grid>
-            <Grid item xs={12} sm={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
               <Card variant="outlined">
                 <CardContent sx={{ textAlign: 'center' }}>
                   <Typography variant="h4" color="warning.main">
@@ -258,8 +257,8 @@ export default function BookmarksPage() {
                   </Typography>
                 </CardContent>
               </Card>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
 
           <Divider sx={{ mb: 3 }} />
 
@@ -309,9 +308,9 @@ export default function BookmarksPage() {
               </Button>
             </Box>
           ) : (
-            <Grid container spacing={3}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
               {filteredBookmarks().map((bookmark) => (
-                <Grid item xs={12} key={bookmark.id}>
+                <Box key={bookmark.id}>
                   <Card variant="outlined" sx={{ transition: 'all 0.2s', '&:hover': { elevation: 2 } }}>
                     <CardContent>
                       <Box display="flex" justifyContent="space-between" alignItems="flex-start">
@@ -391,9 +390,9 @@ export default function BookmarksPage() {
                       </Box>
                     </CardContent>
                   </Card>
-                </Grid>
+                </Box>
               ))}
-            </Grid>
+            </Box>
           )}
         </Paper>
       </Container>