mirror of
https://github.com/zoo-apps/industries.git
synced 2026-11-02 17:38:03 +00:00
aandHanzo Dev
16b601298d
- New TopBanner component above the navbar (announcement strip). - Removed the in-Hero eyebrow badge (replaced by the banner). - Navbar shifted down 40px to make room. - Background gradient retuned to soft pink/green/indigo pools matching the three CTA colors so the wash reads as the same palette family. - --primary, --brand-pink, --brand-green, --brand-blue all synced to the exact button hexes (#d90b7e / #1faa59 / #2d3de0). Co-authored-by: Hanzo Dev <[email protected]>
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, type ReactNode } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export default function NavbarContainer({ children }: { children: ReactNode }) {
|
|
const [scrolled, setScrolled] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => setScrolled(window.scrollY > 50)
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<nav className="fixed top-10 left-0 right-0 z-50 transition-all duration-500">
|
|
<div
|
|
className={cn(
|
|
'mx-auto transition-all duration-500 ease-out',
|
|
scrolled
|
|
? 'mt-4 mx-4 md:mx-8 lg:mx-auto lg:max-w-6xl rounded-full backdrop-blur-xl border bg-background/80 border-border shadow-2xl shadow-background/50'
|
|
: 'bg-transparent'
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'max-w-7xl mx-auto flex items-center justify-between transition-all duration-500',
|
|
scrolled ? 'px-6 py-3' : 'px-4 sm:px-6 lg:px-8 py-4'
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|