🎯 Overview
Astra Vitae Lite is a streamlined, high-performance landing page template achieving 96-100 Lighthouse scores across all metrics. Designed for rapid deployment with a single-page design featuring essential sections, it delivers professional quality without complexity.
Target Use Cases
- ▸ Quick Product Launches - Get to market fast with professional quality and minimal setup time
- ▸ Performance-Critical Sites - Achieve 96-100 Lighthouse scores out of the box
- ▸ Clean Portfolio Sites - Professional showcase without unnecessary complexity
- ▸ MVP Landing Pages - Minimum viable product with maximum impact and speed
🏎️ 96-100 Lighthouse 📱 Mobile-First ⚡ Latest Tech 🎨 Modern Design
ESSENTIAL EXPERIENCE
Astra Vitae Lite Template
6
Essential Sections
+ Core Features
🏎️ 96-100 Lighthouse
🖼️ Essential MediaBundle
⚡ Astro 5 + React 19
📱 Mobile-First Design
💼 Commercial License
📚 Full Documentation
⚡ Key Features
Modern Technology Stack
- Astro 5.13.5 - Latest static site generator with Islands architecture
- React 19.1.1 - Modern React with improved performance for interactive components
- TypeScript 5.9.2 - Full type safety and enhanced developer experience
- Tailwind CSS 4.1.11 - Latest utility-first CSS with @theme directive configuration
- Alpine.js 3.14.9 - Lightweight JavaScript framework for simple interactions
Built-in Components
- Smart Navigation - Integrated navbar with automatic section detection (not SmartNavButtons component)
- Media Components - LiteImageCarousel, LiteCommonVideo, and LiteLightbox for images and videos
- Mock Authentication - localStorage-based login/logout system for demonstration purposes
- Newsletter Integration - Email subscription form ready for backend connection
- FAQ Section - Alpine.js-powered collapsible Q&A interface
- Essential Sections - Hero, About, Gallery, Comparison, FAQ, and Newsletter
🏗️ Architecture Overview
Streamlined Structure
Project Structure
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 # Main landing page
│ ├── login.astro # Mock authentication page
│ └── 404.astro # Error page
├── layouts/
│ └── Layout.astro # Base HTML layout
├── styles/
│ └── global.css # Single-file CSS architecture (1,246+ lines)
└── assets/ # Optimized media files (icons, images, videos)
Single-File CSS Architecture
All styling is centralized in one comprehensive CSS file for maximum performance and maintainability:
- • 1,246+ lines of optimized CSS
- • Component-specific sections for easy maintenance
- • Responsive utilities for all screen sizes
- • Performance optimized with CSS purging
Component Integration
- • React Islands for interactive elements only
- • Astro Components for static content
- • Minimal JavaScript for optimal performance
- • Progressive Enhancement approach
Performance Strategy
- • Static Site Generation by default
- • Lazy loading for all media
- • Optimized bundle splitting
- • Minimal runtime overhead
🎨 Design System
Visual Identity
- • Modern Glass Cards with backdrop blur
- • Gradient Backgrounds with smooth transitions
- • Professional Typography with optimal readability
- • Consistent Spacing based on 8px grid
Color Palette
Primary Gold: #d4af37
Primary Purple: #8b5cf6
Primary Pink: #ec4899
Dark Background: #0a0a0a
Responsive Design
- • Mobile-First approach for optimal mobile experience
- • Breakpoint System optimized for all devices
- • Touch-Friendly interactions and button sizing
- • Accessible color contrast and focus states
🧩 Component Library
LiteImageCarousel
Advanced image carousel with:
- • Touch Navigation with swipe gestures
- • Automatic Advancement with timing
- • Lightbox Integration for full-screen
- • Thumbnail Navigation for quick access
- • Lazy Loading for performance
- • Responsive sizing for all screens
LiteCommonVideo
Multi-source video player supporting:
- • YouTube Integration with auto-embedding
- • Local Video Files with HTML5 player
- • Custom Thumbnails and play overlays
- • Autoplay Controls with user preference
- • Mobile Optimization with touch controls
- • Performance optimized loading
LiteLightbox
Professional media lightbox featuring:
- • Full-Screen Experience with smooth transitions
- • Keyboard Navigation with arrow keys and ESC
- • Touch Gestures for mobile navigation
- • Loading States with professional animations
- • Backdrop Blur for focused viewing
Mock Authentication System
Demo-only authentication system with:
- • Persistent Sessions using localStorage (NOT production-secure)
- • Professional UI/UX ready for real backend integration
- • Proper Logout with localStorage cleanup
- • Responsive Forms optimized for all devices
📊 Performance Specifications
Performance Dashboard
96-100
Performance
100
Accessibility
100
Best Practices
100
SEO
🔄 Lite vs Premium Comparison
| Feature | Lite Template | Premium Template |
|---|---|---|
| Lighthouse Scores | 96+ (all metrics) | 96+ (all metrics) |
| Production Sections | 6 essential sections | 10 complete sections |
| Tech Stack | Astro 5 + React 19 + TS | Astro 5 + React 19 + TS |
| SmartNavButtons | ❌ (integrated navbar) | ✅ Smart intelligent navigation |
| i18n System | ❌ (English only) | ✅ Complete (EN/PT, expandable) |
| Media Bundle | ✅ Essential (inline/section, basic) | ✅ Advanced (background, fancy animations) |
| Animated Hero Background | ❌ | ✅ Customizable particles |
| Testimonials Carousel | ❌ | ✅ Auto-slide + star ratings |
| MDX + Modal System | ❌ | ✅ Type-safe content + modals |
| Legal Pages + GDPR | ❌ | ✅ Privacy, Terms + Consent |
| Commercial License | ✅ Unlimited projects | ✅ Unlimited projects |
| Documentation | ✅ Complete | ✅ Complete |
| Best For | Quick launches, MVPs | Enterprise, multi-market |
When to Choose Lite
- ✓ You need a fast launch with 96+ Lighthouse scores
- ✓ Your site is single-language (English only)
- ✓ Essential media features (inline/section modes) are sufficient
- ✓ Budget-conscious: $77 vs $147
- ✓ Building an MVP, portfolio, or simple landing page
- ✓ Don't need SmartNavButtons, i18n, or advanced animations
When to Choose Premium
- ⭐ Need multi-language support (EN/PT with expandable i18n)
- ⭐ Want SmartNavButtons (Smart intelligent navigation)
- ⭐ Require advanced Media Bundle with background modes + animations
- ⭐ Need Testimonials Carousel, MDX system, and Modal components
- ⭐ Building for enterprise or multiple markets
- ⭐ Want animated hero background + legal pages + GDPR consent
🚀 Live Demo
Experience Lite Performance
See the speed and elegance of our streamlined template:
- ✓ Lightning-fast page loads
- ✓ Smooth animations and transitions
- ✓ Mobile-responsive design
- ✓ Interactive components
- ✓ Media galleries and carousels
- ✓ Perfect Lighthouse scores