diff --git a/app/catalogo/page.jsx b/app/catalogo/page.jsx
index 3d56c10..63d1f7c 100644
--- a/app/catalogo/page.jsx
+++ b/app/catalogo/page.jsx
@@ -4,380 +4,389 @@ import { useState, useEffect } from 'react';
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import BoardCard from "@/components/BoardCard";
+import { 
+	Search, 
+	Filter, 
+	ShoppingCart, 
+	CheckCircle, 
+	AlertTriangle, 
+	RefreshCw,
+	Layers,
+	ChevronDown
+} from 'lucide-react';
 
 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 [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'];
+	const excludedColumns = ['Nome', 'Link', 'Imagem', 'Loja Oficial'];
 
-    useEffect(() => {
-        fetchBoards();
-    }, []);
+	useEffect(() => {
+		fetchBoards();
+	}, []);
 
-    useEffect(() => {
-        applyFilters();
-    }, [boards, searchTerm, activeFilters]);
+	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 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 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));
+	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
-            };
-        });
+		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);
-    };
+		setFilterOptions(options);
+	};
 
-    const applyFilters = () => {
-        let filtered = [...boards];
+	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)
-                );
-            });
-        }
+		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);
-                });
-            }
-        });
+		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);
-    };
+		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];
-                }
-            }
+	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
+					newFilters[column] = newFilters[column].filter(v => v !== value);
+					if (newFilters[column].length === 0) {
+						delete newFilters[column];
+					}
+				} else {
+					// Adiciona o valor
+					newFilters[column] = [...newFilters[column], value];
+				}
+			}
 
-            return newFilters;
-        });
-    };
+			return newFilters;
+		});
+	};
 
-    const clearFilters = () => {
-        setActiveFilters({});
-        setSearchTerm('');
-    };
+	const clearFilters = () => {
+		setActiveFilters({});
+		setSearchTerm('');
+	};
 
-    const activeFilterCount = Object.keys(activeFilters).length + (searchTerm ? 1 : 0);
+	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 />
+	if (loading) {
+		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 flex flex-col justify-between">
+				<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>
+				<main className="max-w-7xl mx-auto px-6 py-24 flex-1 flex items-center justify-center">
+					<div className="text-center select-none animate-pulse">
+						<RefreshCw className="w-12 h-12 text-purple-500 animate-spin mx-auto mb-4" />
+						<p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">Consultando banco de placas...</p>
+					</div>
+				</main>
 
-            <Footer />
-        </div>
-        );
-    }
+				<Footer />
+			</div>
+		);
+	}
 
-    if (error) {
-        return (
-        <div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
-            <Header />
+	if (error) {
+		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 flex flex-col justify-between">
+				<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>
+				<main className="max-w-7xl mx-auto px-6 py-24 flex-1 flex items-center justify-center">
+					<div className="text-center bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl p-8 max-w-md shadow-2xl select-none">
+						<div className="w-12 h-12 bg-red-500/10 border border-red-500/20 rounded-2xl flex items-center justify-center text-red-500 mx-auto mb-4">
+							<AlertTriangle className="w-6 h-6" />
+						</div>
+						<p className="text-sm font-bold text-red-600 dark:text-red-400 mb-2 uppercase tracking-widest">Falha ao sincronizar dados</p>
+						<p className="text-xs text-slate-450 dark:text-slate-550 mb-6 leading-relaxed">{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>
+						<button
+							onClick={fetchBoards}
+							className="inline-flex items-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 active:scale-95 transition-all shadow-md cursor-pointer"
+						>
+							<RefreshCw className="w-4 h-4" />
+							<span>Tentar Novamente</span>
+						</button>
+					</div>
+				</main>
 
-            <Footer />
-        </div>
-        );
-    }
+				<Footer />
+			</div>
+		);
+	}
 
-    const filterableColumns = headers.filter(h => !excludedColumns.includes(h));
+	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 />
+	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="max-w-7xl mx-auto px-4 py-16">
-            <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">Encontre sua placa ideal</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 leading-tight mb-6 tracking-tight">
-                    Catálogo de Placas ESP32
-                </h1>
+			<main id="conteudo" className="max-w-7xl mx-auto px-6 pt-16 pb-24">
+				{/* Top Hero Heading Block */}
+				<section className="text-center mb-16 select-none">
+					<div className="inline-flex items-center gap-2 bg-white/70 dark:bg-slate-900/50 backdrop-blur-md px-4 py-2 rounded-full mb-6 border border-slate-200/60 dark:border-slate-800/60 shadow-xs">
+						<ShoppingCart className="w-4 h-4 text-purple-500" />
+						<span className="text-xs font-bold text-slate-700 dark:text-slate-350 uppercase tracking-wider">Encontre sua placa ideal</span>
+					</div>
+					
+					<h1 className="text-4xl md:text-6xl font-display leading-tight 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">
+						Catálogo de Placas ESP32
+					</h1>
 
-                <p className="text-xl md:text-2xl text-gray-700 mb-4 font-medium">
-                    Encontre a placa perfeita para o seu projeto
-                </p>
-                <div className="inline-flex items-center gap-2 bg-green-50 px-6 py-3 rounded-full border-2 border-green-200">
-                    <svg className="w-5 h-5 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>
-                    <p className="text-sm text-green-700 font-bold">
-                        Todos os links são verificados e de fontes confiáveis
-                    </p>
-                </div>
-            </section>
+					<p className="text-sm md:text-base text-slate-500 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed mb-6 font-semibold">
+						Compare e selecione placas oficiais e alternativas de desenvolvimento do microcontrolador ESP32 para seus projetos.
+					</p>
 
-            <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>
+					<div className="inline-flex items-center gap-2 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 px-4 py-2 rounded-full border border-emerald-500/20">
+						<CheckCircle className="w-4 h-4 shrink-0" />
+						<p className="text-[10px] font-bold uppercase tracking-wider">
+							Links de lojas integradas de fontes verificadas e confiáveis
+						</p>
+					</div>
+				</section>
 
-                        {/* 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>
+				<div className="grid lg:grid-cols-4 gap-8">
+					{/* Left Filters Sidebar */}
+					<div className="lg:col-span-1">
+						<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl shadow-xl overflow-hidden sticky top-4">
+							
+							{/* Sidebar Banner Header */}
+							<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white select-none">
+								<div className="flex justify-between items-center">
+									<div>
+										<h2 className="text-base font-display font-extrabold flex items-center gap-2">
+											<Filter className="w-4.5 h-4.5" />
+											<span>Filtros de Busca</span>
+										</h2>
+										{activeFilterCount > 0 && (
+											<p className="text-[10px] text-blue-150 font-bold uppercase tracking-wider mt-1.5 animate-pulse">
+												{activeFilterCount} selecionado(s)
+											</p>
+										)}
+									</div>
+									
+									{activeFilterCount > 0 && (
+										<button
+											onClick={clearFilters}
+											className="bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-xl font-bold text-[10px] uppercase tracking-wider transition-all hover:scale-105 active:scale-95 cursor-pointer"
+										>
+											Limpar
+										</button>
+									)}
+								</div>
+							</div>
 
-                            {/* Separador */}
-                            <div className="border-t border-gray-200 my-2"></div>
+							{/* Sidebar Filters Area */}
+							<div className="p-6 space-y-6">
+								{/* Text search by name */}
+								<div>
+									<label className="block text-[9px] font-bold text-slate-400 dark:text-slate-500 mb-2.5 uppercase tracking-widest select-none">
+										Buscar Placa
+									</label>
+									<div className="relative">
+										<input
+											type="text"
+											placeholder="Digite o nome da placa..."
+											value={searchTerm}
+											onChange={(e) => setSearchTerm(e.target.value)}
+											className="w-full px-4 py-3 pl-10 border border-slate-200 dark:border-slate-800 rounded-2xl focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-500 focus:outline-none transition-colors text-xs bg-slate-50/50 dark:bg-slate-950/20 text-slate-800 dark:text-slate-100"
+										/>
+										<Search className="absolute left-3.5 top-3.5 w-4 h-4 text-slate-400 dark:text-slate-500" />
+									</div>
+								</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="border-t border-slate-100 dark:border-slate-850/45 my-2"></div>
 
-                                                    <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>
+								{/* Dinamic filters container with customized scrollbar */}
+								<div className="space-y-4 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-3 border-b border-slate-100 dark:border-slate-850/30 last:border-b-0 ${isActive ? 'bg-purple-500/5 dark:bg-purple-400/5 p-3 rounded-2xl border border-purple-500/10 dark:border-purple-400/10' : ''}`}>
+												{filterData.isBinary ? (
+													// Binary filter (checkbox inside title wrapper)
+													<label className="flex justify-between items-center cursor-pointer p-1 rounded-lg transition-all group select-none">
+														<span className="text-xs font-bold text-slate-700 dark:text-slate-350 group-hover:text-purple-650 dark:group-hover:text-purple-400 transition-colors">
+															{column}
+														</span>
 
-                {/* 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>
+														<input
+															type="checkbox"
+															checked={activeFilters[column]?.includes('binary-enabled') || false}
+															onChange={() => handleFilterToggle(column, 'binary-enabled')}
+															className="w-4.5 h-4.5 rounded-md border border-slate-300 dark:border-slate-750 text-purple-650 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all cursor-pointer bg-white/50 dark:bg-slate-950/30"
+														/>
+													</label>
+												) : (
+													// Standard options filter with dropdown listing
+													<>
+														<h3 className="font-bold text-slate-700 dark:text-slate-300 mb-3.5 text-xs uppercase tracking-widest flex items-center gap-2 select-none">
+															<span>{column}</span>
+															{isActive && (
+																<span className="bg-purple-650 text-white text-[9px] px-2 py-0.5 rounded-full font-bold select-none">
+																	{activeFilters[column].length}
+																</span>
+															)}
+														</h3>
+														
+														<div className="space-y-2.5 max-h-44 overflow-y-auto pr-2 custom-scrollbar">
+															{filterData.values.map((option) => (
+																<label
+																	key={option}
+																	className="flex items-center gap-3 cursor-pointer hover:bg-purple-500/5 dark:hover:bg-purple-400/5 p-1.5 rounded-lg transition-all group select-none"
+																>
+																	<input
+																		type="checkbox"
+																		checked={activeFilters[column]?.includes(option) || false}
+																		onChange={() => handleFilterToggle(column, option)}
+																		className="w-4 h-4 rounded border border-slate-350 dark:border-slate-750 text-purple-650 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all cursor-pointer bg-white/50 dark:bg-slate-950/30"
+																	/>
+																	<span className="text-xs font-semibold text-slate-600 dark:text-slate-400 group-hover:text-purple-650 dark:group-hover:text-purple-400 transition-colors">
+																		{option}
+																	</span>
+																</label>
+															))}
+														</div>
+													</>
+												)}
+											</div>
+										);
+									})}
+								</div>
+							</div>
+						</div>
+					</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>
+					{/* Right Catalog Boards Grid */}
+					<div className="lg:col-span-3">
+						<div className="mb-6 flex justify-between items-center select-none">
+							<p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">
+								Total Encontrado: <span className="text-purple-650 dark:text-purple-400">{filteredBoards.length}</span> Placa(s)
+							</p>
+						</div>
 
-        <Footer />
-        </div>
-    );
-}
+						{filteredBoards.length === 0 ? (
+							<div className="text-center py-20 bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl p-8 shadow-md select-none">
+								<Search className="w-12 h-12 text-slate-300 dark:text-slate-700 mx-auto mb-4" />
+								<p className="text-base font-display font-extrabold text-slate-800 dark:text-slate-200 mb-1">Nenhuma Placa Correspondente</p>
+								<p className="text-xs text-slate-500 dark:text-slate-400">Tente ajustar ou redefinir seus filtros laterais para expandir a busca.</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>
 
-// 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);
-    }
-`;
+			<Footer />
 
-if (typeof document !== 'undefined') {
-    const styleSheet = document.createElement('style');
-    styleSheet.textContent = styles;
-    document.head.appendChild(styleSheet);
+			<style dangerouslySetInnerHTML={{ __html: `
+				.custom-scrollbar::-webkit-scrollbar {
+					width: 4px;
+				}
+				
+				.custom-scrollbar::-webkit-scrollbar-track {
+					background: transparent;
+				}
+				
+				.custom-scrollbar::-webkit-scrollbar-thumb {
+					background: #cbd5e1;
+					border-radius: 10px;
+				}
+				
+				.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+					background: #334155;
+				}
+				
+				.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+					background: #94a3b8;
+				}
+			`}} />
+		</div>
+	);
 }
diff --git a/app/comparacao/page.jsx b/app/comparacao/page.jsx
index 2d32543..84a87c9 100644
--- a/app/comparacao/page.jsx
+++ b/app/comparacao/page.jsx
@@ -2,274 +2,360 @@
 
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
-import { useState } from "react";
+import { useState, Fragment } from "react";
 import Link from "next/link";
 import seriesData from "@/public/series.json";
+import { 
+	Scale, 
+	GitCompare, 
+	Check, 
+	ChevronDown, 
+	ChevronUp, 
+	ArrowRight, 
+	FileText, 
+	ExternalLink, 
+	ShoppingBag, 
+	Cpu, 
+	Network, 
+	Database, 
+	Sliders, 
+	Activity,
+	HelpCircle,
+	Thermometer
+} from "lucide-react";
+
+// Category to Icon mapping
+const categoryIcons = {
+	"Geral": <HelpCircle className="w-4 h-4 text-purple-500" />,
+	"Processador": <Cpu className="w-4 h-4 text-blue-500" />,
+	"Conectividade": <Network className="w-4 h-4 text-indigo-500" />,
+	"Memória": <Database className="w-4 h-4 text-pink-500" />,
+	"Periféricos Digitais": <Sliders className="w-4 h-4 text-sky-500" />,
+	"Periféricos Analógicos": <Activity className="w-4 h-4 text-emerald-500" />,
+	"Interfaces Especiais": <Activity className="w-4 h-4 text-cyan-500" />,
+	"Especificações Ambientais": <Thermometer className="w-4 h-4 text-red-500" />,
+};
 
 export default function Comparacao() {
-    const [selectedSeries, setSelectedSeries] = useState(["ESP32", "ESP32-S3"]);
-    const series = Object.entries(seriesData);
+	const [selectedSeries, setSelectedSeries] = useState(["ESP32", "ESP32-S3"]);
+	const [collapsedCategories, setCollapsedCategories] = useState({
+		"Interfaces Especiais": true,
+		"Especificações Ambientais": true,
+	});
 
-    const toggleSeries = (seriesKey) => {
-        if (selectedSeries.includes(seriesKey)) {
-            if (selectedSeries.length > 2) {
-                setSelectedSeries(selectedSeries.filter(s => s !== seriesKey));
-            }
-        } else {
-            if (selectedSeries.length < 4) {
-                setSelectedSeries([...selectedSeries, seriesKey]);
-            }
-        }
-    };
+	const series = Object.entries(seriesData);
 
-    const compareFields = [
-        { category: "Geral", fields: [
-            { key: "nome_completo", label: "Nome Completo" },
-            { key: "descricao", label: "Descrição" },
-        ]},
-        { category: "Processador", fields: [
-            { key: "arquitetura", label: "Arquitetura" },
-            { key: "nucleos", label: "Núcleos" },
-            { key: "frequencia", label: "Frequência" },
-            { key: "coprocessador_ulp", label: "Coprocessador ULP" },
-            { key: "aceleradores_ia", label: "Aceleradores de IA" },
-        ]},
-        { category: "Conectividade", fields: [
-            { key: "wifi", label: "Wi-Fi" },
-            { key: "bluetooth", label: "Bluetooth" },
-            { key: "zigbee_thread", label: "Zigbee/Thread" },
-            { key: "matter", label: "Matter" },
-            { key: "ethernet", label: "Ethernet" },
-        ]},
-        { category: "Memória", fields: [
-            { key: "memoria_sram", label: "SRAM" },
-            { key: "memoria_sram_rtc", label: "SRAM RTC" },
-            { key: "memoria_rom", label: "ROM" },
-            { key: "flash_externa", label: "Flash Externa" },
-            { key: "psram_externa", label: "PSRAM Externa" },
-        ]},
-        { category: "Periféricos Digitais", fields: [
-            { key: "gpio", label: "GPIO" },
-            { key: "uart", label: "UART" },
-            { key: "spi", label: "SPI" },
-            { key: "i2c", label: "I²C" },
-            { key: "i2s", label: "I²S" },
-            { key: "pwm", label: "PWM" },
-            { key: "can", label: "CAN" },
-            { key: "usb", label: "USB" },
-            { key: "sdio", label: "SDIO" },
-        ]},
-        { category: "Periféricos Analógicos", fields: [
-            { key: "adc", label: "ADC" },
-            { key: "dac", label: "DAC" },
-            { key: "touch", label: "Touch Capacitivo" },
-            { key: "sensor_hall", label: "Sensor Hall" },
-            { key: "sensor_temperatura", label: "Sensor de Temperatura" },
-        ]},
-        { category: "Interfaces Especiais", fields: [
-            { key: "lcd", label: "LCD" },
-            { key: "camera", label: "Câmera" },
-            { key: "mipi_csi", label: "MIPI CSI" },
-            { key: "mipi_dsi", label: "MIPI DSI" },
-            { key: "ethernet_mac", label: "Ethernet MAC" },
-        ]},
-        { category: "Especificações Ambientais", fields: [
-            { key: "temperatura_operacao", label: "Temp. Operação" },
-            { key: "temperatura_armazenamento", label: "Temp. Armazenamento" },
-        ]},
-    ];
+	const toggleSeries = (seriesKey) => {
+		if (selectedSeries.includes(seriesKey)) {
+			if (selectedSeries.length > 2) {
+				setSelectedSeries(selectedSeries.filter(s => s !== seriesKey));
+			}
+		} else {
+			if (selectedSeries.length < 4) {
+				setSelectedSeries([...selectedSeries, seriesKey]);
+			}
+		}
+	};
 
-    const renderValue = (value) => {
-        if (!value || value === "Não") {
-            return <span className="text-slate-400 font-medium">—</span>;
-        }
-        if (value === "Sim") {
-            return <span className="text-slate-700 font-semibold">✓</span>;
-        }
-        return <span className="text-slate-800 font-medium">{value}</span>;
-    };
+	const toggleCategory = (category) => {
+		setCollapsedCategories({
+			...collapsedCategories,
+			[category]: !collapsedCategories[category]
+		});
+	};
 
-    return (
-        <div className="bg-gray-50 min-h-screen">
-            <Header />
+	const compareFields = [
+		{ category: "Geral", fields: [
+			{ key: "nome_completo", label: "Nome Completo" },
+			{ key: "descricao", label: "Descrição" },
+		]},
+		{ category: "Processador", fields: [
+			{ key: "arquitetura", label: "Arquitetura" },
+			{ key: "nucleos", label: "Núcleos" },
+			{ key: "frequencia", label: "Frequência" },
+			{ key: "coprocessador_ulp", label: "Coprocessador ULP" },
+			{ key: "aceleradores_ia", label: "Aceleradores de IA" },
+		]},
+		{ category: "Conectividade", fields: [
+			{ key: "wifi", label: "Wi-Fi" },
+			{ key: "bluetooth", label: "Bluetooth" },
+			{ key: "zigbee_thread", label: "Zigbee/Thread" },
+			{ key: "matter", label: "Matter" },
+			{ key: "ethernet", label: "Ethernet" },
+		]},
+		{ category: "Memória", fields: [
+			{ key: "memoria_sram", label: "SRAM" },
+			{ key: "memoria_sram_rtc", label: "SRAM RTC" },
+			{ key: "memoria_rom", label: "ROM" },
+			{ key: "flash_externa", label: "Flash Externa" },
+			{ key: "psram_externa", label: "PSRAM Externa" },
+		]},
+		{ category: "Periféricos Digitais", fields: [
+			{ key: "gpio", label: "GPIO" },
+			{ key: "uart", label: "UART" },
+			{ key: "spi", label: "SPI" },
+			{ key: "i2c", label: "I²C" },
+			{ key: "i2s", label: "I²S" },
+			{ key: "pwm", label: "PWM" },
+			{ key: "can", label: "CAN" },
+			{ key: "usb", label: "USB" },
+			{ key: "sdio", label: "SDIO" },
+		]},
+		{ category: "Periféricos Analógicos", fields: [
+			{ key: "adc", label: "ADC" },
+			{ key: "dac", label: "DAC" },
+			{ key: "touch", label: "Touch Capacitivo" },
+			{ key: "sensor_hall", label: "Sensor Hall" },
+			{ key: "sensor_temperatura", label: "Sensor de Temperatura" },
+		]},
+		{ category: "Interfaces Especiais", fields: [
+			{ key: "lcd", label: "LCD" },
+			{ key: "camera", label: "Câmera" },
+			{ key: "mipi_csi", label: "MIPI CSI" },
+			{ key: "mipi_dsi", label: "MIPI DSI" },
+			{ key: "ethernet_mac", label: "Ethernet MAC" },
+		]},
+		{ category: "Especificações Ambientais", fields: [
+			{ key: "temperatura_operacao", label: "Temp. Operação" },
+			{ key: "temperatura_armazenamento", label: "Temp. Armazenamento" },
+		]},
+	];
 
-            <main id="conteudo" className="px-4 pt-16 pb-20 max-w-7xl mx-auto">
-                <section className="mb-16">
-                    <div className="border-l-4 border-slate-700 pl-6 mb-8">
-                        <p className="text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
-                            Análise Técnica Comparativa
-                        </p>
-                        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
-                            Comparação de Séries ESP32
-                        </h1>
-                        <p className="text-base text-slate-600 max-w-3xl leading-relaxed">
-                            Análise detalhada de especificações técnicas para seleção de microcontroladores ESP32
-                        </p>
-                    </div>
-                </section>
+	const renderValue = (value) => {
+		if (!value || value === "Não") {
+			return <span className="text-slate-400 dark:text-slate-600 font-medium select-none">—</span>;
+		}
+		if (value === "Sim") {
+			return (
+				<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 shadow-xs">
+					<Check className="w-3.5 h-3.5" />
+				</span>
+			);
+		}
+		return <span className="text-slate-800 dark:text-slate-200 font-semibold">{value}</span>;
+	};
 
-                <section className="mb-12">
-                    <div className="bg-white border border-slate-200 rounded-lg p-6 mb-6">
-                        <h2 className="text-xl font-semibold text-slate-900 mb-2">
-                            Seleção de Modelos
-                        </h2>
-                        <p className="text-sm text-slate-600 mb-6">
-                            Selecione de 2 a 4 séries para análise comparativa
-                        </p>
-                        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
-                            {series.map(([key, seriesItem]) => (
-                                <button
-                                    key={key}
-                                    onClick={() => toggleSeries(key)}
-                                    className={`p-4 border rounded-lg transition-all duration-200 ${
-                                        selectedSeries.includes(key)
-                                            ? 'border-slate-700 bg-slate-50 shadow-sm'
-                                            : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50'
-                                    }`}
-                                >
-                                    <div className="text-3xl mb-2">{seriesItem.icone}</div>
-                                    <div className="text-xs font-semibold text-slate-800">{key}</div>
-                                    {selectedSeries.includes(key) && (
-                                        <div className="mt-2 flex justify-center">
-                                            <div className="w-2 h-2 rounded-full bg-slate-700"></div>
-                                        </div>
-                                    )}
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-                    <div className="flex justify-end">
-                        <div className="inline-flex items-center gap-2 bg-slate-100 px-4 py-2 rounded border border-slate-200">
-                            <span className="text-slate-700 font-medium text-sm">
-                                {selectedSeries.length} / 4 modelos selecionados
-                            </span>
-                        </div>
-                    </div>
-                </section>
+	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 />
 
-                <div className="bg-white border border-slate-200 shadow-sm overflow-hidden">
-                    <div className="overflow-x-auto">
-                        <table className="w-full">
-                            <thead>
-                                <tr className="bg-slate-800 border-b border-slate-700">
-                                    <th className="px-6 py-4 text-left text-white font-semibold text-sm uppercase tracking-wider sticky left-0 bg-slate-800 z-10">
-                                        Especificação
-                                    </th>
-                                    {selectedSeries.map(seriesKey => {
-                                        const seriesItem = seriesData[seriesKey];
-                                        return (
-                                            <th key={seriesKey} className="px-6 py-4 text-center text-white font-semibold text-sm uppercase tracking-wider min-w-48">
-                                                <div className="flex flex-col items-center gap-2">
-                                                    <span className="text-2xl">{seriesItem.icone}</span>
-                                                    <span>{seriesKey}</span>
-                                                </div>
-                                            </th>
-                                        );
-                                    })}
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {compareFields.map(({ category, fields }) => (
-                                    <>
-                                        <tr key={category} className="bg-slate-100 border-y border-slate-200">
-                                            <td colSpan={selectedSeries.length + 1} className="px-6 py-3 font-semibold text-slate-800 text-sm uppercase tracking-wide">
-                                                {category}
-                                            </td>
-                                        </tr>
-                                        {fields.map(({ key, label }) => (
-                                            <tr key={key} className="border-b border-slate-100 hover:bg-slate-50 transition-colors">
-                                                <td className="px-6 py-3 font-medium text-slate-700 text-sm bg-white sticky left-0 border-r border-slate-100">
-                                                    {label}
-                                                </td>
-                                                {selectedSeries.map(seriesKey => {
-                                                    const seriesItem = seriesData[seriesKey];
-                                                    const value = seriesItem[key];
-                                                    return (
-                                                        <td key={seriesKey} className="px-6 py-3 text-center text-sm">
-                                                            {renderValue(value)}
-                                                        </td>
-                                                    );
-                                                })}
-                                            </tr>
-                                        ))}
-                                    </>
-                                ))}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
+			<main id="conteudo" className="px-6 pt-16 pb-24 max-w-7xl mx-auto">
+				
+				{/* Top Section */}
+				<section className="mb-16">
+					<div className="border-l-4 border-purple-500 pl-6 max-w-3xl">
+						<p className="text-xs font-bold text-purple-600 dark:text-purple-400 uppercase tracking-widest mb-2 select-none">
+							Análise Técnica Comparativa
+						</p>
+						<h1 className="text-4xl md:text-5xl font-display font-extrabold text-slate-800 dark:text-slate-100 mb-4 tracking-tight leading-tight">
+							Comparador de Séries ESP32
+						</h1>
+						<p className="text-base text-slate-500 dark:text-slate-400 leading-relaxed">
+							Coloque lado a lado as especificações completas de clock, memória, interfaces de rádio e periféricos analógicos para validar a engenharia e o custo-benefício de cada microcontrolador.
+						</p>
+					</div>
+				</section>
 
-                {/* Call-to-Action para Catálogo de Placas */}
-                <div className="my-16 bg-slate-800 border border-slate-700 p-10">
-                    <div className="flex flex-col md:flex-row items-center justify-between gap-8">
-                        <div className="flex-1">
-                            <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">
-                                Recursos Adicionais
-                            </p>
-                            <h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
-                                Catálogo de Placas de Desenvolvimento
-                            </h3>
-                            <p className="text-base text-slate-300 leading-relaxed">
-                                Acesse nossa base de placas de desenvolvimento verificadas com referências diretas para fornecedores oficiais.
-                            </p>
-                        </div>
-                        <Link
-                            href="/catalogo"
-                            className="inline-flex items-center justify-center gap-3 bg-white text-slate-800 px-6 py-3 font-semibold text-sm hover:bg-slate-100 transition-colors duration-200 whitespace-nowrap border border-slate-200"
-                        >
-                            <span>Acessar Catálogo</span>
-                            <svg 
-                                className="w-4 h-4" 
-                                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>
+				{/* Model Selector Card */}
+				<section className="mb-12">
+					<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl p-6 md:p-8 shadow-2xl relative overflow-hidden">
+						<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
+							<div>
+								<h2 className="text-lg font-bold text-slate-800 dark:text-slate-100 mb-1">
+									Escolha as Séries
+								</h2>
+								<p className="text-xs text-slate-400 dark:text-slate-500">
+									Selecione de 2 a até 4 modelos simultâneos para montar sua planilha de comparação.
+								</p>
+							</div>
 
-                <div className="mt-12">
-                    <h3 className="text-lg font-semibold text-slate-900 mb-6 border-l-4 border-slate-700 pl-4">
-                        Documentação Técnica
-                    </h3>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                        {selectedSeries.map(seriesKey => {
-                            const seriesItem = seriesData[seriesKey];
-                            return (
-                                <div
-                                    key={seriesKey}
-                                    className="bg-white border border-slate-200 p-5 hover:border-slate-300 hover:shadow-sm transition-all duration-200"
-                                >
-                                    <div className="flex items-start gap-4">
-                                        <div className="text-3xl">{seriesItem.icone}</div>
-                                        <div className="flex-1 min-w-0">
-                                            <Link href={`/series/${seriesKey}`} className="no-underline">
-                                                <h4 className="text-base font-semibold text-slate-900 mb-1">{seriesKey}</h4>
-                                            </Link>
-                                            <p className="text-xs text-slate-600 mb-3">Documentação oficial</p>
-                                            <a
-                                                href={seriesItem.datasheet}
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                className="inline-flex items-center gap-2 text-xs font-medium text-slate-700 hover:text-slate-900"
-                                            >
-                                                <span>Datasheet</span>
-                                                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                                                </svg>
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-            </main>
+							<div className="inline-flex items-center gap-2 bg-purple-500/10 text-purple-600 dark:text-purple-400 px-3.5 py-1.5 rounded-full border border-purple-500/20 text-xs font-bold shadow-xs select-none">
+								<GitCompare className="w-3.5 h-3.5" />
+								<span>{selectedSeries.length} de 4 selecionados</span>
+							</div>
+						</div>
 
-            <Footer />
-        </div>
-    );
+						{/* Brand-colored dynamic button selector grid */}
+						<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
+							{series.map(([key, seriesItem]) => {
+								const isSelected = selectedSeries.includes(key);
+								return (
+									<button
+										key={key}
+										onClick={() => toggleSeries(key)}
+										style={{
+											borderColor: isSelected ? seriesItem.cor : 'transparent'
+										}}
+										className={`p-4 border rounded-2xl transition-all duration-300 cursor-pointer active:scale-95 text-center flex flex-col items-center justify-center shadow-xs ${
+											isSelected
+												? 'bg-slate-100 dark:bg-slate-950 shadow-md scale-[1.02] border-2'
+												: 'border-slate-200/60 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/30 hover:border-purple-400/50 hover:bg-purple-500/5'
+										}`}
+									>
+										<div className="text-3xl mb-2 select-none transform hover:scale-110 transition-transform">{seriesItem.icone}</div>
+										<div className="text-xs font-bold text-slate-800 dark:text-slate-200">{key}</div>
+										
+										{isSelected && (
+											<div 
+												className="mt-2.5 w-2 h-2 rounded-full shrink-0 animate-pulse"
+												style={{ backgroundColor: seriesItem.cor }}
+											/>
+										)}
+									</button>
+								);
+							})}
+						</div>
+					</div>
+				</section>
+
+				{/* Side by side interactive Table */}
+				<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl overflow-hidden shadow-2xl">
+					<div className="overflow-x-auto scrollbar-thin">
+						<table className="w-full border-collapse">
+							<thead>
+								<tr className="bg-slate-850 dark:bg-slate-950 border-b border-slate-750 dark:border-slate-900">
+									<th className="px-6 py-5 text-left text-white font-bold text-xs uppercase tracking-widest sticky left-0 bg-slate-850 dark:bg-slate-950 z-20 shadow-xs border-r border-slate-700/30">
+										Especificação
+									</th>
+									{selectedSeries.map(seriesKey => {
+										const seriesItem = seriesData[seriesKey];
+										return (
+											<th key={seriesKey} className="px-6 py-5 text-center text-white font-bold text-xs uppercase tracking-widest min-w-48">
+												<div className="flex flex-col items-center gap-2 select-none">
+													<span className="text-3xl transform hover:scale-105 transition-transform">{seriesItem.icone}</span>
+													<span className="text-sm font-extrabold tracking-wide" style={{ color: seriesItem.cor }}>{seriesKey}</span>
+												</div>
+											</th>
+										);
+									})}
+								</tr>
+							</thead>
+							<tbody>
+								{compareFields.map(({ category, fields }) => {
+									const isCollapsed = collapsedCategories[category];
+									return (
+										<Fragment key={category}>
+											{/* Collapsible Category Accordion Header */}
+											<tr 
+												onClick={() => toggleCategory(category)}
+												className="bg-slate-100/80 dark:bg-slate-950/60 border-y border-slate-250/60 dark:border-slate-800/80 cursor-pointer select-none hover:bg-slate-200/60 dark:hover:bg-slate-900/80 transition-colors"
+											>
+												<td 
+													colSpan={selectedSeries.length + 1} 
+													className="px-6 py-3.5 font-bold text-slate-800 dark:text-slate-200 text-xs uppercase tracking-wider"
+												>
+													<div className="flex items-center justify-between">
+														<div className="flex items-center gap-2">
+															{categoryIcons[category] || <HelpCircle className="w-4 h-4 text-purple-500" />}
+															<span>{category}</span>
+														</div>
+														{isCollapsed ? (
+															<ChevronDown className="w-4 h-4 opacity-60 text-purple-600 dark:text-purple-400" />
+														) : (
+															<ChevronUp className="w-4 h-4 opacity-60 text-purple-600 dark:text-purple-400" />
+														)}
+													</div>
+												</td>
+											</tr>
+
+											{/* Fields list within category (if expanded) */}
+											{!isCollapsed && fields.map(({ key, label }) => (
+												<tr 
+													key={key} 
+													className="border-b border-slate-100 dark:border-slate-800/40 hover:bg-purple-500/5 dark:hover:bg-purple-400/5 transition-colors group"
+												>
+													<td className="px-6 py-4 font-bold text-slate-600 dark:text-slate-400 text-xs bg-white dark:bg-slate-900/10 sticky left-0 border-r border-slate-150/60 dark:border-slate-800/60 shrink-0 z-10">
+														{label}
+													</td>
+													{selectedSeries.map(seriesKey => {
+														const seriesItem = seriesData[seriesKey];
+														const value = seriesItem[key];
+														return (
+															<td key={seriesKey} className="px-6 py-4 text-center text-xs">
+																{renderValue(value)}
+															</td>
+														);
+													})}
+												</tr>
+											))}
+										</Fragment>
+									);
+								})}
+							</tbody>
+						</table>
+					</div>
+				</div>
+
+				{/* Professional CTA Banner for the Catalog */}
+				<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="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">
+								<ShoppingBag className="w-3.5 h-3.5" />
+								<span>Hardware Adicional</span>
+							</div>
+							<h3 className="text-2xl md:text-3xl font-display font-extrabold text-white mb-4">
+								Catálogo de Placas de Desenvolvimento
+							</h3>
+							<p className="text-sm text-slate-400 leading-relaxed">
+								Quer testar o chip selecionado na bancada? Compare placas de desenvolvimento com layouts de pinos mapeados, conexões de periféricos e links oficiais dos melhores fornecedores.
+							</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>Acessar Catálogo</span>
+							<ArrowRight className="w-4 h-4" />
+						</Link>
+					</div>
+				</div>
+
+				{/* Detailed technical datasheets section */}
+				<div className="mt-12">
+					<h3 className="text-xl font-display font-extrabold text-slate-800 dark:text-slate-100 mb-6 border-l-4 border-purple-500 pl-4 select-none">
+						Documentação Técnica Relacionada
+					</h3>
+					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+						{selectedSeries.map(seriesKey => {
+							const seriesItem = seriesData[seriesKey];
+							return (
+								<div
+									key={seriesKey}
+									className="bg-white/70 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/80 dark:border-slate-800/80 p-5 rounded-2xl hover:border-purple-500/50 dark:hover:border-purple-400/50 hover:shadow-lg transition-all duration-300 flex flex-col justify-between"
+								>
+									<div className="flex gap-4 items-start mb-4">
+										<div className="text-4xl select-none">{seriesItem.icone}</div>
+										<div className="min-w-0">
+											<Link href={`/series/${seriesKey}`} className="no-underline">
+												<h4 className="text-sm font-extrabold text-slate-850 dark:text-slate-100 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
+													{seriesKey}
+												</h4>
+											</Link>
+											<p className="text-[10px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider mt-1">Guia de Hardware</p>
+										</div>
+									</div>
+
+									<a
+										href={seriesItem.datasheet}
+										target="_blank"
+										rel="noopener noreferrer"
+										className="inline-flex items-center justify-center gap-1.5 w-full text-center py-2 bg-slate-100 dark:bg-slate-950 hover:bg-purple-500/10 dark:hover:bg-purple-400/10 border border-slate-200 dark:border-slate-800 rounded-xl text-xs font-bold text-slate-650 dark:text-slate-350 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
+									>
+										<span>Datasheet Oficial</span>
+										<ExternalLink className="w-3.5 h-3.5" />
+									</a>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			</main>
+
+			<Footer />
+		</div>
+	);
 }
\ No newline at end of file
diff --git a/app/frameworks/[key]/page.jsx b/app/frameworks/[key]/page.jsx
index 91e9d19..c96b03f 100644
--- a/app/frameworks/[key]/page.jsx
+++ b/app/frameworks/[key]/page.jsx
@@ -4,179 +4,274 @@ import Footer from "@/components/Footer";
 import { notFound } from "next/navigation";
 import CodeExample from "@/components/CodeExample";
 import frameworksData from "@/public/frameworks.json";
+import { 
+	ArrowLeft, 
+	BookOpen, 
+	Code, 
+	Layers, 
+	Zap, 
+	Compass, 
+	CheckCircle, 
+	Terminal, 
+	FileText, 
+	Sliders,
+	Award,
+	Target
+} from "lucide-react";
 
 export default async function FrameworkDetail({ params }) {
-    const { key } = await params;
-    const framework = frameworksData[key];
+	const { key } = await params;
+	const framework = frameworksData[key];
 
-    if (!framework) {
-        notFound();
-    }
+	if (!framework) {
+		notFound();
+	}
 
-    const features = framework.caracteristicas || [];
-    const useCases = framework.casos_uso || [];
+	const features = framework.caracteristicas || [];
+	const useCases = framework.casos_uso || [];
 
-    return (
-        <div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
-            <Header />
+	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="/frameworks" className="inline-flex items-center text-gray-600 hover:text-purple-600 transition-colors mb-4">
-                        <span className="mr-2">←</span> Voltar para Frameworks
-                    </Link>
+			<main className="px-6 pt-16 pb-24 max-w-7xl mx-auto">
+				{/* Back navigation link */}
+				<div className="mb-8">
+					<Link 
+						href="/frameworks" 
+						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 Frameworks</span>
+					</Link>
 
-                    <div className="bg-white rounded-3xl shadow-xl p-8 border-2 border-gray-100"
-                        style={{ borderColor: framework.cor + '30' }}>
-                        <div className="flex items-start justify-between flex-wrap gap-4">
-                            <div className="flex items-center gap-4">
-                                <span className="text-6xl">{framework.icone}</span>
-                                <div>
-                                    <h1 className="text-4xl md:text-5xl font-extrabold text-gray-800 mb-2">
-                                        {framework.nome}
-                                    </h1>
-                                    <p className="text-xl text-gray-600 mb-2">{framework.nome_completo}</p>
-                                    <span className="inline-block px-4 py-2 rounded-full text-sm font-semibold text-white"
-                                        style={{ backgroundColor: framework.cor }}>
-                                        {framework.tipo}
-                                    </span>
-                                </div>
-                            </div>
+					{/* Top Info Banner Panel */}
+					<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: `${framework.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">{framework.icone}</span>
+								<div>
+									<h1 className="text-4xl font-display font-extrabold text-slate-850 dark:text-slate-100 tracking-tight leading-none mb-3">
+										{framework.nome}
+									</h1>
+									<p className="text-sm font-semibold text-slate-400 dark:text-slate-500 mb-4">{framework.nome_completo}</p>
+									<span 
+										className="inline-block px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest select-none"
+										style={{ backgroundColor: `${framework.cor}18`, color: framework.cor, border: `1px solid ${framework.cor}30` }}
+									>
+										{framework.tipo}
+									</span>
+								</div>
+							</div>
 
-                            <div className="mx-auto sm:mx-0 grid items-center gap-3">
-                                {framework.documentacao && (
-                                    <a
-                                        href={framework.documentacao}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="inline-flex items-center gap-2 bg-linear-to-r from-blue-600 to-purple-600 text-white px-5 py-2 rounded-xl font-semibold shadow hover:shadow-lg transition"
-                                    >
-                                        📘 Documentação
-                                    </a>
-                                )}
+							{/* Call to Actions CTA Grid */}
+							<div className="grid sm:grid-cols-2 lg:grid-cols-1 gap-3 w-full lg:w-auto">
+								{framework.documentacao && (
+									<a
+										href={framework.documentacao}
+										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"
+									>
+										<BookOpen className="w-4 h-4" />
+										<span>Documentação Oficial</span>
+									</a>
+								)}
 
-                                {framework.repositorio && (
-                                    <a
-                                        href={framework.repositorio}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="inline-flex items-center gap-2 bg-white text-gray-800 px-5 py-2 rounded-xl font-semibold shadow border-2 border-gray-100 hover:border-purple-300 transition"
-                                    >
-                                        🔗 Repositório
-                                    </a>
-                                )}
-                            </div>
-                        </div>
+								{framework.repositorio && (
+									<a
+										href={framework.repositorio}
+										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"
+									>
+										<Code className="w-4 h-4" />
+										<span>Repositório no GitHub</span>
+									</a>
+								)}
+							</div>
+						</div>
 
-                        <p className="text-lg text-gray-700 mt-6 leading-relaxed">
-                            {framework.descricao}
-                        </p>
-                    </div>
-                </div>
+						<p className="text-sm text-slate-500 dark:text-slate-200 mt-6 leading-relaxed max-w-4xl font-semibold">
+							{framework.descricao}
+						</p>
+					</div>
+				</div>
 
-                <div className="grid md:grid-cols-3 gap-6 mb-8">
-                    <div className="bg-white rounded-2xl shadow-lg p-6 border-l-4" style={{ borderColor: framework.cor }}>
-                        <h3 className="text-sm font-semibold text-gray-600 mb-2">LINGUAGEM</h3>
-                        <p className="text-3xl font-bold text-gray-800">{framework.linguagem}</p>
-                        <p className="text-gray-600 mt-1">Principal</p>
-                    </div>
+				{/* Framework Core Specifications Grid */}
+				<div className="grid md:grid-cols-3 gap-6 mb-8 select-none animate-fadeIn">
+					<div 
+						className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-l-4" 
+						style={{ borderColor: framework.cor }}
+					>
+						<h3 className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
+							<Code className="w-3.5 h-3.5 text-blue-500" />
+							<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>
+					</div>
 
-                    <div className="bg-white rounded-2xl shadow-lg p-6 border-l-4" style={{ borderColor: framework.cor }}>
-                        <h3 className="text-sm font-semibold text-gray-600 mb-2">TIPO</h3>
-                        <p className="text-3xl font-bold text-gray-800">{framework.tipo}</p>
-                        <p className="text-gray-600 mt-1">Categoria</p>
-                    </div>
+					<div 
+						className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-l-4" 
+						style={{ borderColor: framework.cor }}
+					>
+						<h3 className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
+							<Layers className="w-3.5 h-3.5 text-purple-500" />
+							<span>CATEGORIA DO FRAMEWORK</span>
+						</h3>
+						<p className="text-2xl font-extrabold text-slate-800 dark:text-slate-100">{framework.tipo}</p>
+						<p className="text-xs text-slate-400 mt-1">Classificação de arquitetura</p>
+					</div>
 
-                    <div className="bg-white rounded-2xl shadow-lg p-6 border-l-4" style={{ borderColor: framework.cor }}>
-                        <h3 className="text-sm font-semibold text-gray-600 mb-2">FUNÇÃO PRINCIPAL</h3>
-                        <p className="text-xl font-bold text-gray-800">{framework.funcao_principal}</p>
-                    </div>
-                </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: framework.cor }}
+					>
+						<h3 className="text-[10px] font-bold text-slate-400 dark:text-slate-450 mb-1.5 flex items-center gap-1.5">
+							<Target className="w-3.5 h-3.5 text-emerald-500" />
+							<span>OBJETIVO PRINCIPAL</span>
+						</h3>
+						<p className="text-sm font-bold text-slate-700 dark:text-slate-200 leading-relaxed mt-1.5">{framework.funcao_principal}</p>
+					</div>
+				</div>
 
-                <div className="grid lg:grid-cols-3 gap-6 mb-8">
-                    <div className="lg:col-span-2 bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-100">
-                        <h2 className="text-2xl font-bold text-gray-800 mb-4 pb-3 border-b-2" style={{ borderColor: framework.cor }}>
-                            ✨ Principais Características
-                        </h2>
-                        <ul className="list-disc list-inside space-y-2 text-gray-700">
-                            {features.map((f, i) => (
-                                <li key={i} className="pl-2">{f}</li>
-                            ))}
-                        </ul>
+				{/* side-by-side details block */}
+				<div className="grid lg:grid-cols-3 gap-6 mb-8 items-start">
+					{/* Left specs card */}
+					<div className="lg:col-span-2 bg-white/80 dark:bg-slate-900/45 backdrop-blur-xl rounded-3xl p-8 border border-slate-200/60 dark:border-slate-800/80 shadow-2xl space-y-8">
+						<div>
+							<h2 
+								className="text-lg font-display font-extrabold text-slate-850 dark:text-slate-100 mb-6 pb-3 border-b flex items-center gap-2.5 select-none" 
+								style={{ borderBottomColor: `${framework.cor}30` }}
+							>
+								<Zap className="w-5 h-5" style={{ color: framework.cor }} />
+								<span>Características de Destaque</span>
+							</h2>
+							
+							<ul className="space-y-3">
+								{features.map((feature, i) => (
+									<li key={i} className="flex items-start gap-2.5 text-xs font-semibold text-slate-650 dark:text-slate-200">
+										<CheckCircle className="w-4 h-4 text-emerald-500 dark:text-emerald-450 mt-0.5 shrink-0" />
+										<span>{feature}</span>
+									</li>
+								))}
+							</ul>
+						</div>
 
-                        <h2 className="text-2xl font-bold text-gray-800 mt-8 mb-4 pb-3 border-b-2" style={{ borderColor: framework.cor }}>
-                            📦 Casos de Uso
-                        </h2>
-                        <div className="grid md:grid-cols-2 gap-3">
-                            {useCases.map((u, i) => (
-                                <div key={i} className="bg-gray-50 p-3 rounded-lg text-gray-700">{u}</div>
-                            ))}
-                        </div>
-                    </div>
+						<div>
+							<h2 
+								className="text-lg font-display font-extrabold text-slate-850 dark:text-slate-100 mb-6 pb-3 border-b flex items-center gap-2.5 select-none" 
+								style={{ borderBottomColor: `${framework.cor}30` }}
+							>
+								<Compass className="w-5 h-5" style={{ color: framework.cor }} />
+								<span>Casos de Uso Recomendados</span>
+							</h2>
+							
+							<div className="grid md:grid-cols-2 gap-3.5">
+								{useCases.map((useCase, i) => (
+									<div key={i} className="bg-slate-50/50 dark:bg-slate-900/60 p-4 rounded-2xl border border-slate-150/40 dark:border-slate-800/80 text-xs font-bold text-slate-700 dark:text-slate-200 flex items-center gap-2 hover:bg-purple-500/5 dark:hover:bg-purple-400/5 transition-colors select-none">
+										<span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: framework.cor }} />
+										<span>{useCase}</span>
+									</div>
+								))}
+							</div>
+						</div>
+					</div>
 
-                    <div className="bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-100">
-                        <h2 className="text-2xl font-bold text-gray-800 mb-4 pb-3 border-b-2" style={{ borderColor: framework.cor }}>
-                            📋 Detalhes Rápidos
-                        </h2>
-                        <div className="space-y-3 text-gray-700">
-                            <div><span className="font-semibold">Nome completo:</span> {framework.nome_completo}</div>
-                            <div><span className="font-semibold">Linguagem:</span> {framework.linguagem}</div>
-                            <div><span className="font-semibold">Tipo:</span> {framework.tipo}</div>
-                            <div><span className="font-semibold">Cor (tema):</span> <span className="inline-block w-4 h-4 rounded ml-2" style={{ backgroundColor: framework.cor }} /></div>
-                        </div>
-                    </div>
-                </div>
+					{/* Right summary metadata card */}
+					<div className="bg-white/80 dark:bg-slate-900/45 backdrop-blur-xl rounded-3xl p-8 border border-slate-200/60 dark:border-slate-800/80 shadow-2xl select-none">
+						<h2 
+							className="text-lg font-display font-extrabold text-slate-850 dark:text-slate-100 mb-6 pb-3 border-b flex items-center gap-2.5" 
+							style={{ borderBottomColor: `${framework.cor}30` }}
+						>
+							<FileText className="w-5 h-5" style={{ color: framework.cor }} />
+							<span>Resumo Técnico</span>
+						</h2>
+						
+						<div className="space-y-4 text-xs font-bold text-slate-650 dark:text-slate-200">
+							<div className="flex justify-between items-center py-2 border-b border-slate-100 dark:border-slate-850/45">
+								<span className="text-slate-400 dark:text-slate-500 uppercase tracking-wider text-[9px]">Nome Oficial</span>
+								<span className="text-slate-800 dark:text-slate-200 font-extrabold">{framework.nome}</span>
+							</div>
+							<div className="flex justify-between items-center py-2 border-b border-slate-100 dark:border-slate-850/45">
+								<span className="text-slate-400 dark:text-slate-500 uppercase tracking-wider text-[9px]">Linguagem</span>
+								<span className="text-slate-800 dark:text-slate-200 font-extrabold">{framework.linguagem}</span>
+							</div>
+							<div className="flex justify-between items-center py-2 border-b border-slate-100 dark:border-slate-850/45">
+								<span className="text-slate-400 dark:text-slate-500 uppercase tracking-wider text-[9px]">Tipo / Suite</span>
+								<span className="text-slate-800 dark:text-slate-200 font-extrabold">{framework.tipo}</span>
+							</div>
+							<div className="flex justify-between items-center py-2">
+								<span className="text-slate-400 dark:text-slate-500 uppercase tracking-wider text-[9px]">Cor Temática</span>
+								<div className="flex items-center gap-2">
+									<code className="text-[10px] text-slate-500 uppercase">{framework.cor}</code>
+									<span className="inline-block w-4 h-4 rounded-md shadow-xs border border-white/20" style={{ backgroundColor: framework.cor }} />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
 
-                {framework.exemplos && (
-                    <CodeExample framework={framework} />
-                )}
+				{/* Coding examples container (renders only if framework has examples defined) */}
+				{framework.exemplos && (
+					<div className="mt-12">
+						<CodeExample framework={framework} />
+					</div>
+				)}
 
-                <div className="text-center md:flex gap-4 mt-6">
-                    {framework.documentacao && (
-                        <a
-                            href={framework.documentacao}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center mb-4 gap-2 bg-linear-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold shadow hover:shadow-xl transition"
-                        >
-                            📚 Documentação Oficial
-                        </a>
-                    )}
+				{/* Technical documentation double CTAs */}
+				<div className="flex flex-wrap gap-4 mt-8 select-none">
+					{framework.documentacao && (
+						<a
+							href={framework.documentacao}
+							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-6 py-3.5 rounded-xl font-bold text-xs uppercase tracking-wider hover:opacity-90 transition-opacity shadow-lg"
+						>
+							<BookOpen className="w-4 h-4" />
+							<span>Documentação do Desenvolvedor</span>
+						</a>
+					)}
 
-                    {framework.repositorio && (
-                        <a
-                            href={framework.repositorio}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center mb-4 gap-2 bg-white text-gray-800 px-6 py-3 rounded-xl font-semibold shadow border-2 border-gray-100 hover:border-purple-300 transition"
-                        >
-                            💻 Repositório no GitHub
-                        </a>
-                    )}
-                </div>
-            </main>
+					{framework.repositorio && (
+						<a
+							href={framework.repositorio}
+							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-6 py-3.5 rounded-xl font-bold text-xs uppercase tracking-wider hover:bg-purple-500/20 transition-all shadow-xs"
+						>
+							<Code className="w-4 h-4" />
+							<span>Código Fonte no GitHub</span>
+						</a>
+					)}
+				</div>
+			</main>
 
-            <Footer />
-        </div>
-    );
+			<Footer />
+		</div>
+	);
 }
 
 export async function generateMetadata({ params }) {
-    const { key } = await params;
-    const framework = frameworksData[key];
+	const { key } = await params;
+	const framework = frameworksData[key];
 
-    if (!framework) {
-        return { title: "Framework não encontrado" };
-    }
+	if (!framework) {
+		return { title: "Framework não encontrado" };
+	}
 
-    return {
-        title: `ESPDocs - ${framework.nome_completo}`,
-        description: framework.descricao,
-    };
+	return {
+		title: `ESPDocs - ${framework.nome_completo}`,
+		description: framework.descricao,
+	};
 }
 
 export async function generateStaticParams() {
-    return Object.keys(frameworksData).map((key) => ({
-        key: key,
-    }));
+	return Object.keys(frameworksData).map((key) => ({
+		key: key,
+	}));
 }
\ No newline at end of file
diff --git a/app/frameworks/page.jsx b/app/frameworks/page.jsx
index 2559649..6c47297 100644
--- a/app/frameworks/page.jsx
+++ b/app/frameworks/page.jsx
@@ -2,200 +2,237 @@ import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import Link from "next/link";
 import frameworksData from "@/public/frameworks.json";
+import { 
+	Cpu, 
+	Target, 
+	Zap, 
+	Compass, 
+	ExternalLink, 
+	GraduationCap, 
+	ArrowRight,
+	Code,
+	Layers,
+	Sparkles,
+	Music,
+	Camera,
+	Brain,
+	Home
+} from "lucide-react";
 
 export default function Frameworks() {
-    const frameworks = Object.entries(frameworksData);
+	const frameworks = Object.entries(frameworksData);
 
-    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">Ferramentas de Desenvolvimento</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">
-                        Frameworks ESP32
-                    </h1>
-                    
-                    <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
-                        Descubra os frameworks e bibliotecas disponíveis para ESP32. De desenvolvimento geral a 
-                        aplicações especializadas em áudio, visão computacional, IA e IoT.
-                    </p>
-                </section>
+			<main id="conteudo" className="px-6 pt-16 pb-24 max-w-7xl mx-auto">
+				{/* Top Hero Section */}
+				<section className="text-center mb-16 select-none">
+					<div className="inline-flex items-center gap-2 bg-white/70 dark:bg-slate-900/50 backdrop-blur-md px-4 py-2 rounded-full mb-6 border border-slate-200/60 dark:border-slate-800/60 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>
+					</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>
+					
+					<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>
+				</section>
 
-                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-                    {frameworks.map(([key, framework]) => (
-                        <Link
-                            key={key}
-                            href={`/frameworks/${key}`}
-                            className="group"
-                        >
-                            <div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 border-2 border-gray-100 hover:border-opacity-50 h-full flex flex-col">
-                                
-                                <div className="p-6 border-b border-gray-100">
-                                    <div className="flex items-center justify-between mb-3">
-                                        <span className="text-5xl">{framework.icone}</span>
-                                        <div className="flex flex-col gap-2 items-end">
-                                            <span className="px-3 py-1 rounded-full text-xs font-semibold text-white"
-                                                style={{ backgroundColor: framework.cor }}>
-                                                {framework.linguagem}
-                                            </span>
-                                        </div>
-                                    </div>
-                                    
-                                    <h2 className="text-2xl font-bold text-gray-800 mb-1 group-hover:text-purple-600 transition-colors">
-                                        {framework.nome}
-                                    </h2>
-                                    
-                                    <p className="text-xs text-gray-500 mb-3 font-medium">
-                                        {framework.nome_completo}
-                                    </p>
-                                    
-                                    <p className="text-sm text-gray-600 line-clamp-3">
-                                        {framework.descricao}
-                                    </p>
-                                </div>
+				{/* 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}`}
+							className="group flex"
+						>
+							<div 
+								className="bg-white/70 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 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"
+								style={{ borderTop: `4px solid ${framework.cor}` }}
+							>
+								
+								<div className="p-6 pb-4 border-b border-slate-100 dark:border-slate-850/40 flex-1">
+									<div className="flex items-center justify-between mb-4">
+										<span className="text-5xl select-none filter drop-shadow-md">{framework.icone}</span>
+										<div className="flex flex-col gap-1 items-end select-none">
+											<span 
+												className="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider"
+												style={{ 
+													backgroundColor: `${framework.cor}18`, 
+													color: framework.cor,
+													border: `1px solid ${framework.cor}25`
+												}}
+											>
+												{framework.linguagem}
+											</span>
+										</div>
+									</div>
+									
+									<h2 className="text-xl font-display font-extrabold text-slate-850 dark:text-slate-100 mb-1 group-hover:text-purple-650 dark:group-hover:text-purple-400 transition-colors">
+										{framework.nome}
+									</h2>
+									
+									<p className="text-[10px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider mb-4 leading-none select-none">
+										{framework.nome_completo}
+									</p>
+									
+									<p className="text-xs text-slate-500 dark:text-slate-300 leading-relaxed line-clamp-3">
+										{framework.descricao}
+									</p>
+								</div>
 
-                                <div className="p-6 space-y-4 grow">
-                                    <div>
-                                        <span className="inline-block px-3 py-1 rounded-lg text-xs font-semibold"
-                                            style={{ 
-                                                backgroundColor: `${framework.cor}20`, 
-                                                color: framework.cor 
-                                            }}>
-                                            {framework.tipo}
-                                        </span>
-                                    </div>
+								<div className="p-6 py-5 space-y-4 flex-1 flex flex-col justify-between select-none">
+									<div className="space-y-4">
+										{/* Main Feature */}
+										<div>
+											<h4 className="text-[9px] font-bold text-slate-400 dark:text-slate-450 mb-1.5 uppercase tracking-widest flex items-center gap-1.5">
+												<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">
+												{framework.funcao_principal}
+											</p>
+										</div>
 
-                                    <div>
-                                        <h4 className="text-xs font-bold text-gray-700 mb-2 uppercase tracking-wide">
-                                            🎯 Função Principal
-                                        </h4>
-                                        <p className="text-sm text-gray-600 line-clamp-2">
-                                            {framework.funcao_principal}
-                                        </p>
-                                    </div>
+										{/* Key Specs */}
+										<div>
+											<h4 className="text-[9px] font-bold text-slate-400 dark:text-slate-450 mb-2 uppercase tracking-widest flex items-center gap-1.5">
+												<Zap className="w-3.5 h-3.5 text-amber-500" />
+												<span>Recursos Chave</span>
+											</h4>
+											<ul className="space-y-1">
+												{framework.caracteristicas.slice(0, 3).map((carac, idx) => (
+													<li key={idx} className="text-xs text-slate-600 dark:text-slate-300 flex items-start gap-1.5">
+														<span className="text-[8px] mt-1 shrink-0" style={{ color: framework.cor }}>■</span>
+														<span className="line-clamp-1">{carac}</span>
+													</li>
+												))}
+											</ul>
+										</div>
 
-                                    <div>
-                                        <h4 className="text-xs font-bold text-gray-700 mb-2 uppercase tracking-wide">
-                                            ⚡ Características
-                                        </h4>
-                                        <ul className="space-y-1">
-                                            {framework.caracteristicas.slice(0, 3).map((carac, idx) => (
-                                                <li key={idx} className="text-xs text-gray-600 flex items-start">
-                                                    <span className="mr-2 mt-0.5" style={{ color: framework.cor }}>▪</span>
-                                                    <span className="line-clamp-1">{carac}</span>
-                                                </li>
-                                            ))}
-                                            {framework.caracteristicas.length > 3 && (
-                                                <li className="text-xs text-gray-400 italic">
-                                                    +{framework.caracteristicas.length - 3} mais...
-                                                </li>
-                                            )}
-                                        </ul>
-                                    </div>
+										{/* Use Cases tags */}
+										<div>
+											<h4 className="text-[9px] font-bold text-slate-400 dark:text-slate-450 mb-2 uppercase tracking-widest flex items-center gap-1.5">
+												<Compass className="w-3.5 h-3.5 text-emerald-500" />
+												<span>Aplicações Ideais</span>
+											</h4>
+											<div className="flex flex-wrap gap-1.5">
+												{framework.casos_uso.slice(0, 3).map((caso, idx) => (
+													<span key={idx} className="text-[9px] font-bold bg-slate-100 dark:bg-slate-900/60 text-slate-650 dark:text-slate-200 px-2.5 py-1 rounded-md border border-slate-200/40 dark:border-slate-800/80">
+														{caso}
+													</span>
+												))}
+											</div>
+										</div>
+									</div>
 
-                                    <div>
-                                        <h4 className="text-xs font-bold text-gray-700 mb-2 uppercase tracking-wide">
-                                            💼 Casos de Uso
-                                        </h4>
-                                        <div className="flex flex-wrap gap-2">
-                                            {framework.casos_uso.slice(0, 3).map((caso, idx) => (
-                                                <span key={idx} className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">
-                                                    {caso}
-                                                </span>
-                                            ))}
-                                        </div>
-                                    </div>
-                                </div>
+									{/* CTA Link */}
+									<div className="pt-4 border-t border-slate-100 dark:border-slate-850/40 mt-auto flex items-center justify-between text-xs font-bold text-slate-700 dark:text-slate-300 group-hover:text-purple-650 dark:group-hover:text-purple-400 transition-colors">
+										<span>Acessar Detalhes e Exemplos</span>
+										<ArrowRight className="w-4 h-4 transform group-hover:translate-x-1.5 transition-transform" />
+									</div>
+								</div>
+							</div>
+						</Link>
+					))}
+				</div>
 
-                                <div className="px-6 pb-6">
-                                    <div className="flex items-center justify-between text-sm font-semibold group-hover:text-purple-600 transition-colors">
-                                        <span>Ver Detalhes e Exemplos</span>
-                                        <span className="transform group-hover:translate-x-2 transition-transform">→</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </Link>
-                    ))}
-                </div>
+				{/* Bottom Informative Cards Section */}
+				<div className="mt-16 grid md:grid-cols-2 gap-8 select-none">
+					{/* Card 1: Beginner Guide */}
+					<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl shadow-xl p-8 border border-slate-200/60 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">
+									<GraduationCap className="w-6 h-6" />
+								</div>
+								<div>
+									<h3 className="text-xl font-display font-extrabold text-slate-850 dark:text-slate-100">
+										Iniciante no ESP32?
+									</h3>
+									<p className="text-[10px] font-bold text-blue-500 uppercase tracking-wider leading-none">Guia de Aprendizado</p>
+								</div>
+							</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;
+								<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.
+							</p>
+						</div>
 
-                <div className="mt-16 grid md:grid-cols-2 gap-8">
-                    <div className="bg-linear-to-br from-white to-blue-50 rounded-3xl shadow-2xl p-8 border-2 border-blue-100">
-                        <div className="flex items-center gap-3 mb-4">
-                            <div className="w-12 h-12 bg-linear-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
-                                <span className="text-2xl">🎓</span>
-                            </div>
-                            <h3 className="text-2xl font-bold text-gray-900">
-                                Iniciante no ESP32?
-                            </h3>
-                        </div>
-                        <p className="text-gray-700 mb-6 leading-relaxed text-base">
-                            Se você está começando, recomendo iniciar com&nbsp;
-                            <strong>Arduino</strong> ou&nbsp;
-                            <strong>MicroPython</strong>&nbsp;
-                            para prototipagem rápida, ou&nbsp;
-                            <strong>ESP-IDF</strong> para projetos profissionais com controle total.
-                        </p>
-                        <div className="flex flex-wrap gap-3">
-                            <Link href="/frameworks/Arduino" className="inline-flex items-center gap-2 px-5 py-3 bg-blue-100 text-blue-700 rounded-xl text-sm font-bold hover:bg-blue-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
-                                <span className="text-lg">📘</span>
-                                <span>Arduino</span>
-                            </Link>
-                            <Link href="/frameworks/MicroPython" className="inline-flex items-center gap-2 px-5 py-3 bg-purple-100 text-purple-700 rounded-xl text-sm font-bold hover:bg-purple-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
-                                <span className="text-lg">🐍</span>
-                                <span>MicroPython</span>
-                            </Link>
-                            <Link href="/frameworks/ESP-IDF" className="inline-flex items-center gap-2 px-5 py-3 bg-red-100 text-red-700 rounded-xl text-sm font-bold hover:bg-red-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
-                                <span className="text-lg">⚙️</span>
-                                <span>ESP-IDF</span>
-                            </Link>
-                        </div>
-                    </div>
+						<div className="flex flex-wrap gap-2.5 pt-4 border-t border-slate-100 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">
+								<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">
+								<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>
+						</div>
+					</div>
 
-                    <div className="bg-linear-to-br from-white to-purple-50 rounded-3xl shadow-2xl p-8 border-2 border-purple-100">
-                        <div className="flex items-center gap-3 mb-4">
-                            <div className="w-12 h-12 bg-linear-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center">
-                                <span className="text-2xl">🚀</span>
-                            </div>
-                            <h3 className="text-2xl font-bold text-gray-900">
-                                Aplicações Especializadas?
-                            </h3>
-                        </div>
-                        <p className="text-gray-700 mb-6 leading-relaxed text-base">
-                            Para projetos específicos, explore frameworks especializados como&nbsp;
-                            <strong>ESP-ADF</strong> (áudio),&nbsp;
-                            <strong>ESP-WHO</strong> (visão),&nbsp;
-                            <strong>ESP-NN</strong> (IA) ou&nbsp;
-                            <strong>ESP-Matter</strong> (smart home).
-                        </p>
-                        <div className="flex flex-wrap gap-3">
-                            <Link href="/frameworks/ESP-ADF" className="inline-flex items-center gap-2 px-5 py-3 bg-blue-100 text-blue-700 rounded-xl text-sm font-bold hover:bg-blue-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
-                                <span className="text-lg">🎵</span>
-                                <span>Áudio</span>
-                            </Link>
-                            <Link href="/frameworks/ESP-WHO" className="inline-flex items-center gap-2 px-5 py-3 bg-orange-100 text-orange-700 rounded-xl text-sm font-bold hover:bg-orange-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
-                                <span className="text-lg">📷</span>
-                                <span>Visão</span>
-                            </Link>
-                            <Link href="/frameworks/ESP-NN" className="inline-flex items-center gap-2 px-5 py-3 bg-teal-100 text-teal-700 rounded-xl text-sm font-bold hover:bg-teal-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
-                                <span className="text-lg">🧠</span>
-                                <span>IA</span>
-                            </Link>
-                            <Link href="/frameworks/ESP-Matter" className="inline-flex items-center gap-2 px-5 py-3 bg-yellow-100 text-yellow-700 rounded-xl text-sm font-bold hover:bg-yellow-200 transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
-                                <span className="text-lg">🏠</span>
-                                <span>Smart Home</span>
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-            </main>
+					{/* Card 2: Specialized Solutions */}
+					<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl shadow-xl p-8 border border-slate-200/60 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">
+									<Sparkles className="w-6 h-6" />
+								</div>
+								<div>
+									<h3 className="text-xl font-display font-extrabold text-slate-850 dark:text-slate-100">
+										Soluções Especializadas
+									</h3>
+									<p className="text-[10px] font-bold text-purple-500 uppercase tracking-wider leading-none">Domínios Avançados</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.
+							</p>
+						</div>
 
-            <Footer />
-        </div>
-    );
+						<div className="flex flex-wrap gap-2.5 pt-4 border-t border-slate-100 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-200/60 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" />
+								<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-200/60 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>
+							<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-200/60 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-200/60 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>
+						</div>
+					</div>
+				</div>
+			</main>
+
+			<Footer />
+		</div>
+	);
 }
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index f1d8c73..f93b099 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1 +1,47 @@
 @import "tailwindcss";
+
+@theme {
+	--font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
+	--font-display: var(--font-outfit), ui-sans-serif, system-ui, -apple-system, sans-serif;
+	
+	/* Premium dark mode palette accents */
+	--color-brand-purple: #8b5cf6;
+	--color-brand-blue: #3b82f6;
+	--color-brand-pink: #ec4899;
+}
+
+/* Enable class-based dark mode selector in Tailwind v4 */
+@variant dark (&:where(.dark, .dark *));
+
+@layer base {
+	html {
+		scroll-behavior: smooth;
+	}
+	
+	body {
+		@apply bg-slate-50 text-slate-900 transition-colors duration-300;
+	}
+	
+	body.dark {
+		@apply bg-slate-950 text-slate-50;
+	}
+
+	/* Sleek selection highlighting */
+	::selection {
+		@apply bg-purple-500/30 text-purple-200;
+	}
+
+	/* Scrollbar customization for a premium, non-default OS look */
+	::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply bg-transparent;
+	}
+
+	::-webkit-scrollbar-thumb {
+		@apply bg-slate-300 dark:bg-slate-800 rounded-full hover:bg-slate-400 dark:hover:bg-slate-700 transition-colors;
+	}
+}
diff --git a/app/layout.jsx b/app/layout.jsx
index 0458f97..8f8ccb7 100644
--- a/app/layout.jsx
+++ b/app/layout.jsx
@@ -1,7 +1,18 @@
-import { Roboto } from "next/font/google";
+import { Outfit, Inter } from "next/font/google";
 import "./globals.css";
+import Providers from "@/components/Providers";
 
-const roboto = Roboto({ subsets: ["latin"] });
+const outfit = Outfit({ 
+	subsets: ["latin"],
+	variable: "--font-outfit",
+	display: "swap",
+});
+
+const inter = Inter({ 
+	subsets: ["latin"],
+	variable: "--font-inter",
+	display: "swap",
+});
 
 export const metadata = {
 	title: "ESPDocs",
@@ -11,9 +22,11 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
 	return (
-		<html lang="pt-BR">
-			<body className={`${roboto.className} font-sans`}>
-				{children}
+		<html lang="pt-BR" className={`${outfit.variable} ${inter.variable}`} suppressHydrationWarning>
+			<body className="font-sans antialiased bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-50 transition-colors duration-300">
+				<Providers>
+					{children}
+				</Providers>
 			</body>
 		</html>
 	);
diff --git a/app/page.jsx b/app/page.jsx
index cb2a0d3..be26c74 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -1,176 +1,252 @@
+"use client";
+
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import Link from "next/link";
+import { 
+	SlidersHorizontal, 
+	ShoppingBag, 
+	Table2, 
+	Cpu, 
+	Layers, 
+	Scale, 
+	FileText, 
+	Code, 
+	RefreshCw, 
+	Globe,
+	ArrowRight,
+	Terminal,
+	Compass,
+	Info
+} from "lucide-react";
 
 export default function Home() {
 	const resources = [
-        {name: "Seletor Inteligente", description: "Responda perguntas sobre seu projeto e descubra qual série ESP32 é ideal para você", icon: "🎯"},
-        {name: "Catálogo de Placas", description: "Encontre placas de desenvolvimento ESP32 verificadas com filtros avançados e links seguros para compra", icon: "🛒"},
-		{name: "Especificações Organizadas", description: "Especificações técnicas de cada série ESP32 organizadas em tabelas comparativas em português", icon: "🔧"},
-		{name: "Diagramas de Conexões", description: "Visualize diagramas interativos dos componentes e pinos de cada série ESP32", icon: "📊"},
-		{name: "Informações sobre Frameworks", description: "Conheça frameworks como ESP-IDF, Arduino e MicroPython com descrições, casos de uso e exemplos", icon: "⚡"},
-		{name: "Comparação de Séries", description: "Compare lado a lado as especificações de diferentes séries ESP32 em uma única visualização", icon: "📈"},
-		{name: "Links para Documentação", description: "Acesso direto aos datasheets, manuais técnicos e guias oficiais da Espressif (em inglês)", icon: "📄"},
-		{name: "Exemplos de Código", description: "Snippets de código básico para diferentes frameworks com links para repositórios oficiais", icon: "💻"},
-        {name: "Informações Atualizadas", description: "Dados atualizados sobre as séries e frameworks mais recentes do ecossistema ESP32", icon: "🔄"},
-        {name: "Interface em Português", description: "Navegação e organização de informações totalmente em português para facilitar a consulta", icon: "📚"},
-    ]
+		{
+			name: "Seletor Inteligente", 
+			description: "Responda perguntas rápidas sobre seu projeto e descubra a série ESP32 ideal em segundos.", 
+			icon: <SlidersHorizontal className="w-6 h-6" />,
+			colorClass: "text-purple-600 bg-purple-50 dark:bg-purple-950/40 dark:text-purple-400"
+		},
+		{
+			name: "Catálogo de Placas", 
+			description: "Encontre placas de desenvolvimento ESP32 verificadas com filtros avançados e links seguros.", 
+			icon: <ShoppingBag className="w-6 h-6" />,
+			colorClass: "text-blue-600 bg-blue-50 dark:bg-blue-950/40 dark:text-blue-400"
+		},
+		{
+			name: "Especificações Organizadas", 
+			description: "Especificações técnicas completas de cada microcontrolador organizadas para fácil leitura.", 
+			icon: <Table2 className="w-6 h-6" />,
+			colorClass: "text-pink-600 bg-pink-50 dark:bg-pink-950/40 dark:text-pink-400"
+		},
+		{
+			name: "Diagramas de Conexões", 
+			description: "Visualize diagramas de pinos interativos e mapeamentos de periféricos de forma dinâmica.", 
+			icon: <Cpu className="w-6 h-6" />,
+			colorClass: "text-emerald-600 bg-emerald-50 dark:bg-emerald-950/40 dark:text-emerald-400"
+		},
+		{
+			name: "Suporte a Frameworks", 
+			description: "Encontre casos de uso, documentações e snippets para ESP-IDF, Arduino e MicroPython.", 
+			icon: <Layers className="w-6 h-6" />,
+			colorClass: "text-amber-600 bg-amber-50 dark:bg-amber-950/40 dark:text-amber-400"
+		},
+		{
+			name: "Comparação de Modelos", 
+			description: "Compare lado a lado as especificações de múltiplos chips em uma visualização única.", 
+			icon: <Scale className="w-6 h-6" />,
+			colorClass: "text-cyan-600 bg-cyan-50 dark:bg-cyan-950/40 dark:text-cyan-400"
+		},
+		{
+			name: "Links para Documentação", 
+			description: "Acesso direto aos datasheets oficiais, manuais de referência e guias da Espressif.", 
+			icon: <FileText className="w-6 h-6" />,
+			colorClass: "text-red-600 bg-red-50 dark:bg-red-950/40 dark:text-red-400"
+		},
+		{
+			name: "Exemplos de Código", 
+			description: "Gabaritos e snippets funcionais de código para iniciar seus projetos rapidamente.", 
+			icon: <Code className="w-6 h-6" />,
+			colorClass: "text-indigo-600 bg-indigo-50 dark:bg-indigo-950/40 dark:text-indigo-400"
+		},
+		{
+			name: "Informações Atualizadas", 
+			description: "Dados sempre revisados e sincronizados com os lançamentos mais recentes de silício.", 
+			icon: <RefreshCw className="w-6 h-6" />,
+			colorClass: "text-teal-600 bg-teal-50 dark:bg-teal-950/40 dark:text-teal-400"
+		},
+		{
+			name: "Interface em Português", 
+			description: "Navegação, termos técnicos e explicações adaptadas ao nosso idioma nativo.", 
+			icon: <Globe className="w-6 h-6" />,
+			colorClass: "text-sky-600 bg-sky-50 dark:bg-sky-950/40 dark:text-sky-400"
+		},
+	];
 
-    return (
-        <div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
+	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-12 pb-16 max-w-7xl mx-auto">
-                {/* Hero Section */}
-                <section className="text-center mb-20">
-                    <h1 className="text-5xl md:text-7xl lg:text-8xl font-black bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 tracking-tight">
-                        ESPDocs
-                    </h1>
-                    
-                    <h2 className="text-xl md:text-2xl lg:text-3xl text-gray-800 font-bold mb-6 max-w-4xl mx-auto leading-tight">
-                        Organização e acesso facilitado ao ecossistema ESP32
-                    </h2>
-                    
-                    <p className="text-base md:text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed mb-10">
-                        Plataforma não oficial com interface em português que organiza e centraliza
-                        informações sobre ESP32. Compare especificações, visualize diagramas e acesse
-                        a documentação oficial da Espressif.
-                    </p>
+			<main className="px-6 pt-16 pb-24 max-w-7xl mx-auto">
+				{/* Hero Section */}
+				<section className="text-center mb-24 max-w-5xl mx-auto">
+					<h1 className="text-5xl md:text-7xl lg:text-8xl font-display font-extrabold bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent mb-6 tracking-tight leading-tight select-none">
+						ESPDocs
+					</h1>
+					
+					<h2 className="text-xl md:text-3xl text-slate-800 dark:text-slate-200 font-bold mb-6 max-w-3xl mx-auto leading-snug">
+						Organização e acesso facilitado ao ecossistema ESP32
+					</h2>
+					
+					<p className="text-base md:text-lg text-slate-500 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed mb-12">
+						Plataforma independente criada para desenvolvedores que buscam comparar especificações, consultar pinouts, selecionar chips ideais e acessar referências em português de forma rápida e intuitiva.
+					</p>
 
-                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-                        <Link
-                            className="group inline-flex items-center gap-3 bg-linear-to-r from-green-600 to-emerald-600 text-white px-8 py-4 rounded-xl font-bold text-base shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300"
-                            href="/seletor"
-                        >
-                            <span className="text-xl">🎯</span>
-                            <span>Encontrar ESP32 Ideal</span>
-                            <svg className="w-5 h-5 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                            </svg>
-                        </Link>
+					{/* Botões de Ação */}
+					<div className="flex flex-wrap gap-4 justify-center items-center">
+						<Link
+							className="group inline-flex items-center gap-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-7 py-3.5 rounded-xl font-bold text-sm shadow-lg hover:shadow-purple-500/20 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer active:scale-95"
+							href="/seletor"
+						>
+							<Compass className="w-4 h-4" />
+							<span>Encontrar ESP32 Ideal</span>
+							<ArrowRight className="w-4 h-4 transform group-hover:translate-x-1 transition-transform" />
+						</Link>
 
-                        <Link
-                            className="group inline-flex items-center gap-3 bg-linear-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-bold text-base shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300"
-                            href="/series"
-                        >
-                            <span className="text-xl">📚</span>
-                            <span>Explorar Séries ESP32</span>
-                        </Link>
+						<Link
+							className="group inline-flex items-center gap-2.5 bg-slate-900 hover:bg-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700 text-white px-7 py-3.5 rounded-xl font-bold text-sm shadow-md hover:-translate-y-0.5 transition-all duration-300 cursor-pointer active:scale-95"
+							href="/series"
+						>
+							<Cpu className="w-4 h-4" />
+							<span>Explorar Séries</span>
+						</Link>
 
-                        <Link
-                            className="group inline-flex items-center gap-3 bg-white text-gray-800 px-8 py-4 rounded-xl font-bold text-base shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-500 transform hover:-translate-y-1 transition-all duration-300"
-                            href="/frameworks"
-                        >
-                            <span className="text-xl">⚡</span>
-                            <span>Frameworks</span>
-                        </Link>
+						<Link
+							className="group inline-flex items-center gap-2.5 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 px-7 py-3.5 rounded-xl font-bold text-sm shadow-xs border border-slate-200 dark:border-slate-800 hover:border-purple-500 dark:hover:border-purple-400 hover:text-purple-600 dark:hover:text-purple-400 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer active:scale-95"
+							href="/frameworks"
+						>
+							<Terminal className="w-4 h-4" />
+							<span>Frameworks</span>
+						</Link>
 
-                        <Link
-                            className="group inline-flex items-center gap-3 bg-white text-gray-800 px-8 py-4 rounded-xl font-bold text-base shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-500 transform hover:-translate-y-1 transition-all duration-300"
-                            href="/catalogo"
-                        >
-                            <span className="text-xl">🛒</span>
-                            <span>Catálogo</span>
-                        </Link>
-                    </div>
-                </section>
+						<Link
+							className="group inline-flex items-center gap-2.5 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 px-7 py-3.5 rounded-xl font-bold text-sm shadow-xs border border-slate-200 dark:border-slate-800 hover:border-purple-500 dark:hover:border-purple-400 hover:text-purple-600 dark:hover:text-purple-400 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer active:scale-95"
+							href="/catalogo"
+						>
+							<ShoppingBag className="w-4 h-4" />
+							<span>Placas</span>
+						</Link>
+					</div>
+				</section>
 
-                {/* Recursos Section */}
-                <section className="mb-20">
-                    <div className="text-center mb-12">
-                        <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Recursos da Plataforma</h2>
-                        <p className="text-lg text-gray-600 max-w-2xl mx-auto">Ferramentas e informações organizadas para facilitar seu trabalho com ESP32</p>
-                    </div>
-                    
-                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        {resources.map((resource, index) => (
-                            <div 
-                                key={resource.name} 
-                                className="group bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 border-2 border-gray-100 hover:border-purple-200"
-                                style={{ animationDelay: `${index * 50}ms` }}
-                            >
-                                <div className="flex items-start gap-4">
-                                    <div className="text-4xl shrink-0 transform group-hover:scale-110 transition-transform">
-                                        {resource.icon}
-                                    </div>
-                                    <div className="flex-1">
-                                        <h3 className="text-lg font-bold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">
-                                            {resource.name}
-                                        </h3>
-                                        <p className="text-sm text-gray-600 leading-relaxed">
-                                            {resource.description}
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </section>
+				{/* Recursos Section */}
+				<section className="mb-24">
+					<div className="text-center mb-16">
+						<h2 className="text-3xl md:text-4xl font-display font-extrabold text-slate-800 dark:text-slate-100 mb-4">
+							Recursos da Plataforma
+						</h2>
+						<p className="text-base text-slate-500 dark:text-slate-400 max-w-xl mx-auto leading-relaxed">
+							Conjunto completo de utilitários projetados para maximizar a produtividade e eliminar atritos no desenvolvimento de firmware.
+						</p>
+					</div>
+					
+					<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+						{resources.map((resource) => (
+							<div 
+								key={resource.name} 
+								className="group bg-white/70 dark:bg-slate-900/40 backdrop-blur-md p-6 rounded-2xl border border-slate-200/60 dark:border-slate-800/80 hover:border-purple-500/40 dark:hover:border-purple-400/40 shadow-xs hover:shadow-xl hover:shadow-purple-500/5 hover:-translate-y-1 transition-all duration-300"
+							>
+								<div className="flex items-start gap-4">
+									<div className={`w-12 h-12 rounded-xl flex items-center justify-center shrink-0 transform group-hover:scale-105 transition-transform duration-300 shadow-xs ${resource.colorClass}`}>
+										{resource.icon}
+									</div>
+									<div className="flex-1">
+										<h3 className="text-base font-bold text-slate-800 dark:text-slate-100 mb-2 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
+											{resource.name}
+										</h3>
+										<p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
+											{resource.description}
+										</p>
+									</div>
+								</div>
+							</div>
+						))}
+					</div>
+				</section>
 
-                {/* Ciência Embarcada Section */}
-                <section className="mb-12">
-                    <div className="bg-linear-to-br from-white to-purple-50 rounded-3xl shadow-xl p-8 md:p-12 border-2 border-purple-100">
-						{/* Logo e Link do Ciência Embarcada */}
-						<div className="flex flex-col items-center mb-6">
+				{/* Ciência Embarcada Section */}
+				<section className="mb-8">
+					<div className="bg-gradient-to-br from-white to-purple-50/50 dark:from-slate-900/40 dark:to-purple-950/10 rounded-3xl shadow-xs border border-slate-200/80 dark:border-slate-800/80 p-8 md:p-12 relative overflow-hidden">
+						{/* Background soft glow decoration */}
+						<div className="absolute right-0 bottom-0 w-80 h-80 bg-purple-500/5 rounded-full blur-3xl pointer-events-none" />
+
+						<div className="flex flex-col items-center text-center relative z-10 max-w-3xl mx-auto">
 							<a 
 								href="https://cienciaembarcada.com.br" 
 								target="_blank" 
 								rel="noopener noreferrer"
-								className="group"
+								className="group mb-6"
 							>
 								<img 
 									src="/logo.png" 
-									alt="Ciência Embarcada" 
-									className="h-16 md:h-20 mb-4 transition-transform duration-300 group-hover:scale-110"
+									alt="Ciência Embarcada Logo" 
+									className="h-16 md:h-20 mb-2 transition-transform duration-300 group-hover:scale-105"
 								/>
 							</a>
-							<p className="text-lg font-semibold text-gray-800 mb-2">
-								Conteúdo por <a 
+							
+							<p className="text-lg font-bold text-slate-800 dark:text-slate-200 mb-3">
+								Conteúdo e Curadoria por{' '}
+								<a 
 									href="https://cienciaembarcada.com.br" 
 									target="_blank" 
 									rel="noopener noreferrer"
-									className="text-purple-600 hover:text-purple-800 transition-colors"
+									className="text-purple-600 dark:text-purple-400 hover:underline transition-colors font-extrabold"
 								>
 									Ciência Embarcada
 								</a>
 							</p>
-							<p className="text-sm text-gray-600 max-w-xl text-center mb-4">
-								Artigos sobre ESP32, Eletrônica, IoT, Cibersegurança e muito mais.
-								Visite o blog para aprender com tutoriais práticos e projetos reais!
+							
+							<p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed mb-8 max-w-xl">
+								Acesse artigos profundos sobre programação de microcontroladores, design de hardware, Internet das Coisas (IoT), laboratórios práticos e projetos reais em nosso blog parceiro oficial.
 							</p>
+
 							<a
 								href="https://cienciaembarcada.com.br"
 								target="_blank"
 								rel="noopener noreferrer"
-								className="inline-flex items-center gap-2 bg-linear-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
+								className="inline-flex items-center gap-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-6 py-3 rounded-xl font-bold text-sm shadow-md hover:shadow-purple-500/10 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer active:scale-95"
 							>
-								🚀 Visitar Blog
-								<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-								</svg>
+								<span>Visitar Blog Ciência Embarcada</span>
+								<ExternalLinkIcon />
 							</a>
 						</div>
 
-                        {/* Disclaimer */}
-                        <div className="border-t-2 border-purple-200 pt-6 mt-6">
-                            <div className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
-                                <div className="flex items-start gap-3">
-                                    <svg className="w-5 h-5 text-blue-600 mt-0.5 shrink-0" 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>
-                                    <p className="text-sm text-gray-700 leading-relaxed">
-                                        <strong className="font-semibold text-gray-900">Plataforma não oficial:</strong> O ESPDocs é independente e sem afiliação com a Espressif Systems. 
-                                        Organiza informações públicas e links para documentação oficial. Para dados técnicos críticos, 
-                                        consulte sempre os datasheets e manuais oficiais da Espressif.
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section> 
-            </main>
+						{/* Disclaimer */}
+						<div className="border-t border-slate-200/80 dark:border-slate-800/80 pt-8 mt-10">
+							<div className="bg-slate-100/60 dark:bg-slate-900/60 border-l-4 border-purple-500 p-5 rounded-r-2xl">
+								<div className="flex gap-4">
+									<Info className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 shrink-0" />
+									<p className="text-xs leading-relaxed text-slate-500 dark:text-slate-400">
+										<strong className="font-bold text-slate-700 dark:text-slate-200">Plataforma independente e não oficial:</strong> O ESPDocs é um projeto educativo que compila, filtra e expõe dados públicos e links de documentações oficiais fornecidas pela fabricante Espressif Systems. Para projetos industriais ou decisões de engenharia críticas, sempre consulte a documentação técnica nativa do fabricante.
+									</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</section> 
+			</main>
 
 			<Footer />
-        </div>
-    );
+		</div>
+	);
+}
+
+/* Local mini-icon component for external link */
+function ExternalLinkIcon() {
+	return (
+		<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+		</svg>
+	);
 }
\ No newline at end of file
diff --git a/app/seletor/page.jsx b/app/seletor/page.jsx
index 07c8e99..b0240b4 100644
--- a/app/seletor/page.jsx
+++ b/app/seletor/page.jsx
@@ -5,820 +5,928 @@ import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import Link from "next/link";
 import seriesData from "@/public/series.json";
+import {
+	Wifi,
+	Bluetooth,
+	Network,
+	Cpu,
+	Bot,
+	Monitor,
+	Camera,
+	Home as HomeIcon,
+	Sliders,
+	Cable,
+	Battery,
+	Zap,
+	Ban,
+	ChevronLeft,
+	ChevronRight,
+	RotateCcw,
+	Sparkles,
+	Edit2,
+	CheckCircle,
+	HelpCircle,
+	Award,
+	SlidersHorizontal,
+	ExternalLink,
+	ShoppingBag,
+	BookOpen,
+	Compass,
+	Smartphone
+} from "lucide-react";
+
+// Dynamic icon mapper to convert choices to sleek Lucide vectors
+const iconMap = {
+	// Categoria
+	"category_wearable": <Battery className="w-6 h-6 text-green-500" />,
+	"category_smarthome": <HomeIcon className="w-6 h-6 text-amber-500" />,
+	"category_multimedia": <Monitor className="w-6 h-6 text-cyan-500" />,
+	"category_industrial": <Cpu className="w-6 h-6 text-purple-500" />,
+	
+	// Conectividade
+	"connectivity_wifi-ble": <Wifi className="w-6 h-6 text-blue-500" />,
+	"connectivity_mesh": <Network className="w-6 h-6 text-orange-500" />,
+	"connectivity_ethernet": <Cable className="w-6 h-6 text-emerald-500" />,
+	"connectivity_none": <Ban className="w-6 h-6 text-slate-450 dark:text-slate-500" />,
+	
+	// Alimentacao
+	"power_battery": <Battery className="w-6 h-6 text-green-500" />,
+	"power_always-on": <Zap className="w-6 h-6 text-yellow-500 animate-pulse" />,
+	
+	// Hardware
+	"hardware_display-camera": (
+		<div className="flex gap-1 text-cyan-500 shrink-0">
+			<Monitor className="w-5 h-5" />
+			<Camera className="w-5 h-5" />
+		</div>
+	),
+	"hardware_usb-native": <Cable className="w-6 h-6 text-teal-500" />,
+	"hardware_many-gpios": <Sliders className="w-6 h-6 text-sky-500" />,
+	"hardware_basic": <HelpCircle className="w-6 h-6 text-slate-450 dark:text-slate-550" />,
+	
+	// IA
+	"ai_ai-ml": <Bot className="w-6 h-6 text-pink-500" />,
+	"ai_standard": <Ban className="w-6 h-6 text-slate-450 dark:text-slate-550" />,
+};
+
+const getOptionIcon = (questionId, value) => {
+	const key = `${questionId}_${value}`;
+	return iconMap[key] || <HelpCircle className="w-6 h-6 text-slate-400" />;
+};
 
 export default function Seletor() {
-    const [currentStep, setCurrentStep] = useState(0);
-    const [currentAnswer, setCurrentAnswer] = useState(null);
-    const [answers, setAnswers] = useState({
-        wifi: null,
-        bluetooth: null,
-        cores: null,
-        ai: null,
-        matter: null,
-        gpio: null,
-        usb: null,
-        lowPower: null,
-        ethernet: null,
-        display: null,
-    });
-    const [showResults, setShowResults] = useState(false);
-    const [showSummary, setShowSummary] = useState(false);
+	const [currentStep, setCurrentStep] = useState(0);
+	const [currentAnswer, setCurrentAnswer] = useState(null);
+	const [answers, setAnswers] = useState({
+		category: null,
+		connectivity: null,
+		power: null,
+		hardware: null,
+		ai: null,
+	});
+	const [showResults, setShowResults] = useState(false);
+	const [showSummary, setShowSummary] = useState(false);
 
-    const questions = [
-        {
-            id: "wifi",
-            question: "Seu projeto precisa de conectividade Wi-Fi?",
-            description: "Wi-Fi permite conexão com internet e redes locais sem fio",
-            options: [
-                { value: "required", label: "Sim, é essencial", icon: "📶" },
-                { value: "nice", label: "Seria útil, mas não é obrigatório", icon: "📡" },
-                { value: "no", label: "Não preciso", icon: "📵" },
-            ]
-        },
-        {
-            id: "bluetooth",
-            question: "Seu projeto precisa de Bluetooth?",
-            description: "Bluetooth permite comunicação com dispositivos móveis e periféricos",
-            options: [
-                { value: "required", label: "Sim, é essencial", icon: "📱" },
-                { value: "nice", label: "Seria útil, mas não é obrigatório", icon: "🔵" },
-                { value: "no", label: "Não preciso", icon: "🚫" },
-            ]
-        },
-        {
-            id: "ethernet",
-            question: "Precisa de conexão Ethernet (cabeada)?",
-            description: "Ethernet oferece conexão mais estável e rápida que Wi-Fi",
-            options: [
-                { value: "yes", label: "Sim, preciso", icon: "🔌" },
-                { value: "no", label: "Não preciso", icon: "🚫" },
-            ]
-        },
-        {
-            id: "cores",
-            question: "Quantos núcleos de processamento você precisa?",
-            description: "Mais núcleos permitem executar tarefas em paralelo",
-            options: [
-                { value: "dual", label: "Dual-core (2 núcleos)", icon: "⚡⚡" },
-                { value: "single", label: "Single-core (1 núcleo)", icon: "⚡" },
-                { value: "any", label: "Tanto faz", icon: "🤷" },
-            ]
-        },
-        {
-            id: "ai",
-            question: "Precisa de recursos de IA/Machine Learning?",
-            description: "Aceleradores de IA ajudam em reconhecimento de voz, imagem e visão computacional",
-            options: [
-                { value: "yes", label: "Sim, vou usar IA", icon: "🤖" },
-                { value: "no", label: "Não preciso", icon: "🚫" },
-            ]
-        },
-        {
-            id: "display",
-            question: "Precisa conectar display ou câmera?",
-            description: "Interfaces LCD/MIPI para displays e DVP/CSI para câmeras",
-            options: [
-                { value: "both", label: "Display e câmera", icon: "📱📷" },
-                { value: "display", label: "Apenas display", icon: "📺" },
-                { value: "camera", label: "Apenas câmera", icon: "📷" },
-                { value: "no", label: "Não preciso", icon: "🚫" },
-            ]
-        },
-        {
-            id: "matter",
-            question: "Precisa de suporte a Matter, Zigbee ou Thread?",
-            description: "Protocolos para casa inteligente e IoT de baixo consumo",
-            options: [
-                { value: "yes", label: "Sim, preciso", icon: "🏠" },
-                { value: "no", label: "Não preciso", icon: "🚫" },
-            ]
-        },
-        {
-            id: "gpio",
-            question: "Quantos pinos GPIO você precisa?",
-            description: "GPIO permite conectar sensores, displays e outros componentes",
-            options: [
-                { value: "many", label: "Muitos (35+)", icon: "🔌🔌🔌" },
-                { value: "medium", label: "Quantidade média (20-35)", icon: "🔌🔌" },
-                { value: "few", label: "Poucos (menos de 20)", icon: "🔌" },
-            ]
-        },
-        {
-            id: "usb",
-            question: "Precisa de USB nativo?",
-            description: "USB nativo facilita programação e comunicação sem adaptadores",
-            options: [
-                { value: "yes", label: "Sim, preciso", icon: "🔌" },
-                { value: "nice", label: "Seria útil", icon: "💡" },
-                { value: "no", label: "Não preciso", icon: "🚫" },
-            ]
-        },
-        {
-            id: "lowPower",
-            question: "Baixo consumo de energia é crítico?",
-            description: "Importante para projetos com bateria ou painéis solares",
-            options: [
-                { value: "critical", label: "Sim, é crítico", icon: "🔋" },
-                { value: "nice", label: "Seria bom", icon: "💡" },
-                { value: "no", label: "Não é prioridade", icon: "⚡" },
-            ]
-        },
-    ];
+	const questions = [
+		{
+			id: "category",
+			question: "Qual é o foco principal ou aplicação do seu projeto?",
+			description: "Categorizar seu projeto nos ajuda a equilibrar fatores de tamanho físico, consumo de energia e poder computacional do chip.",
+			options: [
+				{ value: "wearable", label: "Dispositivo Portátil ou Vestível (Wearable)", icon: "category_wearable" },
+				{ value: "smarthome", label: "Automação / Smart Home / IoT Conectado", icon: "category_smarthome" },
+				{ value: "multimedia", label: "Interface Multimídia (Telas / Câmeras / HMI)", icon: "category_multimedia" },
+				{ value: "industrial", label: "Industrial / Robótica / Alto Desempenho", icon: "category_industrial" },
+			]
+		},
+		{
+			id: "connectivity",
+			question: "Qual tecnologia de rede sem fio (RF) você precisa?",
+			description: "O ecossistema ESP32 oferece desde rádios Wi-Fi tradicionais até controladores industriais cabeados ou rádio Mesh 802.15.4.",
+			options: [
+				{ value: "wifi-ble", label: "Wi-Fi + Bluetooth BLE (IoT Tradicional)", icon: "connectivity_wifi-ble" },
+				{ value: "mesh", label: "Matter / Zigbee / Thread (Redes Mesh)", icon: "connectivity_mesh" },
+				{ value: "ethernet", label: "Rede Cabeada Industrial (Ethernet)", icon: "connectivity_ethernet" },
+				{ value: "none", label: "Apenas Local / Sem Conexão Sem Fio", icon: "connectivity_none" },
+			]
+		},
+		{
+			id: "power",
+			question: "Como o dispositivo será alimentado eletricamente?",
+			description: "A escolha da fonte de energia determina a importância de blocos internos de silício de consumo ultra-baixo (Deep Sleep).",
+			options: [
+				{ value: "battery", label: "Bateria ou Painel Solar (Consumo Ultra-Baixo)", icon: "power_battery" },
+				{ value: "always-on", label: "Tomada, Fonte Externa ou USB (Sempre Ativo)", icon: "power_always-on" },
+			]
+		},
+		{
+			id: "hardware",
+			question: "Quais periféricos físicos ou barramentos serão conectados?",
+			description: "Determinados módulos requerem interfaces dedicadas no silício, como barramento LCD, USB nativo ou alta quantidade de GPIOs.",
+			options: [
+				{ value: "display-camera", label: "Displays Gráficos LCD ou Câmeras", icon: "hardware_display-camera" },
+				{ value: "usb-native", label: "Conexão USB Nativa (Emular Teclado/Disco)", icon: "hardware_usb-native" },
+				{ value: "many-gpios", label: "Muitos Atuadores / Pinos (Mais de 30 GPIOs)", icon: "hardware_many-gpios" },
+				{ value: "basic", label: "Básico (Poucos sensores com I2C, SPI ou UART)", icon: "hardware_basic" },
+			]
+		},
+		{
+			id: "ai",
+			question: "Seu projeto usará Inteligência Artificial local (Edge AI)?",
+			description: "Aceleração por hardware permite rodar redes neurais, reconhecimento de voz ou visão computacional na borda em milissegundos.",
+			options: [
+				{ value: "ai-ml", label: "Sim, preciso rodar modelos de IA localmente", icon: "ai_ai-ml" },
+				{ value: "standard", label: "Não, processamento lógico comum é suficiente", icon: "ai_standard" },
+			]
+		}
+	];
 
-    const handleAnswer = (questionId, value) => {
-        setCurrentAnswer(value);
-        setAnswers({ ...answers, [questionId]: value });
-    };
+	const handleAnswer = (questionId, value) => {
+		setCurrentAnswer(value);
+		setAnswers({ ...answers, [questionId]: value });
+	};
 
-    const handleNext = () => {
-        if (currentAnswer !== null) {
-            if (currentStep < questions.length - 1) {
-                setCurrentStep(currentStep + 1);
-                setCurrentAnswer(answers[questions[currentStep + 1].id] || null);
-            } else {
-                // Última pergunta - mostrar resumo primeiro
-                setShowSummary(true);
-            }
-        }
-    };
+	const handleNext = () => {
+		if (currentAnswer !== null) {
+			if (currentStep < questions.length - 1) {
+				setCurrentStep(currentStep + 1);
+				setCurrentAnswer(answers[questions[currentStep + 1].id] || null);
+			} else {
+				setShowSummary(true);
+			}
+		}
+	};
 
-    const resetQuiz = () => {
-        setCurrentStep(0);
-        setCurrentAnswer(null);
-        setShowResults(false);
-        setShowSummary(false);
-        setAnswers({
-            wifi: null,
-            bluetooth: null,
-            cores: null,
-            ai: null,
-            matter: null,
-            gpio: null,
-            usb: null,
-            lowPower: null,
-            ethernet: null,
-            display: null,
-        });
-    };
+	const resetQuiz = () => {
+		setCurrentStep(0);
+		setCurrentAnswer(null);
+		setShowResults(false);
+		setShowSummary(false);
+		setAnswers({
+			category: null,
+			connectivity: null,
+			power: null,
+			hardware: null,
+			ai: null,
+		});
+	};
 
-    const goBack = () => {
-        if (currentStep > 0) {
-            setCurrentStep(currentStep - 1);
-            setCurrentAnswer(answers[questions[currentStep - 1].id] || null);
-        }
-    };
+	const goBack = () => {
+		if (currentStep > 0) {
+			setCurrentStep(currentStep - 1);
+			setCurrentAnswer(answers[questions[currentStep - 1].id] || null);
+		}
+	};
 
-    const calculateRecommendations = () => {
-        const scores = {};
-        const reasons = {};
-        
-        Object.keys(seriesData).forEach(key => {
-            scores[key] = 0;
-            reasons[key] = [];
-            const serie = seriesData[key];
-            
-            // Wi-Fi
-            if (answers.wifi === "required") {
-                if (serie.wifi && !String(serie.wifi).includes("Não")) {
-                    scores[key] += 10;
-                    reasons[key].push(`✅ Wi-Fi ${serie.wifi.includes("Wi-Fi 6") ? "6 (última geração)" : "disponível"}`);
-                } else {
-                    scores[key] -= 100;
-                    reasons[key].push("❌ Wi-Fi não disponível (requisito essencial)");
-                }
-            } else if (answers.wifi === "nice" && serie.wifi && !String(serie.wifi).includes("Não")) {
-                scores[key] += 3;
-                reasons[key].push(`💡 Wi-Fi ${serie.wifi.includes("Wi-Fi 6") ? "6" : ""} disponível`);
-            }
-            
-            // Bluetooth
-            if (answers.bluetooth === "required") {
-                if (serie.bluetooth !== "Não") {
-                    scores[key] += 10;
-                    reasons[key].push(`✅ ${serie.bluetooth}`);
-                } else {
-                    scores[key] -= 100;
-                    reasons[key].push("❌ Bluetooth não disponível (requisito essencial)");
-                }
-            } else if (answers.bluetooth === "nice" && serie.bluetooth !== "Não") {
-                scores[key] += 3;
-                reasons[key].push(`💡 ${serie.bluetooth}`);
-            }
+	const calculateRecommendations = () => {
+		const scores = {};
+		const reasons = {};
+		
+		Object.keys(seriesData).forEach(key => {
+			scores[key] = 0;
+			reasons[key] = [];
+			const serie = seriesData[key];
+			
+			// 1. CATEGORIA DO PROJETO (category)
+			if (answers.category === "wearable") {
+				if (serie.bluetooth !== "Não") {
+					scores[key] += 10;
+					reasons[key].push("Suporte de rádio Bluetooth de alta eficiência para pareamento");
+				}
+				const sleep = serie.consumo_energia?.deep_sleep;
+				if (sleep) {
+					const uaMatch = sleep.match(/(\d+)\s*µA/);
+					if (uaMatch && parseInt(uaMatch[1]) <= 10) {
+						scores[key] += 15;
+						reasons[key].push(`Modo standby ultra-eficiente (${sleep}) conserva baterias comerciais`);
+					}
+				}
+				if (key === "ESP32-C2" || key === "ESP32-C3") {
+					scores[key] += 6;
+					reasons[key].push("Footprint de tamanho reduzido ideal para dispositivos ultra-compactos");
+				}
+			} else if (answers.category === "smarthome") {
+				if (serie.wifi && !String(serie.wifi).includes("Não")) {
+					scores[key] += 10;
+					reasons[key].push("Cadeia RF Wi-Fi robusta integrada para integração residencial");
+				}
+				if (serie.matter === "Sim") {
+					scores[key] += 15;
+					reasons[key].push("Suporte oficial a Matter para alta interoperabilidade inteligente");
+				}
+			} else if (answers.category === "multimedia") {
+				if (serie.lcd || serie.mipi_dsi) {
+					scores[key] += 15;
+					reasons[key].push("Barramentos dedicados no silício para controle de telas coloridas");
+				}
+				if (serie.camera || serie.mipi_csi) {
+					scores[key] += 15;
+					reasons[key].push("Linhas dedicadas para conexão de câmeras de vídeo");
+				}
+				if (serie.psram_externa && serie.psram_externa !== "Não") {
+					scores[key] += 10;
+					reasons[key].push("Suporte a PSRAM externa de alta densidade para buffers e quadros");
+				}
+			} else if (answers.category === "industrial") {
+				if (serie.nucleos.includes("2")) {
+					scores[key] += 12;
+					reasons[key].push("Arquitetura Dual-Core ideal para loops síncronos e processamento paralelo");
+				}
+				if (parseInt(serie.gpio) >= 30) {
+					scores[key] += 10;
+					reasons[key].push(`Grande número de portas digitais (${serie.gpio} GPIOs)`);
+				}
+				if (serie.aceleradores_ia) {
+					scores[key] += 10;
+					reasons[key].push("Acelerador neural de silício ideal para controle de feedback preditivo");
+				}
+			}
 
-            // Ethernet
-            if (answers.ethernet === "yes") {
-                if (serie.ethernet === "Sim") {
-                    scores[key] += 12;
-                    reasons[key].push("✅ Ethernet MAC integrado");
-                } else {
-                    scores[key] -= 8;
-                    reasons[key].push("⚠️ Ethernet não disponível");
-                }
-            }
-            
-            // Núcleos
-            if (answers.cores === "dual") {
-                if (serie.nucleos.includes("2")) {
-                    scores[key] += 8;
-                    reasons[key].push("✅ Dual-core para processamento paralelo");
-                } else {
-                    scores[key] -= 5;
-                    reasons[key].push("⚠️ Apenas single-core");
-                }
-            } else if (answers.cores === "single" && serie.nucleos.includes("1")) {
-                scores[key] += 5;
-                reasons[key].push("✅ Single-core eficiente");
-            }
-            
-            // IA
-            if (answers.ai === "yes") {
-                if (serie.aceleradores_ia) {
-                    scores[key] += 15;
-                    reasons[key].push("✅ Aceleradores de IA integrados");
-                } else {
-                    scores[key] -= 10;
-                    reasons[key].push("⚠️ Sem aceleradores de IA dedicados");
-                }
-            }
+			// 2. CONECTIVIDADE SEM FIO (connectivity)
+			if (answers.connectivity === "wifi-ble") {
+				if (serie.wifi && !String(serie.wifi).includes("Não") && serie.bluetooth !== "Não") {
+					scores[key] += 20;
+					reasons[key].push(`Conexão de rádio integrada Wi-Fi (${serie.wifi}) e Bluetooth (${serie.bluetooth})`);
+				} else if (serie.wifi && !String(serie.wifi).includes("Não")) {
+					scores[key] += 8;
+					reasons[key].push("Possui conexão Wi-Fi ativa, mas carece de Bluetooth");
+				} else {
+					scores[key] -= 80;
+					reasons[key].push("Incompatível: Necessita de rádio Wi-Fi ou Bluetooth");
+				}
+			} else if (answers.connectivity === "mesh") {
+				if (serie.matter === "Sim") {
+					scores[key] += 25;
+					reasons[key].push("Rádio 802.15.4 integrado de alto alcance para barramentos Mesh (Zigbee/Thread)");
+				} else {
+					scores[key] -= 15;
+					reasons[key].push("Sem rádio mesh 802.15.4 integrado no chip");
+				}
+			} else if (answers.connectivity === "ethernet") {
+				if (serie.ethernet === "Sim" || serie.ethernet_mac === "Sim") {
+					scores[key] += 25;
+					reasons[key].push("Controlador MAC Ethernet cabeado para conexões imunes a ruídos RF");
+				} else {
+					scores[key] -= 10;
+					reasons[key].push("Requer shield ou controlador externo para conexão de rede cabeada");
+				}
+			} else if (answers.connectivity === "none") {
+				if (serie.wifi === "Não" || serie.bluetooth === "Não" || key === "ESP32-H2" || key === "ESP32-C2") {
+					scores[key] += 15;
+					reasons[key].push("Microcontrolador focado em baixo custo e alta eficiência para circuitos locais");
+				} else {
+					scores[key] += 5;
+				}
+			}
 
-            // Display/Câmera
-            if (answers.display === "both") {
-                if ((serie.lcd || serie.mipi_dsi) && (serie.camera || serie.mipi_csi)) {
-                    scores[key] += 15;
-                    reasons[key].push("✅ Interfaces para display e câmera");
-                } else {
-                    scores[key] -= 8;
-                    reasons[key].push("⚠️ Interfaces limitadas para display/câmera");
-                }
-            } else if (answers.display === "display") {
-                if (serie.lcd || serie.mipi_dsi) {
-                    scores[key] += 10;
-                    reasons[key].push(`✅ Interface ${serie.mipi_dsi ? "MIPI DSI" : "LCD"} para display`);
-                } else {
-                    scores[key] -= 5;
-                    reasons[key].push("⚠️ Interface de display limitada");
-                }
-            } else if (answers.display === "camera") {
-                if (serie.camera || serie.mipi_csi) {
-                    scores[key] += 10;
-                    reasons[key].push(`✅ Interface ${serie.mipi_csi ? "MIPI CSI" : "DVP"} para câmera`);
-                } else {
-                    scores[key] -= 5;
-                    reasons[key].push("⚠️ Interface de câmera limitada");
-                }
-            }
-            
-            // Matter/Zigbee/Thread
-            if (answers.matter === "yes") {
-                if (serie.matter === "Sim") {
-                    scores[key] += 12;
-                    reasons[key].push("✅ Suporte a Matter/Thread/Zigbee");
-                } else {
-                    scores[key] -= 8;
-                    reasons[key].push("⚠️ Sem suporte a Matter/Thread/Zigbee");
-                }
-            }
-            
-            // GPIO
-            const gpioCount = parseInt(serie.gpio);
-            if (answers.gpio === "many") {
-                if (gpioCount >= 35) {
-                    scores[key] += 8;
-                    reasons[key].push(`✅ ${gpioCount} pinos GPIO (muitos)`);
-                } else {
-                    scores[key] -= 5;
-                    reasons[key].push(`⚠️ ${gpioCount} GPIO (pode ser limitado)`);
-                }
-            } else if (answers.gpio === "medium") {
-                if (gpioCount >= 20 && gpioCount < 35) {
-                    scores[key] += 8;
-                    reasons[key].push(`✅ ${gpioCount} pinos GPIO (quantidade média)`);
-                } else if (gpioCount >= 35) {
-                    scores[key] += 6;
-                    reasons[key].push(`✅ ${gpioCount} pinos GPIO (mais que o necessário)`);
-                } else {
-                    scores[key] -= 3;
-                    reasons[key].push(`⚠️ ${gpioCount} GPIO (pode ser limitado)`);
-                }
-            } else if (answers.gpio === "few" && gpioCount < 20) {
-                scores[key] += 8;
-                reasons[key].push(`✅ ${gpioCount} pinos GPIO (suficiente)`);
-            }
-            
-            // USB
-            if (answers.usb === "yes") {
-                if (serie.usb && serie.usb !== "Não") {
-                    scores[key] += 10;
-                    reasons[key].push(`✅ ${serie.usb}`);
-                } else {
-                    scores[key] -= 5;
-                    reasons[key].push("⚠️ USB não disponível");
-                }
-            } else if (answers.usb === "nice" && serie.usb && serie.usb !== "Não") {
-                scores[key] += 5;
-                reasons[key].push(`💡 ${serie.usb} disponível`);
-            }
-            
-            // Baixo consumo
-            if (answers.lowPower === "critical") {
-                const deepSleep = serie.consumo_energia?.deep_sleep;
-                if (deepSleep) {
-                    const microAmps = deepSleep.match(/(\d+)\s*µA/);
-                    if (microAmps && parseInt(microAmps[1]) <= 10) {
-                        scores[key] += 12;
-                        reasons[key].push(`✅ Consumo ultra-baixo: ${deepSleep} em deep sleep`);
-                    } else {
-                        scores[key] += 5;
-                        reasons[key].push(`💡 Consumo: ${deepSleep} em deep sleep`);
-                    }
-                }
-            } else if (answers.lowPower === "nice") {
-                const deepSleep = serie.consumo_energia?.deep_sleep;
-                if (deepSleep) {
-                    const microAmps = deepSleep.match(/(\d+)\s*µA/);
-                    if (microAmps && parseInt(microAmps[1]) <= 10) {
-                        scores[key] += 5;
-                        reasons[key].push(`💡 Baixo consumo: ${deepSleep}`);
-                    }
-                }
-            }
+			// 3. FONTE DE ALIMENTAÇÃO & CONSUMO (power)
+			if (answers.power === "battery") {
+				const sleep = serie.consumo_energia?.deep_sleep;
+				if (sleep) {
+					const uaMatch = sleep.match(/(\d+)\s*µA/);
+					if (uaMatch && parseInt(uaMatch[1]) <= 10) {
+						scores[key] += 20;
+						reasons[key].push(`Standby em Deep Sleep de apenas ${sleep} maximiza fontes recarregáveis`);
+					} else {
+						scores[key] += 10;
+						reasons[key].push(`Gerenciamento térmico e modo de suspensão em ${sleep}`);
+					}
+				} else {
+					scores[key] -= 10;
+					reasons[key].push("Standby de energia menos otimizado para longos ciclos de bateria");
+				}
+			} else if (answers.power === "always-on") {
+				if (serie.nucleos.includes("2")) {
+					scores[key] += 10;
+					reasons[key].push("Desempenho multitarefa constante garantido por núcleos redundantes");
+				}
+				if (parseInt(serie.frequencia) >= 240) {
+					scores[key] += 10;
+					reasons[key].push(`Velocidade de cálculo mantida em clock máximo de ${serie.frequencia}`);
+				}
+			}
 
-            // Bonus: Características adicionais
-            if (serie.frequencia && parseInt(serie.frequencia) >= 240) {
-                reasons[key].push(`⚡ Alta performance: ${serie.frequencia}`);
-            }
-        });
-        
-        return { scores, reasons };
-    };
+			// 4. INTERFACE E PERIFÉRICOS (hardware)
+			if (answers.hardware === "display-camera") {
+				if ((serie.lcd || serie.mipi_dsi) && (serie.camera || serie.mipi_csi)) {
+					scores[key] += 25;
+					reasons[key].push("Possui barramento flexível LCD e câmera digital rodando simultaneamente");
+				} else if (serie.lcd || serie.mipi_dsi || serie.camera || serie.mipi_csi) {
+					scores[key] += 15;
+					reasons[key].push("Suporte para telas gráficas ou interfaces de captura de imagem");
+				} else {
+					scores[key] -= 50;
+					reasons[key].push("Incompatível: Sem barramentos físicos dedicados para telas e câmeras");
+				}
+			} else if (answers.hardware === "usb-native") {
+				if (serie.usb && serie.usb !== "Não") {
+					scores[key] += 25;
+					reasons[key].push(`Interface física USB OTG integrada (${serie.usb}) para depuração direta`);
+				} else {
+					scores[key] -= 35;
+					reasons[key].push("Incompatível: Requer depurador USB-Serial de placa externa");
+				}
+			} else if (answers.hardware === "many-gpios") {
+				const gpios = parseInt(serie.gpio);
+				if (gpios >= 35) {
+					scores[key] += 20;
+					reasons[key].push(`Grade extensiva de portas de expansão com ${gpios} pinos GPIO livres`);
+				} else if (gpios >= 22) {
+					scores[key] += 10;
+					reasons[key].push(`Portas GPIO moderadas (${gpios} pinos)`);
+				} else {
+					scores[key] -= 20;
+					reasons[key].push(`Grade de pinagem física restrita (${gpios} GPIOs)`);
+				}
+			} else if (answers.hardware === "basic") {
+				scores[key] += 10;
+			}
 
-    const { scores: allScores, reasons: allReasons } = showResults && Object.values(answers).every(a => a !== null)
-        ? calculateRecommendations()
-        : { scores: {}, reasons: {} };
+			// 5. INTELIGÊNCIA ARTIFICIAL (ai)
+			if (answers.ai === "ai-ml") {
+				if (serie.aceleradores_ia) {
+					scores[key] += 30;
+					reasons[key].push("Acelerador vetorial neural de silício dedicado (inferências Edge AI ultra-rápidas)");
+				} else {
+					scores[key] -= 25;
+					reasons[key].push("Desempenho de IA limitado por falta de aceleração nativa em hardware");
+				}
+			} else if (answers.ai === "standard") {
+				scores[key] += 5;
+			}
+		});
+		
+		return { scores, reasons };
+	};
 
-    const recommendations = Object.entries(allScores)
-        .filter(([_, score]) => score > 0)
-        .sort(([, a], [, b]) => b - a);
+	const { scores: allScores, reasons: allReasons } = (showResults && Object.values(answers).every(a => a !== null))
+		? calculateRecommendations()
+		: { scores: {}, reasons: {} };
 
-    const topRecommendations = recommendations.slice(0, 3);
-    const otherRecommendations = recommendations.slice(3);
+	const recommendations = Object.entries(allScores)
+		.filter(([_, score]) => score > 0)
+		.sort(([, a], [, b]) => b - a);
 
-    const progress = ((currentStep + 1) / questions.length) * 100;
+	// Rearrange podium for premium visual styling: 2nd Place | 1st Place | 3rd Place
+	const getPodiumOrder = (topThree) => {
+		if (topThree.length < 2) return topThree;
+		if (topThree.length === 2) return [topThree[1], topThree[0]]; 
+		return [topThree[1], topThree[0], topThree[2]]; 
+	};
 
-    return (
-        <div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
-            <Header />
+	const topThree = recommendations.slice(0, 3);
+	const desktopPodium = getPodiumOrder(topThree);
+	const otherRecommendations = recommendations.slice(3);
 
-            <main id="conteudo" className="px-4 pt-16 pb-20 max-w-5xl mx-auto">
-                <section className="text-center mb-12">
-                    <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">Ferramenta de Seleção Inteligente</span>
-                    </div>
-                    
-                    <h1 className="text-4xl md:text-6xl 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">
-                        Encontre seu ESP32 Ideal
-                    </h1>
-                    
-                    <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
-                        Responda algumas perguntas sobre seu projeto e descubra qual série ESP32 é perfeita para você
-                    </p>
-                </section>
+	const progress = ((currentStep + 1) / questions.length) * 100;
 
-                {/* Progress Bar */}
-                <div className="mb-8">
-                    <div className="flex justify-between items-center mb-2">
-                        <span className="text-sm font-semibold text-gray-600">
-                            Pergunta {currentStep + 1} de {questions.length}
-                        </span>
-                        <span className="text-sm font-semibold text-purple-600">
-                            {Math.round(progress)}%
-                        </span>
-                    </div>
-                    <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
-                        <div 
-                            className="bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 h-full rounded-full transition-all duration-500 ease-out"
-                            style={{ width: `${progress}%` }}
-                        ></div>
-                    </div>
-                </div>
+	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 />
 
-                {/* Question Card */}
-                {currentStep < questions.length && !showResults && !showSummary && (
-                    <div className="bg-white rounded-3xl shadow-2xl p-6 md:p-12 border-2 border-gray-100 mb-8 transform transition-all duration-300">
-                        <div className="text-center mb-8">
-                            <h2 className="text-xl md:text-3xl font-bold text-gray-900 mb-4">
-                                {questions[currentStep].question}
-                            </h2>
-                            <p className="text-sm md:text-base text-gray-600 max-w-2xl mx-auto">
-                                {questions[currentStep].description}
-                            </p>
-                        </div>
+			<main id="conteudo" className="px-6 pt-16 pb-24 max-w-7xl mx-auto">
+				
+				{/* Top Header Section */}
+				<section className="text-center mb-12 max-w-4xl mx-auto">
+					<div className="inline-flex items-center gap-2 bg-purple-500/10 text-purple-600 dark:text-purple-400 px-4 py-2 rounded-full mb-6 border border-purple-500/20 text-xs font-bold tracking-widest uppercase select-none">
+						🎯 Seletor IoT Inteligente
+					</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-tight tracking-tight">
+						Seletor Inteligente ESP32
+					</h1>
+					
+					<p className="text-sm md:text-base text-slate-500 dark:text-slate-400 leading-relaxed max-w-2xl mx-auto">
+						Responda a **5 perguntas simples** sobre o propósito, conexões de hardware e fonte de alimentação do seu projeto e encontre instantaneamente o silício Espressif perfeito para sua bancada.
+					</p>
+				</section>
 
-                        <div className="grid grid-cols-1 gap-3 md:gap-4 max-w-2xl mx-auto">
-                            {questions[currentStep].options.map((option) => (
-                                <button
-                                    key={option.value}
-                                    onClick={() => handleAnswer(questions[currentStep].id, option.value)}
-                                    className={`group border-2 rounded-2xl p-4 md:p-6 transition-all duration-300 transform hover:scale-105 hover:shadow-xl ${
-                                        currentAnswer === option.value
-                                            ? 'bg-purple-50 border-purple-500 shadow-lg scale-105'
-                                            : 'bg-gray-50 hover:bg-purple-50 border-gray-200 hover:border-purple-500'
-                                    }`}
-                                >
-                                    <div className="flex items-center gap-3 md:gap-4">
-                                        <span className="text-3xl md:text-4xl shrink-0">{option.icon}</span>
-                                        <span className={`text-base md:text-lg font-semibold text-left transition-colors ${
-                                            currentAnswer === option.value
-                                                ? 'text-purple-600'
-                                                : 'text-gray-800 group-hover:text-purple-600'
-                                        }`}>
-                                            {option.label}
-                                        </span>
-                                        {currentAnswer === option.value && (
-                                            <span className="ml-auto text-purple-600 text-xl md:text-2xl shrink-0">✓</span>
-                                        )}
-                                    </div>
-                                </button>
-                            ))}
-                        </div>
+				{/* Wizard Progress Bar */}
+				{!showResults && !showSummary && (
+					<div className="max-w-2xl mx-auto mb-10">
+						<div className="flex justify-between items-center mb-3">
+							<span className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">
+								Etapa {currentStep + 1} de {questions.length}
+							</span>
+							<span className="text-xs font-extrabold text-purple-600 dark:text-purple-400">
+								{Math.round(progress)}% Concluído
+							</span>
+						</div>
+						<div className="w-full bg-slate-200 dark:bg-slate-800/80 rounded-full h-2 overflow-hidden shadow-inner">
+							<div 
+								className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 h-full rounded-full transition-all duration-500 ease-out"
+								style={{ 
+									width: `${progress}%`,
+									boxShadow: "0 0 10px rgba(139, 92, 246, 0.3)"
+								}}
+							></div>
+						</div>
+					</div>
+				)}
 
-                        {/* Navigation Buttons */}
-                        <div className="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-4 mt-8 pt-6 border-t border-gray-200">
-                            <button
-                                onClick={goBack}
-                                disabled={currentStep === 0}
-                                className={`inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-semibold transition-all duration-300 ${
-                                    currentStep === 0
-                                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                                        : 'bg-gray-200 text-gray-800 hover:bg-gray-300 hover:shadow-md cursor-pointer'
-                                }`}
-                            >
-                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                                </svg>
-                                Voltar
-                            </button>
+				{/* STEP 1: Quiz Card Interface */}
+				{currentStep < questions.length && !showResults && !showSummary && (
+					<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl border border-slate-200/60 dark:border-slate-800/80 p-6 md:p-10 max-w-2xl mx-auto shadow-2xl transition-all duration-300">
+						<div className="text-center mb-8">
+							<h2 className="text-xl md:text-2xl font-display font-extrabold text-slate-850 dark:text-slate-100 mb-3 leading-snug">
+								{questions[currentStep].question}
+							</h2>
+							<p className="text-xs md:text-sm text-slate-450 dark:text-slate-400 max-w-xl mx-auto leading-relaxed">
+								{questions[currentStep].description}
+							</p>
+						</div>
 
-                            <button
-                                onClick={resetQuiz}
-                                className="text-gray-600 hover:text-gray-800 font-semibold transition-colors py-3 cursor-pointer"
-                            >
-                                Recomeçar
-                            </button>
+						<div className="grid grid-cols-1 gap-3 max-w-xl mx-auto">
+							{questions[currentStep].options.map((option) => {
+								const isSelected = currentAnswer === option.value;
+								return (
+									<button
+										key={option.value}
+										onClick={() => handleAnswer(questions[currentStep].id, option.value)}
+										className={`group flex items-center gap-4 text-left border rounded-2xl p-4 transition-all duration-300 cursor-pointer hover:shadow-md active:scale-[0.99] ${
+											isSelected
+												? 'bg-purple-500/10 dark:bg-purple-400/10 border-purple-500 dark:border-purple-400 shadow-xs'
+												: 'bg-slate-50/50 dark:bg-slate-900/20 hover:bg-purple-500/5 dark:hover:bg-purple-400/5 border-slate-200 dark:border-slate-800/80 hover:border-purple-400/50'
+										}`}
+									>
+										{/* Icon Badge */}
+										<div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 shadow-xs transition-transform duration-300 group-hover:scale-105 ${
+											isSelected ? 'bg-purple-500/20' : 'bg-slate-100 dark:bg-slate-800'
+										}`}>
+											{getOptionIcon(questions[currentStep].id, option.value)}
+										</div>
 
-                            <button
-                                onClick={handleNext}
-                                disabled={currentAnswer === null}
-                                className={`inline-flex items-center justify-center gap-2 px-8 py-3 rounded-xl font-semibold transition-all duration-300 ${
-                                    currentAnswer === null
-                                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                                        : 'bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 text-white hover:shadow-lg transform hover:-translate-y-0.5 cursor-pointer'
-                                }`}
-                            >
-                                {currentStep === questions.length - 1 ? 'Ver Resultados' : 'Avançar'}
-                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                )}
+										{/* Label */}
+										<span className={`text-xs md:text-sm font-bold transition-colors grow ${
+											isSelected
+												? 'text-purple-700 dark:text-purple-400'
+												: 'text-slate-700 dark:text-slate-350 group-hover:text-purple-600 dark:group-hover:text-purple-400'
+										}`}>
+											{option.label}
+										</span>
 
-                {/* Summary Page */}
-                {showSummary && !showResults && (
-                    <div className="bg-white rounded-3xl shadow-2xl p-6 md:p-12 border-2 border-gray-100 mb-8">
-                        <div className="text-center mb-8">
-                            <div className="inline-flex items-center justify-center w-16 h-16 md:w-20 md:h-20 bg-blue-500 rounded-full mb-4">
-                                <span className="text-3xl md:text-4xl">📋</span>
-                            </div>
-                            <h2 className="text-2xl md:text-4xl font-bold text-gray-900 mb-4">
-                                Resumo das suas Respostas
-                            </h2>
-                            <p className="text-base md:text-lg text-gray-600 max-w-2xl mx-auto">
-                                Revise suas escolhas antes de ver as recomendações
-                            </p>
-                        </div>
+										{/* Check Indicator */}
+										{isSelected && (
+											<div className="w-5 h-5 rounded-full bg-purple-500 dark:bg-purple-400 flex items-center justify-center shrink-0 shadow-xs">
+												<span className="text-white text-[10px] font-bold">✓</span>
+											</div>
+										)}
+									</button>
+								);
+							})}
+						</div>
 
-                        <div className="max-w-3xl mx-auto space-y-4 mb-8">
-                            {questions.map((question) => {
-                                const answer = answers[question.id];
-                                const selectedOption = question.options.find(opt => opt.value === answer);
-                                
-                                return (
-                                    <div key={question.id} className="bg-gray-50 rounded-2xl p-4 md:p-6 border-2 border-gray-200">
-                                        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
-                                            <div className="flex-1">
-                                                <h3 className="text-sm md:text-base font-semibold text-gray-700 mb-2">
-                                                    {question.question}
-                                                </h3>
-                                                {selectedOption && (
-                                                    <div className="flex items-center gap-2">
-                                                        <span className="text-2xl">{selectedOption.icon}</span>
-                                                        <span className="text-base md:text-lg font-bold text-purple-600">
-                                                            {selectedOption.label}
-                                                        </span>
-                                                    </div>
-                                                )}
-                                            </div>
-                                            <button
-                                                onClick={() => {
-                                                    const questionIndex = questions.findIndex(q => q.id === question.id);
-                                                    setCurrentStep(questionIndex);
-                                                    setCurrentAnswer(answers[question.id]);
-                                                    setShowSummary(false);
-                                                }}
-                                                className="self-start md:self-center px-4 py-2 bg-white border-2 border-gray-300 rounded-xl text-sm font-semibold text-gray-700 hover:bg-gray-100 hover:border-purple-500 transition-all"
-                                            >
-                                                ✏️ Editar
-                                            </button>
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                        </div>
+						{/* Bottom Navigation Buttons */}
+						<div className="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-3 mt-8 pt-6 border-t border-slate-200/60 dark:border-slate-800/60">
+							<button
+								onClick={goBack}
+								disabled={currentStep === 0}
+								className={`inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all duration-300 cursor-pointer ${
+									currentStep === 0
+										? 'bg-slate-100 dark:bg-slate-900 text-slate-400 dark:text-slate-600 cursor-not-allowed border border-transparent'
+										: 'bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-250 dark:hover:bg-slate-700 hover:shadow-xs'
+								}`}
+							>
+								<ChevronLeft className="w-4 h-4" />
+								<span>Voltar</span>
+							</button>
 
-                        <div className="flex flex-col sm:flex-row gap-4 justify-center items-stretch sm:items-center">
-                            <button
-                                onClick={() => {
-                                    setCurrentStep(questions.length - 1);
-                                    setCurrentAnswer(answers[questions[questions.length - 1].id]);
-                                    setShowSummary(false);
-                                }}
-                                className="inline-flex items-center justify-center gap-2 bg-gray-200 text-gray-800 px-6 md:px-8 py-3 md:py-4 rounded-xl font-bold text-sm md:text-base hover:bg-gray-300 transition-all duration-300"
-                            >
-                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                                </svg>
-                                Voltar
-                            </button>
+							<button
+								onClick={resetQuiz}
+								className="text-slate-500 dark:text-slate-400 hover:text-slate-850 dark:hover:text-white font-bold transition-colors text-xs py-2.5 cursor-pointer flex items-center gap-1.5 justify-center"
+							>
+								<RotateCcw className="w-3.5 h-3.5" />
+								<span>Reiniciar</span>
+							</button>
 
-                            <button
-                                onClick={() => setShowResults(true)}
-                                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 md:px-12 py-3 md:py-4 rounded-xl font-bold text-sm md:text-base shadow-lg hover:shadow-xl transition-all duration-300"
-                            >
-                                <span>✨</span>
-                                Ver Recomendações
-                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                )}
+							<button
+								onClick={handleNext}
+								disabled={currentAnswer === null}
+								className={`inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all duration-300 cursor-pointer ${
+									currentAnswer === null
+										? 'bg-slate-100 dark:bg-slate-900 text-slate-400 dark:text-slate-600 cursor-not-allowed border border-transparent'
+										: 'bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-0'
+								}`}
+							>
+								<span>{currentStep === questions.length - 1 ? 'Revisar' : 'Avançar'}</span>
+								<ChevronRight className="w-4 h-4" />
+							</button>
+						</div>
+					</div>
+				)}
 
-                {/* Results */}
-                {showResults && recommendations.length > 0 && (
-                    <div className="space-y-8">
-                        <div className="bg-linear-to-br from-green-50 to-emerald-50 rounded-3xl shadow-xl p-6 md:p-12 border-2 border-green-200">
-                            <div className="text-center mb-8">
-                                <div className="inline-flex items-center justify-center w-16 h-16 md:w-20 md:h-20 bg-green-500 rounded-full mb-4">
-                                    <span className="text-3xl md:text-4xl">✨</span>
-                                </div>
-                                <h2 className="text-2xl md:text-4xl font-bold text-gray-900 mb-4">
-                                    Recomendações para seu Projeto
-                                </h2>
-                                <p className="text-base md:text-lg text-gray-700 max-w-2xl mx-auto">
-                                    Baseado nas suas respostas, estas são as melhores opções de ESP32 para você:
-                                </p>
-                            </div>
+				{/* STEP 2: Choice Summary */}
+				{showSummary && !showResults && (
+					<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl border border-slate-200/60 dark:border-slate-800/80 p-6 md:p-10 max-w-3xl mx-auto shadow-2xl transition-all duration-300">
+						<div className="text-center mb-8">
+							<div className="inline-flex items-center justify-center w-14 h-14 bg-purple-500/10 text-purple-600 dark:text-purple-400 rounded-full mb-4 border border-purple-500/20">
+								<Award className="w-6 h-6" />
+							</div>
+							<h2 className="text-xl md:text-2xl font-display font-extrabold text-slate-850 dark:text-slate-100 mb-2">
+								Resumo das suas Configurações
+							</h2>
+							<p className="text-xs text-slate-450 dark:text-slate-400 max-w-xl mx-auto leading-relaxed">
+								Revise suas escolhas de arquitetura abaixo. Você pode ajustar qualquer especificação individual antes de processar as recomendações.
+							</p>
+						</div>
 
-                            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-                                {topRecommendations.map(([seriesKey, score], index) => {
-                                    const serie = seriesData[seriesKey];
-                                    const badges = ["🥇 Melhor Opção", "🥈 Segunda Opção", "🥉 Terceira Opção"];
-                                    const matchReasons = allReasons[seriesKey] || [];
-                                    
-                                    return (
-                                        <div
-                                            key={seriesKey}
-                                            className="bg-white rounded-2xl shadow-lg border-2 border-gray-100 overflow-hidden hover:shadow-2xl transition-all duration-300 flex flex-col h-full"
-                                        >
-                                            <div className="p-4 md:p-6" style={{ backgroundColor: `${serie.cor}15` }}>
-                                                <div className="text-center mb-4">
-                                                    <span className="inline-block px-3 py-1 bg-white rounded-full text-xs md:text-sm font-bold text-gray-800 mb-3">
-                                                        {badges[index]}
-                                                    </span>
-                                                    <div className="text-4xl md:text-5xl mb-3">{serie.icone}</div>
-                                                    <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">{seriesKey}</h3>
-                                                    <p className="text-xs md:text-sm text-gray-600 min-h-12">{serie.descricao}</p>
-                                                    <div className="mt-3 px-3 py-1 bg-white rounded-full inline-block">
-                                                        <span className="text-xs font-semibold text-gray-600">Score: </span>
-                                                        <span className="text-sm font-bold" style={{ color: serie.cor }}>{score}</span>
-                                                    </div>
-                                                </div>
-                                            </div>
+						{/* Double Column summary cards */}
+						<div className="grid md:grid-cols-2 gap-3 mb-8 max-w-2xl mx-auto">
+							{questions.map((question) => {
+								const answer = answers[question.id];
+								const selectedOption = question.options.find(opt => opt.value === answer);
+								
+								return (
+									<div key={question.id} className="bg-slate-50/50 dark:bg-slate-900/20 rounded-xl p-4 border border-slate-200/60 dark:border-slate-800/80 hover:shadow-xs transition-all flex justify-between items-center gap-3">
+										<div className="flex-1 min-w-0">
+											<h3 className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1 truncate select-none">
+												{question.id.replace('connectivity', 'conectividade').replace('hardware', 'periféricos').replace('power', 'alimentação').toUpperCase()}
+											</h3>
+											{selectedOption && (
+												<div className="flex items-center gap-2">
+													<div className="w-7 h-7 rounded-lg bg-purple-500/10 dark:bg-purple-400/10 flex items-center justify-center shrink-0">
+														{getOptionIcon(question.id, answer)}
+													</div>
+													<span className="text-xs font-extrabold text-purple-700 dark:text-purple-450 truncate">
+														{selectedOption.label}
+													</span>
+												</div>
+											)}
+										</div>
+										<button
+											onClick={() => {
+												const questionIndex = questions.findIndex(q => q.id === question.id);
+												setCurrentStep(questionIndex);
+												setCurrentAnswer(answers[question.id]);
+												setShowSummary(false);
+											}}
+											className="p-2 border border-slate-200 dark:border-slate-800 hover:border-purple-500 dark:hover:border-purple-400 bg-white dark:bg-slate-900 hover:bg-purple-50 dark:hover:bg-purple-950/20 rounded-lg text-slate-400 hover:text-purple-650 dark:hover:text-purple-400 transition-all cursor-pointer shrink-0"
+											title="Editar esta resposta"
+										>
+											<Edit2 className="w-3.5 h-3.5" />
+										</button>
+									</div>
+								);
+							})}
+						</div>
 
-                                            {/* Match Reasons */}
-                                            {matchReasons.length > 0 && (
-                                                <div className="px-4 md:px-6 py-4 bg-gray-50 border-t border-b border-gray-200">
-                                                    <h4 className="text-xs font-bold text-gray-700 mb-2 uppercase">Por que esta série?</h4>
-                                                    <ul className="space-y-1.5">
-                                                        {matchReasons.slice(0, 5).map((reason, idx) => (
-                                                            <li key={idx} className="text-xs text-gray-700 leading-relaxed">
-                                                                {reason}
-                                                            </li>
-                                                        ))}
-                                                        {matchReasons.length > 5 && (
-                                                            <li className="text-xs text-gray-500 italic">
-                                                                +{matchReasons.length - 5} mais vantagens
-                                                            </li>
-                                                        )}
-                                                    </ul>
-                                                </div>
-                                            )}
+						<div className="flex flex-col sm:flex-row gap-3 justify-center items-stretch sm:items-center border-t border-slate-200/60 dark:border-slate-800/60 pt-6">
+							<button
+								onClick={() => {
+									setCurrentStep(questions.length - 1);
+									setCurrentAnswer(answers[questions[questions.length - 1].id]);
+									setShowSummary(false);
+								}}
+								className="inline-flex items-center justify-center gap-2 bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider hover:bg-slate-250 transition-all duration-300 cursor-pointer"
+							>
+								<ChevronLeft className="w-4 h-4" />
+								<span>Voltar</span>
+							</button>
 
-                                            <div className="p-4 md:p-6 space-y-2 bg-white grow">
-                                                <div className="flex justify-between text-xs md:text-sm">
-                                                    <span className="text-gray-600">Arquitetura:</span>
-                                                    <span className="font-semibold text-gray-900">{serie.arquitetura.split(' ')[0]}</span>
-                                                </div>
-                                                <div className="flex justify-between text-xs md:text-sm">
-                                                    <span className="text-gray-600">Núcleos:</span>
-                                                    <span className="font-semibold text-gray-900">{serie.nucleos}</span>
-                                                </div>
-                                                <div className="flex justify-between text-xs md:text-sm">
-                                                    <span className="text-gray-600">Frequência:</span>
-                                                    <span className="font-semibold text-gray-900">{serie.frequencia}</span>
-                                                </div>
-                                                <div className="flex justify-between text-xs md:text-sm">
-                                                    <span className="text-gray-600">SRAM:</span>
-                                                    <span className="font-semibold text-gray-900">{serie.memoria_sram}</span>
-                                                </div>
-                                                <div className="flex justify-between text-xs md:text-sm">
-                                                    <span className="text-gray-600">GPIO:</span>
-                                                    <span className="font-semibold text-gray-900">{serie.gpio}</span>
-                                                </div>
-                                            </div>
+							<button
+								onClick={() => setShowResults(true)}
+								className="inline-flex items-center justify-center gap-2 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white px-8 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider shadow-lg hover:shadow-purple-500/20 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300 cursor-pointer"
+							>
+								<Sparkles className="w-4 h-4" />
+								<span>Verificar Recomendações</span>
+							</button>
+						</div>
+					</div>
+				)}
 
-                                            <div className="p-4 md:p-6 pt-0 mt-auto">
-                                                <Link
-                                                    href={`/series/${seriesKey}`}
-                                                    className="block w-full text-center py-2.5 md:py-3 rounded-xl font-bold text-white text-sm md:text-base transition-all duration-300 hover:shadow-lg"
-                                                    style={{ backgroundColor: serie.cor }}
-                                                >
-                                                    Ver Detalhes
-                                                </Link>
-                                            </div>
-                                        </div>
-                                    );
-                                })}
-                            </div>
+				{/* STEP 3: Premium Podium & Results */}
+				{showResults && recommendations.length > 0 && (
+					<div className="space-y-12 animate-fadeIn">
+						
+						{/* Desktop Podium Layout */}
+						<div className="hidden lg:block">
+							<div className="grid grid-cols-3 gap-6 items-end max-w-6xl mx-auto pt-8 pb-6">
+								
+								{desktopPodium.map((recommendation) => {
+									const [seriesKey, score] = recommendation;
+									const serie = seriesData[seriesKey];
+									const matchReasons = allReasons[seriesKey] || [];
+									const rankIdx = topThree.findIndex(([key]) => key === seriesKey);
+									
+									const rankConfig = [
+										{
+											badge: "🥇 1º Recomendado",
+											cardClass: "border-amber-500/80 dark:border-amber-400 bg-linear-to-b from-amber-500/5 to-transparent shadow-[0_0_40px_rgba(245,158,11,0.25)] min-h-[580px] z-10 scale-[1.03]",
+											badgeClass: "text-amber-700 bg-amber-500/10 border-amber-500/20 dark:text-amber-400 dark:bg-amber-500/10",
+											scoreClass: "text-amber-600 dark:text-amber-400"
+										},
+										{
+											badge: "🥈 2º Recomendado",
+											cardClass: "border-slate-200/80 dark:border-slate-800 bg-linear-to-b from-slate-500/5 to-transparent min-h-[540px] opacity-95 hover:opacity-100",
+											badgeClass: "text-slate-650 bg-slate-500/10 border-slate-500/20 dark:text-slate-350 dark:bg-slate-850",
+											scoreClass: "text-slate-500 dark:text-slate-300"
+										},
+										{
+											badge: "🥉 3º Recomendado",
+											cardClass: "border-amber-800/40 dark:border-slate-850/80 bg-linear-to-b from-amber-800/5 to-transparent min-h-[540px] opacity-95 hover:opacity-100",
+											badgeClass: "text-amber-800 bg-amber-800/10 border-amber-800/20 dark:text-amber-450 dark:bg-slate-850",
+											scoreClass: "text-amber-700 dark:text-amber-500"
+										}
+									][rankIdx];
 
-                            {/* Other Compatible Options */}
-                            {otherRecommendations.length > 0 && (
-                                <div className="bg-gray-50 rounded-2xl p-6 md:p-8 border-2 border-gray-200 mb-8">
-                                    <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-4 text-center">
-                                        Outras Opções Compatíveis
-                                    </h3>
-                                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                                        {otherRecommendations.map(([seriesKey, score]) => {
-                                            const serie = seriesData[seriesKey];
-                                            return (
-                                                <div
-                                                    key={seriesKey}
-                                                    className="bg-white rounded-xl p-4 border border-gray-200 hover:shadow-lg transition-all duration-300"
-                                                >
-                                                    <div className="text-center mb-3">
-                                                        <div className="text-3xl mb-2">{serie.icone}</div>
-                                                        <h4 className="text-lg font-bold text-gray-900">{seriesKey}</h4>
-                                                        <span className="text-xs text-gray-600">Score: {score}</span>
-                                                    </div>
-                                                    <Link
-                                                        href={`/series/${seriesKey}`}
-                                                        className="block w-full text-center py-2 rounded-lg font-semibold text-white text-sm transition-all duration-300 hover:shadow-md"
-                                                        style={{ backgroundColor: serie.cor }}
-                                                    >
-                                                        Ver Detalhes
-                                                    </Link>
-                                                </div>
-                                            );
-                                        })}
-                                    </div>
-                                </div>
-                            )}
+									return (
+										<div
+											key={seriesKey}
+											className={`relative flex flex-col bg-white/70 dark:bg-slate-900/40 backdrop-blur-xl border rounded-3xl overflow-hidden transition-all duration-500 hover:scale-[1.05] hover:shadow-2xl hover:z-20 ${rankConfig.cardClass}`}
+										>
+											{/* Top Color Band */}
+											<div className="h-1 w-full shrink-0" style={{ backgroundColor: serie.cor }} />
 
-                            <div className="flex flex-col sm:flex-row gap-4 justify-center items-stretch sm:items-center">
-                                <Link
-                                    href="/comparacao"
-                                    className="inline-flex items-center justify-center gap-2 bg-white text-gray-800 px-6 md:px-8 py-3 md:py-4 rounded-xl font-bold text-sm md:text-base shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-500 transition-all duration-300"
-                                >
-                                    <span>📊</span>
-                                    <span>Comparar Recomendações</span>
-                                </Link>
+											<div className="p-6 pb-0 flex-1 flex flex-col justify-between">
+												<div>
+													<div className="text-center mb-4 select-none">
+														<span className={`inline-block px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border ${rankConfig.badgeClass}`}>
+															{rankConfig.badge}
+														</span>
+													</div>
 
-                                <button
-                                    onClick={resetQuiz}
-                                    className="inline-flex items-center justify-center gap-2 bg-gray-200 text-gray-800 px-6 md:px-8 py-3 md:py-4 rounded-xl font-bold text-sm md:text-base hover:bg-gray-300 transition-all duration-300"
-                                >
-                                    <span>🔄</span>
-                                    <span>Fazer Novamente</span>
-                                </button>
-                            </div>
-                        </div>
+													<div className="text-center mb-6">
+														<div className="text-5xl mb-3 transform hover:rotate-6 transition-transform select-none">{serie.icone}</div>
+														<h3 className="text-xl font-display font-extrabold text-slate-850 dark:text-slate-100 mb-1 leading-none">
+															{seriesKey}
+														</h3>
+														<p className="text-[10px] text-slate-400 dark:text-slate-500 font-semibold uppercase tracking-wider truncate">
+															{serie.nome_completo}
+														</p>
+														
+														<div className="mt-3.5 inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800 shadow-xs">
+															<span className="text-[9px] font-bold text-slate-450 uppercase tracking-wider">Afinidade:</span>
+															<span className={`text-xs font-extrabold ${rankConfig.scoreClass}`}>
+																{score} pts
+															</span>
+														</div>
+													</div>
 
-                        {/* Additional Resources */}
-                        <div className="bg-white rounded-3xl shadow-xl p-8 md:p-10 border-2 border-gray-100">
-                            <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
-                                Próximos Passos
-                            </h3>
-                            <div className="grid md:grid-cols-3 gap-6">
-                                <Link
-                                    href="/catalogo"
-                                    className="group bg-blue-50 border-2 border-blue-200 rounded-2xl p-6 hover:shadow-lg transition-all duration-300"
-                                >
-                                    <div className="text-4xl mb-3">🛒</div>
-                                    <h4 className="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
-                                        Ver Catálogo de Placas
-                                    </h4>
-                                    <p className="text-sm text-gray-600">
-                                        Encontre placas de desenvolvimento verificadas
-                                    </p>
-                                </Link>
+													{/* Specifications Checklist */}
+													<div className="space-y-2 border-t border-slate-200/50 dark:border-slate-850/60 pt-4 mb-6 select-none">
+														<h4 className="text-[9px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2.5">Principais Vantagens</h4>
+														<ul className="space-y-2">
+															{matchReasons.slice(0, 3).map((reason, idx) => (
+																<li key={idx} className="flex items-start gap-2 text-xs leading-normal text-slate-600 dark:text-slate-350">
+																	<CheckCircle className="w-3.5 h-3.5 text-emerald-500 dark:text-emerald-450 mt-0.5 shrink-0" />
+																	<span>{reason}</span>
+																</li>
+															))}
+															{matchReasons.length > 3 && (
+																<li className="text-[10px] text-slate-400 dark:text-slate-500 italic pl-5.5">
+																	+{matchReasons.length - 3} outros requisitos atendidos
+																</li>
+															)}
+														</ul>
+													</div>
+												</div>
 
-                                <Link
-                                    href="/frameworks"
-                                    className="group bg-purple-50 border-2 border-purple-200 rounded-2xl p-6 hover:shadow-lg transition-all duration-300"
-                                >
-                                    <div className="text-4xl mb-3">⚡</div>
-                                    <h4 className="text-lg font-bold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">
-                                        Explorar Frameworks
-                                    </h4>
-                                    <p className="text-sm text-gray-600">
-                                        Conheça ESP-IDF, Arduino, MicroPython e mais
-                                    </p>
-                                </Link>
+												{/* Spec Mini Badges */}
+												<div className="grid grid-cols-2 gap-2 bg-slate-50/50 dark:bg-slate-950/40 p-2.5 rounded-xl border border-slate-100 dark:border-slate-800/40 mb-4 select-none">
+													<div className="flex flex-col">
+														<span className="text-[8px] font-bold uppercase text-slate-400 tracking-wider">Frequência</span>
+														<span className="text-xs font-extrabold text-slate-700 dark:text-slate-200 truncate">{serie.frequencia}</span>
+													</div>
+													<div className="flex flex-col">
+														<span className="text-[8px] font-bold uppercase text-slate-400 tracking-wider">GPIOs Físicas</span>
+														<span className="text-xs font-extrabold text-slate-700 dark:text-slate-200 truncate">{serie.gpio} pinos</span>
+													</div>
+												</div>
+											</div>
 
-                                <Link
-                                    href="/glossario"
-                                    className="group bg-pink-50 border-2 border-pink-200 rounded-2xl p-6 hover:shadow-lg transition-all duration-300"
-                                >
-                                    <div className="text-4xl mb-3">📚</div>
-                                    <h4 className="text-lg font-bold text-gray-900 mb-2 group-hover:text-pink-600 transition-colors">
-                                        Consultar Glossário
-                                    </h4>
-                                    <p className="text-sm text-gray-600">
-                                        Entenda termos técnicos e especificações
-                                    </p>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                )}
+											{/* Ver Documentação CTA Button */}
+											<div className="px-5 pb-5 mt-auto">
+												<Link
+													href={`/series/${seriesKey}`}
+													className="flex items-center justify-center gap-1.5 w-full text-center py-3 rounded-xl font-bold text-white text-xs uppercase tracking-wider hover:shadow-lg transition-all duration-300 active:scale-[0.98]"
+													style={{ backgroundColor: serie.cor }}
+												>
+													<span>Ver Documentação</span>
+													<ExternalLink className="w-3.5 h-3.5" />
+												</Link>
+											</div>
+										</div>
+									);
+								})}
+							</div>
+						</div>
 
-                {/* No Results Found */}
-                {showResults && recommendations.length === 0 && (
-                    <div className="bg-white rounded-3xl shadow-xl p-8 md:p-12 border-2 border-gray-100">
-                        <div className="text-center mb-8">
-                            <div className="inline-flex items-center justify-center w-20 h-20 bg-yellow-100 rounded-full mb-4">
-                                <span className="text-4xl">🤔</span>
-                            </div>
-                            <h2 className="text-2xl md:text-4xl font-bold text-gray-900 mb-4">
-                                Nenhuma Correspondência Perfeita
-                            </h2>
-                            <p className="text-base md:text-lg text-gray-600 max-w-2xl mx-auto mb-6">
-                                Não encontramos uma série ESP32 que atenda completamente aos seus requisitos. 
-                                Isso pode acontecer quando você combina requisitos que são mutuamente exclusivos ou muito específicos.
-                            </p>
-                            <div className="bg-blue-50 border-2 border-blue-200 rounded-2xl p-6 max-w-2xl mx-auto mb-8">
-                                <h3 className="text-lg font-bold text-gray-900 mb-3">💡 Sugestões:</h3>
-                                <ul className="text-left space-y-2 text-gray-700">
-                                    <li className="flex items-start gap-2">
-                                        <span className="text-blue-600 font-bold">•</span>
-                                        <span>Revise seus requisitos e considere quais são realmente essenciais</span>
-                                    </li>
-                                    <li className="flex items-start gap-2">
-                                        <span className="text-blue-600 font-bold">•</span>
-                                        <span>Algumas combinações (como Wi-Fi 6 + aceleradores de IA) podem requerer séries específicas</span>
-                                    </li>
-                                    <li className="flex items-start gap-2">
-                                        <span className="text-blue-600 font-bold">•</span>
-                                        <span>Considere usar múltiplos módulos ESP32 para diferentes funções do seu projeto</span>
-                                    </li>
-                                </ul>
-                            </div>
-                            <div className="flex flex-col sm:flex-row gap-4 justify-center items-stretch sm:items-center">
-                                <button
-                                    onClick={resetQuiz}
-                                    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 transition-all duration-300"
-                                >
-                                    <span>🔄</span>
-                                    <span>Tentar Novamente</span>
-                                </button>
-                                <Link
-                                    href="/comparacao"
-                                    className="inline-flex items-center justify-center gap-2 bg-white text-gray-800 px-8 py-4 rounded-xl font-bold border-2 border-gray-200 hover:border-purple-500 transition-all duration-300"
-                                >
-                                    <span>📊</span>
-                                    <span>Ver Todas as Séries</span>
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </main>
+						{/* Stacked Layout for mobile */}
+						<div className="lg:hidden space-y-6 max-w-xl mx-auto">
+							<h3 className="text-sm font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest text-center select-none mb-1">Grade de Resultados</h3>
+							{topThree.map(([seriesKey, score], index) => {
+								const serie = seriesData[seriesKey];
+								const matchReasons = allReasons[seriesKey] || [];
+								const mobileBadges = ["🥇 1ª Recomendação", "🥈 2ª Recomendação", "🥉 3ª Recomendação"];
+								const isFirst = index === 0;
 
-            <Footer />
-        </div>
-    );
+								return (
+									<div
+										key={seriesKey}
+										className={`bg-white/70 dark:bg-slate-900/40 backdrop-blur-xl border rounded-3xl overflow-hidden shadow-xl flex flex-col ${
+											isFirst ? "border-amber-500 dark:border-amber-400" : "border-slate-200/80 dark:border-slate-800"
+										}`}
+									>
+										<div className="p-5 flex-1">
+											<div className="flex justify-between items-center mb-3.5">
+												<span className={`px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider ${
+													isFirst 
+														? "text-amber-700 bg-amber-500/10 dark:text-amber-400 border border-amber-500/20" 
+														: "text-slate-650 bg-slate-500/10 dark:text-slate-350 dark:bg-slate-850 border border-transparent"
+												}`}>
+													{mobileBadges[index]}
+												</span>
+												<span className="text-[10px] font-bold text-slate-450">Score: <strong className="text-xs text-purple-650 dark:text-purple-400 font-extrabold">{score} pts</strong></span>
+											</div>
+
+											<div className="flex gap-4 items-start mb-4">
+												<span className="text-4xl select-none shrink-0">{serie.icone}</span>
+												<div>
+													<h4 className="text-base font-bold text-slate-850 dark:text-slate-100 leading-tight">{seriesKey}</h4>
+													<p className="text-xs text-slate-450 dark:text-slate-400 leading-snug line-clamp-2 mt-1">{serie.descricao}</p>
+												</div>
+											</div>
+
+											<div className="space-y-1.5 border-t border-slate-150 dark:border-slate-850/60 pt-3 select-none">
+												{matchReasons.slice(0, 3).map((reason, idx) => (
+													<div key={idx} className="flex gap-2 items-start text-xs text-slate-600 dark:text-slate-350">
+														<CheckCircle className="w-3.5 h-3.5 text-emerald-500 dark:text-emerald-450 mt-0.5 shrink-0" />
+														<span>{reason}</span>
+													</div>
+												))}
+											</div>
+										</div>
+
+										<Link
+											href={`/series/${seriesKey}`}
+											className="w-full text-center py-3.5 font-bold text-white text-xs uppercase tracking-wider block"
+											style={{ backgroundColor: serie.cor }}
+										>
+											Ver Detalhes do Chip
+										</Link>
+									</div>
+								);
+							})}
+						</div>
+
+						{/* Other options */}
+						{otherRecommendations.length > 0 && (
+							<div className="bg-slate-50/50 dark:bg-slate-900/10 backdrop-blur-xl rounded-3xl p-6 md:p-8 border border-slate-200/50 dark:border-slate-850/50 max-w-6xl mx-auto shadow-inner">
+								<h3 className="text-lg font-display font-extrabold text-slate-850 dark:text-slate-150 mb-6 text-center select-none">
+									Outras Opções Compatíveis
+								</h3>
+								<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+									{otherRecommendations.map(([seriesKey, score]) => {
+										const serie = seriesData[seriesKey];
+										return (
+											<div
+												key={seriesKey}
+												className="bg-white/80 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800/80 rounded-2xl p-4 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 flex flex-col justify-between"
+											>
+												<div className="text-center mb-4">
+													<div className="text-3xl mb-2 select-none">{serie.icone}</div>
+													<h4 className="text-xs font-bold text-slate-850 dark:text-slate-250 truncate leading-none">{seriesKey}</h4>
+													<span className="text-[10px] text-slate-450 dark:text-slate-500 font-semibold">Afinidade: {score} pts</span>
+												</div>
+												<Link
+													href={`/series/${seriesKey}`}
+													className="block w-full text-center py-2.5 rounded-xl font-bold text-white text-[10px] uppercase tracking-wider transition-all duration-300 hover:shadow-xs active:scale-95"
+													style={{ backgroundColor: serie.cor }}
+												>
+													Ver Detalhes
+												</Link>
+											</div>
+										);
+									})}
+								</div>
+							</div>
+						)}
+
+						{/* Bottom navigation buttons */}
+						<div className="flex flex-col sm:flex-row gap-3 justify-center items-center max-w-2xl mx-auto border-t border-slate-200 dark:border-slate-850/60 pt-8 select-none">
+							<Link
+								href="/comparacao"
+								className="inline-flex items-center justify-center gap-2 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 px-6 py-3 rounded-xl font-bold text-xs uppercase tracking-wider shadow-xs border border-slate-200 dark:border-slate-800 hover:border-purple-500 dark:hover:border-purple-400 hover:text-purple-600 dark:hover:text-purple-400 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer w-full sm:w-auto"
+							>
+								<SlidersHorizontal className="w-3.5 h-3.5" />
+								<span>Comparar Lado a Lado</span>
+							</Link>
+
+							<button
+								onClick={resetQuiz}
+								className="inline-flex items-center justify-center gap-2 bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-6 py-3 rounded-xl font-bold text-xs uppercase tracking-wider hover:bg-slate-250 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer active:scale-95 w-full sm:w-auto"
+							>
+								<RotateCcw className="w-3.5 h-3.5" />
+								<span>Refazer Quiz</span>
+							</button>
+						</div>
+
+						{/* Secondary showcase tools */}
+						<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl p-6 md:p-8 max-w-6xl mx-auto shadow-2xl">
+							<h3 className="text-lg font-display font-extrabold text-slate-850 dark:text-slate-100 mb-6 text-center select-none">
+								Próximos Passos de Desenvolvimento
+							</h3>
+							<div className="grid md:grid-cols-3 gap-6">
+								<Link
+									href="/catalogo"
+									className="group bg-blue-500/5 dark:bg-blue-950/10 border border-blue-500/10 dark:border-blue-500/20 hover:border-blue-500/40 dark:hover:border-blue-400/40 rounded-2xl p-5 hover:shadow-lg transition-all duration-300"
+								>
+									<div className="w-9 h-9 rounded-xl bg-blue-500/10 dark:bg-blue-400/15 text-blue-500 dark:text-blue-400 flex items-center justify-center mb-4 shrink-0 shadow-xs select-none">
+										<ShoppingBag className="w-4 h-4" />
+									</div>
+									<h4 className="text-sm font-bold text-slate-850 dark:text-slate-200 mb-1.5 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+										Catálogo de Placas
+									</h4>
+									<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
+										Explore placas de desenvolvimento oficiais e módulos contendo o silício recomendado com links seguros de compra.
+									</p>
+								</Link>
+
+								<Link
+									href="/frameworks"
+									className="group bg-purple-500/5 dark:bg-purple-950/10 border border-purple-500/10 dark:border-purple-500/20 hover:border-purple-500/40 dark:hover:border-purple-400/40 rounded-2xl p-5 hover:shadow-lg transition-all duration-300"
+								>
+									<div className="w-9 h-9 rounded-xl bg-purple-500/10 dark:bg-purple-400/15 text-purple-500 dark:text-purple-400 flex items-center justify-center mb-4 shrink-0 shadow-xs select-none">
+										<Cpu className="w-4 h-4" />
+									</div>
+									<h4 className="text-sm font-bold text-slate-850 dark:text-slate-200 mb-1.5 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
+										Explorar SDKs & Frameworks
+									</h4>
+									<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
+										Descubra qual SDK oficial da Espressif (ESP-IDF, Arduino Core, MicroPython) oferece a melhor pilha de drivers.
+									</p>
+								</Link>
+
+								<Link
+									href="/glossario"
+									className="group bg-pink-500/5 dark:bg-pink-950/10 border border-pink-500/10 dark:border-pink-500/20 hover:border-pink-500/40 dark:hover:border-pink-400/40 rounded-2xl p-5 hover:shadow-lg transition-all duration-300"
+								>
+									<div className="w-9 h-9 rounded-xl bg-pink-500/10 dark:bg-pink-400/15 text-pink-500 dark:text-pink-400 flex items-center justify-center mb-4 shrink-0 shadow-xs select-none">
+										<BookOpen className="w-4 h-4" />
+									</div>
+									<h4 className="text-sm font-bold text-slate-850 dark:text-slate-200 mb-1.5 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors">
+										Glossário de Parâmetros
+									</h4>
+									<p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
+										Ficou em dúvida sobre termos de hardware como ULP, SRAM RTC, JTAG ou Matter? Consulte definições rápidas de engenharia.
+									</p>
+								</Link>
+							</div>
+						</div>
+					</div>
+				)}
+
+				{/* STEP 3B: No Results Found */}
+				{showResults && recommendations.length === 0 && (
+					<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl border border-slate-200/60 dark:border-slate-800/80 p-8 md:p-10 max-w-2xl mx-auto shadow-2xl transition-all duration-300">
+						<div className="text-center mb-8">
+							<div className="inline-flex items-center justify-center w-16 h-16 bg-amber-500/10 text-amber-600 dark:text-amber-400 rounded-full mb-4 border border-amber-500/20">
+								<HelpCircle className="w-8 h-8" />
+							</div>
+							<h2 className="text-xl md:text-2xl font-display font-extrabold text-slate-850 dark:text-slate-100 mb-3">
+								Sem Correspondência Exata
+							</h2>
+							<p className="text-xs text-slate-500 dark:text-slate-400 max-w-xl mx-auto mb-6 leading-relaxed">
+								Não foi possível encontrar um único microcontrolador ESP32 que atenda simultaneamente a todos os critérios. Isso ocorre quando requisitamos combinações extremas (ex: Ethernet industrial cabeada + BLE portátil com economia de bateria ultra-baixa).
+							</p>
+
+							<div className="bg-slate-50/50 dark:bg-slate-950/40 border border-slate-200/60 dark:border-slate-850 p-5 rounded-2xl max-w-xl mx-auto mb-6 text-left select-none">
+								<h3 className="text-xs font-bold text-slate-800 dark:text-slate-200 mb-2">💡 Dicas Rápidas de Seleção:</h3>
+								<ul className="space-y-2 text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
+									<li className="flex items-start gap-2">
+										<span className="text-purple-500 font-extrabold">•</span>
+										<span>Reconsidere os barramentos mais pesados (USB Nativo ou Display/Câmera) e veja se podem ser depurados via Serial UART comum.</span>
+									</li>
+									<li className="flex items-start gap-2">
+										<span className="text-purple-500 font-extrabold">•</span>
+										<span>Se o foco principal for Inteligência Artificial e capturar imagens pesadas, a série recomendada primária é a **ESP32-S3**.</span>
+									</li>
+								</ul>
+							</div>
+							
+							<div className="flex flex-col sm:flex-row gap-3 justify-center items-stretch sm:items-center">
+								<button
+									onClick={resetQuiz}
+									className="inline-flex items-center justify-center gap-2 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white px-6 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer active:scale-95"
+								>
+									<RotateCcw className="w-4 h-4" />
+									<span>Refazer Quiz</span>
+								</button>
+								
+								<Link
+									href="/comparacao"
+									className="inline-flex items-center justify-center gap-2 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-350 px-6 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider border border-slate-200 dark:border-slate-800 hover:border-purple-500 dark:hover:border-purple-400 hover:text-purple-600 dark:hover:text-purple-400 transition-all duration-300 cursor-pointer"
+								>
+									<SlidersHorizontal className="w-4 h-4" />
+									<span>Ver Grade Completa</span>
+								</Link>
+							</div>
+						</div>
+					</div>
+				)}
+			</main>
+
+			<Footer />
+		</div>
+	);
 }
diff --git a/app/series/[key]/page.jsx b/app/series/[key]/page.jsx
index f8b8bcc..5e80660 100644
--- a/app/series/[key]/page.jsx
+++ b/app/series/[key]/page.jsx
@@ -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&nbsp;
-                            <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&nbsp;
+							<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,
+	}));
 }
\ No newline at end of file
diff --git a/app/series/page.jsx b/app/series/page.jsx
index 0eb1d52..a36d1f3 100644
--- a/app/series/page.jsx
+++ b/app/series/page.jsx
@@ -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>
+	);
 }
\ No newline at end of file
diff --git a/app/sobre/page.jsx b/app/sobre/page.jsx
index 21a030c..2074f5e 100644
--- a/app/sobre/page.jsx
+++ b/app/sobre/page.jsx
@@ -1,227 +1,262 @@
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import Link from "next/link";
+import { 
+	Languages, 
+	GitCompare, 
+	Globe, 
+	Code, 
+	Target, 
+	HelpCircle, 
+	Users, 
+	Accessibility,
+	ArrowLeft,
+	Award,
+	BookOpen,
+	Compass,
+	Terminal,
+	Layers
+} from "lucide-react";
 
 export default function Sobre() {
-    const features = [
-        { icon: "📚", title: "Interface em Português", desc: "Organização e apresentação de dados técnicos totalmente em português." },
-        { icon: "🔧", title: "Comparações Visuais", desc: "Tabelas comparativas e diagramas para facilitar a escolha da série ideal." },
-        { icon: "🌐", title: "Acesso Centralizado", desc: "Links diretos para documentação oficial, repositórios e exemplos." },
-        { icon: "♿", title: "Código Aberto", desc: "Projeto open-source com contribuições bem-vindas no GitHub." },
-    ];
+	const features = [
+		{ icon: <Languages className="w-6 h-6 text-purple-500" />, title: "Interface em Português", desc: "Organização e apresentação de dados técnicos totalmente em português." },
+		{ icon: <GitCompare className="w-6 h-6 text-blue-500" />, title: "Comparações Visuais", desc: "Tabelas comparativas e diagramas para facilitar a escolha da série ideal." },
+		{ icon: <Globe className="w-6 h-6 text-emerald-500" />, title: "Acesso Centralizado", desc: "Links diretos para documentação oficial, repositórios e exemplos." },
+		{ icon: <Code className="w-6 h-6 text-amber-500" />, title: "Código Aberto", desc: "Projeto open-source com contribuições bem-vindas no GitHub." },
+	];
 
-    return (
-        <div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen text-gray-800">
-            <a href="#conteudo" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-white focus:px-4 focus:py-2 focus:rounded-md focus:shadow focus:ring-2 focus:ring-purple-500">
-                Ir para o conteúdo
-            </a>
+	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">
+			<a href="#conteudo" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-white focus:px-4 focus:py-2 focus:rounded-md focus:shadow focus:ring-2 focus:ring-purple-500">
+				Ir para o conteúdo
+			</a>
 
-            <Header />
+			<Header />
 
-            <main id="conteudo" className="px-4 pt-12 pb-20 max-w-7xl mx-auto">
-                <header className="relative overflow-hidden rounded-3xl p-10 md:p-16 bg-linear-to-br from-blue-600 via-purple-600 to-pink-600 text-white shadow-2xl mb-12">
-                    <div className="absolute inset-0 bg-black/10"></div>
-                    <div className="relative z-10 max-w-4xl mx-auto">
-                        <h1 className="text-4xl md:text-6xl font-black leading-tight mb-6">
-                            Sobre o ESPDocs
-                        </h1>
+			<main id="conteudo" className="px-6 pt-16 pb-24 max-w-7xl mx-auto">
+				{/* Top Hero Heading Block */}
+				<header className="relative overflow-hidden rounded-3xl p-10 md:p-16 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 text-white shadow-2xl mb-12 select-none">
+					<div className="absolute inset-0 bg-black/10"></div>
+					<div className="relative z-10 max-w-4xl mx-auto">
+						<h1 className="text-4xl md:text-6xl font-display font-extrabold leading-tight mb-6">
+							Sobre o ESPDocs
+						</h1>
 
-                        <p className="text-lg md:text-xl opacity-95 max-w-3xl mb-8 leading-relaxed">
-                            Uma plataforma não oficial com interface em português que organiza
-                            informações técnicas do ESP32 e facilita o acesso à documentação oficial
-                            da Espressif. Feita por um entusiasta para a comunidade.
-                        </p>
+						<p className="text-sm md:text-base opacity-95 max-w-3xl mb-8 leading-relaxed font-semibold">
+							Uma plataforma não oficial com interface em português que organiza
+							informações técnicas do ESP32 e facilita o acesso à documentação oficial
+							da Espressif. Desenvolvida para a comunidade de hardware livre.
+						</p>
 
-                        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
-                            <Link href="/" className="inline-flex items-center justify-center gap-2 bg-white text-blue-700 px-6 py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1" aria-label="Voltar para a página inicial">
-                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-                                </svg>
-                                <span>Voltar</span>
-                            </Link>
+						<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
+							<Link href="/" className="inline-flex items-center justify-center gap-2 bg-white text-blue-700 px-6 py-3 rounded-xl font-bold shadow-lg hover:shadow-xl active:scale-98 transition-all" aria-label="Voltar para a página inicial">
+								<ArrowLeft className="w-5 h-5" />
+								<span>Início</span>
+							</Link>
 
-                            <a
-                                href="https://github.com/lucasrguerra/ESPDocs"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="inline-flex items-center justify-center gap-2 bg-white/10 backdrop-blur-sm border-2 border-white/30 text-white px-6 py-3 rounded-xl font-bold hover:bg-white/20 transition-all"
-                                aria-label="Abrir repositório do projeto no GitHub (abre em nova aba)"
-                            >
-                                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                                    <path d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1 1.6-.7 1.9-1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.5.4.9 1.1.9 2.2v3.2c0 .3.2.7.8.6A12 12 0 0012 .5z" fill="currentColor"/>
-                                </svg>
-                                <span>GitHub</span>
-                            </a>
-                        </div>
-                    </div>
-                </header>
+							<a
+								href="https://github.com/lucasrguerra/ESPDocs"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="inline-flex items-center justify-center gap-2 bg-white/10 backdrop-blur-xs border border-white/30 text-white px-6 py-3 rounded-xl font-bold hover:bg-white/20 active:scale-98 transition-all"
+								aria-label="Abrir repositório do projeto no GitHub (abre em nova aba)"
+							>
+								<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+									<path d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1 1.6-.7 1.9-1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.5.4.9 1.1.9 2.2v3.2c0 .3.2.7.8.6A12 12 0 0012 .5z" />
+								</svg>
+								<span>GitHub</span>
+							</a>
+						</div>
+					</div>
+				</header>
 
-                <div className="mt-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
-                    <section className="lg:col-span-2 space-y-8">
-                        <article className="bg-white rounded-3xl p-8 shadow-lg border-2 border-gray-100 hover:border-purple-200 transition-colors">
-                            <div className="flex items-center gap-3 mb-4">
-                                <div className="w-12 h-12 bg-linear-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
-                                    <span className="text-2xl">🎯</span>
-                                </div>
-                                <h2 className="text-3xl font-bold text-gray-900">Missão</h2>
-                            </div>
-                            <p className="text-gray-700 leading-relaxed text-base">
-                                Facilitar o acesso e a compreensão do ecossistema ESP32 através de uma
-                                interface em português que organiza especificações técnicas, compara séries,
-                                apresenta frameworks e centraliza links para a documentação oficial da
-                                Espressif. O objetivo é economizar tempo na busca por informações técnicas.
-                            </p>
-                        </article>
+				{/* Two columns details grid */}
+				<div className="mt-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
+					<section className="lg:col-span-2 space-y-8">
+						{/* Missao article */}
+						<article className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl p-8 shadow-xl border border-slate-200/60 dark:border-slate-800/80 hover:border-purple-500/20 dark:hover:border-purple-400/20 transition-all">
+							<div className="flex items-center gap-3.5 mb-5 select-none">
+								<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">
+									<Target className="w-6 h-6" />
+								</div>
+								<h2 className="text-2xl font-display font-extrabold text-slate-850 dark:text-slate-100">Missão</h2>
+							</div>
+							<p className="text-slate-650 dark:text-slate-350 leading-relaxed font-semibold text-sm">
+								Facilitar o acesso e a compreensão do ecossistema ESP32 através de uma
+								interface em português que organiza especificações técnicas, compara séries,
+								apresenta frameworks e centraliza links para a documentação oficial da
+								Espressif. O objetivo principal é otimizar o tempo no desenvolvimento de firmware e IoT.
+							</p>
+						</article>
 
-                        <article className="bg-white rounded-3xl p-8 shadow-lg border-2 border-gray-100">
-                            <div className="flex items-center gap-3 mb-4">
-                                <div className="w-12 h-12 bg-linear-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center">
-                                    <span className="text-2xl">❓</span>
-                                </div>
-                                <h2 className="text-3xl font-bold text-gray-900">Por que o ESPDocs?</h2>
-                            </div>
-                            <p className="text-gray-700 leading-relaxed mb-6 text-base">
-                                As informações sobre ESP32 estão dispersas em datasheets (PDF), repositórios
-                                GitHub e documentação oficial — tudo em inglês. O ESPDocs organiza essas
-                                informações em uma interface em português, facilitando comparações e consultas
-                                rápidas antes de mergulhar na documentação técnica oficial.
-                            </p>
+						{/* Por que o ESPDocs article */}
+						<article className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl p-8 shadow-xl border border-slate-200/60 dark:border-slate-800/80">
+							<div className="flex items-center gap-3.5 mb-5 select-none">
+								<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">
+									<HelpCircle className="w-6 h-6" />
+								</div>
+								<h2 className="text-2xl font-display font-extrabold text-slate-850 dark:text-slate-100">Por que o ESPDocs?</h2>
+							</div>
+							<p className="text-slate-650 dark:text-slate-350 leading-relaxed mb-6 font-semibold text-sm">
+								As informações sobre os microcontroladores ESP32 muitas vezes estão dispersas em datasheets densos, 
+								manuais de referência (TRM), repositórios secundários e documentação técnica — tudo inteiramente em inglês. 
+								O ESPDocs condensa e estrutura esses dados, auxiliando na triagem rápida antes de aprofundar na engenharia oficial.
+							</p>
 
-                            <div className="grid sm:grid-cols-2 gap-4">
-                                {features.map((f) => (
-                                    <div key={f.title} className="flex gap-4 items-start bg-linear-to-br from-gray-50 to-white p-5 rounded-xl border-2 border-gray-100 hover:border-purple-200 transition-colors">
-                                        <div className="text-3xl shrink-0" aria-hidden="true">{f.icon}</div>
-                                        <div className="flex-1">
-                                            <h3 className="font-bold text-gray-900 mb-1 text-base">{f.title}</h3>
-                                            <p className="text-sm text-gray-600 leading-relaxed">{f.desc}</p>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </article>
+							<div className="grid sm:grid-cols-2 gap-4">
+								{features.map((f) => (
+									<div key={f.title} className="flex gap-4 items-start bg-slate-50/50 dark:bg-slate-950/20 p-5 rounded-2xl border border-slate-150/40 dark:border-slate-850/40 hover:border-purple-500/10 dark:hover:border-purple-400/10 transition-colors">
+										<div className="shrink-0 p-1 bg-white dark:bg-slate-900 rounded-xl shadow-xs" aria-hidden="true">
+											{f.icon}
+										</div>
+										<div className="flex-1">
+											<h3 className="font-bold text-slate-800 dark:text-slate-200 mb-1 text-sm">{f.title}</h3>
+											<p className="text-xs text-slate-500 dark:text-slate-450 leading-relaxed font-semibold">{f.desc}</p>
+										</div>
+									</div>
+								))}
+							</div>
+						</article>
 
-                        <article className="bg-white rounded-3xl p-8 shadow-lg border-2 border-gray-100">
-                            <div className="flex items-center gap-3 mb-4">
-                                <div className="w-12 h-12 bg-linear-to-br from-green-500 to-teal-600 rounded-xl flex items-center justify-center">
-                                    <span className="text-2xl">🤝</span>
-                                </div>
-                                <h2 className="text-3xl font-bold text-gray-900">Como contribuir</h2>
-                            </div>
-                            <p className="text-gray-700 leading-relaxed mb-4 text-base">
-                                Correções, traduções e novos exemplos são bem-vindos. Abra uma
-                                issue ou um pull request no repositório. Busco por clareza nas
-                                descrições e exemplos testáveis.
-                            </p>
-                            <div className="bg-linear-to-r from-blue-50 to-purple-50 rounded-xl p-5 border-2 border-blue-100">
-                                <ol className="list-decimal list-inside text-gray-700 space-y-2 text-sm">
-                                    <li className="font-medium">Fork do repositório e crie uma branch clara.</li>
-                                    <li className="font-medium">Adicione exemplos ou corrija o conteúdo com referências quando possível.</li>
-                                    <li className="font-medium">Abra um PR e descreva o que foi alterado.</li>
-                                </ol>
-                            </div>
-                        </article>
+						{/* Contribuir article */}
+						<article className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-3xl p-8 shadow-xl border border-slate-200/60 dark:border-slate-800/80">
+							<div className="flex items-center gap-3.5 mb-5 select-none">
+								<div className="w-12 h-12 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl flex items-center justify-center text-emerald-500">
+									<Users className="w-6 h-6" />
+								</div>
+								<h2 className="text-2xl font-display font-extrabold text-slate-850 dark:text-slate-100">Como Contribuir</h2>
+							</div>
+							
+							<p className="text-slate-650 dark:text-slate-350 leading-relaxed mb-6 font-semibold text-sm">
+								Correções de tradução, refinamento de tabelas e novos trechos funcionais de exemplos são muito bem-vindos! 
+								A plataforma cresce por meio da comunidade.
+							</p>
 
-                        <article className="bg-linear-to-br from-purple-50 to-pink-50 rounded-3xl p-8 shadow-lg border-2 border-purple-100">
-                            <div className="flex items-center gap-3 mb-4">
-                                <div className="w-12 h-12 bg-linear-to-br from-purple-600 to-pink-600 rounded-xl flex items-center justify-center">
-                                    <span className="text-2xl">♿</span>
-                                </div>
-                                <h2 className="text-3xl font-bold text-gray-900">Acessibilidade</h2>
-                            </div>
-                            <p className="text-gray-700 leading-relaxed text-base">
-                                O site prioriza leitura, contraste legível e navegação por teclado.
-                                Se encontrar barreiras, por favor relate para que eu possa melhorar.
-                            </p>
-                        </article>
-                    </section>
+							<div className="bg-slate-50/50 dark:bg-slate-950/20 rounded-2xl p-5 border border-slate-150/40 dark:border-slate-850/40">
+								<ol className="list-decimal list-inside text-slate-700 dark:text-slate-300 space-y-2 text-xs font-semibold">
+									<li>Faça o fork do repositório no GitHub.</li>
+									<li>Implemente melhorias e revise referências técnicas oficiais.</li>
+									<li>Abra o seu Pull Request (PR) detalhando os ajustes efetuados.</li>
+								</ol>
+							</div>
+						</article>
 
-                    <aside className="space-y-6">
-                        <div className="bg-white rounded-3xl p-8 shadow-lg border-2 border-gray-100 hover:border-purple-200 transition-colors">
-                            <div className="flex flex-col items-center mb-6">
-                                <div className="w-20 h-20 bg-linear-to-br from-purple-100 to-pink-100 rounded-2xl flex items-center justify-center mb-4">
-                                    <img 
-                                        src="/logo.png" 
-                                        alt="Ciência Embarcada" 
-                                        className="h-16 w-16 object-contain"
-                                    />
-                                </div>
-                                <h3 className="text-xl font-bold text-gray-900 text-center">Sobre o Autor</h3>
-                            </div>
+						{/* Accessibility note */}
+						<article className="bg-gradient-to-br from-purple-500/5 to-pink-500/5 dark:from-purple-500/10 dark:to-pink-500/10 rounded-3xl p-8 shadow-lg border border-purple-500/20 dark:border-pink-500/20">
+							<div className="flex items-center gap-3.5 mb-5 select-none">
+								<div className="w-12 h-12 bg-pink-500/10 border border-pink-500/20 rounded-2xl flex items-center justify-center text-pink-500">
+									<Accessibility className="w-6 h-6" />
+								</div>
+								<h2 className="text-2xl font-display font-extrabold text-slate-850 dark:text-slate-100">Acessibilidade</h2>
+							</div>
+							<p className="text-slate-650 dark:text-slate-350 leading-relaxed font-semibold text-sm">
+								O ESPDocs preza pela legibilidade, alto contraste cromático e compatibilidade de navegação por teclado. 
+								Caso encontre alguma barreira técnica de leitura ou navegação, sinta-se encorajado a relatar via Issue.
+							</p>
+						</article>
+					</section>
 
-                            <p className="text-gray-700 text-sm leading-relaxed mb-4 text-justify">
-                                <strong>Lucas Rayan Guerra</strong>, criador do <a 
-                                    href="https://cienciaembarcada.com.br" 
-                                    target="_blank" 
-                                    rel="noopener noreferrer"
-                                    className="text-purple-600 hover:text-purple-800 font-semibold"
-                                >
-                                    Ciência Embarcada
-                                </a>, é Técnico em Desenvolvimento de Sistemas, estudante de Ciência da Computação na UFRPE e de Blockchain e Criptografia Digital na FMU.
-                            </p>
+					{/* Sidebar area */}
+					<aside className="space-y-6">
+						{/* Author Card */}
+						<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl p-8 shadow-xl">
+							<div className="flex flex-col items-center mb-6 select-none">
+								<div className="w-20 h-20 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl flex items-center justify-center mb-4 border border-purple-500/20 shadow-inner">
+									<img 
+										src="/logo.png" 
+										alt="Ciência Embarcada Logo" 
+										className="h-16 w-16 object-contain"
+									/>
+								</div>
+								<h3 className="text-lg font-display font-extrabold text-slate-850 dark:text-slate-100 text-center">Sobre o Autor</h3>
+							</div>
 
-                            <p className="text-gray-700 text-sm leading-relaxed mb-4 text-justify">
-                                Recifense apaixonado por Pernambuco, Diretor de Software da Semine AgriTech e palestrante em eventos como o REC'n'Play, Lucas compartilha conhecimento sobre ESP32, Eletrônica, IoT, Cibersegurança e muito mais.
-                            </p>
+							<div className="space-y-4 text-xs font-semibold text-slate-650 dark:text-slate-350 text-justify leading-relaxed">
+								<p>
+									<strong>Lucas Rayan Guerra</strong>, criador da iniciativa <a 
+										href="https://cienciaembarcada.com.br" 
+										target="_blank" 
+										rel="noopener noreferrer"
+										className="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 font-bold"
+									>
+										Ciência Embarcada
+									</a>, é Técnico em Desenvolvimento de Sistemas, estudante de Ciência da Computação na UFRPE e estuda Blockchain e Criptografia.
+								</p>
 
-                            <div className="bg-purple-50 border border-purple-100 rounded-lg p-4 mb-4 text-justify">
-                                <p className="text-sm text-gray-700 italic">
-                                    "O Ciência Embarcada nasceu do desejo de criar um espaço livre e organizado para compartilhar conhecimentos e experiências sobre tecnologia e ciência."
-                                </p>
-                            </div>
+								<p>
+									Diretor de Software na Semine AgriTech e palestrante em feiras e conferências (como o REC'n'Play), compartilha ativamente material sobre hardware, internet das coisas e cibersegurança.
+								</p>
+							</div>
 
-                            <a
-                                href="https://cienciaembarcada.com.br"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="inline-flex items-center justify-center w-full px-4 py-2 rounded-lg bg-linear-to-r from-blue-600 to-purple-600 text-white font-semibold shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all"
-                            >
-                                🚀 Visitar Ciência Embarcada
-                            </a>
-                        </div>
+							<div className="bg-purple-500/5 dark:bg-purple-400/5 border border-purple-500/10 dark:border-purple-400/10 rounded-2xl p-4 my-5 text-justify">
+								<p className="text-[10px] text-slate-650 dark:text-slate-400 italic font-semibold leading-relaxed">
+									"O Ciência Embarcada nasceu para criar um espaço de curadoria técnica livre, promovendo a popularização científica e do hardware embarcado."
+								</p>
+							</div>
 
-                        <div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
-                            <div className="flex items-center justify-between mb-3">
-                                <h3 className="text-lg font-semibold">Contribua</h3>
-                                <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Open Source</span>
-                            </div>
+							<a
+								href="https://cienciaembarcada.com.br"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="inline-flex items-center justify-center gap-1.5 w-full px-4 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold text-xs uppercase tracking-wider shadow-md hover:shadow-lg active:scale-98 transition-all"
+							>
+								<span>Visitar Ciência Embarcada</span>
+							</a>
+						</div>
 
-                            <p className="text-gray-700 mb-4">
-                                Ajude a melhorar o ESPDocs com exemplos, correções e traduções.
-                            </p>
+						{/* Repository / Contributions card */}
+						<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl p-6 shadow-xl">
+							<div className="flex items-center justify-between mb-4 select-none">
+								<h3 className="text-sm font-display font-extrabold text-slate-800 dark:text-slate-200">Contribua</h3>
+								<span className="text-[9px] bg-emerald-500/10 text-emerald-600 dark:text-emerald-450 px-2.5 py-0.5 rounded-full font-bold uppercase tracking-wider border border-emerald-500/20">Open Source</span>
+							</div>
 
-                            <div className="flex flex-col gap-3">
-                                <a
-                                    href="https://github.com/lucasrguerra/ESPDocs"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-linear-to-r from-blue-600 to-purple-600 text-white font-semibold shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
-                                    aria-label="Abrir repositório no GitHub"
-                                >
-                                    Ver repositório
-                                </a>
-                            </div>
+							<p className="text-xs text-slate-500 dark:text-slate-450 leading-relaxed mb-4 font-semibold">
+								Ajude a expandir a cobertura do ESPDocs submetendo exemplos de códigos ou aprimoramentos técnicos.
+							</p>
 
-                            <div className="mt-4 text-sm text-gray-500">
-                                <strong>Importante:</strong> Esta é uma plataforma de organização de informações, não uma
-                                tradução da documentação oficial. A interface está em português, mas datasheets, manuais
-                                técnicos e repositórios linkados são da Espressif e estão em inglês. Para decisões
-                                técnicas críticas, sempre consulte a documentação oficial.
-                            </div>
-                        </div>
+							<a
+								href="https://github.com/lucasrguerra/ESPDocs"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="inline-flex items-center justify-center gap-2 w-full px-4 py-3 rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-950 font-bold text-xs uppercase tracking-wider shadow-md hover:opacity-90 active:scale-98 transition-all"
+								aria-label="Abrir repositório no GitHub"
+							>
+								<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+									<path d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1 1.6-.7 1.9-1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.5.4.9 1.1.9 2.2v3.2c0 .3.2.7.8.6A12 12 0 0012 .5z" />
+								</svg>
+								<span>Ver Repositório</span>
+							</a>
 
-                        <div className="bg-white/80 rounded-2xl p-4 shadow-sm border border-gray-100">
-                            <h4 className="font-semibold mb-2">Resumo</h4>
-                            <ul className="text-sm text-gray-700 space-y-2">
-                                <li>🔎 Conteúdo técnico explicado.</li>
-                                <li>🧪 Exemplos e projetos.</li>
-                                <li>🤝 Comunidade e contribuições.</li>
-                            </ul>
-                        </div>
-                    </aside>
-                </div>
-            </main>
+							<div className="mt-4 text-[10px] text-slate-450 dark:text-slate-500 leading-relaxed font-semibold border-t border-slate-100 dark:border-slate-850/45 pt-4">
+								<strong>Aviso Legal:</strong> O ESPDocs é um agregador e organizador. Manuais técnicos detalhados e repositórios oficiais referenciados são de propriedade exclusiva da Espressif Systems. Para projetos críticos comerciais, consulte sempre a documentação nativa oficial.
+							</div>
+						</div>
 
-            <Footer />
-        </div>
-    );
+						{/* Summary sidebar card */}
+						<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl p-6 shadow-xl select-none">
+							<h4 className="text-xs font-display font-extrabold text-slate-800 dark:text-slate-200 mb-3 uppercase tracking-wider">Conteúdo Técnico</h4>
+							<ul className="text-xs text-slate-600 dark:text-slate-400 space-y-2.5 font-bold">
+								<li className="flex items-center gap-2">
+									<span className="w-1.5 h-1.5 rounded-full bg-purple-500" />
+									<span>Focado em clareza técnica</span>
+								</li>
+								<li className="flex items-center gap-2">
+									<span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
+									<span>Exemplos práticos de códigos</span>
+								</li>
+								<li className="flex items-center gap-2">
+									<span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+									<span>Links oficiais mapeados</span>
+								</li>
+							</ul>
+						</div>
+					</aside>
+				</div>
+			</main>
+
+			<Footer />
+		</div>
+	);
 }
\ No newline at end of file
diff --git a/components/BoardCard.jsx b/components/BoardCard.jsx
index f144546..8c5ce50 100644
--- a/components/BoardCard.jsx
+++ b/components/BoardCard.jsx
@@ -1,101 +1,99 @@
-"use client";
+'use client';
+
+import { Award, CheckCircle, HelpCircle, ExternalLink } from 'lucide-react';
 
 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 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());
-    };
+	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'
-    );
+	// 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 }}
-                />
-            )}
+	return (
+		<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/80 rounded-3xl shadow-lg hover:shadow-2xl hover:-translate-y-1.5 transition-all duration-300 overflow-hidden group flex flex-col h-full animate-fadeIn select-none">
+			{/* Image Container with premium glass background */}
+			{board.Imagem && (
+				<div 
+					className="mx-auto w-full p-4 flex justify-center bg-white dark:bg-white border-b border-slate-100 dark:border-slate-850/40 shrink-0"
+					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>
+			<div className="p-6 flex flex-col grow justify-between">
+				<div>
+					{/* Loja Oficial Badge */}
+					{board['Loja Oficial'] && board['Loja Oficial'].toLowerCase() === 'sim' && (
+						<div className="mb-2">
+							<span className="inline-flex items-center gap-1 bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 rounded-full px-2.5 py-0.5 text-[9px] font-bold uppercase tracking-wider">
+								<Award className="w-3.5 h-3.5 shrink-0" />
+								<span>Loja Oficial</span>
+							</span>
+						</div>
+					)}
 
-                {/* 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>
-                )}
+					{/* Nome */}
+					<h3 className="text-base font-display font-extrabold text-slate-850 dark:text-slate-100 mb-4 line-clamp-2 leading-snug group-hover:text-purple-650 dark:group-hover:text-purple-400 transition-colors">
+						{board.Nome || 'Placa Genérica'}
+					</h3>
 
-                {/* 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>
-                )}
+					{/* Características Técnicas */}
+					{availableFeatures.length > 0 && (
+						<div className="mb-6">
+							<h4 className="text-[9px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-1.5 mb-2.5">
+								<CheckCircle className="w-3.5 h-3.5 text-emerald-500" />
+								<span>Recursos Embarcados</span>
+							</h4>
+							
+							<div className="flex flex-wrap gap-1.5">
+								{availableFeatures.map((field) => {
+									const isOptional = optionalFeatures.includes(field);
+									return (
+										<div
+											key={field}
+											className={`text-[9px] px-2 py-0.5 rounded-lg font-bold flex items-center gap-1 ${
+												isOptional
+													? 'bg-amber-500/10 dark:bg-amber-500/15 border border-amber-500/20 text-amber-600 dark:text-amber-400'
+													: 'bg-emerald-500/10 dark:bg-emerald-500/15 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400'
+											}`}
+										>
+											{isOptional ? (
+												<HelpCircle className="w-2.5 h-2.5 shrink-0" />
+											) : (
+												<CheckCircle className="w-2.5 h-2.5 shrink-0" />
+											)}
+											<span>{field}</span>
+										</div>
+									);
+								})}
+							</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>
-    );
+				{/* Link de Compra */}
+				{board.Link && (
+					<a
+						href={board.Link}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="block w-full bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-950 text-center px-4 py-3 rounded-xl font-bold text-xs uppercase tracking-wider hover:opacity-90 active:scale-98 transition-all shadow-md mt-auto flex items-center justify-center gap-1.5"
+					>
+						<span>Adquirir no AliExpress</span>
+						<ExternalLink className="w-3.5 h-3.5" />
+					</a>
+				)}
+			</div>
+		</div>
+	);
 }
diff --git a/components/CodeExample.jsx b/components/CodeExample.jsx
index 763fe8a..12633c5 100644
--- a/components/CodeExample.jsx
+++ b/components/CodeExample.jsx
@@ -1,141 +1,178 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { Code, Copy, CheckCircle, ExternalLink, HelpCircle } from 'lucide-react'
 
 export default function CodeExample({ framework }) {
-    const examplesUrl = framework?.exemplos;
-    const color = framework?.cor || '#6B7280';
+	const examplesUrl = framework?.exemplos;
+	const color = framework?.cor || '#6B7280';
 
-    const [sample, setSample] = useState('');
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [copied, setCopied] = useState(false);
+	const [sample, setSample] = useState('');
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const [copied, setCopied] = useState(false);
 
-    useEffect(() => {
-        setSample('');
-        setError(null);
-        setLoading(false);
+	useEffect(() => {
+		setSample('');
+		setError(null);
+		setLoading(false);
 
-        if (!framework) return;
+		if (!framework) return;
 
-        const exemploPath = framework.exemplo;
-        if (!exemploPath) {
-            const msg = `// Exemplos completos: ${examplesUrl || 'Ver repositório'}\n// Abra o link acima para ver exemplos e código completo.\n`;
-            setSample(msg);
-            return;
-        }
+		const exemploPath = framework.exemplo;
+		if (!exemploPath) {
+			const msg = `// Exemplos completos: ${examplesUrl || 'Ver repositório'}\n// Abra o link acima para ver exemplos e código completo.\n`;
+			setSample(msg);
+			return;
+		}
 
-        const url = exemploPath.startsWith('/') ? exemploPath : `/${exemploPath}`;
+		const url = exemploPath.startsWith('/') ? exemploPath : `/${exemploPath}`;
 
-        let cancelled = false;
-        setLoading(true);
+		let cancelled = false;
+		setLoading(true);
 
-        fetch(url)
-            .then((res) => {
-                if (!res.ok) throw new Error(`HTTP ${res.status}`);
-                return res.text();
-            })
-            .then((text) => {
-                if (cancelled) return;
-                if (text && text.trim().length > 0) {
-                    setSample(text);
-                } else {
-                    setSample(`// Arquivo de exemplo está vazio. Consulte: ${examplesUrl || 'repositório'}\n`);
-                    setError('Arquivo vazio');
-                }
-            })
-            .catch((err) => {
-                if (cancelled) return;
-                setSample(`// Não foi possível carregar o exemplo local. Consulte: ${examplesUrl || 'repositório'}\n`);
-                setError(err.message || 'Falha ao carregar exemplo');
-            })
-            .finally(() => {
-                if (!cancelled) setLoading(false);
-            });
+		fetch(url)
+			.then((res) => {
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				return res.text();
+			})
+			.then((text) => {
+				if (cancelled) return;
+				if (text && text.trim().length > 0) {
+					setSample(text);
+				} else {
+					setSample(`// Arquivo de exemplo está vazio. Consulte o repositório oficial.\n`);
+					setError('Arquivo vazio');
+				}
+			})
+			.catch((err) => {
+				if (cancelled) return;
+				setSample(`// Não foi possível carregar o exemplo localmente.\n// Consulte o link do GitHub acima para exemplos funcionais.\n`);
+				setError(err.message || 'Falha ao carregar exemplo');
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
 
-        return () => {
-            cancelled = true;
-        };
-    }, [framework?.exemplo, framework?.exemplos]);
+		return () => {
+			cancelled = true;
+		};
+	}, [framework?.exemplo, framework?.exemplos]);
 
-    const lines = (sample || '').split('\n');
+	const lines = (sample || '').split('\n');
 
-    async function handleCopy() {
-        try {
-            await navigator.clipboard.writeText(sample);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        } catch {}
-    }
+	async function handleCopy() {
+		try {
+			await navigator.clipboard.writeText(sample);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2000);
+		} catch {}
+	}
 
-    return (
-        <div className="bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-100 mb-8">
-            <div className="md:flex items-start justify-between gap-4 mb-4">
-                <div>
-                    <h3 className="text-lg font-semibold text-gray-800 mb-1">Exemplo de Código</h3>
-                    <p className="text-sm text-gray-600">Trecho rápido para começar — personalize conforme necessário.</p>
-                </div>
+	return (
+		<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 mb-8 animate-fadeIn">
+			<div className="md:flex items-center justify-between gap-6 mb-6">
+				<div className="select-none">
+					<h3 className="text-xl font-display font-extrabold text-slate-850 dark:text-slate-100 mb-1 flex items-center gap-2">
+						<Code className="w-5 h-5" style={{ color }} />
+						<span>Demonstração de Código</span>
+					</h3>
+					<p className="text-xs text-slate-500 dark:text-slate-400 font-semibold">Trecho de inicialização rápida — copie e personalize em seu projeto.</p>
+				</div>
 
-                <div className="grid grid-cols-2 md:flex items-center gap-2">
-                    <span
-                        className="inline-flex items-center text-sm font-semibold px-3 py-1 rounded-full text-white"
-                        style={{ backgroundColor: color }}
-                    >
-                        {framework?.linguagem || 'Código'}
-                    </span>
+				<div className="flex flex-wrap items-center gap-2.5 mt-4 md:mt-0 select-none">
+					<span
+						className="inline-flex items-center text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider"
+						style={{ 
+							backgroundColor: `${color}18`, 
+							color, 
+							border: `1px solid ${color}25` 
+						}}
+					>
+						{framework?.linguagem || 'Código'}
+					</span>
 
-                    <button
-                        onClick={handleCopy}
-                        className="inline-flex items-center gap-2 bg-white text-gray-800 px-3 py-2 rounded-lg font-medium shadow border-2 border-gray-100 cursor-pointer hover:shadow-lg transition"
-                        title="Copiar código"
-                    >
-                        {copied ? '✅ Copiado' : '📋 Copiar'}
-                    </button>
+					<button
+						onClick={handleCopy}
+						className="inline-flex items-center gap-1.5 bg-slate-50 dark:bg-slate-850 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-250 px-3.5 py-2 rounded-xl font-bold text-xs shadow-xs border border-slate-200/60 dark:border-slate-800/80 cursor-pointer transition active:scale-95"
+						title="Copiar código para a área de transferência"
+					>
+						{copied ? (
+							<>
+								<CheckCircle className="w-3.5 h-3.5 text-emerald-500" />
+								<span className="text-emerald-600 dark:text-emerald-450">Copiado!</span>
+							</>
+						) : (
+							<>
+								<Copy className="w-3.5 h-3.5" />
+								<span>Copiar</span>
+							</>
+						)}
+					</button>
 
-                    {examplesUrl && (
-                        <a
-                            href={examplesUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg font-semibold text-white col-span-2"
-                            style={{
-                                background: `linear-gradient(90deg, ${color} 0%, rgba(124,58,237,1) 100%)`
-                            }}
-                            title="Abrir exemplos no GitHub"
-                        >
-                            🔗 Ver Outros no GitHub
-                        </a>
-                    )}
-                </div>
-            </div>
+					{examplesUrl && (
+						<a
+							href={examplesUrl}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-bold text-white shadow-lg active:scale-95 transition hover:opacity-95"
+							style={{
+								background: `linear-gradient(90deg, ${color} 0%, rgba(147,51,234,1) 100%)`,
+								boxShadow: `0 8px 20px -8px ${color}`
+							}}
+							title="Abrir exemplos no GitHub"
+						>
+							<span>Mais Exemplos</span>
+							<ExternalLink className="w-3.5 h-3.5" />
+						</a>
+					)}
+				</div>
+			</div>
 
-            <div className="rounded-lg overflow-hidden border">
-                <div className="p-0">
-                    <div className="flex items-center justify-between bg-linear-to-r from-gray-900 to-gray-800 p-3">
-                        <div className="text-xs text-gray-300 font-medium">{framework?.nome}</div>
-                        <div className="text-xs text-gray-400">
-                            {loading ? 'Carregando exemplo...' : (framework?.exemplo ? 'Exemplo do framework' : 'Abrir no GitHub')}
-                        </div>
-                    </div>
-                </div>
+			<div className="rounded-2xl overflow-hidden border border-slate-200/60 dark:border-slate-800/80 shadow-md">
+				<div className="select-none">
+					<div className="flex items-center justify-between bg-slate-100/80 dark:bg-slate-950/70 border-b border-slate-200/60 dark:border-slate-850/60 px-4 py-3.5">
+						<div className="text-xs font-bold text-slate-750 dark:text-slate-250 flex items-center gap-1.5">
+							<span className="w-2.5 h-2.5 rounded-full bg-red-500/80" />
+							<span className="w-2.5 h-2.5 rounded-full bg-yellow-500/80" />
+							<span className="w-2.5 h-2.5 rounded-full bg-green-500/80" />
+							<span className="ml-2 font-mono text-[10px] text-slate-500 dark:text-slate-400">{framework?.nome} example</span>
+						</div>
+						<div className="text-[9px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">
+							{loading ? 'Buscando exemplo...' : (framework?.exemplo ? 'Local Source' : 'External GitHub')}
+						</div>
+					</div>
+				</div>
 
-                <div className="flex">
-                    <pre
-                        className="bg-gray-900 text-gray-100 p-4 w-full overflow-auto"
-                        style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace' }}
-                    >
-                        {lines.map((line, idx) => (
-                            <div key={idx} className="flex select-text">
-                                <span className="text-gray-500 pr-4 text-right w-8 select-none">{idx + 1}</span>
-                                <code className="whitespace-pre-wrap flex-1">{line === '' ? '\u00A0' : line}</code>
-                            </div>
-                        ))}
-                    </pre>
-                </div>
-            </div>
+				<div className="flex bg-slate-950">
+					<pre
+						className="text-slate-200 p-5 w-full overflow-auto text-xs leading-relaxed scrollbar-thin select-text"
+						style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace' }}
+					>
+						{lines.map((line, idx) => (
+							<div key={idx} className="flex">
+								<span className="text-slate-600 dark:text-slate-650 pr-4 text-right w-8 select-none border-r border-slate-900/60 mr-4 font-semibold">{idx + 1}</span>
+								<code className="whitespace-pre flex-1 text-left">{line === '' ? '\u00A0' : line}</code>
+							</div>
+						))}
+					</pre>
+				</div>
+			</div>
 
-            {error && <p className="text-xs text-red-500 mt-2">Não foi possível carregar o arquivo de exemplo: {error}. Usando instrução para o repositório.</p>}
-            <p className="text-xs text-gray-500 mt-3">Dica: personalize este trecho conforme o seu projeto. Os exemplos completos estão no repositório.</p>
-        </div>
-    );
+			{error && (
+				<div className="bg-red-500/10 border border-red-500/20 rounded-xl p-3.5 mt-3 select-none">
+					<p className="text-[10px] font-bold text-red-600 dark:text-red-400">
+						Nota: Não foi possível carregar o arquivo de exemplo local ({error}). Use o botão "Mais Exemplos" para ver os códigos oficiais.
+					</p>
+				</div>
+			)}
+			
+			<div className="mt-4 flex items-start gap-2 bg-slate-50/50 dark:bg-slate-950/20 border border-slate-150/40 dark:border-slate-850/40 p-4 rounded-2xl select-none">
+				<HelpCircle className="w-4.5 h-4.5 text-purple-500 shrink-0 mt-0.5" />
+				<p className="text-[10px] font-semibold text-slate-500 dark:text-slate-400 leading-relaxed">
+					<strong>Dica de Desenvolvimento:</strong> Personalize o trecho de inicialização com as pinagens e configurações corretas correspondentes à série do seu microcontrolador (ex: ESP32-S3, ESP32-C6). A documentação detalhada da API pode ser acessada na barra superior do framework.
+				</p>
+			</div>
+		</div>
+	);
 }
\ No newline at end of file
diff --git a/components/ConnectionsDiagram.jsx b/components/ConnectionsDiagram.jsx
index 32422a9..448547c 100644
--- a/components/ConnectionsDiagram.jsx
+++ b/components/ConnectionsDiagram.jsx
@@ -1,778 +1,715 @@
 "use client";
 
 import { useState, useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { 
+	Search, 
+	X, 
+	Grid, 
+	List, 
+	Filter, 
+	AlertTriangle, 
+	Info, 
+	Tag, 
+	Zap, 
+	Sliders,
+	CheckCircle,
+	ExternalLink
+} from "lucide-react";
 
 const FILTER_CATEGORIES = [
-    { id: "All", name: "Todos", color: "#374151" },
-    { id: "GND", name: "Terra (GND)", color: "#64748b" },
-    { id: "Power", name: "Alimentação", color: "#ef4444" },
-    { id: "GPIO", name: "GPIO", color: "#22c55e" },
-    { id: "Low Power", name: "GPIO LP", color: "#f59e0b" },
-    { id: "ADC", name: "ADC", color: "#ec4899" },
-    { id: "DAC", name: "DAC", color: "#a855f7" },
-    { id: "Touch", name: "Touch", color: "#06b6d4" },
-    { id: "UART", name: "UART", color: "#3b82f6" },
-    { id: "SPI", name: "SPI", color: "#ef4444" },
-    { id: "USB", name: "USB", color: "#8b5cf6" },
-    { id: "Clock", name: "Clock", color: "#eab308" },
-    { id: "JTAG", name: "JTAG", color: "#8b5cf6" },
-    { id: "Strapping", name: "Inicialização", color: "#dc2626" },
-    { id: "DSI", name: "Display (DSI)", color: "#f97316" },
-    { id: "CSI", name: "Câmera (CSI)", color: "#14b8a6" },
-    { id: "Ethernet", name: "Ethernet", color: "#3b82f6" },
-    { id: "SD", name: "Cartão SD", color: "#10b981" },
-    { id: "I2C", name: "I2C", color: "#f59e0b" },
-    { id: "Antena", name: "Antena", color: "#22d3ee" },
+	{ id: "All", name: "Todos", color: "#8b5cf6" }, // purple
+	{ id: "GND", name: "Terra (GND)", color: "#64748b" }, // slate
+	{ id: "Power", name: "Alimentação", color: "#ef4444" }, // red
+	{ id: "GPIO", name: "GPIO", color: "#22c55e" }, // green
+	{ id: "Low Power", name: "GPIO LP", color: "#f59e0b" }, // amber
+	{ id: "ADC", name: "ADC", color: "#ec4899" }, // pink
+	{ id: "DAC", name: "DAC", color: "#a855f7" }, // purple
+	{ id: "Touch", name: "Touch", color: "#06b6d4" }, // cyan
+	{ id: "UART", name: "UART", color: "#3b82f6" }, // blue
+	{ id: "SPI", name: "SPI", color: "#f43f5e" }, // rose
+	{ id: "USB", name: "USB", color: "#a855f7" }, // purple
+	{ id: "Clock", name: "Clock", color: "#eab308" }, // yellow
+	{ id: "JTAG", name: "JTAG", color: "#6366f1" }, // indigo
+	{ id: "Strapping", name: "Inicialização", color: "#dc2626" }, // red
+	{ id: "DSI", name: "Display (DSI)", color: "#f97316" }, // orange
+	{ id: "CSI", name: "Câmera (CSI)", color: "#14b8a6" }, // teal
+	{ id: "Ethernet", name: "Ethernet", color: "#0284c7" }, // sky
+	{ id: "SD", name: "Cartão SD", color: "#10b981" }, // emerald
+	{ id: "I2C", name: "I2C", color: "#f59e0b" }, // amber
+	{ id: "Antena", name: "Antena", color: "#06b6d4" }, // cyan
 ];
 
 const type_colors = {
-    power: "#ef4444",
-    ground: "#64748b",
-    io: "#22c55e",
-    analog: "#ec4899",
-    dedicated: "#3b82f6",
-    nc: "#9ca3af",
+	power: "#ef4444", // high-voltage red
+	ground: "#64748b", // slate gray
+	io: "#22c55e", // laser green
+	analog: "#ec4899", // dynamic pink
+	dedicated: "#3b82f6", // electric blue
+	nc: "#94a3b8", // muted gray
 };
 
 export default function ConnectionsDiagram({ connections, serie }) {
-    const [activeFilter, setActiveFilter] = useState("All");
-    const [selectedConnection, setSelectedConnection] = useState(null);
-    const [hoveredConnection, setHoveredConnection] = useState(null);
-    const [searchQuery, setSearchQuery] = useState("");
-    const [viewMode, setViewMode] = useState("grid");
-    const [showTooltip, setShowTooltip] = useState(null);
+	const [activeFilter, setActiveFilter] = useState("All");
+	const [selectedConnection, setSelectedConnection] = useState(null);
+	const [hoveredConnection, setHoveredConnection] = useState(null);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [viewMode, setViewMode] = useState("grid");
+	const [showTooltip, setShowTooltip] = useState(null);
+	const [mounted, setMounted] = useState(false);
 
-    const isConnectionVisible = (connection) => {
-        const matchesFilter = activeFilter === "All" || connection.categorias.includes(activeFilter);
-        const matchesSearch = searchQuery === "" || 
-            connection.nome.toLowerCase().includes(searchQuery.toLowerCase()) ||
-            connection.numero.toString().toLowerCase().includes(searchQuery.toLowerCase());
-        return matchesFilter && matchesSearch;
-    };
+	useEffect(() => {
+		setMounted(true);
+	}, []);
 
-    const getCategoryColor = (category) => {
-        const filter = FILTER_CATEGORIES.find((f) => f.id === category);
-        return filter?.color || "#64748b";
-    };
+	const isConnectionVisible = (connection) => {
+		const matchesFilter = activeFilter === "All" || connection.categorias.includes(activeFilter);
+		const matchesSearch = searchQuery === "" || 
+			connection.nome.toLowerCase().includes(searchQuery.toLowerCase()) ||
+			connection.numero.toString().toLowerCase().includes(searchQuery.toLowerCase());
+		return matchesFilter && matchesSearch;
+	};
 
-    const visibleConnections = useMemo(() => {
-        return connections.filter(isConnectionVisible);
-    }, [connections, activeFilter, searchQuery]);
+	const getCategoryColor = (category) => {
+		const filter = FILTER_CATEGORIES.find((f) => f.id === category);
+		return filter?.color || "#64748b";
+	};
 
-    const activeCategories = useMemo(() => {
-        if (activeFilter === "All") return [];
-        return FILTER_CATEGORIES.filter(cat => 
-            visibleConnections.some(conn => conn.categorias.includes(cat.id))
-        );
-    }, [visibleConnections, activeFilter]);
+	const visibleConnections = useMemo(() => {
+		return connections.filter(isConnectionVisible);
+	}, [connections, activeFilter, searchQuery]);
 
-    useEffect(() => {
-        const handleEscape = (e) => {
-            if (e.key === "Escape") {
-                setSelectedConnection(null);
-                setShowTooltip(null);
-            }
-        };
-        
-        if (selectedConnection) {
-            document.addEventListener("keydown", handleEscape);
-            document.body.style.overflow = "hidden";
-        }
-        
-        return () => {
-            document.removeEventListener("keydown", handleEscape);
-            document.body.style.overflow = "unset";
-        };
-    }, [selectedConnection]);
+	const activeCategories = useMemo(() => {
+		if (activeFilter === "All") return [];
+		return FILTER_CATEGORIES.filter(cat => 
+			visibleConnections.some(conn => conn.categorias.includes(cat.id))
+		);
+	}, [visibleConnections, activeFilter]);
 
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (selectedConnection) return;
-            
-            if (e.key === "Tab") {
-                const buttons = document.querySelectorAll('[data-connection-button]');
-                const currentIndex = Array.from(buttons).findIndex(btn => btn === document.activeElement);
-                
-                if (e.shiftKey && currentIndex > 0) {
-                    e.preventDefault();
-                    buttons[currentIndex - 1].focus();
-                } else if (!e.shiftKey && currentIndex < buttons.length - 1) {
-                    e.preventDefault();
-                    buttons[currentIndex + 1].focus();
-                }
-            }
-        };
+	useEffect(() => {
+		const handleEscape = (e) => {
+			if (e.key === "Escape") {
+				setSelectedConnection(null);
+				setShowTooltip(null);
+			}
+		};
+		
+		if (selectedConnection) {
+			document.addEventListener("keydown", handleEscape);
+			document.body.style.overflow = "hidden";
+		}
+		
+		return () => {
+			document.removeEventListener("keydown", handleEscape);
+			document.body.style.overflow = "unset";
+		};
+	}, [selectedConnection]);
 
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [selectedConnection]);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (selectedConnection) return;
+			
+			if (e.key === "Tab") {
+				const buttons = document.querySelectorAll('[data-connection-button]');
+				const currentIndex = Array.from(buttons).findIndex(btn => btn === document.activeElement);
+				
+				if (e.shiftKey && currentIndex > 0) {
+					e.preventDefault();
+					buttons[currentIndex - 1].focus();
+				} else if (!e.shiftKey && currentIndex < buttons.length - 1) {
+					e.preventDefault();
+					buttons[currentIndex + 1].focus();
+				}
+			}
+		};
 
-    if (!connections || connections.length === 0) {
-        return (
-            <div className="flex flex-col items-center justify-center py-16 px-4">
-                <div className="w-20 h-20 mb-6 rounded-full bg-gray-100 flex items-center justify-center">
-                    <svg
-                        className="w-10 h-10 text-gray-400"
-                        fill="none"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                    >
-                        <path d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
-                    </svg>
-                </div>
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [selectedConnection]);
 
-                <p className="text-lg font-medium text-gray-600">
-                    Diagrama de conexões indisponível
-                </p>
+	if (!connections || connections.length === 0) {
+		return (
+			<div className="flex flex-col items-center justify-center py-16 px-4">
+				<div className="w-20 h-20 mb-6 rounded-2xl bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center justify-center shadow-lg">
+					<Sliders className="w-10 h-10 text-slate-400 dark:text-slate-600" />
+				</div>
 
-                <p className="text-sm text-gray-500 mt-2">
-                    Este modelo ainda não possui dados de conexão
-                </p>
-            </div>
-        );
-    }
+				<p className="text-lg font-bold text-slate-800 dark:text-slate-200">
+					Diagrama de conexões indisponível
+				</p>
 
-    return (
-        <div className="space-y-8 pb-8">
-            <div className="space-y-3">
-                <h2 className="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b-2 flex items-center gap-3" style={{ borderColor: serie.color }}>
-                    <span>📍</span>
-                    Diagrama de Conexões Interativo
-                </h2>
-                <p className="text-lg text-gray-600 leading-relaxed">
-                    Explore as conexões do {serie.nome_completo}. Use a busca, filtros por função ou passe o mouse para ver detalhes rápidos.
-                </p>
-            </div>
+				<p className="text-xs text-slate-400 dark:text-slate-500 mt-2">
+					Este modelo ainda não possui um mapa detalhado de conexões e barramentos.
+				</p>
+			</div>
+		);
+	}
 
-            <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 space-y-4">
-                <div className="flex flex-col sm:flex-row gap-4">
-                    <div className="flex-1 relative">
-                        <svg
-                            className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"
-                            fill="none"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                        </svg>
-                        <input
-                            type="text"
-                            placeholder="Buscar por nome ou número da conexão..."
-                            value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)}
-                            className="w-full pl-12 pr-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none text-gray-700"
-                            aria-label="Search connections"
-                        />
-                        {searchQuery && (
-                            <button
-                                onClick={() => setSearchQuery("")}
-                                className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
-                                aria-label="Clear search"
-                            >
-                                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-                                </svg>
-                            </button>
-                        )}
-                    </div>
+	return (
+		<div className="space-y-8 pb-8">
+			
+			{/* Header info */}
+			<div className="space-y-3">
+				<h2 className="text-xl font-bold text-slate-850 dark:text-slate-100 mb-4 pb-3 border-b border-slate-200/60 dark:border-slate-800/65 flex items-center gap-3 select-none">
+					<Sliders className="w-5 h-5" style={{ color: serie.color }} />
+					<span>Diagrama de Conexões Interativo</span>
+				</h2>
+				<p className="text-sm text-slate-550 dark:text-slate-400 leading-relaxed">
+					Explore todas as conexões e multiplexação do SoC do {serie.nome_completo}. Utilize o painel de busca rápida ou filtre por categoria para acender conexões específicas e ver mapas de barramentos.
+				</p>
+			</div>
 
-                    <div className="flex gap-2 bg-gray-100 rounded-xl p-1">
-                        <button
-                            onClick={() => setViewMode("grid")}
-                            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
-                                viewMode === "grid"
-                                    ? "bg-white shadow-sm text-gray-900"
-                                    : "text-gray-600 hover:text-gray-900"
-                            }`}
-                            aria-label="Grid view"
-                            aria-pressed={viewMode === "grid"}
-                        >
-                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
-                            </svg>
-                            <span className="hidden sm:inline font-medium">Grade</span>
-                        </button>
-                        <button
-                            onClick={() => setViewMode("list")}
-                            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
-                                viewMode === "list"
-                                    ? "bg-white shadow-sm text-gray-900"
-                                    : "text-gray-600 hover:text-gray-900"
-                            }`}
-                            aria-label="List view"
-                            aria-pressed={viewMode === "list"}
-                        >
-                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                <path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
-                            </svg>
-                            <span className="hidden sm:inline font-medium">Lista</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
+			{/* Search Panel */}
+			<div className="bg-white/60 dark:bg-slate-900/30 backdrop-blur-xl rounded-2xl border border-slate-200/60 dark:border-slate-800/80 p-5 space-y-4 shadow-xl">
+				<div className="flex flex-col sm:flex-row gap-4">
+					<div className="flex-1 relative">
+						<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-slate-400 dark:text-slate-500" />
+						<input
+							type="text"
+							placeholder="Buscar por nome ou número da conexão (Ex: GPIO1, TXD, XTAL)..."
+							value={searchQuery}
+							onChange={(e) => setSearchQuery(e.target.value)}
+							className="w-full pl-12 pr-10 py-3 rounded-xl border border-slate-200/60 dark:border-slate-800 bg-white dark:bg-slate-950/40 focus:border-purple-500/80 focus:ring-4 focus:ring-purple-500/10 text-slate-800 dark:text-slate-200 transition-all outline-none text-sm font-semibold"
+							aria-label="Search connections"
+						/>
+						{searchQuery && (
+							<button
+								onClick={() => setSearchQuery("")}
+								className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors"
+								aria-label="Clear search"
+							>
+								<X className="w-4 h-4" />
+							</button>
+						)}
+					</div>
 
-            <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
-                <div className="flex items-center gap-3 mb-4">
-                    <svg
-                        className="w-5 h-5 text-gray-700"
-                        fill="none"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                    >
-                        <path d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-                    </svg>
+					{/* View Mode Toggle */}
+					<div className="flex gap-1.5 bg-slate-100 dark:bg-slate-950/80 rounded-xl p-1 shrink-0 border border-slate-250/30 dark:border-slate-850/30">
+						<button
+							onClick={() => setViewMode("grid")}
+							className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all text-xs font-bold uppercase tracking-wider cursor-pointer active:scale-95 ${
+								viewMode === "grid"
+									? "bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100"
+									: "text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+							}`}
+							aria-label="Grid view"
+							aria-pressed={viewMode === "grid"}
+						>
+							<Grid className="w-3.5 h-3.5" />
+							<span>Grade</span>
+						</button>
+						
+						<button
+							onClick={() => setViewMode("list")}
+							className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all text-xs font-bold uppercase tracking-wider cursor-pointer active:scale-95 ${
+								viewMode === "list"
+									? "bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100"
+									: "text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+							}`}
+							aria-label="List view"
+							aria-pressed={viewMode === "list"}
+						>
+							<List className="w-3.5 h-3.5" />
+							<span>Lista</span>
+						</button>
+					</div>
+				</div>
+			</div>
 
-                    <h4 className="text-lg font-semibold text-gray-900">
-                        Filtre por Função
-                    </h4>
+			{/* Filters Panel */}
+			<div className="bg-white/60 dark:bg-slate-900/30 backdrop-blur-xl rounded-2xl border border-slate-200/60 dark:border-slate-800/80 p-5 shadow-xl">
+				<div className="flex items-center gap-3 mb-5 border-b border-slate-150/40 dark:border-slate-850/45 pb-3">
+					<Filter className="w-4 h-4 text-purple-500" />
+					<h4 className="text-sm font-bold text-slate-800 dark:text-slate-100 select-none">
+						Filtre por Função do Pino
+					</h4>
 
-                    <span className="ml-auto text-sm font-medium text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
-                        {visibleConnections.length} de {connections.length}
-                    </span>
-                </div>
+					<span className="ml-auto text-[10px] font-bold text-slate-400 dark:text-slate-500 bg-slate-100 dark:bg-slate-950 px-3 py-1 rounded-full border border-slate-200/30 dark:border-slate-850/30 shadow-xs select-none">
+						{visibleConnections.length} de {connections.length} ativos
+					</span>
+				</div>
 
-                <div className="flex flex-wrap gap-2.5">
-                    {FILTER_CATEGORIES.map((filter) => {
-                        const isActive = activeFilter === filter.id;
-                        const count = connections.filter(c => 
-                            filter.id === "All" ? true : c.categorias.includes(filter.id)
-                        ).length;
-                        
-                        return (
-                            <button
-                                key={filter.id}
-                                onClick={() => setActiveFilter(filter.id)}
-                                aria-pressed={isActive}
-                                aria-label={`Filter by ${filter.name}`}
-                                className={`group relative px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 ${
-                                    isActive
-                                        ? "shadow-lg transform scale-105 text-white"
-                                        : "bg-gray-50 text-gray-700 hover:bg-gray-100 hover:shadow-md"
-                                }`}
-                                style={{
-                                    backgroundColor: isActive ? filter.color : undefined,
-                                    borderColor: isActive ? filter.color : undefined,
-                                }}
-                            >
-                                <span className="flex items-center gap-2">
-                                    {filter.name}
-                                    <span className={`text-xs px-1.5 py-0.5 rounded-full ${
-                                        isActive ? "bg-white/20" : "bg-gray-200"
-                                    }`}>
-                                        {count}
-                                    </span>
-                                </span>
-                            </button>
-                        );
-                    })}
-                </div>
+				<div className="flex flex-wrap gap-2">
+					{FILTER_CATEGORIES.map((filter) => {
+						const isActive = activeFilter === filter.id;
+						const count = connections.filter(c => 
+							filter.id === "All" ? true : c.categorias.includes(filter.id)
+						).length;
+						
+						if (count === 0 && !isActive) return null; // Hide filters that don't apply to this chip
+						
+						return (
+							<button
+								key={filter.id}
+								onClick={() => setActiveFilter(filter.id)}
+								aria-pressed={isActive}
+								aria-label={`Filter by ${filter.name}`}
+								className={`group relative px-4 py-2 rounded-xl text-xs font-extrabold transition-all duration-300 focus:outline-none cursor-pointer active:scale-95 ${
+									isActive
+										? "shadow-lg text-white"
+										: "bg-slate-50/70 dark:bg-slate-950/20 text-slate-650 dark:text-slate-350 hover:bg-slate-100/50 dark:hover:bg-slate-850/30 border border-slate-200/40 dark:border-slate-850/40"
+								}`}
+								style={{
+									backgroundColor: isActive ? filter.color : undefined,
+									boxShadow: isActive ? `0 8px 15px -8px ${filter.color}` : undefined
+								}}
+							>
+								<span className="flex items-center gap-2">
+									<span>{filter.name}</span>
+									<span className={`text-[9px] px-1.5 py-0.5 rounded-full shrink-0 font-bold ${
+										isActive ? "bg-white/20 text-white" : "bg-slate-200/50 dark:bg-slate-800/80 text-slate-555 dark:text-slate-400"
+									}`}>
+										{count}
+									</span>
+								</span>
+							</button>
+						);
+					})}
+				</div>
 
-                {activeFilter !== "All" && activeCategories.length > 0 && (
-                    <div className="mt-6 pt-6 border-t border-gray-200">
-                        <p className="text-sm font-medium text-gray-600 mb-3">Categorias visíveis:</p>
-                        <div className="flex flex-wrap gap-2">
-                            {activeCategories.map(cat => (
-                                <span
-                                    key={cat.id}
-                                    className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-medium text-white shadow-sm"
-                                    style={{ backgroundColor: cat.color }}
-                                >
-                                    <span className="w-1.5 h-1.5 rounded-full bg-white"></span>
-                                    {cat.name}
-                                </span>
-                            ))}
-                        </div>
-                    </div>
-                )}
-            </div>
+				{/* Active Categories badges */}
+				{activeFilter !== "All" && activeCategories.length > 0 && (
+					<div className="mt-5 pt-5 border-t border-slate-100 dark:border-slate-850/40 select-none">
+						<p className="text-[10px] font-bold text-slate-400 dark:text-slate-500 mb-3 uppercase tracking-wider">Subcategorias ativadas por esse filtro:</p>
+						<div className="flex flex-wrap gap-2">
+							{activeCategories.map(cat => (
+								<span
+									key={cat.id}
+									className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-[10px] font-bold text-white shadow-xs"
+									style={{ backgroundColor: cat.color }}
+								>
+									<span className="w-1.5 h-1.5 rounded-full bg-white shrink-0"></span>
+									<span>{cat.name}</span>
+								</span>
+							))}
+						</div>
+					</div>
+				)}
+			</div>
 
-            {visibleConnections.length === 0 ? (
-                <div className="bg-linear-to-br from-gray-50 to-gray-100 rounded-2xl p-12 border-2 border-dashed border-gray-300 text-center">
-                    <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-200 flex items-center justify-center">
-                        <svg className="w-8 h-8 text-gray-400" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
-                            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                        </svg>
-                    </div>
-                    <p className="text-lg font-semibold text-gray-700 mb-2">Nenhuma conexão encontrada</p>
-                    <p className="text-sm text-gray-500">Tente ajustar os filtros ou termo de busca</p>
-                    <button
-                        onClick={() => {
-                            setActiveFilter("All");
-                            setSearchQuery("");
-                        }}
-                        className="mt-4 px-6 py-2 bg-gray-900 text-white rounded-xl hover:bg-gray-800 transition-colors font-medium"
-                    >
-                        Limpar filtros
-                    </button>
-                </div>
-            ) : viewMode === "grid" ? (
-                <div className="bg-linear-to-br from-gray-50 to-gray-100 rounded-2xl p-8 border-2 border-gray-200 shadow-inner">
-                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
-                        {visibleConnections.map((connection, index) => {
-                            const isHovered = hoveredConnection === index;
-                            const connectionId = `connection-${index}`;
-                            
-                            return (
-                                <div key={index} className="relative">
-                                    <button
-                                        id={connectionId}
-                                        data-connection-button
-                                        onClick={() => setSelectedConnection(connection)}
-                                        onMouseEnter={() => {
-                                            setHoveredConnection(index);
-                                            setShowTooltip(index);
-                                        }}
-                                        onMouseLeave={() => {
-                                            setHoveredConnection(null);
-                                            setShowTooltip(null);
-                                        }}
-                                        onFocus={() => setHoveredConnection(index)}
-                                        onBlur={() => setHoveredConnection(null)}
-                                        aria-label={`Connection ${connection.nome}, number ${connection.numero}`}
-                                        aria-describedby={showTooltip === index ? `tooltip-${index}` : undefined}
-                                        className="relative w-full flex flex-col items-center justify-center p-3 rounded-2xl border-2 transition-all duration-300 opacity-100 hover:scale-110 hover:shadow-2xl hover:z-10 cursor-pointer active:scale-95 focus:outline-none focus:border-4"
-                                        style={{
-                                            backgroundColor: type_colors[connection.tipo] + (isHovered ? "20" : "10"),
-                                            borderColor: isHovered ? type_colors[connection.tipo] : type_colors[connection.tipo] + "60",
-                                            transform: isHovered ? "translateY(-2px)" : undefined,
-                                            focusRingColor: type_colors[connection.tipo],
-                                        }}
-                                    >
-                                        <div
-                                            className="w-14 h-14 rounded-full flex items-center justify-center text-white font-bold text-sm mb-3 shadow-lg"
-                                            style={{ backgroundColor: type_colors[connection.tipo] }}
-                                        >
-                                            {typeof connection.numero === "number" 
-                                                ? connection.numero 
-                                                : connection.numero.substring(0, 4)}
-                                        </div>
+			{/* Diagram Workspace */}
+			{visibleConnections.length === 0 ? (
+				<div className="bg-slate-50/50 dark:bg-slate-900/10 backdrop-blur-xl rounded-2xl p-12 border-2 border-dashed border-slate-200 dark:border-slate-850/80 text-center shadow-inner">
+					<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-100 dark:bg-slate-950 flex items-center justify-center shadow-md">
+						<Search className="w-6 h-6 text-slate-400" />
+					</div>
+					<p className="text-base font-bold text-slate-800 dark:text-slate-200 mb-1 select-none">Nenhuma conexão encontrada</p>
+					<p className="text-xs text-slate-500 dark:text-slate-400">Tente ajustar seus termos de pesquisa ou limpe os filtros rápidos.</p>
+					
+					<button
+						onClick={() => {
+							setActiveFilter("All");
+							setSearchQuery("");
+						}}
+						className="mt-5 px-6 py-2.5 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-950 rounded-xl hover:opacity-90 transition-all font-bold text-xs uppercase tracking-wider cursor-pointer active:scale-95 shadow-lg"
+					>
+						Limpar Filtros e Busca
+					</button>
+				</div>
+			) : viewMode === "grid" ? (
+				/* Grid View Mode: Futuristic Electronic Chip Sockets */
+				<div className="bg-slate-100/50 dark:bg-slate-950/20 backdrop-blur-xl rounded-3xl p-6 md:p-8 border border-slate-200/50 dark:border-slate-850/60 shadow-inner">
+					<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+						{visibleConnections.map((connection, index) => {
+							const isHovered = hoveredConnection === index;
+							const connectionId = `connection-${index}`;
+							const baseColor = type_colors[connection.tipo] || "#94a3b8";
+							
+							return (
+								<div key={index} className="relative">
+									<button
+										id={connectionId}
+										data-connection-button
+										onClick={() => setSelectedConnection(connection)}
+										onMouseEnter={() => {
+											setHoveredConnection(index);
+											setShowTooltip(index);
+										}}
+										onMouseLeave={() => {
+											setHoveredConnection(null);
+											setShowTooltip(null);
+										}}
+										onFocus={() => setHoveredConnection(index)}
+										onBlur={() => setHoveredConnection(null)}
+										aria-label={`Pino ${connection.nome}, número ${connection.numero}`}
+										aria-describedby={showTooltip === index ? `tooltip-${index}` : undefined}
+										className="w-full flex flex-col items-center justify-center p-4 rounded-2xl border-2 transition-all duration-300 cursor-pointer active:scale-95 focus:outline-none"
+										style={{
+											backgroundColor: isHovered ? `${baseColor}24` : `${baseColor}0c`,
+											borderColor: isHovered ? baseColor : `${baseColor}40`,
+											boxShadow: isHovered ? `0 0 20px -5px ${baseColor}60` : 'none',
+											transform: isHovered ? "translateY(-4px)" : undefined,
+										}}
+									>
+										{/* Pad Contact Core Circle */}
+										<div
+											className="w-12 h-12 rounded-full flex items-center justify-center text-white font-extrabold text-xs mb-3 shadow-lg select-none"
+											style={{ backgroundColor: baseColor, boxShadow: `0 4px 10px -3px ${baseColor}` }}
+										>
+											{typeof connection.numero === "number" 
+												? connection.numero 
+												: connection.numero.substring(0, 4)}
+										</div>
 
-                                        <div className="text-xs font-bold text-center text-gray-900 leading-tight mb-2">
-                                            {connection.nome}
-                                        </div>
+										{/* Pad Name label */}
+										<div className="text-xs font-bold text-center text-slate-850 dark:text-slate-200 leading-tight mb-2 select-none group-hover:text-purple-600 transition-colors">
+											{connection.nome}
+										</div>
 
-                                        <div className="flex flex-wrap gap-1 justify-center leading-2">
-                                            {connection.categorias.slice(0, 5).map((cat) => (
-                                                <span
-                                                    key={cat}
-                                                    className="w-1.5 h-1.5 my-auto rounded-full"
-                                                    style={{ backgroundColor: getCategoryColor(cat) }}
-                                                    title={cat}
-                                                />
-                                            ))}
-                                            {connection.categorias.length > 5 && (
-                                                <span className="text-[10px] text-gray-500 font-medium leading-2">
-                                                    +{connection.categorias.length - 5}
-                                                </span>
-                                            )}
-                                        </div>
+										{/* Small Category dots indicator */}
+										<div className="flex flex-wrap gap-1 justify-center select-none">
+											{connection.categorias.slice(0, 5).map((cat) => (
+												<span
+													key={cat}
+													className="w-1.5 h-1.5 rounded-full shrink-0"
+													style={{ backgroundColor: getCategoryColor(cat) }}
+													title={cat === "Strapping" ? "Inicialização" : cat}
+												/>
+											))}
+											{connection.categorias.length > 5 && (
+												<span className="text-[9px] text-slate-400 dark:text-slate-500 font-bold ml-0.5 leading-none">
+													+{connection.categorias.length - 5}
+												</span>
+											)}
+										</div>
 
-                                        {connection.avisos && (
-                                            <div 
-                                                className="absolute -top-2 -right-2 bg-red-500 rounded-full p-1.5 shadow-lg ring-2 ring-white"
-                                                aria-label="Has restrictions"
-                                            >
-                                                <svg
-                                                    className="w-3.5 h-3.5 text-white"
-                                                    fill="none"
-                                                    strokeLinecap="round"
-                                                    strokeLinejoin="round"
-                                                    strokeWidth="2"
-                                                    viewBox="0 0 24 24"
-                                                    stroke="currentColor"
-                                                >
-                                                    <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                                                </svg>
-                                            </div>
-                                        )}
-                                    </button>
+										{/* High-Voltage warnings tags */}
+										{connection.avisos && (
+											<div 
+												className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 shadow-lg ring-2 ring-white dark:ring-slate-950 animate-pulse"
+												aria-label="Possui restrições de uso"
+											>
+												<AlertTriangle className="w-3 h-3" />
+											</div>
+										)}
+									</button>
 
-                                    {showTooltip === index && (
-                                        <div
-                                            id={`tooltip-${index}`}
-                                            role="tooltip"
-                                            className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-xl max-w-xs pointer-events-none animate-fadeIn"
-                                            style={{ minWidth: "200px" }}
-                                        >
-                                            <div className="font-bold mb-1">{connection.nome}</div>
-                                            <div className="text-gray-300 mb-2">Pino {connection.numero}</div>
-                                            <div className="flex flex-wrap gap-1 mb-2">
-                                                {connection.categorias.map((cat) => (
-                                                    <span
-                                                        key={cat}
-                                                        className="px-1.5 py-0.5 rounded text-[10px] font-medium"
-                                                        style={{ 
-                                                            backgroundColor: getCategoryColor(cat) + "40",
-                                                            color: "#fff"
-                                                        }}
-                                                    >
-                                                        {cat === "Strapping" ? "Inicialização" : cat}
-                                                    </span>
-                                                ))}
-                                            </div>
-                                            <div className="text-gray-400 text-[10px]">Clique para detalhes</div>
-                                            <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900"></div>
-                                        </div>
-                                    )}
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-            ) : (
-                <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
-                    <div className="overflow-x-auto">
-                        <table className="w-full">
-                            <thead className="bg-linear-to-r from-gray-50 to-gray-100 border-b-2 border-gray-200">
-                                <tr>
-                                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Pin</th>
-                                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Nome</th>
-                                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Categorias</th>
-                                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Funções</th>
-                                    <th className="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Avisos</th>
-                                </tr>
-                            </thead>
-                            <tbody className="divide-y divide-gray-200">
-                                {visibleConnections.map((connection, index) => (
-                                    <tr
-                                        key={index}
-                                        onClick={() => setSelectedConnection(connection)}
-                                        className="hover:bg-gray-50 cursor-pointer transition-colors group"
-                                    >
-                                        <td className="px-6 py-4 whitespace-nowrap">
-                                            <div
-                                                className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-md"
-                                                style={{ backgroundColor: type_colors[connection.tipo] }}
-                                            >
-                                                {typeof connection.numero === "number" 
-                                                    ? connection.numero 
-                                                    : connection.numero.substring(0, 4)}
-                                            </div>
-                                        </td>
-                                        <td className="px-6 py-4 whitespace-nowrap">
-                                            <div className="text-sm font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
-                                                {connection.nome}
-                                            </div>
-                                        </td>
-                                        <td className="px-6 py-4">
-                                            <div className="flex flex-wrap gap-1.5">
-                                                {connection.categorias.map((cat) => (
-                                                    <span
-                                                        key={cat}
-                                                        className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
-                                                        style={{ backgroundColor: getCategoryColor(cat) }}
-                                                    >
-                                                        {cat === "Strapping" ? "Inicialização" : cat}
-                                                    </span>
-                                                ))}
-                                            </div>
-                                        </td>
-                                        <td className="px-6 py-4">
-                                            <div className="text-sm text-gray-600 max-w-md">
-                                                {connection.funcoes.join(", ")}
-                                            </div>
-                                        </td>
-                                        <td className="px-6 py-4 text-center">
-                                            {connection.avisos ? (
-                                                <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium">
-                                                    <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
-                                                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                                                    </svg>
-                                                    Sim
-                                                </span>
-                                            ) : (
-                                                <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
-                                                    <svg className="w-3.5 h-3.5" 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>
-                                                    Não
-                                                </span>
-                                            )}
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            )}
+									{/* Sleek Tooltip Popover */}
+									{showTooltip === index && (
+										<div
+											id={`tooltip-${index}`}
+											role="tooltip"
+											className="absolute z-40 bottom-full left-1/2 -translate-x-1/2 mb-3 p-3 bg-slate-950/90 dark:bg-slate-900/90 backdrop-blur-md text-white text-[10px] rounded-xl shadow-2xl max-w-xs pointer-events-none animate-fadeIn border border-slate-850/50"
+											style={{ minWidth: "180px" }}
+										>
+											<div className="font-extrabold text-sm mb-1">{connection.nome}</div>
+											<div className="text-slate-400 mb-2 font-semibold">Pino Físico {connection.numero}</div>
+											<div className="flex flex-wrap gap-1 mb-2">
+												{connection.categorias.map((cat) => (
+													<span
+														key={cat}
+														className="px-1.5 py-0.5 rounded text-[8px] font-bold"
+														style={{ 
+															backgroundColor: `${getCategoryColor(cat)}24`,
+															color: getCategoryColor(cat)
+														}}
+													>
+														{cat === "Strapping" ? "Inicialização" : cat}
+													</span>
+												))}
+											</div>
+											<div className="text-purple-400 font-bold text-[9px] uppercase tracking-wider">Clique para detalhes</div>
+											<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-slate-950/95 dark:border-t-slate-900/95"></div>
+										</div>
+									)}
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			) : (
+				/* List View Mode: Interactive Zebra Table */
+				<div className="bg-white/80 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl border border-slate-200/60 dark:border-slate-800/80 overflow-hidden shadow-xl">
+					<div className="overflow-x-auto scrollbar-thin">
+						<table className="w-full text-left">
+							<thead>
+								<tr className="bg-slate-100/50 dark:bg-slate-950/50 border-b border-slate-200/60 dark:border-slate-850/60 select-none">
+									<th className="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">Pino</th>
+									<th className="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">Nome do Pad</th>
+									<th className="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">Categorias</th>
+									<th className="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">Multiplexação de Funções</th>
+									<th className="px-6 py-4 text-center text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">Restrições</th>
+								</tr>
+							</thead>
+							<tbody className="divide-y divide-slate-100 dark:divide-slate-850/30">
+								{visibleConnections.map((connection, index) => {
+									const baseColor = type_colors[connection.tipo] || "#94a3b8";
+									return (
+										<tr
+											key={index}
+											onClick={() => setSelectedConnection(connection)}
+											className="hover:bg-purple-500/5 dark:hover:bg-purple-400/5 cursor-pointer transition-colors group"
+										>
+											<td className="px-6 py-4 whitespace-nowrap">
+												<div
+													className="w-10 h-10 rounded-full flex items-center justify-center text-white font-extrabold text-xs shadow-md select-none"
+													style={{ backgroundColor: baseColor }}
+												>
+													{typeof connection.numero === "number" 
+														? connection.numero 
+														: connection.numero.substring(0, 4)}
+												</div>
+											</td>
+											
+											<td className="px-6 py-4 whitespace-nowrap">
+												<div className="text-sm font-bold text-slate-800 dark:text-slate-200 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
+													{connection.nome}
+												</div>
+											</td>
+											
+											<td className="px-6 py-4">
+												<div className="flex flex-wrap gap-1.5 select-none">
+													{connection.categorias.map((cat) => (
+														<span
+															key={cat}
+															className="inline-flex items-center px-2 py-0.5 rounded-md text-[9px] font-bold text-white shadow-xs"
+															style={{ backgroundColor: getCategoryColor(cat) }}
+														>
+															{cat === "Strapping" ? "Inicialização" : cat}
+														</span>
+													))}
+												</div>
+											</td>
+											
+											<td className="px-6 py-4">
+												<div className="text-xs text-slate-500 dark:text-slate-400 font-semibold max-w-md line-clamp-2 leading-relaxed">
+													{connection.funcoes.join(", ")}
+												</div>
+											</td>
+											
+											<td className="px-6 py-4 text-center whitespace-nowrap">
+												{connection.avisos ? (
+													<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-red-500/10 text-red-600 dark:text-red-400 text-[10px] font-bold uppercase border border-red-500/20 select-none">
+														<AlertTriangle className="w-3.5 h-3.5 shrink-0" />
+														<span>Restrito</span>
+													</span>
+												) : (
+													<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-[10px] font-bold uppercase border border-emerald-500/20 select-none">
+														<CheckCircle className="w-3.5 h-3.5 shrink-0" />
+														<span>Livre</span>
+													</span>
+												)}
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			)}
 
-            {connections.some(c => c.avisos) && (
-                <div className="bg-linear-to-r from-amber-50 to-yellow-50 border-2 border-amber-200 rounded-2xl p-6 shadow-sm">
-                    <div className="flex gap-4">
-                        <div className="shrink-0">
-                            <div className="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
-                                <svg
-                                    className="w-6 h-6 text-amber-600"
-                                    fill="none"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth="2"
-                                    viewBox="0 0 24 24"
-                                    stroke="currentColor"
-                                >
-                                    <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                                </svg>
-                            </div>
-                        </div>
+			{/* Global Warning notice */}
+			{connections.some(c => c.avisos) && (
+				<div className="bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 rounded-2xl p-6 shadow-sm select-none">
+					<div className="flex gap-4">
+						<div className="shrink-0">
+							<div className="w-12 h-12 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center">
+								<AlertTriangle className="w-6 h-6" />
+							</div>
+						</div>
 
-                        <div className="flex-1">
-                            <p className="text-lg font-bold text-amber-900 mb-3">
-                                Informações Importantes
-                            </p>
-                            <ul className="space-y-2.5 text-sm text-amber-800">
-                                <li className="flex items-start gap-3">
-                                    <span className="text-amber-600 mt-0.5 font-bold">•</span>
-                                    <span className="leading-relaxed">
-                                        Conexões com ícones de aviso possuem restrições de uso. Clique para mais detalhes.
-                                    </span>
-                                </li>
-                                <li className="flex items-start gap-3">
-                                    <span className="text-amber-600 mt-0.5 font-bold">•</span>
-                                    <span className="leading-relaxed">
-                                        Sempre consulte o datasheet oficial antes de usar conexões com funções especiais.
-                                    </span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            )}
+						<div className="flex-1">
+							<p className="text-base font-bold text-amber-850 dark:text-amber-300 mb-1">
+								Notas Importantes sobre a Pinagem
+							</p>
+							<ul className="space-y-1.5 text-xs text-amber-800 dark:text-amber-400 leading-relaxed">
+								<li>• Pinos contendo tags de <strong>Avisos/Restrições</strong> (cor vermelha) possuem papéis especiais de Strapping na inicialização, ou limitações analógicas. Clique neles para ver detalhes.</li>
+								<li>• Sempre garanta isolamento de circuitos capacitivos de toque em pinos com ruído de RF acoplado.</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			)}
 
-            {selectedConnection && (
-                <div
-                    className="fixed inset-0 bg-opacity-80 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-fadeIn"
-                    onClick={() => setSelectedConnection(null)}
-                    role="dialog"
-                    aria-modal="true"
-                    aria-labelledby="modal-title"
-                >
-                    <div
-                        className="bg-white rounded-3xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-hidden flex flex-col animate-slideUp"
-                        onClick={(e) => e.stopPropagation()}
-                    >
-                        <div className="sticky top-0 bg-linear-to-r from-white to-gray-50 border-b-2 border-gray-200 p-8 z-10">
-                            <div className="flex items-start justify-between gap-6">
-                                <div className="flex items-center gap-5 flex-1">
-                                    <div
-                                        className="w-16 h-16 rounded-2xl flex items-center justify-center text-white font-bold text-xl shadow-xl ring-4 ring-white shrink-0"
-                                        style={{ backgroundColor: type_colors[selectedConnection.tipo] }}
-                                    >
-                                        {typeof selectedConnection.numero === "number"
-                                            ? selectedConnection.numero
-                                            : selectedConnection.numero.substring(0, 4)}
-                                    </div>
-                                    <div className="min-w-0">
-                                        <h3 id="modal-title" className="text-3xl font-bold text-gray-900 mb-1">
-                                            {selectedConnection.nome}
-                                        </h3>
-                                        <p className="text-base text-gray-600">
-                                            Pino {selectedConnection.numero}
-                                        </p>
-                                    </div>
-                                </div>
+			{/* Interactive Overlay Dialog Details Sheet */}
+			{selectedConnection && mounted && createPortal(
+				<div
+					className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4 z-50 animate-fadeIn"
+					onClick={() => setSelectedConnection(null)}
+					role="dialog"
+					aria-modal="true"
+					aria-labelledby="modal-title"
+				>
+					<div
+						className="bg-white/95 dark:bg-slate-950/95 backdrop-blur-xl border border-slate-200/50 dark:border-slate-800/80 rounded-3xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-hidden flex flex-col animate-slideUp"
+						onClick={(e) => e.stopPropagation()}
+					>
+						{/* Dialog Header */}
+						<div className="sticky top-0 bg-white/50 dark:bg-slate-950/50 border-b border-slate-200/60 dark:border-slate-850/60 p-6 md:p-8 z-10">
+							<div className="flex items-start justify-between gap-6">
+								<div className="flex items-center gap-4 flex-1">
+									<div
+										className="w-14 h-14 rounded-2xl flex items-center justify-center text-white font-extrabold text-lg shadow-xl shrink-0"
+										style={{ backgroundColor: type_colors[selectedConnection.tipo] || "#64748b" }}
+									>
+										{typeof selectedConnection.numero === "number"
+											? selectedConnection.numero
+											: selectedConnection.numero.substring(0, 4)}
+									</div>
+									<div className="min-w-0">
+										<h3 id="modal-title" className="text-2xl font-display font-extrabold text-slate-850 dark:text-slate-100 mb-1 leading-none tracking-tight">
+											{selectedConnection.nome}
+										</h3>
+										<p className="text-xs text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider">
+											Pino Físico {selectedConnection.numero}
+										</p>
+									</div>
+								</div>
 
-                                <button
-                                    onClick={() => setSelectedConnection(null)}
-                                    aria-label="Close modal"
-                                    className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-xl shrink-0"
-                                >
-                                    <svg
-                                        className="w-7 h-7"
-                                        fill="none"
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth="2"
-                                        viewBox="0 0 24 24"
-                                        stroke="currentColor"
-                                    >
-                                        <path d="M6 18L18 6M6 6l12 12" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
+								<button
+									onClick={() => setSelectedConnection(null)}
+									aria-label="Fechar"
+									className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors p-2 bg-slate-100 dark:bg-slate-900 rounded-xl shrink-0 cursor-pointer active:scale-95"
+								>
+									<X className="w-5 h-5" />
+								</button>
+							</div>
+						</div>
 
-                        <div className="flex-1 overflow-y-auto p-8 space-y-8">
-                            {selectedConnection.categorias.length > 0 && (<div>
-                                <h4 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
-                                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                        <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
-                                    </svg>
-                                    Categorias
-                                </h4>
+						{/* Dialog Body Contents */}
+						<div className="flex-1 overflow-y-auto p-6 md:p-8 space-y-8 scrollbar-thin">
+							
+							{/* Categories */}
+							{selectedConnection.categorias.length > 0 && (
+								<div>
+									<h4 className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3 flex items-center gap-2 select-none">
+										<Tag className="w-4 h-4 text-purple-500" />
+										<span>Categorias de Multiplexação</span>
+									</h4>
 
-                                <div className="flex flex-wrap gap-2.5">
-                                    {selectedConnection.categorias.map((cat) => (
-                                        <span
-                                            key={cat}
-                                            className="px-4 py-2 rounded-xl text-sm font-bold text-white shadow-md"
-                                            style={{ backgroundColor: getCategoryColor(cat) }}
-                                        >
-                                            {cat === "Strapping" ? "Inicialização" : cat}
-                                        </span>
-                                    ))}
-                                </div>
-                            </div>)}
+									<div className="flex flex-wrap gap-2">
+										{selectedConnection.categorias.map((cat) => (
+											<span
+												key={cat}
+												className="px-3 py-1.5 rounded-xl text-xs font-bold text-white shadow-md select-none"
+												style={{ backgroundColor: getCategoryColor(cat) }}
+											>
+												{cat === "Strapping" ? "Inicialização" : cat}
+											</span>
+										))}
+									</div>
+								</div>
+							)}
 
-                            {selectedConnection.alimentacao && (
-                                <div>
-                                    <h4 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
-                                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                            <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
-                                        </svg>
-                                        Alimentado por:
-                                    </h4>
-                                    <div className="bg-linear-to-br from-blue-50 to-indigo-50 rounded-2xl p-6 border border-blue-200">
-                                        <ul className="space-y-3">
-                                            {selectedConnection.alimentacao.map((source, index) => (
-                                                <li key={index} className="flex items-start gap-4 text-sm group">
-                                                    <span
-                                                        className="mt-1.5 shrink-0 w-2 h-2 rounded-full"
-                                                        style={{ backgroundColor: type_colors["power"] }}
-                                                    />
-                                                    <span className="text-gray-800 font-medium leading-relaxed">{source}</span>
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    </div>
-                                </div>
-                            )}
+							{/* Power Source */}
+							{selectedConnection.alimentacao && (
+								<div>
+									<h4 className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3 flex items-center gap-2 select-none">
+										<Zap className="w-4 h-4 text-red-500" />
+										<span>Domínio de Alimentação Interna</span>
+									</h4>
+									<div className="bg-slate-50 dark:bg-slate-900/30 rounded-2xl p-5 border border-slate-200/50 dark:border-slate-850/50">
+										<ul className="space-y-2.5">
+											{selectedConnection.alimentacao.map((source, index) => (
+												<li key={index} className="flex items-center gap-3 text-xs font-bold text-slate-700 dark:text-slate-300">
+													<span
+														className="shrink-0 w-2 h-2 rounded-full"
+														style={{ backgroundColor: type_colors["power"] }}
+													/>
+													<span>{source}</span>
+												</li>
+											))}
+										</ul>
+									</div>
+								</div>
+							)}
 
-                            <div>
-                                <h4 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
-                                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                        <path d="M13 7H7v6h6V7zM5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5z" />
-                                    </svg>
-                                    Funções da Conexão
-                                </h4>
+							{/* Function Multiplexation */}
+							<div>
+								<h4 className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3 flex items-center gap-2 select-none">
+									<Sliders className="w-4 h-4 text-emerald-500" />
+									<span>Barramentos de Funções Disponíveis</span>
+								</h4>
 
-                                <div className="bg-linear-to-br from-gray-50 to-gray-100 rounded-2xl p-6 border border-gray-200">
-                                    <ul className="space-y-3">
-                                        {selectedConnection.funcoes.map((func, index) => (
-                                            <li key={index} className="flex items-start gap-4 text-sm group">
-                                                <span
-                                                    className="mt-1.5 shrink-0 w-2 h-2 rounded-full"
-                                                    style={{ backgroundColor: type_colors[selectedConnection.tipo] }}
-                                                />
-                                                <span className="text-gray-800 font-medium leading-relaxed">{func}</span>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </div>
-                            </div>
+								<div className="bg-slate-50 dark:bg-slate-900/30 rounded-2xl p-5 border border-slate-200/50 dark:border-slate-850/50">
+									<ul className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+										{selectedConnection.funcoes.map((func, index) => (
+											<li key={index} className="flex items-center gap-3 text-xs font-bold text-slate-700 dark:text-slate-300">
+												<span
+													className="shrink-0 w-2 h-2 rounded-full"
+													style={{ backgroundColor: type_colors[selectedConnection.tipo] || "#64748b" }}
+												/>
+												<span>{func}</span>
+											</li>
+										))}
+									</ul>
+								</div>
+							</div>
 
-                            {selectedConnection.avisos && (
-                                <div className="bg-linear-to-br from-red-50 to-rose-50 border-2 border-red-200 rounded-2xl p-6 shadow-sm">
-                                    <div className="flex gap-4">
-                                        <div className="shrink-0">
-                                            <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
-                                                <svg
-                                                    className="w-6 h-6 text-red-600"
-                                                    fill="none"
-                                                    strokeLinecap="round"
-                                                    strokeLinejoin="round"
-                                                    strokeWidth="2"
-                                                    viewBox="0 0 24 24"
-                                                    stroke="currentColor"
-                                                >
-                                                    <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                                                </svg>
-                                            </div>
-                                        </div>
-                                        <div className="flex-1">
-                                            <p className="text-lg font-bold text-red-900 mb-3">
-                                                Avisos Importantes
-                                            </p>
-                                            {selectedConnection.avisos.map((aviso, index) => (
-                                                <div key={index} className="flex items-start gap-3 mb-2">
-                                                    <span className="text-red-600 font-bold">•</span>
-                                                    <span className="text-sm text-red-800 leading-relaxed">
-                                                        {aviso}
-                                                    </span>
-                                                </div>
-                                            ))}
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
+							{/* Alerts/Warnings */}
+							{selectedConnection.avisos && (
+								<div className="bg-red-500/10 border border-red-500/20 rounded-2xl p-5 shadow-xs">
+									<div className="flex gap-4">
+										<div className="shrink-0">
+											<div className="w-10 h-10 rounded-xl bg-red-500/15 border border-red-500/25 flex items-center justify-center text-red-500">
+												<AlertTriangle className="w-5 h-5" />
+											</div>
+										</div>
+										<div className="flex-1">
+											<p className="text-sm font-bold text-red-900 dark:text-red-300 mb-2">
+												Avisos Importantes de Engenharia
+											</p>
+											{selectedConnection.avisos.map((aviso, index) => (
+												<div key={index} className="flex items-start gap-2.5 mb-1.5 text-xs text-red-800 dark:text-red-400 font-semibold leading-relaxed">
+													<span>•</span>
+													<span>{aviso}</span>
+												</div>
+											))}
+										</div>
+									</div>
+								</div>
+							)}
+						</div>
 
-                        <div className="sticky bottom-0 bg-linear-to-t from-gray-50 to-white border-t-2 border-gray-200 p-6">
-                            <button
-                                onClick={() => setSelectedConnection(null)}
-                                className="w-full py-4 rounded-2xl font-bold text-white shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-offset-2"
-                                style={{ backgroundColor: serie.color }}
-                                aria-label="Close modal"
-                            >
-                                Fechar
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            )}
+						{/* Dialog Footer */}
+						<div className="sticky bottom-0 bg-white/50 dark:bg-slate-950/50 border-t border-slate-200/60 dark:border-slate-850/60 p-5">
+							<button
+								onClick={() => setSelectedConnection(null)}
+								className="w-full py-3.5 rounded-xl font-bold text-white text-xs uppercase tracking-wider shadow-lg hover:opacity-90 active:scale-98 transition-all cursor-pointer"
+								style={{ 
+									backgroundColor: serie.color, 
+									boxShadow: `0 8px 25px -8px ${serie.color}` 
+								}}
+								aria-label="Close modal"
+							>
+								Confirmar e Fechar
+							</button>
+						</div>
+					</div>
+				</div>,
+				document.body
+			)}
 
-            <style jsx>{`
-                @keyframes fadeIn {
-                    from {
-                        opacity: 0;
-                    }
-                    to {
-                        opacity: 1;
-                    }
-                }
-                
-                @keyframes slideUp {
-                    from {
-                        transform: translateY(20px);
-                        opacity: 0;
-                    }
-                    to {
-                        transform: translateY(0);
-                        opacity: 1;
-                    }
-                }
-                
-                .animate-fadeIn {
-                    animation: fadeIn 0.2s ease-out;
-                }
-                
-                .animate-slideUp {
-                    animation: slideUp 0.3s ease-out;
-                }
-
-                /* Smooth scroll for modal */
-                .overflow-y-auto {
-                    scrollbar-width: thin;
-                    scrollbar-color: #cbd5e0 #f7fafc;
-                }
-
-                .overflow-y-auto::-webkit-scrollbar {
-                    width: 8px;
-                }
-
-                .overflow-y-auto::-webkit-scrollbar-track {
-                    background: #f7fafc;
-                    border-radius: 10px;
-                }
-
-                .overflow-y-auto::-webkit-scrollbar-thumb {
-                    background: #cbd5e0;
-                    border-radius: 10px;
-                }
-
-                .overflow-y-auto::-webkit-scrollbar-thumb:hover {
-                    background: #a0aec0;
-                }
-            `}</style>
-        </div>
-    );
+			<style jsx>{`
+				@keyframes fadeIn {
+					from {
+						opacity: 0;
+					}
+					to {
+						opacity: 1;
+					}
+				}
+				
+				@keyframes slideUp {
+					from {
+						transform: translateY(20px);
+						opacity: 0;
+					}
+					to {
+						transform: translateY(0);
+						opacity: 1;
+					}
+				}
+				
+				.animate-fadeIn {
+					animation: fadeIn 0.2s ease-out;
+				}
+				
+				.animate-slideUp {
+					animation: slideUp 0.3s ease-out;
+				}
+			`}</style>
+		</div>
+	);
 }
\ No newline at end of file
diff --git a/components/Footer.jsx b/components/Footer.jsx
index 5dadd15..f683b9c 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -1,123 +1,147 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { ExternalLink } from "lucide-react";
+
 export default function Footer() {
-    const year = new Date().getFullYear();
+	const [year, setYear] = useState(2026);
 
-    return (
-        <footer role="contentinfo" aria-label="Rodapé do site ESPDocs" className="bg-linear-to-r from-blue-600 to-purple-600 text-white mt-12">
-            <div className="max-w-6xl mx-auto px-6 pt-8 pb-4 rounded-t-2xl shadow-inner border-t border-white/10">
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                    <div className="space-y-3">
-                        <h3 className="text-2xl font-extrabold tracking-tight">ESPDocs</h3>
-                        <p className="text-sm text-white/90 max-w-sm">
-                            Documentação não oficial em português para ESP32 — focada em clareza, exemplos práticos e comunidade.
-                        </p>
+	useEffect(() => {
+		setYear(new Date().getFullYear());
+	}, []);
 
-                        <div className="">
-                            <a
-                                href="https://github.com/lucasrguerra/ESPDocs"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                aria-label="Ver repositório do ESPDocs no GitHub (abre em nova aba)"
-                                className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 px-3 py-2 rounded-md text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-white/30 transition"
-                            >
-                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="opacity-90">
-                                    <path d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1 1.6-.7 1.9-1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.5.4.9 1.1.9 2.2v3.2c0 .3.2.7.8.6A12 12 0 0012 .5z" fill="currentColor"/>
-                                </svg>
-                                Ver no GitHub
-                            </a>
-                        </div>
-                    </div>
+	return (
+		<footer role="contentinfo" aria-label="Rodapé do site ESPDocs" className="bg-slate-50 dark:bg-slate-950 text-slate-600 dark:text-slate-400 mt-24 border-t border-slate-250/30 dark:border-slate-800/80 transition-all duration-300">
+			<div className="max-w-7xl mx-auto px-6 py-12 md:py-16">
+				<div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-16">
+					
+					{/* Coluna 1: Logo & Info */}
+					<div className="space-y-4">
+						<h3 className="text-2xl font-display font-bold text-slate-800 dark:text-slate-100">
+							ESPDocs
+						</h3>
+						<p className="text-sm leading-relaxed text-slate-500 dark:text-slate-400">
+							Plataforma brasileira e independente que centraliza e organiza informações técnicas sobre o ecossistema ESP32. Focada em clareza, usabilidade e agilidade no desenvolvimento de hardware.
+						</p>
+						
+						<div className="pt-2">
+							<a
+								href="https://github.com/lucasrguerra/ESPDocs"
+								target="_blank"
+								rel="noopener noreferrer"
+								aria-label="Ver repositório do ESPDocs no GitHub (abre em nova aba)"
+								className="inline-flex items-center gap-2 bg-slate-200/60 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all cursor-pointer hover:shadow-xs active:scale-[0.98]"
+							>
+								<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+									<path d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1 1.6-.7 1.9-1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.5.4.9 1.1.9 2.2v3.2c0 .3.2.7.8.6A12 12 0 0012 .5z" fill="currentColor"/>
+								</svg>
+								<span>Ver no GitHub</span>
+							</a>
+						</div>
+					</div>
 
-                    <nav aria-label="Links úteis" className="text-sm">
-                        <h4 className="text-sm font-semibold mb-2">Links úteis</h4>
-                        <ul className="space-y-2">
-                            <li>
-                                <a
-                                    href="https://github.com/lucasrguerra/ESPDocs"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="hover:underline text-white/95 focus:outline-none focus:ring-2 focus:ring-white/20 rounded"
-                                    aria-label="Abrir repositório no GitHub"
-                                >
-                                    Repositório no GitHub
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    href="https://github.com/lucasrguerra/ESPDocs/issues"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="hover:underline text-white/90 focus:outline-none focus:ring-2 focus:ring-white/20 rounded"
-                                    aria-label="Abrir issues do repositório"
-                                >
-                                    Reportar bug / Abrir issue
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    href="https://cienciaembarcada.com.br"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="hover:underline text-white/90 focus:outline-none focus:ring-2 focus:ring-white/20 rounded"
-                                    aria-label="Visitar Ciência Embarcada (abre em nova aba)"
-                                >
-                                    Ciência Embarcada
-                                </a>
-                            </li>
-                        </ul>
-                    </nav>
+					{/* Coluna 2: Links Úteis */}
+					<nav aria-label="Links úteis" className="space-y-4">
+						<h4 className="text-sm font-bold uppercase tracking-wider text-slate-800 dark:text-slate-200">
+							Recursos
+						</h4>
+						<ul className="space-y-3 text-sm">
+							<li>
+								<a
+									href="https://github.com/lucasrguerra/ESPDocs"
+									target="_blank"
+									rel="noopener noreferrer"
+									className="hover:text-purple-600 dark:hover:text-purple-400 transition-colors flex items-center gap-1.5"
+									aria-label="Abrir repositório no GitHub"
+								>
+									<span>Repositório Principal</span>
+									<ExternalLink className="w-3.5 h-3.5 opacity-60" />
+								</a>
+							</li>
+							<li>
+								<a
+									href="https://github.com/lucasrguerra/ESPDocs/issues"
+									target="_blank"
+									rel="noopener noreferrer"
+									className="hover:text-purple-600 dark:hover:text-purple-400 transition-colors flex items-center gap-1.5"
+									aria-label="Abrir issues do repositório"
+								>
+									<span>Reportar um Bug / Feedback</span>
+									<ExternalLink className="w-3.5 h-3.5 opacity-60" />
+								</a>
+							</li>
+							<li>
+								<a
+									href="https://cienciaembarcada.com.br"
+									target="_blank"
+									rel="noopener noreferrer"
+									className="hover:text-purple-600 dark:hover:text-purple-400 transition-colors flex items-center gap-1.5"
+									aria-label="Visitar Ciência Embarcada (abre em nova aba)"
+								>
+									<span className="font-semibold text-purple-600 dark:text-purple-400">Ciência Embarcada</span>
+									<ExternalLink className="w-3.5 h-3.5 opacity-60 text-purple-600 dark:text-purple-400" />
+								</a>
+							</li>
+						</ul>
+					</nav>
 
-                    <div className="space-y-3">
-                        <h4 className="text-sm font-semibold">Créditos</h4>
-                        <p className="text-sm text-white/90">
-                            Desenvolvido por{' '}
-                            <a
-                                href="https://linkedin.com/in/lucasrguerra"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="underline hover:text-white"
-                                aria-label="Perfil LinkedIn de Lucas Rayan Guerra (abre em nova aba)"
-                            >
-                                Lucas Rayan Guerra
-                            </a>
-                            .
-                        </p>
+					{/* Coluna 3: Autor & Social */}
+					<div className="space-y-4">
+						<h4 className="text-sm font-bold uppercase tracking-wider text-slate-800 dark:text-slate-200">
+							Sobre o Autor
+						</h4>
+						<p className="text-sm leading-relaxed text-slate-500 dark:text-slate-400">
+							Desenvolvido com dedicação por{' '}
+							<a
+								href="https://linkedin.com/in/lucasrguerra"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="font-semibold underline text-slate-700 dark:text-slate-200 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
+								aria-label="Perfil LinkedIn de Lucas Rayan Guerra (abre em nova aba)"
+							>
+								Lucas Rayan Guerra
+							</a>
+							, compartilhando eletrônica, IoT e computação no Brasil.
+						</p>
 
-                        <div className="flex items-center gap-3 mt-2">
-                            <a
-                                href="https://github.com/lucasrguerra/ESPDocs"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="inline-flex items-center justify-center w-9 h-9 rounded-md bg-white/10 hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/20"
-                                aria-label="GitHub do projeto"
-                            >
-                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                                    <path d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1 1.6-.7 1.9-1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.5.4.9 1.1.9 2.2v3.2c0 .3.2.7.8.6A12 12 0 0012 .5z" fill="currentColor"/>
-                                </svg>
-                            </a>
+						<div className="flex items-center gap-3 pt-2">
+							<a
+								href="https://github.com/lucasrguerra/ESPDocs"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-slate-200/60 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 transition-all cursor-pointer shadow-xs"
+								aria-label="GitHub do projeto"
+							>
+								<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+									<path d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.3.7-4-1.6-4-1.6-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1 1.6-.7 1.9-1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 3 .1 3.3.8.8 1.2 1.9 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.5.4.9 1.1.9 2.2v3.2c0 .3.2.7.8.6A12 12 0 0012 .5z" fill="currentColor"/>
+								</svg>
+							</a>
 
-                            <a
-                                href="https://linkedin.com/in/lucasrguerra"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="inline-flex items-center justify-center w-9 h-9 rounded-md bg-white/10 hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/20"
-                                aria-label="LinkedIn do autor"
-                            >
-                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                                    <path d="M4.98 3.5a2.5 2.5 0 11.001 5.001A2.5 2.5 0 014.98 3.5zM3 8.98h4v12H3v-12zM9.5 8.98h3.8v1.6h.1c.5-.9 1.8-1.9 3.6-1.9 3.8 0 4.5 2.5 4.5 5.8v6.5h-4v-5.8c0-1.4-.1-3.2-2-3.2-2 0-2.3 1.6-2.3 3.1v5.9h-4v-12z" fill="currentColor"/>
-                                </svg>
-                            </a>
-                        </div>
-                    </div>
-                </div>
+							<a
+								href="https://linkedin.com/in/lucasrguerra"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-slate-200/60 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 transition-all cursor-pointer shadow-xs"
+								aria-label="LinkedIn do autor"
+							>
+								<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+									<path d="M4.98 3.5a2.5 2.5 0 11.001 5.001A2.5 2.5 0 014.98 3.5zM3 8.98h4v12H3v-12zM9.5 8.98h3.8v1.6h.1c.5-.9 1.8-1.9 3.6-1.9 3.8 0 4.5 2.5 4.5 5.8v6.5h-4v-5.8c0-1.4-.1-3.2-2-3.2-2 0-2.3 1.6-2.3 3.1v5.9h-4v-12z" fill="currentColor"/>
+								</svg>
+							</a>
+						</div>
+					</div>
+				</div>
 
-                <div className="mt-6 pt-4 border-t border-white/10 text-sm text-white/80 text-center">
-                    <div>
-                        © {year} ESPDocs — Conteúdo não oficial. Consulte sempre datasheets e documentos oficiais para decisões críticas.
-                    </div>
-                </div>
-            </div>
-        </footer>
-    );
+				{/* Divisor & Isenção */}
+				<div className="mt-12 pt-8 border-t border-slate-205/60 dark:border-slate-800/80 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-400 dark:text-slate-500">
+					<p className="text-center md:text-left leading-relaxed">
+						© {year} ESPDocs. Esta plataforma independente de código aberto não possui afiliação com a Espressif Systems.
+					</p>
+					<p className="text-center md:text-right shrink-0">
+						Feito para a comunidade maker 🇧🇷
+					</p>
+				</div>
+			</div>
+		</footer>
+	);
 }
\ No newline at end of file
diff --git a/components/Header.jsx b/components/Header.jsx
index 9278ab5..838d934 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -1,181 +1,223 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Link from "next/link";
-
-import Button from "@mui/material/Button";
-import Drawer from "@mui/material/Drawer";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-
-import MenuIcon from "@mui/icons-material/Menu";
-import HomeIcon from "@mui/icons-material/Home";
-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";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import FindInPageIcon from "@mui/icons-material/FindInPage";
+import { useTheme } from "next-themes";
+import { createPortal } from "react-dom";
+import { 
+	Home, 
+	Info, 
+	BookOpen, 
+	Cpu, 
+	SlidersHorizontal, 
+	Terminal, 
+	Scale, 
+	ShoppingBag, 
+	Menu, 
+	X, 
+	Sun, 
+	Moon 
+} from "lucide-react";
 
 export default function Header() {
-    const [drawerOpen, setDrawerOpen] = useState(false);
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const [mounted, setMounted] = useState(false);
+	const pathname = usePathname();
 
-    const pathname = usePathname();
-    const menuItems = [
-        { text: "Início", href: "/", icon: <HomeIcon />, featured: true },
-        { text: "Sobre o Projeto", brief: "Sobre", href: "/sobre", icon: <AboutIcon /> },
-        { text: "Glossário", href: "/glossario", icon: <MenuBookIcon /> },
-        { text: "Séries", href: "/series", icon: <ModelsIcon />, featured: true },
-        { text: "Seletor de ESP32", brief: "Seletor", href: "/seletor", icon: <FindInPageIcon />, featured: true },
-        { text: "Frameworks", href: "/frameworks", icon: <FrameworksIcon />, featured: true },
-        { text: "Comparar Séries", brief: "Comparar", href: "/comparacao", icon: <CompareIcon />, featured: true },
-        { text: "Catálogo de Placas", brief: "Catálogo", href: "/catalogo", icon: <ShoppingCartIcon /> },
-    ];
+	useEffect(() => {
+		setMounted(true);
+	}, []);
 
-    const featuredItems = menuItems.filter(item => item.featured);
+	const menuItems = [
+		{ text: "Início", href: "/", icon: <Home className="w-4 h-4" />, featured: true },
+		{ text: "Sobre o Projeto", brief: "Sobre", href: "/sobre", icon: <Info className="w-4 h-4" /> },
+		{ text: "Glossário", href: "/glossario", icon: <BookOpen className="w-4 h-4" /> },
+		{ text: "Séries", href: "/series", icon: <Cpu className="w-4 h-4" />, featured: true },
+		{ text: "Seletor de ESP32", brief: "Seletor", href: "/seletor", icon: <SlidersHorizontal className="w-4 h-4" />, featured: true },
+		{ text: "Frameworks", href: "/frameworks", icon: <Terminal className="w-4 h-4" />, featured: true },
+		{ text: "Comparar Séries", brief: "Comparar", href: "/comparacao", icon: <Scale className="w-4 h-4" />, featured: true },
+		{ text: "Catálogo de Placas", brief: "Catálogo", href: "/catalogo", icon: <ShoppingBag className="w-4 h-4" /> },
+	];
 
-    function isActive(href) {
-        if (href === "/") {
-            return pathname === "/";
-        }
-        
-        return String(pathname).includes(href) && href !== "/";
-    }
+	const featuredItems = menuItems.filter(item => item.featured);
 
-    return (
-        <header className="bg-white/80 backdrop-blur-md py-4 px-4 md:px-8 text-black shadow-lg border-b border-gray-100 sticky top-0 z-50">
-            <div className="flex justify-between max-w-7xl mx-auto items-center gap-8">
-                <Link href="/" className="group shrink-0">
-                    <h1 className="text-2xl md:text-3xl font-bold bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent transition-all duration-300 group-hover:scale-105">
-                        ESPDocs
-                    </h1>
-                </Link>
+	function isActive(href) {
+		if (href === "/") {
+			return pathname === "/";
+		}
+		return String(pathname).includes(href) && href !== "/";
+	}
 
-                {/* Menu Desktop - visível em telas médias e grandes */}
-                <nav className="hidden lg:flex items-center gap-2 flex-1 justify-end" aria-label="Menu principal">
-                    {featuredItems.map((item) => (
-                        <Link
-                            key={item.text}
-                            href={item.href}
-                            className={`group flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium transition-all duration-300 ${
-                                isActive(item.href)
-                                    ? "bg-linear-to-r from-blue-600 to-purple-600 text-white shadow-lg shadow-purple-200"
-                                    : "text-gray-700 hover:bg-linear-to-r hover:from-blue-50 hover:to-purple-50 hover:shadow-md hover:-translate-y-0.5"
-                            }`}
-                            aria-label={item.brief || item.text}
-                            aria-current={isActive(item.href) ? "page" : undefined}
-                        >
-                            <span className={`transition-transform duration-300 ${
-                                isActive(item.href) ? "scale-110" : "group-hover:scale-110"
-                            }`}>
-                                {item.icon}
-                            </span>
-                            <span className="text-sm whitespace-nowrap">{item.brief || item.text}</span>
-                        </Link>
-                    ))}
-                    
-                    {/* Botão Menu Completo Desktop */}
-                    <Button 
-                        variant="outlined" 
-                        onClick={() => setDrawerOpen(true)}
-                        className="border-2 border-gray-300 text-gray-700 hover:border-purple-500 hover:text-purple-600 transition-all duration-300 hover:shadow-lg rounded-xl! px-4"
-                        aria-label="Abrir menu completo"
-                        aria-expanded={drawerOpen}
-                        aria-controls="mobile-menu-drawer"
-                    >
-                        <MenuIcon />
-                    </Button>
-                </nav>
+	// Lock scroll when mobile menu is open
+	useEffect(() => {
+		if (drawerOpen) {
+			document.body.style.overflow = "hidden";
+		} else {
+			document.body.style.overflow = "";
+		}
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [drawerOpen]);
 
-                {/* Botão Menu Mobile - visível apenas em telas pequenas */}
-                <div className="lg:hidden">
-                    <Button 
-                        variant="outlined" 
-                        onClick={() => setDrawerOpen(true)}
-                        className="border-2 border-gray-300 text-gray-700 hover:border-purple-500 hover:text-purple-600 transition-all duration-300 hover:shadow-lg rounded-xl! px-4"
-                        aria-label="Abrir menu de navegação"
-                        aria-expanded={drawerOpen}
-                        aria-controls="mobile-menu-drawer"
-                    >
-                        <MenuIcon />
-                    </Button>
-                </div>
-            </div>
+	return (
+		<header className="bg-white/80 dark:bg-slate-950/80 backdrop-blur-md py-4 px-4 md:px-8 shadow-xs border-b border-slate-100 dark:border-slate-800/60 sticky top-0 z-50 transition-colors duration-300">
+			<div className="flex justify-between max-w-7xl mx-auto items-center gap-8">
+				{/* LOGO */}
+				<Link href="/" className="group shrink-0">
+					<h1 className="text-2xl md:text-3xl font-display font-extrabold bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent transition-all duration-300 group-hover:scale-[1.02]">
+						ESPDocs
+					</h1>
+				</Link>
 
-            {/* Drawer Mobile */}
-            <Drawer 
-                anchor="right" 
-                open={drawerOpen} 
-                onClose={() => setDrawerOpen(false)}
-                id="mobile-menu-drawer"
-            >
-                <div className="p-6 w-72">
-                    <div className="mb-6">
-                        <h2 className="text-2xl font-bold bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-                            Menu
-                        </h2>
-                        <div className="h-1 w-16 bg-linear-to-r from-blue-600 to-purple-600 rounded-full mt-2"></div>
-                    </div>
+				{/* Menu Desktop */}
+				<nav className="hidden lg:flex items-center gap-2 flex-1 justify-end" aria-label="Menu principal">
+					{featuredItems.map((item) => (
+						<Link
+							key={item.text}
+							href={item.href}
+							className={`group flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-300 text-sm ${
+								isActive(item.href)
+									? "bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-md shadow-purple-500/10"
+									: "text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-900/60 hover:text-purple-600 dark:hover:text-purple-400"
+							}`}
+							aria-label={item.brief || item.text}
+							aria-current={isActive(item.href) ? "page" : undefined}
+						>
+							<span className={`transition-transform duration-300 ${
+								isActive(item.href) ? "scale-110" : "group-hover:scale-110"
+							}`}>
+								{item.icon}
+							</span>
+							<span className="whitespace-nowrap">{item.brief || item.text}</span>
+						</Link>
+					))}
 
-                    <List component="nav" aria-label="Menu de navegação">
-                        {menuItems.map((item, index) => (
-                            <ListItem 
-                                key={item.text} 
-                                disablePadding 
-                                className="mb-3"
-                                style={{
-                                    animation: `slideIn 0.3s ease-out ${index * 0.1}s both`
-                                }}
-                            >
-                                <div className="w-full">
-                                    <Link
-                                        className={`flex items-center w-full p-4 text-left rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
-                                            isActive(item.href) 
-                                                ? "bg-linear-to-r from-blue-600 to-purple-600 text-white shadow-lg transform scale-105" 
-                                                : "hover:bg-white hover:shadow-md hover:transform hover:scale-102 text-gray-700"
-                                        }`}
-                                        onClick={() => { setDrawerOpen(false); }}
-                                        href={item.href}
-                                        aria-label={item.text}
-                                        aria-current={isActive(item.href) ? "page" : undefined}
-                                    >
-                                        <span className={`transition-transform duration-300 ${isActive(item.href) ? "scale-110" : "group-hover:scale-110"}`}>
-                                            {item.icon}
-                                        </span>
-                                        <span className="ml-3 font-medium">{item.text}</span>
-                                        {isActive(item.href) && (
-                                            <span className="ml-auto">
-                                                <span className="inline-block w-2 h-2 bg-white rounded-full animate-pulse"></span>
-                                            </span>
-                                        )}
-                                    </Link>
-                                </div>
-                            </ListItem>
-                        ))}
-                    </List>
+					{/* Divider */}
+					<div className="h-5 w-px bg-slate-200 dark:bg-slate-800 mx-2" />
 
-                    <div className="mt-8 p-4 bg-white/50 backdrop-blur-sm rounded-xl border border-gray-200">
-                        <p className="text-xs text-gray-600 text-center">
-                            Documentação não oficial
-                        </p>
-                    </div>
-                </div>
-            </Drawer>
+					{/* Theme Switcher Button */}
+					<ThemeToggle />
 
-            <style jsx global>{`
-                @keyframes slideIn {
-                    from {
-                        opacity: 0;
-                        transform: translateX(20px);
-                    }
-                    to {
-                        opacity: 1;
-                        transform: translateX(0);
-                    }
-                }
-            `}</style>
-        </header>
-    );
+					{/* Full Menu Burger Trigger */}
+					<button
+						onClick={() => setDrawerOpen(true)}
+						className="p-2.5 rounded-xl border border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-900/80 hover:border-purple-500 dark:hover:border-purple-400 hover:text-purple-600 dark:hover:text-purple-400 transition-all cursor-pointer"
+						aria-label="Abrir menu completo"
+						aria-expanded={drawerOpen}
+					>
+						<Menu className="w-5 h-5" />
+					</button>
+				</nav>
+
+				{/* Botões Mobile (Theme + Burger) */}
+				<div className="flex lg:hidden items-center gap-2">
+					<ThemeToggle />
+					<button
+						onClick={() => setDrawerOpen(true)}
+						className="p-2.5 rounded-xl border border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-900/80 hover:border-purple-500 dark:hover:border-purple-400 transition-all cursor-pointer"
+						aria-label="Abrir menu de navegação"
+						aria-expanded={drawerOpen}
+					>
+						<Menu className="w-5 h-5" />
+					</button>
+				</div>
+			</div>
+
+			{/* Render side-panel and overlay at body level via React Portal to prevent layout leakage */}
+			{mounted && createPortal(
+				<>
+					{drawerOpen && (
+						<div
+							className="fixed inset-0 bg-slate-950/50 dark:bg-black/75 backdrop-blur-xs z-[100] transition-opacity duration-300"
+							onClick={() => setDrawerOpen(false)}
+						/>
+					)}
+
+					<div
+						className={`fixed top-0 right-0 h-screen w-80 max-w-[85vw] bg-white dark:bg-slate-900 shadow-2xl z-[101] transform transition-transform duration-300 ease-in-out flex flex-col border-l border-slate-200 dark:border-slate-800 ${
+							drawerOpen ? "translate-x-0" : "translate-x-full"
+						}`}
+					>
+						{/* Drawer Header */}
+						<div className="flex items-center justify-between p-6 border-b border-slate-100 dark:border-slate-800/80">
+							<h2 className="text-xl font-display font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
+								Menu Navegação
+							</h2>
+							<button
+								onClick={() => setDrawerOpen(false)}
+								className="p-2 text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all cursor-pointer"
+								aria-label="Fechar menu"
+							>
+								<X className="w-5 h-5" />
+							</button>
+						</div>
+
+						{/* Drawer Menu Items */}
+						<nav className="flex-1 overflow-y-auto p-6 animate-fadeIn" aria-label="Navegação móvel">
+							<ul className="space-y-2">
+								{menuItems.map((item) => (
+									<li key={item.text}>
+										<Link
+											href={item.href}
+											className={`flex items-center gap-3 w-full p-3.5 rounded-xl font-medium transition-all duration-205 text-sm ${
+												isActive(item.href)
+													? "bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-md shadow-purple-500/10"
+													: "text-slate-650 dark:text-slate-350 hover:bg-slate-50 dark:hover:bg-slate-800/40 hover:text-purple-600 dark:hover:text-purple-400"
+											}`}
+											onClick={() => setDrawerOpen(false)}
+											aria-current={isActive(item.href) ? "page" : undefined}
+										>
+											<span className="shrink-0">{item.icon}</span>
+											<span className="grow text-left">{item.text}</span>
+											{isActive(item.href) && (
+												<span className="w-1.5 h-1.5 bg-white rounded-full animate-ping" />
+											)}
+										</Link>
+									</li>
+								))}
+							</ul>
+						</nav>
+
+						{/* Drawer Footer Info */}
+						<div className="p-6 border-t border-slate-100 dark:border-slate-800/80 bg-slate-50/50 dark:bg-slate-900/50">
+							<p className="text-center text-xs text-slate-400 dark:text-slate-500 font-medium">
+								ESPDocs • Plataforma Não Oficial
+							</p>
+						</div>
+					</div>
+				</>
+				, document.body
+			)}
+		</header>
+	);
+}
+
+/* Internal ThemeToggle Component */
+function ThemeToggle() {
+	const { resolvedTheme, setTheme } = useTheme();
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => setMounted(true), []);
+
+	if (!mounted) {
+		return (
+			<div className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-900 animate-pulse border border-transparent" />
+		);
+	}
+
+	return (
+		<button
+			onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+			className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800/80 hover:text-purple-600 dark:hover:text-purple-400 border border-slate-250/20 dark:border-slate-800/60 shadow-xs flex items-center justify-center transition-all duration-300 cursor-pointer active:scale-95 shrink-0"
+			aria-label="Alternar tema"
+		>
+			{resolvedTheme === "dark" ? (
+				<Sun className="w-5 h-5 text-yellow-500" />
+			) : (
+				<Moon className="w-5 h-5 text-indigo-600" />
+			)}
+		</button>
+	);
 }
\ No newline at end of file
diff --git a/components/Providers.jsx b/components/Providers.jsx
new file mode 100644
index 0000000..cd21f87
--- /dev/null
+++ b/components/Providers.jsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export default function Providers({ children }) {
+	return (
+		<ThemeProvider attribute="class" defaultTheme="dark" enableSystem={true}>
+			{children}
+		</ThemeProvider>
+	);
+}
diff --git a/components/SeriesTabMenu.jsx b/components/SeriesTabMenu.jsx
index 7aa41eb..5f58710 100644
--- a/components/SeriesTabMenu.jsx
+++ b/components/SeriesTabMenu.jsx
@@ -1,80 +1,82 @@
 'use client';
 
 import { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
 
 export default function SeriesTabMenu({ tabs, color }) {
-    const availableTabs = tabs.filter(tab => tab.available);
-    const [activeTab, setActiveTab] = useState(availableTabs[0]?.id || 'specs');
+	const availableTabs = tabs.filter(tab => tab.available);
+	const [activeTab, setActiveTab] = useState(availableTabs[0]?.id || 'specs');
 
-    const activeTabContent = availableTabs.find(tab => tab.id === activeTab)?.content;
+	const activeTabContent = availableTabs.find(tab => tab.id === activeTab)?.content;
 
-    return (
-        <div className="mb-8">
-            <div className="hidden md:flex bg-white rounded-2xl shadow-lg py-2 px-4 mb-6 border-2 border-gray-100 gap-4">
-                {availableTabs.map((tab) => (
-                    <button
-                        key={tab.id}
-                        onClick={() => setActiveTab(tab.id)}
-                        className={`flex-1 flex items-center justify-center gap-2 py-4 px-6 rounded-xl font-semibold transition-all duration-300 cursor-pointer ${
-                            activeTab === tab.id
-                                ? 'text-white shadow-lg transform scale-105'
-                                : 'text-gray-600 hover:bg-gray-50'
-                        }`}
-                        style={
-                            activeTab === tab.id
-                                ? { backgroundColor: color }
-                                : {}
-                        }
-                    >
-                        <span className="hidden lg:inline">{tab.label}</span>
-                    </button>
-                ))}
-            </div>
+	return (
+		<div className="mb-12">
+			{/* Desktop Tabs */}
+			<div className="hidden md:flex bg-white/70 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl shadow-xl py-2 px-3 mb-6 border border-slate-200/60 dark:border-slate-800/80 gap-3">
+				{availableTabs.map((tab) => {
+					const isActive = activeTab === tab.id;
+					return (
+						<button
+							key={tab.id}
+							onClick={() => setActiveTab(tab.id)}
+							className={`flex-1 flex items-center justify-center gap-2 py-3 px-5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all duration-300 cursor-pointer active:scale-98 ${
+								isActive
+									? 'text-white shadow-lg scale-[1.02]'
+									: 'text-slate-650 dark:text-slate-350 hover:bg-slate-100/50 dark:hover:bg-slate-800/40 hover:text-slate-800 dark:hover:text-slate-100'
+							}`}
+							style={
+								isActive
+									? { backgroundColor: color, boxShadow: `0 10px 20px -10px ${color}` }
+									: {}
+							}
+						>
+							<span>{tab.label}</span>
+						</button>
+					);
+				})}
+			</div>
 
-            <div className="md:hidden mb-6">
-                <div className="bg-white rounded-2xl shadow-lg border-2 border-gray-100 overflow-hidden">
-                    <button
-                        onClick={() => {
-                            const dropdown = document.getElementById('mobile-tab-dropdown');
-                            dropdown.classList.toggle('hidden');
-                        }}
-                        className="w-full flex items-center justify-between py-4 px-6 font-semibold text-white"
-                        style={{ backgroundColor: color }}
-                    >
-                        <div className="flex items-center gap-3">
-                            <span className="text-xl">
-                                {availableTabs.find(tab => tab.id === activeTab)?.icon}
-                            </span>
-                            <span>
-                                {availableTabs.find(tab => tab.id === activeTab)?.label}
-                            </span>
-                        </div>
-                        <span className="text-xl">▼</span>
-                    </button>
-                    
-                    <div id="mobile-tab-dropdown" className="hidden">
-                        {availableTabs.map((tab) => (
-                            tab.id !== activeTab && (
-                                <button
-                                    key={tab.id}
-                                    onClick={() => {
-                                        setActiveTab(tab.id);
-                                        document.getElementById('mobile-tab-dropdown').classList.add('hidden');
-                                    }}
-                                    className="w-full flex items-center gap-3 py-4 px-6 text-gray-700 hover:bg-gray-50 transition-colors border-t border-gray-100"
-                                >
-                                    <span className="text-xl">{tab.icon}</span>
-                                    <span className="font-medium">{tab.label}</span>
-                                </button>
-                            )
-                        ))}
-                    </div>
-                </div>
-            </div>
+			{/* Mobile Dropdown Tab Selector */}
+			<div className="md:hidden mb-6">
+				<div className="bg-white/70 dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl shadow-lg border border-slate-200/60 dark:border-slate-800/80 overflow-hidden">
+					<button
+						onClick={() => {
+							const dropdown = document.getElementById('mobile-tab-dropdown');
+							dropdown.classList.toggle('hidden');
+						}}
+						className="w-full flex items-center justify-between py-4 px-6 font-bold text-sm uppercase tracking-wider text-white transition-all duration-300"
+						style={{ backgroundColor: color }}
+					>
+						<div className="flex items-center gap-3">
+							<span>
+								{availableTabs.find(tab => tab.id === activeTab)?.label}
+							</span>
+						</div>
+						<ChevronDown className="w-4 h-4 shrink-0 transition-transform duration-300" />
+					</button>
+					
+					<div id="mobile-tab-dropdown" className="hidden">
+						{availableTabs.map((tab) => (
+							tab.id !== activeTab && (
+								<button
+									key={tab.id}
+									onClick={() => {
+										setActiveTab(tab.id);
+										document.getElementById('mobile-tab-dropdown').classList.add('hidden');
+									}}
+									className="w-full flex items-center gap-3 py-4 px-6 text-slate-700 dark:text-slate-300 hover:bg-slate-150/40 dark:hover:bg-slate-800/30 transition-colors border-t border-slate-200/60 dark:border-slate-800/60 font-semibold text-xs uppercase tracking-wider text-left"
+								>
+									<span>{tab.label}</span>
+								</button>
+							)
+						))}
+					</div>
+				</div>
+			</div>
 
-            <div className="animate-fadeIn">
-                {activeTabContent}
-            </div>
-        </div>
-    );
+			<div className="animate-fadeIn">
+				{activeTabContent}
+			</div>
+		</div>
+	);
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8aca966..c3abc6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,11 @@
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^7.3.4",
         "@mui/material": "^7.3.4",
+        "framer-motion": "^12.40.0",
         "googleapis": "^165.0.0",
+        "lucide-react": "^1.16.0",
         "next": "^15.5.9",
+        "next-themes": "^0.4.6",
         "react": "19.1.0",
         "react-dom": "19.1.0"
       },
@@ -1877,16 +1880,6 @@
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
       "license": "MIT"
     },
-    "node_modules/@types/react": {
-      "version": "19.2.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.8.tgz",
-      "integrity": "sha512-3MbSL37jEchWZz2p2mjntRZtPt837ij10ApxKfgmXCTuHWagYg7iA5bqPw6C8BMPfwidlvfPI/fxOc42HLhcyg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "csstype": "^3.2.2"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
@@ -4019,6 +4012,33 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5453,6 +5473,15 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
+    "node_modules/lucide-react": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.16.0.tgz",
+      "integrity": "sha512-dYwyPzb4MEKpGUmNYk3WKWPnMrHs3FKM+q94kAnJrcDIqqn1hq2xY8scaS2ovsOCM5D51ey2gaRG3PBb1vgoYQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -5528,6 +5557,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5627,6 +5671,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -7098,21 +7152,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typescript": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
diff --git a/package.json b/package.json
index 4256724..de13c70 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,11 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
+    "framer-motion": "^12.40.0",
     "googleapis": "^165.0.0",
+    "lucide-react": "^1.16.0",
     "next": "^15.5.9",
+    "next-themes": "^0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0"
   },
diff --git a/public/conexoes/ESP32-C2.json b/public/conexoes/ESP32-C2.json
new file mode 100644
index 0000000..fca199a
--- /dev/null
+++ b/public/conexoes/ESP32-C2.json
@@ -0,0 +1,307 @@
+[
+    {
+        "numero": "1",
+        "nome": "ANT",
+        "tipo": "analog",
+        "funcoes": ["Conexão de antena de RF (Wi-Fi e Bluetooth)"],
+        "categorias": ["Antena", "RF"],
+        "avisos": ["Pino de RF dedicado. Evite traçar pistas longas ou sem casamento de impedância de 50 ohms."]
+    },
+    {
+        "numero": "2",
+        "nome": "VDDA3P3",
+        "tipo": "power",
+        "funcoes": ["Alimentação analógica de 3.3V"],
+        "categorias": ["Power"],
+        "avisos": [
+            "Tensão recomendada: 3.3V (3.0V a 3.6V)",
+            "Fornece energia para os circuitos analógicos e de RF do chip"
+        ]
+    },
+    {
+        "numero": "3",
+        "nome": "VDDA3P3",
+        "tipo": "power",
+        "funcoes": ["Alimentação analógica de 3.3V"],
+        "categorias": ["Power"],
+        "avisos": [
+            "Tensão recomendada: 3.3V (3.0V a 3.6V)",
+            "Fornece energia para os circuitos analógicos e de RF do chip"
+        ]
+    },
+    {
+        "numero": "4",
+        "nome": "GPIO0",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_RTC"],
+        "funcoes": [
+            "GPIO0",
+            "ADC1_CH0"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 0"]
+    },
+    {
+        "numero": "5",
+        "nome": "GPIO1",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_RTC"],
+        "funcoes": [
+            "GPIO1",
+            "ADC1_CH1"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 1"]
+    },
+    {
+        "numero": "6",
+        "nome": "GPIO2",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_RTC"],
+        "funcoes": [
+            "GPIO2",
+            "ADC1_CH2",
+            "FSPIQ"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC",
+            "SPI"
+        ],
+        "avisos": ["Mapeado para a função SPI MISO (FSPIQ) por padrão na inicialização do flash"]
+    },
+    {
+        "numero": "7",
+        "nome": "CHIP_EN",
+        "tipo": "analog",
+        "funcoes": ["Habilitar o chip (Power-up / Reset)"],
+        "categorias": ["Power"],
+        "avisos": [
+            "Ativo Alto. Puxe para nível alto para inicializar o chip.",
+            "Não deixe este pino flutuando. Use um circuito RC de atraso externo para inicialização estável."
+        ]
+    },
+    {
+        "numero": "8",
+        "nome": "GPIO3",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_RTC"],
+        "funcoes": [
+            "GPIO3",
+            "ADC1_CH3"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 3"]
+    },
+    {
+        "numero": "9",
+        "nome": "GPIO4",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_RTC"],
+        "funcoes": [
+            "GPIO4",
+            "MTMS",
+            "FSPIQ",
+            "ADC1_CH4"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG",
+            "SPI",
+            "ADC"
+        ],
+        "avisos": [
+            "Pino multifuncional: JTAG MTMS, SPI2 MISO e ADC1 Canal 4.",
+            "Pode ser usado para depuração JTAG em conjunto com outros pinos JTAG."
+        ]
+    },
+    {
+        "numero": "10",
+        "nome": "GPIO5",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_RTC"],
+        "funcoes": [
+            "GPIO5",
+            "MTDI",
+            "FSPIWP"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG",
+            "SPI"
+        ],
+        "avisos": ["Pino multifuncional: JTAG MTDI e SPI2 Write Protect (FSPIWP)."]
+    },
+    {
+        "numero": "11",
+        "nome": "VDD3P3_RTC",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio de RTC e IOs de baixo consumo"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão recomendada: 3.3V"]
+    },
+    {
+        "numero": "12",
+        "nome": "GPIO6",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_RTC"],
+        "funcoes": [
+            "GPIO6",
+            "MTCK",
+            "FSPICLK"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG",
+            "SPI"
+        ],
+        "avisos": ["Pino multifuncional: JTAG MTCK e SPI2 Clock (FSPICLK)."]
+    },
+    {
+        "numero": "13",
+        "nome": "GPIO7",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_RTC"],
+        "funcoes": [
+            "GPIO7",
+            "MTDO",
+            "FSPID"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG",
+            "SPI"
+        ],
+        "avisos": ["Pino multifuncional: JTAG MTDO e SPI2 MOSI (FSPID)."]
+    },
+    {
+        "numero": "14",
+        "nome": "GPIO8",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_CPU"],
+        "funcoes": ["GPIO8"],
+        "categorias": ["GPIO", "Strapping"],
+        "avisos": [
+            "Pino de Strapping para controle de boot.",
+            "Em conjunto com o GPIO9, seleciona o modo de inicialização do SoC (deve estar em 1 durante o reset para Joint Download Boot se GPIO9=0)."
+        ]
+    },
+    {
+        "numero": "15",
+        "nome": "GPIO9",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_CPU"],
+        "funcoes": ["GPIO9"],
+        "categorias": ["GPIO", "Strapping"],
+        "avisos": [
+            "Pino de Strapping principal. Nível alto (1) no reset activa SPI Boot (padrão via pull-up fraco).",
+            "Nível baixo (0) no reset coloca o chip no modo de download UART/SPI."
+        ]
+    },
+    {
+        "numero": "16",
+        "nome": "GPIO10",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_CPU"],
+        "funcoes": [
+            "GPIO10",
+            "FSPICS0"
+        ],
+        "categorias": [
+            "GPIO",
+            "SPI"
+        ],
+        "avisos": ["Pino multifuncional: SPI2 Chip Select 0 (FSPICS0)."]
+    },
+    {
+        "numero": "17",
+        "nome": "VDD3P3_CPU",
+        "tipo": "power",
+        "funcoes": ["Alimentação digital da CPU e IOs correspondentes (3.3V)"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão recomendada: 3.3V"]
+    },
+    {
+        "numero": "18",
+        "nome": "GPIO18",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_CPU"],
+        "funcoes": ["GPIO18"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "19",
+        "nome": "GPIO19",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_CPU"],
+        "funcoes": [
+            "GPIO19",
+            "U0RXD"
+        ],
+        "categorias": [
+            "GPIO",
+            "UART"
+        ],
+        "avisos": ["Pino de recepção UART0 (Serial RX por padrão para gravação e monitoramento)."]
+    },
+    {
+        "numero": "20",
+        "nome": "GPIO20",
+        "tipo": "io",
+        "alimentacao": ["VDD3P3_CPU"],
+        "funcoes": [
+            "GPIO20",
+            "U0TXD"
+        ],
+        "categorias": [
+            "GPIO",
+            "UART"
+        ],
+        "avisos": ["Pino de transmissão UART0 (Serial TX por padrão para gravação e monitoramento)."]
+    },
+    {
+        "numero": "21",
+        "nome": "VDDA",
+        "tipo": "power",
+        "funcoes": ["Alimentação de entrada analógica de 3.3V"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "22",
+        "nome": "XTAL_N",
+        "tipo": "analog",
+        "funcoes": ["Conexão externa do cristal oscilador (Saída)"],
+        "categorias": ["Clock"]
+    },
+    {
+        "numero": "23",
+        "nome": "XTAL_P",
+        "tipo": "analog",
+        "funcoes": ["Conexão externa do cristal oscilador (Entrada)"],
+        "categorias": ["Clock"]
+    },
+    {
+        "numero": "24",
+        "nome": "VDDA",
+        "tipo": "power",
+        "funcoes": ["Alimentação de entrada analógica de 3.3V"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "25",
+        "nome": "GND",
+        "tipo": "power",
+        "funcoes": ["Pino de aterramento central (Exposed Pad)"],
+        "categorias": ["Power"],
+        "avisos": ["Deve ser devidamente soldado ao plano de terra (GND) da PCB para desempenho estável e dissipação térmica."]
+    }
+]
diff --git a/public/conexoes/ESP32-C61.json b/public/conexoes/ESP32-C61.json
new file mode 100644
index 0000000..f2e85f2
--- /dev/null
+++ b/public/conexoes/ESP32-C61.json
@@ -0,0 +1,536 @@
+[
+    {
+        "numero": "1",
+        "nome": "ANT_2G",
+        "tipo": "analog",
+        "funcoes": ["Conexão de antena de RF (Wi-Fi e Bluetooth)"],
+        "categorias": ["Antena", "RF"],
+        "avisos": ["Pino de RF dedicado a 2.4 GHz. Requer casamento de impedância de 50 ohms."]
+    },
+    {
+        "numero": "2",
+        "nome": "VDDA3",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio analógico de 3.3V"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão recomendada: 3.3V (3.0V a 3.6V). Fornece energia para circuitos de RF e clock."]
+    },
+    {
+        "numero": "3",
+        "nome": "VDDA4",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio analógico de 3.3V"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão recomendada: 3.3V (3.0V a 3.6V). Fornece energia para circuitos de RF e clock."]
+    },
+    {
+        "numero": "4",
+        "nome": "CHIP_PU",
+        "tipo": "analog",
+        "funcoes": ["Habilitar o chip (Power-up / Reset)"],
+        "categorias": ["Power"],
+        "avisos": [
+            "Ativo Alto. Puxe para nível alto para inicializar o chip.",
+            "Não deixe este pino flutuando. Recomenda-se usar um circuito RC externo para reset limpo."
+        ]
+    },
+    {
+        "numero": "5",
+        "nome": "VDDPST1",
+        "tipo": "power",
+        "funcoes": ["Alimentação digital dos domínios HP (High Performance) e LP (Low Power)"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão recomendada: 3.3V. Alimenta a parte digital de baixo consumo e pinos associados."]
+    },
+    {
+        "numero": "6",
+        "nome": "GPIO0",
+        "tipo": "io",
+        "alimentacao": ["VDDPST1"],
+        "funcoes": [
+            "GPIO0",
+            "XTAL_32K_P"
+        ],
+        "categorias": [
+            "GPIO",
+            "Clock"
+        ],
+        "avisos": ["Pino multifuncional de baixo consumo. Pode ser conectado ao cristal oscilador de 32 kHz externo (Entrada P)."]
+    },
+    {
+        "numero": "7",
+        "nome": "GPIO1",
+        "tipo": "io",
+        "alimentacao": ["VDDPST1"],
+        "funcoes": [
+            "GPIO1",
+            "XTAL_32K_N",
+            "ADC1_CH0"
+        ],
+        "categorias": [
+            "GPIO",
+            "Clock",
+            "ADC"
+        ],
+        "avisos": ["Pino multifuncional. Conexão do cristal de 32 kHz externo (Saída N) e entrada analógica ADC1 Canal 0."]
+    },
+    {
+        "numero": "8",
+        "nome": "GPIO2",
+        "tipo": "io",
+        "alimentacao": ["VDDPST1"],
+        "funcoes": ["GPIO2"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "9",
+        "nome": "GPIO3",
+        "tipo": "io",
+        "alimentacao": ["VDDPST1"],
+        "funcoes": [
+            "GPIO3",
+            "MTMS",
+            "ADC1_CH1"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG",
+            "ADC",
+            "Strapping"
+        ],
+        "avisos": [
+            "Pino multifuncional: JTAG MTMS, ADC1 Canal 1 e pino de Strapping para controle de borda de clock do SDIO.",
+            "Flutuante por padrão durante o reset."
+        ]
+    },
+    {
+        "numero": "10",
+        "nome": "GPIO4",
+        "tipo": "io",
+        "alimentacao": ["VDDPST1"],
+        "funcoes": [
+            "GPIO4",
+            "MTDI",
+            "ADC1_CH2"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG",
+            "ADC",
+            "Strapping"
+        ],
+        "avisos": [
+            "Pino multifuncional: JTAG MTDI, ADC1 Canal 2 e pino de Strapping para controle de borda de clock do SDIO.",
+            "Flutuante por padrão durante o reset."
+        ]
+    },
+    {
+        "numero": "11",
+        "nome": "GPIO5",
+        "tipo": "io",
+        "alimentacao": ["VDDPST1"],
+        "funcoes": [
+            "GPIO5",
+            "MTCK",
+            "ADC1_CH3"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG",
+            "ADC"
+        ],
+        "avisos": ["Pino multifuncional: JTAG MTCK e entrada analógica ADC1 Canal 3."]
+    },
+    {
+        "numero": "12",
+        "nome": "GPIO6",
+        "tipo": "io",
+        "alimentacao": ["VDDPST1"],
+        "funcoes": [
+            "GPIO6",
+            "MTDO"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG"
+        ],
+        "avisos": ["Pino multifuncional JTAG MTDO."]
+    },
+    {
+        "numero": "13",
+        "nome": "GPIO25",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO25",
+            "SDIO_CMD",
+            "FSPICS0"
+        ],
+        "categorias": [
+            "GPIO",
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino multifuncional de alta velocidade: SDIO Comando ou SPI2 Chip Select 0."]
+    },
+    {
+        "numero": "14",
+        "nome": "GPIO26",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO26",
+            "SDIO_CLK",
+            "FSPICLK"
+        ],
+        "categorias": [
+            "GPIO",
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino multifuncional de alta velocidade: SDIO Clock ou SPI2 Clock."]
+    },
+    {
+        "numero": "15",
+        "nome": "GPIO27",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO27",
+            "SDIO_DATA0",
+            "FSPID"
+        ],
+        "categorias": [
+            "GPIO",
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino multifuncional de alta velocidade: SDIO Dados 0 ou SPI2 MOSI (FSPID)."]
+    },
+    {
+        "numero": "16",
+        "nome": "GPIO28",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO28",
+            "SDIO_DATA1",
+            "FSPIQ"
+        ],
+        "categorias": [
+            "GPIO",
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino de alta velocidade: SDIO Dados 1 ou SPI2 MISO (FSPIQ)."]
+    },
+    {
+        "numero": "17",
+        "nome": "GPIO22",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO22",
+            "SDIO_DATA2",
+            "FSPIWP"
+        ],
+        "categorias": [
+            "GPIO",
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino de alta velocidade: SDIO Dados 2 ou SPI2 Write Protect."]
+    },
+    {
+        "numero": "18",
+        "nome": "GPIO23",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO23",
+            "SDIO_DATA3",
+            "FSPIHD"
+        ],
+        "categorias": [
+            "GPIO",
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino de alta velocidade: SDIO Dados 3 ou SPI2 Hold."]
+    },
+    {
+        "numero": "19",
+        "nome": "GPIO14",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI", "VDDPST2"],
+        "funcoes": [
+            "GPIO14",
+            "SPICS1"
+        ],
+        "categorias": [
+            "GPIO",
+            "SPI"
+        ],
+        "avisos": ["Pino dedicado para Chip Select 1 da interface de memória SPI Flash/PSRAM."]
+    },
+    {
+        "numero": "20",
+        "nome": "GPIO15",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI", "VDDPST2"],
+        "funcoes": [
+            "GPIO15",
+            "SPICS0"
+        ],
+        "categorias": [
+            "GPIO",
+            "SPI"
+        ],
+        "avisos": ["Pino dedicado para Chip Select 0 da interface de memória SPI Flash."]
+    },
+    {
+        "numero": "21",
+        "nome": "VDDPST2",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio digital HP (High Performance)"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão recomendada: 3.3V (3.0V a 3.6V). Alimenta as interfaces digitais rápidas."]
+    },
+    {
+        "numero": "22",
+        "nome": "GPIO16",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI", "VDDPST2"],
+        "funcoes": [
+            "GPIO16",
+            "SPIQ"
+        ],
+        "categorias": [
+            "GPIO",
+            "SPI"
+        ],
+        "avisos": ["Pino de dados Q (MISO) da interface de memória flash SPI."]
+    },
+    {
+        "numero": "23",
+        "nome": "GPIO17",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI", "VDDPST2"],
+        "funcoes": [
+            "GPIO17",
+            "SPIWP"
+        ],
+        "categorias": [
+            "GPIO",
+            "SPI"
+        ],
+        "avisos": ["Pino de proteção contra escrita (Write Protect) da interface de memória flash SPI."]
+    },
+    {
+        "numero": "24",
+        "nome": "VDD_SPI",
+        "tipo": "power",
+        "funcoes": ["Tensão de saída LDO gerada a partir de VDDPST2 para alimentar a flash e PSRAM"],
+        "categorias": ["Power"],
+        "avisos": [
+            "Tensão de saída configurável via software de acordo com as especificações da flash interna/externa (normalmente 3.3V ou 1.8V).",
+            "Não deve ser usado como fonte geral de energia de alta corrente."
+        ]
+    },
+    {
+        "numero": "25",
+        "nome": "GPIO19",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI", "VDDPST2"],
+        "funcoes": [
+            "GPIO19",
+            "SPIHD"
+        ],
+        "categorias": [
+            "GPIO",
+            "SPI"
+        ],
+        "avisos": ["Pino de controle de Hold da interface de memória flash SPI."]
+    },
+    {
+        "numero": "26",
+        "nome": "GPIO20",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI", "VDDPST2"],
+        "funcoes": [
+            "GPIO20",
+            "SPICLK"
+        ],
+        "categorias": [
+            "GPIO",
+            "SPI"
+        ],
+        "avisos": ["Pino de sinal de clock da interface de memória flash SPI."]
+    },
+    {
+        "numero": "27",
+        "nome": "GPIO21",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI", "VDDPST2"],
+        "funcoes": [
+            "GPIO21",
+            "SPID"
+        ],
+        "categorias": [
+            "GPIO",
+            "SPI"
+        ],
+        "avisos": ["Pino de dados D (MOSI) da interface de memória flash SPI."]
+    },
+    {
+        "numero": "28",
+        "nome": "GPIO12",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO12",
+            "USB_D-"
+        ],
+        "categorias": [
+            "GPIO",
+            "USB"
+        ],
+        "avisos": ["Pino de sinal negativo do transceptor USB Serial/JTAG integrado."]
+    },
+    {
+        "numero": "29",
+        "nome": "GPIO13",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO13",
+            "USB_D+"
+        ],
+        "categorias": [
+            "GPIO",
+            "USB"
+        ],
+        "avisos": [
+            "Pino de sinal positivo do transceptor USB Serial/JTAG integrado.",
+            "Possui resistor de pull-up integrado ativado por padrão na inicialização do USB."
+        ]
+    },
+    {
+        "numero": "30",
+        "nome": "GPIO24",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": ["GPIO24"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "31",
+        "nome": "GPIO8",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": ["GPIO8"],
+        "categorias": ["GPIO", "Strapping"],
+        "avisos": [
+            "Pino de Strapping para seleção do modo de boot e controle de impressão das mensagens da ROM.",
+            "Flutuante por padrão durante o reset. Nível alto (1) ativa a impressão do log de inicialização."
+        ]
+    },
+    {
+        "numero": "32",
+        "nome": "GPIO9",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": ["GPIO9"],
+        "categorias": ["GPIO", "Strapping"],
+        "avisos": [
+            "Pino de Strapping principal para seleção do modo de boot.",
+            "Equipado com pull-up fraco integrado. Nível alto (1) no reset ativa SPI Boot (carrega do flash). Nível baixo (0) força o modo de Download."
+        ]
+    },
+    {
+        "numero": "33",
+        "nome": "GPIO10",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO10",
+            "U0RXD"
+        ],
+        "categorias": [
+            "GPIO",
+            "UART"
+        ],
+        "avisos": ["Recepção serial UART0 (Serial RX para gravação do firmware externa e depuração)."]
+    },
+    {
+        "numero": "34",
+        "nome": "GPIO11",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": [
+            "GPIO11",
+            "U0TXD"
+        ],
+        "categorias": [
+            "GPIO",
+            "UART"
+        ],
+        "avisos": ["Transmissão serial UART0 (Serial TX para gravação do firmware externa e depuração)."]
+    },
+    {
+        "numero": "35",
+        "nome": "GPIO29",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": ["GPIO29"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "36",
+        "nome": "GPIO7",
+        "tipo": "io",
+        "alimentacao": ["VDDPST2"],
+        "funcoes": ["GPIO7"],
+        "categorias": ["GPIO", "Strapping"],
+        "avisos": [
+            "Pino de Strapping para seleção da fonte dos sinais JTAG (inicialização precoce).",
+            "Sem resistores de pull internos no reset. Deve ser mantido estável por circuito externo se usado."
+        ]
+    },
+    {
+        "numero": "37",
+        "nome": "VDDA1",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio analógico de 3.3V"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "38",
+        "nome": "XTAL_N",
+        "tipo": "analog",
+        "funcoes": ["Conexão externa do cristal oscilador de 40 MHz (Saída N)"],
+        "categorias": ["Clock"]
+    },
+    {
+        "numero": "39",
+        "nome": "XTAL_P",
+        "tipo": "analog",
+        "funcoes": ["Conexão externa do cristal oscilador de 40 MHz (Entrada P)"],
+        "categorias": ["Clock"]
+    },
+    {
+        "numero": "40",
+        "nome": "VDDA2",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio analógico de 3.3V"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "41",
+        "nome": "GND",
+        "tipo": "power",
+        "funcoes": ["Pino de aterramento central (Exposed Pad)"],
+        "categorias": ["Power"],
+        "avisos": ["Deve ser adequadamente soldado ao plano de terra (GND) da PCB para controle de RF e térmica estáveis."]
+    }
+]
diff --git a/public/conexoes/ESP32-S31.json b/public/conexoes/ESP32-S31.json
new file mode 100644
index 0000000..4ef1ed9
--- /dev/null
+++ b/public/conexoes/ESP32-S31.json
@@ -0,0 +1,956 @@
+[
+    {
+        "numero": "1",
+        "nome": "ANT",
+        "tipo": "analog",
+        "funcoes": ["Conexão de antena de RF (Wi-Fi e Bluetooth)"],
+        "categorias": ["Antena", "RF"],
+        "avisos": ["Pino de RF dedicado para 2.4 GHz. Requer casamento de impedância de 50 ohms."]
+    },
+    {
+        "numero": "2",
+        "nome": "VDDA3",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio analógico (3.3V)"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão recomendada: 3.3V (3.0V a 3.6V). Alimenta a seção de RF e clock."]
+    },
+    {
+        "numero": "3",
+        "nome": "VDDA4",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio analógico (3.3V)"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão recomendada: 3.3V (3.0V a 3.6V). Alimenta a seção de RF e clock."]
+    },
+    {
+        "numero": "4",
+        "nome": "CHIP_PU",
+        "tipo": "analog",
+        "funcoes": ["Habilitar o chip (Power-up / Reset)"],
+        "categorias": ["Power"],
+        "avisos": [
+            "Ativo Alto. Puxe para nível alto para inicializar o chip.",
+            "Não deixe este pino flutuando. Recomenda-se usar um circuito RC externo de atraso para inicialização estável."
+        ]
+    },
+    {
+        "numero": "5",
+        "nome": "GPIO0",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO0",
+            "XTAL_32K_N"
+        ],
+        "categorias": [
+            "GPIO",
+            "Clock"
+        ],
+        "avisos": ["Pino de clock de baixo consumo. Pode ser conectado ao cristal de 32.768 kHz externo (Pino N)."]
+    },
+    {
+        "numero": "6",
+        "nome": "GPIO1",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO1",
+            "XTAL_32K_P",
+            "ADC1_CH0"
+        ],
+        "categorias": [
+            "GPIO",
+            "Clock",
+            "ADC"
+        ],
+        "avisos": ["Pino multifuncional. Cristal de 32.768 kHz externo (Pino P) e entrada analógica ADC1 Canal 0."]
+    },
+    {
+        "numero": "7",
+        "nome": "GPIO2",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO2",
+            "ADC1_CH1"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 1."]
+    },
+    {
+        "numero": "8",
+        "nome": "GPIO3",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO3",
+            "ADC1_CH2"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 2."]
+    },
+    {
+        "numero": "9",
+        "nome": "GPIO4",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO4",
+            "ADC1_CH3"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 3."]
+    },
+    {
+        "numero": "10",
+        "nome": "GPIO5",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO5",
+            "ADC1_CH4"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 4."]
+    },
+    {
+        "numero": "11",
+        "nome": "VDDPST_1",
+        "tipo": "power",
+        "funcoes": ["Alimentação de I/O do domínio 1 (3.3V)"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão recomendada: 3.3V."]
+    },
+    {
+        "numero": "12",
+        "nome": "GPIO6",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO6",
+            "ADC1_CH5"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 5."]
+    },
+    {
+        "numero": "13",
+        "nome": "GPIO7",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO7",
+            "ADC1_CH6"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 6."]
+    },
+    {
+        "numero": "14",
+        "nome": "GPIO8",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO8",
+            "ADC1_CH7"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 7."]
+    },
+    {
+        "numero": "15",
+        "nome": "GPIO9",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO9",
+            "ADC1_CH8"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 8."]
+    },
+    {
+        "numero": "16",
+        "nome": "GPIO10",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO10",
+            "ADC1_CH9"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 9."]
+    },
+    {
+        "numero": "17",
+        "nome": "GPIO11",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO11",
+            "ADC1_CH10"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC1 Canal 10."]
+    },
+    {
+        "numero": "18",
+        "nome": "VREF_TOUCH",
+        "tipo": "analog",
+        "funcoes": ["Tensão de referência para os pinos Touch capacitivos"],
+        "categorias": ["Touch"],
+        "avisos": ["Pino analógico dedicado para estabilização de leitura capacitiva."]
+    },
+    {
+        "numero": "19",
+        "nome": "GPIO12",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO12",
+            "ADC2_CH0"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC2 Canal 0."]
+    },
+    {
+        "numero": "20",
+        "nome": "GPIO13",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO13",
+            "ADC2_CH1"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC2 Canal 1."]
+    },
+    {
+        "numero": "21",
+        "nome": "GPIO14",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO14",
+            "ADC2_CH2"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC2 Canal 2."]
+    },
+    {
+        "numero": "22",
+        "nome": "GPIO15",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO15",
+            "ADC2_CH3"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC2 Canal 3."]
+    },
+    {
+        "numero": "23",
+        "nome": "GPIO16",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO16",
+            "ADC2_CH4"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC2 Canal 4."]
+    },
+    {
+        "numero": "24",
+        "nome": "GPIO17",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO17",
+            "ADC2_CH5"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC2 Canal 5."]
+    },
+    {
+        "numero": "25",
+        "nome": "GPIO18",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO18",
+            "ADC2_CH6"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC2 Canal 6."]
+    },
+    {
+        "numero": "26",
+        "nome": "GPIO19",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_1"],
+        "funcoes": [
+            "GPIO19",
+            "ADC2_CH7"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino de entrada analógica ADC2 Canal 7."]
+    },
+    {
+        "numero": "27",
+        "nome": "SDIO_DATA0",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_SD"],
+        "funcoes": [
+            "SDIO_DATA0",
+            "FSPID"
+        ],
+        "categorias": [
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino da interface SDIO de alta velocidade (Dados 0) ou SPI2 MOSI."]
+    },
+    {
+        "numero": "28",
+        "nome": "SDIO_DATA1",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_SD"],
+        "funcoes": [
+            "SDIO_DATA1",
+            "FSPIQ"
+        ],
+        "categorias": [
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino da interface SDIO de alta velocidade (Dados 1) ou SPI2 MISO."]
+    },
+    {
+        "numero": "29",
+        "nome": "SDIO_DATA2",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_SD"],
+        "funcoes": [
+            "SDIO_DATA2",
+            "FSPIWP"
+        ],
+        "categorias": [
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino da interface SDIO de alta velocidade (Dados 2) ou SPI2 Write Protect."]
+    },
+    {
+        "numero": "30",
+        "nome": "VDD_PSRAM_1P8_1",
+        "tipo": "power",
+        "funcoes": ["Alimentação de 1.8V para PSRAM integrada no encapsulamento"],
+        "categorias": ["Power"],
+        "avisos": ["Gerado pelo LDO interno para alimentar a PSRAM integrada. Não conectar a circuitos de potência externa."]
+    },
+    {
+        "numero": "31",
+        "nome": "SDIO_DATA3",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_SD"],
+        "funcoes": [
+            "SDIO_DATA3",
+            "FSPIHD"
+        ],
+        "categorias": [
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Pino da interface SDIO de alta velocidade (Dados 3) ou SPI2 Hold."]
+    },
+    {
+        "numero": "32",
+        "nome": "SDIO_CLK",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_SD"],
+        "funcoes": [
+            "SDIO_CLK",
+            "FSPICLK"
+        ],
+        "categorias": [
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Clock da interface SDIO de alta velocidade ou SPI2 Clock."]
+    },
+    {
+        "numero": "33",
+        "nome": "SDIO_CMD",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_SD"],
+        "funcoes": [
+            "SDIO_CMD",
+            "FSPICS0"
+        ],
+        "categorias": [
+            "SDIO",
+            "SPI"
+        ],
+        "avisos": ["Comando da interface SDIO de alta velocidade ou SPI2 Chip Select 0."]
+    },
+    {
+        "numero": "34",
+        "nome": "VDD_PSRAM_1P8_2",
+        "tipo": "power",
+        "funcoes": ["Alimentação de 1.8V para PSRAM integrada no encapsulamento"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "35",
+        "nome": "VDD_LDO_1P8",
+        "tipo": "power",
+        "funcoes": ["Pino de entrada/saída LDO de 1.8V"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "36",
+        "nome": "SPICS",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI"],
+        "funcoes": ["SPICS"],
+        "categorias": ["SPI"],
+        "avisos": ["Chip Select dedicado para a Flash SPI externa ou interna."]
+    },
+    {
+        "numero": "37",
+        "nome": "SPIQ",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI"],
+        "funcoes": ["SPIQ"],
+        "categorias": ["SPI"],
+        "avisos": ["Dado Q (MISO) dedicado para a Flash SPI externa ou interna."]
+    },
+    {
+        "numero": "38",
+        "nome": "SPIWP",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI"],
+        "funcoes": ["SPIWP"],
+        "categorias": ["SPI"],
+        "avisos": ["Write Protect dedicado para a Flash SPI externa ou interna."]
+    },
+    {
+        "numero": "39",
+        "nome": "VDD_SPI",
+        "tipo": "power",
+        "funcoes": ["Tensão de alimentação dedicada para a interface Flash SPI"],
+        "categorias": ["Power"],
+        "avisos": ["Tensão típica: 3.3V ou 1.8V gerada internamente."]
+    },
+    {
+        "numero": "40",
+        "nome": "SPIHD",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI"],
+        "funcoes": ["SPIHD"],
+        "categorias": ["SPI"],
+        "avisos": ["Hold dedicado para a Flash SPI externa ou interna."]
+    },
+    {
+        "numero": "41",
+        "nome": "SPICLK",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI"],
+        "funcoes": ["SPICLK"],
+        "categorias": ["SPI"],
+        "avisos": ["Clock dedicado para a Flash SPI externa ou interna."]
+    },
+    {
+        "numero": "42",
+        "nome": "SPID",
+        "tipo": "io",
+        "alimentacao": ["VDD_SPI"],
+        "funcoes": ["SPID"],
+        "categorias": ["SPI"],
+        "avisos": ["Dado D (MOSI) dedicado para a Flash SPI externa ou interna."]
+    },
+    {
+        "numero": "43",
+        "nome": "VCCA/VDDPST_2",
+        "tipo": "power",
+        "funcoes": ["Alimentação analógica e digital do domínio 2 (3.3V)"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "44",
+        "nome": "USB_DP",
+        "tipo": "analog",
+        "funcoes": ["Pino positivo do transceptor USB Serial/JTAG integrado"],
+        "categorias": ["USB"],
+        "avisos": ["USB D+. Possui pull-up de hardware interno."]
+    },
+    {
+        "numero": "45",
+        "nome": "USB_DM",
+        "tipo": "analog",
+        "funcoes": ["Pino negativo do transceptor USB Serial/JTAG integrado"],
+        "categorias": ["USB"],
+        "avisos": ["USB D-."]
+    },
+    {
+        "numero": "46",
+        "nome": "GPIO33",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO33",
+            "ADC2_CH8"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino multifuncional: GPIO33 e ADC2 Canal 8."]
+    },
+    {
+        "numero": "47",
+        "nome": "GPIO34",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO34",
+            "ADC2_CH9"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ],
+        "avisos": ["Pino multifuncional: GPIO34 e ADC2 Canal 9."]
+    },
+    {
+        "numero": "48",
+        "nome": "GPIO35",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO35",
+            "ADC2_CH10"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "49",
+        "nome": "GPIO36",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO36",
+            "ADC2_CH11"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "50",
+        "nome": "GPIO37",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO37",
+            "ADC2_CH12"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "51",
+        "nome": "GPIO38",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO38",
+            "ADC2_CH13"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "52",
+        "nome": "GPIO39",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO39",
+            "ADC2_CH14"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "53",
+        "nome": "GPIO40",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO40",
+            "ADC2_CH15"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "54",
+        "nome": "VDDPST_3",
+        "tipo": "power",
+        "funcoes": ["Alimentação de I/O do domínio 3 (3.3V)"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "55",
+        "nome": "GPIO42",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO42",
+            "ADC2_CH16"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "56",
+        "nome": "GPIO43",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO43",
+            "ADC2_CH17"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "57",
+        "nome": "GPIO44",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO44",
+            "ADC2_CH18"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "58",
+        "nome": "GPIO45",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO45",
+            "ADC2_CH19"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "59",
+        "nome": "GPIO46",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO46",
+            "ADC2_CH20"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "60",
+        "nome": "GPIO47",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": [
+            "GPIO47",
+            "ADC2_CH21"
+        ],
+        "categorias": [
+            "GPIO",
+            "ADC"
+        ]
+    },
+    {
+        "numero": "61",
+        "nome": "GPIO48",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": ["GPIO48"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "62",
+        "nome": "GPIO49",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_3"],
+        "funcoes": ["GPIO49"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "63",
+        "nome": "VREF_ADC",
+        "tipo": "analog",
+        "funcoes": ["Tensão de referência estável externa para calibração do ADC"],
+        "categorias": ["Power", "ADC"],
+        "avisos": ["Pino analógico dedicado para calibração precisa do conversor analógico-digital."]
+    },
+    {
+        "numero": "64",
+        "nome": "VDDPST_4",
+        "tipo": "power",
+        "funcoes": ["Alimentação de I/O do domínio 4 (3.3V)"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "65",
+        "nome": "GPIO50",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": ["GPIO50"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "66",
+        "nome": "GPIO51",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": ["GPIO51"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "67",
+        "nome": "GPIO52",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": ["GPIO52"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "68",
+        "nome": "GPIO53",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": ["GPIO53"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "69",
+        "nome": "GPIO54",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": [
+            "GPIO54",
+            "MTDO"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG"
+        ],
+        "avisos": ["Pino multifuncional: JTAG MTDO."]
+    },
+    {
+        "numero": "70",
+        "nome": "GPIO55",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": [
+            "GPIO55",
+            "MTCK"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG"
+        ],
+        "avisos": ["Pino multifuncional: JTAG MTCK."]
+    },
+    {
+        "numero": "71",
+        "nome": "GPIO56",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": [
+            "GPIO56",
+            "MTDI"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG"
+        ],
+        "avisos": ["Pino multifuncional: JTAG MTDI."]
+    },
+    {
+        "numero": "72",
+        "nome": "GPIO57",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": [
+            "GPIO57",
+            "MTMS"
+        ],
+        "categorias": [
+            "GPIO",
+            "JTAG"
+        ],
+        "avisos": ["Pino multifuncional: JTAG MTMS."]
+    },
+    {
+        "numero": "73",
+        "nome": "GPIO58",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": ["GPIO58"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "74",
+        "nome": "GPIO59",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": ["GPIO59"],
+        "categorias": ["GPIO"]
+    },
+    {
+        "numero": "75",
+        "nome": "GPIO60",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": ["GPIO60"],
+        "categorias": ["GPIO", "Strapping"],
+        "avisos": [
+            "Pino de Strapping para boot (junto com GPIO61).",
+            "Equipado com pull-up interno ativo por padrão."
+        ]
+    },
+    {
+        "numero": "76",
+        "nome": "GPIO61",
+        "tipo": "io",
+        "alimentacao": ["VDDPST_4"],
+        "funcoes": ["GPIO61"],
+        "categorias": ["GPIO", "Strapping"],
+        "avisos": [
+            "Pino de Strapping principal para seleção de boot.",
+            "Equipado com pull-up interno ativo por padrão. Nível alto (1) no reset ativa SPI Boot. Nível baixo (0) força o modo Download."
+        ]
+    },
+    {
+        "numero": "77",
+        "nome": "VDDA1",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio analógico de 3.3V"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "78",
+        "nome": "XTAL_N",
+        "tipo": "analog",
+        "funcoes": ["Conexão externa do cristal oscilador de alta velocidade (Saída N)"],
+        "categorias": ["Clock"]
+    },
+    {
+        "numero": "79",
+        "nome": "XTAL_P",
+        "tipo": "analog",
+        "funcoes": ["Conexão externa do cristal oscilador de alta velocidade (Entrada P)"],
+        "categorias": ["Clock"]
+    },
+    {
+        "numero": "80",
+        "nome": "VDDA2",
+        "tipo": "power",
+        "funcoes": ["Alimentação do domínio analógico de 3.3V"],
+        "categorias": ["Power"]
+    },
+    {
+        "numero": "81",
+        "nome": "GND",
+        "tipo": "power",
+        "funcoes": ["Pino de aterramento central (Exposed Pad)"],
+        "categorias": ["Power"],
+        "avisos": ["Deve ser adequadamente soldado ao plano de terra (GND) da PCB para controle de RF e dissipação térmica estáveis."]
+    }
+]
diff --git a/public/datasheets/ESP32-C2 (ESP8684).pdf b/public/datasheets/ESP32-C2 (ESP8684).pdf
new file mode 100644
index 0000000..994ff39
Binary files /dev/null and b/public/datasheets/ESP32-C2 (ESP8684).pdf differ
diff --git a/public/datasheets/ESP32-C3.pdf b/public/datasheets/ESP32-C3.pdf
new file mode 100644
index 0000000..a4bfc75
Binary files /dev/null and b/public/datasheets/ESP32-C3.pdf differ
diff --git a/public/datasheets/ESP32-C5.pdf b/public/datasheets/ESP32-C5.pdf
new file mode 100644
index 0000000..c668d07
Binary files /dev/null and b/public/datasheets/ESP32-C5.pdf differ
diff --git a/public/datasheets/ESP32-C6.pdf b/public/datasheets/ESP32-C6.pdf
new file mode 100644
index 0000000..98dd38c
Binary files /dev/null and b/public/datasheets/ESP32-C6.pdf differ
diff --git a/public/datasheets/ESP32-C61.pdf b/public/datasheets/ESP32-C61.pdf
new file mode 100644
index 0000000..77fb6b2
Binary files /dev/null and b/public/datasheets/ESP32-C61.pdf differ
diff --git a/public/datasheets/ESP32-H2.pdf b/public/datasheets/ESP32-H2.pdf
new file mode 100644
index 0000000..e0cb861
Binary files /dev/null and b/public/datasheets/ESP32-H2.pdf differ
diff --git a/public/datasheets/ESP32-P4.pdf b/public/datasheets/ESP32-P4.pdf
new file mode 100644
index 0000000..3596db4
Binary files /dev/null and b/public/datasheets/ESP32-P4.pdf differ
diff --git a/public/datasheets/ESP32-S2.pdf b/public/datasheets/ESP32-S2.pdf
new file mode 100644
index 0000000..d2ceea6
Binary files /dev/null and b/public/datasheets/ESP32-S2.pdf differ
diff --git a/public/datasheets/ESP32-S3.pdf b/public/datasheets/ESP32-S3.pdf
new file mode 100644
index 0000000..833b265
Binary files /dev/null and b/public/datasheets/ESP32-S3.pdf differ
diff --git a/public/datasheets/ESP32-S31.pdf b/public/datasheets/ESP32-S31.pdf
new file mode 100644
index 0000000..a7befae
Binary files /dev/null and b/public/datasheets/ESP32-S31.pdf differ
diff --git a/public/datasheets/ESP32.pdf b/public/datasheets/ESP32.pdf
new file mode 100644
index 0000000..e39bff2
Binary files /dev/null and b/public/datasheets/ESP32.pdf differ
diff --git a/public/placas/esp32-c5.png b/public/placas/esp32-c5.png
index 8e99706..e6d9ac9 100644
Binary files a/public/placas/esp32-c5.png and b/public/placas/esp32-c5.png differ
diff --git a/public/placas/esp32-c6.png b/public/placas/esp32-c6.png
index 57290ba..ca1a8e7 100644
Binary files a/public/placas/esp32-c6.png and b/public/placas/esp32-c6.png differ
diff --git a/public/placas/esp32-c61.png b/public/placas/esp32-c61.png
index af802c5..10c9db8 100644
Binary files a/public/placas/esp32-c61.png and b/public/placas/esp32-c61.png differ
diff --git a/public/placas/esp32-h2.png b/public/placas/esp32-h2.png
index 1e326e6..5e7a2bb 100644
Binary files a/public/placas/esp32-h2.png and b/public/placas/esp32-h2.png differ
diff --git a/public/placas/esp32-s3.png b/public/placas/esp32-s3.png
index 0fcd270..8a492a1 100644
Binary files a/public/placas/esp32-s3.png and b/public/placas/esp32-s3.png differ
diff --git a/public/placas/esp32-s31.png b/public/placas/esp32-s31.png
new file mode 100644
index 0000000..a03a91f
Binary files /dev/null and b/public/placas/esp32-s31.png differ
diff --git a/public/placas/esp32.png b/public/placas/esp32.png
index a954087..b92c1de 100644
Binary files a/public/placas/esp32.png and b/public/placas/esp32.png differ
diff --git a/public/series.json b/public/series.json
index f7be945..6123a6b 100644
--- a/public/series.json
+++ b/public/series.json
@@ -131,6 +131,86 @@
 		"placa": "/placas/esp32-s3.png",
 		"cor": "#fd7e14"
 	},
+	"ESP32-S31": {
+		"nome_completo": "ESP32-S31",
+		"icone": "🌀",
+		"descricao": "Processador dual-core RISC-V de alta performance a 320MHz com Wi-Fi 6, Bluetooth 5.4 e Classic, Zigbee/Thread, Matter e aceleração IA",
+		"arquitetura": "RISC-V dual-core de 32 bits (HP) + RISC-V single-core (LP)",
+		"nucleos": "2 (Dual-core HP) + 1 (Single-core LP)",
+		"frequencia": "Até 320 MHz",
+		"coprocessador_ulp": "Sim (RISC-V, LP CPU de 40 MHz)",
+		"aceleradores_ia": "Sim (Custom AI and DSP extension XespV)",
+		"wifi": "Wi-Fi 6 (802.11ax) 2.4 GHz",
+		"bluetooth": "Bluetooth 5.4 LE e Bluetooth Classic",
+		"zigbee_thread": "IEEE 802.15.4 (Zigbee 3.0, Thread 1.4)",
+		"matter": "Sim",
+		"memoria_sram": "512 KB (HP SRAM)",
+		"memoria_sram_rtc": "32 KB (LP SRAM)",
+		"memoria_rom": "320 KB",
+		"flash_externa": "Até 256 MB via QSPI",
+		"psram_externa": "Suporta até 64 MB (16 MB ou 32 MB DDR OPI integrados no encapsulamento)",
+		"gpio": "60",
+		"adc": "2x SAR ADC de 12 bits, até 16 canais",
+		"dac": "Sim (2x DAC de 10 bits e 2x DAC de 12 bits)",
+		"touch": "14 canais capacitivos",
+		"uart": "5 (4 UART + 1 LP UART)",
+		"spi": "7 (6 SPI + 1 LP SPI)",
+		"i2c": "3 (2 I2C + 1 LP I2C)",
+		"i2s": "2",
+		"pwm": "LED PWM (até 8 canais), Motor PWM (MCPWM)",
+		"usb": "1 (USB 2.0 High-Speed OTG e USB Serial/JTAG)",
+		"can": "Sim (CAN FD Controller)",
+		"sensor_temperatura": "1 (interno)",
+		"consumo_energia": {
+			"active": "Consumo otimizado de alta performance configurável",
+			"light_sleep": "0.1-0.8 mA",
+			"deep_sleep": "Baixo consumo com LP CPU ativa"
+		},
+		"temperatura_operacao": "-40°C a 85°C",
+		"temperatura_armazenamento": "-40°C a 150°C",
+		"datasheet": "https://documentation.espressif.com/esp32-s31_datasheet_en.html",
+		"manual_tecnico": "https://documentation.espressif.com/esp32-s31_technical_reference_manual_en.html",
+		"guia_de_programacao": "https://docs.espressif.com/projects/esp-idf/en/latest/esp32s31/get-started/index.html",
+		"placa": "/placas/esp32-s31.png",
+		"cor": "#ff2a5f"
+	},
+	"ESP32-C2": {
+		"nome_completo": "ESP32-C2 (ESP8684)",
+		"icone": "🌱",
+		"descricao": "Microcontrolador RISC-V ultra econômico e de baixo consumo com Wi-Fi 4 e Bluetooth 5.0 LE",
+		"arquitetura": "RISC-V single-core de 32 bits",
+		"nucleos": "1 (Single-core)",
+		"frequencia": "Até 120 MHz",
+		"wifi": "IEEE 802.11 b/g/n (2.4 GHz, até 72.2 Mbps)",
+		"bluetooth": "Bluetooth 5.0 LE",
+		"memoria_sram": "272 KB (16 KB para cache)",
+		"memoria_sram_rtc": "Não",
+		"memoria_rom": "576 KB",
+		"flash_externa": "Não suportada diretamente (2 MB ou 4 MB de Flash integrados no encapsulamento)",
+		"psram_externa": "Não",
+		"gpio": "14",
+		"adc": "1x SAR ADC de 12 bits, até 5 canais",
+		"dac": "Não",
+		"touch": "Não",
+		"uart": "2",
+		"spi": "3 (SPI0/1 para Flash interna, SPI2 para uso geral)",
+		"i2c": "1 (Master-only)",
+		"i2s": "Não",
+		"pwm": "LED PWM (até 6 canais)",
+		"sensor_temperatura": "1 (interno)",
+		"consumo_energia": {
+			"active_cpu_120mhz": "13 mA",
+			"light_sleep": "130 µA",
+			"deep_sleep": "5 µA"
+		},
+		"temperatura_operacao": "-40°C a 105°C",
+		"temperatura_armazenamento": "-40°C a 150°C",
+		"datasheet": "https://documentation.espressif.com/esp32-c2_datasheet_en.html",
+		"manual_tecnico": "https://documentation.espressif.com/esp32-c2_technical_reference_manual_en.html",
+		"guia_de_programacao": "https://docs.espressif.com/projects/esp-idf/en/latest/esp32c2/get-started/index.html",
+		"placa": "/placas/esp32-c2.png",
+		"cor": "#8c52ff"
+	},
 	"ESP32-C3": {
 		"nome_completo": "ESP32-C3",
 		"icone": "💎",
@@ -174,20 +254,22 @@
 	"ESP32-C5": {
 		"nome_completo": "ESP32-C5",
 		"icone": "📶",
-		"descricao": "O primeiro com suporte a Wi-Fi 6 dual-band e Bluetooth 5.3, equipado com um processador RISC-V",
-		"arquitetura": "RISC-V single-core de 32 bits",
-		"nucleos": "1 (Single-core)",
+		"descricao": "O primeiro com suporte a Wi-Fi 6 dual-band e Bluetooth 6.0, equipado com CPU RISC-V e coprocessador ULP",
+		"arquitetura": "RISC-V single-core de 32 bits (HP) + RISC-V single-core (LP)",
+		"nucleos": "1 (Single-core HP) + 1 (Single-core LP)",
 		"frequencia": "Até 240 MHz",
+		"coprocessador_ulp": "Sim (RISC-V, LP CPU de 48 MHz)",
 		"wifi": "Wi-Fi 6 (802.11ax) dual-band 2.4 GHz e 5 GHz",
-		"bluetooth": "Bluetooth 5.3 LE",
-		"zigbee_thread": "IEEE 802.15.4",
-		"memoria_sram": "560 KB",
+		"bluetooth": "Bluetooth 6.0 LE",
+		"zigbee_thread": "IEEE 802.15.4 (Zigbee 3.0, Thread 1.4)",
+		"matter": "Sim",
+		"memoria_sram": "384 KB",
 		"memoria_sram_rtc": "16 KB",
 		"memoria_rom": "320 KB",
 		"flash_externa": "Até 16 MB via QSPI",
 		"psram_externa": "Não",
 		"gpio": "29",
-		"adc": "1x SAR ADC de 12 bits, até 7 canais",
+		"adc": "1x SAR ADC de 12 bits, até 6 canais",
 		"dac": "Não",
 		"touch": "Não",
 		"uart": "3",
@@ -213,20 +295,21 @@
 	"ESP32-C6": {
 		"nome_completo": "ESP32-C6",
 		"icone": "🌐",
-		"descricao": "Recursos de segurança avançada, Wi-Fi 6, Bluetooth, Zigbee e Thread com suporte a Matter",
-		"arquitetura": "RISC-V single-core de 32 bits",
-		"nucleos": "1 (Single-core)",
+		"descricao": "Recursos de segurança avançada, Wi-Fi 6, Bluetooth 5.3, Zigbee e Thread com suporte a Matter",
+		"arquitetura": "RISC-V single-core de 32 bits (HP) + RISC-V single-core (LP)",
+		"nucleos": "1 (Single-core HP) + 1 (Single-core LP)",
 		"frequencia": "Até 160 MHz",
+		"coprocessador_ulp": "Sim (RISC-V, LP CPU de 20 MHz)",
 		"wifi": "Wi-Fi 6 (802.11ax) 2.4 GHz",
 		"bluetooth": "Bluetooth 5.3 LE",
-		"zigbee_thread": "IEEE 802.15.4 (Zigbee, Thread)",
+		"zigbee_thread": "IEEE 802.15.4 (Zigbee 3.0, Thread 1.3)",
 		"matter": "Sim",
 		"memoria_sram": "512 KB",
 		"memoria_sram_rtc": "16 KB",
 		"memoria_rom": "320 KB",
 		"flash_externa": "Até 16 MB via QSPI",
 		"psram_externa": "Não",
-		"gpio": "30 ou 22",
+		"gpio": "30",
 		"adc": "1x SAR ADC de 12 bits, até 7 canais",
 		"dac": "Não",
 		"touch": "Não",
@@ -236,7 +319,7 @@
 		"i2s": "1",
 		"pwm": "LED PWM (até 6 canais), Motor PWM",
 		"usb": "1 (USB Serial/JTAG)",
-		"sdio": "1 (SD/SDIO/MMC Host)",
+		"sdio": "1 (SDIO 2.0 Slave)",
 		"sensor_temperatura": "1 (interno)",
 		"consumo_energia": {
 			"active_wifi6": "Varia conforme perfil TX/RX",
@@ -251,11 +334,52 @@
 		"placa": "/placas/esp32-c6.png",
 		"cor": "#17a2b8"
 	},
+	"ESP32-C61": {
+		"nome_completo": "ESP32-C61",
+		"icone": "🛰️",
+		"descricao": "Microcontrolador RISC-V econômico de 160MHz com Wi-Fi 6, Bluetooth 5.0 LE e suporte a Flash/PSRAM no encapsulamento",
+		"arquitetura": "RISC-V single-core de 32 bits",
+		"nucleos": "1 (Single-core)",
+		"frequencia": "Até 160 MHz",
+		"wifi": "Wi-Fi 6 (802.11ax) 2.4 GHz",
+		"bluetooth": "Bluetooth 5.0 LE",
+		"zigbee_thread": "Não",
+		"matter": "Não",
+		"memoria_sram": "320 KB",
+		"memoria_sram_rtc": "Não",
+		"memoria_rom": "256 KB",
+		"flash_externa": "Até 16 MB via QSPI (modelos com 4 MB ou 8 MB integrados no encapsulamento)",
+		"psram_externa": "Até 16 MB via QSPI (modelos com 2 MB ou 8 MB integrados no encapsulamento)",
+		"gpio": "30",
+		"adc": "1x SAR ADC de 12 bits, até 4 canais",
+		"dac": "Não",
+		"touch": "Não",
+		"uart": "3",
+		"spi": "3 (2 para Flash/PSRAM, 1 para uso geral)",
+		"i2c": "1",
+		"i2s": "1",
+		"pwm": "LED PWM (até 6 canais)",
+		"usb": "1 (USB Serial/JTAG)",
+		"sdio": "1 (SDIO 2.0 Slave)",
+		"sensor_temperatura": "1 (interno)",
+		"consumo_energia": {
+			"active": "Baixo consumo com clock dinâmico",
+			"light_sleep": "0.1-0.8 mA",
+			"deep_sleep": "7 µA"
+		},
+		"temperatura_operacao": "-40°C a 105°C",
+		"temperatura_armazenamento": "-40°C a 150°C",
+		"datasheet": "https://documentation.espressif.com/esp32-c61_datasheet_en.html",
+		"manual_tecnico": "https://documentation.espressif.com/esp32-c61_technical_reference_manual_en.html",
+		"guia_de_programacao": "https://docs.espressif.com/projects/esp-idf/en/latest/esp32c61/get-started/index.html",
+		"placa": "/placas/esp32-c61.png",
+		"cor": "#0dcaf0"
+	},
 	"ESP32-P4": {
 		"nome_completo": "ESP32-P4",
 		"icone": "⚡",
-		"descricao": "Alto desempenho com processador RISC-V dual-core a 400MHz e aceleradores de IA",
-		"arquitetura": "RISC-V de 32 bits dual-core de alto desempenho + single-core de baixo consumo",
+		"descricao": "Alto desempenho com processador RISC-V dual-core a 400MHz, aceleradores de IA e ricas interfaces de mídia",
+		"arquitetura": "RISC-V de 32 bits dual-core de alto desempenho (HP) + single-core de baixo consumo (LP)",
 		"nucleos": "2 (Dual-core HP) + 1 (Single-core LP)",
 		"frequencia": "Até 400 MHz",
 		"aceleradores_ia": "Sim (Vector Instructions, aceleradores de IA)",
@@ -263,9 +387,10 @@
 		"bluetooth": "Não",
 		"ethernet": "Sim (Ethernet MAC integrado)",
 		"memoria_sram": "768 KB",
-		"memoria_rom": "768 KB",
+		"memoria_sram_rtc": "32 KB",
+		"memoria_rom": "128 KB",
 		"flash_externa": "Até 128 MB via QSPI/Octal SPI",
-		"psram_externa": "Até 32 MB via QSPI/Octal SPI",
+		"psram_externa": "Suporta até 64 MB (16 MB ou 32 MB integrados no encapsulamento via OPI/HPI)",
 		"gpio": "55",
 		"adc": "1x SAR ADC de 12 bits, até 8 canais",
 		"dac": "Não",
@@ -298,13 +423,13 @@
 	"ESP32-H2": {
 		"nome_completo": "ESP32-H2",
 		"icone": "🔋",
-		"descricao": "Focado em ultra-baixo consumo com Bluetooth, Zigbee e Thread. Mas sem suporte a Wi-Fi",
+		"descricao": "Focado em ultra-baixo consumo com Bluetooth 5.3, Zigbee e Thread. Mas sem suporte a Wi-Fi",
 		"arquitetura": "RISC-V single-core de 32 bits",
 		"nucleos": "1 (Single-core)",
 		"frequencia": "Até 96 MHz",
 		"wifi": "Não",
-		"bluetooth": "Bluetooth 5.2 LE",
-		"zigbee_thread": "IEEE 802.15.4 (Zigbee, Thread)",
+		"bluetooth": "Bluetooth 5.3 LE",
+		"zigbee_thread": "IEEE 802.15.4 (Zigbee 3.0, Thread 1.3)",
 		"matter": "Sim",
 		"memoria_sram": "320 KB",
 		"memoria_sram_rtc": "16 KB",