99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
"use client"
|
|
interface NavbarProps {
|
|
logoSrc: string // Path to your logo image
|
|
}
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Button } from "components/Button/Button"
|
|
import { FaArrowRight } from "react-icons/fa"
|
|
|
|
const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
|
|
const [showBackground, setShowBackground] = useState(false)
|
|
const TOP_OFFSET = 50
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if (window.scrollY >= TOP_OFFSET) {
|
|
setShowBackground(true)
|
|
} else {
|
|
setShowBackground(false)
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", handleScroll)
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll)
|
|
}
|
|
}, [])
|
|
|
|
const [hovered, setHovered] = useState(false)
|
|
const imgStyle = {
|
|
transform: hovered ? "translateX(3px)" : "none",
|
|
transition: "transform .2s", // Optional: Smooth transition
|
|
}
|
|
|
|
return (
|
|
<nav
|
|
className={`${
|
|
showBackground ? "backdrop-blur" : "bg-transparent"
|
|
} fixed left-0 top-0 z-50 flex h-20 w-full items-center justify-between px-4 text-white`}
|
|
>
|
|
<a href="/">
|
|
<img src={logoSrc} alt="VizoleLabs" className="h-5 text-white" />
|
|
</a>
|
|
<ul className="hidden space-x-4 text-lg font-medium md:flex">
|
|
<li>
|
|
<a href="/" className="hover:text-vizoleG2">
|
|
Home
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/services" className="hover:text-vizoleG2">
|
|
Services
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/portfolio" className="hover:text-vizoleG2">
|
|
Portfolio
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/about-us" className="hover:text-vizoleG2">
|
|
About Us
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/contact-us" className="hover:text-vizoleG2">
|
|
Contact Us
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div className="flex items-center">
|
|
<Button
|
|
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
|
|
intent="navSignIn"
|
|
size="hero1"
|
|
>
|
|
Sign In
|
|
</Button>
|
|
<Button
|
|
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
|
|
intent="navSignUp"
|
|
size="hero1"
|
|
onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}
|
|
>
|
|
Sign Up
|
|
<div className="ml-2">
|
|
<span>
|
|
<FaArrowRight style={imgStyle} className="text-white" />
|
|
</span>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|