Dissecando o Brainwave e Aprendendo a Construir Interfaces Complexas com React e Tailwind
Toda vez que designers trazem mockups no estilo de serviços modernos de IA, desenvolvedores começam a sentir um leve tremor. Gradientes neon, grades complexas de fundo, cruzes decorativas nas bordas das seções, layouts em grade, e parallax. Montar tudo isso de forma organizada sem transformar o código em uma bagunça de centenas de classes Tailwind espalhadas pode ser desafiador.
No repositório brainwave, o autor do canal JavaScript Mastery, Adrian Hajdin, publicou o código-fonte de uma landing page completa para um produto fictício de IA. O projeto é construído com React, Vite e Tailwind CSS. Este é um ótimo exemplo de como organizar estilo e arquitetura de componentes quando o design vai além de cards e botões padrão.
O que há dentro do Projeto
O repositório é um site single-page frontend pronto para uso. Ele inclui todos os blocos típicos de um site comercial: uma seção hero com chamada para ação, cards de funcionalidades, um roadmap interativo, uma seção de integrações e planos de preços.
O principal valor do projeto não está no design em si, mas na abordagem para implementar elementos visuais complexos. Em vez deplugar dependências de bibliotecas de componentes pesadas, o autor demonstra como aproveitar ao máximo o Tailwind CSS vanilla e o React puro.
Soluções Técnicas Interessantes
Revisei o código-fonte e identifiquei quatro técnicas que serão úteis em desenvolvimento real.
1. Arquitetura de Tipografia via Plugin Tailwind
Em projetos Tailwind grandes, um problema comum surge: desenvolvedores copiam cadeias longas de classes como font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] de um heading para outro. Isso polui a marcação e complica a refatoração.
No Brainwave, isso foi tratado através do arquivo de configuração tailwind.config.js. Usando a função nativa plugin, o autor criou classes de componentes personalizados para todos os níveis de tipografia:
plugins: [
plugin(function ({ addBase, addComponents, addUtilities }) {
addComponents({
".h1": {
"@apply font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] md:leading-[3.75rem] lg:text-[3.25rem] lg:leading-[4.0625rem] xl:text-[3.75rem] xl:leading-[4.5rem]":
{},
},
".h2": {
"@apply text-[1.75rem] leading-[2.5rem] md:text-[2rem] md:leading-[2.5rem] lg:text-[2.5rem] lg:leading-[3.5rem] xl:text-[3rem] xl:leading-tight":
{},
},
".body-1": {
"@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8":
{},
},
".tagline": {
"@apply font-grotesk font-light text-xs tracking-tagline uppercase":
{},
},
});
}),
]
Agora no JSX você só precisa escrever <h1 className="h1">, e os estilos são puxados automaticamente junto com os breakpoints responsivos.
2. Wrapper Universal de Seção com Linhas Guia
O design do projeto usa linhas divisórias finas nas laterais da página e cruzes decorativas nas interseções dos blocos. Construir essa marcação manualmente dentro de cada componente é inconveniente.
O projeto inclui um componente dedicado Section.jsx que lida com toda a geometria decorativa:
import SectionSvg from "../../public/assets/svg/SectionSvg";
const Section = ({
className,
id,
crosses,
crossesOffset,
customPaddings,
children,
}) => (
<div
id={id}
className={`relative
${
customPaddings ||
`py-10 lg:py-16 xl:py-20 ${crosses ? "lg:py-32 xl:py-40" : ""}`
} ${className || ""}`}
>
{children}
<div className="hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10" />
<div className="hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10" />
{crosses && (
<>
<div
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:left-10 right-10`}
/>
<SectionSvg crossesOffset={crossesOffset} />
</>
)}
</div>
);
O componente isola a lógica para renderizar linhas guia laterais (w-0.25 h-full bg-stroke-1) e divisores horizontais com ícones SVG nas interseções. Outros blocos simplesmente envolvem em <Section crosses>, mantendo uma estrutura limpa.
3. Layout Bento para Roadmap
A seção Roadmap é construída como uma grade assimétrica. Cards de número par se deslocam verticalmente em telas médias e grandes usando a classe even:md:translate-y-[7rem].
As bordas em gradiente usam uma técnica de dupla包装: o container externo recebe um fundo em gradiente (bg-conic-gradient) com padding mínimo p-0.25, enquanto o bloco interno preenche com a cor principal do tema escuro bg-n-8. Isso cria uma borda brilhante limpa com apenas uma fração de pixel de espessura sem filtros CSS pesados.
4. Extração de Conteúdo para Constantes
Todo texto, estrutura de navegação, preços e listas de funcionalidades são extraídos para o arquivo constants/index.js. Os componentes em si não contêm strings hardcoded—eles apenas lidam com mapeamento de dados. Para adaptar o projeto para um serviço real, você só modifica um objeto JS sem tocar na marcação JSX.
Como Executar o Projeto Localmente
Você precisará do Node.js e Git instalados para executar isso. Clone o repositório e instale as dependências:
git clone https://github.com/adrianhajdin/brainwave.git
cd brainwave
npm install
npm run dev
O servidor local Vite inicia em http://localhost:5173.
Quem se Beneficiará deste Repositório
O projeto não tem backend, integração com banco de dados ou gerenciamento de estado complexo. É especificamente um template e recurso de aprendizado para desenvolvimento frontend.
O repositório vale a pena explorar em dois cenários:
- Você quer melhorar suas habilidades em Tailwind CSS e entender como personalizar corretamente o tema para mockups de design não padrão.
- Você precisa de um framework pronto para uma landing page para seu projeto paralelo ou portfólio, onde uma apresentação visual impressionante é importante.
O código é limpo, dividido em módulos claros e fácil de separar em componentes reutilizáveis independentes. Link do código-fonte: github.com/adrianhajdin/brainwave.
Projetos relacionados