ivanch/opencand.ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more UI improvements
All checks were successful
Frontend Build and Deploy / build (push) Successful in 22s
Details

Browse Source
This commit is contained in:
José Henrique 2025-06-03 18:25:24 -03:00
parent 222d25f1d2
commit 475979a09a
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/FeaturesSection.tsx
View File

@ -1,9 +1,9 @@
import React from 'react'; 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 }) => { const FeatureCard: React.FC<{ icon: React.ElementType, title: string, children: React.ReactNode }> = ({ icon: Icon, title, children }) => {
return ( 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" /> <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> <h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
<p className="text-gray-400">{children}</p> <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"> <h2 className="text-3xl font-bold text-center text-white mb-12">
Por que OpenCand? Por que OpenCand?
</h2> </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"> <FeatureCard icon={DocumentTextIcon} title="Acesso Simplificado">
Navegue facilmente por dados complexos do TSE com uma interface limpa e amigável. Navegue facilmente por dados complexos do TSE com uma interface limpa e amigável.
</FeatureCard> </FeatureCard>
@ -28,6 +28,12 @@ const FeaturesSection: React.FC = () => {
<FeatureCard icon={LightBulbIcon} title="Insights Valiosos"> <FeatureCard icon={LightBulbIcon} title="Insights Valiosos">
Obtenha informações relevantes sobre candidatos, partidos e financiamento de campanhas. Obtenha informações relevantes sobre candidatos, partidos e financiamento de campanhas.
</FeatureCard> </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>
</div> </div>
</section> </section>

2
src/components/StatisticsSection.tsx
View File

@ -10,7 +10,7 @@ interface StatCardProps {
const StatCard: React.FC<StatCardProps> = ({ title, value, description, isLoading = false }) => { const StatCard: React.FC<StatCardProps> = ({ title, value, description, isLoading = false }) => {
return ( 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> <h3 className="text-indigo-400 text-xl font-semibold mb-2">{title}</h3>
{isLoading ? ( {isLoading ? (
<div className="h-12 flex items-center"> <div className="h-12 flex items-center">