Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an interactive prototype for a locked iPhone screen, designed to replicate the aesthetic and functionality of the latest iOS versions. The application will showcase a realistic locked screen experience, featuring animations for incoming notifications, enhancing user engagement and providing a premium feel.

## CORE FEATURES
1. **Locked Screen Display**: A realistic representation of an iPhone locked screen with a full-screen wallpaper, centered time, and date display.
2. **Battery and Connectivity Indicators**: Visual indicators for battery level and connectivity (Wi-Fi, cellular) positioned at the top of the screen.
3. **Notification Animation**: A smooth notification that slides down from the top after a 5-second delay, with natural spring animations and a visual micro-bounce effect.
4. **Glassmorphism Notification Design**: A translucent notification card with rounded corners, showcasing application icon, title, and message preview, along with a subtle shadow for depth.
5. **Visual Focus Effect**: The locked screen illuminates slightly when a notification arrives, directing user attention without disrupting the background display.
6. **Fluid Animations**: All animations will run at 60 frames per second, ensuring a seamless and premium user experience.

## 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 layout will feature a central vertical alignment for the locked screen display, with all indicators and notification elements positioned at the top and middle of the screen to maintain visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this prototype

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create Locked Screen Component**: Develop a main LockedScreen component that displays the wallpaper, time, date, and indicators.
3. **Implement Notification Logic**: Create a notification component that appears after 5 seconds with appropriate animations and effects.
4. **Style Components**: Apply Tailwind CSS styles to ensure a minimalist aesthetic, utilizing the specified primary color and typography.
5. **Add Animation Effects**: Use CSS transitions and animation libraries to achieve the fluid animations and spring effect for the notification.
6. **Testing and Refinement**: Test the prototype for responsiveness and performance, making adjustments to animations and styles for optimal user experience.

## USER EXPERIENCE
Users will interact with the application by initially viewing a locked iPhone screen with the current time and date. After 5 seconds, they will see a notification slide down smoothly, drawing their attention while maintaining the locked screen's integrity. The visual effects and animations will create an immersive experience that closely resembles a real iPhone, enhancing the overall feel and engagement of the prototype.