A pixel-perfect, performance-optimized redesign of Zomato's landing page
Built with React.js and Tailwind CSS. Fully responsive, component-driven architecture with smooth UI interactions and a clean modern aesthetic on top of Zomato's original design language.
This project is a UI revamp of zomato.com — rebuilt from scratch in React.js with Tailwind CSS. The goal was to recreate and elevate Zomato's landing page with a cleaner component structure, improved visual hierarchy, and a fully responsive layout that works across all screen sizes.
This is a frontend-only UI project — no backend, no API calls. It demonstrates component architecture, responsive design, and the ability to faithfully translate a real-world production design into clean, maintainable React code.
| Section | Changes |
|---|---|
| Hero / search bar | Rebuilt with React, improved layout and spacing |
| Navigation | Fully responsive with mobile-friendly structure |
| Collections grid | Component-driven card layout with hover states |
| Restaurant listings | Clean card components with rating and meta info |
| Footer | Restructured link columns, improved typography |
| Overall | Tailwind utility classes replacing inline/legacy CSS — consistent spacing, color system, and responsive breakpoints throughout |
| Technology | Purpose |
|---|---|
| React.js | Component-based UI architecture |
| Tailwind CSS | Utility-first styling, responsive design |
| Vite | Fast dev server and build tooling |
| Vercel | Deployment and hosting |
- Node.js v18+
git clone https://github.com/Ritik2513/zomato-revamp.git
cd zomato-revampnpm installnpm run devApp runs at http://localhost:5173
npm run buildzomato-revamp/
├── public/ # Static assets, favicon
└── src/
├── components/ # All UI components
│ ├── Navbar.jsx
│ ├── Hero.jsx
│ ├── SearchBar.jsx
│ ├── CollectionsGrid.jsx
│ ├── RestaurantCard.jsx
│ └── Footer.jsx
├── assets/ # Images, icons
├── App.jsx # Root component, layout
└── main.jsx # Entry point
Component-per-section architecture Every visible section of the page is an isolated React component. This makes the codebase easy to navigate, modify, and extend — adding a new section means adding one component, not editing a monolithic file.
Tailwind over custom CSS
Tailwind's utility classes enforce a consistent spacing and color scale across every section without writing a single custom CSS rule. The result is a design system that scales predictably and is trivial to make responsive with breakpoint prefixes (md:, lg:).
Vite over Create React App Vite's dev server starts in under 300ms and rebuilds on change near-instantly. For a UI-focused project where you're iterating on design constantly, fast feedback loops matter.
This is a UI study and frontend practice project — not affiliated with, endorsed by, or connected to Zomato in any way. All Zomato branding, trademarks, and design references belong to Zomato Limited. Built purely for learning and portfolio purposes.
Ritik Kumar Gupta — Full Stack Engineer