Initial commit: UP Parivaar Dallas site

2026-07-23 20:08:08 +05:30
commit 9a42e8b6e5
128 changed files with 8409 additions and 0 deletions
@@ -0,0 +1,103 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import Logo from "./Logo";
+
+const links = [
+  { href: "/", label: "Home" },
+  { href: "/about", label: "About" },
+  { href: "/events", label: "Events" },
+  { href: "/knowledge", label: "Knowledge" },
+  { href: "/gallery", label: "Gallery" },
+  { href: "/why-join", label: "Why Join" },
+  { href: "/contact", label: "Contact" },
+];
+
+export default function Navbar() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20);
+    onScroll();
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  const isActive = (href: string) =>
+    href === "/" ? pathname === "/" : pathname.startsWith(href);
+
+  return (
+    <header className="nav">
+      <div className="container nav__inner">
+        <nav className={`nav__bar ${scrolled ? "nav__bar--scrolled" : ""}`}>
+          <Link href="/" className="nav__brand">
+            <Logo size={38} />
+          </Link>
+
+          <ul className="nav__links">
+            {links.map((l) => (
+              <li key={l.href}>
+                <Link
+                  href={l.href}
+                  className={`nav__link ${isActive(l.href) ? "nav__link--active" : ""}`}
+                >
+                  {l.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+
+          <div className="nav__actions">
+            <Link href="/why-join" className="btn-primary btn-primary--sm nav__login">
+              Member Login
+            </Link>
+            <button
+              onClick={() => setOpen((v) => !v)}
+              className="nav__toggle"
+              aria-label="Menu"
+            >
+              <span className={`nav__toggle-box ${open ? "is-open" : ""}`}>
+                <span className="nav__bar-line nav__bar-line--1" />
+                <span className="nav__bar-line nav__bar-line--2" />
+                <span className="nav__bar-line nav__bar-line--3" />
+              </span>
+            </button>
+          </div>
+        </nav>
+
+        {open && (
+          <div className="nav__mobile">
+            <ul className="nav__mobile-list">
+              {links.map((l) => (
+                <li key={l.href}>
+                  <Link
+                    href={l.href}
+                    onClick={() => setOpen(false)}
+                    className={`nav__mobile-link ${
+                      isActive(l.href) ? "nav__mobile-link--active" : ""
+                    }`}
+                  >
+                    {l.label}
+                  </Link>
+                </li>
+              ))}
+              <li className="nav__mobile-cta">
+                <Link
+                  href="/why-join"
+                  onClick={() => setOpen(false)}
+                  className="btn-primary nav__mobile-login"
+                >
+                  Member Login
+                </Link>
+              </li>
+            </ul>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}