feat: add call-to-action sections for the catalog in multiple pages and enhance author information in the About page

This commit is contained in:
Lucas Rayan committed 2025-11-10 09:41:59 -03:00
1 parent 999c65a018
commit 35ab3e7da6
6 files changed
+135 -4

No files matched your search

+21
View File
@@ -196,6 +196,27 @@ export default function Comparacao() {
</div> </div>
</div> </div>
{/* Call-to-Action para Catálogo de Placas */}
<div className="my-12 bg-linear-to-r from-blue-600 to-purple-600 rounded-3xl shadow-xl p-8 text-white">
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="flex-1">
<h3 className="text-2xl md:text-3xl font-bold mb-3 flex items-center gap-2">
🛒 Encontrou a série ideal?
</h3>
<p className="text-lg text-blue-100 leading-relaxed text-justify">
Confira nosso catálogo com placas de desenvolvimento verificadas das séries que você comparou.
Links diretos para lojas oficiais e confiáveis!
</p>
</div>
<Link
href="/catalogo"
className="bg-white text-purple-700 px-8 py-4 rounded-xl font-bold text-lg shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 whitespace-nowrap"
>
Ver Placas Disponíveis →
</Link>
</div>
</div>
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{selectedSeries.map(seriesKey => { {selectedSeries.map(seriesKey => {
const seriesItem = seriesData[seriesKey]; const seriesItem = seriesData[seriesKey];
+50 -2
View File
@@ -11,6 +11,8 @@ export default function Home() {
{name: "Comparação de Séries", description: "Compare diferentes séries ESP32 para escolher o mais adequado ao seu projeto", icon: "📈"}, {name: "Comparação de Séries", description: "Compare diferentes séries ESP32 para escolher o mais adequado ao seu projeto", icon: "📈"},
{name: "Datasheets", description: "Acesso direto aos datasheets oficiais para informações detalhadas sobre cada série", icon: "📄"}, {name: "Datasheets", description: "Acesso direto aos datasheets oficiais para informações detalhadas sobre cada série", icon: "📄"},
{name: "Exemplos de Código", description: "Encontre exemplos práticos de código para iniciar rapidamente seus projetos com ESP32", icon: "💻"}, {name: "Exemplos de Código", description: "Encontre exemplos práticos de código para iniciar rapidamente seus projetos com ESP32", icon: "💻"},
{name: "Atualizações Constantes", description: "Mantenha-se atualizado com as últimas novidades e lançamentos no ecossistema ESP32", icon: "🔄"},
{name: "Conteúdo em Português", description: "Toda a documentação e recursos são apresentados em português para facilitar o entendimento", icon: "📚"},
] ]
return ( return (
@@ -74,14 +76,60 @@ export default function Home() {
))} ))}
</div> </div>
<div className="mt-12 px-4 md:px-16"> <div className="mt-16 px-4 md:px-16">
<p className="text-md"> <div className="bg-white rounded-2xl shadow-lg p-8 border border-gray-100">
{/* Logo e Link do Ciência Embarcada */}
<div className="flex flex-col items-center mb-6">
<a
href="https://cienciaembarcada.com.br"
target="_blank"
rel="noopener noreferrer"
className="group"
>
<img
src="/logo.png"
alt="Ciência Embarcada"
className="h-16 md:h-20 mb-4 transition-transform duration-300 group-hover:scale-110"
/>
</a>
<p className="text-lg font-semibold text-gray-800 mb-2">
Conteúdo por <a
href="https://cienciaembarcada.com.br"
target="_blank"
rel="noopener noreferrer"
className="text-purple-600 hover:text-purple-800 transition-colors"
>
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>
<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"
>
🚀 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>
</a>
</div>
{/* Disclaimer */}
<div className="border-t border-gray-200 pt-6 mt-6">
<p className="text-sm text-gray-600 text-center">
O ESPDocs é uma documentação não oficial e independente, criada por O ESPDocs é uma documentação não oficial e independente, criada por
um entusiasta da comunidade ESP32 e que não possui nenhum tipo de afiliação um entusiasta da comunidade ESP32 e que não possui nenhum tipo de afiliação
com a Espressif Systems, fabricante dos chips ESP32. Todas as informações com a Espressif Systems, fabricante dos chips ESP32. Todas as informações
são coletadas de fontes públicas e experiências pessoais de desenvolvimento. são coletadas de fontes públicas e experiências pessoais de desenvolvimento.
</p> </p>
</div> </div>
</div>
</div>
</main> </main>
<Footer /> <Footer />
+21
View File
@@ -241,6 +241,27 @@ export default async function SerieDetail({ params }) {
<SeriesTabMenu tabs={tabs} color={serie.cor} /> <SeriesTabMenu tabs={tabs} color={serie.cor} />
{/* Call-to-Action para Catálogo de Placas */}
<div className="my-12 bg-linear-to-r from-blue-600 to-purple-600 rounded-3xl shadow-xl p-8 text-white">
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="flex-1">
<h3 className="text-2xl md:text-3xl font-bold mb-3 flex items-center gap-2">
🛒 Pronto para começar?
</h3>
<p className="text-lg text-blue-100 leading-relaxed text-justify">
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="bg-white text-purple-700 px-8 py-4 rounded-xl font-bold text-lg shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 whitespace-nowrap"
>
Ver Placas Disponíveis →
</Link>
</div>
</div>
<div className="grid sm:flex sm:justify-between items-center gap-4 mt-12 md:mx-8"> <div className="grid sm:flex sm:justify-between items-center gap-4 mt-12 md:mx-8">
{previousKey ? ( {previousKey ? (
<Link <Link
+42 -1
View File
@@ -52,7 +52,7 @@ export default function Sobre() {
<section className="md:col-span-2 space-y-6"> <section className="md:col-span-2 space-y-6">
<article className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-sm border border-gray-100"> <article className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-sm border border-gray-100">
<h2 className="text-2xl font-bold mb-2">Missão</h2> <h2 className="text-2xl font-bold mb-2">Missão</h2>
<p className="text-gray-700 leading-relaxed"> <p className="text-gray-700 leading-relaxed text-justify">
Facilitar o aprendizado e acelerar projetos com ESP32 por meio de Facilitar o aprendizado e acelerar projetos com ESP32 por meio de
documentação clara, exemplos testados e comparativos práticos. documentação clara, exemplos testados e comparativos práticos.
Priorizei traduções fiéis, explicações passo a passo e dicas Priorizei traduções fiéis, explicações passo a passo e dicas
@@ -105,6 +105,47 @@ export default function Sobre() {
</section> </section>
<aside className="space-y-4"> <aside className="space-y-4">
<div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
<div className="flex flex-col items-center mb-4">
<img
src="/logo.png"
alt="Ciência Embarcada"
className="h-16 mb-3"
/>
<h3 className="text-lg font-semibold text-center">Sobre o Autor</h3>
</div>
<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>
<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="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>
<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-white rounded-2xl p-6 shadow-md border border-gray-100"> <div className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="text-lg font-semibold">Contribua</h3> <h3 className="text-lg font-semibold">Contribua</h3>
+1 -1
View File
@@ -5,7 +5,7 @@ export default function Footer() {
return ( 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"> <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 py-8 rounded-t-2xl shadow-inner border-t border-white/10"> <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="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="space-y-3"> <div className="space-y-3">
<h3 className="text-2xl font-extrabold tracking-tight">ESPDocs</h3> <h3 className="text-2xl font-extrabold tracking-tight">ESPDocs</h3>
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB