Busca por nome com destaque e navegação para página

frontend/src/App.css

@@ -77,6 +77,45 @@
   border-color: var(--accent-2);
 }
 
+.search-box {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.search-box input {
+  padding: 0.55rem 0.8rem;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid var(--stroke);
+  border-radius: 8px;
+  color: var(--text);
+  min-width: 240px;
+}
+
+.search-box input:focus {
+  outline: 1px solid var(--accent-2);
+}
+
+.search-box button {
+  padding: 0.55rem 1rem;
+  background: var(--accent);
+  border: 1px solid var(--accent);
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background 150ms ease;
+}
+
+.search-box button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.search-box button:hover:not(:disabled) {
+  background: var(--accent-2);
+}
+
 .pagination {
   display: flex;
   align-items: center;
@@ -113,6 +152,10 @@
   flex-direction: column;
 }
 
+.ranking-card.highlight {
+  box-shadow: 0 0 0 2px var(--accent-2);
+}
+
 footer {
   text-align: center;
   margin-top: 2.4rem;

frontend/src/App.jsx

@@ -12,6 +12,9 @@ function App() {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(50);
   const [totalPages, setTotalPages] = useState(0);
+  const [highlightId, setHighlightId] = useState(null);
+  const [busca, setBusca] = useState('');
+  const [buscando, setBuscando] = useState(false);
 
   useEffect(() => {
     loadRanking();
@@ -34,6 +37,27 @@ function App() {
     }
   };
 
+  const handleBuscar = async () => {
+    if (busca.trim().length < 3) return;
+    try {
+      setBuscando(true);
+      const resultados = await rankingService.searchConsultor(busca.trim(), 5);
+      if (resultados && resultados.length > 0) {
+        const alvo = resultados[0];
+        const pos = alvo.posicao || 1;
+        const pagina = Math.ceil(pos / pageSize);
+        setHighlightId(alvo.id_pessoa);
+        setPage(pagina);
+      } else {
+        alert('Nenhum consultor encontrado.');
+      }
+    } catch (err) {
+      alert('Erro ao buscar consultor.');
+    } finally {
+      setBuscando(false);
+    }
+  };
+
   if (loading) {
     return (
       <div className="container">
@@ -70,6 +94,18 @@ function App() {
           </select>
         </label>
 
+        <div className="search-box">
+          <input
+            type="text"
+            placeholder="Digite o nome para localizar"
+            value={busca}
+            onChange={(e) => setBusca(e.target.value)}
+          />
+          <button onClick={handleBuscar} disabled={buscando || busca.length < 3}>
+            {buscando ? 'Buscando...' : 'Buscar'}
+          </button>
+        </div>
+
         <div className="pagination">
           <button onClick={() => setPage(1)} disabled={page <= 1}>« Primeira</button>
           <button onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>‹ Anterior</button>
@@ -83,7 +119,11 @@ function App() {
 
       <div className="ranking-list">
         {consultores.map((consultor) => (
-          <ConsultorCard key={consultor.id_pessoa} consultor={consultor} />
+          <ConsultorCard
+            key={consultor.id_pessoa}
+            consultor={consultor}
+            highlight={consultor.id_pessoa === highlightId}
+          />
         ))}
       </div>
 

frontend/src/components/ConsultorCard.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import './ConsultorCard.css';
 
-const ConsultorCard = ({ consultor }) => {
+const ConsultorCard = ({ consultor, highlight }) => {
   const [expanded, setExpanded] = useState(false);
 
   const getRankClass = (rank) => {
@@ -20,7 +20,7 @@ const ConsultorCard = ({ consultor }) => {
   const { consultoria } = consultor;
 
   return (
-    <div className={`ranking-card ${expanded ? 'expanded' : ''}`} onClick={() => setExpanded(!expanded)}>
+    <div className={`ranking-card ${expanded ? 'expanded' : ''} ${highlight ? 'highlight' : ''}`} onClick={() => setExpanded(!expanded)}>
       <div className="card-main">
         <div className={`rank ${getRankClass(consultor.rank)}`}>#{consultor.rank}</div>
 

frontend/src/services/api.js

@@ -94,6 +94,11 @@ export const rankingService = {
     const response = await api.get('/health');
     return response.data;
   },
+
+  async searchConsultor(nome, limit = 5) {
+    const response = await api.get('/ranking/busca', { params: { nome, limit } });
+    return response.data;
+  },
 };
 
 export default api;