lucasrguerra/ESPDocs
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: add ESP-RainMaker and ESP-Matter frameworks and update existing framework metadata in frameworks.json

Browse Source
This commit is contained in:
Lucas Rayan committed 2026-08-25 16:55:38 -03:00
1 parent 07dac4f6de
commit d71dc8df3c
19 files changed
+2458 -282
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/frameworks/[key]/page.jsx
+44 -9
View File
@@ -17,7 +17,11 @@ import {
FileText,
Sliders,
Award,
Target
Target,
Box,
Sparkles,
ExternalLink,
ArrowRight
} from "lucide-react";
export default async function FrameworkDetail({ params }) {
@@ -30,6 +34,7 @@ export default async function FrameworkDetail({ params }) {
const features = framework.caracteristicas || [];
const useCases = framework.casos_uso || [];
const isEspIdf = key === "ESP-IDF";
return (
<div className="bg-gradient-to-br from-slate-100 via-slate-50 to-purple-100/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">
@@ -51,7 +56,7 @@ export default async function FrameworkDetail({ params }) {
<Header />
<main className="px-6 pt-16 pb-24 max-w-7xl mx-auto">
<main className="px-4 md:px-6 pt-12 md:pt-16 pb-24 max-w-7xl mx-auto">
{/* Back navigation link */}
<div className="mb-8">
<Link
@@ -112,7 +117,7 @@ export default async function FrameworkDetail({ params }) {
</div>
</div>
<p className="text-sm text-slate-500 dark:text-slate-200 mt-6 leading-relaxed max-w-4xl font-semibold">
<p className="text-sm text-slate-600 dark:text-slate-200 mt-6 leading-relaxed max-w-4xl font-semibold">
{framework.descricao}
</p>
</div>
@@ -129,7 +134,7 @@ export default async function FrameworkDetail({ params }) {
<span>LINGUAGEM DE DESENVOLVIMENTO</span>
</h3>
<p className="text-2xl font-extrabold text-slate-800 dark:text-slate-100">{framework.linguagem}</p>
<p className="text-xs text-slate-400 mt-1">Sintaxe principal do ecossistema</p>
<p className="text-xs text-slate-400 mt-1">Sintaxe e ecossistema</p>
</div>
<div
@@ -233,9 +238,39 @@ export default async function FrameworkDetail({ params }) {
</div>
</div>
{/* Coding examples container (renders only if framework has examples defined) */}
{framework.exemplos && (
<div className="mt-12">
{/* Special Section: ESP Component Registry Callout for ESP-IDF */}
{isEspIdf && (
<div className="bg-gradient-to-r from-purple-900/90 to-indigo-900/90 rounded-3xl p-6 md:p-8 text-white shadow-2xl border border-purple-500/40 mb-12 relative overflow-hidden">
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6 relative z-10">
<div className="space-y-2 max-w-2xl">
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-purple-500/20 border border-purple-400/30 text-purple-300 text-xs font-bold">
<Box className="w-3.5 h-3.5" />
<span>Arquitetura Moderna ESP-IDF</span>
</div>
<h3 className="text-2xl font-display font-extrabold text-white">
Gerenciamento Modular com ESP Component Registry
</h3>
<p className="text-xs md:text-sm text-slate-200 leading-relaxed font-medium">
Nos projetos ESP-IDF v4.4+ e v5.x+, as bibliotecas não precisam mais ser adicionadas como submódulos Git.
Utilize o <code>idf_component.yml</code> e o comando <code>idf.py add-dependency</code> para baixar automaticamente drivers de displays (LVGL), pilhas industriais (Modbus), RainMaker e mais.
</p>
</div>
<Link
href="/componentes"
className="inline-flex items-center gap-2 bg-white text-purple-900 hover:bg-slate-100 font-extrabold text-xs uppercase tracking-wider px-6 py-3.5 rounded-xl shadow-lg transition-all active:scale-95 shrink-0"
>
<Sparkles className="w-4 h-4 text-purple-600" />
<span>Explorar Componentes ESP-IDF</span>
<ArrowRight className="w-4 h-4 text-purple-600" />
</Link>
</div>
</div>
)}
{/* Coding examples container */}
{framework.exemplo && (
<div className="mt-8">
<CodeExample framework={framework} />
</div>
)}
@@ -283,8 +318,8 @@ export async function generateMetadata({ params }) {
return {
...paginaMeta({
titulo: `${framework.nome} para ESP32`,
descricao: `${framework.nome_completo}: ${framework.descricao} Guia em português com exemplo de código e quando usar.`,
titulo: `${framework.nome} para ESP32 · Guia Técnico`,
descricao: `${framework.nome_completo}: ${framework.descricao} Guia com exemplos práticos de código e casos de uso.`,
caminho: `/frameworks/${encodeURIComponent(key)}`,
tipo: "article",
keywords: [
app/frameworks/page.jsx
+139 -54
View File
@@ -17,15 +17,31 @@ import {
Music,
Camera,
Brain,
Home
Home,
Box,
Cloud,
Radio,
ShieldCheck,
Mic
} from "lucide-react";
export const metadata = paginaMeta({
titulo: "Frameworks para ESP32",
descricao: "ESP-IDF, Arduino, MicroPython, ESP-ADF, ESP-DSP, ESP-WHO, ESP-NN e ESP-Matter: para que serve cada framework do ESP32, com exemplo de código e quando usar.",
titulo: "Frameworks & SDKs para ESP32: Guia Completo e Comparativo",
descricao: "Guia completo de desenvolvimento: ESP-IDF, ESP-RainMaker, ESP-Matter, Rust, ESP-ADF, ESP-SR, ESP-WHO, Arduino e MicroPython com exemplos de código.",
caminho: "/frameworks",
keywords: ["ESP-IDF", "Arduino ESP32", "MicroPython ESP32", "frameworks ESP32", "programar ESP32"],
keywords: [
"ESP-IDF",
"ESP-RainMaker",
"ESP-Matter",
"Rust ESP32",
"ESP-SR",
"ESP-ADF",
"ESP-IoT-Solution",
"Arduino ESP32",
"MicroPython ESP32",
"frameworks ESP32",
"programar ESP32"
],
});
export default function Frameworks() {
@@ -35,34 +51,70 @@ export default function Frameworks() {
<div className="bg-gradient-to-br from-slate-100 via-slate-50 to-purple-100/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-6 pt-16 pb-24 max-w-7xl mx-auto">
<main id="conteudo" className="px-4 md:px-6 pt-12 md:pt-16 pb-24 max-w-7xl mx-auto space-y-12">
{/* Top Hero Section */}
<section className="text-center mb-16 select-none">
<div className="inline-flex items-center gap-2 bg-white dark:bg-slate-900/50 backdrop-blur-md px-4 py-2 rounded-full mb-6 border border-slate-300 dark:border-slate-800/60 shadow-xs">
<section className="text-center select-none">
<div className="inline-flex items-center gap-2 bg-white/80 dark:bg-slate-900/60 backdrop-blur-md px-4 py-2 rounded-full mb-6 border border-slate-300 dark:border-slate-800/80 shadow-xs">
<Layers className="w-4 h-4 text-purple-500" />
<span className="text-xs font-bold text-slate-700 dark:text-slate-350 uppercase tracking-wider">Ferramentas de Desenvolvimento</span>
<span className="text-xs font-bold text-slate-700 dark:text-slate-350 uppercase tracking-wider">
Ecossistema de Desenvolvimento
</span>
<span className="bg-purple-100 dark:bg-purple-950/80 text-purple-700 dark:text-purple-300 text-[10px] font-extrabold px-2 py-0.5 rounded-full">
14 SDKs
</span>
</div>
<h1 className="text-4xl md:text-6xl 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 leading-none tracking-tight">
Frameworks ESP32
<h1 className="text-4xl md:text-6xl 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 pb-2 pt-1 leading-tight md:leading-[1.18] tracking-tight">
Frameworks & SDKs ESP32
</h1>
<p className="text-sm md:text-base text-slate-500 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed font-semibold">
Descubra o ecossistema de software do ESP32. De desenvolvimento geral C/C++ a
soluções dedicadas a áudio de alto desempenho, visão computacional na borda e IoT inteligente.
<p className="text-sm md:text-base text-slate-600 dark:text-slate-400 max-w-3xl mx-auto leading-relaxed font-semibold">
Descubra o ecossistema completo de software do ESP32. Do desenvolvimento nativo C/C++
com FreeRTOS ao ecossistema moderno em Rust, passando por nuvem IoT, reconhecimento de voz local,
áudio de alta fidelidade e o padrão universal Matter.
</p>
</section>
{/* Highlight Callout: ESP Component Registry */}
<section className="bg-gradient-to-r from-purple-900/90 via-indigo-900/90 to-slate-900/90 text-white rounded-3xl p-6 md:p-8 shadow-2xl border border-purple-500/30 relative overflow-hidden flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
<div className="absolute -right-12 -top-12 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl pointer-events-none" />
<div className="space-y-2 max-w-3xl relative z-10">
<div className="inline-flex items-center gap-2 px-3 py-1 bg-purple-500/20 text-purple-300 text-xs font-bold rounded-full border border-purple-400/30">
<Box className="w-3.5 h-3.5 text-purple-300" />
<span>Arquitetura Modular</span>
</div>
<h2 className="text-2xl md:text-3xl font-display font-extrabold text-white">
ESP Component Registry & IDF Component Manager
</h2>
<p className="text-xs md:text-sm text-slate-300 leading-relaxed font-medium">
Desenvolva de forma modular: instale drivers de displays (LVGL), pilhas industriais (Modbus),
recursos de nuvem (RainMaker) e pacotes de suporte a placas (BSPs) com uma única linha no seu manifesto <code>idf_component.yml</code>.
</p>
</div>
<div className="relative z-10 shrink-0 w-full lg:w-auto">
<Link
href="/componentes"
className="inline-flex items-center justify-center gap-2 w-full lg:w-auto bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-400 hover:to-pink-400 text-white font-bold text-xs uppercase tracking-wider px-6 py-3.5 rounded-2xl shadow-lg transition-all active:scale-95"
>
<Sparkles className="w-4 h-4" />
<span>Explorar Component Registry</span>
<ArrowRight className="w-4 h-4" />
</Link>
</div>
</section>
{/* Cards Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{frameworks.map(([key, framework]) => (
<Link
key={key}
href={`/frameworks/${key}`}
href={`/frameworks/${encodeURIComponent(key)}`}
className="group flex"
>
<div
className="bg-white dark:bg-slate-900/40 backdrop-blur-xl border border-slate-300 dark:border-slate-800/80 rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-1.5 flex flex-col justify-between overflow-hidden w-full"
className="bg-white dark:bg-slate-900/40 backdrop-blur-xl border border-slate-300 dark:border-slate-800/80 rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1.5 flex flex-col justify-between overflow-hidden w-full"
style={{ borderTop: `4px solid ${framework.cor}` }}
>
@@ -80,6 +132,9 @@ export default function Frameworks() {
>
{framework.linguagem}
</span>
<span className="text-[9px] font-bold text-slate-400 dark:text-slate-500">
{framework.tipo}
</span>
</div>
</div>
@@ -104,7 +159,7 @@ export default function Frameworks() {
<Target className="w-3.5 h-3.5 text-blue-500" />
<span>Objetivo Principal</span>
</h4>
<p className="text-xs text-slate-650 dark:text-slate-200 font-medium leading-relaxed">
<p className="text-xs text-slate-650 dark:text-slate-200 font-medium leading-relaxed line-clamp-2">
{framework.funcao_principal}
</p>
</div>
@@ -153,9 +208,9 @@ export default function Frameworks() {
</div>
{/* Bottom Informative Cards Section */}
<div className="mt-16 grid md:grid-cols-2 gap-8 select-none">
<div className="grid md:grid-cols-3 gap-6 select-none">
{/* Card 1: Beginner Guide */}
<div className="bg-white dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl shadow-xl p-8 border border-slate-300 dark:border-slate-800/80 flex flex-col justify-between relative overflow-hidden">
<div className="bg-white dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl shadow-xl p-6 md:p-8 border border-slate-300 dark:border-slate-800/80 flex flex-col justify-between relative overflow-hidden">
<div>
<div className="flex items-center gap-3.5 mb-5">
<div className="w-12 h-12 bg-blue-500/10 border border-blue-500/20 rounded-2xl flex items-center justify-center text-blue-500">
@@ -170,32 +225,67 @@ export default function Frameworks() {
</div>
<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed mb-6 font-semibold">
Se você está iniciando a sua jornada de hardware, recomendamos adotar o ecossistema&nbsp;
<strong className="text-slate-750 dark:text-slate-300">Arduino</strong> ou&nbsp;
Se você está iniciando a sua jornada, o&nbsp;
<strong className="text-slate-750 dark:text-slate-300">Arduino Core</strong> ou&nbsp;
<strong className="text-slate-750 dark:text-slate-300">MicroPython</strong>&nbsp;
para testar sensores e APIs. Para projetos profissionais industriais de alta performance e eficiência energética, o framework nativo&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-IDF</strong> é o padrão exigido no mercado.
são ideais para testar sensores e APIs. Para produtos comerciais, adote o&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-IDF</strong> ou&nbsp;
<strong className="text-slate-750 dark:text-slate-300">Rust on ESP32</strong>.
</p>
</div>
<div className="flex flex-wrap gap-2.5 pt-4 border-t border-slate-200 dark:border-slate-850/40 mt-auto">
<Link href="/frameworks/Arduino" className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 rounded-xl text-xs font-bold hover:bg-blue-500/20 transition-all">
<div className="flex flex-wrap gap-2 pt-4 border-t border-slate-200 dark:border-slate-850/40 mt-auto">
<Link href="/frameworks/Arduino" className="inline-flex items-center gap-1 px-3 py-2 bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 rounded-xl text-xs font-bold hover:bg-blue-500/20 transition-all">
<span>Arduino</span>
<ArrowRight className="w-3.5 h-3.5" />
</Link>
<Link href="/frameworks/MicroPython" className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 rounded-xl text-xs font-bold hover:bg-purple-500/20 transition-all">
<Link href="/frameworks/MicroPython" className="inline-flex items-center gap-1 px-3 py-2 bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 rounded-xl text-xs font-bold hover:bg-purple-500/20 transition-all">
<span>MicroPython</span>
<ArrowRight className="w-3.5 h-3.5" />
</Link>
<Link href="/frameworks/ESP-IDF" className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-red-500/10 text-red-600 dark:text-red-450 border border-red-500/20 rounded-xl text-xs font-bold hover:bg-red-500/20 transition-all">
<span>ESP-IDF</span>
<ArrowRight className="w-3.5 h-3.5" />
<Link href="/frameworks/Rust-ESP" className="inline-flex items-center gap-1 px-3 py-2 bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 rounded-xl text-xs font-bold hover:bg-amber-500/20 transition-all">
<span>Rust</span>
</Link>
</div>
</div>
{/* Card 2: Specialized Solutions */}
<div className="bg-white dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl shadow-xl p-8 border border-slate-300 dark:border-slate-800/80 flex flex-col justify-between relative overflow-hidden">
{/* Card 2: Cloud & Smart Home */}
<div className="bg-white dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl shadow-xl p-6 md:p-8 border border-slate-300 dark:border-slate-800/80 flex flex-col justify-between relative overflow-hidden">
<div>
<div className="flex items-center gap-3.5 mb-5">
<div className="w-12 h-12 bg-indigo-500/10 border border-indigo-500/20 rounded-2xl flex items-center justify-center text-indigo-500">
<Cloud className="w-6 h-6" />
</div>
<div>
<h3 className="text-xl font-display font-extrabold text-slate-850 dark:text-slate-100">
Cloud & Smart Home
</h3>
<p className="text-[10px] font-bold text-indigo-500 uppercase tracking-wider leading-none">Conectividade Avançada</p>
</div>
</div>
<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed mb-6 font-semibold">
Crie dispositivos interoperáveis com&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-Matter</strong>, implemente produtos de nuvem rápida com&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-RainMaker</strong> ou redes locais com&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-NOW</strong> e&nbsp;
<strong className="text-slate-750 dark:text-slate-300">Zigbee 3.0</strong>.
</p>
</div>
<div className="flex flex-wrap gap-2 pt-4 border-t border-slate-200 dark:border-slate-850/40 mt-auto">
<Link href="/frameworks/ESP-RainMaker" className="inline-flex items-center gap-1 px-3 py-2 bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 rounded-xl text-xs font-bold hover:bg-blue-500/20 transition-all">
<span>RainMaker</span>
</Link>
<Link href="/frameworks/ESP-Matter" className="inline-flex items-center gap-1 px-3 py-2 bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 rounded-xl text-xs font-bold hover:bg-amber-500/20 transition-all">
<span>Matter</span>
</Link>
<Link href="/frameworks/ESP-Zigbee-SDK" className="inline-flex items-center gap-1 px-3 py-2 bg-pink-500/10 text-pink-600 dark:text-pink-400 border border-pink-500/20 rounded-xl text-xs font-bold hover:bg-pink-500/20 transition-all">
<span>Zigbee</span>
</Link>
</div>
</div>
{/* Card 3: Specialized Edge AI */}
<div className="bg-white dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl shadow-xl p-6 md:p-8 border border-slate-300 dark:border-slate-800/80 flex flex-col justify-between relative overflow-hidden">
<div>
<div className="flex items-center gap-3.5 mb-5">
<div className="w-12 h-12 bg-purple-500/10 border border-purple-500/20 rounded-2xl flex items-center justify-center text-purple-500">
@@ -203,38 +293,33 @@ export default function Frameworks() {
</div>
<div>
<h3 className="text-xl font-display font-extrabold text-slate-850 dark:text-slate-100">
Soluções Especializadas
Áudio, Voz & IA
</h3>
<p className="text-[10px] font-bold text-purple-500 uppercase tracking-wider leading-none">Domínios Avançados</p>
<p className="text-[10px] font-bold text-purple-500 uppercase tracking-wider leading-none">Domínios Especializados</p>
</div>
</div>
<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed mb-6 font-semibold">
Projetos complexos de IoT demandam bibliotecas altamente otimizadas na arquitetura.
A Espressif fornece extensões prontas como o&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-ADF</strong> para processamento de áudio digital,&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-WHO</strong> para processamento de imagem por câmera,&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-NN</strong> para redes neurais locais e&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-Matter</strong> para automação residencial.
Processe áudio com o&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-ADF</strong>, reconheça fala offline com o&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-SR</strong>, processe vídeo com o&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-WHO</strong> e acelere TinyML com o&nbsp;
<strong className="text-slate-750 dark:text-slate-300">ESP-NN</strong>.
</p>
</div>
<div className="flex flex-wrap gap-2.5 pt-4 border-t border-slate-200 dark:border-slate-850/40 mt-auto">
<Link href="/frameworks/ESP-ADF" className="inline-flex items-center gap-1.5 px-3.5 py-2 bg-slate-150/45 dark:bg-slate-850 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-850/60 rounded-xl text-xs font-bold hover:bg-slate-200 dark:hover:bg-slate-800 transition-all">
<Music className="w-3.5 h-3.5 text-blue-500" />
<div className="flex flex-wrap gap-2 pt-4 border-t border-slate-200 dark:border-slate-850/40 mt-auto">
<Link href="/frameworks/ESP-ADF" className="inline-flex items-center gap-1 px-3 py-2 bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 rounded-xl text-xs font-bold hover:bg-blue-500/20 transition-all">
<Music className="w-3.5 h-3.5" />
<span>Áudio</span>
</Link>
<Link href="/frameworks/ESP-WHO" className="inline-flex items-center gap-1.5 px-3.5 py-2 bg-slate-150/45 dark:bg-slate-850 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-850/60 rounded-xl text-xs font-bold hover:bg-slate-200 dark:hover:bg-slate-800 transition-all">
<Camera className="w-3.5 h-3.5 text-orange-500" />
<span>Visão</span>
<Link href="/frameworks/ESP-SR" className="inline-flex items-center gap-1 px-3 py-2 bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20 rounded-xl text-xs font-bold hover:bg-indigo-500/20 transition-all">
<Mic className="w-3.5 h-3.5" />
<span>Voz</span>
</Link>
<Link href="/frameworks/ESP-NN" className="inline-flex items-center gap-1.5 px-3.5 py-2 bg-slate-150/45 dark:bg-slate-850 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-850/60 rounded-xl text-xs font-bold hover:bg-slate-200 dark:hover:bg-slate-800 transition-all">
<Brain className="w-3.5 h-3.5 text-teal-500" />
<span>Inteligência Artificial</span>
</Link>
<Link href="/frameworks/ESP-Matter" className="inline-flex items-center gap-1.5 px-3.5 py-2 bg-slate-150/45 dark:bg-slate-850 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-850/60 rounded-xl text-xs font-bold hover:bg-slate-200 dark:hover:bg-slate-800 transition-all">
<Home className="w-3.5 h-3.5 text-yellow-500" />
<span>Matter</span>
<Link href="/frameworks/ESP-NN" className="inline-flex items-center gap-1 px-3 py-2 bg-teal-500/10 text-teal-600 dark:text-teal-400 border border-teal-500/20 rounded-xl text-xs font-bold hover:bg-teal-500/20 transition-all">
<Brain className="w-3.5 h-3.5" />
<span>IA</span>
</Link>
</div>
</div>