framer navbar effect

src/app/globals.css

@@ -127,3 +127,28 @@ body {
     );
   }
 }
+
+nav.navbar {
+  background-color: transparent;
+  background-image: radial-gradient(
+    transparent 1px,
+    var(--token-f32baa44-90b8-42a5-8bca-ffba9d95b23a, hsl(var(--background)))
+      1px
+  );
+  background-size: 4px 4px;
+  backdrop-filter: blur(3px);
+  mask: linear-gradient(rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
+  opacity: 1;
+}
+
+nav.navbar::before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--accent);
+  opacity: 0.2;
+}

src/components/navbar.tsx

@@ -18,43 +18,45 @@ function Navbar() {
   const pathname = usePathname();
   const isActive = (path: string) => pathname === path.replace(/\/#/g, "");
   return (
-    <nav className="container p-4 flex justify-between items-center ">
-      <div className="flex items-center gap-4">
-        <Link
-          className="text-sm hidden md:block"
-          href={`mailto:${process.env.NEXT_PUBLIC_EMAIL}`}
-        >
-          {process.env.NEXT_PUBLIC_EMAIL}
-        </Link>
-        {!isActive("/contact") && (
-          <Button asChild size={"sm"} className="hidden md:flex">
-            <Link href={"/contact"}>Work with me</Link>
-          </Button>
-        )}
-      </div>
+    <div className="w-full fixed top-0 right-0 left-0 z-50">
+      <nav className="container p-4 flex justify-between items-center navbar">
+        <div className="flex items-center gap-4">
+          <Link
+            className="text-sm hidden md:block"
+            href={`mailto:${process.env.NEXT_PUBLIC_EMAIL}`}
+          >
+            {process.env.NEXT_PUBLIC_EMAIL}
+          </Link>
+          {!isActive("/contact") && (
+            <Button asChild size={"sm"} className="hidden md:flex">
+              <Link href={"/contact"}>Work with me</Link>
+            </Button>
+          )}
+        </div>
 
-      <Breadcrumb>
-        <BreadcrumbList>
-          {appNavigator.map(({ label, path }, idx) => (
-            <div key={path} className="flex items-center gap-2">
-              <BreadcrumbItem>
-                <BreadcrumbLink
-                  className={cn(isActive(path) && "text-foreground")}
-                  href={path}
-                >
-                  {label}
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              {idx + 1 < appNavigator.length && (
-                <BreadcrumbSeparator>
-                  <span>/</span>
-                </BreadcrumbSeparator>
-              )}
-            </div>
-          ))}
-        </BreadcrumbList>
-      </Breadcrumb>
-    </nav>
+        <Breadcrumb>
+          <BreadcrumbList>
+            {appNavigator.map(({ label, path }, idx) => (
+              <div key={path} className="flex items-center gap-2">
+                <BreadcrumbItem>
+                  <BreadcrumbLink
+                    className={cn(isActive(path) && "text-foreground")}
+                    href={path}
+                  >
+                    {label}
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                {idx + 1 < appNavigator.length && (
+                  <BreadcrumbSeparator>
+                    <span>/</span>
+                  </BreadcrumbSeparator>
+                )}
+              </div>
+            ))}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </nav>
+    </div>
   );
 }
 

src/components/setions/hero.tsx

@@ -14,7 +14,7 @@ function Hero() {
       <div className="text-5xl lg:text-7xl rounded-md group font-bold max-w-xs lg:max-w-md mx-auto text-right  flex flex-col relative cursor-default  ">
         <span
           className={cn(
-            `absolute left-4 lg:left-0 bottom-full z-50 ${textHover}`,
+            `absolute left-4 lg:left-0 bottom-full z-10 ${textHover}`,
             hovered === "text-2" && "text-background blur-sm"
           )}
           onMouseEnter={() => setHovered("text-1")}