Coaching Institute Landing Page

Year

2025

Tech & Technique

Next.ts, TypeScript, Tailwind CSS, Material UI (MUI), Framer Motion, React Hook Form, Yup, ThemeProvider

Description

A modern, conversion-focused landing page built for a professional **Coaching Institute**, designed to attract students and clearly present courses, mentorship quality, and career outcomes. The project follows a real-world Figma design and focuses on clean UI, accessibility, and performance. The interface supports both **dark and light themes**, ensuring a consistent and polished user experience across all devices.

Key Features:

🎯 High-Conversion Landing Page: Structured sections for courses, mentors, testimonials, and contact
🌗 Dark & Light Theme Support: Seamless theme switching using ThemeProvider
📱 Fully Responsive Design: Optimized for mobile, tablet, and desktop screens
✨ Smooth Animations: Subtle motion effects using Framer Motion
🧩 Modular UI Components: Clean and reusable component architecture
📝 Interactive Forms: Validated inquiry and contact forms using React Hook Form & Yup
🔍 SEO-Friendly Structure: Semantic layout and optimized metadata

Technical Highlights:

Built with Next.js and TypeScript for scalability and maintainability
Styled using Tailwind CSS with utility-based responsive design
Integrated Material UI (MUI) components with custom theming
Used Framer Motion for smooth entrance and scroll-based animations
Implemented form validation with React Hook Form and Yup
Optimized layout and spacing to closely match the original Figma design

My Role

Frontend Developer
Responsible for designing and implementing the complete frontend experience:

🎨 Translated Figma designs into pixel-perfect responsive UI
🌗 Implemented dark & light mode using ThemeProvider
🧩 Built reusable UI components using Tailwind CSS and MUI
⚡ Optimized performance and responsiveness across devices
📝 Integrated and validated user input forms
🤝 Collaborated with design and content requirements