🎨 Responsive Web UI Components and Layout Design

🧭 Project Overview

A front-end project showcasing responsive UI components and layouts (e.g., Navbar, Cards, Carousel, Jumbotron) built with React and Bootstrap styling, organised for quick preview and iteration.

✨ Features

• Responsive navigation (Navbar) and footer layout
• Reusable content sections (Cards, Jumbotron)
• Interactive UI elements (Carousal, Accordian, Progress)
• Simple navigation pages (e.g., Home, Contact) using React Router
• Bootstrap styling (via CDN) for consistent layout and responsiveness

🏗️ System Architecture

• Entry: src/main.jsx mounts the app
• Routing: React Router switches between pages (e.g., Home and Contact)
• UI Layer: page components (src/Pages/) compose reusable UI components (src/components/)
• Styling: CSS + Bootstrap (CDN in index.html)

Architecture flow (text):
User → React Router → Pages → Components → Bootstrap/CSS

🧰 Tech Stack

• React
• Vite
• React Router
• Bootstrap 5 (CDN)
• HTML, CSS, JavaScript

⚙️ Installation and Setup

1) Clone

git clone https://github.com/HamnaIqbal44/responsive-web-ui-components.git
cd responsive-web-ui-components

2) Install dependencies

npm install

3) Run locally

npm run dev

4) Build (optional)

npm run build
npm run preview

🧪 Usage / Demo

1. Run npm run dev.
2. Open the local URL shown by Vite.
3. Navigate between pages and review responsiveness by resizing the window.

👩‍🎓 Author

Hamna Iqbal

🎓 Final Year BS Software Engineering 📌 Project Domain: Software Engineering, Web Development