[FEATURE] 🗺️ User Dashboard & Products Pages > Dashboard > implement a reusable linear gradient background component

[luqmonac56]

Figma Link-

• https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=176-53357&t=ybfmYNMB6xh8HxXT-1
• https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=4-49513&t=ybfmYNMB6xh8HxXT-1

### Description
Develop a reusable Linear Gradient Generator component. This component will be used to create and apply linear gradient backgrounds to various elements on the website. The Linear Gradient Generator should be flexible, allowing customization of gradient colors, directions, and stops. It should include the following features:

Acceptance Criteria

The Linear Gradient Generator component is implemented according to the design.
The component should allow customization of gradient colors, directions, and stops.
Ensure the component is fully responsive and works well across different screen sizes.
The generated gradients should be smooth and visually appealing.

### Requirements
The component should receive the following props:
colors: An array of color values to be used in the gradient.
direction: The direction of the gradient (e.g., "to right", "to bottom", "45deg").
stops: An optional array of stop positions for each color in the gradient.

Tasks

• Ensure the component renders correctly with various color combinations.
• Check that the component handles different gradient directions and stop positions.
• Develop the Linear Gradient Generator component based on the provided requirements.
• Implement handling for gradient colors, directions, and stops.
• Ensure the generated gradients are smooth and visually appealing.
• Test the component for responsiveness and compatibility across different devices.