feedback panel(not centered on screen)

src/pages/MainPage.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Button, Container, Box, Typography } from '@mui/material'
+import Feedback from '../components/Feedback'
+
+function MainPage() {
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
+
+  const handleOpenFeedback = () => {
+    setFeedbackOpen(true);
+  };
+
+  const handleCloseFeedback = () => {
+    setFeedbackOpen(false);
+  };
+
+  return (
+    <Container maxWidth="xl">
+      <Box sx={{ mt: 4, textAlign: 'center' }}>
+        <Typography variant="h3" component="h1" gutterBottom>
+          Главная страница
+        </Typography>
+        <Typography variant="body1" paragraph>
+          Это главная страница приложения
+        </Typography>
+        
+        <Button 
+          variant="contained" 
+          onClick={handleOpenFeedback}
+          sx={{ 
+            bgcolor: '#c22d1a', 
+            color: 'white', 
+            py: 1.5, 
+            px: 3,
+            '&:hover': { bgcolor: '#a42517' } 
+          }}
+        >
+          Оставить заявку
+        </Button>
+      </Box>
+      
+      <Feedback open={feedbackOpen} onClose={handleCloseFeedback} />
+    </Container>
+  )
+}
+
+export default MainPage