🎯 Visão Geral
Astra Vitae Premium é um template Astro pronto para produção que demonstra capacidades modernas de desenvolvimento web. É um sistema de landing page rico em recursos construído com arquitetura de nível enterprise, representando 600+ horas de trabalho de desenvolvimento.
Casos de Uso Alvo
- ▸ Landing Pages Enterprise - Sites corporativos de alta conversão com recursos avançados
- ▸ Produtos Multi-Mercado - Lançamentos de produtos internacionais com suporte multilíngue
- ▸ Portfólios Avançados - Showcases de serviços profissionais para agências e freelancers
- ▸ Aplicações Complexas - Aplicações web ricas em recursos que exigem arquitetura sofisticada
Astro 5.14.1 React 19.1.1 TypeScript 5.9.2 Tailwind 4.1.12
FRAMEWORK COMPLETO
Astra Vitae Premium Template
10
Seções de Produção
+ Recursos Avançados
✨ SmartNavButtons
🌍 i18n System (EN/PT)
🖼️ Advanced MediaBundle
💬 Testimonials Carousel
📝 MDX + Modal System
🎨 Animated Hero Background
⚡ Recursos Principais
Stack Técnica Avançada
- Astro 5.13.5 com integração React 19.1 para performance otimizada
- TypeScript 5.9.2 com modo strict para segurança de tipos completa
- Tailwind CSS 4.1.11 via plugin Vite com sistema de design customizado
- Alpine.js 3.14.9 para reatividade leve e interações simples
- Nanostores 1.0.1 para gerenciamento eficiente de estado global
- MDX 4.3.4 para gerenciamento avançado de conteúdo com componentes React
Arquitetura Multi-Idioma
- Suporte i18n integrado com Inglês e Português usando Nanostores
- Sistema de roteamento baseado em URL (en: /, pt: /pt/) para otimização SEO
- Seleção persistente de idioma com detecção de navegador
- Sistema de tradução extensível para idiomas adicionais
Componentes Enterprise
- SmartNavButtons - Navegação inteligente com scroll-lock, suporte a teclado e auto-visibilidade
- Sistema MediaBundle com lightboxes especializados (ImageLightbox, VideoLightbox, CarouselLightbox)
- Múltiplas variantes Hero - Complexa com animações de partículas e Simples para performance otimizada
- Carrossel de Depoimentos com ciclo automático e transições suaves
- FAQ Interativo com seções expansíveis alimentadas por Alpine.js
- Integração de Newsletter com validação e pronto para conexão backend
Performance & Otimização
- Pontuações Lighthouse 96+ em todas as métricas (Performance, Acessibilidade, Melhores Práticas, SEO)
- Geração de Site Estático com Astro para máxima velocidade e SEO
- Arquitetura Astro Islands com hidratação parcial para entrega otimizada de JavaScript
- Lazy loading avançado com IntersectionObserver em todos os componentes
- Otimização de imagens com suporte WebP e srcset responsivo
- Code splitting e tree shaking inteligentes para tamanho mínimo de bundle
🏗️ Visão Geral da Arquitetura
Estrutura do Projeto
Estrutura do Projeto
src/
├── components/
│ ├── content/ # HeroContent e componentes de conteúdo
│ ├── layout/ # Layout, Navbar, Footer
│ ├── multimedia/ # CommonImage, CommonVideo, ImageCarousel, MultimediaGrid
│ ├── sections/ # About, FAQ, Hero, Manifesto, Testimonials, EditionsComparison
│ └── ui/ # SmartNavButtons, Lightbox, Modal, TestimonialsCarousel
├── content/ # Coleções de conteúdo MDX (about, legal, manifesto, modals)
│ ├── about/en|pt/ # Conteúdo da página About por idioma
│ ├── legal/en|pt/ # Política de privacidade, termos de uso
│ ├── manifesto/en|pt/ # Conteúdo do Manifesto
│ └── modals/en|pt/ # Conteúdo dos Modais
├── i18n/ # Arquivos de tradução (en.ts, pt.ts, media.ts)
├── lib/
│ ├── hooks/ # Hooks React customizados (useTranslation)
│ ├── stores/ # Nanostores para gerenciamento de estado
│ └── types/ # Interfaces e tipos TypeScript
├── pages/ # Roteamento baseado em arquivos (index.astro, privacy.astro, pt/)
├── styles/ # CSS global e estilos específicos de componentes
└── utils/ # Funções auxiliares (i18n, routing, content)
Sistema de Gerenciamento de Conteúdo
O template inclui uma abordagem sofisticada de gerenciamento de conteúdo:
- • Integração MDX para criação de conteúdo rico com suporte a componentes React
- • Coleções Estruturadas com validação de schema Zod (manifesto, about, legal, modals)
- • Conteúdo Multi-idioma com roteamento automático e pastas específicas por idioma
- • Consultas de conteúdo type-safe com API de coleções de conteúdo do Astro
Gerenciamento de Estado
- • Nanostores para estado global de idioma com atualizações reativas e persistência
- • Hooks React customizados (useTranslation) para integração perfeita de componentes
- • Alpine.js para interações simples (acordeões, menu mobile, rastreamento de seções)
- • Estado React para componentes complexos (carrosséis, lightbox, modais)
- • Roteamento baseado em URL com detecção de navegador para preferências de idioma
🎨 Sistema de Design
Arquitetura de Marca
- • Tema escuro com variáveis CSS (background-primary, secondary, tertiary, quaternary)
- • Paleta de cores Premium: Dourado (#d4af37), Roxo (#9d4edd), Rosa (#ff006e)
- • Sistema de tipografia profissional com escalonamento fluido responsivo
- • Sistema de grade consistente de 8px para alinhamento perfeito
Elementos Visuais
- • Efeitos Glassmorphism
- • Animações Avançadas
- • Sistemas de Gradiente
- • Hierarquia de Sombras
Estilização de Componentes
- • Arquitetura CSS Unificada
- • Metodologia BEM
- • Breakpoints Responsivos
- • Pronto para Modo Escuro
🧩 Componentes Avançados
Sistema SmartNavButtons
Sistema de navegação inteligente com capacidades avançadas:
- • Auto-detecção de seções via atributos de dados
- • Funcionalidade de scroll-lock para experiências guiadas
- • Suporte completo a teclado (Teclas de seta, Home, End)
- • Gerenciamento de auto-visibilidade (oculta ao rolar, mostra quando estacionário)
- • Otimizado para mobile com comportamento responsivo
- • Compatível com WCAG 2.1 AA com rótulos ARIA
Integração MediaBundle
Sistema abrangente de manipulação de mídia com:
- • CommonImage - Imagens responsivas com lazy loading, lightbox e múltiplos modos de layout (section, background, default)
- • CommonVideo - Suporte a múltiplas fontes (YouTube, Vimeo, Google Drive, MP4 local) com overlay de botão de reprodução
- • ImageCarousel - Carrossel de avanço automático com navegação, indicadores de pontos e controles de teclado
- • Lightboxes Especializados - ImageLightbox para imagens, VideoLightbox para vídeos, CarouselLightbox para carrosséis
- • Lazy loading baseado em IntersectionObserver para performance otimizada
- • Animações e transições suaves em todo o sistema
Variantes do Componente Hero
- • Hero Complexo com animações de partículas avançadas e backgrounds de gradiente dinâmicos para sensação premium
- • Hero Simples com estrelas estáticas para apresentações limpas, de carregamento rápido e performance otimizada
- • Opções de Background suporte para backgrounds de vídeo, imagem ou carrossel com sistemas de fallback inteligentes
- • Tipografia Responsiva com escalonamento fluido e layouts otimizados para mobile
🌍 Internacionalização
Suporte Multi-Idioma
Idiomas Integrados
- • Inglês (padrão)
- • Português (/pt/)
- • Extensível para mais idiomas
Implementação Técnica
- • Nanostores para gerenciamento reativo de estado global
- • Hooks React customizados para integração perfeita de componentes
- • Roteamento baseado em URL (en: /, pt: /pt/) com redirecionamentos automáticos
- • Detecção de idioma do navegador com seleção persistente do usuário
- • Traduções type-safe com suporte completo TypeScript
Localização de Conteúdo
- • Gerenciamento de Tradução com JSON
- • Roteamento específico por idioma
- • Suporte à localização de mídia
- • Adaptações culturais
Otimização SEO
- • Tags Hreflang
- • Meta tags localizadas
- • Sitemaps específicos por idioma
- • Redirecionamentos automáticos
⚡ Performance & Otimização
Painel de Performance
96+
Performance
96+
Acessibilidade
96+
Melhores Práticas
96+
SEO
🚀 Otimizações de Build
- Geração Estática - Páginas HTML pré-construídas
- Code Splitting - Bundles por rota
- Tree Shaking - Remove código não utilizado
- CSS Purging - Pegada CSS mínima
- Otimização de Assets - WebP & compressão
⚙️ Recursos de Runtime
- Astro Islands - Hidratação parcial com estratégias client:load, client:visible e client:idle
- Lazy Loading - Carregamento de recursos sob demanda baseado em IntersectionObserver
- Prefetching Inteligente - Pré-carregamento inteligente de rotas para navegação perfeita
- Service Worker Pronto - Suporte a capacidade offline integrado
- Otimizado para CDN - Pronto para implantação em edge com cache otimizado
🏢 Pronto para Enterprise
- Suporte i18n - Otimizado para multi-idioma
- SEO Aprimorado - Dados estruturados & meta
- Pronto para Analytics - Configuração GTM & tracking
- Compatível com A11y - Padrão WCAG 2.1 AA
- Cabeçalhos de Segurança - Pronto para CSP
🔧 Capacidades de Personalização
Personalização de Tema
- • Sistema abrangente de Propriedades CSS Customizadas para cores, espaçamento e animações
- • Sistema de tipografia flexível com escalonamento fluido responsivo
- • Variantes de componentes com props configuráveis e opções de estilização
- • Controles de animação com funções de timing e easing customizáveis
Gerenciamento de Conteúdo
- • Integração MDX com suporte a incorporação de componentes React
- • Coleções de conteúdo estruturadas com validação de schema Zod
- • Sistema de roteamento dinâmico com roteamento baseado em arquivos
- • Gerenciamento SEO com meta tags, dados estruturados e sitemaps
Extensões de Recursos
- • Sistema de tradução extensível para adicionar idiomas ilimitados
- • Biblioteca de componentes modular para fácil integração de componentes customizados
- • Pronto para integração backend com validação de formulários e endpoints de API
- • Suporte a configuração de analytics (GTM, Google Analytics, tracking customizado)
🚀 Demo ao Vivo & Exemplos
Experiência de Demo Completa
Experimente todos os recursos incluindo:
- ✓ Alternância multi-idioma (EN/PT) com gerenciamento de estado Nanostores
- ✓ SmartNavButtons - Sistema de navegação inteligente
- ✓ MediaBundle completo com lightboxes especializados para cada tipo de mídia
- ✓ Componentes interativos com animações e transições suaves
- ✓ Design totalmente responsivo para mobile com gestos de toque
- ✓ Pontuações Lighthouse 96+ em todas as métricas em condições reais