1. Enhancing HomePage with React-Bootstrap

Objective: The aim of this assignment is to enhance the visual appeal and usability of a HomePage component for an application using React-Bootstrap. You will focus on integrating React-Bootstrap components, specifically Buttons, Cards, and applying styling for Colors, Borders, and Shadows to create a more engaging user interface.

Problem Statement: Based on a basic HomePage component for any application, your task is to enhance this component using React-Bootstrap, improving its visual presentation and user interaction. You will incorporate buttons for actions, apply color schemes, add borders, utilize shadows for depth, and introduce cards to display content, aiming to create a more attractive and user-friendly page.

Task 1: Integrating React-Bootstrap and Adding Buttons

First, ensure React-Bootstrap is installed in your project: npm install react-bootstrap bootstrap.
Import the necessary React-Bootstrap components into your HomePage component.
Add a primary button labeled "Shop Now" that represents the main call to action (CTA) for users. Expected Outcome:
- The HomePage component should render with a "Shop Now" button styled with React-Bootstrap's primary variant.

Task 2: Applying Color Scheme

Customize the background color of the HomePage component to improve visual appeal.
Apply a text color that complements the background, ensuring good readability. Expected Outcome:
- The HomePage component's background and text colors are updated, enhancing visual contrast and readability.

Task 3: Enhancing UI with Borders, Shadows, and Cards

Add a border to the HomePage component for better definition.
Utilize shadows on the "Shop Now" button to create a sense of depth and focus.
Introduce React-Bootstrap's Card component to display additional content or information on the HomePage. Expected Outcome:
- The HomePage component features distinct borders and shadows, enhancing its aesthetic and emphasizing the "Shop Now" button.
- Utilize the Card component to display additional content or information, such as featured products or promotions.

Task 4: Adding a Responsive Image to HomePage

Select an image that represents the theme of your application. For demonstration purposes, assume the image is located in your project at src/assets/welcome-image.jpg.
Import the Image component from React-Bootstrap and use it to add the chosen image to your HomePage component.
Apply React-Bootstrap's responsive image features to ensure the image scales nicely on different screen sizes.
Expected Outcome:
- The HomePage component should now display the chosen image above or below the welcome message.
- The image should be responsive, adjusting its size according to the screen width without distorting its aspect ratio.

Module 11 Lesson 5: Assignment | Integrating Bootstrap with React