feat: adicionar barra de pesquisa com traducao em en/es na pagina de projetos

frontend/src/app/[locale]/projetos/page.tsx

@@ -25,6 +25,9 @@ export default function ProjetosPage() {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedCategory, setSelectedCategory] = useState<string>('todos');
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const searchPlaceholder = locale === 'pt' ? 'Pesquisar projetos...' : locale === 'es' ? 'Buscar proyectos...' : 'Search projects...';
 
   useEffect(() => {
     let isMounted = true;
@@ -86,11 +89,17 @@ export default function ProjetosPage() {
   }, [projects]);
 
   const filteredProjects = useMemo(() => {
-    if (selectedCategory === 'todos') {
-      return projects;
-    }
-    return projects.filter((project) => project.category === selectedCategory);
-  }, [projects, selectedCategory]);
+    return projects.filter((project) => {
+      const matchesCategory = selectedCategory === 'todos' || project.category === selectedCategory;
+      const matchesSearch =
+        !searchTerm ||
+        project.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        project.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        project.category?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        project.client?.toLowerCase().includes(searchTerm.toLowerCase());
+      return matchesCategory && matchesSearch;
+    });
+  }, [projects, selectedCategory, searchTerm]);
 
   return (
     <main className="bg-white dark:bg-secondary transition-colors duration-300">
@@ -109,6 +118,28 @@ export default function ProjetosPage() {
       {/* Projects Grid */}
       <section className="py-20 bg-white dark:bg-secondary">
         <div className="container mx-auto px-4">
+          {/* Search Bar */}
+          <div className="max-w-xl mx-auto mb-8">
+            <div className="relative">
+              <input
+                type="text"
+                placeholder={searchPlaceholder}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full px-5 py-3 pl-12 rounded-full border border-gray-200 dark:border-white/20 bg-white dark:bg-white/5 text-secondary dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
+              />
+              <i className="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-xl"></i>
+              {searchTerm && (
+                <button
+                  onClick={() => setSearchTerm("")}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-white transition-colors"
+                >
+                  <i className="ri-close-line text-xl"></i>
+                </button>
+              )}
+            </div>
+          </div>
+
           {/* Filters */}
           <div className="flex flex-wrap gap-4 mb-12 justify-center">
             <button
@@ -136,8 +167,26 @@ export default function ProjetosPage() {
             </div>
           ) : filteredProjects.length === 0 ? (
             <div className="text-center text-gray-500 dark:text-gray-400 py-16">
-              <i className="ri-briefcase-line text-5xl mb-4"></i>
-              <p>{locale === 'pt' ? 'Ainda não temos projetos publicados nesta categoria.' : locale === 'es' ? 'Todavía no hay proyectos publicados en esta categoría.' : 'No projects published in this category yet.'}</p>
+              <i className="ri-folder-open-line text-5xl mb-4"></i>
+              <h3 className="text-xl font-bold mb-2">
+                {locale === 'pt' ? 'Nenhum projeto encontrado' : locale === 'es' ? 'Ningún proyecto encontrado' : 'No projects found'}
+              </h3>
+              <p>
+                {searchTerm || selectedCategory !== 'todos'
+                  ? (locale === 'pt' ? 'Tente ajustar os filtros de busca' : locale === 'es' ? 'Intente ajustar los filtros de búsqueda' : 'Try adjusting your search filters')
+                  : (locale === 'pt' ? 'Em breve adicionaremos novos projetos' : locale === 'es' ? 'Pronto agregaremos nuevos proyectos' : 'New projects coming soon')}
+              </p>
+              {(searchTerm || selectedCategory !== 'todos') && (
+                <button
+                  onClick={() => {
+                    setSearchTerm("");
+                    setSelectedCategory('todos');
+                  }}
+                  className="mt-4 px-6 py-2 bg-primary text-white rounded-full font-bold hover:bg-primary/90 transition-colors"
+                >
+                  {locale === 'pt' ? 'Limpar filtros' : locale === 'es' ? 'Limpiar filtros' : 'Clear filters'}
+                </button>
+              )}
             </div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -172,6 +221,13 @@ export default function ProjetosPage() {
               })}
             </div>
           )}
+
+          {/* Results Count */}
+          {!loading && filteredProjects.length > 0 && (
+            <div className="text-center mt-12 text-gray-500 dark:text-gray-400">
+              {locale === 'pt' ? 'Exibindo' : locale === 'es' ? 'Mostrando' : 'Showing'} {filteredProjects.length} {locale === 'pt' ? 'de' : locale === 'es' ? 'de' : 'of'} {projects.length} {locale === 'pt' ? 'projetos' : locale === 'es' ? 'proyectos' : 'projects'}
+            </div>
+          )}
         </div>
       </section>
     </main>