refactor: routes and implement lazy loading

src/App.jsx

@@ -1,32 +1,35 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { Suspense, lazy } from 'react';
 import Navbar from './components/Navbar';
 import Footer from './components/Footer';
 
-import Home from './pages/Home';
-import TopPicks from './pages/TopPicks';
-import ArtDescription from './pages/ArtDescription';
-import ErrorPage from './pages/Error';
+// Lazy loading of route components
+const Home = lazy(() => import('./pages/Home'));
+const TopPicks = lazy(() => import('./pages/TopPicks'));
+const ArtDescription = lazy(() => import('./pages/ArtDescription'));
+const ErrorPage = lazy(() => import('./pages/Error'));
 
 function App() {
   return (
     <div className="flex flex-col justify-start items-start min-h-screen bg-gray-100">
-      <Router>
+      <Router basename="/artistry-hub/">
         <Navbar />
 
-        {/* Route Definitions */}
-        <Routes>
-          <Route exact path="/artistry-hub/" element={<Home />} />
-          <Route exact path="/artistry-hub/top-picks" element={<TopPicks />} />
-          <Route path="/artistry-hub/art/:id" element={<ArtDescription />} />
-
-          {/* Fallback Error Page for Unmatched Routes */}
-          <Route path="*" element={<ErrorPage />} />
-        </Routes>
+        {/* Suspense fallback during lazy loading */}
+        <Suspense fallback={<div>Loading...</div>}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/top-picks" element={<TopPicks />} />
+            <Route path="/art/:id" element={<ArtDescription />} />
+            <Route path="*" element={<ErrorPage />} />
+          </Routes>
+        </Suspense>
       </Router>
 
       {/* Footer */}
       <Footer />
     </div>
   );
 }
+
 export default App;

src/pages/Home.jsx

@@ -11,7 +11,7 @@ const Home = () => {
           ArtistryHub.
         </header>
         <Link
-          to="/artistry-hub/top-picks"
+          to="/top-picks"
           className="flex items-center text-sm sm:text-lg font-medium text-blue-500 hover:text-blue-600 transition duration-300 ease-in-out"
         >
           Explore Featured Artworks{' '}