New navbar

apps/web/app/(landing)/layout.tsx

@@ -0,0 +1,14 @@
+import Navbar from "@/components/layout/navbar";
+
+export default function LandingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+}

apps/web/app/(landing)/page.tsx

@@ -1,10 +1,11 @@
+import { SinglePointMap } from "@/components/maps/single-point";
 import Image from "next/image";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+    <main className="flex  flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+        <p className="fixed h-screen left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
           Get started by editing&nbsp;
           <code className="font-mono font-bold">app/page.tsx</code>
         </p>
@@ -105,7 +106,8 @@ export default function Home() {
           </h2>
           <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
             Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
+          </p>{" "}
+          <SinglePointMap latitude={73.9857} longitude={43.9857} zoom={15} />
         </a>
       </div>
     </main>

apps/web/app/layout.tsx

@@ -3,6 +3,7 @@ import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
 import type { Metadata } from "next";
 import "./globals.css";
+import Navbar from "@/components/layout/navbar";
 
 export const metadata: Metadata = {
   title: { template: "%s | CallMap", default: "CallMap" },

apps/web/components/layout/navbar.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { useState, useEffect } from "react";
+
+const Navbar = ({}: {}) => {
+  const [scroll, setScroll] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScroll(window.scrollY);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <>
+      <nav
+        className={`fixed top-0 left-0 right-0 h-14 z-50 bg-slate-50 transition duration-300 ${scroll < 50 ? "bg-opacity-0" : "bg-opacity-70 border-b backdrop-blur-md duration-500"}`}
+      />
+      <nav className="fixed left-0 right-0 top-0 z-50 mx-auto flex h-14 items-center w-full max-w-screen-xl justify-between px-2">
+        <h1 className="text-3xl font-semibold">CallMap</h1>
+      </nav>
+    </>
+  );
+};
+
+export default Navbar;