Upload components/Footer.js with huggingface_hub

components/Footer.js

@@ -1,34 +1,50 @@
 import Link from 'next/link'
-import { HiSparkles, HiMail, HiPhone } from 'react-icons/hi'
+import { HiSparkles, HiMail, HiPhone, HiArrowUp } from 'react-icons/hi'
 
 export default function Footer() {
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  const currentYear = new Date().getFullYear()
+
   return (
-    <footer className="bg-gray-900 text-white">
+    <footer className="bg-gray-900 text-white" role="contentinfo">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           {/* Brand */}
           <div className="col-span-1 md:col-span-2">
-            <div className="flex items-center space-x-2 mb-4">
-              <div className="bg-primary-600 p-2 rounded-lg">
-                <HiSparkles className="h-6 w-6 text-white" />
+            <div className="flex items-center space-x-3 mb-4">
+              <div className="bg-primary-600 p-2 rounded-xl">
+                <HiSparkles className="h-6 w-6 text-white" aria-hidden="true" />
               </div>
               <div>
                 <span className="text-xl font-bold">AI.Wiki.BR</span>
                 <p className="text-sm text-gray-400">Por Prof. Gabriel Ramos</p>
               </div>
             </div>
-            <p className="text-gray-300 mb-4 max-w-md">
+            <p className="text-gray-300 mb-6 max-w-md leading-relaxed">
               Transformando a prática jurídica e administrativa através da Inteligência Artificial. 
               Aprenda como usar IA no seu dia a dia profissional e nos estudos.
             </p>
-            <div className="space-y-2">
-              <div className="flex items-center space-x-2 text-sm text-gray-400">
-                <HiMail className="h-4 w-4" />
-                <span>contato@ai.wiki.br</span>
+            <div className="space-y-3">
+              <div className="flex items-center space-x-3 text-sm text-gray-400">
+                <HiMail className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+                <a 
+                  href="mailto:contato@ai.wiki.br" 
+                  className="hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
+                >
+                  contato@ai.wiki.br
+                </a>
               </div>
-              <div className="flex items-center space-x-2 text-sm text-gray-400">
-                <HiPhone className="h-4 w-4" />
-                <span>+55 (11) 99999-9999</span>
+              <div className="flex items-center space-x-3 text-sm text-gray-400">
+                <HiPhone className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+                <a 
+                  href="tel:+5511999999999" 
+                  className="hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
+                >
+                  +55 (11) 99999-9999
+                </a>
               </div>
             </div>
           </div>
@@ -36,26 +52,48 @@ export default function Footer() {
           {/* Quick Links */}
           <div>
             <h3 className="text-lg font-semibold mb-4">Links Rápidos</h3>
-            <ul className="space-y-2">
+            <ul className="space-y-3">
               <li>
-                <Link href="/" className="text-gray-300 hover:text-white transition-colors duration-200">
+                <Link 
+                  href="/" 
+                  className="text-gray-300 hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
+                >
                   Início
                 </Link>
               </li>
               <li>
-                <Link href="/prompts" className="text-gray-300 hover:text-white transition-colors duration-200">
+                <Link 
+                  href="/prompts" 
+                  className="text-gray-300 hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
+                >
                   Biblioteca de Prompts
                 </Link>
               </li>
               <li>
-                <Link href="#sobre" className="text-gray-300 hover:text-white transition-colors duration-200">
+                <a 
+                  href="#sobre" 
+                  className="text-gray-300 hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
+                  onClick={(e) => {
+                    e.preventDefault()
+                    const element = document.querySelector('#sobre')
+                    if (element) element.scrollIntoView({ behavior: 'smooth' })
+
+                >
                   Sobre o Professor
-                </Link>
+                </a>
               </li>
               <li>
-                <Link href="#contato" className="text-gray-300 hover:text-white transition-colors duration-200">
+                <a 
+                  href="#contato" 
+                  className="text-gray-300 hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
+                  onClick={(e) => {
+                    e.preventDefault()
+                    const element = document.querySelector('#contato')
+                    if (element) element.scrollIntoView({ behavior: 'smooth' })
+
+                >
                   Contato
-                </Link>
+                </a>
               </li>
             </ul>
           </div>
@@ -63,7 +101,7 @@ export default function Footer() {
           {/* Categories */}
           <div>
             <h3 className="text-lg font-semibold mb-4">Áreas de Atuação</h3>
-            <ul className="space-y-2">
+            <ul className="space-y-3">
               <li>
                 <span className="text-gray-300">Escritórios Jurídicos</span>
               </li>
@@ -80,10 +118,10 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="border-t border-gray-800 mt-8 pt-8">
+        <div className="border-t border-gray-800 mt-12 pt-8">
           <div className="flex flex-col md:flex-row justify-between items-center">
             <p className="text-gray-400 text-sm">
-              © 2024 AI.Wiki.BR. Todos os direitos reservados.
+              © {currentYear} AI.Wiki.BR. Todos os direitos reservados.
             </p>
             <p className="text-gray-400 text-sm mt-2 md:mt-0">
               Desenvolvido com ❤️ para a comunidade jurídica e administrativa brasileira
@@ -91,6 +129,15 @@ export default function Footer() {
           </div>
         </div>
       </div>
+
+      {/* Scroll to top button */}
+      <button
+        onClick={scrollToTop}
+        className="fixed bottom-6 right-6 bg-primary-600 hover:bg-primary-700 text-white p-3 rounded-full shadow-hard hover:shadow-medium transition-all duration-200 focus:ring-4 focus:ring-primary-200 z-40"
+        aria-label="Voltar ao topo"
+      >
+        <HiArrowUp className="h-5 w-5" aria-hidden="true" />
+      </button>
     </footer>
   )
 }