Atlas Studio - Site Oficial

Site completo e moderno para o estúdio criativo Atlas Studio.

🚀 Como usar

Estrutura de arquivos:

atlas-studio/
├── index.html          # Arquivo HTML principal
├── style.css           # Estilos CSS com temas dark/light
├── script.js           # JavaScript com todas as interações
├── assets/
│   ├── logo.png        # (ADICIONAR MANUALMENTE) Logo do estúdio
│   └── favicon.png     # (ADICIONAR MANUALMENTE) Ícone do site
└── README.md           # Este arquivo

⚠️ Passos obrigatórios antes de publicar:

1. Adicionar logo:

   • Coloque o arquivo logo.png na pasta assets/
   • Recomendado: 200x60px ou proporção similar (formato PNG com fundo transparente)

2. Adicionar favicon:

   • Coloque o arquivo favicon.png na pasta assets/
   • Recomendado: 64x64px ou 128x128px (formato PNG)

3. Atualizar número do WhatsApp:

   • Abra o arquivo index.html
   • Procure por todas as ocorrências de SEUNUMERO (Ctrl+H)
   • Substitua pelo número real no formato: 5511999999999 (código do país + DDD + número, sem espaços ou traços)
   • Faça o mesmo no arquivo script.js (console.warn)

4. Personalizar conteúdo:

   • Hero section: Nome e slogan
   • Sobre: Texto placeholder pode ser atualizado
   • Portfólio: Substituir as imagens placeholder e textos
   • Contato: Atualizar WhatsApp, Instagram e e-mail

✨ Funcionalidades inclusas

• ✅ Modo escuro/claro com toggle no header
• ✅ Cursor customizado animado com easing
• ✅ Scroll reveal animations com Intersection Observer API
• ✅ Menu hambúrguer responsivo para mobile
• ✅ Catálogo com abas por categoria
• ✅ Portfólio com filtros dinâmicos
• ✅ Botão flutuante do WhatsApp fixo
• ✅ Totalmente responsivo (mobile-first)
• ✅ Animações suaves em hover e transições
• ✅ Glassmorphism sutil nos cards
• ✅ Fundo com formas orgânicas animadas no hero

🎨 Paleta de Cores

• Fundo principal: #0A0A0A (dark) / #F8F9FA (light)
• Fundo secundário: #121212 (dark) / #FFFFFF (light)
• Texto principal: #FFFFFF (dark) / #0A0A0A (light)
• Accent gradient: #2E1A6B → #00A8E8

🔧 Tecnologias utilizadas

• HTML5 semântico
• CSS3 com CSS Variables, Grid, Flexbox
• JavaScript vanilla (ES6+)
• Intersection Observer API (para animações)
• Google Fonts (Poppins + Inter)

📱 Breakpoints de responsividade

• Desktop: > 1024px
• Tablet: 768px - 1024px
• Mobile: < 768px
• Mobile pequeno: < 480px

🚀 Deploy

Para publicar o site:

1. Netlify/Vercel: Apenas arraste a pasta atlas-studio para o deploy
2. Hostinger/GoDaddy: Faça upload via FTP da pasta completa
3. GitHub Pages: Push para repositório e ative o Pages

📝 Notas

• O site usa sessionStorage para persistir o tema (claro/escuro) durante a sessão
• O formulário de contato simula envio (frontend apenas) - pode ser integrado com serviços como Formspree ou Netlify Forms
• Qualquer texto placeholder (Lorem Ipsum) pode ser substituído pelo conteúdo real
• As imagens do portfólio usam placehold.co - substitua por imagens reais

👨‍💻 Desenvolvido com

• HTML5, CSS3, JavaScript
• Design moderno dark-mode
• Mobile-first responsive
• Sem dependências externas (exceto Google Fonts)

---

Atlas Studio - Criamos, editamos, construímos. 🚀