Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to provide a weather forecast based on the user's location. The page features a visually striking representation of a model dressed according to the weather conditions, set against a backdrop of the user's location. The goal is to create an engaging and interactive experience that combines weather information with attractive visuals.

## CORE FEATURES
1. **Location Detection**: Automatically detect the user's location to provide accurate weather forecasts.
2. **Weather Representation**: Display a beautifully designed model dressed according to the current weather conditions (sunny, windy, rainy, snowy).
3. **Dynamic Background**: Use an image of the user's location as the background, enhancing the visual appeal of the page.
4. **Forecast Information**: Include detailed weather information such as temperature, humidity, and wind speed, presented in a user-friendly layout.
5. **Call To Action (CTA)**: A prominent CTA button encouraging users to check back for updates or share the page.
6. **Responsive Design**: Ensure the page is fully responsive, providing a seamless 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**: A central hero section featuring the model and background image, with forecast details below, and a footer for additional links and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, use local state for managing weather data

## IMPLEMENTATION STEPS
1. **Set up the React project**:
   - Initialize a new React application with TypeScript.
   - Install Tailwind CSS and configure it according to the project needs.
  
2. **Create the main layout**:
   - Implement the hero section that includes the model and background image.
   - Use Tailwind CSS for styling and layout positioning.

3. **Integrate weather API**:
   - Choose a weather API (e.g., OpenWeatherMap) and set up API calls to fetch weather data based on the user's location.
   - Handle location detection using the Geolocation API.

4. **Design the model component**:
   - Create a component that dynamically changes the model's outfit based on the weather conditions received from the API.

5. **Display weather information**:
   - Create a component to display weather details such as temperature, humidity, and wind speed below the hero section.

6. **Implement responsive design**:
   - Ensure that all components are mobile-friendly and adjust layout based on screen size.

7. **Add CTA and footer**:
   - Implement a prominent CTA button and a footer section for additional links and information.

## USER EXPERIENCE
Users will land on a visually appealing page that immediately recognizes their location. They will see a model dressed according to the current weather, with clear and concise weather information presented below. The page will be easy to navigate, with a strong CTA prompting them to engage further. The design will ensure a smooth experience on both desktop and mobile devices, focusing on user interactions that are intuitive and enjoyable.