Restore homepage and move "Sobre" content to /sobre
Replace app/page.jsx with the main landing UI (ESPDocs hero, CTAs and resources grid). Move detailed About content into app/sobre/page.jsx (features list, accessibility anchor, mission and contribution sections).
This commit is contained in:
Lucas Rayan committed
1 parent
b8f16bcc01
commit
83b2bd4c73
2 files changed
+196
-159
No files matched your search
+68
-136
@@ -2,149 +2,81 @@ import Header from "@/components/Header";
|
|||||||
import Footer from "@/components/Footer";
|
import Footer from "@/components/Footer";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
export default function Sobre() {
|
export default function Home() {
|
||||||
const features = [
|
const resources = [
|
||||||
{ icon: "📚", title: "Documentação Curada", desc: "Conteúdos organizados por níveis — do iniciante ao avançado." },
|
{name: "Detalhes Técnicos", description: "Explore as especificações técnicas de cada série ESP32, incluindo arquitetura, recursos e capacidades", icon: "🔧"},
|
||||||
{ icon: "🔧", title: "Exemplos Práticos", desc: "Projetos e trechos de código para aprender fazendo." },
|
{name: "Diagramas Interativos", description: "Visualize diagramas detalhados dos componentes ESP32 com interatividade para melhor compreensão", icon: "📊"},
|
||||||
{ icon: "🌐", title: "Comunidade", desc: "Contribuições abertas e canal para dúvidas e trocas." },
|
{name: "Frameworks Avançados", description: "Aprenda sobre frameworks populares como ESP-IDF, Arduino e MicroPython para desenvolvimento com ESP32", icon: "⚡"},
|
||||||
{ icon: "♿", title: "Acessibilidade", desc: "Textos claros, contraste adequado e navegação por teclado." },
|
{name: "Comparação de Séries", description: "Compare diferentes séries ESP32 para escolher o mais adequado ao seu projeto", icon: "📈"},
|
||||||
];
|
{name: "Datasheets", description: "Acesso direto aos datasheets oficiais para informações detalhadas sobre cada série", icon: "📄"},
|
||||||
|
{name: "Exemplos de Código", description: "Encontre exemplos práticos de código para iniciar rapidamente seus projetos com ESP32", icon: "💻"},
|
||||||
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen text-gray-800">
|
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||||
<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">
|
<Header />
|
||||||
Ir para o conteúdo
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<Header />
|
<main className="text-center px-4 pt-16 pb-8 max-w-5xl mx-auto">
|
||||||
|
<div className="inline-block mb-6">
|
||||||
<main id="conteudo" className="px-4 pt-16 pb-20 max-w-6xl mx-auto">
|
<div className="bg-linear-to-r from-blue-600 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
|
||||||
<header className="relative overflow-hidden rounded-2xl p-8 md:p-12 bg-linear-to-r from-blue-600 via-purple-600 to-pink-500 text-white shadow-lg">
|
🚀 Documentação em Português
|
||||||
<div className="absolute right-0 top-0 -mr-40 -mt-24 opacity-20 pointer-events-none">
|
|
||||||
<svg width="400" height="300" viewBox="0 0 600 400" fill="none" aria-hidden="true">
|
|
||||||
<path d="M0 200 C150 100 350 300 600 200 L600 400 L0 400 Z" fill="white" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative z-10 max-w-4xl mx-auto">
|
|
||||||
<h1 className="text-4xl md:text-5xl font-extrabold leading-tight bg-clip-text text-transparent bg-linear-to-r from-white to-purple-100 mb-3">
|
|
||||||
Sobre o ESPDocs
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p className="text-lg md:text-xl opacity-90 max-w-3xl mb-6">
|
|
||||||
Uma documentação não oficial, em português, feita por e para a comunidade — com foco em clareza, exemplos práticos e colaboração aberta.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-center">
|
|
||||||
<Link href="/" className="inline-flex items-center justify-center bg-white text-blue-700 px-4 py-2 rounded-lg font-semibold shadow-sm hover:shadow-md transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white" aria-label="Voltar para a página inicial">
|
|
||||||
← Voltar
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://github.com/lucasrguerra/ESPDocs"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center justify-center bg-white/20 border border-white/30 text-white px-4 py-2 rounded-lg font-semibold hover:bg-white/30 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"
|
|
||||||
aria-label="Abrir repositório do projeto no GitHub (abre em nova aba)"
|
|
||||||
>
|
|
||||||
Contribuir no GitHub
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-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">
|
|
||||||
<h2 className="text-2xl font-bold mb-2">Nossa missão</h2>
|
|
||||||
<p className="text-gray-700 leading-relaxed">
|
|
||||||
Facilitar o aprendizado e acelerar projetos com ESP32 por meio de documentação clara, exemplos testados e comparativos práticos.
|
|
||||||
Priorizamos traduções fiéis, explicações passo a passo e dicas baseadas em experiência real de desenvolvimento.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
|
|
||||||
<h2 className="text-2xl font-bold mb-2">Por que o ESPDocs?</h2>
|
|
||||||
<p className="text-gray-700 leading-relaxed mb-4">
|
|
||||||
Informações técnicas frequentemente estão dispersas entre datasheets, fóruns e repositórios. O ESPDocs centraliza esse conteúdo em português, com foco em aplicabilidade.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul role="list" className="grid sm:grid-cols-2 gap-4">
|
|
||||||
{features.map((f) => (
|
|
||||||
<li key={f.title} className="flex gap-3 items-start bg-gray-50 p-4 rounded-lg border border-gray-100">
|
|
||||||
<div className="text-2xl" aria-hidden="true">{f.icon}</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-gray-800">{f.title}</h3>
|
|
||||||
<p className="text-sm text-gray-600">{f.desc}</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<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">Como contribuir</h2>
|
|
||||||
<p className="text-gray-700 leading-relaxed mb-3">
|
|
||||||
Correções, traduções e novos exemplos são bem-vindos. Abra uma issue ou um pull request no repositório. Buscamos clareza nas descrições e exemplos testáveis.
|
|
||||||
</p>
|
|
||||||
<ol className="list-decimal list-inside text-gray-700 space-y-1">
|
|
||||||
<li>Fork do repositório e crie uma branch clara.</li>
|
|
||||||
<li>Adicione exemplos ou corrija o conteúdo com referências quando possível.</li>
|
|
||||||
<li>Abra um PR e descreva o que foi alterado.</li>
|
|
||||||
</ol>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
|
|
||||||
<h2 className="text-2xl font-bold mb-2">Acessibilidade</h2>
|
|
||||||
<p className="text-gray-700 leading-relaxed">
|
|
||||||
O site prioriza leitura, contraste legível e navegação por teclado. Se encontrar barreiras, por favor relate-nos para que possamos melhorar.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<aside className="space-y-4">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<p className="text-gray-700 mb-4">Ajude a melhorar o ESPDocs com exemplos, correções e traduções.</p>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<Link href="/contato" className="inline-flex items-center justify-center px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:border-purple-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" aria-label="Ir para a página de contato">
|
|
||||||
Entrar em contato
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 text-sm text-gray-500">
|
|
||||||
<strong>Nota:</strong> Conteúdo não oficial. Consulte sempre datasheets e documentos oficiais para decisões críticas.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-6xl md:text-7xl font-extrabold bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 animate-fade-in">
|
||||||
|
ESPDocs
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<h2 className="text-2xl md:text-3xl text-gray-700 font-semibold mb-6">
|
||||||
|
Ecossistema ESP32 em Português
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-lg text-gray-600 max-w-xl mx-auto leading-relaxed mb-12">
|
||||||
|
Documentação não oficial completa para facilitar seu aprendizado e desenvolvimento
|
||||||
|
com ESP32. Explore especificações, diagramas, frameworks e muito mais!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-20">
|
||||||
|
<Link
|
||||||
|
className="bg-linear-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300"
|
||||||
|
href="/series"
|
||||||
|
>
|
||||||
|
📚 Ver Séries
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className="bg-white text-gray-700 px-8 py-4 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-400 transform hover:-translate-y-1 transition-all duration-300"
|
||||||
|
href="/frameworks"
|
||||||
|
>
|
||||||
|
⚡ Ver Frameworks
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-6 mt-16">
|
||||||
|
{resources.map((resource) => (
|
||||||
|
<div key={resource.name} className="bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 border border-gray-100">
|
||||||
|
<div className="text-5xl mb-4">{resource.icon}</div>
|
||||||
|
<h3 className="text-xl font-bold text-gray-800 mb-3">
|
||||||
|
{resource.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
{resource.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 px-4 md:px-16">
|
||||||
|
<p className="text-md">
|
||||||
|
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
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
+128
-23
@@ -3,39 +3,144 @@ import Footer from "@/components/Footer";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
export default function Sobre() {
|
export default function Sobre() {
|
||||||
|
const features = [
|
||||||
|
{ icon: "📚", title: "Documentação Curada", desc: "Conteúdos organizados por níveis — do iniciante ao avançado." },
|
||||||
|
{ icon: "🔧", title: "Exemplos Práticos", desc: "Projetos e trechos de código para aprender fazendo." },
|
||||||
|
{ icon: "🌐", title: "Comunidade", desc: "Contribuições abertas e canal para dúvidas e trocas." },
|
||||||
|
{ icon: "♿", title: "Acessibilidade", desc: "Textos claros, contraste adequado e navegação por teclado." },
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
<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>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<main className="px-4 pt-16 pb-20 max-w-5xl mx-auto">
|
<main id="conteudo" className="px-4 pt-16 pb-20 max-w-6xl mx-auto">
|
||||||
<div className="bg-white/60 backdrop-blur-sm rounded-2xl p-8 shadow-md border border-gray-100">
|
<header className="relative overflow-hidden rounded-2xl p-8 md:p-12 bg-linear-to-r from-blue-600 via-purple-600 to-pink-500 text-white shadow-lg">
|
||||||
<div className="mb-6">
|
<div className="absolute right-0 top-0 -mr-40 -mt-24 opacity-20 pointer-events-none">
|
||||||
<Link href="/" className="text-sm text-blue-600 hover:underline">← Voltar</Link>
|
<svg width="400" height="300" viewBox="0 0 600 400" fill="none" aria-hidden="true">
|
||||||
|
<path d="M0 200 C150 100 350 300 600 200 L600 400 L0 400 Z" fill="white" />
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 mb-6">
|
<div className="relative z-10 max-w-4xl mx-auto">
|
||||||
Sobre o ESPDocs
|
<h1 className="text-4xl md:text-5xl font-extrabold leading-tight bg-clip-text text-transparent bg-linear-to-r from-white to-purple-100 mb-3">
|
||||||
</h1>
|
Sobre o ESPDocs
|
||||||
|
</h1>
|
||||||
|
|
||||||
<p className="text-lg text-gray-700 mb-4">
|
<p className="text-lg md:text-xl opacity-90 max-w-3xl mb-6">
|
||||||
O ESPDocs nasceu da paixão por explorar o potencial dos microcontroladores ESP32 e da vontade de compartilhar conhecimento de forma acessível e colaborativa. Criado por um entusiasta e desenvolvedor com mais de quatro anos de experiência prática com a plataforma, o projeto tem como propósito reunir, organizar e traduzir informações técnicas — muitas vezes dispersas — em um só lugar.
|
Uma documentação não oficial, em português, feita por e para a comunidade — com foco em clareza, exemplos práticos e colaboração aberta.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="text-lg text-gray-700 mb-4">
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-center">
|
||||||
Mais do que uma simples documentação não oficial, o ESPDocs é um espaço vivo de aprendizado. Aqui, cada detalhe sobre o hardware, frameworks, protocolos e boas práticas de desenvolvimento é tratado com cuidado e clareza, para que qualquer pessoa — do iniciante ao profissional — possa compreender e aplicar.
|
<Link href="/" className="inline-flex items-center justify-center bg-white text-blue-700 px-4 py-2 rounded-lg font-semibold shadow-sm hover:shadow-md transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white" aria-label="Voltar para a página inicial">
|
||||||
</p>
|
← Voltar
|
||||||
|
</Link>
|
||||||
|
|
||||||
<p className="text-lg text-gray-700 mb-4">
|
<a
|
||||||
A iniciativa surgiu com um foco especial na comunidade brasileira, que cresce e se destaca no cenário da eletrônica e IoT. O objetivo é facilitar o acesso ao conhecimento técnico em português, incentivar a experimentação e fortalecer a troca de experiências entre desenvolvedores, estudantes e pesquisadores.
|
href="https://github.com/lucasrguerra/ESPDocs"
|
||||||
</p>
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center justify-center bg-white/20 border border-white/30 text-white px-4 py-2 rounded-lg font-semibold hover:bg-white/30 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"
|
||||||
|
aria-label="Abrir repositório do projeto no GitHub (abre em nova aba)"
|
||||||
|
>
|
||||||
|
Contribuir no GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<p className="text-lg text-gray-700 mb-4">
|
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
O ESPDocs é, acima de tudo, uma homenagem à curiosidade e ao espírito colaborativo que impulsionam a inovação.
|
<section className="md:col-span-2 space-y-6">
|
||||||
</p>
|
<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">Nossa missão</h2>
|
||||||
|
<p className="text-gray-700 leading-relaxed">
|
||||||
|
Facilitar o aprendizado e acelerar projetos com ESP32 por meio de documentação clara, exemplos testados e comparativos práticos.
|
||||||
|
Priorizamos traduções fiéis, explicações passo a passo e dicas baseadas em experiência real de desenvolvimento.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
<p className="text-lg text-gray-800 font-semibold mt-6">
|
<article className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
|
||||||
ESPDocs — Documentando o futuro da IoT, em código aberto e em português.
|
<h2 className="text-2xl font-bold mb-2">Por que o ESPDocs?</h2>
|
||||||
</p>
|
<p className="text-gray-700 leading-relaxed mb-4">
|
||||||
|
Informações técnicas frequentemente estão dispersas entre datasheets, fóruns e repositórios. O ESPDocs centraliza esse conteúdo em português, com foco em aplicabilidade.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul role="list" className="grid sm:grid-cols-2 gap-4">
|
||||||
|
{features.map((f) => (
|
||||||
|
<li key={f.title} className="flex gap-3 items-start bg-gray-50 p-4 rounded-lg border border-gray-100">
|
||||||
|
<div className="text-2xl" aria-hidden="true">{f.icon}</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-800">{f.title}</h3>
|
||||||
|
<p className="text-sm text-gray-600">{f.desc}</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<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">Como contribuir</h2>
|
||||||
|
<p className="text-gray-700 leading-relaxed mb-3">
|
||||||
|
Correções, traduções e novos exemplos são bem-vindos. Abra uma issue ou um pull request no repositório. Buscamos clareza nas descrições e exemplos testáveis.
|
||||||
|
</p>
|
||||||
|
<ol className="list-decimal list-inside text-gray-700 space-y-1">
|
||||||
|
<li>Fork do repositório e crie uma branch clara.</li>
|
||||||
|
<li>Adicione exemplos ou corrija o conteúdo com referências quando possível.</li>
|
||||||
|
<li>Abra um PR e descreva o que foi alterado.</li>
|
||||||
|
</ol>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
|
||||||
|
<h2 className="text-2xl font-bold mb-2">Acessibilidade</h2>
|
||||||
|
<p className="text-gray-700 leading-relaxed">
|
||||||
|
O site prioriza leitura, contraste legível e navegação por teclado. Se encontrar barreiras, por favor relate-nos para que possamos melhorar.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside className="space-y-4">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<p className="text-gray-700 mb-4">Ajude a melhorar o ESPDocs com exemplos, correções e traduções.</p>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<Link href="/contato" className="inline-flex items-center justify-center px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:border-purple-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" aria-label="Ir para a página de contato">
|
||||||
|
Entrar em contato
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 text-sm text-gray-500">
|
||||||
|
<strong>Nota:</strong> Conteúdo não oficial. Consulte sempre datasheets e documentos oficiais para decisões críticas.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user