Pushing project code

App.tsx

@@ -1,18 +1,17 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
 import Lenis from '@studio-freight/lenis';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
 import Navbar from './components/Navbar';
-import Hero from './components/Hero';
-import Mission from './components/Mission';
-import Services from './components/Services';
-import Process from './components/Process';
-import Features from './components/Features';
-import Blog from './components/Blog';
-import Contact from './components/Contact';
 import Footer from './components/Footer';
 import BackToTop from './components/BackToTop';
+import HomePage from './src/pages/HomePage';
+import AboutPage from './src/pages/AboutPage';
+import ServicesPage from './src/pages/ServicesPage';
+import BlogPage from './src/pages/BlogPage';
+import ContactPage from './src/pages/ContactPage';
 
 // Register GSAP plugins globally
 gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
@@ -22,7 +21,9 @@ const GrainOverlay = () => (
   <div className="fixed inset-0 w-full h-full pointer-events-none z-50 opacity-50 dark:opacity-100 bg-grain mix-blend-overlay"></div>
 );
 
-export default function App() {
+const AppContent: React.FC = () => {
+  const location = useLocation();
+
   useEffect(() => {
     // Initialize Lenis for smooth scrolling
     const lenis = new Lenis({
@@ -44,31 +45,42 @@ export default function App() {
 
     // Use GSAP ticker for smoother animation loop integration
     gsap.ticker.add(ticker);
-    
+
     // Disable lag smoothing to prevent jumps
     gsap.ticker.lagSmoothing(0);
 
+    // Reset scroll on route change
+    lenis.scrollTo(0, { immediate: true });
+
     return () => {
       gsap.ticker.remove(ticker);
       lenis.destroy();
     };
-  }, []);
+  }, [location.pathname]);
 
   return (
     <div className="relative w-full min-h-screen bg-background-light dark:bg-background-dark">
       <GrainOverlay />
       <Navbar />
       <main>
-        <Hero />
-        <Mission />
-        <Services />
-        <Process />
-        <Features />
-        <Blog />
-        <Contact />
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/about" element={<AboutPage />} />
+          <Route path="/services" element={<ServicesPage />} />
+          <Route path="/blog" element={<BlogPage />} />
+          <Route path="/contact" element={<ContactPage />} />
+        </Routes>
       </main>
       <Footer />
       <BackToTop />
     </div>
   );
+};
+
+export default function App() {
+  return (
+    <Router>
+      <AppContent />
+    </Router>
+  );
 }