made a topbar and made bottom bigger

src/App.tsx

@@ -1,5 +1,6 @@
 import './App.css';
 import Navbar from './components/Navbar';
+import TopBar from './components/TopBar';
 import {BrowserRouter, Route, Routes} from 'react-router-dom';
 import Feed from "./pages/Feed.tsx";
 import DreamPage from "./pages/DreamPage.tsx";
@@ -23,7 +24,8 @@ function Profile() {
 export default function App() {
     return (
         <BrowserRouter>
-            <div className="pb-16 min-h-screen">
+            <div className="pb-16 pt-8 min-h-screen">
+                <TopBar/>
                 <div className="mx-auto w-full max-w-lg">
                     <Navbar/>
                     <Routes>

src/assets/logo.svg

@@ -1,13 +1,13 @@
-<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="50%">
             <stop offset="0%" stop-color="#5B68CE" />
             <stop offset="100%" stop-color="#6A449E" />
         </linearGradient>
         <mask id="moonMask">
-            <circle cx="250" cy="100" r="50" fill="white" />
-            <circle cx="275" cy="85" r="45" fill="black" transform="rotate(-30 272 100)" />
+            <circle cx="100" cy="100" r="50" fill="white" />
+            <circle cx="150" cy="10" r="45" fill="black" transform="rotate(-30 272 100)" />
         </mask>
     </defs>
-    <circle cx="250" cy="100" r="50" fill="url(#moonGradient)" mask="url(#moonMask)" />
+    <circle cx="100" cy="100" r="50" fill="url(#moonGradient)" mask="url(#moonMask)" />
 </svg>

src/components/Navbar.tsx

@@ -5,27 +5,27 @@ export default function Navbar() {
 
     return (<>
             <nav
-                className="fixed bottom-0 left-0 right-0 flex justify-around bg-violet-900 py-2 z-10">
+                className="fixed bottom-0 left-0 right-0 flex justify-around bg-violet-900 py-4 z-10">
                 <NavLink to="/">
-                    <FaHome className="w-6 h-6 text-fuchsia-400"/>
+                    <FaHome className="w-8 h-8 text-fuchsia-400"/>
                 </NavLink>
                 <NavLink to="/feed">
-                    <FaList className="w-6 h-6 text-fuchsia-400"/>
+                    <FaList className="w-8 h-8 text-fuchsia-400"/>
                 </NavLink>
-                <div className="w-16"></div>
+                <div className="w-20"></div>
                 <NavLink to="/archive">
-                    <FaArchive className="w-6 h-6 text-fuchsia-400"/>
+                    <FaArchive className="w-8 h-8 text-fuchsia-400"/>
                 </NavLink>
                 <NavLink to="/profile">
-                    <FaUser className="w-6 h-6 text-fuchsia-400"/>
+                    <FaUser className="w-8 h-8 text-fuchsia-400"/>
                 </NavLink>
             </nav>
 
             <NavLink
                 to="/record"
-                className="microphone-button fixed bottom-2 left-1/2 transform -translate-x-1/2 p-4 rounded-full z-20"
+                className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-5 rounded-full z-20"
             >
-                <FaMicrophone className="w-8 h-8 text-white"/>
+                <FaMicrophone className="w-10 h-10 text-white"/>
             </NavLink>
         </>
     );

src/components/TopBar.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import logo from '../assets/logo.svg';
+import text from '../assets/text.svg';
+
+export default function TopBar() {
+  const [visible, setVisible] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      // Hide the topbar when scrolling down, show when scrolling up
+      if (currentScrollY > lastScrollY) {
+        setVisible(false);
+      } else {
+        setVisible(true);
+      }
+
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [lastScrollY]);
+
+  return (
+    <div 
+      className={`fixed top-0 left-0 right-0 bg-violet-900 py-3 px-4 flex items-center transition-transform duration-300 z-20 ${
+        visible ? 'transform-none' : 'transform -translate-y-full'
+      }`}
+    >
+      <div className="flex items-center">
+        <img src={logo} alt="REMind Logo" className="h-16 w-16" />
+        <img src={text} alt="REMind Text" className="h-12 ml-2" />
+      </div>
+    </div>
+  );
+}