Upload components/Header.js with huggingface_hub

components/Header.js

@@ -1,42 +1,118 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
-import { FiMenu, FiX } from 'react-icons/fi'
-import { HiSparkles } from 'react-icons/hi'
+import { useRouter } from 'next/router'
+import { FiMenu, FiX, FiSearch } from 'react-icons/fi'
+import { HiSparkles, HiBookOpen } from 'react-icons/hi'
 
 export default function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isScrolled, setIsScrolled] = useState(false)
+  const router = useRouter()
+
+  // Handle scroll effect for header
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
 
   const navigation = [
-    { name: 'Início', href: '/' },
-    { name: 'Biblioteca de Prompts', href: '/prompts' },
-    { name: 'Sobre', href: '#sobre' },
-    { name: 'Contato', href: '#contato' },
+    { 
+      name: 'Início', 
+      href: '/',
+      icon: HiSparkles,
+      description: 'Página principal com visão geral'
+    },
+    { 
+      name: 'Biblioteca de Prompts', 
+      href: '/prompts',
+      icon: HiBookOpen,
+      description: 'Prompts especializados para sua área'
+    },
+    { 
+      name: 'Sobre', 
+      href: '#sobre',
+      description: 'Conheça o Prof. Gabriel Ramos'
+    },
+    { 
+      name: 'Contato', 
+      href: '#contato',
+      description: 'Entre em contato conosco'
+    },
   ]
 
+  const handleNavClick = (href) => {
+    setIsMenuOpen(false)
+    if (href.startsWith('#')) {
+      const element = document.querySelector(href)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
+  }
+
   return (
-    <header className="bg-white shadow-lg sticky top-0 z-50">
+    <header 
+      className={`sticky top-0 z-50 transition-all duration-300 ${
+        isScrolled 
+          ? 'bg-white/95 backdrop-blur-md shadow-medium' 
+          : 'bg-white shadow-soft'
+      }`}
+      role="banner"
+    >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center py-4">
           {/* Logo */}
-          <Link href="/" className="flex items-center space-x-2">
-            <div className="bg-primary-600 p-2 rounded-lg">
-              <HiSparkles className="h-6 w-6 text-white" />
+          <Link 
+            href="/" 
+            className="flex items-center space-x-3 group"
+            aria-label="AI.Wiki.BR - Voltar ao início"
+          >
+            <div className="bg-primary-600 p-2 rounded-xl group-hover:bg-primary-700 transition-colors duration-200">
+              <HiSparkles className="h-6 w-6 text-white" aria-hidden="true" />
             </div>
             <div>
-              <span className="text-xl font-bold text-primary-700">AI.Wiki.BR</span>
+              <span className="text-xl font-bold text-primary-700 group-hover:text-primary-800 transition-colors duration-200">
+                AI.Wiki.BR
+              </span>
               <p className="text-xs text-gray-600 -mt-1">Por Prof. Gabriel Ramos</p>
             </div>
           </Link>
 
           {/* Desktop Navigation */}
-          <nav className="hidden md:flex space-x-8">
+          <nav 
+            className="hidden md:flex space-x-1"
+            role="navigation"
+            aria-label="Navegação principal"
+          >
             {navigation.map((item) => (
               <Link
                 key={item.name}
                 href={item.href}
-                className="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200"
+                onClick={(e) => {
+                  if (item.href.startsWith('#')) {
+                    e.preventDefault()
+                    handleNavClick(item.href)
+                  }
+
+                className={`relative px-4 py-2 rounded-lg font-medium transition-all duration-200 group ${
+                  router.pathname === item.href || (item.href.startsWith('#') && router.asPath === '/')
+                    ? 'text-primary-700 bg-primary-50' 
+                    : 'text-gray-700 hover:text-primary-600 hover:bg-primary-50'
+                }`}
+                aria-label={item.description}
               >
-                {item.name}
+                <span className="flex items-center space-x-2">
+                  {item.icon && <item.icon className="h-4 w-4" aria-hidden="true" />}
+                  <span>{item.name}</span>
+                </span>
+                
+                {/* Active indicator */}
+                {(router.pathname === item.href || (item.href.startsWith('#') && router.asPath === '/')) && (
+                  <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-primary-600 rounded-full" />
+                )}
               </Link>
             ))}
           </nav>
@@ -44,7 +120,9 @@ export default function Header() {
           {/* Mobile menu button */}
           <button
             onClick={() => setIsMenuOpen(!isMenuOpen)}
-            className="md:hidden p-2 rounded-lg text-gray-600 hover:text-primary-600 hover:bg-gray-100"
+            className="md:hidden p-2 rounded-lg text-gray-600 hover:text-primary-600 hover:bg-gray-100 focus:ring-4 focus:ring-primary-200 transition-all duration-200"
+            aria-expanded={isMenuOpen}
+            aria-label={isMenuOpen ? 'Fechar menu' : 'Abrir menu'}
           >
             {isMenuOpen ? <FiX className="h-6 w-6" /> : <FiMenu className="h-6 w-6" />}
           </button>
@@ -52,16 +130,31 @@ export default function Header() {
 
         {/* Mobile Navigation */}
         {isMenuOpen && (
-          <div className="md:hidden border-t border-gray-200 py-4">
-            <nav className="flex flex-col space-y-3">
+          <div className="md:hidden border-t border-gray-200 py-4 animate-slide-up">
+            <nav 
+              className="flex flex-col space-y-2"
+              role="navigation"
+              aria-label="Menu mobile"
+            >
               {navigation.map((item) => (
                 <Link
                   key={item.name}
                   href={item.href}
-                  className="text-gray-700 hover:text-primary-600 font-medium py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors duration-200"
-                  onClick={() => setIsMenuOpen(false)}
+                  onClick={(e) => {
+                    if (item.href.startsWith('#')) {
+                      e.preventDefault()
+                      handleNavClick(item.href)
+                    }
+
+                  className={`flex items-center space-x-3 p-3 rounded-lg font-medium transition-all duration-200 ${
+                    router.pathname === item.href || (item.href.startsWith('#') && router.asPath === '/')
+                      ? 'text-primary-700 bg-primary-50' 
+                      : 'text-gray-700 hover:text-primary-600 hover:bg-primary-50'
+                  }`}
+                  aria-label={item.description}
                 >
-                  {item.name}
+                  {item.icon && <item.icon className="h-5 w-5" aria-hidden="true" />}
+                  <span>{item.name}</span>
                 </Link>
               ))}
             </nav>
@@ -77,7 +170,8 @@ export default function Header() {
               href="https://huggingface.co/spaces/akhaliq/anycoder" 
               target="_blank" 
               rel="noopener noreferrer"
-              className="text-primary-600 hover:text-primary-700 font-medium transition-colors duration-200"
+              className="text-primary-600 hover:text-primary-700 font-medium transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
+              aria-label="Built with anycoder - Link externo"
             >
               Built with anycoder
             </a>