Initial commit

2026-06-20 15:41:55 +05:30
commit 2778527442
163 changed files with 72703 additions and 0 deletions
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const NAV_LINKS = [
+  { label: "Home", href: "/" },
+  { label: "Nearle for Business", href: "/businesses" },
+  { label: "Nearle for People", href: "/people" },
+  { label: "About", href: "/about" },
+  { label: "Contact", href: "/contact" },
+];
+
+export function Navbar() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <nav className="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md border-b border-outline-variant/20 transition-all duration-300">
+      <div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-margin-mobile md:px-16 xl:px-24 py-3">
+        {/* Left: Brand */}
+        <div className="flex items-center">
+          <Link
+            href="/"
+            className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
+          >
+            <Image
+              src="/logo-purple-v2.png"
+              alt="Nearle"
+              width={140}
+              height={23}
+              style={{ height: "auto" }}
+              className="h-7 w-auto object-contain"
+              priority
+            />
+          </Link>
+        </div>
+
+        {/* Center: Navigation */}
+        <div className="hidden md:flex items-center justify-center gap-8 xl:gap-10">
+          {NAV_LINKS.map((link) => (
+            <Link
+              key={link.label}
+              href={link.href}
+              className="relative py-1 text-[15px] font-bold leading-5 text-on-surface-variant hover:text-primary transition-all duration-200 group whitespace-nowrap"
+            >
+              {link.label}
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full" />
+            </Link>
+          ))}
+        </div>
+
+        {/* Right: Actions */}
+        <div className="flex items-center justify-end gap-3">
+          <Link
+            href="/#download"
+            className="hidden md:inline-flex bg-primary hover:bg-primary-container text-on-primary font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
+          >
+            Get App
+          </Link>
+
+          {/* Mobile menu toggle */}
+          <button
+            className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-container transition-all active:scale-90 cursor-pointer"
+            onClick={() => setMobileOpen(!mobileOpen)}
+            aria-label="Toggle menu"
+          >
+            <MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Drawer */}
+      {mobileOpen && (
+        <div className="md:hidden bg-surface-container-lowest border-t border-outline-variant">
+          <div className="max-w-container-max mx-auto px-margin-mobile py-stack-md flex flex-col gap-2">
+            {NAV_LINKS.map((link) => (
+              <Link
+                key={link.label}
+                href={link.href}
+                className="px-3 py-2.5 text-body-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low rounded-lg transition-colors"
+                onClick={() => setMobileOpen(false)}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}