Adição dos novos modelos e do tema escuro
This commit is contained in:
Lucas Rayan committed
1 parent
e3b4600300
commit
de4abf7cc7
42 files changed
+6551
-3891
No files matched your search
+457
-382
@@ -6,420 +6,495 @@ import { notFound } from "next/navigation";
|
||||
import seriesData from "@/public/series.json";
|
||||
import ConnectionsDiagram from "@/components/ConnectionsDiagram";
|
||||
import SeriesTabMenu from "@/components/SeriesTabMenu";
|
||||
import {
|
||||
Cpu,
|
||||
Activity,
|
||||
Database,
|
||||
Wifi,
|
||||
Bluetooth,
|
||||
Battery,
|
||||
Sparkles,
|
||||
Home,
|
||||
ArrowRight,
|
||||
ArrowLeft,
|
||||
ExternalLink,
|
||||
Scale,
|
||||
FileText,
|
||||
Code,
|
||||
BookOpen,
|
||||
AlertTriangle,
|
||||
Moon,
|
||||
Plug,
|
||||
Compass,
|
||||
Sliders,
|
||||
MapPin,
|
||||
Volume2,
|
||||
Fingerprint,
|
||||
MessageSquare,
|
||||
Repeat,
|
||||
Share2,
|
||||
Music,
|
||||
Clock,
|
||||
HardDrive,
|
||||
Folder,
|
||||
Thermometer,
|
||||
ChevronRight,
|
||||
Lightbulb
|
||||
} from "lucide-react";
|
||||
|
||||
export default async function SerieDetail({ params }) {
|
||||
const { key } = await params;
|
||||
const serie = seriesData[key];
|
||||
const { key } = await params;
|
||||
const serie = seriesData[key];
|
||||
|
||||
if (!serie) {
|
||||
notFound();
|
||||
}
|
||||
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}`);
|
||||
}
|
||||
let conexoes = [];
|
||||
try {
|
||||
conexoes = require(`@/public/conexoes/${key}.json`);
|
||||
} catch (error) {
|
||||
console.log(`Arquivo de conexões não encontrado para ${key}`);
|
||||
}
|
||||
|
||||
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 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 processadorSpecs = [
|
||||
{ label: "Arquitetura", value: serie.arquitetura, icon: <Cpu className="w-5 h-5 text-blue-500" /> },
|
||||
{ label: "Núcleos", value: serie.nucleos, icon: <Sliders className="w-5 h-5 text-blue-500" /> },
|
||||
{ label: "Frequência", value: serie.frequencia, icon: <Activity className="w-5 h-5 text-blue-500" /> },
|
||||
{ label: "Coprocessador ULP", value: serie.coprocessador_ulp || "Não", icon: <Moon className="w-5 h-5 text-blue-500" /> },
|
||||
{ label: "Aceleradores IA", value: serie.aceleradores_ia || "Não", icon: <Sparkles className="w-5 h-5 text-purple-500" /> },
|
||||
];
|
||||
|
||||
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 conectividadeSpecs = [
|
||||
{ label: "Wi-Fi", value: serie.wifi || "Não", icon: <Wifi className="w-5 h-5 text-indigo-500" /> },
|
||||
{ label: "Bluetooth", value: serie.bluetooth || "Não", icon: <Bluetooth className="w-5 h-5 text-indigo-500" /> },
|
||||
{ label: "Zigbee/Thread", value: serie.zigbee_thread || "Não", icon: <Compass className="w-5 h-5 text-indigo-500" /> },
|
||||
{ label: "Matter", value: serie.matter || "Não", icon: <Home className="w-5 h-5 text-indigo-500" /> },
|
||||
{ label: "Ethernet", value: serie.ethernet || serie.ethernet_mac || "Não", icon: <Plug className="w-5 h-5 text-indigo-500" /> },
|
||||
{ label: "CAN", value: serie.can || "Não", icon: <Activity className="w-5 h-5 text-indigo-500" /> },
|
||||
];
|
||||
|
||||
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 memoriaSpecs = [
|
||||
{ label: "SRAM", value: serie.memoria_sram, icon: <Database className="w-5 h-5 text-pink-500" /> },
|
||||
{ label: "SRAM RTC", value: serie.memoria_sram_rtc, icon: <Clock className="w-5 h-5 text-pink-500" /> },
|
||||
{ label: "ROM", value: serie.memoria_rom, icon: <Folder className="w-5 h-5 text-pink-500" /> },
|
||||
{ label: "Flash Externa", value: serie.flash_externa, icon: <HardDrive className="w-5 h-5 text-pink-500" /> },
|
||||
{ label: "PSRAM Externa", value: serie.psram_externa || "Não", icon: <Sliders className="w-5 h-5 text-pink-500" /> },
|
||||
];
|
||||
|
||||
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 perifericos = [
|
||||
{ label: "GPIO", value: serie.gpio, icon: <MapPin className="w-5 h-5 text-emerald-500" /> },
|
||||
{ label: "ADC", value: serie.adc, icon: <Activity className="w-5 h-5 text-emerald-500" /> },
|
||||
{ label: "DAC", value: serie.dac || "Não", icon: <Volume2 className="w-5 h-5 text-emerald-500" /> },
|
||||
{ label: "Touch", value: serie.touch || "Não", icon: <Fingerprint className="w-5 h-5 text-emerald-500" /> },
|
||||
{ label: "UART", value: serie.uart, icon: <MessageSquare className="w-5 h-5 text-emerald-500" /> },
|
||||
{ label: "SPI", value: serie.spi, icon: <Repeat className="w-5 h-5 text-emerald-500" /> },
|
||||
{ label: "I2C", value: serie.i2c, icon: <Share2 className="w-5 h-5 text-emerald-500" /> },
|
||||
{ label: "I2S", value: serie.i2s, icon: <Music className="w-5 h-5 text-emerald-500" /> },
|
||||
{ label: "PWM", value: serie.pwm, icon: <Sliders className="w-5 h-5 text-emerald-500" /> },
|
||||
{ label: "USB", value: serie.usb || "Não", icon: <Plug className="w-5 h-5 text-emerald-500" /> },
|
||||
];
|
||||
|
||||
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 interfacesEspeciais = [];
|
||||
if (serie.lcd) interfacesEspeciais.push({ label: "LCD", value: serie.lcd, icon: <Sliders className="w-5 h-5 text-cyan-500" /> });
|
||||
if (serie.camera) interfacesEspeciais.push({ label: "Câmera", value: serie.camera, icon: <Sliders className="w-5 h-5 text-cyan-500" /> });
|
||||
if (serie.mipi_csi) interfacesEspeciais.push({ label: "MIPI CSI", value: serie.mipi_csi, icon: <Sliders className="w-5 h-5 text-cyan-500" /> });
|
||||
if (serie.mipi_dsi) interfacesEspeciais.push({ label: "MIPI DSI", value: serie.mipi_dsi, icon: <Sliders className="w-5 h-5 text-cyan-500" /> });
|
||||
if (serie.sdio) interfacesEspeciais.push({ label: "SDIO", value: serie.sdio, icon: <Sliders className="w-5 h-5 text-cyan-500" /> });
|
||||
if (serie.sensor_hall) interfacesEspeciais.push({ label: "Sensor Hall", value: serie.sensor_hall, icon: <Sliders className="w-5 h-5 text-cyan-500" /> });
|
||||
if (serie.sensor_temperatura) interfacesEspeciais.push({ label: "Sensor Temperatura", value: serie.sensor_temperatura, icon: <Thermometer className="w-5 h-5 text-cyan-500" /> });
|
||||
|
||||
// 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'
|
||||
};
|
||||
|
||||
consumoEnergia.push({
|
||||
label: modoLabels[modo] || modo.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
|
||||
value: consumo,
|
||||
icon: "🔋"
|
||||
});
|
||||
});
|
||||
}
|
||||
// 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'
|
||||
};
|
||||
|
||||
consumoEnergia.push({
|
||||
label: modoLabels[modo] || modo.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
|
||||
value: consumo,
|
||||
icon: <Battery className="w-5 h-5 text-teal-500" />
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 'devboard',
|
||||
label: 'Placa de Desenvolvimento',
|
||||
available: serie.placa,
|
||||
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={serie.placa}
|
||||
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: '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">
|
||||
<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>
|
||||
const tabs = [
|
||||
{
|
||||
id: 'devboard',
|
||||
label: 'Placa de Desenvolvimento',
|
||||
available: serie.placa,
|
||||
content: (
|
||||
<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl p-6 md:p-8 border border-slate-200/60 dark:border-slate-800/80 shadow-2xl">
|
||||
<h2 className="text-xl font-bold text-slate-800 dark:text-slate-100 mb-6 pb-3 border-b border-slate-200/65 dark:border-slate-800/65 flex items-center gap-3">
|
||||
<Sliders className="w-5 h-5" style={{ color: serie.cor }} />
|
||||
<span>Kit de Desenvolvimento Oficial</span>
|
||||
</h2>
|
||||
<div className="flex justify-center">
|
||||
<div className="relative w-full max-w-3xl bg-white dark:bg-white overflow-hidden rounded-2xl border border-slate-200/50 dark:border-slate-850/50 shadow-lg p-4">
|
||||
<Image
|
||||
src={serie.placa}
|
||||
alt={`${key} DevKit - Placa de Desenvolvimento`}
|
||||
width={1200}
|
||||
height={800}
|
||||
className="rounded-xl object-contain w-full h-auto max-h-[450px]"
|
||||
priority
|
||||
/>
|
||||
<p className="text-center text-xs text-slate-500 dark:text-slate-400 mt-4 select-none">
|
||||
Placa de desenvolvimento padrão da Espressif Systems para a série {key}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: 'connections',
|
||||
label: 'Diagrama de Conexões',
|
||||
available: conexoes.length > 0,
|
||||
content: (
|
||||
<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl p-6 md:p-8 border border-slate-200/60 dark:border-slate-800/80 shadow-2xl">
|
||||
<div className="bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 p-5 mb-8 rounded-2xl">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="w-5 h-5 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-bold text-sm text-amber-850 dark:text-amber-300 mb-1 select-none">Diagrama do SoC (System on Chip)</h4>
|
||||
<p className="text-xs text-amber-800 dark:text-amber-400 leading-relaxed">
|
||||
Este mapa refere-se exclusivamente às portas e conexões do silício bruto do microcontrolador <strong>{key}</strong>. As placas de desenvolvimento podem expor apenas uma parcela destas conexões, ou roteá-las de formas diferentes dependendo do circuito impresso.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConnectionsDiagram connections={conexoes} serie={serie} />
|
||||
<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>
|
||||
)
|
||||
}
|
||||
];
|
||||
<div className="bg-slate-100/50 dark:bg-slate-950/40 rounded-2xl p-6 border border-slate-200/60 dark:border-slate-800/80 mt-8">
|
||||
<h3 className="text-sm font-bold text-slate-800 dark:text-slate-100 mb-3 flex items-center gap-2 select-none">
|
||||
<Lightbulb className="w-4 h-4 text-purple-500" />
|
||||
<span>Flexibilidade das Portas GPIO</span>
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||
O {key} integra uma matriz IO multiplexada e de baixa latência (IO MUX) que permite reconfigurar a grande maioria dos pinos digitais para assumir funções de SPI, I2C, UART, LEDC PWM ou barramentos de câmera e display.
|
||||
Para mais detalhes sobre as restrições físicas de GPIOs strapping ou analógicas, consulte o
|
||||
<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-purple-600 dark:text-purple-400 hover:underline inline-flex items-center gap-0.5"
|
||||
>
|
||||
<span>Guia Oficial de GPIO</span>
|
||||
<ExternalLink className="w-2.5 h-2.5" />
|
||||
</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<Header />
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-slate-50 via-white to-purple-50/40 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900 min-h-screen text-slate-900 dark:text-slate-100 transition-colors duration-300">
|
||||
<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>
|
||||
|
||||
<div className="grid gap-3 mx-auto md:mx-0">
|
||||
<a
|
||||
href={serie.datasheet}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-blue-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>
|
||||
<main className="px-6 pt-16 pb-24 max-w-7xl mx-auto">
|
||||
|
||||
{/* Breadcrumb Navigation */}
|
||||
<div className="mb-8">
|
||||
<Link
|
||||
href="/series"
|
||||
className="inline-flex items-center gap-2 text-xs font-bold text-slate-500 dark:text-slate-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors uppercase tracking-wider mb-6"
|
||||
>
|
||||
<ArrowLeft className="w-3.5 h-3.5" />
|
||||
<span>Voltar para Séries</span>
|
||||
</Link>
|
||||
|
||||
{/* Top Info Banner Card */}
|
||||
<div
|
||||
className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl p-6 md:p-8 shadow-2xl border relative overflow-hidden"
|
||||
style={{ borderColor: `${serie.cor}40` }}
|
||||
>
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-8">
|
||||
<div className="flex items-center gap-5">
|
||||
<span className="text-6xl select-none filter drop-shadow-md">{serie.icone}</span>
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-display font-extrabold text-slate-850 dark:text-slate-100 tracking-tight leading-none mb-3">
|
||||
{key}
|
||||
</h1>
|
||||
<p className="text-sm font-semibold text-slate-400 dark:text-slate-500 mb-4">{serie.nome_completo}</p>
|
||||
<span
|
||||
className="inline-block px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest"
|
||||
style={{ backgroundColor: `${serie.cor}18`, color: serie.cor, border: `1px solid ${serie.cor}30` }}
|
||||
>
|
||||
{serie.arquitetura}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links Block */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-1 gap-3 w-full lg:w-auto">
|
||||
<a
|
||||
href={serie.datasheet}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-950 px-5 py-3 rounded-xl font-bold text-xs uppercase tracking-wider hover:opacity-90 transition-opacity shadow-lg"
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
<span>Datasheet Oficial</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={serie.guia_de_programacao}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-green-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"
|
||||
>
|
||||
💻 Guia de Programação
|
||||
</a>
|
||||
|
||||
{serie.manual_tecnico && <a
|
||||
href={serie.manual_tecnico}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-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"
|
||||
>
|
||||
📖 Manual Técnico
|
||||
</a>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-gray-700 mt-6 leading-relaxed">
|
||||
{serie.descricao}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href={serie.guia_de_programacao}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center gap-2 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 px-5 py-3 rounded-xl font-bold text-xs uppercase tracking-wider hover:bg-emerald-500/20 transition-all shadow-xs"
|
||||
>
|
||||
<Code className="w-4 h-4" />
|
||||
<span>Guia de Programação</span>
|
||||
</a>
|
||||
|
||||
{serie.manual_tecnico && (
|
||||
<a
|
||||
href={serie.manual_tecnico}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center gap-2 bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 px-5 py-3 rounded-xl font-bold text-xs uppercase tracking-wider hover:bg-purple-500/20 transition-all shadow-xs"
|
||||
>
|
||||
<BookOpen className="w-4 h-4" />
|
||||
<span>Manual Técnico</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-6 leading-relaxed max-w-4xl">
|
||||
{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>
|
||||
{/* Primary Features Highlight Grid */}
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div
|
||||
className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-l-4"
|
||||
style={{ borderColor: serie.cor }}
|
||||
>
|
||||
<h3 className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5 select-none">PROCESSADOR</h3>
|
||||
<p className="text-2xl font-extrabold text-slate-800 dark:text-slate-100">{serie.nucleos.includes("2") ? "Dual-Core" : "Single-Core"}</p>
|
||||
<p className="text-xs text-slate-400 mt-1">{serie.frequencia}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-l-4"
|
||||
style={{ borderColor: serie.cor }}
|
||||
>
|
||||
<h3 className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5 select-none">MEMÓRIA SRAM</h3>
|
||||
<p className="text-2xl font-extrabold text-slate-800 dark:text-slate-100">{serie.memoria_sram}</p>
|
||||
<p className="text-xs text-slate-400 mt-1">+ {serie.memoria_sram_rtc} RTC SRAM</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-l-4"
|
||||
style={{ borderColor: serie.cor }}
|
||||
>
|
||||
<h3 className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5 select-none">GPIO DISPONÍVEIS</h3>
|
||||
<p className="text-2xl font-extrabold text-slate-800 dark:text-slate-100">{serie.gpio}</p>
|
||||
<p className="text-xs text-slate-400 mt-1">Pinos I/O programáveis</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SeriesTabMenu tabs={tabs} color={serie.cor} />
|
||||
{/* DevBoard and Connections Tabs */}
|
||||
<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>
|
||||
{/* Specs List Cards */}
|
||||
<div className="space-y-6 mt-12">
|
||||
<SpecSection title="Processador" specs={processadorSpecs} cor={serie.cor} icon={<Cpu className="w-5 h-5" style={{ color: serie.cor }} />} />
|
||||
<SpecSection title="Conectividade RF" specs={conectividadeSpecs} cor={serie.cor} icon={<Wifi className="w-5 h-5" style={{ color: serie.cor }} />} />
|
||||
<SpecSection title="Estrutura de Memória" specs={memoriaSpecs} cor={serie.cor} icon={<Database className="w-5 h-5" style={{ color: serie.cor }} />} />
|
||||
|
||||
{/* Power Consumption section */}
|
||||
{consumoEnergia.length > 0 && (
|
||||
<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl p-6 md:p-8 border border-slate-200/60 dark:border-slate-800/80 shadow-2xl">
|
||||
<h2 className="text-xl font-bold text-slate-800 dark:text-slate-100 mb-6 pb-3 border-b border-slate-200/65 dark:border-slate-800/65 flex items-center gap-3 select-none">
|
||||
<Battery className="w-5 h-5" style={{ color: serie.cor }} />
|
||||
<span>Consumo de Energia</span>
|
||||
</h2>
|
||||
|
||||
<div className="bg-blue-500/10 border border-blue-500/20 p-4 mb-6 rounded-xl">
|
||||
<div className="flex items-start gap-3 text-blue-650 dark:text-blue-400">
|
||||
<Lightbulb className="w-5 h-5 shrink-0 mt-0.5" />
|
||||
<p className="text-xs leading-relaxed">
|
||||
<strong>Especificações típicas medidas sob 3.3V com 25°C de temperatura ambiente.</strong> O consumo absoluto depende ativamente do ciclo de trabalho (duty cycle) das interfaces Wi-Fi/Bluetooth e da frequência de clock configurada via software.
|
||||
</p>
|
||||
</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-center gap-3.5 p-3.5 bg-slate-50/50 dark:bg-slate-950/20 rounded-xl hover:bg-purple-500/5 dark:hover:bg-purple-400/5 border border-slate-150/40 dark:border-slate-850/40 transition-colors">
|
||||
<div className="p-2 bg-white dark:bg-slate-900 rounded-lg shadow-xs border border-slate-200/30 dark:border-slate-850/30 shrink-0">
|
||||
{spec.icon}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[10px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider">{spec.label}</p>
|
||||
<p className="text-sm font-extrabold text-slate-800 dark:text-slate-200 mt-0.5">{spec.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<SpecSection title="Periféricos Disponíveis" specs={perifericos} cor={serie.cor} icon={<Sliders className="w-5 h-5" style={{ color: serie.cor }} />} />
|
||||
|
||||
{interfacesEspeciais.length > 0 && (
|
||||
<SpecSection title="Interfaces de Hardware Especiais" specs={interfacesEspeciais} cor={serie.cor} icon={<Sparkles className="w-5 h-5" style={{ color: serie.cor }} />} />
|
||||
)}
|
||||
|
||||
<SpecSection
|
||||
title="Limites Operacionais de Temperatura"
|
||||
icon={<Thermometer className="w-5 h-5" style={{ color: serie.cor }} />}
|
||||
specs={[
|
||||
{ label: "Operação", value: serie.temperatura_operacao, icon: <Thermometer className="w-5 h-5 text-red-500" /> },
|
||||
{ label: "Armazenamento", value: serie.temperatura_armazenamento, icon: <Folder className="w-5 h-5 text-red-500" /> },
|
||||
]}
|
||||
cor={serie.cor}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Call-to-Action para Catálogo de Placas */}
|
||||
<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">
|
||||
<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-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="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"
|
||||
>
|
||||
<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>
|
||||
{/* DevBoard CTA Panel */}
|
||||
<div className="my-20 bg-gradient-to-br from-slate-900 to-indigo-950 dark:from-slate-950 dark:to-purple-950/20 border border-slate-800/80 rounded-3xl p-8 md:p-12 shadow-2xl relative overflow-hidden">
|
||||
<div className="absolute right-0 bottom-0 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
<div className="grid sm:flex sm:justify-between items-center gap-4 mt-12 md:mx-8">
|
||||
{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>
|
||||
) : null}
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-8 relative z-10">
|
||||
<div className="flex-1 max-w-2xl text-center md:text-left">
|
||||
<div className="inline-flex items-center gap-2 bg-white/10 text-slate-350 px-3 py-1 rounded-full mb-4 text-xs font-semibold select-none">
|
||||
<Home className="w-3.5 h-3.5" />
|
||||
<span>Hardware Fisico</span>
|
||||
</div>
|
||||
<h3 className="text-2xl md:text-3xl font-display font-extrabold text-white mb-4">
|
||||
Pronto para começar a prototipar?
|
||||
</h3>
|
||||
<p className="text-sm text-slate-400 leading-relaxed">
|
||||
Explore toda a nossa grade de placas de desenvolvimento de parceiros oficiais para a série {key}. Compare dimensões, conversores USB-serial e pinagens prontas para protoboards.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/catalogo"
|
||||
className="inline-flex items-center justify-center gap-2 bg-white text-slate-900 px-6 py-3.5 rounded-xl font-bold text-sm hover:bg-slate-100 transition-all duration-300 shrink-0 shadow-md active:scale-95"
|
||||
>
|
||||
<span>Ver Placas Disponíveis</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</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>
|
||||
) : null}
|
||||
</div>
|
||||
</main>
|
||||
{/* Previous / Next Nav bars */}
|
||||
<div className="grid sm:flex sm:justify-between items-center gap-4 mt-12 px-2 select-none">
|
||||
{previousKey ? (
|
||||
<Link
|
||||
href={`/series/${previousKey}`}
|
||||
className="flex items-center gap-3 bg-white/70 dark:bg-slate-900/40 backdrop-blur-xl px-5 py-3.5 rounded-2xl shadow-lg border border-slate-200/60 dark:border-slate-800/80 hover:border-purple-500/55 dark:hover:border-purple-400/55 transition-all group shrink-0"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 text-slate-400 group-hover:-translate-x-1.5 transition-transform" />
|
||||
<div className="text-left">
|
||||
<p className="text-[10px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider">Anterior</p>
|
||||
<p className="text-sm font-extrabold text-slate-800 dark:text-slate-200">{previousKey}</p>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="hidden sm:block w-36" />
|
||||
)}
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
<Link
|
||||
href="/comparacao"
|
||||
className="inline-flex items-center justify-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-950 px-6 py-3.5 rounded-xl font-bold text-xs uppercase tracking-wider hover:opacity-90 transition-opacity shadow-md"
|
||||
>
|
||||
<Scale className="w-4 h-4" />
|
||||
<span>Comparar Séries</span>
|
||||
</Link>
|
||||
|
||||
{nextKey ? (
|
||||
<Link
|
||||
href={`/series/${nextKey}`}
|
||||
className="flex items-center gap-3 bg-white/70 dark:bg-slate-900/40 backdrop-blur-xl px-5 py-3.5 rounded-2xl shadow-lg border border-slate-200/60 dark:border-slate-800/80 hover:border-purple-500/55 dark:hover:border-purple-400/55 transition-all group shrink-0"
|
||||
>
|
||||
<div className="text-right">
|
||||
<p className="text-[10px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider">Próximo</p>
|
||||
<p className="text-sm font-extrabold text-slate-800 dark:text-slate-200">{nextKey}</p>
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-slate-400 group-hover:translate-x-1.5 transition-transform" />
|
||||
</Link>
|
||||
) : (
|
||||
<div className="hidden sm:block w-36" />
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
function SpecSection({ title, specs, cor, icon }) {
|
||||
return (
|
||||
<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl p-6 md:p-8 border border-slate-200/60 dark:border-slate-800/80 shadow-2xl">
|
||||
<h2 className="text-xl font-bold text-slate-800 dark:text-slate-100 mb-6 pb-3 border-b border-slate-200/65 dark:border-slate-800/65 flex items-center gap-3 select-none">
|
||||
{icon}
|
||||
<span>{title}</span>
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{specs.map((spec, index) => (
|
||||
<div key={index} className="flex items-center gap-3.5 p-3.5 bg-slate-50/50 dark:bg-slate-950/20 rounded-xl hover:bg-purple-500/5 dark:hover:bg-purple-400/5 border border-slate-150/40 dark:border-slate-850/40 transition-colors">
|
||||
<div className="p-2 bg-white dark:bg-slate-900 rounded-lg shadow-xs border border-slate-200/30 dark:border-slate-850/30 shrink-0">
|
||||
{spec.icon}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[10px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider">{spec.label}</p>
|
||||
<p className="text-sm font-extrabold text-slate-800 dark:text-slate-200 mt-0.5">{spec.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }) {
|
||||
const { key } = await params;
|
||||
const serie = seriesData[key];
|
||||
const { key } = await params;
|
||||
const serie = seriesData[key];
|
||||
|
||||
if (!serie) {
|
||||
return {
|
||||
title: "Série não encontrada",
|
||||
};
|
||||
}
|
||||
if (!serie) {
|
||||
return {
|
||||
title: "Série não encontrada",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `ESPDocs - ${serie.nome_completo}`,
|
||||
description: serie.descricao,
|
||||
};
|
||||
return {
|
||||
title: `ESPDocs - ${serie.nome_completo}`,
|
||||
description: serie.descricao,
|
||||
};
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return Object.keys(seriesData).map((key) => ({
|
||||
key: key,
|
||||
}));
|
||||
return Object.keys(seriesData).map((key) => ({
|
||||
key: key,
|
||||
}));
|
||||
}
|
||||
+205
-142
@@ -1,159 +1,222 @@
|
||||
"use client";
|
||||
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
import seriesData from "@/public/series.json";
|
||||
import {
|
||||
Cpu,
|
||||
Activity,
|
||||
Database,
|
||||
Wifi,
|
||||
Bluetooth,
|
||||
Battery,
|
||||
Sparkles,
|
||||
Home,
|
||||
ArrowRight,
|
||||
Scale,
|
||||
Compass
|
||||
} from "lucide-react";
|
||||
|
||||
export default function Series() {
|
||||
const series = Object.entries(seriesData);
|
||||
const series = Object.entries(seriesData);
|
||||
|
||||
return (
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<Header />
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-slate-50 via-white to-purple-50/40 dark:from-slate-950 dark:via-slate-950 dark:to-slate-900 min-h-screen text-slate-900 dark:text-slate-100 transition-colors duration-300">
|
||||
<Header />
|
||||
|
||||
<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 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>
|
||||
</section>
|
||||
<main id="conteudo" className="px-6 pt-16 pb-24 max-w-7xl mx-auto">
|
||||
|
||||
{/* Top Section */}
|
||||
<section className="text-center mb-20">
|
||||
<div className="inline-flex items-center gap-2 bg-purple-500/10 dark:bg-purple-400/5 px-4 py-2 rounded-full mb-6 border border-purple-500/20 shadow-xs select-none">
|
||||
<Compass className="w-4 h-4 text-purple-600 dark:text-purple-400" />
|
||||
<span className="text-xs font-bold text-purple-600 dark:text-purple-400 uppercase tracking-widest">Explore o Ecossistema ESP32</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-display font-extrabold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400 bg-clip-text text-transparent mb-6 tracking-tight leading-tight">
|
||||
Séries ESP32
|
||||
</h1>
|
||||
|
||||
<p className="text-base md:text-lg text-slate-500 dark:text-slate-400 max-w-3xl mx-auto leading-relaxed">
|
||||
Conheça toda a família de microcontroladores da Espressif. Cada série foi projetada com foco em engenharia especializada, desde nós de sensores autônomos de baixo consumo até poderosos aceleradores de inteligência artificial.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
{/* Series Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{series.map(([key, serie]) => {
|
||||
const isRiscV = serie.arquitetura.includes("RISC-V");
|
||||
return (
|
||||
<Link
|
||||
key={key}
|
||||
href={`/series/${key}`}
|
||||
className="group block"
|
||||
>
|
||||
{/* Glassmorphic card container with dynamic color borders and shadows */}
|
||||
<div
|
||||
className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl p-6 md:p-8 border border-slate-200/60 dark:border-slate-800/80 hover:shadow-2xl transition-all duration-500 h-full flex flex-col justify-between"
|
||||
style={{
|
||||
borderColor: 'rgba(148, 163, 184, 0.1)',
|
||||
transition: 'border-color 0.3s, box-shadow 0.3s, transform 0.3s'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = serie.cor;
|
||||
e.currentTarget.style.boxShadow = `0 15px 35px -12px ${serie.cor}35`;
|
||||
e.currentTarget.style.transform = 'translateY(-6px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = '';
|
||||
e.currentTarget.style.boxShadow = '';
|
||||
e.currentTarget.style.transform = '';
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
{/* Header block with Icon & Architecture */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<span className="text-4xl select-none filter drop-shadow-md transform group-hover:scale-110 transition-transform duration-300">{serie.icone}</span>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-[10px] font-bold tracking-widest uppercase select-none`}
|
||||
style={{ backgroundColor: `${serie.cor}18`, color: serie.cor, border: `1px solid ${serie.cor}30` }}
|
||||
>
|
||||
{isRiscV ? "RISC-V" : "Xtensa"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title and description */}
|
||||
<h2 className="text-2xl font-display font-extrabold text-slate-850 dark:text-slate-100 mb-3 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
|
||||
{key}
|
||||
</h2>
|
||||
|
||||
<p className="text-xs text-slate-450 dark:text-slate-500 line-clamp-2 leading-relaxed mb-6">
|
||||
{serie.descricao}
|
||||
</p>
|
||||
|
||||
<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>
|
||||
{/* Detailed specs micro-grid */}
|
||||
<div className="space-y-3.5 border-t border-slate-100 dark:border-slate-800/60 pt-6">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-2 text-slate-400 dark:text-slate-500 font-semibold select-none">
|
||||
<Cpu className="w-3.5 h-3.5 text-blue-500/80" />
|
||||
<span>Núcleos:</span>
|
||||
</div>
|
||||
<span className="font-bold text-slate-800 dark:text-slate-200">{serie.nucleos}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-2 text-slate-400 dark:text-slate-500 font-semibold select-none">
|
||||
<Activity className="w-3.5 h-3.5 text-amber-500/80" />
|
||||
<span>Frequência:</span>
|
||||
</div>
|
||||
<span className="font-bold text-slate-800 dark:text-slate-200">{serie.frequencia}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-2 text-slate-400 dark:text-slate-500 font-semibold select-none">
|
||||
<Database className="w-3.5 h-3.5 text-pink-500/80" />
|
||||
<span>SRAM:</span>
|
||||
</div>
|
||||
<span className="font-bold text-slate-800 dark:text-slate-200">{serie.memoria_sram}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-2 text-slate-400 dark:text-slate-500 font-semibold select-none">
|
||||
<Wifi className="w-3.5 h-3.5 text-emerald-500/80" />
|
||||
<span>Wi-Fi:</span>
|
||||
</div>
|
||||
<span className="font-bold text-slate-800 dark:text-slate-200">
|
||||
{String(serie.wifi).includes("Não") ? (
|
||||
<span className="text-slate-350 dark:text-slate-650">—</span>
|
||||
) : (
|
||||
<span className="text-emerald-500 dark:text-emerald-400 font-extrabold">Sim</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-2 text-slate-400 dark:text-slate-500 font-semibold select-none">
|
||||
<Bluetooth className="w-3.5 h-3.5 text-indigo-500/80" />
|
||||
<span>Bluetooth:</span>
|
||||
</div>
|
||||
<span className="font-bold text-slate-800 dark:text-slate-200">
|
||||
{serie.bluetooth === "Não" ? (
|
||||
<span className="text-slate-350 dark:text-slate-650">—</span>
|
||||
) : (
|
||||
<span className="text-indigo-500 dark:text-indigo-400 font-extrabold">Sim</span>
|
||||
)}
|
||||
</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.consumo_energia?.deep_sleep && (
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-2 text-slate-400 dark:text-slate-500 font-semibold select-none">
|
||||
<Battery className="w-3.5 h-3.5 text-green-500/80" />
|
||||
<span>Deep Sleep:</span>
|
||||
</div>
|
||||
<span className="font-bold text-slate-800 dark:text-slate-200">{serie.consumo_energia.deep_sleep}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
)}
|
||||
{/* IA / Matter Badges & Action Footer */}
|
||||
<div className="mt-8">
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{serie.aceleradores_ia && (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-1 bg-purple-500/10 text-purple-600 dark:text-purple-400 text-[10px] font-bold uppercase rounded-lg border border-purple-500/20 shadow-xs select-none">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
<span>Aceleradores IA</span>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{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>
|
||||
{serie.matter === "Sim" && (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-1 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-[10px] font-bold uppercase rounded-lg border border-emerald-500/20 shadow-xs select-none">
|
||||
<Home className="w-3 h-3" />
|
||||
<span>Suporte Matter</span>
|
||||
</span>
|
||||
)}
|
||||
</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="flex items-center justify-between text-xs font-bold text-slate-500 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors uppercase tracking-wider select-none border-t border-slate-100 dark:border-slate-800/60 pt-4">
|
||||
<span>Ver Detalhes</span>
|
||||
<ArrowRight className="w-4 h-4 transform group-hover:translate-x-2 transition-transform duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<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="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"
|
||||
>
|
||||
<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>
|
||||
</main>
|
||||
{/* Quick comparison CTA Box */}
|
||||
<div className="mt-20 bg-gradient-to-br from-slate-900 to-indigo-950 dark:from-slate-950 dark:to-purple-950/20 rounded-3xl p-8 md:p-12 shadow-2xl relative overflow-hidden border border-slate-800/80">
|
||||
<div className="absolute right-0 bottom-0 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-8 relative z-10">
|
||||
<div className="flex-1 max-w-2xl text-center md:text-left">
|
||||
<div className="inline-flex items-center gap-2 bg-white/10 text-slate-350 px-3 py-1 rounded-full mb-4 text-xs font-semibold select-none animate-pulse">
|
||||
<Scale className="w-3.5 h-3.5" />
|
||||
<span>Decisão Técnica</span>
|
||||
</div>
|
||||
<h3 className="text-2xl md:text-3xl font-display font-extrabold text-white mb-4">
|
||||
Ficou em dúvida de qual escolher?
|
||||
</h3>
|
||||
<p className="text-sm text-slate-400 leading-relaxed">
|
||||
Use nosso comparador técnico dinâmico para posicionar as especificações de conectividade RF, potência de rádio e suporte a barramentos de periféricos lado a lado.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/comparacao"
|
||||
className="inline-flex items-center justify-center gap-2 bg-white text-slate-900 px-6 py-3.5 rounded-xl font-bold text-sm hover:bg-slate-100 transition-all duration-300 shrink-0 shadow-md active:scale-95"
|
||||
>
|
||||
<span>Comparar Séries</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user