first commit

frontend/app/home/components/Navbar.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "ikoncomponents";
+import { useRouter } from "next/dist/client/components/navigation";
+import { Brain, Menu, X } from "lucide-react";
+import { useState } from "react";
+
+export default function Navbar() {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+
+  const handleStartTrial = () => {
+    router.push("/main/overview/dashboard");
+  };
+
+  return (
+    <header className="w-full">
+      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
+        {/* Logo */}
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 font-bold">
+            <Brain size={20} />
+          </div>
+          <span className="text-lg font-semibold">ProjectAI</span>
+        </div>
+
+        {/* Desktop Navigation */}
+        <nav className="hidden md:flex items-center gap-8 text-sm text-gray-400">
+          <Link href="#features" className="hover:text-gray-500 transition">
+            Features
+          </Link>
+          <Link href="#methodology" className="hover:text-gray-500 transition">
+            Methodology
+          </Link>
+          <Link href="#integrations" className="hover:text-gray-500 transition">
+            Integrations
+          </Link>
+          <Link href="#security" className="hover:text-gray-500 transition">
+            Security
+          </Link>
+        </nav>
+
+        {/* Right Actions (Desktop) */}
+        <div className="hidden md:flex items-center gap-4">
+          <Button
+            className="bg-indigo-600 hover:bg-indigo-700"
+            onClick={handleStartTrial}
+          >
+            Get Started →
+          </Button>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <button
+          className="md:hidden text-gray-300"
+          onClick={() => setOpen(!open)}
+        >
+          {open ? <X size={24} /> : <Menu size={24} />}
+        </button>
+      </div>
+
+      {/* Mobile Navigation */}
+      {open && (
+        <div className="md:hidden border-t backdrop-blur">
+          <nav className="flex flex-col gap-4 px-6 py-4 text-sm text-gray-400">
+            <Link href="#features" onClick={() => setOpen(false)}>
+              Features
+            </Link>
+            <Link href="#methodology" onClick={() => setOpen(false)}>
+              Methodology
+            </Link>
+            <Link href="#integrations" onClick={() => setOpen(false)}>
+              Integrations
+            </Link>
+            <Link href="#security" onClick={() => setOpen(false)}>
+              Security
+            </Link>
+
+            <Button
+              className="mt-2 bg-indigo-600 hover:bg-indigo-700"
+              onClick={handleStartTrial}
+            >
+              Get Started →
+            </Button>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}