Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide users with real-time weather information. It will feature a clean, minimalist design, allowing users to easily access current weather conditions, forecasts, and additional meteorological data without unnecessary distractions.

## CORE FEATURES
1. **Current Weather Display**: Shows the current temperature, conditions, and humidity for the user's location.
2. **7-Day Forecast**: Provides a detailed forecast for the next week, including daily highs and lows.
3. **Search Functionality**: Allows users to search for weather information in different cities.
4. **Weather Alerts**: Notifies users of severe weather alerts for their selected location.
5. **Responsive Design**: Optimized for mobile and desktop views to ensure a consistent experience across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout will consist of a header with the app title, a central section displaying weather information, a search bar, and a footer with additional links and information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing global state, if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or a similar tool.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**:
   - Header Component: For the application title and navigation.
   - WeatherDisplay Component: To show current weather and forecast data.
   - SearchBar Component: To allow users to enter city names for weather queries.
   - Footer Component: For additional information and links.
4. **Implement State Management**: Utilize React Context API to manage weather data and user preferences.
5. **Fetch Weather Data**: Use a weather API (e.g., OpenWeatherMap) to retrieve weather information based on user input.
6. **Style Components**: Apply Tailwind CSS classes for layout, typography, and responsiveness, adhering to the specified design specifications.
7. **Testing**: Conduct thorough testing across devices and browsers to ensure functionality and design consistency.

## USER EXPERIENCE
Users will first land on a clean interface with a prominent search bar at the top. After entering a city, they will see current weather conditions and a 7-day forecast displayed clearly. The minimalist design will ensure users can quickly find the information they need, while the responsive layout will adapt seamlessly to various screen sizes, allowing for easy access on both mobile and desktop devices. Notifications for weather alerts will be unobtrusive yet noticeable, ensuring users stay informed without feeling overwhelmed.