🎯 Visão Geral
Astra Vitae Lite é um template de landing page simplificado e de alta performance que alcança pontuações de 96-100 no Lighthouse em todas as métricas. Projetado para implantação rápida com design de página única apresentando seções essenciais, oferece qualidade profissional sem complexidade.
Casos de Uso Alvo
- ▸ Lançamentos Rápidos de Produtos - Chegue ao mercado rapidamente com qualidade profissional e tempo mínimo de configuração
- ▸ Sites Críticos de Performance - Alcance pontuações de 96-100 no Lighthouse prontas para uso
- ▸ Sites de Portfólio Limpos - Showcase profissional sem complexidade desnecessária
- ▸ Landing Pages MVP - Produto mínimo viável com máximo impacto e velocidade
🏎️ 96-100 Lighthouse 📱 Mobile-First ⚡ Última Tecnologia 🎨 Design Moderno
EXPERIÊNCIA ESSENCIAL
Astra Vitae Lite Template
6
Seções Essenciais
+ Recursos Principais
🏎️ 96-100 Lighthouse
🖼️ Essential MediaBundle
⚡ Astro 5 + React 19
📱 Mobile-First Design
💼 Commercial License
📚 Full Documentation
⚡ Recursos Principais
Stack Tecnológica Moderna
- Astro 5.13.5 - Gerador de site estático mais recente com arquitetura Islands
- React 19.1.1 - React moderno com performance aprimorada para componentes interativos
- TypeScript 5.9.2 - Segurança de tipos completa e experiência de desenvolvedor aprimorada
- Tailwind CSS 4.1.11 - CSS utility-first mais recente com configuração de diretiva @theme
- Alpine.js 3.14.9 - Framework JavaScript leve para interações simples
Componentes Integrados
- Navegação Inteligente - Navbar integrada com detecção automática de seções (não é o componente SmartNavButtons)
- Componentes de Mídia - LiteImageCarousel, LiteCommonVideo e LiteLightbox para imagens e vídeos
- Autenticação Mock - Sistema de login/logout baseado em localStorage para fins de demonstração
- Integração de Newsletter - Formulário de inscrição por email pronto para conexão backend
- Seção FAQ - Interface Q&A recolhível alimentada por Alpine.js
- Seções Essenciais - Hero, About, Gallery, Comparison, FAQ e Newsletter
🏗️ Visão Geral da Arquitetura
Estrutura Simplificada
Estrutura do Projeto
src/
├── components/
│ ├── common/ # Star.astro, SectionEngine.tsx
│ ├── layout/ # Navbar.astro, Footer.astro
│ ├── media/ # CommonImage, CommonVideo, ImageCarousel, Lightbox, MediaGrid
│ └── sections/ # About, Comparison, FAQ, Gallery, Newsletter
│ └── Hero/ # Hero.astro, HeroContent.astro
├── pages/
│ ├── index.astro # Página principal de landing
│ ├── login.astro # Página de autenticação mock
│ └── 404.astro # Página de erro
├── layouts/
│ └── Layout.astro # Layout HTML base
├── styles/
│ └── global.css # Arquitetura CSS de arquivo único (1.246+ linhas)
└── assets/ # Arquivos de mídia otimizados (ícones, imagens, vídeos)
Arquitetura CSS de Arquivo Único
Todo o estilo está centralizado em um arquivo CSS abrangente para máxima performance e manutenibilidade:
- • 1.246+ linhas de CSS otimizado
- • Seções específicas de componentes para fácil manutenção
- • Utilitários responsivos para todos os tamanhos de tela
- • Otimizado para performance com CSS purging
Integração de Componentes
- • React Islands apenas para elementos interativos
- • Componentes Astro para conteúdo estático
- • JavaScript mínimo para performance otimizada
- • Abordagem de Progressive Enhancement
Estratégia de Performance
- • Geração de Site Estático por padrão
- • Lazy loading para toda mídia
- • Code splitting de bundle otimizado
- • Overhead de runtime mínimo
🎨 Sistema de Design
Identidade Visual
- • Cards de Vidro Modernos com backdrop blur
- • Backgrounds de Gradiente com transições suaves
- • Tipografia Profissional com legibilidade otimizada
- • Espaçamento Consistente baseado em grade de 8px
Paleta de Cores
Dourado Primário: #d4af37
Roxo Primário: #8b5cf6
Rosa Primário: #ec4899
Background Escuro: #0a0a0a
Design Responsivo
- • Abordagem Mobile-First para experiência mobile otimizada
- • Sistema de Breakpoints otimizado para todos os dispositivos
- • Interações Touch-Friendly e dimensionamento de botões
- • Contraste de cores acessível e estados de foco
🧩 Biblioteca de Componentes
LiteImageCarousel
Carrossel de imagens avançado com:
- • Navegação por Toque com gestos de deslizar
- • Avanço Automático com temporização
- • Integração Lightbox para tela cheia
- • Navegação por Miniaturas para acesso rápido
- • Lazy Loading para performance
- • Dimensionamento responsivo para todas as telas
LiteCommonVideo
Player de vídeo multi-fonte suportando:
- • Integração YouTube com auto-embedding
- • Arquivos de Vídeo Locais com player HTML5
- • Miniaturas Customizadas e overlays de reprodução
- • Controles de Autoplay com preferência do usuário
- • Otimização Mobile com controles de toque
- • Carregamento otimizado para performance
LiteLightbox
Lightbox de mídia profissional com:
- • Experiência de Tela Cheia com transições suaves
- • Navegação por Teclado com setas e ESC
- • Gestos de Toque para navegação mobile
- • Estados de Carregamento com animações profissionais
- • Backdrop Blur para visualização focada
Sistema de Autenticação Mock
Sistema de autenticação apenas para demonstração com:
- • Sessões Persistentes usando localStorage (NÃO seguro para produção)
- • UI/UX Profissional pronto para integração backend real
- • Logout Adequado com limpeza de localStorage
- • Formulários Responsivos otimizados para todos os dispositivos
📊 Especificações de Performance
Painel de Performance
96-100
Performance
100
Acessibilidade
100
Melhores Práticas
100
SEO
🔄 Comparação Lite vs Premium
| Recurso | Template Lite | Template Premium |
|---|---|---|
| Pontuações Lighthouse | 96+ (todas as métricas) | 96+ (todas as métricas) |
| Seções de Produção | 6 seções essenciais | 10 seções completas |
| Stack Tecnológica | Astro 5 + React 19 + TS | Astro 5 + React 19 + TS |
| SmartNavButtons | ❌ (navbar integrada) | ✅ Navegação inteligente |
| Sistema i18n | ❌ (apenas inglês) | ✅ Completo (EN/PT, extensível) |
| Media Bundle | ✅ Essencial (inline/section, básico) | ✅ Avançado (background, animações sofisticadas) |
| Background Hero Animado | ❌ | ✅ Partículas customizáveis |
| Carrossel de Depoimentos | ❌ | ✅ Auto-slide + avaliações com estrelas |
| MDX + Sistema Modal | ❌ | ✅ Conteúdo type-safe + modais |
| Páginas Legais + GDPR | ❌ | ✅ Privacidade, Termos + Consentimento |
| Licença Comercial | ✅ Projetos ilimitados | ✅ Projetos ilimitados |
| Documentação | ✅ Completa | ✅ Completa |
| Melhor Para | Lançamentos rápidos, MVPs | Enterprise, multi-mercado |
Quando Escolher Lite
- ✓ Você precisa de um lançamento rápido com pontuações Lighthouse 96+
- ✓ Seu site é de idioma único (apenas inglês)
- ✓ Recursos essenciais de mídia (modos inline/section) são suficientes
- ✓ Consciente do orçamento: $77 vs $147
- ✓ Construindo um MVP, portfólio ou landing page simples
- ✓ Não precisa de SmartNavButtons, i18n ou animações avançadas
Quando Escolher Premium
- ⭐ Precisa de suporte multi-idioma (EN/PT com i18n extensível)
- ⭐ Quer SmartNavButtons (Navegação inteligente)
- ⭐ Requer Media Bundle avançado com modos background + animações
- ⭐ Precisa de Carrossel de Depoimentos, sistema MDX e componentes Modal
- ⭐ Construindo para enterprise ou múltiplos mercados
- ⭐ Quer background hero animado + páginas legais + consentimento GDPR
🚀 Demo ao Vivo
Experimente a Performance Lite
Veja a velocidade e elegância do nosso template simplificado:
- ✓ Carregamento de página ultra-rápido
- ✓ Animações e transições suaves
- ✓ Design responsivo para mobile
- ✓ Componentes interativos
- ✓ Galerias de mídia e carrosséis
- ✓ Pontuações perfeitas no Lighthouse