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">
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
-            Se încarcă...
+            <CircularProgress size={48} />
-          </Typography>
+            <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">
+                  <Box>
-                    Se încarcă versetele...
+                    {Array.from({ length: 5 }).map((_, index) => (
-                  </Typography>
+                      <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) => (

app/[locale]/chat/page.tsx

@@ -16,6 +16,8 @@ import {
   IconButton,
   Divider,
   useTheme,
+  CircularProgress,
+  Skeleton,
 } from '@mui/material'
 import {
   Chat,
@@ -27,7 +29,6 @@ import {
   ThumbDown,
   Refresh,
 } from '@mui/icons-material'
-import { Navigation } from '@/components/layout/navigation'
 import { useState, useRef, useEffect } from 'react'
 
 interface ChatMessage {
@@ -134,7 +135,6 @@ export default function ChatPage() {
 
   return (
     <Box>
-      <Navigation />
 
       <Container maxWidth="lg" sx={{ py: 4 }}>
         {/* Header */}
@@ -281,9 +281,12 @@ export default function ChatPage() {
                         <SmartToy />
                       </Avatar>
                       <Paper elevation={1} sx={{ p: 2, borderRadius: 2 }}>
-                        <Typography variant="body1">
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                          Scriu răspunsul...
+                          <CircularProgress size={16} />
-                        </Typography>
+                          <Typography variant="body1">
+                            Scriu răspunsul...
+                          </Typography>
+                        </Box>
                       </Paper>
                     </Box>
                   </Box>

app/[locale]/page.tsx

@@ -63,7 +63,7 @@ export default function Home() {
       {/* Hero Section */}
       <Box
         sx={{
-          background: 'linear-gradient(135deg, #2C5F6B 0%, #5A8A96 100%)',
+          background: 'linear-gradient(135deg, #009688 0%, #00796B 100%)',
           color: 'white',
           py: 8,
           mb: 6,

app/[locale]/prayers/page.tsx

@@ -23,6 +23,8 @@ import {
   ListItemText,
   MenuItem,
   useTheme,
+  CircularProgress,
+  Skeleton,
 } from '@mui/material'
 import {
   Favorite,
@@ -34,7 +36,6 @@ import {
   Share,
   MoreVert,
 } from '@mui/icons-material'
-import { Navigation } from '@/components/layout/navigation'
 import { useState, useEffect } from 'react'
 
 interface PrayerRequest {
@@ -170,7 +171,6 @@ export default function PrayersPage() {
 
   return (
     <Box>
-      <Navigation />
 
       <Container maxWidth="lg" sx={{ py: 4 }}>
         {/* Header */}
@@ -220,7 +220,36 @@ export default function PrayersPage() {
           {/* Prayer Requests */}
           <Grid item xs={12} md={9}>
             {loading ? (
-              <Typography textAlign="center">Se încarcă rugăciunile...</Typography>
+              <Box>
+                {Array.from({ length: 3 }).map((_, index) => (
+                  <Card key={index} sx={{ mb: 3 }}>
+                    <CardContent>
+                      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
+                        <Box sx={{ flexGrow: 1 }}>
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                            <Skeleton variant="text" width="60%" height={32} />
+                            <Skeleton variant="rounded" width={80} height={24} />
+                          </Box>
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+                            <Skeleton variant="circular" width={24} height={24} />
+                            <Skeleton variant="text" width="30%" height={20} />
+                          </Box>
+                          <Skeleton variant="text" width="100%" height={24} />
+                          <Skeleton variant="text" width="90%" height={24} />
+                          <Skeleton variant="text" width="95%" height={24} />
+                        </Box>
+                      </Box>
+                      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <Box sx={{ display: 'flex', gap: 1 }}>
+                          <Skeleton variant="rounded" width={100} height={32} />
+                          <Skeleton variant="rounded" width={100} height={32} />
+                        </Box>
+                        <Skeleton variant="text" width="20%" height={20} />
+                      </Box>
+                    </CardContent>
+                  </Card>
+                ))}
+              </Box>
             ) : (
               <Box>
                 {prayers.map((prayer) => {

app/[locale]/search/page.tsx

@@ -23,6 +23,7 @@ import {
   AccordionDetails,
   useTheme,
   CircularProgress,
+  Skeleton,
 } from '@mui/material'
 import {
   Search,
@@ -32,7 +33,6 @@ import {
   Close,
   History,
 } from '@mui/icons-material'
-import { Navigation } from '@/components/layout/navigation'
 import { useState, useEffect } from 'react'
 
 interface SearchResult {
@@ -175,7 +175,6 @@ export default function SearchPage() {
 
   return (
     <Box>
-      <Navigation />
 
       <Container maxWidth="lg" sx={{ py: 4 }}>
         {/* Header */}
@@ -326,7 +325,7 @@ export default function SearchPage() {
                     disabled={!searchQuery.trim() || loading}
                     sx={{ minWidth: 100 }}
                   >
-                    {loading ? <CircularProgress size={24} /> : 'Caută'}
+                    {loading ? <CircularProgress size={20} color="inherit" /> : 'Caută'}
                   </Button>
                 </Box>
 
@@ -341,7 +340,38 @@ export default function SearchPage() {
             </Card>
 
             {/* Search Results */}
-            {results.length > 0 && (
+            {loading && searchQuery && (
+              <Card>
+                <CardContent>
+                  <Typography variant="h6" gutterBottom>
+                    Se caută...
+                  </Typography>
+                  <List>
+                    {Array.from({ length: 3 }).map((_, index) => (
+                      <ListItem key={index} divider>
+                        <ListItemText
+                          primary={
+                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+                              <Skeleton variant="text" width="40%" height={28} />
+                              <Skeleton variant="rounded" width={100} height={24} />
+                            </Box>
+                          }
+                          secondary={
+                            <Box>
+                              <Skeleton variant="text" width="100%" height={24} />
+                              <Skeleton variant="text" width="90%" height={24} />
+                              <Skeleton variant="text" width="95%" height={24} />
+                            </Box>
+                          }
+                        />
+                      </ListItem>
+                    ))}
+                  </List>
+                </CardContent>
+              </Card>
+            )}
+
+            {results.length > 0 && !loading && (
               <Card>
                 <CardContent>
                   <Typography variant="h6" gutterBottom>

app/globals.css

@@ -18,12 +18,7 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
+  background: white;
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
 }
 
 .verse {

components/chat/floating-chat.tsx

@@ -167,9 +167,9 @@ export default function FloatingChat() {
             bottom: 24,
             right: 24,
             zIndex: 1000,
-            background: 'linear-gradient(45deg, #2C5F6B 30%, #8B7355 90%)',
+            background: 'linear-gradient(45deg, #009688 30%, #00796B 90%)',
             '&:hover': {
-              background: 'linear-gradient(45deg, #1e4148 30%, #6d5a43 90%)',
+              background: 'linear-gradient(45deg, #00695C 30%, #004D40 90%)',
             }
           }}
         >
@@ -199,7 +199,7 @@ export default function FloatingChat() {
           <Box
             sx={{
               p: 2,
-              background: 'linear-gradient(45deg, #2C5F6B 30%, #8B7355 90%)',
+              background: 'linear-gradient(45deg, #009688 30%, #00796B 90%)',
               color: 'white',
               display: 'flex',
               alignItems: 'center',
@@ -412,7 +412,7 @@ export default function FloatingChat() {
                       minWidth: 'auto',
                       px: 2,
                       borderRadius: 2,
-                      background: 'linear-gradient(45deg, #2C5F6B 30%, #8B7355 90%)',
+                      background: 'linear-gradient(45deg, #009688 30%, #00796B 90%)',
                     }}
                   >
                     <Send fontSize="small" />

lib/theme.ts

@@ -5,25 +5,26 @@ export const theme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#2C5F6B', // Deep teal for spiritual feel
+      main: '#009688', // PRIMARY COLOR
-      light: '#5A8A96',
+      light: '#B2DFDB', // LIGHT PRIMARY COLOR
-      dark: '#1A3B42',
+      dark: '#00796B', // DARK PRIMARY COLOR
-      contrastText: '#ffffff',
+      contrastText: '#FFFFFF', // TEXT / ICONS
     },
     secondary: {
-      main: '#8B7355', // Warm brown for earth tones
+      main: '#FFC107', // ACCENT COLOR
-      light: '#B09A7A',
+      light: '#FFECB3',
-      dark: '#5D4D37',
+      dark: '#FF8F00',
-      contrastText: '#ffffff',
+      contrastText: '#212121',
     },
     background: {
       default: '#FAFAFA',
       paper: '#FFFFFF',
     },
     text: {
-      primary: '#1A1A1A',
+      primary: '#212121', // PRIMARY TEXT
-      secondary: '#4A4A4A',
+      secondary: '#757575', // SECONDARY TEXT
     },
+    divider: '#BDBDBD', // DIVIDER COLOR
   },
   typography: {
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',