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]/bible/reader.tsx

@@ -596,9 +596,9 @@ export default function BibleReaderNew() {
         border: `1px solid ${getThemeStyles().borderColor}`
       }}
     >
-      <Grid container spacing={2} alignItems="center" justifyContent="center">
-        {/* Books Selection */}
-        <Grid item xs={12} sm={4} md={3}>
+      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
+        {/* Books Selection */>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' }, minWidth: { sm: 200, md: 250 } }}>
           <FormControl fullWidth size="small">
             <InputLabel>{t('book')}</InputLabel>
             <Select
@@ -617,10 +617,10 @@ export default function BibleReaderNew() {
               ))}
             </Select>
           </FormControl>
-        </Grid>
+        </Box>
 
         {/* Chapter Selection */}
-        <Grid item xs={12} sm={3} md={2}>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 120, md: 150 } }}>
           <FormControl fullWidth size="small">
             <InputLabel>{t('chapter')}</InputLabel>
             <Select
@@ -646,10 +646,10 @@ export default function BibleReaderNew() {
               ))}
             </Select>
           </FormControl>
-        </Grid>
+        </Box>
 
-        {/* Font Size Controls */}
-        <Grid item xs={12} sm={3} md={2}>
+        {/* Font Size Controls */>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 150 } }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <IconButton
               size="small"
@@ -672,10 +672,10 @@ export default function BibleReaderNew() {
               <Typography variant="h6">A⁺</Typography>
             </IconButton>
           </Box>
-        </Grid>
+        </Box>
 
-        {/* Action Buttons */}
-        <Grid item xs={12} sm={2} md={5}>
+        {/* Action Buttons */>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' } }}>
           <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
             <Tooltip title={t('toggleFullscreen')}>
               <IconButton
@@ -712,9 +712,9 @@ export default function BibleReaderNew() {
               </IconButton>
             </Tooltip>
           </Box>
-        </Grid>
+        </Box>
 
-      </Grid>
+      </Box>
     </Paper>
   )