🚀 Razorpay Modern UI Clone
A fully responsive, animated, and modern Razorpay landing page clone built with React + Vite + Tailwind CSS, featuring premium UI effects like 3D Tilt, Scroll Reveal, Navbar Hover Animation, Ripple Buttons, and smooth Gradient Scroll Background.
✨ Features 🎨 Beautiful Modern UI
Fully responsive layout
Razorpay-style premium design
Smooth gradient background animation
Professional fonts, spacing, and layout polish
⚡ Next-level Animations
Scroll reveal effects on every section
Card hover glow & lift
3D tilt animation
Ripple effect on buttons
Navbar hover underline (Razorpay-style)
📱 Responsive Design
Optimized for: ✔ Mobile
✔ Tablet
✔ Laptop
✔ Ultra-wide screens
⚛️ Powered By Modern Stack React – component-based architecture Vite – ultra-fast bundler Tailwind CSS – utility-first styling Intersection Observer for smooth scroll animations 🏗️ Sections Included Hero Section Navbar with hover animation Testimonials section (Sliding reveal) Industry section Innovation section Products section RazorpayX section No-code products section (Cards with animations)
razorpay/ ├── dist/ # Production build output
├── src/ # Main source code
│ ├── components/ # All UI components (Hero, Navbar, Animations, Sections)
│ ├── App.jsx # Main app file
│ ├── main.jsx # React entry file
│ └── index.css # Tailwind + Custom animations
├── vite.config.js # Vite configuration
├── package.json # Dependencies & scripts
└── README.md # Project documentation
| Technology | Purpose |
|---|---|
| React | UI rendering |
| Vite | Build tool |
| Tailwind CSS | Styling |
| JavaScript | Logic |
| GitHub Pages / Vercel | Deployment |
⚙️ Install & Run Locally
2️⃣ Install Dependencies npm install
3️⃣ Run Development Server npm run dev
4️⃣ Build for Production npm run build
🌍 Live Demo
🔗 GitHub Pages: https://mijjumeraj.github.io/razorpay/
⚡ Or deploy to Vercel for best performance!
🌟 Highlights 💠 Premium UI Effects
Animated cards
Hover transitions
Scroll-based reveals
Gradients and shadows
💠 Clean & Maintainable Code
Component-based structure
Organized folders
Custom animations in CSS
Easy to upgrade or modify
🧩 Customization
You can customize: Colors Logos Animations Text content Sections order All components are separated in src/components.
💡 Why I Built This Project
This project is built to practice: Real-world UI layout
Modern animations
React + Vite workflow
GitHub deployment
Tailwind mastery
Also great for: ✔ Portfolio
✔ Resume
✔ Interview assignment
✔ Learning modern frontend
🤝 Contributing
Pull requests are welcome! Feel free to suggest improvements or new animations.
⭐ Support
If you like this project, please give it a ⭐ on GitHub — it motivates me to build more amazing UI projects!
👨💻 Author
Merajuddin Ansari Frontend Developer • React • Animations • UI/UX 🚀 Building beautiful web experiences.
Developer section
Footer (clean and responsive)