Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is focused on creating a mobile-optimized landing page designed to provide a seamless user experience. The goal is to ensure all buttons are easily accessible and proportions are tailored for mobile devices, allowing users to navigate effortlessly.

## CORE FEATURES
1. **Hero Section**: A captivating introductory area that includes a strong headline, a brief description, and a prominent call-to-action (CTA) button to engage visitors right away.
2. **Features Overview**: A concise section showcasing the main benefits or features of the service or product, presented in an easily digestible format with icons and brief descriptions.
3. **Testimonials**: A dedicated area for user reviews or testimonials to build trust and credibility, featuring quotes from satisfied customers.
4. **Call to Action (CTA)**: A strategically placed CTA encouraging users to take a specific action, such as signing up or exploring more details, ensuring it stands out on the page.
5. **Contact Section**: A simple form or contact details allowing users to reach out for more information or support, ensuring accessibility on mobile devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will feature a clean and simple aesthetic with ample white space, ensuring that the content is clear and easy to read.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and provide a fresh, modern look.
- **Layout**: The layout will be responsive with a single-column format optimized for mobile screens, ensuring all elements stack neatly and maintain proportions.
- **Typography**: Use a modern sans-serif font for headings and body text (e.g., Montserrat for headings and Open Sans for body text). The hierarchy will emphasize clear, bold headings with adequate spacing for legibility.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for rapid UI development and customization
- **UI Components**: shadcn/ui for pre-built components that align with the minimalist design ethos
- **State Management**: Not required for a simple landing page, but can be implemented if necessary for form handling.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript and install Tailwind CSS.
2. **Create the Hero Section**: Design the hero section with a background image or color, adding a headline, subheading, and a prominent CTA button.
3. **Develop the Features Overview**: Create a grid or list layout to showcase feature icons and descriptions, ensuring responsiveness.
4. **Add Testimonials**: Implement a carousel or static section for testimonials, ensuring quotes are easy to read on mobile devices.
5. **Design the CTA Section**: Position the CTA prominently on the page with clear, actionable text and links.
6. **Implement the Contact Section**: Create a simple contact form that includes fields for name, email, and message, ensuring all inputs are mobile-friendly.
7. **Ensure Responsiveness**: Test the landing page on various mobile devices to ensure that all elements scale properly and maintain usability.

## USER EXPERIENCE
The user experience will focus on intuitive navigation, with all buttons and links large enough for easy tapping. The layout will guide users naturally from the hero section through the features and testimonials to the CTA and contact form. Users will experience smooth transitions and quick load times, fostering a positive interaction with the landing page. The minimalist design will help users focus on the content without distractions, encouraging engagement and conversion.