A state-of-the-art, high-performance landing page for Sage, a premium organic skincare brand. This project showcases advanced UI/UX techniques, immersive interactive environments, and robust internationalization.
- The Aura & Resonance Update: Immersive atmosphere with animated film grain and dynamic morphing mesh backgrounds.
- Advanced Micro-interactions: Magnetic buttons, floating decorative elements, and pulsing energy fields.
- Premium UX System: Custom state-aware cursor, smart sticky navigation, and scroll progress indicators.
- Glassmorphic Design: Modern, high-end aesthetics with deep-glass reflections and premium shadows.
- 15 Languages Supported: Comprehensive internationalization including Hebrew, Arabic, Russian, and Japanese.
- Native RTL Support: Perfectly mirrored layouts for Right-to-Left languages (Hebrew, Arabic) with specific typography adjustments.
- Auto-Detection: Intelligent browser language detection with manual overrides and a sleek switcher UI.
- Component-Based Architecture: Fully refactored into modular, maintainable sections.
- Optimized Loading: Strategic lazy-loading of below-the-fold components and assets.
- Cinematic Preloader: High-end entrance animation to mask asset initialization.
- SEO Optimized: Complete metadata implementation (OG Tags, Twitter Cards) for maximum reach.
npm install
npm run dev- Framework: React 18 + TypeScript
- Animations: Framer Motion
- Styling: Tailwind CSS (PostCSS)
- Icons: Lucide React
- Build Tool: Vite
- Deployment: GitHub Pages
src/components: Modular section components and utility UI.src/components/LanguageContext: Internationalization engine.src/index.css: Core design tokens and glassmorphic utilities.
MIT