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/components/ui/PageLoader.module.css

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  width: 100%;
+}
+
+.loader {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--md-sys-color-surface-container-highest);
+  border-top-color: var(--md-sys-color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/ui/PageLoader.tsx

@@ -0,0 +1,9 @@
+import styles from './PageLoader.module.css';
+
+export function PageLoader() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.loader} />
+    </div>
+  );
+}

src/components/ui/index.ts

@@ -1,3 +1,4 @@
 export { Button } from './Button';
 export { Card } from './Card';
 export { Input, Textarea } from './Input';
+export { PageLoader } from './PageLoader';