trying stuff

src/App.tsx

@@ -25,6 +25,7 @@ function Profile() {
 export default function App() {
     return (
         <BrowserRouter>
+            <div className="pb-16">
                 <Navbar/>
                 <Routes>
                     <Route path="/" element={<Home/>}/>
@@ -33,6 +34,7 @@ export default function App() {
                     <Route path="/archive" element={<Archive/>}/>
                     <Route path="/profile" element={<Profile/>}/>
                 </Routes>
+            </div>
         </BrowserRouter>
     );
 }

src/components/Navbar.tsx

@@ -2,10 +2,19 @@ import { NavLink } from 'react-router-dom';
 
 export default function Navbar() {
     const linkClasses = ({ isActive }: { isActive: boolean }) =>
-        isActive ? 'text-blue-600 font-semibold' : 'text-gray-600';
+        isActive
+            ? 'text-blue-600 font-semibold'
+            : 'text-gray-600';
 
     return (
-        <nav className="flex justify-center gap-8 bg-gray-100 py-4">
+        <nav className="
+      fixed bottom-0 left-0 right-0   /* pin to bottom */
+      flex justify-around             /* evenly spaced links */
+      bg-white border-t border-gray-200  /* top border for separation */
+      py-2                            /* vertical padding */
+      shadow-lg                       /* subtle drop shadow */
+      sm:hidden                       /* hide on small screens? remove if not needed */
+    ">
             <NavLink to="/" className={linkClasses}>
                 Home
             </NavLink>