feat: integrate Google Sheets API to fetch board data and implement filtering in the catalog page

README.md

@@ -1,17 +1,49 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# ESPDocs - Documentação ESP32 em Português
 
-## Getting Started
+[![Next.js](https://img.shields.io/badge/Next.js-15-black)](https://nextjs.org/)
+[![React](https://img.shields.io/badge/React-19-blue)](https://reactjs.org/)
+[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
 
-First, run the development server:
+Documentação não oficial completa do ecossistema ESP32 em português brasileiro.
+
+## 🚀 Funcionalidades
+
+- **📚 Séries ESP32**: Informações detalhadas sobre todas as séries de chips ESP32
+- **⚡ Frameworks**: Documentação de frameworks populares (ESP-IDF, Arduino, MicroPython, etc.)
+- **📊 Comparação**: Compare diferentes séries ESP32 lado a lado
+- **🔌 Diagramas Interativos**: Visualize conexões e componentes de forma interativa
+- **💻 Exemplos de Código**: Código de exemplo para diferentes frameworks
+- **🛒 Catálogo de Placas**: Encontre e filtre placas de desenvolvimento ESP32
+
+## 🏁 Início Rápido
+
+### Instalação
+
+```bash
+# Clone o repositório
+git clone https://github.com/lucasrguerra/ESPDocs.git
+
+# Entre no diretório
+cd ESPDocs
+
+# Instale as dependências
+npm install
+```
+
+### Configuração do Marketplace (Opcional)
+
+```bash
+# Copie o arquivo de exemplo
+cp .env.local.example .env.local
+
+# Edite o arquivo .env.local e adicione sua API Key do Google Sheets
+# GOOGLE_SHEETS_API_KEY=sua_api_key_aqui
+```
+
+### Executar em Desenvolvimento
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -20,7 +52,47 @@ You can start editing the page by modifying `app/page.js`. The page auto-updates
 
 This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-## Learn More
+## 📁 Estrutura do Projeto
+
+```
+ESPDocs/
+├── app/
+│   ├── api/
+│   │   └── placas/
+│   │       └── route.js          # API do marketplace
+│   ├── comparacao/
+│   ├── frameworks/
+│   ├── placas/                   # Marketplace
+│   │   └── page.jsx
+│   ├── series/
+│   ├── sobre/
+│   └── page.jsx
+├── components/
+│   ├── BoardCard.jsx             # Card de placa
+│   ├── BoardFilters.jsx          # Filtros (opcional)
+│   ├── CodeExample.jsx
+│   ├── ConnectionsDiagram.jsx
+│   ├── Footer.jsx
+│   ├── Header.jsx
+│   └── SeriesTabMenu.jsx
+├── public/
+│   ├── frameworks.json
+│   ├── series.json
+│   ├── conexoes/
+│   ├── exemplos/
+│   └── placas/
+├── .env.local.example            # Exemplo de configuração
+```
+
+## 🛠️ Tecnologias
+
+- **Next.js 15**: Framework React com App Router
+- **React 19**: Biblioteca UI
+- **Tailwind CSS 4**: Estilização
+- **Material-UI**: Componentes
+- **Google Sheets API**: Integração com planilhas
+
+## 📚 Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
@@ -29,8 +101,33 @@ To learn more about Next.js, take a look at the following resources:
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-## Deploy on Vercel
+## 🚀 Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
+**Importante**: Ao fazer deploy, não esqueça de adicionar a variável de ambiente `GOOGLE_SHEETS_API_KEY` nas configurações do projeto na Vercel.
+
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+
+## 📄 Licença
+
+Este projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
+
+## ⚠️ Disclaimer
+
+Este é um projeto de documentação não oficial e independente. Não possui nenhum tipo de afiliação com a Espressif Systems, fabricante dos chips ESP32.
+
+## 👤 Autor
+
+**Lucas Rayan Guerra**
+- Website: [Ciência Embarcada](https://cienciaembarcada.com.br)
+- GitHub: [@lucasrguerra](https://github.com/lucasrguerra)
+
+## 🤝 Contribuindo
+
+Contribuições, issues e feature requests são bem-vindos!
+
+---
+
+Feito com ❤️ para a comunidade ESP32 brasileira
+

app/api/placas/route.js

@@ -0,0 +1,47 @@
+import { google } from 'googleapis';
+import { NextResponse } from 'next/server';
+
+// Configurar cache de 1 hora
+export const revalidate = 3600;
+
+export async function GET() {
+    try {
+        const spreadsheetId = process.env.SPREADSHEET_ID;
+
+        const sheets = google.sheets({ version: 'v4' });
+        
+        const response = await sheets.spreadsheets.values.get({
+            spreadsheetId,
+            range: 'A1:Z1000',
+            key: process.env.GOOGLE_SHEETS_API_KEY,
+        });
+
+        const rows = response.data.values;
+        
+        if (!rows || rows.length === 0) {
+            return NextResponse.json({ error: 'Nenhum dado encontrado' }, { status: 404 });
+        }
+
+        const headers = rows[0];
+        
+        const data = rows.slice(1).map(row => {
+            const obj = {};
+            headers.forEach((header, index) => {
+                obj[header] = row[index] || '';
+            });
+            return obj;
+        });
+
+        return NextResponse.json({ data, headers }, {
+            headers: {
+                'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=7200'
+            }
+        });
+    } catch (error) {
+        console.error('Erro ao buscar dados do Google Sheets:', error);
+        return NextResponse.json(
+            { error: 'Erro ao buscar dados', details: error.message },
+            { status: 500 }
+        );
+    }
+}

app/catalogo/page.jsx

@@ -0,0 +1,373 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import BoardCard from "@/components/BoardCard";
+
+export default function PlacasPage() {
+    const [boards, setBoards] = useState([]);
+    const [filteredBoards, setFilteredBoards] = useState([]);
+    const [headers, setHeaders] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [activeFilters, setActiveFilters] = useState({});
+    const [filterOptions, setFilterOptions] = useState({});
+
+    const excludedColumns = ['Nome', 'Link', 'Imagem'];
+
+    useEffect(() => {
+        fetchBoards();
+    }, []);
+
+    useEffect(() => {
+        applyFilters();
+    }, [boards, searchTerm, activeFilters]);
+
+    const fetchBoards = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/placas');
+            
+            if (!response.ok) {
+                throw new Error('Erro ao carregar dados das placas');
+            }
+
+            const result = await response.json();
+            setBoards(result.data);
+            setHeaders(result.headers);
+            setFilteredBoards(result.data);
+            
+            generateFilterOptions(result.data, result.headers);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const generateFilterOptions = (data, headers) => {
+        const options = {};
+        const filterableColumns = headers.filter(h => !excludedColumns.includes(h));
+
+        filterableColumns.forEach(column => {
+            const uniqueValues = new Set();
+            data.forEach(item => {
+                const value = item[column];
+                if (value && value.toString().trim()) {
+                    uniqueValues.add(value.toString().trim());
+                }
+            });
+            
+            const values = Array.from(uniqueValues).sort();
+            
+            // Verificar se é um filtro binário (apenas Sim/Não/Opcional)
+            const binaryValues = ['Sim', 'Não', 'Opcional'];
+            const isBinaryFilter = values.every(v => binaryValues.includes(v));
+            
+            options[column] = {
+                values: values,
+                isBinary: isBinaryFilter
+            };
+        });
+
+        setFilterOptions(options);
+    };
+
+    const applyFilters = () => {
+        let filtered = [...boards];
+
+        if (searchTerm) {
+            filtered = filtered.filter(board => {
+                const searchLower = searchTerm.toLowerCase();
+                return (
+                    board.Nome?.toLowerCase().includes(searchLower) ||
+                    board.Descrição?.toLowerCase().includes(searchLower)
+                );
+            });
+        }
+
+        Object.keys(activeFilters).forEach(column => {
+            if (activeFilters[column] && activeFilters[column].length > 0) {
+                filtered = filtered.filter(board => {
+                    const boardValue = board[column]?.toString().trim();
+                    
+                    // Para filtros binários, o valor armazenado é 'binary-enabled'
+                    if (activeFilters[column].includes('binary-enabled')) {
+                        return boardValue === 'Sim' || boardValue === 'Opcional';
+                    }
+                    
+                    return activeFilters[column].includes(boardValue);
+                });
+            }
+        });
+
+        setFilteredBoards(filtered);
+    };
+
+    const handleFilterToggle = (column, value) => {
+        setActiveFilters(prev => {
+            const newFilters = { ...prev };
+            
+            if (!newFilters[column]) {
+                newFilters[column] = [value];
+            } else {
+                const index = newFilters[column].indexOf(value);
+                if (index > -1) {
+                    // Remove o valor (criar novo array sem o valor)
+                    newFilters[column] = newFilters[column].filter(v => v !== value);
+                    if (newFilters[column].length === 0) {
+                        delete newFilters[column];
+                    }
+                } else {
+                    // Adiciona o valor (criar novo array com o valor)
+                    newFilters[column] = [...newFilters[column], value];
+                }
+            }
+
+            return newFilters;
+        });
+    };
+
+    const clearFilters = () => {
+        setActiveFilters({});
+        setSearchTerm('');
+    };
+
+    const activeFilterCount = Object.keys(activeFilters).length + (searchTerm ? 1 : 0);
+
+    if (loading) {
+        return (
+        <div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
+            <Header />
+
+            <main className="max-w-7xl mx-auto px-4 py-16">
+                <div className="text-center">
+                    <div className="text-6xl mb-4">⏳</div>
+                    <p className="text-xl text-gray-600">Carregando placas...</p>
+                </div>
+            </main>
+
+            <Footer />
+        </div>
+        );
+    }
+
+    if (error) {
+        return (
+        <div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
+            <Header />
+
+            <main className="max-w-7xl mx-auto px-4 py-16">
+                <div className="text-center">
+                    <div className="text-6xl mb-4">❌</div>
+                    <p className="text-xl text-red-600 mb-4">Erro ao carregar dados</p>
+                    <p className="text-gray-600 mb-6">{error}</p>
+
+                    <button
+                        onClick={fetchBoards}
+                        className="bg-linear-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold hover:shadow-lg transition-all"
+                    >
+                        Tentar Novamente
+                    </button>
+                </div>
+            </main>
+
+            <Footer />
+        </div>
+        );
+    }
+
+    const filterableColumns = headers.filter(h => !excludedColumns.includes(h));
+
+    return (
+        <div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
+        <Header />
+
+        <main className="max-w-7xl mx-auto px-4 py-16">
+            <div className="text-center mb-12">
+                <h1 className="text-5xl font-extrabold bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent leading-relaxed mb-4">
+                    🛒 Catálogo de Placas ESP32
+                </h1>
+
+                <p className="text-2xl text-gray-600 mb-2">
+                    Encontre a placa perfeita para o seu projeto
+                </p>
+                <p className="text-md text-green-600 font-semibold flex items-center justify-center gap-2">
+                    ✓ Todos os links são verificados e de fontes confiáveis
+                </p>
+            </div>
+
+            <div className="grid lg:grid-cols-4 gap-8">
+                <div className="lg:col-span-1">
+                    <div className="bg-white rounded-2xl shadow-lg overflow-hidden sticky top-4">
+                        {/* Header dos Filtros */}
+                        <div className="bg-linear-to-r from-blue-600 to-purple-600 p-6 text-white">
+                            <div className="flex justify-between items-center">
+                                <div>
+                                    <h2 className="text-xl font-bold flex items-center gap-2">
+                                        🔍 Filtros
+                                    </h2>
+                                    {activeFilterCount > 0 && (
+                                        <p className="text-sm text-blue-100 mt-1">
+                                            {activeFilterCount} filtro(s) ativo(s)
+                                        </p>
+                                    )}
+                                </div>
+                                {activeFilterCount > 0 && (
+                                    <button
+                                        onClick={clearFilters}
+                                        className="bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-lg font-semibold text-xs transition-all hover:scale-105"
+                                    >
+                                        Limpar
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Conteúdo dos Filtros */}
+                        <div className="p-6">
+                            {/* Barra de Busca */}
+                            <div className="mb-6">
+                                <label className="block text-xs font-semibold text-gray-600 mb-2 uppercase tracking-wide">
+                                    Buscar por nome
+                                </label>
+                                <div className="relative">
+                                    <input
+                                        type="text"
+                                        placeholder="Digite para buscar..."
+                                        value={searchTerm}
+                                        onChange={(e) => setSearchTerm(e.target.value)}
+                                        className="w-full px-4 py-3 pl-10 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition-colors text-sm bg-gray-50 focus:bg-white"
+                                    />
+                                    <svg className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                    </svg>
+                                </div>
+                            </div>
+
+                            {/* Separador */}
+                            <div className="border-t border-gray-200 my-2"></div>
+
+                            {/* Filtros por Categoria */}
+                            <div className="space-y-2 max-h-[calc(100vh-450px)] overflow-y-auto pr-2 custom-scrollbar">
+                                {filterableColumns.map((column) => {
+                                    const filterData = filterOptions[column];
+                                    if (!filterData) return null;
+                                    
+                                    const isActive = activeFilters[column]?.length > 0;
+                                    
+                                    return (
+                                        <div key={column} className={`pb-2 border-b border-gray-100 last:border-b-0 ${isActive ? 'bg-purple-50/50 rounded-lg' : ''}`}>
+                                            {filterData.isBinary ? (
+                                                // Filtro binário: checkbox integrado ao título
+                                                <label className="flex justify-between cursor-pointer hover:bg-purple-50 p-3 rounded-lg transition-all group">
+                                                    <span className="font-semibold text-gray-700 group-hover:text-purple-700 transition-colors">
+                                                        {column}
+                                                    </span>
+
+                                                    <div className="mt-0.5">
+                                                        <input
+                                                            type="checkbox"
+                                                            checked={activeFilters[column]?.includes('binary-enabled') || false}
+                                                            onChange={() => handleFilterToggle(column, 'binary-enabled')}
+                                                            className="w-5 h-5 rounded-md border-2 border-gray-300 text-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all cursor-pointer"
+                                                        />
+                                                    </div>
+                                                </label>
+                                            ) : (
+                                                // Filtro normal: título separado + múltiplas opções
+                                                <>
+                                                    <h3 className="font-bold text-gray-800 mb-3 text-sm uppercase tracking-wide flex items-center gap-2">
+                                                        {column}
+                                                        {isActive && (
+                                                            <span className="bg-purple-600 text-white text-xs px-2 py-0.5 rounded-full">
+                                                                {activeFilters[column].length}
+                                                            </span>
+                                                        )}
+                                                    </h3>
+                                                    <div className="space-y-2 max-h-44 overflow-y-auto pr-2">
+                                                        {filterData.values.map((option) => (
+                                                            <label
+                                                                key={option}
+                                                                className="flex items-center gap-3 cursor-pointer hover:bg-purple-50 p-2 rounded-lg transition-all group"
+                                                            >
+                                                                <input
+                                                                    type="checkbox"
+                                                                    checked={activeFilters[column]?.includes(option) || false}
+                                                                    onChange={() => handleFilterToggle(column, option)}
+                                                                    className="w-4 h-4 rounded border-2 border-gray-300 text-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all cursor-pointer"
+                                                                />
+                                                                <span className="text-sm text-gray-700 group-hover:text-purple-700 transition-colors">
+                                                                    {option}
+                                                                </span>
+                                                            </label>
+                                                        ))}
+                                                    </div>
+                                                </>
+                                            )}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Grid de Placas */}
+                <div className="lg:col-span-3">
+                    <div className="mb-6 flex justify-between items-center">
+                        <p className="text-gray-600">
+                            <span className="font-bold text-purple-600">{filteredBoards.length}</span> placa(s) encontrada(s)
+                        </p>
+                    </div>
+
+                    {filteredBoards.length === 0 ? (
+                        <div className="text-center py-16">
+                            <div className="text-6xl mb-4">🔍</div>
+                            <p className="text-xl text-gray-600 mb-2">Nenhuma placa encontrada</p>
+                            <p className="text-gray-500">Tente ajustar os filtros</p>
+                        </div>
+                    ) : (
+                        <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
+                            {filteredBoards.map((board, index) => (
+                                <BoardCard key={index} board={board} />
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </main>
+
+        <Footer />
+        </div>
+    );
+}
+
+// Estilos customizados para scrollbar
+const styles = `
+    .custom-scrollbar::-webkit-scrollbar {
+        width: 6px;
+    }
+    
+    .custom-scrollbar::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
+    }
+    
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: linear-gradient(to bottom, #3b82f6, #9333ea);
+        border-radius: 10px;
+    }
+    
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(to bottom, #2563eb, #7c3aed);
+    }
+`;
+
+if (typeof document !== 'undefined') {
+    const styleSheet = document.createElement('style');
+    styleSheet.textContent = styles;
+    document.head.appendChild(styleSheet);
+}

app/page.jsx

@@ -4,13 +4,14 @@ import Link from "next/link";
 
 export default function Home() {
 	const resources = [
+        {name: "Catálogo de Placas", description: "Encontre placas de desenvolvimento ESP32 verificadas com filtros avançados e links seguros para compra", icon: "🛒"},
 		{name: "Detalhes Técnicos", description: "Explore as especificações técnicas de cada série ESP32, incluindo arquitetura, recursos e capacidades", icon: "🔧"},
 		{name: "Diagramas Interativos", description: "Visualize diagramas detalhados dos componentes ESP32 com interatividade para melhor compreensão", icon: "📊"},
 		{name: "Frameworks Avançados", description: "Aprenda sobre frameworks populares como ESP-IDF, Arduino e MicroPython para desenvolvimento com ESP32", icon: "⚡"},
 		{name: "Comparação de Séries", description: "Compare diferentes séries ESP32 para escolher o mais adequado ao seu projeto", icon: "📈"},
 		{name: "Datasheets", description: "Acesso direto aos datasheets oficiais para informações detalhadas sobre cada série", icon: "📄"},
 		{name: "Exemplos de Código", description: "Encontre exemplos práticos de código para iniciar rapidamente seus projetos com ESP32", icon: "💻"},
-	]
+    ]
 
     return (
         <div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
@@ -50,6 +51,13 @@ export default function Home() {
 					>
 						⚡ Ver Frameworks
                     </Link>
+
+                    <Link
+                        className="bg-white text-gray-700 px-8 py-4 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-400 transform hover:-translate-y-1 transition-all duration-300"
+                        href="/catalogo"
+                    >
+                        🛒 Ver Catálogo de Placas
+                    </Link>
                 </div>
 
                 <div className="grid md:grid-cols-3 gap-6 mt-16">

components/BoardCard.jsx

@@ -0,0 +1,101 @@
+"use client";
+
+export default function BoardCard({ board }) {
+    const mainFields = ['Nome', 'Link', 'Imagem', 'Loja Oficial'];
+    
+    const technicalFields = Object.keys(board).filter(
+        key => !mainFields.includes(key) && board[key]
+    );
+
+    const hasFeature = (value) => {
+        const yesValues = ['sim', 'opcional'];
+        return yesValues.includes(value?.toString().toLowerCase().trim());
+    };
+
+    // Filtrar apenas características que têm "Sim" ou "Opcional"
+    const availableFeatures = technicalFields.filter(field => hasFeature(board[field]));
+    const optionalFeatures = technicalFields.filter(field => 
+        board[field]?.toString().toLowerCase().trim() === 'opcional'
+    );
+
+    return (
+        <div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group flex flex-col h-full">
+            {/* Imagem */}
+            {board.Imagem && (
+                <div 
+                    className="mx-auto w-fit"
+                    dangerouslySetInnerHTML={{ __html: board.Imagem }}
+                />
+            )}
+
+            <div className="p-6 flex flex-col grow">
+                {/* Nome */}
+                <h3 className="text-xl font-bold text-gray-800 mb-2 line-clamp-2">
+                    {board.Nome || 'Placa sem nome'}
+                </h3>
+
+                {/* Loja Oficial */}
+                {board['Loja Oficial'] && board['Loja Oficial'].toLowerCase() === 'sim' && (
+                    <div className="mb-4">
+                        <p className="text-sm text-blue-600 flex items-center gap-1.5">
+                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                            </svg>
+                            <span>Link da loja oficial do fabricante</span>
+                        </p>
+                    </div>
+                )}
+
+                {/* Características Técnicas */}
+                {availableFeatures.length > 0 && (
+                    <div className="mb-4 grow">
+                        <div className="flex items-center gap-2 mb-3">
+                            <svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                            </svg>
+                            <h4 className="text-sm font-semibold text-gray-700">Recursos Disponíveis</h4>
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                            {availableFeatures.map((field) => {
+                                const isOptional = optionalFeatures.includes(field);
+                                return (
+                                    <div
+                                        key={field}
+                                        className={`text-xs px-3 py-1.5 rounded-lg font-medium flex items-center gap-1 ${
+                                            isOptional
+                                                ? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
+                                                : 'bg-green-100 text-green-700 border border-green-200'
+                                        }`}
+                                    >
+                                        {isOptional ? (
+                                            <svg className="w-3 h-3" 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>
+                                        ) : (
+                                            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                                            </svg>
+                                        )}
+                                        <span>{field}</span>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                )}
+
+                {/* Link para mais informações - sempre no final */}
+                {board.Link && (
+                    <a
+                        href={board.Link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="block w-full bg-linear-to-r from-blue-600 to-purple-600 text-white text-center px-4 py-3 rounded-xl font-semibold hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 mt-auto"
+                    >
+                        Abrir no AliExpress 🔗
+                    </a>
+                )}
+            </div>
+        </div>
+    );
+}

components/Header.jsx

@@ -15,6 +15,7 @@ import AboutIcon from "@mui/icons-material/Info";
 import ModelsIcon from "@mui/icons-material/Memory";
 import FrameworksIcon from "@mui/icons-material/Apps";
 import CompareIcon from "@mui/icons-material/CompareArrows";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
 
 export default function Header() {
     const [drawerOpen, setDrawerOpen] = useState(false);
@@ -26,6 +27,7 @@ export default function Header() {
         { text: "Séries", href: "/series", icon: <ModelsIcon /> },
         { text: "Frameworks", href: "/frameworks", icon: <FrameworksIcon /> },
         { text: "Comparar Séries", href: "/comparacao", icon: <CompareIcon /> },
+        { text: "Catálogo de Placas", href: "/catalogo", icon: <ShoppingCartIcon /> },
     ];
 
     function isActive(href) {

package.json

@@ -13,6 +13,7 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
+    "googleapis": "^165.0.0",
     "next": "15.5.6",
     "react": "19.1.0",
     "react-dom": "19.1.0"