feat: Enhance Header component to improve active link detection

- Updated the `isActive` function in `Header.jsx` to handle root path and include logic for other paths.

chore: Update package-lock.json to remove peer dependencies

- Removed unnecessary peer dependencies from various packages in `package-lock.json`.

feat: Update frameworks.json to include example links

- Changed `exemplo_codigo` to `exemplo` and added `exemplos` links for various frameworks in `frameworks.json`.

feat: Add placa images to series.json

- Included image paths for different ESP32 series in `series.json`.

feat: Create CodeExample component for displaying code snippets

- Added a new `CodeExample.jsx` component to fetch and display code examples dynamically.

feat: Add example Arduino code for Wi-Fi connection

- Created `arduino.ino` example for connecting to Wi-Fi.

feat: Add example code for audio playback using ESP-ADF

- Created `esp-adf.c` example for audio playback using ESP-ADF.

feat: Add example code for DSP operations

- Created `esp-dsp.c` example demonstrating basic DSP operations.

feat: Add example code for ESP-IDF LED blinking

- Created `esp-idf.c` example for blinking an LED using ESP-IDF.

feat: Add example code for Matter integration

- Created `esp-matter.c` example for Matter device initialization and event handling.

feat: Add example code for neural network operations

- Created `esp-nn.c` example demonstrating basic neural network operations.

feat: Add example code for face detection using ESP-WHO

- Created `esp-who.c` example for face detection using ESP-WHO library.

feat: Add MicroPython example for LED blinking

- Created `micropython.py` example for blinking an LED using MicroPython.

app/series/[key]/page.jsx

@@ -1,14 +1,14 @@
+import Link from "next/link";
+import Image from "next/image";
 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 seriesData from "@/public/series.json";
 import ConnectionsDiagram from "@/components/ConnectionsDiagram";
-import Image from "next/image";
 import SeriesTabMenu from "@/components/SeriesTabMenu";
 
-export default function SerieDetail({ params }) {
-    const { key } = params;
+export default async function SerieDetail({ params }) {
+    const { key } = await params;
     const serie = seriesData[key];
 
     if (!serie) {
@@ -22,19 +22,6 @@ export default function SerieDetail({ params }) {
         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;
@@ -101,7 +88,7 @@ export default function SerieDetail({ params }) {
         {
             id: 'devboard',
             label: 'Placa de Desenvolvimento',
-            available: devBoardImages[key],
+            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 }}>
@@ -111,7 +98,7 @@ export default function SerieDetail({ params }) {
                     <div className="flex justify-center">
                         <div className="relative w-full max-w-4xl">
                             <Image
-                                src={devBoardImages[key]}
+                                src={serie.placa}
                                 alt={`${key} DevKit - Placa de Desenvolvimento`}
                                 width={1200}
                                 height={800}
@@ -217,7 +204,7 @@ export default function SerieDetail({ params }) {
 
                 <SeriesTabMenu tabs={tabs} color={serie.cor} />
 
-                <div className="flex justify-between items-center gap-4 mt-12">
+                <div className="grid sm:flex sm:justify-between items-center gap-4 mt-12">
                     {previousKey ? (
                         <Link
                             href={`/series/${previousKey}`}
@@ -284,7 +271,7 @@ function SpecSection({ title, specs, cor }) {
 }
 
 export async function generateMetadata({ params }) {
-    const { key } = params;
+    const { key } = await params;
     const serie = seriesData[key];
 
     if (!serie) {