A fully responsive, pixel-perfect clone of the Coding Ninjas landing page built using React + Vite + TailwindCSS. This project includes smooth animations, auto-scrolling sliders, glowing UI elements, animated headings, dynamic highlights, responsive layouts, and clean reusable components.
#🎨 UI & Components
➤ Hero section with animated heading & glowing gradient form card
➤ Courses section with responsive horizontal scroll and category filters
➤ Stats section with scroll-synced animations & active state transitions
➤ Advantages comparison table with mobile-first responsiveness
➤ Auto-scrolling placement carousel
➤ Highlight text animation with shine effect
➤ Fully responsive footer
➤ Pixel-perfect match to the original Coding Ninjas UI
➤ All components scale smoothly
➤ Dynamic font sizing
➤ Adaptive layouts using Tailwind breakpoints
➤ Optimized spacing for smaller devices
➤ React
➤ Vite
➤ TailwindCSS
➤ Lucide / React Icons
➤ Custom CSS animations
src/ ├─ components/ │ ├─ Navbar.jsx │ ├─ Hero.jsx │ ├─ Courses.jsx │ ├─ Stats.jsx │ ├─ WhyUs.jsx │ ├─ Advantages.jsx │ ├─ Placements.jsx │ ├─ Footer.jsx │ └─ HighlightText.jsx ├─ App.jsx ├─ main.jsx └─ index.css
This project uses the official React plugin for Vite:
@vitejs/plugin-react
Fast Refresh is enabled by default.
React Compiler
Not enabled by default due to dev/build performance overhead. Enable it only if needed: https://react.dev/learn/react-compiler/installation
If you're planning a production-grade app, consider adding TypeScript + typescript-eslint. Template: https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts
● Added highlight animation
● Added dynamic glow gradients
● Fully redesigned responsive behavior
● Added auto-scroll logic for placements
● Optimized border + glow rendering
● Custom scroll animations in Stats
● Multi-device optimizations
● Matching the original Coding Ninjas visuals
Developed by — "Rohan 💓"