"A ordem dos fatores altera o caos."
Project Banner
A FABRIKA não é apenas uma landing page; é uma experiência digital imersiva projetada para eventos de música eletrônica, techno e cultura underground.
Desenvolvida para gerar FOMO (Fear Of Missing Out) e alta conversão de ingressos, esta aplicação une estética Brutalista, performance extrema e gatilhos de venda inteligentes, fugindo dos templates padrões de mercado.
🔗 Status: Ready for Deploy
Este projeto implementa conceitos avançados de UI/UX para o público jovem:
- Terminal Preloader: Carregamento inicial estilo "System Boot/Hacker".
- Navegação "4 Corners": Menu fixo nos quatro cantos da tela, eliminando a navbar tradicional.
- Audio Player Persistente: Player minimalista com equalizador animado tocando o set do evento (começa mutado por regras de browser).
- Estética Brutalista: Zero border-radius, texturas de malha (mesh), ruído (noise texture) e tipografia glitch.
- Secret Area: Um terminal de login escondido (
CMD + FBRK) que libera descontos para usuários que descobrem a senha. - Modal de Segurança: Aviso de epilepsia/fotossensibilidade para proteger o usuário.
- Sticky Buy Button: Barra de compra fixa no mobile que persegue o usuário durante o scroll.
- Contagem Regressiva: Hero section com timer para abertura de lotes ou início do evento.
- Integração de Localização: Botões diretos para abrir Uber e Waze já com o destino configurado.
- Add to Calendar: Funcionalidade para salvar o evento na agenda do Google/Apple.
- Line-up Assimétrico: Layout de grade quebrada com efeito de "Bloqueio" para atrações não reveladas.
Construído com as tecnologias mais modernas do ecossistema React para garantir SEO e Performance (Lighthouse 100).
- Core: Next.js 14 (App Router & Server Components)
- Estilização: Tailwind CSS (com plugins de animação customizados)
- Animações: Framer Motion (Scroll animations, Glitch, Transitions)
- Ícones: Lucide React
- Fontes: A2 Gothic (Local) & JetBrains Mono (Google Fonts)
- Node.js 18+ instalado.
# 1. Clone o repositório
git clone [https://github.com/seu-usuario/fabrika-event.git](https://github.com/seu-usuario/fabrika-event.git)
# 2. Entre na pasta
cd fabrika-event
# 3. Instale as dependências
npm install
# 4. Rode o servidor de desenvolvimento
npm run dev
# 5. Abra http://localhost:3000 no seu navegador.## 📂 Estrutura de Pastas
```text
FBRK/
├── public/ # Assets estáticos
│ ├── audio/ # Sets e trilhas sonoras (.mp3)
│ ├── partners/ # Logos dos patrocinadores (.png)
│ └── fonts/ # Fontes locais customizadas
├── src/
│ ├── app/ # Rotas e Layout Global
│ ├── components/
│ │ ├── sections/ # Blocos principais (Hero, Lineup, Tickets...)
│ │ ├── ui/ # Componentes menores (Botões, Modais, AudioPlayer...)
│ │ ├── layout/ # Estruturas de grid e navegação (FabrikaFrame)
│ │ └── floating/ # Elementos fixos (Cursor, WhatsApp, StickyBar)
│ └── config/ # Configurações globais do site## 🎨 Versatilidade & Customização
O projeto foi arquitetado para ser facilmente adaptável:
1. **Patrocinadores:** Basta adicionar imagens PNG na pasta `/public/partners` e atualizar o array no componente `Partners.tsx`. O carrossel infinito se ajusta automaticamente.
2. **Identidade:** Mude a cor primária (`--primary`) no CSS e todo o site muda de Vermelho para Verde/Roxo/Azul mantendo os efeitos de glitch.
3. **Localização:** O componente `Location.tsx` aceita iframes do Google Maps e links profundos (Deep Links) para apps de transporte.
---
## 📱 Mobile First
Todo o layout foi desenhado pensando primeiramente na experiência móvel, onde 90% do público-alvo acessa para comprar ingressos.
- Botões maiores (Touch Targets).
- Layouts de grade que se transformam em lista.
- Performance otimizada.
---
Designed & Developed by **David Denis**.