From 9762f61a73df413cfd7edf21ec07bbb690815538 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 14:15:51 +0100
Subject: [PATCH] Improved nav

---
 src/app/page.tsx              |  5 +--
 src/components/app/Navbar.tsx | 70 +++++++++++++++++++++--------------
 2 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 361b446..dfb6439 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -68,9 +68,8 @@ const Landing = () => {
               className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-in stagger-2 opacity-0"
               style={{ animationFillMode: "forwards" }}
             >
-              DevRun is competitive programming reimagined. Race the clock
-              through algorithmic challenges, track your splits, and compete for
-              the fastest runs on the global leaderboard.
+              Race the clock through challenges, track your splits, and compete
+              for the fastest runs on the global leaderboard.
             </p>
 
             {/* CTA Buttons */}
diff --git a/src/components/app/Navbar.tsx b/src/components/app/Navbar.tsx
index 4dadf46..d8277b4 100644
--- a/src/components/app/Navbar.tsx
+++ b/src/components/app/Navbar.tsx
@@ -1,7 +1,36 @@
+"use client";
+
 import Link from "next/link";
 import { Timer, Trophy, User, Zap } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+const navs = [
+  {
+    link: "/problems",
+    icon: Zap,
+    name: "Problems",
+  },
+  {
+    link: "/run",
+    icon: Timer,
+    name: "Run",
+  },
+  {
+    link: "/leaderboards",
+    icon: Trophy,
+    name: "Leaderboards",
+  },
+  {
+    link: "/profile",
+    icon: User,
+    name: "Profile",
+  },
+];
 
 const Navbar = () => {
+  const pathname = usePathname();
+
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
       <div className="container mx-auto px-6">
@@ -23,34 +52,19 @@ const Navbar = () => {
 
           {/* Navigation Links */}
           <div className="hidden md:flex items-center gap-1">
-            <Link
-              href="/problems"
-              className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary"
-            >
-              <Zap className="h-4 w-4" />
-              Problems
-            </Link>
-            <Link
-              href="/run"
-              className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary"
-            >
-              <Timer className="h-4 w-4" />
-              Run
-            </Link>
-            <Link
-              href="/leaderboards"
-              className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary"
-            >
-              <Trophy className="h-4 w-4" />
-              Leaderboards
-            </Link>
-            <Link
-              href="/profile"
-              className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary"
-            >
-              <User className="h-4 w-4" />
-              Profile
-            </Link>
+            {navs.map(({ link, icon: Icon, name }) => (
+              <Link
+                key={link}
+                href={link}
+                className={cn(
+                  "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-muted-foreground hover:text-foreground hover:bg-secondary",
+                  pathname === link && "text-primary",
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                {name}
+              </Link>
+            ))}
           </div>
 
           {/* CTA Button */}