Site do coletivo Sopa, construído com Next.js 16 e Tailwind CSS v4.
- Next.js 16 (App Router, Turbopack)
- TypeScript
- Tailwind CSS v4
- Fontes: Instrument Serif + Geist + Geist Mono
src/
├── app/
│ ├── globals.css # Variáveis CSS de tema, keyframes, base styles
│ ├── layout.tsx # Root layout (metadados, fontes, data-theme)
│ └── page.tsx # Página principal — orquestra os componentes
└── components/
├── Header.tsx # Navbar com dropdowns, dark mode toggle e botão Entrar
├── HeroSection.tsx # Hero com título, stats e ilustração do bowl animado
├── Ticker.tsx # Faixa de notícias com scroll infinito
└── ConnectModal.tsx # Modal de entrada (e-mail, WhatsApp, observar)
npm install
npm run devAcesse http://localhost:3000.
O tema é controlado pelo atributo data-theme no <html>. O componente Header alterna entre light e dark via estado React — o valor inicial light vem do layout.tsx para evitar flash no SSR.
As variáveis de cor ficam em globals.css:
:root, [data-theme="light"] { --bg: #FAF6F0; ... }
[data-theme="dark"] { --bg: #15110D; ... }npm run build
npm start