diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..2137a9b
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import Header from './components/Header';
+import Hero from './components/Hero';
+import About from './components/About';
+import History from './components/History';
+import Gallery from './components/Gallery';
+import Events from './components/Events';
+import Contact from './components/Contact';
+import Footer from './components/Footer';
+
+function App() {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 60);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      <Header scrolled={scrolled} />
+      <main>
+        <Hero />
+        <About />
+        <History />
+        <Gallery />
+        <Events />
+        <Contact />
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default App;