add navbar and hero from figma design

2026-06-30 11:35:30 +00:00
parent 1ce42bb16d
commit b77207a225
7 changed files with 147 additions and 9 deletions
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+
+const links = ["About", "Services", "Projects", "News", "Contact"];
+
+export function Navbar() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <nav className="relative z-10 flex items-center justify-between py-6">
+      <span className="font-semibold text-base tracking-[-0.04em] capitalize text-black">
+        H.Studio
+      </span>
+
+      {/* Desktop links */}
+      <div className="hidden md:flex items-center gap-14">
+        {links.map((link) => (
+          <a
+            key={link}
+            href={`#${link.toLowerCase()}`}
+            className="font-semibold text-base tracking-[-0.04em] text-black capitalize hover:opacity-70 transition-opacity"
+          >
+            {link}
+          </a>
+        ))}
+      </div>
+
+      {/* Desktop CTA */}
+      <button className="hidden md:flex items-center justify-center bg-black text-white font-medium text-sm tracking-[-0.035em] px-4 py-3 rounded-3xl hover:bg-neutral-800 transition-colors">
+        Let&apos;s talk
+      </button>
+
+      {/* Mobile hamburger */}
+      <button
+        className="md:hidden p-1"
+        onClick={() => setOpen(!open)}
+        aria-label="Toggle menu"
+      >
+        <img src="/menu.svg" alt="" className="w-6 h-6" />
+      </button>
+
+      {/* Mobile menu */}
+      {open && (
+        <div className="absolute top-full left-0 right-0 bg-white/95 backdrop-blur-sm py-6 flex flex-col gap-4 px-4 md:hidden">
+          {links.map((link) => (
+            <a
+              key={link}
+              href={`#${link.toLowerCase()}`}
+              className="font-semibold text-base tracking-[-0.04em] text-black capitalize"
+              onClick={() => setOpen(false)}
+            >
+              {link}
+            </a>
+          ))}
+          <button className="mt-2 self-start bg-black text-white font-medium text-sm tracking-[-0.035em] px-4 py-3 rounded-3xl">
+            Let&apos;s talk
+          </button>
+        </div>
+      )}
+    </nav>
+  );
+}