trying stuff

src/App.tsx

@@ -1,6 +1,6 @@
 import './App.css';
 import Navbar from './components/Navbar';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import {BrowserRouter, Routes, Route} from 'react-router-dom';
 
 function Home() {
     return <div className="p-4">Home Page</div>;
@@ -25,14 +25,16 @@ function Profile() {
 export default function App() {
     return (
         <BrowserRouter>
-            <Navbar />
-            <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/feed" element={<Feed />} />
-                <Route path="/record" element={<Record />} />
-                <Route path="/archive" element={<Archive />} />
-                <Route path="/profile" element={<Profile />} />
-            </Routes>
+            <div className="pb-16">
+                <Navbar/>
+                <Routes>
+                    <Route path="/" element={<Home/>}/>
+                    <Route path="/feed" element={<Feed/>}/>
+                    <Route path="/record" element={<Record/>}/>
+                    <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>