feat: added animations and navbar goodies

src/App.jsx

@@ -1,26 +1,32 @@
 // src/App.jsx
-import React from 'react';
-
+import React, { useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-
 import Header from './components/Header';
 import Footer from './components/Footer';
 import Home from './components/Home';
 import About from './components/About';
 import Roadmap from './components/Roadmap';
 
-const App = () => (
-  <Router>
-    <Header />
-    <main>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/roadmap" element={<Roadmap />} />
-      </Routes>
-    </main>
-    <Footer />
-  </Router>
-);
+const App = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
 
-export default App;
+  const handleMenuToggle = (isOpen) => {
+    setMenuOpen(isOpen);
+  };
+
+  return (
+    <Router>
+      <Header onMenuToggle={handleMenuToggle} />
+      <main className={`page-content ${menuOpen ? 'dropdown-active' : ''}`}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/roadmap" element={<Roadmap />} />
+        </Routes>
+      </main>
+      <Footer />
+    </Router>
+  );
+};
+
+export default App;