refactors

src/components/DataStats/DataAvailabilityTable.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import type { OpenCandDataAvailabilityStats } from '../../api/apiModels';
+
+interface DataAvailabilityTableProps {
+  stats: OpenCandDataAvailabilityStats;
+  sortedYears: number[];
+}
+
+const dataTypes = [
+  { key: 'candidatos', label: 'Candidatos', icon: '👤' },
+  { key: 'bemCandidatos', label: 'Bens de Candidatos', icon: '💰' },
+  { key: 'despesaCandidatos', label: 'Despesas de Candidatos', icon: '💸' },
+  { key: 'receitaCandidatos', label: 'Receitas de Candidatos', icon: '💵' },
+  { key: 'redeSocialCandidatos', label: 'Redes Sociais', icon: '📱' },
+  { key: 'fotosCandidatos', label: 'Fotos de Candidatos (API)', icon: '📸' },
+];
+
+const DataAvailabilityTable: React.FC<DataAvailabilityTableProps> = ({ stats, sortedYears }) => {
+  return (
+    <div className="bg-gray-800/10 backdrop-blur-xs rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.005] transition-all duration-200 overflow-hidden ring-1 ring-gray-700 hover:ring-indigo-300">
+      <div className="p-6 border-b border-gray-700/30 bg-gray-800/10">
+        <h2 className="text-2xl font-bold text-white">
+          Matriz de Disponibilidade
+        </h2>
+        <p className="text-gray-400 mt-2">
+          ✅ Disponível • ❌ Não Disponível
+        </p>
+      </div>
+      
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-gray-800/10">
+              <th className="text-left p-4 text-white font-semibold border-b border-gray-700/30 sticky left-0 bg-gray-800/10">
+                Tipo de Dado
+              </th>
+              {sortedYears.map((year, index) => (
+                <th 
+                  key={year} 
+                  className="text-center p-4 text-white font-semibold border-b border-gray-700/30 animate-slide-in-left"
+                  style={{ animationDelay: `${index * 50}ms` }}
+                >
+                  {year}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {dataTypes.map((dataType, rowIndex) => (
+              <tr 
+                key={dataType.key}
+                className="hover:bg-gray-800/10 transition-all duration-300 animate-slide-in-left"
+                style={{ animationDelay: `${rowIndex * 100}ms` }}
+              >
+                <td className="p-4 border-b border-gray-700/20 text-white sticky left-0 bg-gray-800/10">
+                  <div className="flex items-center space-x-3">
+                    <span className="text-xl">{dataType.icon}</span>
+                    <span>{dataType.label}</span>
+                  </div>
+                </td>
+                {sortedYears.map((year) => {
+                  const isAvailable = (stats[dataType.key as keyof OpenCandDataAvailabilityStats] as number[]).includes(year);
+                  return (
+                    <td key={year} className="text-center p-4 border-b border-gray-700/20">
+                      <div className={`inline-flex items-center justify-center w-8 h-8 rounded-full transition-all duration-100 ${isAvailable ? 'bg-green-500/20 text-green-300 hover:bg-green-500/30 hover:scale-110 hover:cursor-default' : 'bg-red-500/20 text-red-300 hover:bg-red-500/30 hover:cursor-default'}`}>
+                        {isAvailable ? '✅' : '❌'}
+                      </div>
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default DataAvailabilityTable;

src/components/DataStats/DbIndexesStats.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface DbIndexesStatsProps {
+  amount: number;
+  size: number;
+}
+
+const formatSize = (sizeInBytes: number): string => {
+  const sizeMB = sizeInBytes / 1024 / 1024;
+  return sizeMB > 1024
+    ? `${(sizeMB / 1024).toFixed(2)} GB`
+    : `${sizeMB.toFixed(2)} MB`;
+};
+
+const DbIndexesStats: React.FC<DbIndexesStatsProps> = ({ amount, size }) => {
+  return (
+    <div>
+      <h3 className="text-xl font-semibold text-white mb-2">Índices</h3>
+      <div className="overflow-x-auto max-h-96 flex justify-center" style={{maxHeight: '28rem'}}>
+        <table className="w-auto text-left border-collapse mx-auto">
+          <thead>
+            <tr className="bg-gray-800/10">
+              <th className="p-3 text-white font-semibold border-b border-gray-700/30">Quantidade</th>
+              <th className="p-3 text-white font-semibold border-b border-gray-700/30">Tamanho Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="p-3 text-gray-300">{amount}</td>
+              <td className="p-3 text-gray-300">{formatSize(size)}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default DbIndexesStats;

src/components/DataStats/DbStatsTable.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface DbStatItem {
+  name: string;
+  totalSize: number;
+  entries: number;
+}
+
+interface DbStatsTableProps {
+  title: string;
+  items: DbStatItem[];
+  showTotal?: boolean;
+}
+
+const formatSize = (sizeInBytes: number): string => {
+  const sizeMB = sizeInBytes / 1024 / 1024;
+  return sizeMB > 1024
+    ? `${(sizeMB / 1024).toFixed(2)} GB`
+    : `${sizeMB.toFixed(2)} MB`;
+};
+
+const DbStatsTable: React.FC<DbStatsTableProps> = ({ title, items, showTotal = false }) => {
+  const totalSize = showTotal ? items.reduce((acc, item) => acc + item.totalSize, 0) : 0;
+  const totalEntries = showTotal ? items.reduce((acc, item) => acc + item.entries, 0) : 0;
+
+  return (
+    <div>
+      <h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
+      <div className="overflow-x-auto" style={{maxHeight: '32rem'}}>
+        <table className="w-full text-left border-collapse">
+          <thead>
+            <tr className="bg-gray-800/10">
+              <th className="p-3 text-white font-semibold border-b border-gray-700/30">Nome</th>
+              <th className="p-3 text-white font-semibold border-b border-gray-700/30">Tamanho Total</th>
+              <th className="p-3 text-white font-semibold border-b border-gray-700/30">Entradas</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item) => (
+              <tr key={item.name} className="hover:bg-gray-800/10 transition-all duration-200">
+                <td className="p-3 text-white">{item.name.replace(/^public\./, '')}</td>
+                <td className="p-3 text-gray-300">{formatSize(item.totalSize)}</td>
+                <td className="p-3 text-gray-300">{item.entries.toLocaleString()}</td>
+              </tr>
+            ))}
+            {showTotal && (
+              <tr className="font-bold bg-gray-900/30">
+                <td className="p-3 text-white">Total</td>
+                <td className="p-3 text-gray-300">{formatSize(totalSize)}</td>
+                <td className="p-3 text-gray-300">{totalEntries.toLocaleString()}</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default DbStatsTable;

src/components/DataStatsPage.tsx

@@ -4,6 +4,10 @@ import { openCandApi } from '../api';
 import type { OpenCandDataAvailabilityStats, OpenCandDatabaseStats } from '../api/apiModels';
 import Card from '../shared/Card';
 import ErrorPage from './ErrorPage';
+import DataAvailabilityTable from './DataStats/DataAvailabilityTable';
+import DbStatsTable from './DataStats/DbStatsTable';
+import GradientButton from '../shared/GradientButton';
+import DbIndexesStats from './DataStats/DbIndexesStats';
 
 const DataStatsPage: React.FC = () => {
   const [stats, setStats] = useState<OpenCandDataAvailabilityStats | null>(null);
@@ -78,15 +82,6 @@ const DataStatsPage: React.FC = () => {
   });
   const sortedYears = Array.from(allYears).sort((a, b) => b - a);
 
-  const dataTypes = [
-    { key: 'candidatos', label: 'Candidatos', icon: '👤' },
-    { key: 'bemCandidatos', label: 'Bens de Candidatos', icon: '💰' },
-    { key: 'despesaCandidatos', label: 'Despesas de Candidatos', icon: '💸' },
-    { key: 'receitaCandidatos', label: 'Receitas de Candidatos', icon: '💵' },
-    { key: 'redeSocialCandidatos', label: 'Redes Sociais', icon: '📱' },
-    { key: 'fotosCandidatos', label: 'Fotos de Candidatos (API)', icon: '📸' },
-  ];
-
   return (
     <div className="min-h-screen py-20 px-4 hover:cursor-default">
       <div className="max-w-7xl mx-auto">
@@ -107,15 +102,15 @@ const DataStatsPage: React.FC = () => {
             <FaCloudDownloadAlt className="text-3xl text-green-400" />
             <span className="text-lg font-semibold text-white">Download do Dump do Banco de Dados</span>
           </div>
-          <a
+          <GradientButton
             href="https://drive.google.com/file/d/1cfMItrsAdv8y8YUNp04D33s6pYrRbmDn/view?usp=sharing"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 py-2 px-5 bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 transform shadow-lg hover:shadow-xl"
+            className="inline-flex items-center gap-2 py-2 px-5"
           >
             <FaGoogleDrive className="text-xl" />
             Google Drive
-          </a>
+          </GradientButton>
         </div>
 
         {/* Stats Cards */}
@@ -123,7 +118,7 @@ const DataStatsPage: React.FC = () => {
           <Card hasAnimation={true} className="bg-gray-800/10 rounded-xl">
             <div className="text-center">
               <div className="text-3xl mb-2">📊</div>
-              <div className="text-2xl font-bold text-white">{dataTypes.length}</div>
+              <div className="text-2xl font-bold text-white">6</div>
               <div className="text-gray-400">Tipos de Dados</div>
             </div>
           </Card>
@@ -146,70 +141,7 @@ const DataStatsPage: React.FC = () => {
         </div>
 
         {/* Data Availability Table */}
-        <div className="bg-gray-800/10 backdrop-blur-xs rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.005] transition-all duration-200 overflow-hidden ring-1 ring-gray-700 hover:ring-indigo-300">
+        <DataAvailabilityTable stats={stats} sortedYears={sortedYears} />
-          <div className="p-6 border-b border-gray-700/30 bg-gray-800/10">
-            <h2 className="text-2xl font-bold text-white">
-              Matriz de Disponibilidade
-            </h2>
-            <p className="text-gray-400 mt-2">
-              ✅ Disponível • ❌ Não Disponível
-            </p>
-          </div>
-          
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-800/10">
-                  <th className="text-left p-4 text-white font-semibold border-b border-gray-700/30 sticky left-0 bg-gray-800/10">
-                    Tipo de Dado
-                  </th>
-                  {sortedYears.map((year, index) => (
-                    <th 
-                      key={year} 
-                      className="text-center p-4 text-white font-semibold border-b border-gray-700/30 animate-slide-in-left"
-                      style={{ animationDelay: `${index * 50}ms` }}
-                    >
-                      {year}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {dataTypes.map((dataType, rowIndex) => (
-                  <tr 
-                    key={dataType.key}
-                    className="hover:bg-gray-800/10 transition-all duration-300 animate-slide-in-left"
-                    style={{ animationDelay: `${rowIndex * 100}ms` }}
-                  >
-                    <td className="p-4 border-b border-gray-700/20 text-white sticky left-0 bg-gray-800/10">
-                      <div className="flex items-center space-x-3">
-                        <span className="text-xl">{dataType.icon}</span>
-                        <span>{dataType.label}</span>
-                      </div>
-                    </td>
-                    {sortedYears.map((year) => {
-                      const isAvailable = (stats[dataType.key as keyof OpenCandDataAvailabilityStats] as number[]).includes(year);
-                      return (
-                        <td 
-                          key={year} 
-                          className="text-center p-4 border-b border-gray-700/20"
-                        >
-                          <div className={`inline-flex items-center justify-center w-8 h-8 rounded-full transition-all duration-100 ${
-                            isAvailable 
-                              ? 'bg-green-500/20 text-green-300 hover:bg-green-500/30 hover:scale-110 hover:cursor-default' 
-                              : 'bg-red-500/20 text-red-300 hover:bg-red-500/30 hover:cursor-default'
-                          }`}>
-                            {isAvailable ? '✅' : '❌'}
-                          </div>
-                        </td>
-                      );
-                    })}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
       </div>
 
       {/* Database Tech Stats Section */}
@@ -228,110 +160,9 @@ const DataStatsPage: React.FC = () => {
             <div className="p-8 text-red-400">{dbError}</div>
           ) : dbStats ? (
             <div className="p-6 space-y-10">
-              {/* Tables */}
+              <DbStatsTable title="Tabelas" items={dbStats.tables} showTotal />
-              <div>
+              <DbStatsTable title="Views Materializadas" items={dbStats.materializedViews} />
-                <h3 className="text-xl font-semibold text-white mb-2">Tabelas</h3>
+              <DbIndexesStats amount={dbStats.indexes.amount} size={dbStats.indexes.size} />
-                <div className="overflow-x-auto max-h-112" style={{maxHeight: '32rem'}}>
-                  <table className="w-full text-left border-collapse">
-                    <thead>
-                      <tr className="bg-gray-800/10">
-                        <th className="p-3 text-white font-semibold border-b border-gray-700/30">Nome</th>
-                        <th className="p-3 text-white font-semibold border-b border-gray-700/30">Tamanho Total</th>
-                        <th className="p-3 text-white font-semibold border-b border-gray-700/30">Entradas</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {dbStats.tables.map((table) => {
-                        const name = table.name.replace(/^public\./, '');
-                        const sizeMB = table.totalSize / 1024 / 1024;
-                        const sizeDisplay = sizeMB > 1024
-                          ? `${(sizeMB / 1024).toFixed(2)} GB`
-                          : `${sizeMB.toFixed(2)} MB`;
-                        return (
-                          <tr key={table.name} className="hover:bg-gray-800/10 transition-all duration-200">
-                            <td className="p-3 text-white">{name}</td>
-                            <td className="p-3 text-gray-300">{sizeDisplay}</td>
-                            <td className="p-3 text-gray-300">{table.entries.toLocaleString()}</td>
-                          </tr>
-                        );
-                      })}
-                      {/* Total row */}
-                      {(() => {
-                        const totalSize = dbStats.tables.reduce((acc, t) => acc + t.totalSize, 0);
-                        const totalEntries = dbStats.tables.reduce((acc, t) => acc + t.entries, 0);
-                        const totalMB = totalSize / 1024 / 1024;
-                        const totalDisplay = totalMB > 1024
-                          ? `${(totalMB / 1024).toFixed(2)} GB`
-                          : `${totalMB.toFixed(2)} MB`;
-                        return (
-                          <tr className="font-bold bg-gray-900/30">
-                            <td className="p-3 text-white">Total</td>
-                            <td className="p-3 text-gray-300">{totalDisplay}</td>
-                            <td className="p-3 text-gray-300">{totalEntries.toLocaleString()}</td>
-                          </tr>
-                        );
-                      })()}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              {/* Materialized Views */}
-              <div>
-                <h3 className="text-xl font-semibold text-white mb-2">Views Materializadas</h3>
-                <div className="overflow-x-auto max-h-96" style={{maxHeight: '28rem'}}>
-                  <table className="w-full text-left border-collapse">
-                    <thead>
-                      <tr className="bg-gray-800/10">
-                        <th className="p-3 text-white font-semibold border-b border-gray-700/30">Nome</th>
-                        <th className="p-3 text-white font-semibold border-b border-gray-700/30">Tamanho Total</th>
-                        <th className="p-3 text-white font-semibold border-b border-gray-700/30">Entradas</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {dbStats.materializedViews.map((view) => {
-                        const name = view.name.replace(/^public\./, '');
-                        const sizeMB = view.totalSize / 1024 / 1024;
-                        const sizeDisplay = sizeMB > 1024
-                          ? `${(sizeMB / 1024).toFixed(2)} GB`
-                          : `${sizeMB.toFixed(2)} MB`;
-                        return (
-                          <tr key={view.name} className="hover:bg-gray-800/10 transition-all duration-200">
-                            <td className="p-3 text-white">{name}</td>
-                            <td className="p-3 text-gray-300">{sizeDisplay}</td>
-                            <td className="p-3 text-gray-300">{view.entries.toLocaleString()}</td>
-                          </tr>
-                        );
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              {/* Indexes */}
-              <div>
-                <h3 className="text-xl font-semibold text-white mb-2">Índices</h3>
-                <div className="overflow-x-auto max-h-96 flex justify-center" style={{maxHeight: '28rem'}}>
-                  <table className="w-auto text-left border-collapse mx-auto">
-                    <thead>
-                      <tr className="bg-gray-800/10">
-                        <th className="p-3 text-white font-semibold border-b border-gray-700/30">Quantidade</th>
-                        <th className="p-3 text-white font-semibold border-b border-gray-700/30">Tamanho Total</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td className="p-3 text-gray-300">{dbStats.indexes.amount}</td>
-                        {(() => {
-                          const sizeMB = dbStats.indexes.size / 1024 / 1024;
-                          const sizeDisplay = sizeMB > 1024
-                            ? `${(sizeMB / 1024).toFixed(2)} GB`
-                            : `${sizeMB.toFixed(2)} MB`;
-                          return <td className="p-3 text-gray-300">{sizeDisplay}</td>;
-                        })()}
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
             </div>
           ) : null}
         </div>

src/components/ErrorPage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import GradientButton from '../shared/GradientButton';
 
 interface ErrorPageProps {
   title: string;
@@ -21,12 +22,9 @@ const ErrorPage: React.FC<ErrorPageProps> = ({ title, description, helperText })
         </div>
         
         <div className="space-y-4">
-          <Link
+          <GradientButton to="/" className="inline-block px-8 py-3">
-            to="/"
-            className="inline-block px-8 py-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 transform shadow-lg hover:shadow-xl"
-          >
             Voltar para a página inicial
-          </Link>
+          </GradientButton>
           
           {helperText && (
             <div className="mt-6">

src/components/HeroSection.tsx

@@ -9,6 +9,7 @@ const HeroSection: React.FC = () => {
       style={{ backgroundImage: "url('/assets/Congresso_Nacional_hero.jpg')" }}
     >
       <div className="absolute inset-0 bg-black/60"></div>
+      <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-[#0a0f1a] to-transparent"></div>
       <div className="relative z-10 text-center max-w-6xl">
         <h1 className="text-5xl md:text-7xl font-bold mb-6">
           Explore Dados Eleitorais

src/components/SearchBar.tsx

@@ -15,9 +15,11 @@ const SearchBar: React.FC<SearchBarProps> = ({ className = '' }) => {
   const [showResults, setShowResults] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [isFocused, setIsFocused] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
   const navigate = useNavigate();
   const searchTimeoutRef = useRef<number | null>(null);
   const resultsRef = useRef<HTMLDivElement>(null);
+  const resultsContainerRef = useRef<HTMLDivElement>(null);
 
   // Debounced search function
   const performSearch = useCallback(async (query: string) => {
@@ -74,10 +76,12 @@ const SearchBar: React.FC<SearchBarProps> = ({ className = '' }) => {
   // Handle form submission
   const handleSubmit = useCallback((e: React.FormEvent) => {
     e.preventDefault();
-    if (searchResults.length > 0) {
+    if (activeIndex > -1 && searchResults[activeIndex]) {
+      handleCandidateSelect(searchResults[activeIndex]);
+    } else if (searchResults.length > 0) {
       handleCandidateSelect(searchResults[0]);
     }
-  }, [searchResults, handleCandidateSelect]);
+  }, [searchResults, handleCandidateSelect, activeIndex]);
 
   // Close results when clicking outside
   useEffect(() => {
@@ -93,6 +97,43 @@ const SearchBar: React.FC<SearchBarProps> = ({ className = '' }) => {
     };
   }, []);
 
+  // Reset active index when search results change
+  useEffect(() => {
+    setActiveIndex(-1);
+  }, [searchResults]);
+
+  // Scroll active item into view
+  useEffect(() => {
+    if (activeIndex < 0 || !resultsContainerRef.current) return;
+
+    const resultsContainer = resultsContainerRef.current;
+    const activeButton = resultsContainer.children[activeIndex] as HTMLElement;
+
+    if (activeButton) {
+      activeButton.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }
+  }, [activeIndex]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      setShowResults(false);
+      return;
+    }
+
+    if (showResults && searchResults.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveIndex(prevIndex => (prevIndex + 1) % searchResults.length);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveIndex(prevIndex => (prevIndex - 1 + searchResults.length) % searchResults.length);
+      }
+    }
+  };
+
   const getCandidateDescription = (candidate: Candidate) => {
     const desc = [''];
 
@@ -126,6 +167,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ className = '' }) => {
             onChange={handleInputChange}
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}
+            onKeyDown={handleKeyDown}
             placeholder="Pesquisar candidatos..." 
             className="flex-grow bg-transparent text-white placeholder-gray-400 p-3 focus:outline-none"
             autoComplete="off"
@@ -160,12 +202,13 @@ const SearchBar: React.FC<SearchBarProps> = ({ className = '' }) => {
               {error}
             </div>
           ) : (
-            <div className="max-h-80 overflow-y-auto custom-scrollbar">
+            <div ref={resultsContainerRef} className="max-h-80 overflow-y-auto custom-scrollbar">
-              {searchResults.map((candidate) => (
+              {searchResults.map((candidate, index) => (
                 <button
                   key={candidate.idCandidato}
                   onClick={() => handleCandidateSelect(candidate)}
-                  className="w-full p-4 text-left hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-b-0 focus:outline-none focus:bg-gray-100"
+                  onMouseEnter={() => setActiveIndex(index)}
+                  className={`w-full p-4 text-left hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-b-0 focus:outline-none focus:bg-gray-100 ${index === activeIndex ? 'bg-gray-100' : ''}`}
                 >
                   <div className="text-black font-semibold text-base">{candidate.nome}</div>
                   <div className="text-gray-600 text-sm mt-1">

src/components/StatisticsPage/StatisticsGraphs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { StatisticsData } from './statisticsRequests';
-import GlassCard from '../../shared/GlassCard';
+import WhiteCard from '../../shared/WhiteCard';
 
 interface StatisticsGraphsProps {
   isLoading: boolean;
@@ -16,29 +16,29 @@ const StatisticsGraphs: React.FC<StatisticsGraphsProps> = ({
   const [currentEnrichmentIndex, setCurrentEnrichmentIndex] = React.useState(0);
   if (error) {
     return (
-      <GlassCard className="flex items-center justify-center h-64">
+      <WhiteCard className="flex items-center justify-center h-64">
         <div className="text-center">
           <div className="text-red-600 text-lg mb-2">⚠️ Erro</div>
           <p className="text-gray-700">{error}</p>
         </div>
-      </GlassCard>
+      </WhiteCard>
     );
   }
 
   if (isLoading) {
     return (
-      <GlassCard className="flex items-center justify-center h-64">
+      <WhiteCard className="flex items-center justify-center h-64">
         <div className="text-center">
           <div className="animate-spin w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full mx-auto mb-4"></div>
           <p className="text-gray-700">Carregando dados...</p>
         </div>
-      </GlassCard>
+      </WhiteCard>
     );
   }
 
   if (!statisticsData) {
     return (
-      <GlassCard className="flex items-center justify-center h-64">
+      <WhiteCard className="flex items-center justify-center h-64">
         <div className="text-center">
           <div className="text-gray-500 text-4xl mb-4">📊</div>
           <h3 className="text-gray-900 text-lg mb-2">Nenhum dado encontrado</h3>
@@ -46,19 +46,19 @@ const StatisticsGraphs: React.FC<StatisticsGraphsProps> = ({
             Os dados estatísticos não puderam ser carregados
           </p>
         </div>
-      </GlassCard>
+      </WhiteCard>
     );
   }
 
   const renderDataTable = (title: string, data: any[], type: 'candidate' | 'party' | 'state' | 'enrichment') => {
     if (!data || data.length === 0) {
       return (
-        <GlassCard>
+        <WhiteCard>
           <div>
             <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
             <p className="text-gray-700">Nenhum dado disponível</p>
           </div>
-        </GlassCard>
+        </WhiteCard>
       );
     }
 
@@ -79,7 +79,7 @@ const StatisticsGraphs: React.FC<StatisticsGraphsProps> = ({
       };
 
       return (
-        <GlassCard>
+        <WhiteCard>
           <div className="relative">
             <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
             <div className="space-y-3">
@@ -157,12 +157,12 @@ const StatisticsGraphs: React.FC<StatisticsGraphsProps> = ({
               </div>
             )}
           </div>
-        </GlassCard>
+        </WhiteCard>
       );
     }
 
     return (
-      <GlassCard>
+      <WhiteCard>
         <div>
           <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
           <div className="overflow-auto max-h-90 overflow-y-auto custom-scrollbar pr-2">
@@ -210,7 +210,7 @@ const StatisticsGraphs: React.FC<StatisticsGraphsProps> = ({
             </table>
           </div>
         </div>
-      </GlassCard>
+      </WhiteCard>
     );
   };
 

src/components/StatisticsPage/StatisticsPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import GlassCard from '../../shared/GlassCard';
+import WhiteCard from '../../shared/WhiteCard';
 import StatisticsFilters from './StatisticsFilters';
 import StatisticsGraphs from './StatisticsGraphs';
 import { fetchAllStatisticsData, type StatisticsData, type StatisticsRequestOptions } from './statisticsRequests';
@@ -75,7 +75,7 @@ const StatisticsPage: React.FC = () => {
         <div className="flex gap-6 ">
           {/* Left Sidebar - Filters (20% width) */}
           <div className="w-1/5 min-w-[300px] h-[calc(100vh-12rem)]">
-            <GlassCard 
+            <WhiteCard 
               fullHeight 
               className="overflow-y-auto"
             >
@@ -84,7 +84,7 @@ const StatisticsPage: React.FC = () => {
                 onFiltersChange={handleFiltersChange}
                 isLoading={isLoading}
               />
-            </GlassCard>
+            </WhiteCard>
           </div>
 
           {/* Right Content - Graphs (80% width) */}

src/shared/GradientButton.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Link, type LinkProps } from 'react-router-dom';
+
+interface GradientButtonProps extends React.PropsWithChildren {
+  className?: string;
+  to?: LinkProps['to'];
+  href?: string;
+  [x: string]: any; // To allow other props like target, rel, type, etc.
+}
+
+const GradientButton: React.FC<GradientButtonProps> = ({
+  children,
+  className = '',
+  to,
+  href,
+  ...props
+}) => {
+  const baseClasses =
+    'bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 transform shadow-lg hover:shadow-xl';
+
+  const combinedClassName = `${baseClasses} ${className}`;
+
+  if (to) {
+    return (
+      <Link to={to} {...props} className={combinedClassName}>
+        {children}
+      </Link>
+    );
+  }
+
+  if (href) {
+    return (
+      <a href={href} {...props} className={combinedClassName}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button type="button" {...props} className={combinedClassName}>
+      {children}
+    </button>
+  );
+};
+
+export default GradientButton;

src/shared/WhiteCard.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-interface GlassCardProps {
+interface WhiteCardProps {
   children: React.ReactNode;
   className?: string;
   fullHeight?: boolean;
   padding?: string;
 }
 
-const GlassCard: React.FC<GlassCardProps> = ({
+const WhiteCard: React.FC<WhiteCardProps> = ({
   children,
   className = '',
   fullHeight = false,
@@ -27,4 +27,4 @@ const GlassCard: React.FC<GlassCardProps> = ({
   );
 };
 
-export default GlassCard;
+export default WhiteCard;