Weather.jsx: Dynamic background / gradient based on condition

Currently, the Weather.jsx component displays weather information but uses a static background. The goal is to enhance the UI by dynamically updating the background or gradient based on the current weather condition (e.g., sunny, rainy, cloudy, snow). This will improve visual appeal and user experience.

Acceptance Criteria:

Background or gradient changes dynamically according to weather condition.
Supports at least the main weather types: Sunny, Rainy, Cloudy, Snow, Thunderstorm, Mist.
Works seamlessly with existing UI and does not affect performance.
Optional: Smooth transition animation when the weather condition changes.

Reference / Suggestions:

Use CSS gradients or background images.
Can use condition codes from the weather API to determine the background.