Update package dependencies, add energy consumption data to series.json, and create a technical glossary page
This commit is contained in:
Lucas Rayan committed
1 parent
2871877d44
commit
09fa8079fd
13 files changed
+1685
-893
No files matched your search
+118
-100
@@ -81,84 +81,87 @@ export default function Comparacao() {
|
||||
|
||||
const renderValue = (value) => {
|
||||
if (!value || value === "Não") {
|
||||
return <span className="text-red-500 font-semibold">✗</span>;
|
||||
return <span className="text-slate-400 font-medium">—</span>;
|
||||
}
|
||||
if (value === "Sim") {
|
||||
return <span className="text-green-500 font-semibold">✓</span>;
|
||||
return <span className="text-slate-700 font-semibold">✓</span>;
|
||||
}
|
||||
return <span className="text-gray-700">{value}</span>;
|
||||
return <span className="text-slate-800 font-medium">{value}</span>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<div className="bg-gray-50 min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="px-4 pt-16 pb-8 max-w-7xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<div className="inline-block mb-6">
|
||||
<div className="bg-linear-to-r from-blue-600 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
|
||||
📊 Compare Séries
|
||||
<main id="conteudo" className="px-4 pt-16 pb-20 max-w-7xl mx-auto">
|
||||
<section className="mb-16">
|
||||
<div className="border-l-4 border-slate-700 pl-6 mb-8">
|
||||
<p className="text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
|
||||
Análise Técnica Comparativa
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||
Comparação de Séries ESP32
|
||||
</h1>
|
||||
<p className="text-base text-slate-600 max-w-3xl leading-relaxed">
|
||||
Análise detalhada de especificações técnicas para seleção de microcontroladores ESP32
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<div className="bg-white border border-slate-200 rounded-lg p-6 mb-6">
|
||||
<h2 className="text-xl font-semibold text-slate-900 mb-2">
|
||||
Seleção de Modelos
|
||||
</h2>
|
||||
<p className="text-sm text-slate-600 mb-6">
|
||||
Selecione de 2 a 4 séries para análise comparativa
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
|
||||
{series.map(([key, seriesItem]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => toggleSeries(key)}
|
||||
className={`p-4 border rounded-lg transition-all duration-200 ${
|
||||
selectedSeries.includes(key)
|
||||
? 'border-slate-700 bg-slate-50 shadow-sm'
|
||||
: 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<div className="text-3xl mb-2">{seriesItem.icone}</div>
|
||||
<div className="text-xs font-semibold text-slate-800">{key}</div>
|
||||
{selectedSeries.includes(key) && (
|
||||
<div className="mt-2 flex justify-center">
|
||||
<div className="w-2 h-2 rounded-full bg-slate-700"></div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4">
|
||||
Comparação de Séries
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
Compare especificações técnicas entre diferentes séries ESP32 para escolher o ideal para seu projeto
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4 text-center">
|
||||
Selecione as Séries (2-4)
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
|
||||
{series.map(([key, seriesItem]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => toggleSeries(key)}
|
||||
className={`p-4 rounded-xl border-2 transition-all duration-300 transform hover:scale-105 ${
|
||||
selectedSeries.includes(key)
|
||||
? 'border-purple-500 shadow-lg bg-white'
|
||||
: 'border-gray-200 hover:border-gray-300 bg-white opacity-60'
|
||||
}`}
|
||||
style={{
|
||||
borderColor: selectedSeries.includes(key) ? seriesItem.cor : undefined
|
||||
}}
|
||||
>
|
||||
<div className="text-4xl mb-2">{seriesItem.icone}</div>
|
||||
<div className="text-sm font-semibold text-gray-800">{key}</div>
|
||||
{selectedSeries.includes(key) && (
|
||||
<div className="mt-2">
|
||||
<span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: seriesItem.cor }}></span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
<div className="flex justify-end">
|
||||
<div className="inline-flex items-center gap-2 bg-slate-100 px-4 py-2 rounded border border-slate-200">
|
||||
<span className="text-slate-700 font-medium text-sm">
|
||||
{selectedSeries.length} / 4 modelos selecionados
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-sm text-gray-500 mt-4">
|
||||
{selectedSeries.length} de 4 séries selecionadas
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200">
|
||||
<div className="bg-white border border-slate-200 shadow-sm overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-linear-to-r from-blue-600 to-purple-600">
|
||||
<th className="px-6 py-4 text-left text-white font-bold bg-linear-to-r from-blue-600 to-purple-600 z-10">
|
||||
<tr className="bg-slate-800 border-b border-slate-700">
|
||||
<th className="px-6 py-4 text-left text-white font-semibold text-sm uppercase tracking-wider sticky left-0 bg-slate-800 z-10">
|
||||
Especificação
|
||||
</th>
|
||||
{selectedSeries.map(seriesKey => {
|
||||
const seriesItem = seriesData[seriesKey];
|
||||
return (
|
||||
<th key={seriesKey} className="px-6 py-4 text-center text-white font-bold min-w-[200px]">
|
||||
<th key={seriesKey} className="px-6 py-4 text-center text-white font-semibold text-sm uppercase tracking-wider min-w-48">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<span className="text-3xl">{seriesItem.icone}</span>
|
||||
<span className="text-2xl">{seriesItem.icone}</span>
|
||||
<span>{seriesKey}</span>
|
||||
<span className="inline-block w-4 h-4 rounded-full" style={{ backgroundColor: seriesItem.cor }}></span>
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
@@ -168,21 +171,21 @@ export default function Comparacao() {
|
||||
<tbody>
|
||||
{compareFields.map(({ category, fields }) => (
|
||||
<>
|
||||
<tr key={category} className="bg-gray-100">
|
||||
<td colSpan={selectedSeries.length + 1} className="px-6 py-3 font-bold text-gray-800 bg-gray-100 z-10">
|
||||
<tr key={category} className="bg-slate-100 border-y border-slate-200">
|
||||
<td colSpan={selectedSeries.length + 1} className="px-6 py-3 font-semibold text-slate-800 text-sm uppercase tracking-wide">
|
||||
{category}
|
||||
</td>
|
||||
</tr>
|
||||
{fields.map(({ key, label }) => (
|
||||
<tr key={key} className="border-b border-gray-200 hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4 font-medium text-gray-700 bg-white z-10 border-r border-gray-200">
|
||||
<tr key={key} className="border-b border-slate-100 hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-3 font-medium text-slate-700 text-sm bg-white sticky left-0 border-r border-slate-100">
|
||||
{label}
|
||||
</td>
|
||||
{selectedSeries.map(seriesKey => {
|
||||
const seriesItem = seriesData[seriesKey];
|
||||
const value = seriesItem[key];
|
||||
return (
|
||||
<td key={seriesKey} className="px-6 py-4 text-center">
|
||||
<td key={seriesKey} className="px-6 py-3 text-center text-sm">
|
||||
{renderValue(value)}
|
||||
</td>
|
||||
);
|
||||
@@ -197,57 +200,72 @@ export default function Comparacao() {
|
||||
</div>
|
||||
|
||||
{/* Call-to-Action para Catálogo de Placas */}
|
||||
<div className="my-12 bg-linear-to-r from-blue-600 to-purple-600 rounded-3xl shadow-xl p-8 text-white">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="my-16 bg-slate-800 border border-slate-700 p-10">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl md:text-3xl font-bold mb-3 flex items-center gap-2">
|
||||
🛒 Encontrou a série ideal?
|
||||
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">
|
||||
Recursos Adicionais
|
||||
</p>
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
|
||||
Catálogo de Placas de Desenvolvimento
|
||||
</h3>
|
||||
<p className="text-lg text-blue-100 leading-relaxed text-justify">
|
||||
Confira nosso catálogo com placas de desenvolvimento verificadas das séries que você comparou.
|
||||
Links diretos para lojas oficiais e confiáveis!
|
||||
<p className="text-base text-slate-300 leading-relaxed">
|
||||
Acesse nossa base de placas de desenvolvimento verificadas com referências diretas para fornecedores oficiais.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/catalogo"
|
||||
className="bg-white text-purple-700 px-8 py-4 rounded-xl font-bold text-lg shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 whitespace-nowrap"
|
||||
className="inline-flex items-center justify-center gap-3 bg-white text-slate-800 px-6 py-3 font-semibold text-sm hover:bg-slate-100 transition-colors duration-200 whitespace-nowrap border border-slate-200"
|
||||
>
|
||||
Ver Placas Disponíveis →
|
||||
<span>Acessar Catálogo</span>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{selectedSeries.map(seriesKey => {
|
||||
const seriesItem = seriesData[seriesKey];
|
||||
return (
|
||||
<a
|
||||
key={seriesKey}
|
||||
href={seriesItem.datasheet}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 border-2"
|
||||
style={{ borderColor: seriesItem.cor }}
|
||||
>
|
||||
<div className="text-4xl mb-3">{seriesItem.icone}</div>
|
||||
<Link href={`/series/${seriesKey}`} className="no-underline">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">{seriesKey}</h3>
|
||||
</Link>
|
||||
<p className="text-sm text-gray-600">Datasheet Oficial</p>
|
||||
<a
|
||||
className="flex items-center text-purple-600 font-semibold"
|
||||
href={seriesItem.datasheet}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<div className="mt-12">
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-6 border-l-4 border-slate-700 pl-4">
|
||||
Documentação Técnica
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{selectedSeries.map(seriesKey => {
|
||||
const seriesItem = seriesData[seriesKey];
|
||||
return (
|
||||
<div
|
||||
key={seriesKey}
|
||||
className="bg-white border border-slate-200 p-5 hover:border-slate-300 hover:shadow-sm transition-all duration-200"
|
||||
>
|
||||
<span>Abrir PDF</span>
|
||||
<svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl">{seriesItem.icone}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Link href={`/series/${seriesKey}`} className="no-underline">
|
||||
<h4 className="text-base font-semibold text-slate-900 mb-1">{seriesKey}</h4>
|
||||
</Link>
|
||||
<p className="text-xs text-slate-600 mb-3">Documentação oficial</p>
|
||||
<a
|
||||
href={seriesItem.datasheet}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 text-xs font-medium text-slate-700 hover:text-slate-900"
|
||||
>
|
||||
<span>Datasheet</span>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in new issue
Block a user