116 lines
4.4 KiB
React
116 lines
4.4 KiB
React
"use client";
|
|
import { useScroll } from '../hooks/useScroll';
|
|
import { useState } from 'react';
|
|
import { Menu, X } from 'lucide-react';
|
|
|
|
function Header() {
|
|
const { scrollToSectionWithHeader } = useScroll();
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
const navigationItems = [
|
|
{ name: 'ویژگیها', id: 'features' },
|
|
{ name: 'امکانات', id: 'what-you-can-do' },
|
|
{ name: 'چرا ما', id: 'why-aramland' },
|
|
{ name: 'دانلود', id: 'download' },
|
|
{ name: 'ارتباط با ما', id: 'footer' },
|
|
{ name: 'بلاگ', id: 'blog' },
|
|
];
|
|
|
|
const handleNavClick = (sectionId) => {
|
|
scrollToSectionWithHeader(sectionId);
|
|
setIsMenuOpen(false);
|
|
};
|
|
|
|
return (
|
|
<nav className="py-4 px-6 sm: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-xl sm:text-2xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent">
|
|
آرام لند
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center gap-6 lg:gap-8">
|
|
{navigationItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => {
|
|
if (item.id === 'blog') {
|
|
window.open('https://aramland.approagency.ir/blog/', '_blank');
|
|
} else {
|
|
handleNavClick(item.id);
|
|
}
|
|
}}
|
|
className="text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200 relative group text-sm lg:text-base"
|
|
>
|
|
{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>
|
|
|
|
{/* Desktop CTA Button */}
|
|
<div className="hidden md:block">
|
|
<button
|
|
onClick={() => handleNavClick('download')}
|
|
className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-2 px-4 lg:py-2 lg:px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105 text-sm lg:text-base"
|
|
>
|
|
شروع سفر آرامش
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
{isMenuOpen ? (
|
|
<X className="w-6 h-6 text-gray-600" />
|
|
) : (
|
|
<Menu className="w-6 h-6 text-gray-600" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden absolute top-full left-0 right-0 bg-white/95 backdrop-blur-md border-b border-gray-200 shadow-lg">
|
|
<div className="px-6 py-4 space-y-4">
|
|
{navigationItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => {
|
|
if (item.id === 'blog') {
|
|
window.open('https://aramland.approagency.ir/blog/', '_blank');
|
|
} else {
|
|
handleNavClick(item.id);
|
|
}
|
|
}}
|
|
className="block w-full text-right py-3 px-4 text-gray-700 hover:text-primary-500 hover:bg-primary-50 rounded-lg transition-all duration-200 font-medium border-b border-gray-100 last:border-b-0"
|
|
>
|
|
{item.name}
|
|
</button>
|
|
))}
|
|
|
|
{/* Mobile CTA Button */}
|
|
<div className="pt-4 border-t border-gray-200">
|
|
<button
|
|
onClick={() => handleNavClick('download')}
|
|
className="w-full bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-3 px-4 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105 text-center"
|
|
>
|
|
شروع سفر آرامش
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
export default Header; |