Update color palette and improve UI aesthetics

- Apply new teal-based color palette (#009688, #00796B, #B2DFDB)
- Update secondary color to accent yellow (#FFC107)
- Replace Material-UI loading states with proper animations and skeletons
- Remove ugly gradient background, replace with clean white
- Update all gradients to use new color scheme
- Improve text colors for better readability (#212121, #757575)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/bible/page.tsx

@@ -19,6 +19,8 @@ import {
   Button,
   Chip,
   useTheme,
+  CircularProgress,
+  Skeleton,
 } from '@mui/material'
 import {
   MenuBook,
@@ -27,7 +29,6 @@ import {
   Bookmark,
   Share,
 } from '@mui/icons-material'
-import { Navigation } from '@/components/layout/navigation'
 import { useState, useEffect } from 'react'
 
 interface BibleVerse {
@@ -115,11 +116,13 @@ export default function BiblePage() {
   if (loading && books.length === 0) {
     return (
       <Box>
-        <Navigation />
         <Container maxWidth="lg" sx={{ py: 4 }}>
-          <Typography variant="h4" textAlign="center">
-            Se încarcă...
-          </Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+            <CircularProgress size={48} />
+            <Typography variant="h6" color="text.secondary">
+              Se încarcă cărțile...
+            </Typography>
+          </Box>
         </Container>
       </Box>
     )
@@ -127,7 +130,6 @@ export default function BiblePage() {
 
   return (
     <Box>
-      <Navigation />
 
       <Container maxWidth="lg" sx={{ py: 4 }}>
         {/* Header */}
@@ -232,9 +234,15 @@ export default function BiblePage() {
 
                 {/* Bible Verses */}
                 {loading ? (
-                  <Typography textAlign="center" color="text.secondary">
-                    Se încarcă versetele...
-                  </Typography>
+                  <Box>
+                    {Array.from({ length: 5 }).map((_, index) => (
+                      <Box key={index} sx={{ mb: 2 }}>
+                        <Skeleton variant="text" width="100%" height={40} />
+                        <Skeleton variant="text" width="90%" height={30} />
+                        <Skeleton variant="text" width="95%" height={30} />
+                      </Box>
+                    ))}
+                  </Box>
                 ) : verses.length > 0 ? (
                   <Box>
                     {verses.map((verse) => (