From 475979a09a0b24d2a44c61f9859635fc75800c82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Henrique?= <jose.henrique.ivan@gmail.com>
Date: Tue, 3 Jun 2025 18:25:24 -0300
Subject: [PATCH] more UI improvements

---
 src/components/FeaturesSection.tsx   | 12 +++++++++---
 src/components/StatisticsSection.tsx |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/FeaturesSection.tsx b/src/components/FeaturesSection.tsx
index d54caa7..451c2ae 100644
--- a/src/components/FeaturesSection.tsx
+++ b/src/components/FeaturesSection.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { ChartBarIcon, DocumentTextIcon, LightBulbIcon } from '@heroicons/react/24/outline';
+import { ArrowDownOnSquareStackIcon, BookOpenIcon, ChartBarIcon, DocumentTextIcon, LightBulbIcon } from '@heroicons/react/24/outline';
 
 const FeatureCard: React.FC<{ icon: React.ElementType, title: string, children: React.ReactNode }> = ({ icon: Icon, title, children }) => {
   return (
-    <div className="bg-gray-800/30 p-6 rounded-lg backdrop-blur-xs">
+    <div className="bg-gray-800/30 p-6 rounded-lg backdrop-blur-xs shadow-xl ring-1 ring-gray-700 max-w-md">
       <Icon className="h-10 w-10 text-indigo-400 mb-4 mx-auto" />
       <h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
       <p className="text-gray-400">{children}</p>
@@ -18,7 +18,7 @@ const FeaturesSection: React.FC = () => {
         <h2 className="text-3xl font-bold text-center text-white mb-12">
           Por que OpenCand?
         </h2>
-        <div className="grid md:grid-cols-3 gap-8">
+        <div className="flex flex-wrap justify-center gap-8">
           <FeatureCard icon={DocumentTextIcon} title="Acesso Simplificado">
             Navegue facilmente por dados complexos do TSE com uma interface limpa e amigável.
           </FeatureCard>
@@ -28,6 +28,12 @@ const FeaturesSection: React.FC = () => {
           <FeatureCard icon={LightBulbIcon} title="Insights Valiosos">
             Obtenha informações relevantes sobre candidatos, partidos e financiamento de campanhas.
           </FeatureCard>
+          <FeatureCard icon={BookOpenIcon} title="Open Source">
+            Contribua para um projeto aberto e transparente, ajudando a melhorar a plataforma para todos.
+          </FeatureCard>
+          <FeatureCard icon={ArrowDownOnSquareStackIcon} title="Dados Abertos">
+            Os dados são acessíveis através do TSE e também disponibilizados em nosso repositório GitHub, garantindo transparência e confiabilidade.
+          </FeatureCard>
         </div>
       </div>
     </section>
diff --git a/src/components/StatisticsSection.tsx b/src/components/StatisticsSection.tsx
index 052f770..4f8b960 100644
--- a/src/components/StatisticsSection.tsx
+++ b/src/components/StatisticsSection.tsx
@@ -10,7 +10,7 @@ interface StatCardProps {
 
 const StatCard: React.FC<StatCardProps> = ({ title, value, description, isLoading = false }) => {
   return (
-    <div className="bg-gray-800/10 backdrop-blur-xs p-6 rounded-lg shadow-xl hover:shadow-indigo-500/30 transform hover:-translate-y-1 transition-all duration-300">
+    <div className="bg-gray-800/10 backdrop-blur-xs p-6 rounded-lg shadow-xl ring-1 ring-gray-700 hover:shadow-indigo-500/30 transform hover:-translate-y-1 hover:ring-1 hover:ring-white/10 hover:scale-[1.01] transition-all duration-300">
       <h3 className="text-indigo-400 text-xl font-semibold mb-2">{title}</h3>
       {isLoading ? (
         <div className="h-12 flex items-center">