feedback panel(not centered on screen)

src/components/Header.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { 
+  AppBar, 
+  Toolbar, 
+  Typography, 
+  Button, 
+  Box, 
+  Container,
+  IconButton,
+  Stack
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import PhoneIcon from '@mui/icons-material/Phone';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import TelegramIcon from '@mui/icons-material/Telegram';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp';
+
+// Стилизованная кнопка для "Оставить заявку"
+const RequestButton = styled(Button)(({ theme }) => ({
+  backgroundColor: '#c22d1a',
+  color: 'white',
+  borderRadius: '4px',
+  padding: '10px 20px',
+  '&:hover': {
+    backgroundColor: '#a42517',
+  },
+}));
+
+// Стилизованный логотип
+const Logo = styled('img')({
+  height: '40px',
+  marginRight: '10px',
+});
+
+const Header = () => {
+  return (
+    <>
+      <AppBar position="static" color="default" elevation={0} sx={{ backgroundColor: 'white' }}>
+        <Container maxWidth="xl">
+          <Toolbar disableGutters>
+            {/* Логотип и текст */}
+            <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
+              <Logo src="/logo.svg" alt="Логотип" />
+              <Typography variant="body2" color="text.primary" sx={{ maxWidth: 250, lineHeight: 1.2 }}>
+                Автомобили из Европы, США, Китая, и Кореи
+              </Typography>
+            </Box>
+            
+            {/* Время работы */}
+            <Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}>
+              <AccessTimeIcon sx={{ mr: 1, color: 'primary.main' }} />
+              <Typography variant="body2">
+                Ежедневно: с 9:00 до 20:00
+              </Typography>
+            </Box>
+            
+            {/* Номер телефона */}
+            <Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}>
+              <PhoneIcon sx={{ mr: 1, color: 'primary.main' }} />
+              <Box>
+                <Typography variant="body2" color="text.secondary">
+                  Номер телефона
+                </Typography>
+                <Typography variant="body1" fontWeight="bold">
+                  +7 927 853 3979
+                </Typography>
+              </Box>
+            </Box>
+            
+            {/* Кнопка заявки */}
+            <RequestButton variant="contained">
+              Оставить заявку
+            </RequestButton>
+            
+            {/* Социальные сети */}
+            <Stack direction="row" spacing={1} sx={{ ml: 2 }}>
+              <IconButton sx={{ border: '1px solid #e0e0e0' }}>
+                <img src="/vk-icon.svg" alt="VK" width="24" height="24" />
+              </IconButton>
+              <IconButton sx={{ border: '1px solid #e0e0e0' }}>
+                <WhatsAppIcon color="success" />
+              </IconButton>
+              <IconButton sx={{ border: '1px solid #e0e0e0' }}>
+                <TelegramIcon color="primary" />
+              </IconButton>
+            </Stack>
+          </Toolbar>
+        </Container>
+      </AppBar>
+      
+      {/* Навигационное меню */}
+      <Box sx={{ borderBottom: 1, borderColor: 'divider', backgroundColor: 'white' }}>
+        <Container maxWidth="xl">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            {['О нас', 'В наличии', 'Этапы работы', 'Отзывы', 'Калькулятор', 'Команда', 'Доставленные авто', 'Контакты'].map((item) => (
+              <Button key={item} sx={{ color: 'text.primary', py: 1.5 }}>
+                {item}
+              </Button>
+            ))}
+          </Box>
+        </Container>
+      </Box>
+    </>
+  );
+};
+
+export default Header;