update home page
This commit is contained in:
@@ -1,58 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { navigationData } from "@/data/navigation";
|
||||
import { SearchIcon } from "@/components/shared/icons/SearchIcon";
|
||||
|
||||
export function Navbar() {
|
||||
const [isSticky, setIsSticky] = useState(false);
|
||||
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setIsSticky(window.scrollY > 120);
|
||||
|
||||
onScroll();
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
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>
|
||||
<header
|
||||
className={`aiero-navbar z-30 mx-auto grid h-[100px] max-w-[2520px] grid-cols-[280px_1fr_360px] items-center px-[34px] transition-[background-color,border-radius,box-shadow,transform] duration-500 ${
|
||||
isSticky
|
||||
? "fixed left-5 right-5 top-0 rounded-b-[25px] bg-[#111111] shadow-[0_12px_35px_rgba(0,0,0,0.18)]"
|
||||
: "relative bg-transparent"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-[64px]">
|
||||
<button
|
||||
className="navbar-reveal grid h-6 w-6 grid-cols-2 gap-[5px] text-white transition-colors hover:text-aiero-teal"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<span className="h-[7px] w-[7px] rounded-[2px] border-2 border-current" />
|
||||
<span className="h-[7px] w-[7px] rounded-[2px] border-2 border-current" />
|
||||
<span className="h-[7px] w-[7px] rounded-[2px] border-2 border-current" />
|
||||
<span className="h-[7px] w-[7px] rounded-[2px] border-2 border-current" />
|
||||
</button>
|
||||
|
||||
{/* Logo */}
|
||||
<a href="#" className="navbar-reveal flex items-center" style={{ animationDelay: "120ms" }}>
|
||||
<Image
|
||||
src="/images/aiero/logo-dark.png"
|
||||
alt="Aiero"
|
||||
width={109.5}
|
||||
height={19.5}
|
||||
className="h-auto w-auto"
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="hidden items-center gap-0 lg:flex" aria-label="Primary navigation">
|
||||
{navigationData.map((item) => (
|
||||
<nav className="hidden items-center justify-center gap-[11px] lg:flex" aria-label="Primary navigation">
|
||||
{navigationData.map((item, index) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="relative"
|
||||
className="navbar-reveal relative"
|
||||
style={{ animationDelay: `${140 + index * 70}ms` }}
|
||||
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]"
|
||||
className={`nav-link-swap flex h-10 items-center rounded-[10px] px-[21px] text-[13px] font-bold uppercase leading-none text-white transition-colors hover:bg-aiero-dark ${
|
||||
item.label === "Home" ? "bg-aiero-dark" : ""
|
||||
}`}
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
{item.label}
|
||||
<span className="text-active">{item.label}</span>
|
||||
<span aria-hidden>{item.label}</span>
|
||||
{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 className="ml-[12px] h-[5px] w-[5px] opacity-90" viewBox="0 0 5 5" fill="none">
|
||||
<path d="M4.35 0.9L3.75 4.05L0.65 3.45" stroke="currentColor" strokeWidth="1.1" 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) => (
|
||||
<div className="absolute left-0 top-full z-50 min-w-[286px] origin-top rounded-[20px] border border-aiero-card-border bg-[#111111] px-[45px] py-[30px] shadow-2xl">
|
||||
{item.children.map((child, childIndex) => (
|
||||
<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)" }}
|
||||
className="dropdown-reveal block py-[10px] pr-5 text-[14px] font-medium text-white/80 transition-all hover:pl-5 hover:text-aiero-teal"
|
||||
style={{
|
||||
animationDelay: `${childIndex * 45}ms`,
|
||||
fontFamily: "var(--font-sora)",
|
||||
}}
|
||||
>
|
||||
{child.label}
|
||||
</a>
|
||||
@@ -64,14 +98,14 @@ export function Navbar() {
|
||||
</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">
|
||||
<div className="navbar-reveal flex items-center justify-end gap-[10px]" style={{ animationDelay: "620ms" }}>
|
||||
<button className="hidden p-[8px] text-white transition-colors hover:text-aiero-teal 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"
|
||||
className="hidden items-center gap-[8px] p-[8px] text-[13px] font-bold uppercase leading-none text-white transition-colors hover:text-aiero-teal md:flex"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
<svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
|
||||
@@ -83,7 +117,7 @@ export function Navbar() {
|
||||
|
||||
<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"
|
||||
className="aiero-button aiero-button-gradient-border min-w-[188px] justify-center rounded-full px-[24px] py-[21px] text-[16px] font-semibold leading-none text-white"
|
||||
style={{ fontFamily: "var(--font-sora)" }}
|
||||
>
|
||||
Get in Touch
|
||||
|
||||
Reference in New Issue
Block a user