Al Nasser E-Commerce Landing Page
- React 18
- TypeScript
- Vite
- Tailwind CSS
- Three.js
- AOS
- i18n
A high-performance, modern landing page serving as the primary digital storefront for Al Nasser, a prominent retail brand with over 52 branches in Egypt and Kuwait. Designed to balance impression-driven brand storytelling with conversion optimization.
Key Features & Technical Architecture:
- High-Performance Animations: Opted for lightweight AOS over Framer Motion to drastically reduce bundle size and protect frame rates during smooth scrolling.
- Immersive WebGL Backgrounds: Engineered a custom FloatingLines environment in Three.js, deferring context loading to guarantee ultra-fast Largest Contentful Paint (LCP) times.
- Complete Localization: Fully integrated i18n supporting both English and Arabic with robust Right-to-Left (RTL) capability for the GCC market.
- Custom Theme Engine: Developed a lightweight useThemeMode hook to manage light/dark mode transitions mapped natively to OS preferences.
My Role & Implementation:
I architected and built the entire front-end of this project from scratch using React 18, establishing our team's first step into level-A corporate systems. I strictly enforced performance best practices—utilizing React.memo, aggressive code splitting for below-the-fold content via Suspense, and modern asset optimizations—resulting in a flawless 100/100 performance and SEO score across all Google Lighthouse tests.
Project Status & Scale:
This successfully completed Phase One serves a brand with 2+ million active cross-platform followers. It anchors the ecosystem before the rollout of the full e-commerce module, management dashboard, and mobile applications.