45 lines
2.0 KiB
TypeScript
45 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { ArrowDownOnSquareStackIcon, BookOpenIcon, ChartBarIcon, DocumentTextIcon, LightBulbIcon } from '@heroicons/react/24/outline';
|
|
import Card from '../Components/Card';
|
|
|
|
const FeatureCard: React.FC<{ icon: React.ElementType, title: string, children: React.ReactNode }> = ({ icon: Icon, title, children }) => {
|
|
return (
|
|
<Card>
|
|
<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>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const FeaturesSection: React.FC = () => {
|
|
return (
|
|
<section id="features" className="py-20">
|
|
<div className="container mx-auto px-4">
|
|
<h2 className="text-3xl font-bold text-center text-white mb-12">
|
|
Por que OpenCand?
|
|
</h2>
|
|
<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>
|
|
<FeatureCard icon={ChartBarIcon} title="Visualizações Claras">
|
|
Entenda as tendências e padrões com gráficos e resumos visuais dos dados eleitorais.
|
|
</FeatureCard>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default FeaturesSection;
|