131 lines
4.5 KiB
JavaScript
131 lines
4.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { Menu, X, ChevronDown, LogOut } from 'lucide-react';
|
|
import { Button } from './ui/button';
|
|
|
|
const Header = ({ onLogout }) => {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const location = useLocation();
|
|
|
|
const navigation = [
|
|
{ name: 'Home', href: '/' },
|
|
{ name: 'Sobre', href: '/sobre' },
|
|
{ name: 'Plataforma', href: '/plataforma' },
|
|
{ name: 'Módulos', href: '/modulos' },
|
|
{ name: 'Tecnologia', href: '/tecnologia' },
|
|
{ name: 'Impacto', href: '/impacto' },
|
|
{ name: 'Para Quem', href: '/para-quem' },
|
|
{ name: 'Contato', href: '/contato' },
|
|
];
|
|
|
|
const isActive = (path) => location.pathname === path;
|
|
|
|
return (
|
|
<header className="bg-white/95 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<div className="flex-shrink-0">
|
|
<Link to="/" className="flex items-center">
|
|
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center mr-3">
|
|
<span className="text-white font-bold text-xl">I</span>
|
|
</div>
|
|
<span className="text-2xl font-bold gradient-text">IAsis</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex space-x-8">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
to={item.href}
|
|
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
|
isActive(item.href)
|
|
? 'text-primary bg-primary/10'
|
|
: 'text-gray-700 hover:text-primary hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* CTA Button */}
|
|
<div className="hidden md:flex items-center space-x-4">
|
|
<Button asChild>
|
|
<Link to="/contato">Solicitar Demo</Link>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onLogout}
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
<span>Sair</span>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<div className="md:hidden">
|
|
<button
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
|
|
>
|
|
{isMenuOpen ? (
|
|
<X className="block h-6 w-6" />
|
|
) : (
|
|
<Menu className="block h-6 w-6" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden">
|
|
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
to={item.href}
|
|
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
|
|
isActive(item.href)
|
|
? 'text-primary bg-primary/10'
|
|
: 'text-gray-700 hover:text-primary hover:bg-gray-50'
|
|
}`}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<div className="pt-4 space-y-2">
|
|
<Button asChild className="w-full">
|
|
<Link to="/contato" onClick={() => setIsMenuOpen(false)}>
|
|
Solicitar Demo
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full flex items-center justify-center space-x-2"
|
|
onClick={() => {
|
|
setIsMenuOpen(false);
|
|
onLogout();
|
|
}}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
<span>Sair</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|
|
|