Enhance homepage with centered layout, larger title, and descriptive text

frontend/src/components/EventList.tsx

@@ -8,7 +8,7 @@ import {
   Typography,
   Grid,
   CardActions,
-  IconButton,
+  Container,
 } from '@mui/material';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -50,19 +50,35 @@ const EventList: React.FC = () => {
 
   return (
     <Box>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 4 }}>
-        <Typography variant="h4" component="h1">
-          Events
+      <Container maxWidth="md" sx={{ textAlign: 'center', mb: 8 }}>
+        <Typography variant="h2" component="h1" sx={{ mb: 4 }}>
+          RSVP Manager
+        </Typography>
+        <Typography variant="h6" component="p" sx={{ mb: 6, color: 'text.secondary' }}>
+          Welcome to RSVP Manager! Create and manage your events with ease. 
+          Organize gatherings, track attendance, and coordinate items that guests can bring. 
+          Perfect for parties, meetings, and any event that needs RSVP coordination.
         </Typography>
         <Button
           variant="contained"
           color="primary"
           onClick={() => navigate('/create')}
+          size="large"
+          sx={{ 
+            py: 2, 
+            px: 6, 
+            fontSize: '1.2rem'
+          }}
         >
           Create Event
         </Button>
-      </Box>
+      </Container>
 
+      {events.length > 0 && (
+        <Box sx={{ mt: 6 }}>
+          <Typography variant="h4" component="h2" sx={{ mb: 4 }}>
+            Current Events
+          </Typography>
           <Grid container spacing={3}>
             {events.map((event) => (
               <Grid item xs={12} key={event.id}>
@@ -119,6 +135,8 @@ const EventList: React.FC = () => {
             ))}
           </Grid>
         </Box>
+      )}
+    </Box>
   );
 };