47 lines
2.0 KiB
React
47 lines
2.0 KiB
React
"use client";
|
||
import { useScroll } from '../hooks/useScroll';
|
||
function Header() {
|
||
const { scrollToSectionWithHeader } = useScroll();
|
||
return (
|
||
<nav className="py-6 px-8 sticky top-0 bg-white/80 backdrop-blur-md z-50 border-b border-gray-100">
|
||
<div className="max-w-6xl mx-auto flex justify-between items-center">
|
||
{/* Logo */}
|
||
<div className="flex items-center gap-3">
|
||
<div className="bg-gradient-to-r from-primary-500 to-primary-600 w-8 h-8 rounded-xl flex items-center justify-center">
|
||
<span className="text-white font-bold text-sm">آ</span>
|
||
</div>
|
||
<div className="text-2xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent">
|
||
آراملند
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation */}
|
||
<div className="hidden md:flex items-center gap-8">
|
||
{[
|
||
{ name: 'ویژگیها', id: 'features' },
|
||
{ name: 'امکانات', id: 'what-you-can-do' },
|
||
{ name: 'چرا ما', id: 'why-aramland' },
|
||
{ name: 'دانلود', id: 'download' },
|
||
{ name: 'ارتباط با ما', id: 'footer' },
|
||
].map((item) => (
|
||
<button
|
||
key={item.id}
|
||
onClick={() => scrollToSectionWithHeader(item.id)}
|
||
className="text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200 relative group"
|
||
>
|
||
{item.name}
|
||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary-500 group-hover:w-full transition-all duration-300"></span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* CTA Button */}
|
||
<button onClick={() => scrollToSectionWithHeader('download')} className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-2 px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
|
||
شروع سفر آرامش
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
);
|
||
}
|
||
|
||
export default Header; |