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]/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) => {