new title and links

src/app/earthquakes/page.tsx

@@ -0,0 +1,11 @@
+import Navbar from "@/components/navbar";
+
+
+export default function Earthquakes() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>Earthquakes</p>
+        </div>
+    )
+}

src/app/login/page.tsx

@@ -0,0 +1,10 @@
+import Navbar from "@/components/navbar";
+
+export default function User() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>User</p>
+        </div>
+    )
+}

src/app/observatories/page.tsx

@@ -0,0 +1,10 @@
+import Navbar from "@/components/navbar";
+
+export default function Observatories() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>Observatories</p>
+        </div>
+    )
+}

src/app/page.tsx

@@ -11,10 +11,11 @@ return (
             </div>
             <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black/80"></div>
             <div className="flex inset-0 w-full absolute mt-24 float">
-                <p className="mx-auto text-7xl text-white font-bold font-[roboto]">Tremor Tracker</p>
+                <p className="mx-auto text-7xl text-white font-bold font-[roboto]">
+                    <Image height={300} width={750} alt="Title Image" src="/tremortrackertext.png"></Image>
+                </p>
             </div>
         </div>
-
     </main>
 )
 

src/app/shop/page.tsx

@@ -0,0 +1,10 @@
+import Navbar from "@/components/navbar";
+
+export default function Shop() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>Shop</p>
+        </div>
+    )
+}

src/app/warehouse/page.tsx

@@ -0,0 +1,10 @@
+import Navbar from "@/components/navbar";
+
+export default function Warehouse() {
+    return (
+        <div className="w-full h-full">
+            <Navbar></Navbar>
+            <p>Warehouse</p>
+        </div>
+    )
+}

src/components/navbar.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { useState, useEffect, useRef} from "react";
+import { useState, useEffect, useRef } from "react";
 
 export default function Navbar() {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -42,10 +42,26 @@ export default function Navbar() {
                 {/* <p className="m-auto text-sm">Logo</p> */}
             </div>
             <div className="flex">
-                <button className="px-6">Earthquakes</button>
+                <button className="px-6">
-                <button className="px-6">Observatories</button>
+                    <Link href="/earthquakes">
-                <button className="px-6">Warehouse</button>
+                        Earthquakes
-                <button className="px-6">Shop</button>
+                    </Link>
+                </button>
+                <button className="px-6">
+                    <Link href="/observatories">
+                        Observatories
+                    </Link>
+                </button>
+                <button className="px-6">
+                    <Link href="/warehouse">
+                        Warehouse
+                    </Link>    
+                </button>
+                <button className="px-6">
+                    <Link href="/shop">
+                        Shop
+                    </Link>
+                </button>
 
                 <div className="my-auto relative">
                     <button