🎯 Overview
Astra Vitae Premium is a production-ready Astro template showcasing modern web development capabilities. It's a feature-rich landing page system built with enterprise-grade architecture, representing 600+ hours of development work.
Target Use Cases
- ▸ Enterprise Landing Pages - High-conversion corporate websites with advanced features
- ▸ Multi-Market Products - International product launches with multilingual support
- ▸ Advanced Portfolios - Professional service showcases for agencies and freelancers
- ▸ Complex Applications - Feature-rich web applications requiring sophisticated architecture
Astro 5.14.1 React 19.1.1 TypeScript 5.9.2 Tailwind 4.1.12
COMPLETE FRAMEWORK
Astra Vitae Premium Template
10
Production Sections
+ Advanced Features
✨ SmartNavButtons
🌍 i18n System (EN/PT)
🖼️ Advanced MediaBundle
💬 Testimonials Carousel
📝 MDX + Modal System
🎨 Animated Hero Background
⚡ Key Features
Advanced Technical Stack
- Astro 5.13.5 with React 19.1 integration for optimal performance
- TypeScript 5.9.2 with strict mode for complete type safety
- Tailwind CSS 4.1.11 via Vite plugin with custom design system
- Alpine.js 3.14.9 for lightweight reactivity and simple interactions
- Nanostores 1.0.1 for efficient global state management
- MDX 4.3.4 for advanced content management with React components
Multi-Language Architecture
- Built-in i18n support with English and Portuguese using Nanostores
- URL-based routing system (en: /, pt: /pt/) for SEO optimization
- Persistent language selection with browser detection
- Extensible translation system for additional languages
Enterprise Components
- SmartNavButtons - Smart intelligent navigation with scroll-lock, keyboard support, and auto-visibility
- MediaBundle System with specialized lightboxes (ImageLightbox, VideoLightbox, CarouselLightbox)
- Multiple Hero variants - Complex with particle animations and Simple for optimal performance
- Testimonials Carousel with automatic cycling and smooth transitions
- Interactive FAQ with Alpine.js-powered expandable sections
- Newsletter Integration with validation and ready for backend connection
Performance & Optimization
- 96+ Lighthouse Scores across all metrics (Performance, Accessibility, Best Practices, SEO)
- Static Site Generation with Astro for maximum speed and SEO
- Astro Islands architecture with partial hydration for optimal JavaScript delivery
- Advanced lazy loading with IntersectionObserver throughout all components
- Image optimization with WebP support and responsive srcset
- Intelligent code splitting and tree shaking for minimal bundle size
🏗️ Architecture Overview
Project Structure
Project Structure
src/
├── components/
│ ├── content/ # HeroContent and content components
│ ├── layout/ # Layout, Navbar, Footer
│ ├── multimedia/ # CommonImage, CommonVideo, ImageCarousel, MultimediaGrid
│ ├── sections/ # About, FAQ, Hero, Manifesto, Testimonials, EditionsComparison
│ └── ui/ # SmartNavButtons, Lightbox, Modal, TestimonialsCarousel
├── content/ # MDX content collections (about, legal, manifesto, modals)
│ ├── about/en|pt/ # About page content by language
│ ├── legal/en|pt/ # Privacy policy, terms of use
│ ├── manifesto/en|pt/ # Manifesto content
│ └── modals/en|pt/ # Modal content
├── i18n/ # Translation files (en.ts, pt.ts, media.ts)
├── lib/
│ ├── hooks/ # Custom React hooks (useTranslation)
│ ├── stores/ # Nanostores for state management
│ └── types/ # TypeScript interfaces and types
├── pages/ # File-based routing (index.astro, privacy.astro, pt/)
├── styles/ # Global CSS and component-specific styles
└── utils/ # Helper functions (i18n, routing, content)
Content Management System
The template includes a sophisticated content management approach:
- • MDX Integration for rich content authoring with React component support
- • Structured Collections with Zod schema validation (manifesto, about, legal, modals)
- • Multi-language Content with automatic routing and language-specific folders
- • Type-safe content queries with Astro's content collections API
State Management
- • Nanostores for global language state with reactive updates and persistence
- • Custom React hooks (useTranslation) for seamless component integration
- • Alpine.js for simple interactions (accordions, mobile menu, section tracking)
- • React state for complex components (carousels, lightbox, modals)
- • URL-based routing with browser detection for language preferences
🎨 Design System
Brand Architecture
- • Dark theme with CSS variables (background-primary, secondary, tertiary, quaternary)
- • Premium color palette: Gold (#d4af37), Purple (#9d4edd), Pink (#ff006e)
- • Professional typography system with responsive fluid scaling
- • Consistent 8px grid system for perfect alignment
Visual Elements
- • Glassmorphism Effects
- • Advanced Animations
- • Gradient Systems
- • Shadow Hierarchy
Component Styling
- • Unified CSS Architecture
- • BEM Methodology
- • Responsive Breakpoints
- • Dark Mode Ready
🧩 Advanced Components
SmartNavButtons System
Smart intelligent navigation system with advanced capabilities:
- • Auto-detection of sections via data attributes
- • Scroll-lock functionality for guided experiences
- • Full keyboard support (Arrow keys, Home, End)
- • Auto-visibility management (hides on scroll, shows when stationary)
- • Mobile-optimized with responsive behavior
- • WCAG 2.1 AA compliant with ARIA labels
MediaBundle Integration
Comprehensive media handling system featuring:
- • CommonImage - Responsive images with lazy loading, lightbox, and multiple layout modes (section, background, default)
- • CommonVideo - Multi-source support (YouTube, Vimeo, Google Drive, local MP4) with play button overlay
- • ImageCarousel - Auto-advancing carousel with navigation, dot indicators, and keyboard controls
- • Specialized Lightboxes - ImageLightbox for images, VideoLightbox for videos, CarouselLightbox for carousels
- • IntersectionObserver-based lazy loading for optimal performance
- • Smooth animations and transitions throughout
Hero Component Variants
- • Complex Hero with advanced particle animations and dynamic gradient backgrounds for premium feel
- • Simple Hero with static stars for clean, fast-loading presentations and optimal performance
- • Background Options support for video, image, or carousel backgrounds with intelligent fallback systems
- • Responsive Typography with fluid scaling and mobile-optimized layouts
🌍 Internationalization
Multi-Language Support
Built-in Languages
- • English (default)
- • Portuguese (/pt/)
- • Extensible for more languages
Technical Implementation
- • Nanostores for reactive global state management
- • Custom React hooks for seamless component integration
- • URL-based routing (en: /, pt: /pt/) with automatic redirects
- • Browser language detection with persistent user selection
- • Type-safe translations with full TypeScript support
Content Localization
- • Translation Management with JSON
- • Language-specific routing
- • Media localization support
- • Cultural adaptations
SEO Optimization
- • Hreflang tags
- • Localized meta tags
- • Language-specific sitemaps
- • Automatic redirects
⚡ Performance & Optimization
Performance Dashboard
96+
Performance
96+
Accessibility
96+
Best Practices
96+
SEO
🚀 Build Optimizations
- Static Generation - Pre-built HTML pages
- Code Splitting - Per-route bundles
- Tree Shaking - Removes unused code
- CSS Purging - Minimal CSS footprint
- Asset Optimization - WebP & compression
⚙️ Runtime Features
- Astro Islands - Partial hydration with client:load, client:visible, and client:idle strategies
- Lazy Loading - IntersectionObserver-based on-demand resource loading
- Smart Prefetching - Intelligent route preloading for seamless navigation
- Service Worker Ready - Offline capability support built-in
- CDN Optimized - Edge deployment ready with optimal caching
🏢 Enterprise Ready
- i18n Support - Multi-language optimized
- SEO Enhanced - Structured data & meta
- Analytics Ready - GTM & tracking setup
- A11y Compliant - WCAG 2.1 AA standard
- Security Headers - CSP ready
🔧 Customization Capabilities
Theme Customization
- • Comprehensive CSS Custom Properties system for colors, spacing, and animations
- • Flexible typography system with responsive fluid scaling
- • Component variants with configurable props and styling options
- • Animation controls with customizable timing and easing functions
Content Management
- • MDX Integration with React component embedding support
- • Structured content collections with Zod schema validation
- • Dynamic routing system with file-based routing
- • SEO management with meta tags, structured data, and sitemaps
Feature Extensions
- • Extensible translation system for adding unlimited languages
- • Modular component library for easy custom component integration
- • Backend integration ready with form validation and API endpoints
- • Analytics setup support (GTM, Google Analytics, custom tracking)
🚀 Live Demo & Examples
Full Demo Experience
Experience all features including:
- ✓ Multi-language switching (EN/PT) with Nanostores state management
- ✓ SmartNavButtons - Smart intelligent navigation system
- ✓ Complete MediaBundle with specialized lightboxes for each media type
- ✓ Interactive components with smooth animations and transitions
- ✓ Fully mobile-responsive design with touch gestures
- ✓ 96+ Lighthouse scores across all metrics in real-world conditions