55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
"use client";
|
|
import { DesktopNavbar } from "./desktop-navbar";
|
|
import { MobileNavbar } from "./mobile-navbar";
|
|
import { motion } from "framer-motion";
|
|
|
|
interface NavItem {
|
|
title: string;
|
|
link: string;
|
|
}
|
|
|
|
// Navigation items - updated for smooth scrolling
|
|
const navItems: NavItem[] = [
|
|
{
|
|
title: "Home",
|
|
link: "/",
|
|
},
|
|
{
|
|
title: "Services",
|
|
link: "#services",
|
|
},
|
|
{
|
|
title: "Results",
|
|
link: "#results",
|
|
},
|
|
{
|
|
title: "Book a Call",
|
|
link: "#book",
|
|
},
|
|
];
|
|
|
|
export function NavBar() {
|
|
return (
|
|
<motion.nav
|
|
initial={{
|
|
y: -80,
|
|
}}
|
|
animate={{
|
|
y: 0,
|
|
}}
|
|
transition={{
|
|
ease: [0.6, 0.05, 0.1, 0.9],
|
|
duration: 0.8,
|
|
}}
|
|
className="max-w-7xl fixed top-6 mx-auto inset-x-0 z-50 w-[95%] lg:w-full"
|
|
>
|
|
<div className="hidden lg:block w-full bg-white/70 dark:bg-neutral-950/70 backdrop-blur-xl rounded-full border border-neutral-200/50 dark:border-neutral-800/50 shadow-2xl shadow-neutral-200/20 dark:shadow-black/40 px-4 py-2">
|
|
<DesktopNavbar navItems={navItems} />
|
|
</div>
|
|
<div className="flex h-full w-full items-center lg:hidden bg-white/70 dark:bg-neutral-950/70 backdrop-blur-xl rounded-2xl border border-neutral-200/50 dark:border-neutral-800/50 shadow-xl px-4 py-3">
|
|
<MobileNavbar navItems={navItems} />
|
|
</div>
|
|
</motion.nav>
|
|
);
|
|
}
|