feat(perf): implement route lazy loading for About and Contact pages

- Splits About and Contact pages into separate chunks using React.lazy and Suspense.
- Keeps Home page eager loaded to prevent layout shifts.
- Adds PageLoader component as a fallback for Suspense.
- Reduces initial bundle size by loading secondary pages only when needed.

src/App.tsx

@@ -1,9 +1,16 @@
+import { Suspense, lazy } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { LanguageProvider } from './i18n';
 import { Navbar, Footer, FancyCursor, ScrollToTop } from './components/layout';
-import { Home, About, Contact } from './pages';
+import { Home } from './pages/Home';
+import { PageLoader } from './components/ui';
 import './styles/global.css';
 
+// Lazy load pages to reduce initial bundle size.
+// Home is imported directly to prevent layout shift on initial load.
+const About = lazy(() => import('./pages/About').then(module => ({ default: module.About })));
+const Contact = lazy(() => import('./pages/Contact').then(module => ({ default: module.Contact })));
+
 export function App() {
   return (
     <LanguageProvider>
@@ -11,11 +18,14 @@ export function App() {
         <ScrollToTop />
         <FancyCursor />
         <Navbar />
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/about" element={<About />} />
-          <Route path="/contact" element={<Contact />} />
-        </Routes>
+        {/* Suspense handles the loading state for lazy-loaded routes */}
+        <Suspense fallback={<PageLoader />}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/contact" element={<Contact />} />
+          </Routes>
+        </Suspense>
         <Footer />
       </BrowserRouter>
     </LanguageProvider>