🎨 Site do ApexPHP Framework

Site oficial do ApexPHP Framework - moderno, responsivo e otimizado.

---

📁 Estrutura

site/
├── index.html          # Página principal
├── css/
│   └── style.css      # Estilos principais
├── js/
│   └── main.js        # JavaScript e interatividade
├── images/            # Imagens do site
├── assets/            # Recursos adicionais
└── README.md          # Este arquivo

---

🎨 Logomarca

Design da Logo

A logo do ApexPHP foi projetada para representar:

• Fusão A+P - União elegante das letras A e P, simbolizando excelência
• Gradiente Laranja-Amarelo - Do #FF6B00 ao #FFD700, transmitindo energia e inovação
• Tipografia Robusta - Sans-serif bold (Poppins) para máximo impacto

Logo SVG

A logo é SVG inline, permitindo:

• ✅ Escalabilidade perfeita (sem perda de qualidade)
• ✅ Tamanho de arquivo mínimo
• ✅ Fácil customização de cores
• ✅ Suporte a gradientes e animações
• ✅ Funciona em qualquer tamanho

Variações da Logo

1. Logo Completa (Atual)

<svg class="logo-icon" viewBox="0 0 100 100">
    <path d="M 30 25 Q 30 15 40 15 L 60 15..." />
    <text x="50" y="92">MVC</text>
</svg>

2. Logo Apenas Ícone (para favicon)

<svg viewBox="0 0 100 100">
    <path d="M 30 25 Q 30 15 40 15 L 60 15..." />
</svg>

3. Logo Monocromática

