Add public/series.json containing detailed ESP32 family specifications
Add a new JSON file public/series.json that defines detailed metadata for multiple ESP32 series variants. The file includes entries for: ESP32, ESP32-S2, ESP32-S3, ESP32-C3, ESP32-C5, ESP32-C6, ESP32-P4 and ESP32-H2. Each entry provides human-friendly and technical fields such as: - nome_completo, icone, descricao - arquitetura, nucleos, frequencia, coprocessador_ulp, aceleradores_ia (when applicable) - wireless capabilities (Wi‑Fi, Bluetooth, Zigbee/Thread, Matter), USB, Ethernet - memory details (SRAM, RTC SRAM, ROM, external flash/PSRAM) - peripherals and I/O counts (GPIO, ADC, DAC, touch, UART, SPI, I2C, I2S, PWM, SDIO, etc.) - sensor info, temperature ranges, datasheet links and UI color values This file will be used to power device/series lists and UI displays with consistent, localized technical descriptions and links to datasheets.
This commit is contained in:
Lucas Rayan committed
1 parent
3d06c74447
commit
f49d9a8921
41 files changed
+14794
-132
No files matched your search
@@ -0,0 +1,236 @@
|
||||
"use client";
|
||||
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import seriesData from "@/public/series.json";
|
||||
|
||||
export default function Comparacao() {
|
||||
const [selectedSeries, setSelectedSeries] = useState(["ESP32", "ESP32-S3"]);
|
||||
const series = Object.entries(seriesData);
|
||||
|
||||
const toggleSeries = (seriesKey) => {
|
||||
if (selectedSeries.includes(seriesKey)) {
|
||||
if (selectedSeries.length > 2) {
|
||||
setSelectedSeries(selectedSeries.filter(s => s !== seriesKey));
|
||||
}
|
||||
} else {
|
||||
if (selectedSeries.length < 4) {
|
||||
setSelectedSeries([...selectedSeries, seriesKey]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const compareFields = [
|
||||
{ category: "Geral", fields: [
|
||||
{ key: "nome_completo", label: "Nome Completo" },
|
||||
{ key: "descricao", label: "Descrição" },
|
||||
]},
|
||||
{ category: "Processador", fields: [
|
||||
{ key: "arquitetura", label: "Arquitetura" },
|
||||
{ key: "nucleos", label: "Núcleos" },
|
||||
{ key: "frequencia", label: "Frequência" },
|
||||
{ key: "coprocessador_ulp", label: "Coprocessador ULP" },
|
||||
{ key: "aceleradores_ia", label: "Aceleradores de IA" },
|
||||
]},
|
||||
{ category: "Conectividade", fields: [
|
||||
{ key: "wifi", label: "Wi-Fi" },
|
||||
{ key: "bluetooth", label: "Bluetooth" },
|
||||
{ key: "zigbee_thread", label: "Zigbee/Thread" },
|
||||
{ key: "matter", label: "Matter" },
|
||||
{ key: "ethernet", label: "Ethernet" },
|
||||
]},
|
||||
{ category: "Memória", fields: [
|
||||
{ key: "memoria_sram", label: "SRAM" },
|
||||
{ key: "memoria_sram_rtc", label: "SRAM RTC" },
|
||||
{ key: "memoria_rom", label: "ROM" },
|
||||
{ key: "flash_externa", label: "Flash Externa" },
|
||||
{ key: "psram_externa", label: "PSRAM Externa" },
|
||||
]},
|
||||
{ category: "Periféricos Digitais", fields: [
|
||||
{ key: "gpio", label: "GPIO" },
|
||||
{ key: "uart", label: "UART" },
|
||||
{ key: "spi", label: "SPI" },
|
||||
{ key: "i2c", label: "I²C" },
|
||||
{ key: "i2s", label: "I²S" },
|
||||
{ key: "pwm", label: "PWM" },
|
||||
{ key: "can", label: "CAN" },
|
||||
{ key: "usb", label: "USB" },
|
||||
{ key: "sdio", label: "SDIO" },
|
||||
]},
|
||||
{ category: "Periféricos Analógicos", fields: [
|
||||
{ key: "adc", label: "ADC" },
|
||||
{ key: "dac", label: "DAC" },
|
||||
{ key: "touch", label: "Touch Capacitivo" },
|
||||
{ key: "sensor_hall", label: "Sensor Hall" },
|
||||
{ key: "sensor_temperatura", label: "Sensor de Temperatura" },
|
||||
]},
|
||||
{ category: "Interfaces Especiais", fields: [
|
||||
{ key: "lcd", label: "LCD" },
|
||||
{ key: "camera", label: "Câmera" },
|
||||
{ key: "mipi_csi", label: "MIPI CSI" },
|
||||
{ key: "mipi_dsi", label: "MIPI DSI" },
|
||||
{ key: "ethernet_mac", label: "Ethernet MAC" },
|
||||
]},
|
||||
{ category: "Especificações Ambientais", fields: [
|
||||
{ key: "temperatura_operacao", label: "Temp. Operação" },
|
||||
{ key: "temperatura_armazenamento", label: "Temp. Armazenamento" },
|
||||
]},
|
||||
];
|
||||
|
||||
const renderValue = (value) => {
|
||||
if (!value || value === "Não") {
|
||||
return <span className="text-red-500 font-semibold">✗</span>;
|
||||
}
|
||||
if (value === "Sim") {
|
||||
return <span className="text-green-500 font-semibold">✓</span>;
|
||||
}
|
||||
return <span className="text-gray-700">{value}</span>;
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
<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
|
||||
</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>
|
||||
<p className="text-center text-sm text-gray-500 mt-4">
|
||||
{selectedSeries.length} de 4 séries selecionadas
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200">
|
||||
<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">
|
||||
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]">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<span className="text-3xl">{seriesItem.icone}</span>
|
||||
<span>{seriesKey}</span>
|
||||
<span className="inline-block w-4 h-4 rounded-full" style={{ backgroundColor: seriesItem.cor }}></span>
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<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">
|
||||
{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">
|
||||
{label}
|
||||
</td>
|
||||
{selectedSeries.map(seriesKey => {
|
||||
const seriesItem = seriesData[seriesKey];
|
||||
const value = seriesItem[key];
|
||||
return (
|
||||
<td key={seriesKey} className="px-6 py-4 text-center">
|
||||
{renderValue(value)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
import frameworksData from "@/public/frameworks.json";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
export default function FrameworkDetail({ params }) {
|
||||
const { key } = params;
|
||||
const framework = frameworksData[key];
|
||||
|
||||
if (!framework) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const features = framework.caracteristicas || [];
|
||||
const useCases = framework.casos_uso || [];
|
||||
|
||||
return (
|
||||
<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="mb-8">
|
||||
<Link href="/frameworks" className="inline-flex items-center text-gray-600 hover:text-purple-600 transition-colors mb-4">
|
||||
<span className="mr-2">←</span> Voltar para Frameworks
|
||||
</Link>
|
||||
|
||||
<div className="bg-white rounded-3xl shadow-xl p-8 border-2 border-gray-100"
|
||||
style={{ borderColor: framework.cor + '30' }}>
|
||||
<div className="flex items-start justify-between flex-wrap gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-6xl">{framework.icone}</span>
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-800 mb-2">
|
||||
{framework.nome}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-2">{framework.nome_completo}</p>
|
||||
<span className="inline-block px-4 py-2 rounded-full text-sm font-semibold text-white"
|
||||
style={{ backgroundColor: framework.cor }}>
|
||||
{framework.tipo}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{framework.documentacao && (
|
||||
<a
|
||||
href={framework.documentacao}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-linear-to-r from-blue-600 to-purple-600 text-white px-5 py-2 rounded-xl font-semibold shadow hover:shadow-lg transition"
|
||||
>
|
||||
📘 Documentação
|
||||
</a>
|
||||
)}
|
||||
|
||||
{framework.repositorio && (
|
||||
<a
|
||||
href={framework.repositorio}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-white text-gray-800 px-5 py-2 rounded-xl font-semibold shadow border-2 border-gray-100 hover:border-purple-300 transition"
|
||||
>
|
||||
🔗 Repositório
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-gray-700 mt-6 leading-relaxed">
|
||||
{framework.descricao}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-l-4" style={{ borderColor: framework.cor }}>
|
||||
<h3 className="text-sm font-semibold text-gray-600 mb-2">LINGUAGEM</h3>
|
||||
<p className="text-3xl font-bold text-gray-800">{framework.linguagem}</p>
|
||||
<p className="text-gray-600 mt-1">Principal</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-l-4" style={{ borderColor: framework.cor }}>
|
||||
<h3 className="text-sm font-semibold text-gray-600 mb-2">TIPO</h3>
|
||||
<p className="text-3xl font-bold text-gray-800">{framework.tipo}</p>
|
||||
<p className="text-gray-600 mt-1">Categoria</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-l-4" style={{ borderColor: framework.cor }}>
|
||||
<h3 className="text-sm font-semibold text-gray-600 mb-2">FUNÇÃO PRINCIPAL</h3>
|
||||
<p className="text-3xl font-bold text-gray-800">{framework.funcao_principal}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-6 mb-8">
|
||||
<div className="lg:col-span-2 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" style={{ borderColor: framework.cor }}>
|
||||
✨ Principais Características
|
||||
</h2>
|
||||
<ul className="list-disc list-inside space-y-2 text-gray-700">
|
||||
{features.map((f, i) => (
|
||||
<li key={i} className="pl-2">{f}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h2 className="text-2xl font-bold text-gray-800 mt-8 mb-4 pb-3 border-b-2" style={{ borderColor: framework.cor }}>
|
||||
📦 Casos de Uso
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-3">
|
||||
{useCases.map((u, i) => (
|
||||
<div key={i} className="bg-gray-50 p-3 rounded-lg text-gray-700">{u}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" style={{ borderColor: framework.cor }}>
|
||||
📋 Detalhes Rápidos
|
||||
</h2>
|
||||
<div className="space-y-3 text-gray-700">
|
||||
<div><span className="font-semibold">Nome completo:</span> {framework.nome_completo}</div>
|
||||
<div><span className="font-semibold">Linguagem:</span> {framework.linguagem}</div>
|
||||
<div><span className="font-semibold">Tipo:</span> {framework.tipo}</div>
|
||||
<div><span className="font-semibold">Cor (tema):</span> <span className="inline-block w-4 h-4 rounded ml-2" style={{ backgroundColor: framework.cor }} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{framework.exemplo_codigo && (
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-100 mb-8">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4" style={{ borderColor: framework.cor }}>
|
||||
Exemplo de Código
|
||||
</h3>
|
||||
<div className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-auto text-sm" style={{ maxHeight: 480 }}>
|
||||
<pre className="whitespace-pre-wrap">
|
||||
<code>{framework.exemplo_codigo}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-4 mt-6">
|
||||
{framework.documentacao && (
|
||||
<a
|
||||
href={framework.documentacao}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-linear-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold shadow hover:shadow-xl transition"
|
||||
>
|
||||
📚 Documentação Oficial
|
||||
</a>
|
||||
)}
|
||||
|
||||
{framework.repositorio && (
|
||||
<a
|
||||
href={framework.repositorio}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-white text-gray-800 px-6 py-3 rounded-xl font-semibold shadow border-2 border-gray-100 hover:border-purple-300 transition"
|
||||
>
|
||||
💻 Repositório no GitHub
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }) {
|
||||
const { key } = params;
|
||||
const framework = frameworksData[key];
|
||||
|
||||
if (!framework) {
|
||||
return { title: "Framework não encontrado" };
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${framework.nome} - ${framework.nome_completo}`,
|
||||
description: framework.descricao,
|
||||
};
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return Object.keys(frameworksData).map((key) => ({ key }));
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
import frameworksData from "@/public/frameworks.json";
|
||||
|
||||
export default function Frameworks() {
|
||||
const frameworks = Object.entries(frameworksData);
|
||||
|
||||
return (
|
||||
<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">
|
||||
Frameworks ESP32
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
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>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{frameworks.map(([key, framework]) => (
|
||||
<Link
|
||||
key={key}
|
||||
href={`/frameworks/${key}`}
|
||||
className="group"
|
||||
>
|
||||
<div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 border-2 border-gray-100 hover:border-opacity-50 h-full flex flex-col">
|
||||
|
||||
<div className="p-6 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-5xl">{framework.icone}</span>
|
||||
<div className="flex flex-col gap-2 items-end">
|
||||
<span className="px-3 py-1 rounded-full text-xs font-semibold text-white"
|
||||
style={{ backgroundColor: framework.cor }}>
|
||||
{framework.linguagem}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-1 group-hover:text-purple-600 transition-colors">
|
||||
{framework.nome}
|
||||
</h2>
|
||||
|
||||
<p className="text-xs text-gray-500 mb-3 font-medium">
|
||||
{framework.nome_completo}
|
||||
</p>
|
||||
|
||||
<p className="text-sm text-gray-600 line-clamp-3">
|
||||
{framework.descricao}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-4 grow">
|
||||
<div>
|
||||
<span className="inline-block px-3 py-1 rounded-lg text-xs font-semibold"
|
||||
style={{
|
||||
backgroundColor: `${framework.cor}20`,
|
||||
color: framework.cor
|
||||
}}>
|
||||
{framework.tipo}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-gray-700 mb-2 uppercase tracking-wide">
|
||||
🎯 Função Principal
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600 line-clamp-2">
|
||||
{framework.funcao_principal}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-gray-700 mb-2 uppercase tracking-wide">
|
||||
⚡ Características
|
||||
</h4>
|
||||
<ul className="space-y-1">
|
||||
{framework.caracteristicas.slice(0, 3).map((carac, idx) => (
|
||||
<li key={idx} className="text-xs text-gray-600 flex items-start">
|
||||
<span className="mr-2 mt-0.5" style={{ color: framework.cor }}>▪</span>
|
||||
<span className="line-clamp-1">{carac}</span>
|
||||
</li>
|
||||
))}
|
||||
{framework.caracteristicas.length > 3 && (
|
||||
<li className="text-xs text-gray-400 italic">
|
||||
+{framework.caracteristicas.length - 3} mais...
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-gray-700 mb-2 uppercase tracking-wide">
|
||||
💼 Casos de Uso
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{framework.casos_uso.slice(0, 3).map((caso, idx) => (
|
||||
<span key={idx} className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">
|
||||
{caso}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 pb-6">
|
||||
<div className="flex items-center justify-between text-sm font-semibold group-hover:text-purple-600 transition-colors">
|
||||
<span>Ver Detalhes e Exemplos</span>
|
||||
<span className="transform group-hover:translate-x-2 transition-transform">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</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">
|
||||
Se você está começando, recomendamos 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
|
||||
</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>
|
||||
<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>
|
||||
</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">
|
||||
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
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 rounded-2xl shadow-lg p-8 text-white">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold mb-2">
|
||||
💡 Precisa de Ajuda para Escolher?
|
||||
</h3>
|
||||
<p className="text-blue-100">
|
||||
Compare frameworks, veja exemplos de código e entenda qual se adequa melhor ao seu projeto.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/comparacao-frameworks"
|
||||
className="bg-white text-purple-600 px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 whitespace-nowrap"
|
||||
>
|
||||
📊 Comparar Frameworks
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "tailwindcss";
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Roboto } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const roboto = Roboto({ subsets: ["latin"] });
|
||||
|
||||
export const metadata = {
|
||||
title: "ESPDocs",
|
||||
description: "Documentação não oficial do ESP32 em português.",
|
||||
authors: { name: "Lucas Rayan Guerra", url: "https://cienciaembarcada.com.br" },
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="pt-BR">
|
||||
<body className={`${roboto.className} font-sans`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
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." },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen text-gray-800">
|
||||
<a href="#conteudo" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-white focus:px-4 focus:py-2 focus:rounded-md focus:shadow focus:ring-2 focus:ring-purple-500">
|
||||
Ir para o conteúdo
|
||||
</a>
|
||||
|
||||
<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">
|
||||
<div className="absolute right-0 top-0 -mr-40 -mt-24 opacity-20 pointer-events-none">
|
||||
<svg width="400" height="300" viewBox="0 0 600 400" fill="none" aria-hidden="true">
|
||||
<path d="M0 200 C150 100 350 300 600 200 L600 400 L0 400 Z" fill="white" />
|
||||
</svg>
|
||||
</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">
|
||||
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 e para a comunidade — com foco em clareza, exemplos práticos e colaboração aberta.
|
||||
</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
|
||||
</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"
|
||||
aria-label="Abrir repositório do projeto no GitHub (abre em nova aba)"
|
||||
>
|
||||
Contribuir no GitHub
|
||||
</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">Nossa missão</h2>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Facilitar o aprendizado e acelerar projetos com ESP32 por meio de documentação clara, exemplos testados e comparativos práticos.
|
||||
Priorizamos traduções fiéis, explicações passo a passo e dicas baseadas em experiência real de desenvolvimento.
|
||||
</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.
|
||||
</p>
|
||||
|
||||
<ul role="list" 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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</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">
|
||||
Correções, traduções e novos exemplos são bem-vindos. Abra uma issue ou um pull request no repositório. Buscamos 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 quando possível.</li>
|
||||
<li>Abra um PR e descreva o que foi alterado.</li>
|
||||
</ol>
|
||||
</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">
|
||||
O site prioriza leitura, contraste legível e navegação por teclado. Se encontrar barreiras, por favor relate-nos para que possamos 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 items-center justify-between mb-3">
|
||||
<h3 className="text-lg font-semibold">Contribua</h3>
|
||||
<span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Open Source</span>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-700 mb-4">Ajude a melhorar o ESPDocs com exemplos, correções e traduções.</p>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<a
|
||||
href="https://github.com/lucasrguerra/ESPDocs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-linear-to-r from-blue-600 to-purple-600 text-white font-semibold shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
|
||||
aria-label="Abrir repositório no GitHub"
|
||||
>
|
||||
Ver repositório
|
||||
</a>
|
||||
|
||||
<Link href="/contato" className="inline-flex items-center justify-center px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:border-purple-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" aria-label="Ir para a página de contato">
|
||||
Entrar em contato
|
||||
</Link>
|
||||
</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.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/80 rounded-2xl p-4 shadow-sm border border-gray-100">
|
||||
<h4 className="font-semibold mb-2">Resumo</h4>
|
||||
<ul className="text-sm text-gray-700 space-y-2">
|
||||
<li>🔎 Conteúdo técnico explicado.</li>
|
||||
<li>🧪 Exemplos e projetos.</li>
|
||||
<li>🤝 Comunidade e contribuições.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,306 @@
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
import seriesData from "@/public/series.json";
|
||||
import { notFound } from "next/navigation";
|
||||
import ConnectionsDiagram from "@/components/ConnectionsDiagram";
|
||||
import Image from "next/image";
|
||||
import SeriesTabMenu from "@/components/SeriesTabMenu";
|
||||
|
||||
export default function SerieDetail({ params }) {
|
||||
const { key } = params;
|
||||
const serie = seriesData[key];
|
||||
|
||||
if (!serie) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
let conexoes = [];
|
||||
try {
|
||||
conexoes = require(`@/public/conexoes/${key}.json`);
|
||||
} catch (error) {
|
||||
console.log(`Arquivo de conexões não encontrado para ${key}`);
|
||||
}
|
||||
|
||||
// Development board image mapping
|
||||
const devBoardImages = {
|
||||
"ESP32": "/placas/esp32.png",
|
||||
"ESP32-S2": "/placas/esp32-s2.png",
|
||||
"ESP32-S3": "/placas/esp32-s3.png",
|
||||
"ESP32-C3": "/placas/esp32-c3.png",
|
||||
"ESP32-C5": "/placas/esp32-c5.png",
|
||||
"ESP32-C6": "/placas/esp32-c6.png",
|
||||
"ESP32-H2": "/placas/esp32-h2.png",
|
||||
"ESP32-C2": "/placas/esp32-c2.png",
|
||||
"ESP32-P4": "/placas/esp32-p4.png",
|
||||
};
|
||||
|
||||
const seriesKeys = Object.keys(seriesData);
|
||||
const currentIndex = seriesKeys.indexOf(key);
|
||||
const previousKey = currentIndex > 0 ? seriesKeys[currentIndex - 1] : null;
|
||||
const nextKey = currentIndex < seriesKeys.length - 1 ? seriesKeys[currentIndex + 1] : null;
|
||||
|
||||
const processadorSpecs = [
|
||||
{ label: "Arquitetura", value: serie.arquitetura, icon: "🔧" },
|
||||
{ label: "Núcleos", value: serie.nucleos, icon: "⚙️" },
|
||||
{ label: "Frequência", value: serie.frequencia, icon: "🚀" },
|
||||
{ label: "Coprocessador ULP", value: serie.coprocessador_ulp || "Não", icon: "💤" },
|
||||
{ label: "Aceleradores IA", value: serie.aceleradores_ia || "Não", icon: "🤖" },
|
||||
];
|
||||
|
||||
const conectividadeSpecs = [
|
||||
{ label: "Wi-Fi", value: serie.wifi || "Não", icon: "📶" },
|
||||
{ label: "Bluetooth", value: serie.bluetooth || "Não", icon: "📱" },
|
||||
{ label: "Zigbee/Thread", value: serie.zigbee_thread || "Não", icon: "🌐" },
|
||||
{ label: "Matter", value: serie.matter || "Não", icon: "🏠" },
|
||||
{ label: "Ethernet", value: serie.ethernet || serie.ethernet_mac || "Não", icon: "🔌" },
|
||||
{ label: "CAN", value: serie.can || "Não", icon: "🚗" },
|
||||
];
|
||||
|
||||
const memoriaSpecs = [
|
||||
{ label: "SRAM", value: serie.memoria_sram, icon: "💾" },
|
||||
{ label: "SRAM RTC", value: serie.memoria_sram_rtc, icon: "⏰" },
|
||||
{ label: "ROM", value: serie.memoria_rom, icon: "📀" },
|
||||
{ label: "Flash Externa", value: serie.flash_externa, icon: "💿" },
|
||||
{ label: "PSRAM Externa", value: serie.psram_externa || "Não", icon: "🎯" },
|
||||
];
|
||||
|
||||
const perifericos = [
|
||||
{ label: "GPIO", value: serie.gpio, icon: "📍" },
|
||||
{ label: "ADC", value: serie.adc, icon: "📊" },
|
||||
{ label: "DAC", value: serie.dac || "Não", icon: "🔊" },
|
||||
{ label: "Touch", value: serie.touch || "Não", icon: "👆" },
|
||||
{ label: "UART", value: serie.uart, icon: "💬" },
|
||||
{ label: "SPI", value: serie.spi, icon: "🔄" },
|
||||
{ label: "I2C", value: serie.i2c, icon: "🔗" },
|
||||
{ label: "I2S", value: serie.i2s, icon: "🎵" },
|
||||
{ label: "PWM", value: serie.pwm, icon: "〰️" },
|
||||
{ label: "USB", value: serie.usb || "Não", icon: "🔌" },
|
||||
];
|
||||
|
||||
const interfacesEspeciais = [];
|
||||
if (serie.lcd) interfacesEspeciais.push({ label: "LCD", value: serie.lcd, icon: "🖥️" });
|
||||
if (serie.camera) interfacesEspeciais.push({ label: "Camera", value: serie.camera, icon: "📷" });
|
||||
if (serie.mipi_csi) interfacesEspeciais.push({ label: "MIPI CSI", value: serie.mipi_csi, icon: "📹" });
|
||||
if (serie.mipi_dsi) interfacesEspeciais.push({ label: "MIPI DSI", value: serie.mipi_dsi, icon: "🖼️" });
|
||||
if (serie.sdio) interfacesEspeciais.push({ label: "SDIO", value: serie.sdio, icon: "💳" });
|
||||
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} />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: 'devboard',
|
||||
label: 'Placa de Desenvolvimento',
|
||||
available: devBoardImages[key],
|
||||
content: (
|
||||
<div className="bg-white rounded-3xl shadow-xl p-8 border-2 border-gray-100">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b-2 flex items-center gap-3" style={{ borderColor: serie.cor }}>
|
||||
<span>🔧</span>
|
||||
Placa de Desenvolvimento Oficial
|
||||
</h2>
|
||||
<div className="flex justify-center">
|
||||
<div className="relative w-full max-w-4xl">
|
||||
<Image
|
||||
src={devBoardImages[key]}
|
||||
alt={`${key} DevKit - Placa de Desenvolvimento`}
|
||||
width={1200}
|
||||
height={800}
|
||||
className="rounded-xl shadow-lg w-full h-auto"
|
||||
priority
|
||||
/>
|
||||
<p className="text-center text-sm text-gray-600 mt-4">
|
||||
{key} - Placa de desenvolvimento oficial da Espressif
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: 'specs',
|
||||
label: 'Especificações',
|
||||
available: true,
|
||||
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>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<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="mb-8">
|
||||
<Link href="/series" className="inline-flex items-center text-gray-600 hover:text-purple-600 transition-colors mb-4">
|
||||
<span className="mr-2">←</span> Voltar para Séries
|
||||
</Link>
|
||||
|
||||
<div className="bg-white rounded-3xl shadow-xl p-8 border-2 border-gray-100"
|
||||
style={{ borderColor: serie.cor + '30' }}>
|
||||
<div className="flex items-start justify-between flex-wrap gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-6xl">{serie.icone}</span>
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-800 mb-2">
|
||||
{key}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-2">{serie.nome_completo}</p>
|
||||
<span className="inline-block px-4 py-2 rounded-full text-sm font-semibold text-white"
|
||||
style={{ backgroundColor: serie.cor }}>
|
||||
{serie.arquitetura}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={serie.datasheet}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 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"
|
||||
>
|
||||
📄 Datasheet Oficial
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-gray-700 mt-6 leading-relaxed">
|
||||
{serie.descricao}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-l-4" style={{ borderColor: serie.cor }}>
|
||||
<h3 className="text-sm font-semibold text-gray-600 mb-2">PROCESSADOR</h3>
|
||||
<p className="text-3xl font-bold text-gray-800">{serie.nucleos.includes("2") ? "Dual-Core" : "Single-Core"}</p>
|
||||
<p className="text-gray-600 mt-1">{serie.frequencia}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-l-4" style={{ borderColor: serie.cor }}>
|
||||
<h3 className="text-sm font-semibold text-gray-600 mb-2">MEMÓRIA SRAM</h3>
|
||||
<p className="text-3xl font-bold text-gray-800">{serie.memoria_sram}</p>
|
||||
<p className="text-gray-600 mt-1">+ {serie.memoria_sram_rtc} RTC</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-l-4" style={{ borderColor: serie.cor }}>
|
||||
<h3 className="text-sm font-semibold text-gray-600 mb-2">GPIO</h3>
|
||||
<p className="text-3xl font-bold text-gray-800">{serie.gpio}</p>
|
||||
<p className="text-gray-600 mt-1">Pinos disponíveis</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SeriesTabMenu tabs={tabs} color={serie.cor} />
|
||||
|
||||
<div className="flex justify-between items-center gap-4 mt-12">
|
||||
{previousKey ? (
|
||||
<Link
|
||||
href={`/series/${previousKey}`}
|
||||
className="flex items-center gap-2 bg-white px-6 py-3 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-x-1 transition-all duration-300 border-2 border-gray-100 hover:border-purple-300"
|
||||
>
|
||||
<span>←</span>
|
||||
<div className="text-left">
|
||||
<p className="text-xs text-gray-600">Anterior</p>
|
||||
<p className="font-semibold text-gray-800">{previousKey}</p>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
<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"
|
||||
>
|
||||
📊 Comparar Séries
|
||||
</Link>
|
||||
|
||||
{nextKey ? (
|
||||
<Link
|
||||
href={`/series/${nextKey}`}
|
||||
className="flex items-center gap-2 bg-white px-6 py-3 rounded-xl shadow-lg hover:shadow-xl transform hover:translate-x-1 transition-all duration-300 border-2 border-gray-100 hover:border-purple-300"
|
||||
>
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-gray-600">Próximo</p>
|
||||
<p className="font-semibold text-gray-800">{nextKey}</p>
|
||||
</div>
|
||||
<span>→</span>
|
||||
</Link>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SpecSection({ title, specs, cor }) {
|
||||
return (
|
||||
<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" style={{ borderColor: cor }}>
|
||||
{title}
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{specs.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>
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }) {
|
||||
const { key } = params;
|
||||
const serie = seriesData[key];
|
||||
|
||||
if (!serie) {
|
||||
return {
|
||||
title: "Série não encontrada",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${key} - ${serie.nome_completo}`,
|
||||
description: serie.descricao,
|
||||
};
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return Object.keys(seriesData).map((key) => ({
|
||||
key: key,
|
||||
}));
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
import seriesData from "@/public/series.json";
|
||||
|
||||
export default function Series() {
|
||||
const series = Object.entries(seriesData);
|
||||
|
||||
return (
|
||||
<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">
|
||||
Séries ESP32
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
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>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{series.map(([key, serie]) => (
|
||||
<Link
|
||||
key={key}
|
||||
href={`/series/${key}`}
|
||||
className="group"
|
||||
>
|
||||
<div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 border-2 border-gray-100 hover:border-opacity-50 h-full"
|
||||
style={{ '--hover-color': serie.cor }}>
|
||||
|
||||
<div className="p-6 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-4xl">{serie.icone}</span>
|
||||
<span className="px-3 py-1 rounded-full text-xs font-semibold text-white"
|
||||
style={{ backgroundColor: serie.cor }}>
|
||||
{serie.arquitetura.includes("RISC-V") ? "RISC-V" : "Xtensa"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-2 group-hover:text-purple-600 transition-colors">
|
||||
{key}
|
||||
</h2>
|
||||
|
||||
<p className="text-sm text-gray-600 line-clamp-2">
|
||||
{serie.descricao}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-3">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">⚙️ Núcleos:</span>
|
||||
<span className="font-semibold text-gray-800">{serie.nucleos}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">🚀 Frequência:</span>
|
||||
<span className="font-semibold text-gray-800">{serie.frequencia}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">💾 SRAM:</span>
|
||||
<span className="font-semibold text-gray-800">{serie.memoria_sram}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">📶 Wi-Fi:</span>
|
||||
<span className="font-semibold text-gray-800">
|
||||
{String(serie.wifi).includes("Não") ? "❌" : "✅"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600">📱 Bluetooth:</span>
|
||||
<span className="font-semibold text-gray-800">
|
||||
{serie.bluetooth === "Não" ? "❌" : "✅"}
|
||||
</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">
|
||||
🤖 Aceleradores IA
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{serie.matter === "Sim" && (
|
||||
<div className="pt-2 border-t border-gray-100">
|
||||
<span className="inline-block px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded">
|
||||
🏠 Suporte Matter
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="px-6 pb-6">
|
||||
<div className="flex items-center justify-between text-sm font-semibold group-hover:text-purple-600 transition-colors">
|
||||
<span>Ver Detalhes</span>
|
||||
<span className="transform group-hover:translate-x-2 transition-transform">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</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="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"
|
||||
>
|
||||
📊 Comparar Séries
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Sobre() {
|
||||
return (
|
||||
<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-20 max-w-5xl mx-auto">
|
||||
<div className="bg-white/60 backdrop-blur-sm rounded-2xl p-8 shadow-md border border-gray-100">
|
||||
<div className="mb-6">
|
||||
<Link href="/" className="text-sm text-blue-600 hover:underline">← Voltar</Link>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 mb-6">
|
||||
Sobre o ESPDocs
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-700 mb-4">
|
||||
O ESPDocs nasceu da paixão por explorar o potencial dos microcontroladores ESP32 e da vontade de compartilhar conhecimento de forma acessível e colaborativa. Criado por um entusiasta e desenvolvedor com mais de quatro anos de experiência prática com a plataforma, o projeto tem como propósito reunir, organizar e traduzir informações técnicas — muitas vezes dispersas — em um só lugar.
|
||||
</p>
|
||||
|
||||
<p className="text-lg text-gray-700 mb-4">
|
||||
Mais do que uma simples documentação não oficial, o ESPDocs é um espaço vivo de aprendizado. Aqui, cada detalhe sobre o hardware, frameworks, protocolos e boas práticas de desenvolvimento é tratado com cuidado e clareza, para que qualquer pessoa — do iniciante ao profissional — possa compreender e aplicar.
|
||||
</p>
|
||||
|
||||
<p className="text-lg text-gray-700 mb-4">
|
||||
A iniciativa surgiu com um foco especial na comunidade brasileira, que cresce e se destaca no cenário da eletrônica e IoT. O objetivo é facilitar o acesso ao conhecimento técnico em português, incentivar a experimentação e fortalecer a troca de experiências entre desenvolvedores, estudantes e pesquisadores.
|
||||
</p>
|
||||
|
||||
<p className="text-lg text-gray-700 mb-4">
|
||||
O ESPDocs é, acima de tudo, uma homenagem à curiosidade e ao espírito colaborativo que impulsionam a inovação.
|
||||
</p>
|
||||
|
||||
<p className="text-lg text-gray-800 font-semibold mt-6">
|
||||
ESPDocs — Documentando o futuro da IoT, em código aberto e em português.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user