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

@@ -15,7 +15,6 @@ import {
   MenuItem,
   FormControl,
   InputLabel,
-  Grid,
   Card,
   CardContent,
   Divider,
@@ -79,9 +78,9 @@ export default function SettingsPage() {
 
           <Divider sx={{ mb: 4 }} />
 
-          <Grid container spacing={3}>
+          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
             {/* Appearance Settings */}
-            <Grid item xs={12} md={6}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" alignItems="center" mb={3}>
@@ -123,10 +122,10 @@ export default function SettingsPage() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
 
             {/* Language & Notifications */}
-            <Grid item xs={12} md={6}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" alignItems="center" mb={3}>
@@ -175,10 +174,10 @@ export default function SettingsPage() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
 
             {/* Security Settings */}
-            <Grid item xs={12}>
+            <Box sx={{ flex: '1 1 100%' }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" alignItems="center" mb={3}>
@@ -197,8 +196,8 @@ export default function SettingsPage() {
                   </Button>
                 </CardContent>
               </Card>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
 
           {/* Save Button */}
           <Box textAlign="center" mt={4}>