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

@@ -12,7 +12,6 @@ import {
   TextField,
   Button,
   Avatar,
-  Grid,
   Card,
   CardContent,
   Divider,
@@ -117,9 +116,9 @@ export default function ProfilePage() {
           <Divider sx={{ mb: 4 }} />
 
           {/* Profile Information */}
-          <Grid container spacing={3}>
+          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
             {/* Personal Information Card */}
-            <Grid item xs={12} md={8}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(66.67% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
@@ -189,10 +188,10 @@ export default function ProfilePage() {
                   )}
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
 
             {/* Account Details Card */}
-            <Grid item xs={12} md={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(33.33% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Typography variant="h6" component="h2" gutterBottom>
@@ -221,8 +220,8 @@ export default function ProfilePage() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
 
           {/* Success/Error Message */}
           {message && (