Vou criar um site responsivo para o IDE Social Hub usando Next.js com o App Router, seguindo o design mostrado nas imagens. Vou organizar o código em componentes reutilizáveis para facilitar a manutenção.
O site do IDE Social Hub foi estruturado com os seguintes componentes:
Layout e Estrutura:
- Layout principal com header e footer
- Página inicial que organiza todas as seções
Componentes Principais:
- Header: Menu de navegação responsivo com toggle para mobile
- Hero: Seção principal com título, subtítulo e botões de ação
- Quem Somos: Breve descrição da organização
- Por Que Diversidade: Estatísticas em cards com fundo roxo
- Nossas Soluções: Três serviços principais com ícones
- Benefícios para Empresas: Seção visível apenas na versão desktop
- Nossa Equipe: Perfis dos membros da equipe com fotos
- Contato: Formulário de contato e informações
- Footer: Links úteis e informações de copyright
Recursos Adicionais:
- Hook personalizado
useMediaQuerypara controlar a responsividade - Estilização com Tailwind CSS
- Cores e estilos consistentes com a identidade visual
- Hook personalizado
O site é totalmente responsivo, adaptando-se tanto para dispositivos móveis quanto para desktop, conforme mostrado nas imagens de referência. Os componentes foram organizados de forma modular para facilitar a manutenção e possíveis atualizações futuras.
Para implementar o site, basta adicionar os arquivos ao seu projeto Next.js e substituir as imagens de placeholder por imagens reais da sua organização.
The code returns the following error:
Unhandled promise rejection: CssSyntaxError: <css input>:1:363: The `bg-[#8a3ffc]hover:bg-[#7535e5]text-white` class does not exist. If `bg-[#8a3ffc]hover:bg-[#7535e5]text-white` is a custom class, make sure it is defined within a `@layer` directive.
> 1 | px-8;}.btn-primary{@apply bg-[#8a3ffc]hover:bg-[#7535e5]text-white font-medium py-3 px-6 rounded-full transition-colors;}.btn-outline{@apply
| ^
Revise the code to address the error.
I was previewing: /
Vou corrigir o erro no arquivo globals.css. O problema está na definição da classe btn-primary onde faltam espaços entre as classes Tailwind.
O erro ocorreu porque faltavam espaços entre as classes Tailwind na definição da classe btn-primary no arquivo globals.css. Quando as classes são concatenadas sem espaços (bg-[#8a3ffc]hover:bg-[#7535e5]text-white), o Tailwind interpreta isso como uma única classe inválida.
A correção adiciona os espaços necessários entre as classes:
bg-[#8a3ffc](cor de fundo)hover:bg-[#7535e5](cor de fundo ao passar o mouse)text-white(cor do texto)
Isso deve resolver o erro e permitir que o site seja renderizado corretamente.