feat: Converter site HTML/CSS/JS para projeto Astro modular

projeto-astro/.env.example

@@ -0,0 +1,11 @@
+# CONFIGURAÇÕES - BASE NOBRE
+
+# WhatsApp
+WHATSAPP_NUMBER=5511999999999
+
+# Analytics (opcional)
+# GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
+# META_PIXEL_ID=XXXXXXXXXXXXX
+
+# Site
+PUBLIC_SITE_URL=https://basenobre.com.br

projeto-astro/.gitignore

@@ -0,0 +1,29 @@
+# Build outputs
+dist/
+.astro/
+
+# Dependencies
+node_modules/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Environment variables
+.env
+.env.production
+
+# macOS
+.DS_Store
+
+# IDEs
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# TypeScript
+*.tsbuildinfo

projeto-astro/GUIA-RAPIDO.md

@@ -0,0 +1,215 @@
+# 📖 Guia Rápido - Base Nobre Astro
+
+## 🚀 Começando em 5 minutos
+
+### 1. Instale as dependências
+
+```bash
+cd projeto-astro
+npm install
+```
+
+### 2. Configure o WhatsApp
+
+Abra `src/scripts/whatsapp.ts` e altere o número:
+
+```typescript
+const WHATSAPP_CONFIG = {
+  number: '5511999999999', // SEU NÚMERO AQUI
+  defaultMessage: 'Olá! Gostaria de solicitar um orçamento...',
+};
+```
+
+### 3. Inicie o servidor
+
+```bash
+npm run dev
+```
+
+Acesse: http://localhost:4321
+
+## 🎨 Customizando Cores
+
+Edite `src/styles/tokens.css`:
+
+```css
+:root {
+  --base-nobre-primary: #F4D03F;    /* Sua cor principal */
+  --base-nobre-accent: #FFC107;     /* Cor de acento */
+  --base-nobre-ink: #2C3E50;        /* Cor do texto */
+}
+```
+
+## ✏️ Editando Conteúdo
+
+### Título e Subtítulo
+
+Abra `src/pages/index.astro`:
+
+```astro
+<Hero
+  title="Seu novo título aqui"
+  subtitle="Seu novo subtítulo aqui"
+/>
+```
+
+### Highlights (Destaques)
+
+```astro
+<Hero
+  highlights={[
+    { icon: 'receipt_long', text: 'Seu destaque 1' },
+    { icon: 'credit_card', text: 'Seu destaque 2' },
+    { icon: 'schedule', text: 'Seu destaque 3' }
+  ]}
+/>
+```
+
+### Estatísticas
+
+```astro
+<Hero
+  stats={[
+    { number: '+15A', label: 'Anos' },
+    { number: '100+', label: 'Clientes' },
+    { number: '24h', label: 'Atendimento' }
+  ]}
+/>
+```
+
+## 🔍 Ícones Disponíveis
+
+Lista de ícones Material Symbols: https://fonts.google.com/icons
+
+Exemplos populares:
+- `chat` - Chat/WhatsApp
+- `mail` - Email
+- `phone` - Telefone
+- `schedule` - Relógio
+- `check_circle` - Check
+- `star` - Estrela
+- `local_shipping` - Entrega
+- `security` - Segurança
+
+## 📱 Adicionando WhatsApp
+
+### No botão:
+
+```astro
+<Button
+  variant="primary"
+  icon="chat"
+  onClick="abrirChatBaseNobre()"
+>
+  Falar no WhatsApp
+</Button>
+```
+
+### Com mensagem personalizada:
+
+```astro
+<Button
+  onClick="abrirChatBaseNobre('Olá! Quero um orçamento especial.')"
+>
+  Orçamento Especial
+</Button>
+```
+
+## 🏗️ Build para Produção
+
+```bash
+npm run build
+```
+
+Os arquivos serão gerados em `dist/` prontos para deploy!
+
+## 📤 Deploy
+
+### Vercel (Recomendado)
+
+```bash
+npm i -g vercel
+vercel
+```
+
+### Netlify
+
+```bash
+npm i -g netlify-cli
+netlify deploy
+```
+
+### Outros
+
+O Astro gera arquivos estáticos em `dist/`. Você pode hospedar em:
+- GitHub Pages
+- Cloudflare Pages
+- AWS S3 + CloudFront
+- Qualquer servidor web
+
+## 🆘 Problemas Comuns
+
+### Erro ao importar componentes
+
+✅ Use caminhos relativos:
+```astro
+import Hero from '../components/Hero.astro';
+```
+
+### Estilos não aplicados
+
+✅ Verifique se o `global.css` está importado no Layout:
+```astro
+<style is:global>
+  @import '../styles/global.css';
+</style>
+```
+
+### WhatsApp não abre
+
+✅ Verifique o número no formato correto:
+```typescript
+number: '5511999999999' // +55 11 99999-9999
+```
+
+## 💡 Dicas Pro
+
+### 1. Crie mais páginas
+
+Crie arquivos em `src/pages/`:
+- `src/pages/servicos.astro` → `/servicos`
+- `src/pages/contato.astro` → `/contato`
+
+### 2. Reutilize componentes
+
+```astro
+// src/components/MeuComponente.astro
+<div class="meu-componente">
+  <slot />
+</div>
+```
+
+### 3. Adicione Google Analytics
+
+No `Layout.astro`, adicione antes de `</head>`:
+
+```html
+<!-- Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-XXXXXXXXXX');
+</script>
+```
+
+## 📚 Mais Recursos
+
+- [Documentação Astro](https://docs.astro.build)
+- [Astro Discord](https://astro.build/chat)
+- [Material Symbols](https://fonts.google.com/icons)
+
+---
+
+**Precisa de ajuda?** Abra uma issue no GitHub!

projeto-astro/README.md

@@ -0,0 +1,132 @@
+# 🌟 Base Nobre - Site Astro
+
+Site moderno de higienização de carpetes construído com **Astro** - transformado de código HTML/CSS/JS injetável para uma arquitetura modular e otimizada.
+
+## 🚀 Tecnologias
+
+- **[Astro](https://astro.build)** - Framework moderno com zero JavaScript por padrão
+- **TypeScript** - Tipagem estática para maior segurança
+- **CSS Moderno** - Design tokens e variáveis CSS
+- **Material Symbols** - Ícones do Google
+
+## ✨ Características
+
+- ⚡ **Performance otimizada** - Zero JS desnecessário
+- 🎨 **Design System** - Tokens CSS reutilizáveis
+- 📦 **Componentes modulares** - Fácil de manter e escalar
+- 🔍 **SEO otimizado** - Meta tags e Open Graph configurados
+- 📱 **Responsivo** - Mobile-first design
+- ♿ **Acessível** - Semântica HTML correta
+
+## 📁 Estrutura do Projeto
+
+```
+projeto-astro/
+├── src/
+│   ├── components/       # Componentes reutilizáveis
+│   │   ├── Button.astro
+│   │   ├── Hero.astro
+│   │   ├── HighlightItem.astro
+│   │   └── StatItem.astro
+│   ├── layouts/          # Layouts base
+│   │   └── Layout.astro
+│   ├── pages/            # Páginas (rotas automáticas)
+│   │   └── index.astro
+│   ├── scripts/          # Scripts TypeScript
+│   │   └── whatsapp.ts
+│   └── styles/           # Estilos globais
+│       ├── tokens.css    # Design tokens
+│       └── global.css    # Estilos base
+├── public/               # Assets estáticos
+├── astro.config.mjs      # Configuração Astro
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## 🛠️ Instalação
+
+1. **Instale as dependências:**
+
+```bash
+npm install
+```
+
+2. **Configure o número do WhatsApp:**
+
+Edite o arquivo `src/scripts/whatsapp.ts` e altere o número:
+
+```typescript
+const WHATSAPP_CONFIG = {
+  number: '5511999999999', // ALTERE PARA SEU NÚMERO
+  defaultMessage: 'Olá! Gostaria de solicitar um orçamento...',
+};
+```
+
+## 🚀 Comandos
+
+| Comando          | Ação                                      |
+| :--------------- | :---------------------------------------- |
+| `npm install`    | Instala as dependências                   |
+| `npm run dev`    | Inicia servidor local em `localhost:4321` |
+| `npm run build`  | Gera build de produção em `./dist/`       |
+| `npm run preview`| Preview do build local                    |
+
+## 🎨 Personalização
+
+### Design Tokens
+
+Edite `src/styles/tokens.css` para customizar cores, fontes e espaçamentos:
+
+```css
+:root {
+  --base-nobre-primary: #F4D03F;
+  --base-nobre-accent: #FFC107;
+  /* ... mais tokens */
+}
+```
+
+### Componentes
+
+Todos os componentes aceitam props para customização:
+
+```astro
+<Hero
+  title="Seu título"
+  subtitle="Seu subtítulo"
+  primaryCta={{ text: 'Botão', icon: 'chat', onClick: '...' }}
+/>
+```
+
+## 📝 Melhorias vs Código Original
+
+| Aspecto            | Antes (HTML/CSS/JS)     | Depois (Astro)          |
+| :----------------- | :---------------------- | :---------------------- |
+| **Manutenção**     | Tudo em um arquivo      | Componentes modulares   |
+| **Performance**    | JS desnecessário        | Zero JS por padrão      |
+| **Reutilização**   | Copy/paste              | Import de componentes   |
+| **SEO**            | Manual                  | Automatizado            |
+| **Build**          | Sem otimização          | Minificação e bundling  |
+| **TypeScript**     | ❌                      | ✅                      |
+
+## 🔧 Próximos Passos
+
+- [ ] Adicionar mais seções (Serviços, Depoimentos, Contato)
+- [ ] Integrar Google Analytics
+- [ ] Adicionar testes automatizados
+- [ ] Implementar formulário de contato
+- [ ] Adicionar animações com View Transitions
+- [ ] Criar CMS com Astro Content Collections
+
+## 📚 Documentação
+
+- [Documentação Astro](https://docs.astro.build)
+- [Astro Discord](https://astro.build/chat)
+
+## 📄 Licença
+
+MIT License - sinta-se livre para usar em seus projetos!
+
+---
+
+**Desenvolvido com ❤️ usando Astro**