Comprehensive overview of Voltant Energy website features and capabilities.
- Core Features
- User Experience
- Performance Optimization
- Developer Experience
- Integrations
- Pages & Sections
- Mobile-first approach: Optimized for all devices from smartphones to desktops
- Breakpoint system: Tailwind CSS responsive utilities
- Fluid typography: Scales smoothly across screen sizes
- Touch-friendly: Enhanced interactions for mobile users
- Smooth animations: Framer Motion and GSAP powered transitions
- Micro-interactions: Subtle feedback on user actions
- Loading states: Skeleton screens and progress indicators
- Error handling: User-friendly error messages and fallbacks
- Modular design: Reusable components across pages
- Section templates: Consistent layout patterns
- UI component library: Buttons, cards, forms, and more
- Layout components: Navbar, Footer, containers
- Responsive navbar: Adapts to screen size with mobile menu
- Smooth scrolling: Animated scroll to sections
- Breadcrumbs: Clear navigation hierarchy
- Active states: Visual indicators for current page
- Contact form: React Hook Form with Yup validation
- EmailJS integration: Direct email delivery without backend
- WhatsApp button: Quick contact via messaging
- Form feedback: Success/error states and messages
- Optimized images: Cloudinary-powered delivery
- Lazy loading: Images load as they enter viewport
- WebP/AVIF support: Modern format optimization
- Video support: Optimized video streaming
| Feature | Implementation |
|---|---|
| Code splitting | React lazy loading for routes |
| Asset optimization | Cloudinary automatic optimization |
| Bundle optimization | Vite tree-shaking and minification |
| Caching | Browser caching and CDN delivery |
- LCP (Largest Contentful Paint): Optimized hero images and content
- FID (First Input Delay): Minimal JavaScript blocking
- CLS (Cumulative Layout Shift): Reserved space for dynamic content
- Vite 6: Lightning-fast HMR and builds
- Terser: Advanced JavaScript minification
- PostCSS: CSS optimization and autoprefixing
- Asset hashing: Cache busting for deployments
| Tool | Purpose |
|---|---|
| Vite 6 | Fast development server with HMR |
| ESLint 9 | Code quality and consistency |
| Tailwind CSS 4 | Utility-first styling |
| React DevTools | Component debugging |
src/
├── components/ # Reusable UI components
│ ├── features/ # Feature-specific components
│ ├── forms/ # Form components
│ ├── layout/ # Layout components
│ ├── sections/ # Page section components
│ └── ui/ # Base UI components
├── constants/ # Application constants
├── context/ # React Context providers
├── data/ # Static data files
├── pages/ # Route components
└── utils/ # Utility functions
- React Context: Global state for forms and modals
- Local state: Component-level useState
- Form state: React Hook Form integration
- URL state: React Router for navigation
- Image optimization: Automatic format and size optimization
- Responsive images: Viewport-based sizing
- Transformations: Crop, resize, effects
- CDN delivery: Global edge network
- Client-side emails: No backend required
- Template system: Customizable email templates
- Validation: Pre-send validation
- Error handling: Retry logic and fallbacks
- Continuous deployment: Git-triggered builds
- Serverless functions: Backend logic without servers
- Edge network: Fast global delivery
- Form handling: Alternative form processing
| Section | Description |
|---|---|
| Hero | Full-width banner with call-to-action |
| Video Banner | Embedded promotional video |
| Recent Works | Portfolio showcase |
| Split Images | Visual content display |
| Connect With Us | Contact call-to-action |
- AC Chargers: Level 2 charging solutions
- DC Chargers: Fast charging stations
- CPO Services: Charge point operator solutions
- Engineering Works: Installation and support
- Household: Residential biogas solutions
- Large Scale: Industrial plants
- Containerized: Modular systems
- Smart Waste: Intelligent waste management
- About Us: Company information
- Services: Service offerings
- Contact: Contact form and information
- 404: Custom not found page
| Component | Usage |
|---|---|
HeroSection |
Page hero banners |
HowItWorksSection |
Process explanations |
ProfilesSection |
Team or product profiles |
SeamlessChargingSection |
Feature highlights |
MidSection |
Content sections |
Charger |
Product displays |
| Component | Description |
|---|---|
ServiceCard |
Service feature cards |
ChatButton |
WhatsApp contact button |
ContactForm |
Contact form modal |
Navbar |
Site navigation |
Footer |
Site footer |
- Page transitions: Smooth route changes
- Scroll animations: Elements animate on scroll
- Hover effects: Interactive feedback
- Modal animations: Smooth open/close
- Complex timelines: Sequential animations
- Scroll triggers: Advanced scroll-based effects
- SVG animations: Icon and logo animations
- Performance: Hardware-accelerated animations
- Yup schemas: Declarative validation rules
- Real-time feedback: Instant validation messages
- Field-level errors: Per-field error display
- Submit validation: Final validation before send
- Loading states: Visual feedback during submission
- Success messages: Confirmation on success
- Error handling: Clear error communication
- Accessibility: ARIA labels and focus management
- Environment variables: Sensitive data protection
- Input sanitization: XSS prevention
- CORS handling: Proper origin validation
- HTTPS: Secure communication
| Browser | Version |
|---|---|
| Chrome | Last 2 versions |
| Firefox | Last 2 versions |
| Safari | Last 2 versions |
| Edge | Last 2 versions |
- Multi-language support (i18n)
- Dark mode toggle
- Advanced analytics integration
- Progressive Web App (PWA)
- Enhanced accessibility (WCAG 2.1 AA)