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
+1684
-892
No files matched your search
+19
-9
@@ -185,19 +185,29 @@ export default function PlacasPage() {
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 py-16">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-5xl font-extrabold bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent leading-relaxed mb-4">
|
||||
🛒 Catálogo de Placas ESP32
|
||||
<main id="conteudo" className="max-w-7xl mx-auto px-4 py-16">
|
||||
<section className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 bg-white/70 backdrop-blur-sm px-4 py-2 rounded-full mb-6 border border-purple-200 shadow-sm">
|
||||
<span className="text-xl">🛒</span>
|
||||
<span className="text-sm font-semibold text-gray-700">Encontre sua placa ideal</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-black bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent leading-tight mb-6 tracking-tight">
|
||||
Catálogo de Placas ESP32
|
||||
</h1>
|
||||
|
||||
<p className="text-2xl text-gray-600 mb-2">
|
||||
<p className="text-xl md:text-2xl text-gray-700 mb-4 font-medium">
|
||||
Encontre a placa perfeita para o seu projeto
|
||||
</p>
|
||||
<p className="text-md text-green-600 font-semibold flex items-center justify-center gap-2">
|
||||
✓ Todos os links são verificados e de fontes confiáveis
|
||||
</p>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 bg-green-50 px-6 py-3 rounded-full border-2 border-green-200">
|
||||
<svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<p className="text-sm text-green-700 font-bold">
|
||||
Todos os links são verificados e de fontes confiáveis
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid lg:grid-cols-4 gap-8">
|
||||
<div className="lg:col-span-1">
|
||||
|
||||
+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>
|
||||
|
||||
|
||||
+54
-32
@@ -10,17 +10,22 @@ export default function Frameworks() {
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="px-4 pt-16 pb-8 max-w-7xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<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">
|
||||
<main id="conteudo" className="px-4 pt-16 pb-20 max-w-7xl mx-auto">
|
||||
<section className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 bg-white/70 backdrop-blur-sm px-4 py-2 rounded-full mb-6 border border-purple-200 shadow-sm">
|
||||
<span className="text-xl">🛠️</span>
|
||||
<span className="text-sm font-semibold text-gray-700">Ferramentas de Desenvolvimento</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-black bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 leading-tight tracking-tight">
|
||||
Frameworks ESP32
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
|
||||
Descubra os frameworks e bibliotecas disponíveis para ESP32. De desenvolvimento geral a
|
||||
aplicações especializadas em áudio, visão computacional, IA e IoT.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{frameworks.map(([key, framework]) => (
|
||||
@@ -119,54 +124,71 @@ export default function Frameworks() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-4">
|
||||
🎓 Iniciante no ESP32?
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
<div className="mt-16 grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-linear-to-br from-white to-blue-50 rounded-3xl shadow-2xl p-8 border-2 border-blue-100">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-linear-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
|
||||
<span className="text-2xl">🎓</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">
|
||||
Iniciante no ESP32?
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-gray-700 mb-6 leading-relaxed text-base">
|
||||
Se você está começando, recomendo iniciar com
|
||||
<strong>Arduino</strong> ou
|
||||
<strong>MicroPython</strong>
|
||||
para prototipagem rápida, ou
|
||||
<strong>ESP-IDF</strong> para projetos profissionais com controle total.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Link href="/frameworks/Arduino" className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg text-sm font-semibold hover:bg-blue-200 transition-colors">
|
||||
📘 Arduino
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Link href="/frameworks/Arduino" className="inline-flex items-center gap-2 px-5 py-3 bg-blue-100 text-blue-700 rounded-xl text-sm font-bold hover:bg-blue-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
|
||||
<span className="text-lg">📘</span>
|
||||
<span>Arduino</span>
|
||||
</Link>
|
||||
<Link href="/frameworks/MicroPython" className="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg text-sm font-semibold hover:bg-purple-200 transition-colors">
|
||||
🐍 MicroPython
|
||||
<Link href="/frameworks/MicroPython" className="inline-flex items-center gap-2 px-5 py-3 bg-purple-100 text-purple-700 rounded-xl text-sm font-bold hover:bg-purple-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
|
||||
<span className="text-lg">🐍</span>
|
||||
<span>MicroPython</span>
|
||||
</Link>
|
||||
<Link href="/frameworks/ESP-IDF" className="px-4 py-2 bg-red-100 text-red-700 rounded-lg text-sm font-semibold hover:bg-red-200 transition-colors">
|
||||
⚙️ ESP-IDF
|
||||
<Link href="/frameworks/ESP-IDF" className="inline-flex items-center gap-2 px-5 py-3 bg-red-100 text-red-700 rounded-xl text-sm font-bold hover:bg-red-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
|
||||
<span className="text-lg">⚙️</span>
|
||||
<span>ESP-IDF</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-4">
|
||||
🚀 Aplicações Especializadas?
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
<div className="bg-linear-to-br from-white to-purple-50 rounded-3xl shadow-2xl p-8 border-2 border-purple-100">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-linear-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center">
|
||||
<span className="text-2xl">🚀</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">
|
||||
Aplicações Especializadas?
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-gray-700 mb-6 leading-relaxed text-base">
|
||||
Para projetos específicos, explore frameworks especializados como
|
||||
<strong>ESP-ADF</strong> (áudio),
|
||||
<strong>ESP-WHO</strong> (visão),
|
||||
<strong>ESP-NN</strong> (IA) ou
|
||||
<strong>ESP-Matter</strong> (smart home).
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Link href="/frameworks/ESP-ADF" className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg text-sm font-semibold hover:bg-blue-200 transition-colors">
|
||||
🎵 Áudio
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Link href="/frameworks/ESP-ADF" className="inline-flex items-center gap-2 px-5 py-3 bg-blue-100 text-blue-700 rounded-xl text-sm font-bold hover:bg-blue-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
|
||||
<span className="text-lg">🎵</span>
|
||||
<span>Áudio</span>
|
||||
</Link>
|
||||
<Link href="/frameworks/ESP-WHO" className="px-4 py-2 bg-orange-100 text-orange-700 rounded-lg text-sm font-semibold hover:bg-orange-200 transition-colors">
|
||||
📷 Visão
|
||||
<Link href="/frameworks/ESP-WHO" className="inline-flex items-center gap-2 px-5 py-3 bg-orange-100 text-orange-700 rounded-xl text-sm font-bold hover:bg-orange-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
|
||||
<span className="text-lg">📷</span>
|
||||
<span>Visão</span>
|
||||
</Link>
|
||||
<Link href="/frameworks/ESP-NN" className="px-4 py-2 bg-teal-100 text-teal-700 rounded-lg text-sm font-semibold hover:bg-teal-200 transition-colors">
|
||||
🧠 IA
|
||||
<Link href="/frameworks/ESP-NN" className="inline-flex items-center gap-2 px-5 py-3 bg-teal-100 text-teal-700 rounded-xl text-sm font-bold hover:bg-teal-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
|
||||
<span className="text-lg">🧠</span>
|
||||
<span>IA</span>
|
||||
</Link>
|
||||
<Link href="/frameworks/ESP-Matter" className="px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg text-sm font-semibold hover:bg-yellow-200 transition-colors">
|
||||
🏠 Smart Home
|
||||
<Link href="/frameworks/ESP-Matter" className="inline-flex items-center gap-2 px-5 py-3 bg-yellow-100 text-yellow-700 rounded-xl text-sm font-bold hover:bg-yellow-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
|
||||
<span className="text-lg">🏠</span>
|
||||
<span>Smart Home</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,474 @@
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
|
||||
export const metadata = {
|
||||
title: "ESPDocs - Glossário Técnico",
|
||||
description: "Glossário técnico em português com termos e conceitos do ecossistema ESP32",
|
||||
};
|
||||
|
||||
export default function Glossario() {
|
||||
const categorias = [
|
||||
{
|
||||
nome: "Processamento",
|
||||
icone: "🧠",
|
||||
cor: "blue",
|
||||
termos: [
|
||||
{
|
||||
termo: "Arquitetura",
|
||||
definicao: "Conjunto de instruções e design do processador. O ESP32 usa principalmente Xtensa (32-bit) ou RISC-V.",
|
||||
exemplo: "ESP32 clássico usa Xtensa LX6, enquanto ESP32-C3 usa RISC-V.",
|
||||
},
|
||||
{
|
||||
termo: "Núcleos (Cores)",
|
||||
definicao: "Unidades de processamento independentes. Dual-core permite executar duas tarefas simultaneamente.",
|
||||
exemplo: "ESP32 tem 2 núcleos (dual-core), ESP32-S2 tem 1 núcleo (single-core).",
|
||||
},
|
||||
{
|
||||
termo: "Frequência (Clock)",
|
||||
definicao: "Velocidade de processamento medida em MHz ou GHz. Quanto maior, mais rápido o processamento.",
|
||||
exemplo: "ESP32 opera de 80 MHz até 240 MHz.",
|
||||
},
|
||||
{
|
||||
termo: "ULP (Ultra Low Power) Coprocessador",
|
||||
definicao: "Processador secundário de baixíssimo consumo que pode operar enquanto o processador principal está em deep sleep.",
|
||||
exemplo: "Usado para ler sensores periodicamente sem despertar o CPU principal.",
|
||||
},
|
||||
{
|
||||
termo: "Aceleradores de IA",
|
||||
definicao: "Hardware dedicado para acelerar operações de inteligência artificial e redes neurais.",
|
||||
exemplo: "ESP32-P4 possui Vector Extension para processamento de IA.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
nome: "Memória",
|
||||
icone: "💾",
|
||||
cor: "purple",
|
||||
termos: [
|
||||
{
|
||||
termo: "SRAM (Static RAM)",
|
||||
definicao: "Memória volátil rápida usada para armazenar variáveis e stack do programa durante execução. Perde dados ao desligar.",
|
||||
exemplo: "ESP32 tem 520 KB de SRAM interna.",
|
||||
},
|
||||
{
|
||||
termo: "ROM (Read-Only Memory)",
|
||||
definicao: "Memória não-volátil com bootloader e funções básicas gravadas pela Espressif. Não pode ser alterada.",
|
||||
exemplo: "ESP32 tem 448 KB de ROM com código de boot.",
|
||||
},
|
||||
{
|
||||
termo: "Flash",
|
||||
definicao: "Memória não-volátil externa onde o firmware é armazenado. Mantém dados mesmo sem energia.",
|
||||
exemplo: "Placas comuns vêm com 4 MB ou 16 MB de Flash.",
|
||||
},
|
||||
{
|
||||
termo: "PSRAM (Pseudo-Static RAM)",
|
||||
definicao: "Memória RAM externa adicional para aplicações que precisam de mais memória (imagens, buffers grandes).",
|
||||
exemplo: "ESP32-CAM usa PSRAM de 4 MB ou 8 MB para armazenar frames de câmera.",
|
||||
},
|
||||
{
|
||||
termo: "RTC Memory",
|
||||
definicao: "Pequena quantidade de SRAM que mantém dados durante deep sleep, alimentada pelo RTC.",
|
||||
exemplo: "Usar RTC memory para guardar contador entre deep sleeps.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
nome: "Conectividade",
|
||||
icone: "📡",
|
||||
cor: "green",
|
||||
termos: [
|
||||
{
|
||||
termo: "Wi-Fi",
|
||||
definicao: "Comunicação sem fio padrão IEEE 802.11. ESP32 suporta 2.4 GHz (b/g/n), algumas séries suportam 5 GHz.",
|
||||
exemplo: "Conectar ESP32 à rede doméstica para IoT.",
|
||||
},
|
||||
{
|
||||
termo: "Bluetooth Classic",
|
||||
definicao: "Protocolo Bluetooth para transmissão de áudio e dados. Maior consumo que BLE.",
|
||||
exemplo: "Caixas de som Bluetooth, transmissão de áudio.",
|
||||
},
|
||||
{
|
||||
termo: "BLE (Bluetooth Low Energy)",
|
||||
definicao: "Versão de baixo consumo do Bluetooth, ideal para sensores e wearables.",
|
||||
exemplo: "Rastreadores, sensores de temperatura, smartwatches.",
|
||||
},
|
||||
{
|
||||
termo: "Zigbee",
|
||||
definicao: "Protocolo de mesh network de baixo consumo para automação residencial (IEEE 802.15.4).",
|
||||
exemplo: "Redes de sensores domésticos, lâmpadas inteligentes.",
|
||||
},
|
||||
{
|
||||
termo: "Thread",
|
||||
definicao: "Protocolo de mesh network baseado em IPv6 para dispositivos IoT.",
|
||||
exemplo: "Smart home devices com Matter.",
|
||||
},
|
||||
{
|
||||
termo: "Matter",
|
||||
definicao: "Padrão universal de smart home que funciona sobre Thread ou Wi-Fi, compatível com Alexa, Google Home, Apple Home.",
|
||||
exemplo: "Tomadas, lâmpadas e sensores compatíveis com todos os assistentes.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
nome: "Periféricos",
|
||||
icone: "🔌",
|
||||
cor: "orange",
|
||||
termos: [
|
||||
{
|
||||
termo: "GPIO (General Purpose Input/Output)",
|
||||
definicao: "Pinos configuráveis como entrada ou saída digital para conectar LEDs, botões, sensores.",
|
||||
exemplo: "GPIO2 geralmente é usado para LED onboard.",
|
||||
},
|
||||
{
|
||||
termo: "ADC (Analog-to-Digital Converter)",
|
||||
definicao: "Converte sinais analógicos (0-3.3V) em valores digitais para leitura de sensores analógicos.",
|
||||
exemplo: "Ler potenciômetro, sensor de luz LDR, tensão de bateria.",
|
||||
},
|
||||
{
|
||||
termo: "DAC (Digital-to-Analog Converter)",
|
||||
definicao: "Converte valores digitais em voltagem analógica (0-3.3V).",
|
||||
exemplo: "Gerar ondas de áudio, controle analógico de motores.",
|
||||
},
|
||||
{
|
||||
termo: "PWM (Pulse Width Modulation)",
|
||||
definicao: "Técnica para simular saída analógica variando a largura de pulsos digitais. Controla brilho, velocidade, etc.",
|
||||
exemplo: "Controlar brilho de LED, velocidade de motor DC.",
|
||||
},
|
||||
{
|
||||
termo: "Touch Capacitivo",
|
||||
definicao: "Sensores que detectam toque humano por mudança de capacitância, sem necessidade de botões físicos.",
|
||||
exemplo: "Botões touch, sliders, controles sensíveis ao toque.",
|
||||
},
|
||||
{
|
||||
termo: "UART (Universal Asynchronous Receiver/Transmitter)",
|
||||
definicao: "Comunicação serial assíncrona para trocar dados com módulos GPS, sensores, debug serial.",
|
||||
exemplo: "Monitor Serial da Arduino IDE usa UART.",
|
||||
},
|
||||
{
|
||||
termo: "SPI (Serial Peripheral Interface)",
|
||||
definicao: "Barramento serial síncrono de alta velocidade para displays, cartões SD, sensores.",
|
||||
exemplo: "Display TFT, módulo SD Card, sensor BME280.",
|
||||
},
|
||||
{
|
||||
termo: "I²C (Inter-Integrated Circuit)",
|
||||
definicao: "Barramento serial de 2 fios para conectar múltiplos dispositivos com endereços únicos.",
|
||||
exemplo: "Sensores BME280, displays OLED, RTC DS3231.",
|
||||
},
|
||||
{
|
||||
termo: "I²S (Inter-IC Sound)",
|
||||
definicao: "Interface para transmissão de áudio digital entre circuitos integrados.",
|
||||
exemplo: "Módulos de áudio MAX98357, microfones MEMS.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
nome: "Interfaces Especiais",
|
||||
icone: "✨",
|
||||
cor: "pink",
|
||||
termos: [
|
||||
{
|
||||
termo: "USB OTG (On-The-Go)",
|
||||
definicao: "Permite que ESP32 funcione como dispositivo USB (teclado, mouse, pen drive) ou host USB.",
|
||||
exemplo: "ESP32-S3 pode emular teclado USB ou ler pen drive.",
|
||||
},
|
||||
{
|
||||
termo: "JTAG",
|
||||
definicao: "Interface de debug e programação de baixo nível para desenvolvimento profissional.",
|
||||
exemplo: "Debug passo-a-passo com ESP-Prog ou J-Link.",
|
||||
},
|
||||
{
|
||||
termo: "SDIO (Secure Digital Input Output)",
|
||||
definicao: "Interface para cartões SD em modo de 4 bits de alta velocidade.",
|
||||
exemplo: "Gravar logs, armazenar fotos de câmera.",
|
||||
},
|
||||
{
|
||||
termo: "Ethernet MAC",
|
||||
definicao: "Controlador de rede Ethernet embutido. Requer PHY externo (chip LAN8720).",
|
||||
exemplo: "ESP32 com conexão Ethernet cabeada para IoT industrial.",
|
||||
},
|
||||
{
|
||||
termo: "Camera Interface",
|
||||
definicao: "Interface paralela para conectar câmeras (geralmente OV2640, OV5640).",
|
||||
exemplo: "ESP32-CAM, projetos de visão computacional.",
|
||||
},
|
||||
{
|
||||
termo: "LCD Interface",
|
||||
definicao: "Interface paralela RGB para displays LCD de alta resolução.",
|
||||
exemplo: "ESP32-S3 com display TFT 480x320 RGB.",
|
||||
},
|
||||
{
|
||||
termo: "MIPI CSI/DSI",
|
||||
definicao: "Interfaces de alta velocidade para câmeras (CSI) e displays (DSI) em aplicações avançadas.",
|
||||
exemplo: "ESP32-P4 com câmera MIPI de alta resolução.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
nome: "Gerenciamento de Energia",
|
||||
icone: "🔋",
|
||||
cor: "yellow",
|
||||
termos: [
|
||||
{
|
||||
termo: "Active Mode",
|
||||
definicao: "Modo de operação normal com CPU e periféricos funcionando. Maior consumo de energia.",
|
||||
exemplo: "ESP32 processando dados Wi-Fi: ~160-260 mA.",
|
||||
},
|
||||
{
|
||||
termo: "Modem Sleep",
|
||||
definicao: "CPU ativo mas Wi-Fi/Bluetooth desligados quando não há transmissão. Economia moderada.",
|
||||
exemplo: "Aplicações com comunicação intermitente.",
|
||||
},
|
||||
{
|
||||
termo: "Light Sleep",
|
||||
definicao: "CPU pausado mas RAM e RTC mantidos. Acorda rapidamente por timer ou GPIO.",
|
||||
exemplo: "Sensor que verifica dados a cada 1 segundo: ~0.8 mA.",
|
||||
},
|
||||
{
|
||||
termo: "Deep Sleep",
|
||||
definicao: "Tudo desligado exceto RTC e ULP. Consumo ultra baixo (~10 μA). Perde variáveis da RAM.",
|
||||
exemplo: "Sensor que envia dados a cada 1 hora e dorme entre envios.",
|
||||
},
|
||||
{
|
||||
termo: "Hibernation",
|
||||
definicao: "Modo mais profundo que deep sleep, desliga até RTC. Apenas timer ou reset externo acordam.",
|
||||
exemplo: "Dispositivo sazonal que acorda 1x por dia: ~5 μA.",
|
||||
},
|
||||
{
|
||||
termo: "Brownout Detector",
|
||||
definicao: "Circuito que reseta o ESP32 se a tensão cair abaixo de nível seguro (~2.8V) para evitar corrupção.",
|
||||
exemplo: "Proteção contra queda de tensão da fonte/bateria.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
nome: "Boot e Programação",
|
||||
icone: "🚀",
|
||||
cor: "red",
|
||||
termos: [
|
||||
{
|
||||
termo: "Bootloader",
|
||||
definicao: "Programa na ROM que inicia ao ligar e carrega o firmware da Flash para execução.",
|
||||
exemplo: "Primeiro código que roda ao dar power-on no ESP32.",
|
||||
},
|
||||
{
|
||||
termo: "Strapping Pins",
|
||||
definicao: "GPIOs lidos durante boot para definir modo de operação (flash, boot normal, etc). Cuidado ao usar!",
|
||||
exemplo: "GPIO0=LOW entra em modo flash. GPIO2, GPIO12, GPIO15 também são strapping pins.",
|
||||
},
|
||||
{
|
||||
termo: "Flash Mode",
|
||||
definicao: "Modo especial onde ESP32 aguarda upload de firmware via UART. Ativado por GPIO0=LOW + Reset.",
|
||||
exemplo: "Pressionar botão BOOT durante upload na Arduino IDE.",
|
||||
},
|
||||
{
|
||||
termo: "OTA (Over-The-Air)",
|
||||
definicao: "Atualização de firmware sem fio via Wi-Fi, sem necessidade de cabo USB.",
|
||||
exemplo: "Atualizar firmware de dispositivo instalado no teto.",
|
||||
},
|
||||
{
|
||||
termo: "Partições",
|
||||
definicao: "Divisões da Flash para armazenar bootloader, app, OTA, SPIFFS, NVS.",
|
||||
exemplo: "Partição de 3 MB para app, 1 MB para SPIFFS (sistema de arquivos).",
|
||||
},
|
||||
{
|
||||
termo: "NVS (Non-Volatile Storage)",
|
||||
definicao: "Área da Flash para armazenar configurações persistentes em formato chave-valor.",
|
||||
exemplo: "Salvar SSID e senha do Wi-Fi para reconectar após reboot.",
|
||||
},
|
||||
{
|
||||
termo: "SPIFFS / LittleFS",
|
||||
definicao: "Sistemas de arquivos para Flash, permitem armazenar arquivos (HTML, configs, logs).",
|
||||
exemplo: "Armazenar páginas HTML de servidor web no ESP32.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
nome: "Conceitos de Hardware",
|
||||
icone: "⚙️",
|
||||
cor: "gray",
|
||||
termos: [
|
||||
{
|
||||
termo: "Module vs Chip",
|
||||
definicao: "Chip é o processador ESP32 puro. Module inclui chip + Flash + antena em PCB certificado (ESP32-WROOM-32).",
|
||||
exemplo: "Comprar módulo WROOM é mais fácil que soldar chip ESP32 bruto.",
|
||||
},
|
||||
{
|
||||
termo: "DevKit / Development Board",
|
||||
definicao: "Placa com módulo ESP32 + conversor USB-Serial + regulador de tensão + pinos expostos para prototipagem.",
|
||||
exemplo: "ESP32-DevKitC, NodeMCU-32S.",
|
||||
},
|
||||
{
|
||||
termo: "Pinout",
|
||||
definicao: "Diagrama mostrando função de cada pino físico do chip/módulo.",
|
||||
exemplo: "Ver pinout para saber qual GPIO suporta ADC.",
|
||||
},
|
||||
{
|
||||
termo: "Pull-up / Pull-down",
|
||||
definicao: "Resistores internos que mantém GPIO em nível HIGH (pull-up) ou LOW (pull-down) quando não conectado.",
|
||||
exemplo: "GPIO com pull-up para botão que conecta ao GND.",
|
||||
},
|
||||
{
|
||||
termo: "Input-Only GPIO",
|
||||
definicao: "Alguns GPIOs (34-39 no ESP32 clássico) só funcionam como entrada, não como saída.",
|
||||
exemplo: "GPIO36 (VP) pode ler ADC mas não controlar LED.",
|
||||
},
|
||||
{
|
||||
termo: "Certificação (FCC/CE)",
|
||||
definicao: "Aprovação regulatória para vender produtos com rádio. Módulos pré-certificados simplificam o processo.",
|
||||
exemplo: "Usar ESP32-WROOM-32 (certificado) facilita venda comercial.",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-linear-to-br from-gray-50 via-purple-50 to-pink-50">
|
||||
<Header />
|
||||
|
||||
<main id="conteudo" className="px-4 pt-16 pb-20 max-w-7xl mx-auto">
|
||||
{/* Hero Section */}
|
||||
<section className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 bg-white/70 backdrop-blur-sm px-4 py-2 rounded-full mb-6 border border-purple-200 shadow-sm">
|
||||
<span className="text-xl">📖</span>
|
||||
<span className="text-sm font-semibold text-gray-700">Aprenda os Conceitos</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-black mb-6 bg-clip-text text-transparent bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 leading-tight tracking-tight">
|
||||
Glossário Técnico
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
|
||||
Entenda termos e conceitos do ecossistema ESP32 explicados em português,
|
||||
do básico ao avançado.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Navegação Rápida */}
|
||||
<section className="mb-12">
|
||||
<div className="bg-white rounded-3xl shadow-lg p-8 border-2 border-gray-100">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
|
||||
Navegação Rápida
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{categorias.map((cat) => (
|
||||
<a
|
||||
key={cat.nome}
|
||||
href={`#${cat.nome.toLowerCase().replace(/\s+/g, '-')}`}
|
||||
className="flex flex-col items-center gap-2 p-4 rounded-xl bg-linear-to-br from-gray-50 to-white border-2 border-gray-100 hover:border-purple-300 hover:shadow-md transition-all"
|
||||
>
|
||||
<span className="text-4xl">{cat.icone}</span>
|
||||
<span className="text-sm font-bold text-gray-800 text-center">
|
||||
{cat.nome}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Categorias de Termos */}
|
||||
<div className="space-y-12">
|
||||
{categorias.map((categoria) => (
|
||||
<section
|
||||
key={categoria.nome}
|
||||
id={categoria.nome.toLowerCase().replace(/\s+/g, '-')}
|
||||
className="scroll-mt-20"
|
||||
>
|
||||
<div className="bg-white rounded-3xl shadow-xl p-8 border-2 border-gray-100">
|
||||
{/* Header da Categoria */}
|
||||
<div className="flex items-center gap-4 mb-8 pb-6 border-b-2 border-gray-100">
|
||||
<div className={`w-16 h-16 bg-linear-to-br from-${categoria.cor}-500 to-${categoria.cor}-600 rounded-2xl flex items-center justify-center shadow-lg`}>
|
||||
<span className="text-3xl">{categoria.icone}</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-black text-gray-900">
|
||||
{categoria.nome}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Lista de Termos */}
|
||||
<div className="space-y-6">
|
||||
{categoria.termos.map((item, idx) => (
|
||||
<article
|
||||
key={idx}
|
||||
className="bg-linear-to-br from-gray-50 to-white p-6 rounded-2xl border-2 border-gray-100 hover:border-purple-200 transition-colors"
|
||||
>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-3">
|
||||
{item.termo}
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
{item.definicao}
|
||||
</p>
|
||||
<div className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-blue-600 font-bold text-sm shrink-0 mt-0.5">
|
||||
💡 Exemplo:
|
||||
</span>
|
||||
<p className="text-blue-900 text-sm leading-relaxed">
|
||||
{item.exemplo}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Call to Action */}
|
||||
<section className="mt-16 bg-linear-to-br from-blue-600 via-purple-600 to-pink-600 rounded-3xl shadow-2xl p-10 text-white border-2 border-purple-400">
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
<div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-4 border border-white/30">
|
||||
<span className="text-xl">🎯</span>
|
||||
<span className="text-sm font-semibold">Próximo Passo</span>
|
||||
</div>
|
||||
<h3 className="text-3xl md:text-4xl font-black mb-4">
|
||||
Pronto para Explorar?
|
||||
</h3>
|
||||
<p className="text-lg text-white/90 leading-relaxed mb-8">
|
||||
Agora que você conhece os conceitos, explore as séries ESP32 e compare
|
||||
especificações para encontrar a ideal para seu projeto.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/series"
|
||||
className="inline-flex items-center justify-center gap-2 bg-white text-purple-700 px-8 py-4 rounded-xl font-bold text-lg shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 group"
|
||||
>
|
||||
<span className="text-xl">⚡</span>
|
||||
<span>Ver Séries ESP32</span>
|
||||
<svg
|
||||
className="w-5 h-5 transition-transform group-hover:translate-x-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/frameworks"
|
||||
className="inline-flex items-center justify-center gap-2 bg-white/10 backdrop-blur-sm border-2 border-white/30 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/20 transition-all duration-300 group"
|
||||
>
|
||||
<span className="text-xl">🛠️</span>
|
||||
<span>Ver Frameworks</span>
|
||||
<svg
|
||||
className="w-5 h-5 transition-transform group-hover:translate-x-1"
|
||||
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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+103
-74
@@ -5,79 +5,102 @@ import Link from "next/link";
|
||||
export default function Home() {
|
||||
const resources = [
|
||||
{name: "Catálogo de Placas", description: "Encontre placas de desenvolvimento ESP32 verificadas com filtros avançados e links seguros para compra", icon: "🛒"},
|
||||
{name: "Detalhes Técnicos", description: "Explore as especificações técnicas de cada série ESP32, incluindo arquitetura, recursos e capacidades", icon: "🔧"},
|
||||
{name: "Diagramas Interativos", description: "Visualize diagramas detalhados dos componentes ESP32 com interatividade para melhor compreensão", icon: "📊"},
|
||||
{name: "Frameworks Avançados", description: "Aprenda sobre frameworks populares como ESP-IDF, Arduino e MicroPython para desenvolvimento com ESP32", icon: "⚡"},
|
||||
{name: "Comparação de Séries", description: "Compare diferentes séries ESP32 para escolher o mais adequado ao seu projeto", icon: "📈"},
|
||||
{name: "Datasheets", description: "Acesso direto aos datasheets oficiais para informações detalhadas sobre cada série", icon: "📄"},
|
||||
{name: "Exemplos de Código", description: "Encontre exemplos práticos de código para iniciar rapidamente seus projetos com ESP32", icon: "💻"},
|
||||
{name: "Atualizações Constantes", description: "Mantenha-se atualizado com as últimas novidades e lançamentos no ecossistema ESP32", icon: "🔄"},
|
||||
{name: "Conteúdo em Português", description: "Toda a documentação e recursos são apresentados em português para facilitar o entendimento", icon: "📚"},
|
||||
{name: "Especificações Organizadas", description: "Especificações técnicas de cada série ESP32 organizadas em tabelas comparativas em português", icon: "🔧"},
|
||||
{name: "Diagramas de Conexões", description: "Visualize diagramas interativos dos componentes e pinos de cada série ESP32", icon: "📊"},
|
||||
{name: "Informações sobre Frameworks", description: "Conheça frameworks como ESP-IDF, Arduino e MicroPython com descrições, casos de uso e exemplos", icon: "⚡"},
|
||||
{name: "Comparação de Séries", description: "Compare lado a lado as especificações de diferentes séries ESP32 em uma única visualização", icon: "📈"},
|
||||
{name: "Links para Documentação", description: "Acesso direto aos datasheets, manuais técnicos e guias oficiais da Espressif (em inglês)", icon: "📄"},
|
||||
{name: "Exemplos de Código", description: "Snippets de código básico para diferentes frameworks com links para repositórios oficiais", icon: "💻"},
|
||||
{name: "Informações Atualizadas", description: "Dados atualizados sobre as séries e frameworks mais recentes do ecossistema ESP32", icon: "🔄"},
|
||||
{name: "Interface em Português", description: "Navegação e organização de informações totalmente em português para facilitar a consulta", icon: "📚"},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="text-center px-4 pt-16 pb-8 max-w-5xl mx-auto">
|
||||
<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">
|
||||
🚀 Documentação em Português
|
||||
<main className="px-4 pt-12 pb-16 max-w-7xl mx-auto">
|
||||
{/* Hero Section */}
|
||||
<section className="text-center mb-20">
|
||||
<h1 className="text-5xl md:text-7xl lg:text-8xl font-black bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 tracking-tight">
|
||||
ESPDocs
|
||||
</h1>
|
||||
|
||||
<h2 className="text-xl md:text-2xl lg:text-3xl text-gray-800 font-bold mb-6 max-w-4xl mx-auto leading-tight">
|
||||
Organização e acesso facilitado ao ecossistema ESP32
|
||||
</h2>
|
||||
|
||||
<p className="text-base md:text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed mb-10">
|
||||
Plataforma não oficial com interface em português que organiza e centraliza
|
||||
informações sobre ESP32. Compare especificações, visualize diagramas e acesse
|
||||
a documentação oficial da Espressif.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<Link
|
||||
className="group inline-flex items-center gap-3 bg-linear-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-bold text-base shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300"
|
||||
href="/series"
|
||||
>
|
||||
<span className="text-xl">📚</span>
|
||||
<span>Explorar Séries ESP32</span>
|
||||
<svg className="w-5 h-5 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
className="group inline-flex items-center gap-3 bg-white text-gray-800 px-8 py-4 rounded-xl font-bold text-base shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-500 transform hover:-translate-y-1 transition-all duration-300"
|
||||
href="/frameworks"
|
||||
>
|
||||
<span className="text-xl">⚡</span>
|
||||
<span>Frameworks</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
className="group inline-flex items-center gap-3 bg-white text-gray-800 px-8 py-4 rounded-xl font-bold text-base shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-500 transform hover:-translate-y-1 transition-all duration-300"
|
||||
href="/catalogo"
|
||||
>
|
||||
<span className="text-xl">🛒</span>
|
||||
<span>Catálogo</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h1 className="text-6xl md:text-7xl font-extrabold bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 animate-fade-in">
|
||||
ESPDocs
|
||||
</h1>
|
||||
{/* Recursos Section */}
|
||||
<section className="mb-20">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Recursos da Plataforma</h2>
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">Ferramentas e informações organizadas para facilitar seu trabalho com ESP32</p>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl md:text-3xl text-gray-700 font-semibold mb-6">
|
||||
Ecossistema ESP32 em Português
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{resources.map((resource, index) => (
|
||||
<div
|
||||
key={resource.name}
|
||||
className="group bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 border-2 border-gray-100 hover:border-purple-200"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-4xl shrink-0 transform group-hover:scale-110 transition-transform">
|
||||
{resource.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">
|
||||
{resource.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 leading-relaxed">
|
||||
{resource.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p className="text-lg text-gray-600 max-w-xl mx-auto leading-relaxed mb-12">
|
||||
Documentação não oficial completa para facilitar seu aprendizado e desenvolvimento
|
||||
com ESP32. Explore especificações, diagramas, frameworks e muito mais!
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-20">
|
||||
<Link
|
||||
className="bg-linear-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300"
|
||||
href="/series"
|
||||
>
|
||||
📚 Ver Séries
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
className="bg-white text-gray-700 px-8 py-4 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-400 transform hover:-translate-y-1 transition-all duration-300"
|
||||
href="/frameworks"
|
||||
>
|
||||
⚡ Ver Frameworks
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
className="bg-white text-gray-700 px-8 py-4 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-400 transform hover:-translate-y-1 transition-all duration-300"
|
||||
href="/catalogo"
|
||||
>
|
||||
🛒 Ver Catálogo de Placas
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mt-16">
|
||||
{resources.map((resource) => (
|
||||
<div key={resource.name} className="bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 border border-gray-100">
|
||||
<div className="text-5xl mb-4">{resource.icon}</div>
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-3">
|
||||
{resource.name}
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
{resource.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-16 px-4 md:px-16">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border border-gray-100">
|
||||
{/* Ciência Embarcada Section */}
|
||||
<section className="mb-12">
|
||||
<div className="bg-linear-to-br from-white to-purple-50 rounded-3xl shadow-xl p-8 md:p-12 border-2 border-purple-100">
|
||||
{/* Logo e Link do Ciência Embarcada */}
|
||||
<div className="flex flex-col items-center mb-6">
|
||||
<a
|
||||
@@ -119,17 +142,23 @@ export default function Home() {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Disclaimer */}
|
||||
<div className="border-t border-gray-200 pt-6 mt-6">
|
||||
<p className="text-sm text-gray-600 text-center">
|
||||
O ESPDocs é uma documentação não oficial e independente, criada por
|
||||
um entusiasta da comunidade ESP32 e que não possui nenhum tipo de afiliação
|
||||
com a Espressif Systems, fabricante dos chips ESP32. Todas as informações
|
||||
são coletadas de fontes públicas e experiências pessoais de desenvolvimento.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Disclaimer */}
|
||||
<div className="border-t-2 border-purple-200 pt-6 mt-6">
|
||||
<div className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-blue-600 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<p className="text-sm text-gray-700 leading-relaxed">
|
||||
<strong className="font-semibold text-gray-900">Plataforma não oficial:</strong> O ESPDocs é independente e sem afiliação com a Espressif Systems.
|
||||
Organiza informações públicas e links para documentação oficial. Para dados técnicos críticos,
|
||||
consulte sempre os datasheets e manuais oficiais da Espressif.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
+131
-53
@@ -74,34 +74,34 @@ export default async function SerieDetail({ params }) {
|
||||
if (serie.sensor_hall) interfacesEspeciais.push({ label: "Sensor Hall", value: serie.sensor_hall, icon: "🧲" });
|
||||
if (serie.sensor_temperatura) interfacesEspeciais.push({ label: "Sensor Temperatura", value: serie.sensor_temperatura, icon: "🌡️" });
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 'connections',
|
||||
label: 'Diagrama de Conexões',
|
||||
available: conexoes.length > 0,
|
||||
content: (
|
||||
<div className="bg-white rounded-3xl shadow-xl p-8 border-2 border-gray-100">
|
||||
<ConnectionsDiagram connections={conexoes} color={serie.cor} />
|
||||
// Consumo de Energia
|
||||
const consumoEnergia = [];
|
||||
if (serie.consumo_energia) {
|
||||
Object.entries(serie.consumo_energia).forEach(([modo, consumo]) => {
|
||||
const modoLabels = {
|
||||
'active': 'Modo Ativo',
|
||||
'active_cpu_240mhz': 'Ativo (CPU 240MHz)',
|
||||
'active_cpu_160mhz': 'Ativo (CPU 160MHz)',
|
||||
'active_wifi_tx': 'Ativo (Wi-Fi TX)',
|
||||
'active_wifi_tx_peak': 'Ativo (Wi-Fi TX Pico)',
|
||||
'active_wifi': 'Ativo (Wi-Fi)',
|
||||
'active_wifi6': 'Ativo (Wi-Fi 6)',
|
||||
'modem_sleep': 'Modem Sleep',
|
||||
'modem_sleep_cpu_160mhz': 'Modem Sleep (CPU 160MHz)',
|
||||
'light_sleep': 'Light Sleep',
|
||||
'deep_sleep': 'Deep Sleep',
|
||||
'hibernation': 'Hibernação'
|
||||
};
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-100">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Sobre a Matriz de Conexões Flexível
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
O ESP32 possui uma matriz de conexões flexível que permite mapear diversas funções para múltiplos pinos.
|
||||
Isso significa que muitas conexões podem ser configuradas para desempenhar diferentes papéis, dependendo das necessidades do seu projeto.
|
||||
Consulte a documentação oficial para entender como aproveitar ao máximo as GPIOs
|
||||
<a href={`https://docs.espressif.com/projects/esp-idf/en/latest/${String(key).toLowerCase().replace("-", "")}/api-reference/peripherals/gpio.html`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
|
||||
nesse link.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
consumoEnergia.push({
|
||||
label: modoLabels[modo] || modo.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
|
||||
value: consumo,
|
||||
icon: "🔋"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 'devboard',
|
||||
label: 'Placa de Desenvolvimento',
|
||||
@@ -131,26 +131,43 @@ export default async function SerieDetail({ params }) {
|
||||
)
|
||||
},
|
||||
{
|
||||
id: 'specs',
|
||||
label: 'Especificações',
|
||||
available: true,
|
||||
id: 'connections',
|
||||
label: 'Diagrama de Conexões',
|
||||
available: conexoes.length > 0,
|
||||
content: (
|
||||
<div className="space-y-6">
|
||||
<SpecSection title="⚙️ Processador" specs={processadorSpecs} cor={serie.cor} />
|
||||
<SpecSection title="📡 Conectividade" specs={conectividadeSpecs} cor={serie.cor} />
|
||||
<SpecSection title="💾 Memória" specs={memoriaSpecs} cor={serie.cor} />
|
||||
<SpecSection title="🔌 Periféricos" specs={perifericos} cor={serie.cor} />
|
||||
{interfacesEspeciais.length > 0 && (
|
||||
<SpecSection title="✨ Interfaces Especiais" specs={interfacesEspeciais} cor={serie.cor} />
|
||||
)}
|
||||
<SpecSection
|
||||
title="🌡️ Temperatura"
|
||||
specs={[
|
||||
{ label: "Operação", value: serie.temperatura_operacao, icon: "🔧" },
|
||||
{ label: "Armazenamento", value: serie.temperatura_armazenamento, icon: "📦" },
|
||||
]}
|
||||
cor={serie.cor}
|
||||
/>
|
||||
<div className="bg-white rounded-3xl shadow-xl p-8 border-2 border-gray-100">
|
||||
<div className="bg-amber-50 border-l-4 border-amber-500 p-4 mb-6 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-2xl">⚠️</span>
|
||||
<div>
|
||||
<h4 className="font-bold text-amber-900 mb-1">Diagrama do SoC (System on Chip)</h4>
|
||||
<p className="text-amber-800 text-sm leading-relaxed">
|
||||
Este diagrama mostra as conexões e periféricos do chip <strong>{key}</strong> (SoC),
|
||||
não da placa de desenvolvimento completa. As placas de desenvolvimento podem ter
|
||||
configurações diferentes de pinos expostos e componentes adicionais.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConnectionsDiagram connections={conexoes} serie={serie} />
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-100 mt-6">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Sobre a Matriz de Conexões Flexível
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
O ESP32 possui uma matriz de conexões flexível que permite mapear diversas funções para múltiplos pinos.
|
||||
Isso significa que muitas conexões podem ser configuradas para desempenhar diferentes papéis, dependendo das necessidades do seu projeto.
|
||||
Consulte a documentação oficial para entender como aproveitar ao máximo as GPIOs
|
||||
<a href={`https://docs.espressif.com/projects/esp-idf/en/latest/${String(key).toLowerCase().replace("-", "")}/api-reference/peripherals/gpio.html`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
|
||||
nesse link.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -241,23 +258,84 @@ export default async function SerieDetail({ params }) {
|
||||
|
||||
<SeriesTabMenu tabs={tabs} color={serie.cor} />
|
||||
|
||||
<div className="space-y-6">
|
||||
<SpecSection title="⚙️ Processador" specs={processadorSpecs} cor={serie.cor} />
|
||||
<SpecSection title="📡 Conectividade" specs={conectividadeSpecs} cor={serie.cor} />
|
||||
<SpecSection title="💾 Memória" specs={memoriaSpecs} cor={serie.cor} />
|
||||
{consumoEnergia.length > 0 && (
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-100">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4 pb-3 border-b-2 flex items-center gap-3" style={{ borderColor: serie.cor }}>
|
||||
<span>🔋</span>
|
||||
Consumo de Energia
|
||||
</h2>
|
||||
<div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-2xl">💡</span>
|
||||
<div>
|
||||
<p className="text-blue-900 text-sm leading-relaxed">
|
||||
<strong>Valores típicos @3.3V, 25°C.</strong> O consumo real varia com clock, estado de RF (Wi-Fi/Bluetooth ligado/desligado) e configurações.
|
||||
Para precisão, consulte o datasheet oficial.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{consumoEnergia.map((spec, index) => (
|
||||
<div key={index} className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
|
||||
<span className="text-2xl">{spec.icon}</span>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-600">{spec.label}</p>
|
||||
<p className="text-base font-bold text-gray-800 mt-1">{spec.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<SpecSection title="🔌 Periféricos" specs={perifericos} cor={serie.cor} />
|
||||
{interfacesEspeciais.length > 0 && (
|
||||
<SpecSection title="✨ Interfaces Especiais" specs={interfacesEspeciais} cor={serie.cor} />
|
||||
)}
|
||||
<SpecSection
|
||||
title="🌡️ Temperatura"
|
||||
specs={[
|
||||
{ label: "Operação", value: serie.temperatura_operacao, icon: "🔧" },
|
||||
{ label: "Armazenamento", value: serie.temperatura_armazenamento, icon: "📦" },
|
||||
]}
|
||||
cor={serie.cor}
|
||||
/>
|
||||
</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-linear-to-br from-blue-600 via-purple-600 to-pink-600 rounded-3xl shadow-2xl p-10 text-white border-2 border-purple-400">
|
||||
<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">
|
||||
🛒 Pronto para começar?
|
||||
<div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-4 border border-white/30">
|
||||
<span className="text-xl">🎯</span>
|
||||
<span className="text-sm font-semibold">Próximo Passo</span>
|
||||
</div>
|
||||
<h3 className="text-3xl md:text-4xl font-black mb-4">
|
||||
Pronto para começar?
|
||||
</h3>
|
||||
<p className="text-lg text-blue-100 leading-relaxed text-justify">
|
||||
<p className="text-lg text-white/90 leading-relaxed">
|
||||
Encontre placas de desenvolvimento {key} verificadas no nosso catálogo.
|
||||
Links diretos para lojas oficiais e confiáveis com os melhores preços!
|
||||
</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-2 bg-white text-purple-700 px-8 py-4 rounded-xl font-bold text-lg shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 whitespace-nowrap group"
|
||||
>
|
||||
Ver Placas Disponíveis →
|
||||
<span className="text-xl">🛒</span>
|
||||
<span>Ver Placas Disponíveis</span>
|
||||
<svg
|
||||
className="w-5 h-5 transition-transform group-hover:translate-x-1"
|
||||
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>
|
||||
|
||||
+41
-15
@@ -10,17 +10,22 @@ export default function Series() {
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="px-4 pt-16 pb-8 max-w-7xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<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">
|
||||
<main id="conteudo" className="px-4 pt-16 pb-20 max-w-7xl mx-auto">
|
||||
<section className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 bg-white/70 backdrop-blur-sm px-4 py-2 rounded-full mb-6 border border-purple-200 shadow-sm">
|
||||
<span className="text-xl">⚡</span>
|
||||
<span className="text-sm font-semibold text-gray-700">Explore o Ecossistema ESP32</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-black bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 leading-tight tracking-tight">
|
||||
Séries ESP32
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
|
||||
Explore toda a família ESP32. Cada série foi projetada para atender necessidades específicas,
|
||||
desde projetos simples até aplicações de IA e IoT avançadas.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{series.map(([key, serie]) => (
|
||||
@@ -80,6 +85,13 @@ export default function Series() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{serie.consumo_energia?.deep_sleep && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">🔋 Deep Sleep:</span>
|
||||
<span className="font-semibold text-gray-800">{serie.consumo_energia.deep_sleep}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{serie.aceleradores_ia && (
|
||||
<div className="pt-2 border-t border-gray-100">
|
||||
<span className="inline-block px-2 py-1 bg-purple-100 text-purple-700 text-xs font-semibold rounded">
|
||||
@@ -108,20 +120,34 @@ export default function Series() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 bg-white rounded-2xl shadow-lg p-8 border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-4 text-center">
|
||||
💡 Não sabe qual escolher?
|
||||
</h3>
|
||||
<p className="text-gray-600 text-center max-w-2xl mx-auto mb-6">
|
||||
Compare as especificações de cada série para encontrar a mais adequada ao seu projeto.
|
||||
Considere requisitos de conectividade, processamento e recursos específicos.
|
||||
</p>
|
||||
<div className="mt-16 bg-linear-to-br from-white to-purple-50 rounded-3xl shadow-2xl p-10 border-2 border-purple-100">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-linear-to-br from-blue-500 to-purple-600 rounded-2xl mb-4">
|
||||
<span className="text-3xl">💡</span>
|
||||
</div>
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-3">
|
||||
Não sabe qual escolher?
|
||||
</h3>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto leading-relaxed text-base">
|
||||
Compare as especificações de cada série para encontrar a mais adequada ao seu projeto.
|
||||
Considere requisitos de conectividade, processamento e recursos específicos.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<Link
|
||||
href="/comparacao"
|
||||
className="bg-linear-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
|
||||
className="inline-flex items-center justify-center gap-2 bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 text-white px-8 py-4 rounded-xl font-bold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group"
|
||||
>
|
||||
📊 Comparar Séries
|
||||
<span className="text-xl">📊</span>
|
||||
<span>Comparar Séries</span>
|
||||
<svg
|
||||
className="w-5 h-5 transition-transform group-hover:translate-x-1"
|
||||
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>
|
||||
|
||||
+95
-60
@@ -4,10 +4,10 @@ import Link from "next/link";
|
||||
|
||||
export default function Sobre() {
|
||||
const features = [
|
||||
{ icon: "📚", title: "Documentação Curada", desc: "Conteúdos organizados por níveis — do iniciante ao avançado." },
|
||||
{ icon: "🔧", title: "Exemplos Práticos", desc: "Projetos e trechos de código para aprender fazendo." },
|
||||
{ icon: "🌐", title: "Comunidade", desc: "Contribuições abertas e canal para dúvidas e trocas." },
|
||||
{ icon: "♿", title: "Acessibilidade", desc: "Textos claros, contraste adequado e navegação por teclado." },
|
||||
{ icon: "📚", title: "Interface em Português", desc: "Organização e apresentação de dados técnicos totalmente em português." },
|
||||
{ icon: "🔧", title: "Comparações Visuais", desc: "Tabelas comparativas e diagramas para facilitar a escolha da série ideal." },
|
||||
{ icon: "🌐", title: "Acesso Centralizado", desc: "Links diretos para documentação oficial, repositórios e exemplos." },
|
||||
{ icon: "♿", title: "Código Aberto", desc: "Projeto open-source com contribuições bem-vindas no GitHub." },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -18,101 +18,134 @@ export default function Sobre() {
|
||||
|
||||
<Header />
|
||||
|
||||
<main id="conteudo" className="px-4 pt-16 pb-20 max-w-6xl mx-auto">
|
||||
<header className="relative overflow-hidden rounded-2xl p-8 md:p-12 bg-linear-to-r from-blue-600 via-purple-600 to-pink-500 text-white shadow-lg">
|
||||
<main id="conteudo" className="px-4 pt-12 pb-20 max-w-7xl mx-auto">
|
||||
<header className="relative overflow-hidden rounded-3xl p-10 md:p-16 bg-linear-to-br from-blue-600 via-purple-600 to-pink-600 text-white shadow-2xl mb-12">
|
||||
<div className="absolute inset-0 bg-black/10"></div>
|
||||
<div className="relative z-10 max-w-4xl mx-auto">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold leading-tight bg-clip-text text-transparent bg-linear-to-r from-white to-purple-100 mb-3">
|
||||
<h1 className="text-4xl md:text-6xl font-black leading-tight mb-6">
|
||||
Sobre o ESPDocs
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl opacity-90 max-w-3xl mb-6">
|
||||
Uma documentação não oficial, em português, feita por um entusiasta e para
|
||||
a comunidade — com foco em clareza, exemplos práticos e colaboração aberta.
|
||||
<p className="text-lg md:text-xl opacity-95 max-w-3xl mb-8 leading-relaxed">
|
||||
Uma plataforma não oficial com interface em português que organiza
|
||||
informações técnicas do ESP32 e facilita o acesso à documentação oficial
|
||||
da Espressif. Feita por um entusiasta para a comunidade.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-center">
|
||||
<Link href="/" className="inline-flex items-center justify-center bg-white text-blue-700 px-4 py-2 rounded-lg font-semibold shadow-sm hover:shadow-md transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white" aria-label="Voltar para a página inicial">
|
||||
← Voltar
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
|
||||
<Link href="/" className="inline-flex items-center justify-center gap-2 bg-white text-blue-700 px-6 py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1" aria-label="Voltar para a página inicial">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
<span>Voltar</span>
|
||||
</Link>
|
||||
|
||||
<a
|
||||
href="https://github.com/lucasrguerra/ESPDocs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center bg-white/20 border border-white/30 text-white px-4 py-2 rounded-lg font-semibold hover:bg-white/30 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"
|
||||
className="inline-flex items-center justify-center gap-2 bg-white/10 backdrop-blur-sm border-2 border-white/30 text-white px-6 py-3 rounded-xl font-bold hover:bg-white/20 transition-all"
|
||||
aria-label="Abrir repositório do projeto no GitHub (abre em nova aba)"
|
||||
>
|
||||
Contribuir no GitHub
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1 1.6-.7 1.9-1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.5.4.9 1.1.9 2.2v3.2c0 .3.2.7.8.6A12 12 0 0012 .5z" fill="currentColor"/>
|
||||
</svg>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<section className="md:col-span-2 space-y-6">
|
||||
<article className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-sm border border-gray-100">
|
||||
<h2 className="text-2xl font-bold mb-2">Missão</h2>
|
||||
<p className="text-gray-700 leading-relaxed text-justify">
|
||||
Facilitar o aprendizado e acelerar projetos com ESP32 por meio de
|
||||
documentação clara, exemplos testados e comparativos práticos.
|
||||
Priorizei traduções fiéis, explicações passo a passo e dicas
|
||||
baseadas em experiência real de desenvolvimento.
|
||||
<div className="mt-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<section className="lg:col-span-2 space-y-8">
|
||||
<article className="bg-white rounded-3xl p-8 shadow-lg border-2 border-gray-100 hover:border-purple-200 transition-colors">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-linear-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
|
||||
<span className="text-2xl">🎯</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900">Missão</h2>
|
||||
</div>
|
||||
<p className="text-gray-700 leading-relaxed text-base">
|
||||
Facilitar o acesso e a compreensão do ecossistema ESP32 através de uma
|
||||
interface em português que organiza especificações técnicas, compara séries,
|
||||
apresenta frameworks e centraliza links para a documentação oficial da
|
||||
Espressif. O objetivo é economizar tempo na busca por informações técnicas.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
|
||||
<h2 className="text-2xl font-bold mb-2">Por que o ESPDocs?</h2>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Informações técnicas frequentemente estão dispersas entre datasheets,
|
||||
fóruns e repositórios. O ESPDocs centraliza esse conteúdo em português,
|
||||
com foco em aplicabilidade.
|
||||
<article className="bg-white rounded-3xl p-8 shadow-lg border-2 border-gray-100">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-linear-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center">
|
||||
<span className="text-2xl">❓</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900">Por que o ESPDocs?</h2>
|
||||
</div>
|
||||
<p className="text-gray-700 leading-relaxed mb-6 text-base">
|
||||
As informações sobre ESP32 estão dispersas em datasheets (PDF), repositórios
|
||||
GitHub e documentação oficial — tudo em inglês. O ESPDocs organiza essas
|
||||
informações em uma interface em português, facilitando comparações e consultas
|
||||
rápidas antes de mergulhar na documentação técnica oficial.
|
||||
</p>
|
||||
|
||||
<ul role="list" className="grid sm:grid-cols-2 gap-4">
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{features.map((f) => (
|
||||
<li key={f.title} className="flex gap-3 items-start bg-gray-50 p-4 rounded-lg border border-gray-100">
|
||||
<div className="text-2xl" aria-hidden="true">{f.icon}</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-800">{f.title}</h3>
|
||||
<p className="text-sm text-gray-600">{f.desc}</p>
|
||||
<div key={f.title} className="flex gap-4 items-start bg-linear-to-br from-gray-50 to-white p-5 rounded-xl border-2 border-gray-100 hover:border-purple-200 transition-colors">
|
||||
<div className="text-3xl shrink-0" aria-hidden="true">{f.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-gray-900 mb-1 text-base">{f.title}</h3>
|
||||
<p className="text-sm text-gray-600 leading-relaxed">{f.desc}</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-sm border border-gray-100">
|
||||
<h2 className="text-2xl font-bold mb-2">Como contribuir</h2>
|
||||
<p className="text-gray-700 leading-relaxed mb-3">
|
||||
<article className="bg-white rounded-3xl p-8 shadow-lg border-2 border-gray-100">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-linear-to-br from-green-500 to-teal-600 rounded-xl flex items-center justify-center">
|
||||
<span className="text-2xl">🤝</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900">Como contribuir</h2>
|
||||
</div>
|
||||
<p className="text-gray-700 leading-relaxed mb-4 text-base">
|
||||
Correções, traduções e novos exemplos são bem-vindos. Abra uma
|
||||
issue ou um pull request no repositório. Busco por clareza nas
|
||||
descrições e exemplos testáveis.
|
||||
</p>
|
||||
<ol className="list-decimal list-inside text-gray-700 space-y-1">
|
||||
<li>Fork do repositório e crie uma branch clara.</li>
|
||||
<li>Adicione exemplos ou corrija o conteúdo com referências quandopossível.</li>
|
||||
<li>Abra um PR e descreva o que foi alterado.</li>
|
||||
</ol>
|
||||
<div className="bg-linear-to-r from-blue-50 to-purple-50 rounded-xl p-5 border-2 border-blue-100">
|
||||
<ol className="list-decimal list-inside text-gray-700 space-y-2 text-sm">
|
||||
<li className="font-medium">Fork do repositório e crie uma branch clara.</li>
|
||||
<li className="font-medium">Adicione exemplos ou corrija o conteúdo com referências quando possível.</li>
|
||||
<li className="font-medium">Abra um PR e descreva o que foi alterado.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
|
||||
<h2 className="text-2xl font-bold mb-2">Acessibilidade</h2>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
<article className="bg-linear-to-br from-purple-50 to-pink-50 rounded-3xl p-8 shadow-lg border-2 border-purple-100">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-linear-to-br from-purple-600 to-pink-600 rounded-xl flex items-center justify-center">
|
||||
<span className="text-2xl">♿</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900">Acessibilidade</h2>
|
||||
</div>
|
||||
<p className="text-gray-700 leading-relaxed text-base">
|
||||
O site prioriza leitura, contraste legível e navegação por teclado.
|
||||
Se encontrar barreiras, por favor relate para que eu possa melhorar.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<aside className="space-y-4">
|
||||
<div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
|
||||
<div className="flex flex-col items-center mb-4">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="Ciência Embarcada"
|
||||
className="h-16 mb-3"
|
||||
/>
|
||||
<h3 className="text-lg font-semibold text-center">Sobre o Autor</h3>
|
||||
<aside className="space-y-6">
|
||||
<div className="bg-white rounded-3xl p-8 shadow-lg border-2 border-gray-100 hover:border-purple-200 transition-colors">
|
||||
<div className="flex flex-col items-center mb-6">
|
||||
<div className="w-20 h-20 bg-linear-to-br from-purple-100 to-pink-100 rounded-2xl flex items-center justify-center mb-4">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="Ciência Embarcada"
|
||||
className="h-16 w-16 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 text-center">Sobre o Autor</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-700 text-sm leading-relaxed mb-4 text-justify">
|
||||
@@ -169,8 +202,10 @@ export default function Sobre() {
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-sm text-gray-500">
|
||||
<strong>Nota:</strong> Conteúdo não oficial. Consulte sempre datasheets
|
||||
e documentos oficiais para decisões críticas.
|
||||
<strong>Importante:</strong> Esta é uma plataforma de organização de informações, não uma
|
||||
tradução da documentação oficial. A interface está em português, mas datasheets, manuais
|
||||
técnicos e repositórios linkados são da Espressif e estão em inglês. Para decisões
|
||||
técnicas críticas, sempre consulte a documentação oficial.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ const type_colors = {
|
||||
nc: "#9ca3af",
|
||||
};
|
||||
|
||||
export default function ConnectionsDiagram({ connections, color }) {
|
||||
export default function ConnectionsDiagram({ connections, serie }) {
|
||||
const [activeFilter, setActiveFilter] = useState("All");
|
||||
const [selectedConnection, setSelectedConnection] = useState(null);
|
||||
const [hoveredConnection, setHoveredConnection] = useState(null);
|
||||
@@ -138,12 +138,12 @@ export default function ConnectionsDiagram({ connections, color }) {
|
||||
return (
|
||||
<div className="space-y-8 pb-8">
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b-2 flex items-center gap-3" style={{ borderColor: color }}>
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b-2 flex items-center gap-3" style={{ borderColor: serie.color }}>
|
||||
<span>📍</span>
|
||||
Diagrama de Conexões Interativo
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 leading-relaxed max-w-3xl">
|
||||
Explore as conexões do ESP32. Use a busca, filtros por função ou passe o mouse para ver detalhes rápidos.
|
||||
<p className="text-lg text-gray-600 leading-relaxed">
|
||||
Explore as conexões do {serie.nome_completo}. Use a busca, filtros por função ou passe o mouse para ver detalhes rápidos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
+72
-20
@@ -16,20 +16,24 @@ import ModelsIcon from "@mui/icons-material/Memory";
|
||||
import FrameworksIcon from "@mui/icons-material/Apps";
|
||||
import CompareIcon from "@mui/icons-material/CompareArrows";
|
||||
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
|
||||
import MenuBookIcon from "@mui/icons-material/MenuBook";
|
||||
|
||||
export default function Header() {
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
|
||||
const pathname = usePathname();
|
||||
const menuItems = [
|
||||
{ text: "Início", href: "/", icon: <HomeIcon /> },
|
||||
{ text: "Sobre o Projeto", href: "/sobre", icon: <AboutIcon /> },
|
||||
{ text: "Séries", href: "/series", icon: <ModelsIcon /> },
|
||||
{ text: "Frameworks", href: "/frameworks", icon: <FrameworksIcon /> },
|
||||
{ text: "Comparar Séries", href: "/comparacao", icon: <CompareIcon /> },
|
||||
{ text: "Catálogo de Placas", href: "/catalogo", icon: <ShoppingCartIcon /> },
|
||||
{ text: "Início", href: "/", icon: <HomeIcon />, featured: true },
|
||||
{ text: "Sobre o Projeto", brief: "Sobre", href: "/sobre", icon: <AboutIcon /> },
|
||||
{ text: "Glossário", href: "/glossario", icon: <MenuBookIcon /> },
|
||||
{ text: "Séries", href: "/series", icon: <ModelsIcon />, featured: true },
|
||||
{ text: "Frameworks", href: "/frameworks", icon: <FrameworksIcon />, featured: true },
|
||||
{ text: "Comparar Séries", brief: "Comparar", href: "/comparacao", icon: <CompareIcon />, featured: true },
|
||||
{ text: "Catálogo de Placas", brief: "Catálogo", href: "/catalogo", icon: <ShoppingCartIcon /> },
|
||||
];
|
||||
|
||||
const featuredItems = menuItems.filter(item => item.featured);
|
||||
|
||||
function isActive(href) {
|
||||
if (href === "/") {
|
||||
return pathname === "/";
|
||||
@@ -40,29 +44,70 @@ export default function Header() {
|
||||
|
||||
return (
|
||||
<header className="bg-white/80 backdrop-blur-md py-4 px-4 md:px-8 text-black shadow-lg border-b border-gray-100 sticky top-0 z-50">
|
||||
<div className="flex justify-between max-w-5xl mx-auto items-center">
|
||||
<Link href="/" className="group">
|
||||
<div className="flex justify-between max-w-7xl mx-auto items-center gap-8">
|
||||
<Link href="/" className="group shrink-0">
|
||||
<h1 className="text-2xl md:text-3xl font-bold bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent transition-all duration-300 group-hover:scale-105">
|
||||
ESPDocs
|
||||
</h1>
|
||||
</Link>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
className="border-2 border-gray-300 text-gray-700 hover:border-purple-500 hover:text-purple-600 transition-all duration-300 hover:shadow-lg rounded-xl! px-4"
|
||||
>
|
||||
<MenuIcon className="" />
|
||||
</Button>
|
||||
{/* Menu Desktop - visível em telas médias e grandes */}
|
||||
<nav className="hidden lg:flex items-center gap-2 flex-1 justify-end" aria-label="Menu principal">
|
||||
{featuredItems.map((item) => (
|
||||
<Link
|
||||
key={item.text}
|
||||
href={item.href}
|
||||
className={`group flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium transition-all duration-300 ${
|
||||
isActive(item.href)
|
||||
? "bg-linear-to-r from-blue-600 to-purple-600 text-white shadow-lg shadow-purple-200"
|
||||
: "text-gray-700 hover:bg-linear-to-r hover:from-blue-50 hover:to-purple-50 hover:shadow-md hover:-translate-y-0.5"
|
||||
}`}
|
||||
aria-label={item.brief || item.text}
|
||||
aria-current={isActive(item.href) ? "page" : undefined}
|
||||
>
|
||||
<span className={`transition-transform duration-300 ${
|
||||
isActive(item.href) ? "scale-110" : "group-hover:scale-110"
|
||||
}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span className="text-sm whitespace-nowrap">{item.brief || item.text}</span>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* Botão Menu Completo Desktop */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
className="border-2 border-gray-300 text-gray-700 hover:border-purple-500 hover:text-purple-600 transition-all duration-300 hover:shadow-lg rounded-xl! px-4"
|
||||
aria-label="Abrir menu completo"
|
||||
aria-expanded={drawerOpen}
|
||||
aria-controls="mobile-menu-drawer"
|
||||
>
|
||||
<MenuIcon />
|
||||
</Button>
|
||||
</nav>
|
||||
|
||||
{/* Botão Menu Mobile - visível apenas em telas pequenas */}
|
||||
<div className="lg:hidden">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
className="border-2 border-gray-300 text-gray-700 hover:border-purple-500 hover:text-purple-600 transition-all duration-300 hover:shadow-lg rounded-xl! px-4"
|
||||
aria-label="Abrir menu de navegação"
|
||||
aria-expanded={drawerOpen}
|
||||
aria-controls="mobile-menu-drawer"
|
||||
>
|
||||
<MenuIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drawer Mobile */}
|
||||
<Drawer
|
||||
anchor="right"
|
||||
open={drawerOpen}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
PaperProps={{
|
||||
className: "bg-linear-to-br from-white via-blue-50 to-purple-50"
|
||||
}}
|
||||
id="mobile-menu-drawer"
|
||||
>
|
||||
<div className="p-6 w-72">
|
||||
<div className="mb-6">
|
||||
@@ -72,7 +117,7 @@ export default function Header() {
|
||||
<div className="h-1 w-16 bg-linear-to-r from-blue-600 to-purple-600 rounded-full mt-2"></div>
|
||||
</div>
|
||||
|
||||
<List>
|
||||
<List component="nav" aria-label="Menu de navegação">
|
||||
{menuItems.map((item, index) => (
|
||||
<ListItem
|
||||
key={item.text}
|
||||
@@ -84,18 +129,25 @@ export default function Header() {
|
||||
>
|
||||
<div className="w-full">
|
||||
<Link
|
||||
className={`flex items-center w-full p-4 text-left rounded-xl transition-all duration-300 ${
|
||||
className={`flex items-center w-full p-4 text-left rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
|
||||
isActive(item.href)
|
||||
? "bg-linear-to-r from-blue-600 to-purple-600 text-white shadow-lg transform scale-105"
|
||||
: "hover:bg-white hover:shadow-md hover:transform hover:scale-102 text-gray-700"
|
||||
}`}
|
||||
onClick={() => { setDrawerOpen(false); }}
|
||||
href={item.href}
|
||||
aria-label={item.text}
|
||||
aria-current={isActive(item.href) ? "page" : undefined}
|
||||
>
|
||||
<span className={`transition-transform duration-300 ${isActive(item.href) ? "scale-110" : "group-hover:scale-110"}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span className="ml-3 font-medium">{item.text}</span>
|
||||
{isActive(item.href) && (
|
||||
<span className="ml-auto">
|
||||
<span className="inline-block w-2 h-2 bg-white rounded-full animate-pulse"></span>
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
</ListItem>
|
||||
|
||||
Generated
+525
-524
File diff suppressed because it is too large.
Load diff
+1
-1
@@ -14,7 +14,7 @@
|
||||
"@mui/icons-material": "^7.3.4",
|
||||
"@mui/material": "^7.3.4",
|
||||
"googleapis": "^165.0.0",
|
||||
"next": "15.5.6",
|
||||
"next": "^15.5.9",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0"
|
||||
},
|
||||
|
||||
@@ -29,6 +29,14 @@
|
||||
"sdio": "1 (SD/SDIO/MMC Host), 1 (SDIO/SPI Slave)",
|
||||
"sensor_hall": "1 (interno)",
|
||||
"sensor_temperatura": "1 (interno, precisão limitada)",
|
||||
"consumo_energia": {
|
||||
"active_cpu_240mhz": "30-68 mA",
|
||||
"active_wifi_tx": "180-240 mA",
|
||||
"modem_sleep": "20-44 mA",
|
||||
"light_sleep": "0.8 mA",
|
||||
"deep_sleep": "10-150 µA",
|
||||
"hibernation": "5 µA"
|
||||
},
|
||||
"temperatura_operacao": "-40°C a 125°C",
|
||||
"temperatura_armazenamento": "-40°C a 150°C",
|
||||
"datasheet": "https://documentation.espressif.com/esp32_datasheet_en.html",
|
||||
@@ -65,6 +73,12 @@
|
||||
"lcd": "Interface LCD de 8/16 bits",
|
||||
"camera": "Interface DVP de 8/16 bits",
|
||||
"sensor_temperatura": "1 (interno)",
|
||||
"consumo_energia": {
|
||||
"active_wifi_tx": "190-310 mA",
|
||||
"modem_sleep_cpu_160mhz": "15-20 mA",
|
||||
"light_sleep": "130 µA",
|
||||
"deep_sleep": "20-150 µA"
|
||||
},
|
||||
"temperatura_operacao": "-40°C a 105°C",
|
||||
"temperatura_armazenamento": "-40°C a 150°C",
|
||||
"datasheet": "https://documentation.espressif.com/esp32-s2_datasheet_en.html",
|
||||
@@ -103,6 +117,12 @@
|
||||
"camera": "Interface DVP de 8/16 bits",
|
||||
"sdio": "1 (SD/SDIO/MMC Host)",
|
||||
"sensor_temperatura": "1 (interno)",
|
||||
"consumo_energia": {
|
||||
"active": "78 mW (~24 mA @3.3V)",
|
||||
"modem_sleep": "20-30 mA",
|
||||
"light_sleep": "0.8 mA",
|
||||
"deep_sleep": "7 µA"
|
||||
},
|
||||
"temperatura_operacao": "-40°C a 65/85/105°C",
|
||||
"temperatura_armazenamento": "-40°C a 150°C",
|
||||
"datasheet": "https://documentation.espressif.com/esp32-s3_datasheet_en.html",
|
||||
@@ -136,6 +156,13 @@
|
||||
"pwm": "LED PWM (até 6 canais)",
|
||||
"usb": "1 (USB Serial/JTAG)",
|
||||
"sensor_temperatura": "1 (interno)",
|
||||
"consumo_energia": {
|
||||
"active_cpu_160mhz": "20 mA",
|
||||
"active_wifi_tx_peak": "350 mA",
|
||||
"modem_sleep_cpu_160mhz": "20 mA",
|
||||
"light_sleep": "130 µA",
|
||||
"deep_sleep": "5 µA"
|
||||
},
|
||||
"temperatura_operacao": "-40°C a 125°C",
|
||||
"temperatura_armazenamento": "-40°C a 150°C",
|
||||
"datasheet": "https://documentation.espressif.com/esp32-c3_datasheet_en.html",
|
||||
@@ -170,6 +197,11 @@
|
||||
"pwm": "LED PWM (até 6 canais), Motor PWM",
|
||||
"usb": "1 (USB Serial/JTAG)",
|
||||
"sensor_temperatura": "1 (interno)",
|
||||
"consumo_energia": {
|
||||
"active_wifi": "100-300 mA (TX)",
|
||||
"light_sleep": "0.06 mA",
|
||||
"deep_sleep": "7 µA"
|
||||
},
|
||||
"temperatura_operacao": "-40°C a 105°C",
|
||||
"temperatura_armazenamento": "-40°C a 150°C",
|
||||
"datasheet": "https://documentation.espressif.com/esp32-c5_datasheet_en.html",
|
||||
@@ -206,6 +238,11 @@
|
||||
"usb": "1 (USB Serial/JTAG)",
|
||||
"sdio": "1 (SD/SDIO/MMC Host)",
|
||||
"sensor_temperatura": "1 (interno)",
|
||||
"consumo_energia": {
|
||||
"active_wifi6": "Varia conforme perfil TX/RX",
|
||||
"light_sleep": "0.8 mA",
|
||||
"deep_sleep": "7 µA"
|
||||
},
|
||||
"temperatura_operacao": "-40°C a 105°C",
|
||||
"temperatura_armazenamento": "-40°C a 150°C",
|
||||
"datasheet": "https://documentation.espressif.com/esp32-c6_datasheet_en.html",
|
||||
@@ -245,6 +282,11 @@
|
||||
"camera": "Interface DVP de 8/16 bits",
|
||||
"sdio": "2 (SD/SDIO/MMC Host)",
|
||||
"sensor_temperatura": "1 (interno)",
|
||||
"consumo_energia": {
|
||||
"active": "50-100 mA (estimado, alto desempenho)",
|
||||
"light_sleep": "Baixo consumo",
|
||||
"deep_sleep": "Poucos µA"
|
||||
},
|
||||
"temperatura_operacao": "-40°C a 85°C",
|
||||
"temperatura_armazenamento": "-40°C a 150°C",
|
||||
"datasheet": "https://documentation.espressif.com/esp32-p4-chip-revision-v1.3_datasheet_en.html",
|
||||
@@ -280,6 +322,11 @@
|
||||
"pwm": "LED PWM (até 6 canais)",
|
||||
"usb": "1 (USB Serial/JTAG)",
|
||||
"sensor_temperatura": "1 (interno)",
|
||||
"consumo_energia": {
|
||||
"active": "30-50 mA",
|
||||
"light_sleep": "0.8 mA",
|
||||
"deep_sleep": "7-10 µA"
|
||||
},
|
||||
"temperatura_operacao": "-40°C a 105°C",
|
||||
"temperatura_armazenamento": "-40°C a 150°C",
|
||||
"datasheet": "https://documentation.espressif.com/esp32-h2_datasheet_en.html",
|
||||
|
||||
Reference in new issue
Block a user