Add RSVP functionality with dynamic form and slug-based URLs

frontend/src/App.tsx

@@ -5,6 +5,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Container } from '@mui/material';
 import EventList from './components/EventList';
 import EventForm from './components/EventForm';
+import RSVPForm from './components/RSVPForm';
+import './App.css';
 
 const darkTheme = createTheme({
   palette: {
@@ -22,20 +24,30 @@ const darkTheme = createTheme({
   },
 });
 
-function App() {
+const App: React.FC = () => {
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
       <Router>
-        <Container maxWidth="md" sx={{ mt: 4 }}>
-          <Routes>
-            <Route path="/" element={<EventList />} />
-            <Route path="/create" element={<EventForm />} />
-          </Routes>
-        </Container>
+        <div className="min-h-screen bg-gray-100">
+          <header className="bg-white shadow">
+            <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+              <h1 className="text-3xl font-bold text-gray-900">RSVP Manager</h1>
+            </div>
+          </header>
+          <main>
+            <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+              <Routes>
+                <Route path="/" element={<EventList />} />
+                <Route path="/create" element={<EventForm />} />
+                <Route path="/events/:slug" element={<RSVPForm />} />
+              </Routes>
+            </div>
+          </main>
+        </div>
       </Router>
     </ThemeProvider>
   );
-}
+};
 
 export default App;