more UI improvements
All checks were successful
Frontend Build and Deploy / build (push) Successful in 22s
All checks were successful
Frontend Build and Deploy / build (push) Successful in 22s
This commit is contained in:
parent
222d25f1d2
commit
475979a09a
@ -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>
|
||||
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user