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]/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>