Initial commit files

2026-06-18 11:13:39 +05:30
parent 2e710e1fb7
commit d9cc83aa82
36 changed files with 1958 additions and 107 deletions
--- a/components/aiero/Navbar.tsx
+++ b/components/aiero/Navbar.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { navigationData } from "@/data/navigation";
+import { SearchIcon } from "@/components/shared/icons/SearchIcon";
+
+export function Navbar() {
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+
+  return (
+    <header className="relative z-30 mx-auto flex h-[76px] max-w-[2520px] items-center justify-between px-2">
+      {/* Logo */}
+      <a href="#" className="flex items-center">
+        <Image
+          src="/images/aiero/logo-dark.png"
+          alt="Aiero"
+          width={109.5}
+          height={19.5}
+          className="h-auto w-auto"
+          priority
+        />
+      </a>
+
+      {/* Navigation */}
+      <nav className="hidden items-center gap-0 lg:flex" aria-label="Primary navigation">
+        {navigationData.map((item) => (
+          <div
+            key={item.label}
+            className="relative"
+            onMouseEnter={() => setOpenDropdown(item.label)}
+            onMouseLeave={() => setOpenDropdown(null)}
+          >
+            <a
+              href={item.href}
+              className="flex items-center gap-1 rounded-[20px] px-[18px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:bg-[#1f1f1f]"
+              style={{ fontFamily: "var(--font-sora)" }}
+            >
+              {item.label}
+              {item.children && (
+                <svg className="ml-0.5 h-2 w-2 opacity-60" viewBox="0 0 8 5" fill="none">
+                  <path d="M1 1L4 4L7 1" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+              )}
+            </a>
+
+            {/* Dropdown */}
+            {item.children && openDropdown === item.label && (
+              <div className="absolute left-0 top-full z-50 min-w-[200px] rounded-[15px] border border-[#2a2a2a] bg-[#111111] py-3 shadow-2xl">
+                {item.children.map((child) => (
+                  <a
+                    key={child.label}
+                    href={child.href}
+                    className="block px-5 py-2.5 text-[12px] font-medium text-white/80 transition-colors hover:text-[#45d0bd]"
+                    style={{ fontFamily: "var(--font-sora)" }}
+                  >
+                    {child.label}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </nav>
+
+      {/* Right Icons */}
+      <div className="flex items-center gap-5">
+        <button className="hidden text-white transition-colors hover:text-[#45d0bd] md:block" aria-label="Search">
+          <SearchIcon className="h-[18px] w-[18px]" />
+        </button>
+
+        <a
+          href="#"
+          className="hidden items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-white transition-colors hover:text-[#45d0bd] md:flex"
+          style={{ fontFamily: "var(--font-sora)" }}
+        >
+          <svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
+            <circle cx="8" cy="5" r="3.5" stroke="currentColor" strokeWidth="1.3"/>
+            <path d="M2 14.5C2 11.5 4.5 9.5 8 9.5C11.5 9.5 14 11.5 14 14.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
+          </svg>
+          Log in
+        </a>
+
+        <a
+          href="#"
+          className="aiero-button aiero-button-gradient-border rounded-full px-[22px] py-[10px] text-[11px] font-semibold uppercase tracking-[0.18em] text-white"
+          style={{ fontFamily: "var(--font-sora)" }}
+        >
+          Get in Touch
+          <span className="button-inner" />
+        </a>
+
+        {/* Mobile menu button */}
+        <button className="flex flex-col gap-[5px] lg:hidden" aria-label="Menu">
+          <span className="h-[2px] w-[22px] bg-white" />
+          <span className="h-[2px] w-[22px] bg-white" />
+          <span className="h-[2px] w-[22px] bg-white" />
+        </button>
+      </div>
+    </header>
+  );
+}