melhorias no design

src/components/CandidatePage/CandidatePage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, Link } from 'react-router-dom';
 import { ArrowLeftIcon } from '@heroicons/react/24/outline';
 import { openCandApi, type CandidateDetails, type CandidateAssets, type CandidateRedesSociais, type CandidateExpenses, type CandidateIncome, ApiError } from '../../api';
 import ElectionsComponent from './ElectionsComponent';
@@ -7,6 +7,7 @@ import AssetsComponent from './AssetsComponent';
 import BasicCandidateInfoComponent from './BasicCandidateInfoComponent';
 import SocialMediaComponent from './SocialMediaComponent';
 import IncomeExpenseComponent from './IncomeExpenseComponent';
+import Button from '../../Components/Button';
 
 const CandidatePage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -116,12 +117,13 @@ const CandidatePage: React.FC = () => {
         <div className="text-center text-white">
           <h1 className="text-2xl font-bold mb-4">Erro</h1>
           <p className="text-red-400 mb-4">{error}</p>
-          <button
-            onClick={() => navigate('/')}
-            className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors"
+          <Link
+            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 ao Início
-          </button>
+            Voltar para a página inicial
+          </Link>
+          
         </div>
       </main>
     );
@@ -131,13 +133,14 @@ const CandidatePage: React.FC = () => {
     <main className="flex-grow p-6 max-w-7xl mx-auto">
       {/* Header with back button */}
       <div className="mb-6">
-        <button
+        <Button
           onClick={() => navigate('/')}
-          className="flex items-center text-white hover:text-gray-300 transition-colors mb-4"
+          className="flex items-center text-white mb-4"
+          hasAnimation={false}
         >
           <ArrowLeftIcon className="h-5 w-5 mr-2" />
           Voltar à busca
-        </button>
+        </Button>
         
         {candidateDetails && (
           <h1 className="text-3xl font-bold text-white">{candidateDetails.nome}</h1>