"A ordem dos fatores altera o caos."
A FABRIKAROOM não é apenas uma landing page corporativa; é uma plataforma digital imersiva projetada para eventos de música eletrônica, techno e cultura underground.
Desenvolvida com foco em gerar FOMO (Fear Of Missing Out) e maximizar a conversão em dias de Drop (virada de lote), esta aplicação une estética Cyber-Brutalista, interatividade 3D de alta performance e gatilhos mentais inteligentes, fugindo dos templates padrões do mercado de ingressos.
🔗 Status: Ready for Deploy
Este projeto implementa conceitos avançados de UI/UX para o público jovem:
O projeto implementa conceitos avançados de UI/UX desenvolvidos especificamente para o público jovem e nativo digital:
- Estética Cyber-Brutalista: Abandono de bordas arredondadas (zero border-radius) em prol de texturas de ruído (noise), malhas SVG distorcidas (wavy mesh) e tipografia glitch responsiva.
- Glassmorphism Dinâmico & Parallax: Cacos de vidro 3D renderizados via código que flutuam na Hero e reagem à gravidade do scroll do usuário pelo site.
- Terminal Preloader & Segurança: Carregamento inicial estilo "System Boot", atrelado a um modal obrigatório de segurança contra epilepsia fotossensível com memória de sessão (
sessionStorage). - Navegação Tática (HUD): Uma "cápsula" flutuante inteligente que monitora a rota ativa e revela links através de descriptografia de caracteres no hover.
- Line-up Arquivado (Past Acts): Um banco de dados simulado onde artistas ocultos aparecem como "Arquivos Corrompidos" e fotos reveladas exigem foco do mouse para serem decodificadas.
O sistema foi arquitetado para suportar o frenesi de lançamentos de ingressos:
- Sistema de Bloqueio de Rotas (Time-Locked): As páginas de
/ticketse/locationsão protegidas nativamente. Se o usuário tentar acessá-las antes do contador da Hero zerar, um painel de "Acesso Negado" barra a entrada. - Single Source of Truth (
site-config.ts): 100% dos textos, links, artistas, produtos e FAQs são alimentados por um único arquivo de configuração. Atualizar o site no meio de um evento não requer mexer em componentes React. - Merch Terminal: Experiência de compra integrada ao WhatsApp. O botão não apenas redireciona, mas abre um micro-terminal no card para escolha de tamanho e quantidade.
- Integração de Localização Rápida: Botões diretos para abrir Uber e Waze já com o destino e as coordenadas configuradas.
- Mobile Sticky Buy: Barra de conversão fixada no rodapé em dispositivos móveis, garantindo que a opção de compra nunca saia do alcance do polegar.
Construído com as tecnologias mais modernas do ecossistema React para garantir SEO impecável e Performance de nível Awwwards.
- Framework: Next.js 14 (App Router & Server Components)
- Linguagem: TypeScript
- Estilização: Tailwind CSS (com utilitários de animação customizados)
- Animações (Motion): Framer Motion (Scroll animations, Parallax, Glitch)
- Ícones: Lucide React
- Fontes: A2 Gothic (Local) & JetBrains Mono (Google Fonts)
Pré-requisitos: 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. Acesse no navegador
http://localhost:3000## 📂 Estrutura de Pastas
```text
FBRK/
├── public/ # Assets estáticos
│ ├── audio/ # Sets e trilhas sonoras (.mp3)
│ ├── partners/ # Logos dos patrocinadores (.png)
│ └── fonts/ # Fontes locais customizadas
├── app/
├── location/ # Rota independente com Lock System
│ │ ├── tickets/ # Rota independente com Lock System
│ │ ├── layout.tsx # Envolve Navbar e Footer globais
│ │ └── page.tsx # Landing Page (Hero, History, FAQ, Merch...) # Rotas e Layout Global
│ ├── components/
│ │ ├── sections/ # Blocos principais (Hero, Lineup...)
│ │ ├── 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:** A pagina `Location/page.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**.