• Altere url(#logoGradient) para uma cor sólida: #FF8C00

Cores da Marca

/* Primárias */
--primary: #FF8C00        /* Laranja principal */
--primary-dark: #FF6B00   /* Laranja escuro */
--secondary: #FFD700      /* Dourado */
--accent: #FFA500         /* Laranja accent */

/* Gradientes */
--gradient-primary: linear-gradient(135deg, #FF6B00 0%, #FF8C00 50%, #FFD700 100%)
--gradient-secondary: linear-gradient(135deg, #FF8C00 0%, #FFD700 100%)
--gradient-accent: linear-gradient(135deg, #FFA500 0%, #FFD700 100%)

Download da Logo

Para criar versões em PNG/JPG:

1. Abra index.html em um navegador
2. Clique com botão direito na logo
3. "Inspecionar elemento"
4. Copie o SVG
5. Cole em https://svgtopng.com/
6. Exporte nas resoluções desejadas

Resoluções recomendadas:

• Favicon: 32x32, 64x64, 128x128
• Redes Sociais: 512x512, 1024x1024
• Impressão: Mantenha SVG (vetor)

---

🎯 Características do Site

Design Moderno

• ✅ Glassmorphism - Efeitos de vidro fosco
• ✅ Gradientes Vibrantes - Cores modernas e atraentes
• ✅ Animações Suaves - Transições e micro-interações
• ✅ Dark Mode - Suporte completo a modo escuro
• ✅ Tipografia Clean - Inter + JetBrains Mono

Responsividade

• ✅ Mobile First - Otimizado para dispositivos móveis
• ✅ Breakpoints:
  • Mobile: < 768px
  • Tablet: 768px - 1024px
  • Desktop: > 1024px
• ✅ Navegação Mobile - Menu hambúrguer animado
• ✅ Imagens Responsivas - Adaptam ao tamanho da tela

Performance

• ✅ CSS Otimizado - Variáveis CSS, sem repetição
• ✅ JavaScript Modular - Funções separadas e reutilizáveis
• ✅ Lazy Loading - Imagens carregadas sob demanda (quando implementadas)
• ✅ Minificação - Pronto para minificação em produção

Acessibilidade

• ✅ Semântica HTML5 - Tags apropriadas
• ✅ ARIA Labels - Para leitores de tela
• ✅ Contraste - Cores acessíveis (WCAG AA)
• ✅ Navegação por Teclado - Suporte completo

SEO

• ✅ Meta Tags - Description, keywords, author
• ✅ Open Graph - Preparado para redes sociais
• ✅ Estrutura Semântica - Headers, sections, articles
• ✅ URLs Descritivas - Links âncora claros

Visualizador de Documentação

• ✅ Renderização Markdown - Exibe arquivos .md formatados
• ✅ Syntax Highlighting - Destaque de código com Highlight.js
• ✅ Navegação Lateral - Menu com todos os documentos
• ✅ URLs Amigáveis - docs.html?doc=QUICKSTART
• ✅ Design Responsivo - Funciona perfeitamente em mobile

📖 Veja DOCS-VIEWER.md para mais detalhes

---

🚀 Como Usar

Desenvolvimento Local

1. Clone o repositório:

cd /Users/vfeitoza/src/framework/apexphp/site

2. Abra com Live Server:

# VS Code: Right-click em index.html > Open with Live Server
# Ou use qualquer servidor HTTP local
python -m http.server 8080

3. Acesse:

http://localhost:8080

Deploy

Opção 1: GitHub Pages

1. Crie repositório no GitHub
2. Push do código
3. Settings > Pages > Source: main branch / site folder
4. Acesse em: https://seu-usuario.github.io/apexphp/

Opção 2: Netlify

1. Conecte repositório GitHub
2. Build settings:
   • Base directory: site
   • Publish directory: site
3. Deploy!

Opção 3: Vercel

cd site
vercel

---

🎨 Customização

Mudar Cores

Edite as variáveis CSS em css/style.css:

:root {
    --primary: #SEU_COR;
    --secondary: #SUA_COR_2;
    /* ... */
}

Mudar Fontes

1. Substitua no <head> de index.html:

<link href="https://fonts.googleapis.com/css2?family=SUA_FONTE" rel="stylesheet">

2. Atualize em css/style.css:

:root {
    --font-sans: 'SUA_FONTE', sans-serif;
}

Adicionar Seções

<section class="nova-secao" id="nova-secao">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge">Badge</span>
            <h2 class="section-title">Título</h2>
            <p class="section-subtitle">Subtítulo</p>
        </div>

        <!-- Seu conteúdo aqui -->
    </div>
</section>

Customizar Logo

Edite o SVG em index.html:

<svg class="logo-icon" viewBox="0 0 100 100">
    <!-- Mude o path aqui -->
    <path d="SEU_PATH" />
</svg>

---

📦 Dependências

CSS

• Nenhuma! - CSS puro com variáveis modernas

JavaScript

• AOS - Animate On Scroll (via CDN)
• Font Awesome - Ícones (via CDN)

Fontes

• Inter - Fonte principal
• JetBrains Mono - Fonte de código

---

🎯 Features Implementadas

Navegação

• Menu responsivo
• Scroll suave
• Header fixo com animação
• Dark mode toggle
• Menu mobile animado

Hero Section

• Título com gradiente
• Estatísticas animadas
• Janela de código com syntax highlight
• Background com grid e gradiente
• CTAs principais

Features

• Grid de cards
• Ícones com gradiente
• Hover effects
• Code snippets

Quick Start

• Timeline de passos
• Botões de copiar código
• Feedback visual ao copiar

Documentação

• Grid de cards com ícones
• Tempo de leitura
• Links para docs

Exemplos

• Sistema de tabs
• Syntax highlighting
• Múltiplos exemplos de código

Roadmap

• Timeline visual
• Badges de status
• Categorização por prazo

Footer

• Multi-coluna
• Links sociais
• Newsletter (estrutura pronta)
• Copyright e versão

---

🐛 Problemas Conhecidos

Nenhum problema conhecido no momento! 🎉

Se encontrar algum bug, por favor abra uma issue.

---

📝 Roadmap do Site

Curto Prazo

• Adicionar página de exemplos completos
• Criar galeria de projetos feitos com ApexPHP
• Adicionar busca na documentação
• Implementar newsletter

Médio Prazo

• Blog/Tutoriais
• Playground interativo
• Comparação com outros frameworks
• Showcase de templates

Longo Prazo

• Versionamento da documentação
• Traduções (EN, ES)
• Video tutoriais
• Comunidade/Forum

---

🤝 Contribuindo

Quer melhorar o site? Pull requests são bem-vindos!

1. Fork o projeto
2. Crie uma branch: git checkout -b feature/nova-feature
3. Commit: git commit -m 'Add: nova feature'
4. Push: git push origin feature/nova-feature
5. Abra um Pull Request

---

📄 Licença

MIT License - sinta-se livre para usar e modificar!

---

💡 Créditos

• Design: Inspirado nas melhores práticas de UI/UX modernas
• Cores: Paleta personalizada com gradientes vibrantes
• Animações: AOS Library
• Ícones: Font Awesome
• Fontes: Google Fonts (Inter, JetBrains Mono)

---

Feito com ❤️ para a comunidade PHP

Versão do Site: 1.0.0 Última atualização: Janeiro 2025