src/components/layout/Navbar.tsx

@@ -0,0 +1,39 @@
+import Button from "@/components/ui/Button";
+
+export default function Navbar() {
+  return (
+    <nav className="fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg px-8 py-3 backdrop-blur-xl bg-white/70 border border-white/40 w-[min(92vw,56rem)]">
+      <div className="flex items-center gap-8 justify-between">
+        <a href="/" className="text-lg font-bold text-foreground flex-shrink-0">
+          SaaSFlow
+        </a>
+        <div className="hidden md:flex items-center gap-8 flex-1 justify-center">
+          <a
+            href="#about"
+            className="text-sm text-foreground hover:text-foreground/70 transition-colors"
+          >
+            About
+          </a>
+          <a
+            href="#features"
+            className="text-sm text-foreground hover:text-foreground/70 transition-colors"
+          >
+            Features
+          </a>
+          <a
+            href="#pricing"
+            className="text-sm text-foreground hover:text-foreground/70 transition-colors"
+          >
+            Pricing
+          </a>
+        </div>
+        <Button
+          text="Get Started"
+          href="#contact"
+          variant="primary"
+          className="flex-shrink-0"
+        />
+      </div>
+    </nav>
+  );
+}