Learning With Us Web
Modern online English education platform with premium design
Overview
Learning With Us (LWU) is a leading online English education platform that evolved from a local private tutoring service in 2017 to a global digital learning hub with over 1,000+ students. This website serves as LWU's definitive digital presence, designed to showcase its dual-nature offerings: digital products (Ebooks and self-paced guides) and educational services (IELTS preparation, General English, and specialized coaching). The core challenge was to architect a high-performance, responsive, and SEO-ready platform within a 24-hour sprint, ensuring production-ready standards.
Problems
Tight 24-hour sprint to production-ready standard
The entire website needed to be architected, designed, developed, and deployed within a single 24-hour period while maintaining production-quality code, responsive design, SEO optimization, and smooth animations.
Dual-content nature: digital products and educational services
LWU offers both digital products (Ebooks and self-paced guides) and educational services (IELTS, General English, Webinars). The information architecture needed to present both content types clearly without confusing visitors.
SEO and performance for organic growth
As a growing educational platform, LWU needed strong SEO foundations — semantic HTML, metadata API, optimized images, and fast LCP — to attract organic traffic and establish credibility in the competitive online education market.
Conversion-optimized UX flow
The website needed to strategically guide visitors from initial interest to enrollment through clear call-to-actions, social proof (student success stories), and an intuitive navigation structure.
Solutions
Next.js App Router with production-ready architecture
Chose Next.js 14 App Router for its SSR capabilities, dynamic routing, and built-in image optimization. Structured the codebase with clear separation of concerns — app router pages, reusable components, centralized data stores, and shared TypeScript interfaces.
Dual-navigation information architecture
Designed a clear content hierarchy with separate navigation paths for Products (Ebooks catalog with filtering) and Services (IELTS, General English, Webinars). The Home page provides a strategic overview bridging both offerings with student success stories as social proof.
Comprehensive SEO and performance optimization
Implemented Next.js Metadata API for dynamic page titles, descriptions, and canonical URLs. Used next/image with priority loading for hero assets. Structured semantic HTML throughout. Achieved fast LCP through optimized image loading and minimal blocking resources.
Strategic UX with premium animations
Designed a premium visual language inspired by world-class educational templates (HopEdu). Framer Motion powers scroll-triggered entrance animations and micro-interactions that guide attention to key conversion points — course enrollment CTAs, product purchase buttons, and contact forms.
Contributions
Architected and developed the complete Next.js 14 application from scratch within a 24-hour sprint, meeting production-ready standards
Built a comprehensive multi-page site: Home, About (with Vision & Mission), Products (catalog with filtering), Services (IELTS, General English, Webinars), and Contact
Implemented Framer Motion animations throughout — scroll-triggered entrance animations, hover effects, page transitions, and interactive micro-interactions
Designed a mobile-first responsive layout supporting all screen sizes from 375px to 1440px+ with careful typography scaling and adaptive grid layouts
Created a centralized data store architecture (data/ directory) for easy content management without a CMS backend, containing all product, service, and company information
Optimized images using next/image with proper sizing, priority loading for LCP assets, and responsive srcset for different viewport sizes
Implemented SEO best practices including Next.js Metadata API for dynamic metadata, semantic HTML structure, and canonical URLs for each page
Built reusable UI components (ProductCard, SectionHeading, Buttons, Inputs, Cards) and layout components (Navbar, Footer) following consistent design patterns
Features
Premium UI/UX Design
High-end educational platform aesthetics inspired by world-class templates with consistent typography, spacing, and visual hierarchy
Product Catalog
Dynamic list of ebooks and digital resources with advanced filtering, detailed product pages, and clear purchase CTAs
Service Offerings
Detailed breakdown of course programs — IELTS preparation, General English classes, and educational webinars with enrollment information
Advanced Animations
Smooth scroll-triggered entrance animations and interactive micro-interactions powered by Framer Motion for a polished user experience
Fully Responsive
Mobile-first design supporting all screen sizes from 375px to 1440px+ with adaptive layouts, typography, and navigation
SEO Optimized
Metadata API for dynamic page metadata, semantic HTML, optimized images, and fast LCP for strong search engine visibility
Tech Stack
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
- Webflow
Gallery
1 / 5
Results
24-Hour Delivery
Complete production-ready website architected, developed, and deployed within a single 24-hour sprint
Full Responsive Coverage
Flawless rendering across all devices from 375px mobile to 1440px+ desktop with consistent user experience
Premium Design Quality
Visual design inspired by world-class educational templates with polished animations, transitions, and micro-interactions
Vercel Deployment
Live at lwu-id.vercel.app with automatic CI/CD, optimized builds, and global CDN distribution