UI Engineering Assignment – Landing Page

This project is a UI-focused frontend implementation based on a provided Figma design.
The objective was to accurately recreate the landing page UI, ensure strong responsiveness across devices, and extend the design system to additional pages.

---

Live Demo

Live Preview: https://ui-task-two-delta.vercel.app/

---

GitHub Repository

Repository: https://github.com/Tushar-Shinde31/UI-Task

---

Objectives

• Recreate the provided Figma landing page with pixel-level accuracy
• Ensure full responsiveness for desktop, tablet, and mobile devices
• Extend the design system to additional pages
• Maintain clean, modular, and readable UI code

This assignment is frontend-only and does not include backend functionality.

---

Tech Stack

• React (Vite)
• Tailwind CSS
• React Router DOM
• JavaScript (ES6+)

---

Features

Landing Page

• Pixel-aligned layout matching the Figma design
• Consistent typography, spacing, and color palette
• Component-based UI structure

Responsiveness

• Optimized layouts for:
  • Desktop
  • Tablet
  • Mobile
• Section reflow and stacking handled using Tailwind breakpoints
• Typography and spacing scale smoothly across screen sizes

Additional Pages

The design system is extended with additional pages:

• About
• Features (or Pricing / Contact)

All pages share a common navigation bar and footer to maintain consistency.

---

Getting Started

Clone the repository

git clone https://github.com/Tushar-Shinde31/UI-Task
cd ui-task

Install dependencies

npm install

Run the project locally

npm run dev

The application will be available at http://localhost:8080.

---

📱 Responsive Screenshots

---

Author

Tushar Shinde Frontend / Full Stack Developer