weather&bottom

frontend/src/components/MenuComponent.tsx

@@ -9,7 +9,10 @@ const MainMenu: React.FC<MainMenuProps> = ({ onSectionSelect, employee }) => {
     console.log('🔵 MainMenu компонент рендерится!');
     
     const menuItems = [
-        { id: 'employee-info', title: 'Моя информация', emoji: '📋' },
+        { id: 'employee-info', emoji: '📋' }
+    ];
+
+    const menuItems_2 = [
         { id: 'finance', title: 'Финансы', emoji: '💰' },
         { id: 'medicine', title: 'Медицина', emoji: '🏥' },
         { id: 'trade-union', title: 'Профсоюз', emoji: '🤝' },
@@ -26,16 +29,17 @@ const MainMenu: React.FC<MainMenuProps> = ({ onSectionSelect, employee }) => {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            padding: '40px',
+            padding: '10px',
+            marginTop: '-5vh',
             background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
         }}>
             {employee && (
                 <div style={{
                     color: '#fff',
-                    fontSize: '1.2rem',
+                    fontSize: '1.5rem',
                     marginBottom: '10px',
                 }}>
-                    Здравствуйте, {employee.ima} {employee.famaly}
+                    Приветствуем Вас, {employee.ima} {employee.famaly}
                 </div>
             )}
             <h1 style={{
@@ -49,14 +53,74 @@ const MainMenu: React.FC<MainMenuProps> = ({ onSectionSelect, employee }) => {
 
             <div style={{
                 display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 200px))',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 870px))',
                 gap: '25px',
                 maxWidth: '900px',
                 width: '100%',
                 //height: '100%',
                 justifyContent: 'center',
             }}>
+
                 {menuItems.map((item) => (
+                    <button
+                        key={item.id}
+                        onClick={() => onSectionSelect(item.id)}
+                        style={{
+                            background: 'linear-gradient(135deg, #1b718b 0%, #7ec87b 100%)',
+                            borderRadius: '16px',
+                            padding: '25px 30px',
+                            marginBottom: '25px',
+                            cursor: 'pointer',
+                            transition: 'all 0.3s ease',
+                            boxShadow: '0 4px 20px rgba(198, 231, 212, 0.25)',
+                            display: 'inline-flex',
+                            justifyContent: 'flex-start',
+                            alignItems: 'center',
+                            minHeight: '80px',
+                            fontSize: '6.0rem',
+                        }}
+                        onMouseEnter={(e) => {
+                            e.currentTarget.style.transform = 'scale(1.05)';
+                            e.currentTarget.style.boxShadow = '0 12px 40px rgba(0,0,0,0.2)';
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.transform = 'scale(1)';
+                            e.currentTarget.style.boxShadow = '0 8px 30px rgba(0,0,0,0.12)';
+                        }}
+                    >
+                        <div>{item.emoji}</div>
+                        <span style={{
+                            fontSize: '1rem',
+                            fontWeight: 500,
+                            color: '#2d3436',
+                            textAlign: 'center',
+                        }}>
+                        <div>
+                            <h3 style={{
+                                color: 'white',
+                                fontSize: '25px',
+                                fontWeight: 600,
+                            }}>
+                                Расчетный лист
+                            </h3>
+                        </div>
+                        </span>
+                    </button>
+                ))}
+            </div>
+
+            <div style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 200px))',
+                gap: '15px',
+                maxWidth: '900px',
+                width: '100%',
+                //height: '100%',
+                justifyContent: 'center',
+                marginTop: '15px'
+            }}>
+                
+                {menuItems_2.map((item) => (
                     <button
                         key={item.id}
                         onClick={() => onSectionSelect(item.id)}
@@ -73,7 +137,7 @@ const MainMenu: React.FC<MainMenuProps> = ({ onSectionSelect, employee }) => {
                             cursor: 'pointer',
                             boxShadow: '0 8px 30px rgba(0,0,0,0.12)',
                             minHeight: '140px',
-                            fontSize: '2.5rem',
+                            fontSize: '3.5rem',
                             transition: 'all 0.3s ease',
                         }}
                         onMouseEnter={(e) => {