Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project "Lovable Prompts" is a landing page designed to promote a task management application featuring drag-and-drop functionality. The main purpose of this landing page is to engage potential users, provide information about the application, and encourage sign-ups through clear calls to action.

## CORE FEATURES
1. **Hero Section**: An engaging introduction with a strong tagline about task management and drag-and-drop functionality, featuring a prominent call-to-action button for users to get started.
2. **How It Works**: A straightforward, step-by-step explanation of the task management process, illustrated with icons to enhance understanding.
3. **Features**: A section detailing the key features of the app, such as task categorization, reminders, and collaboration tools, presented in an appealing format.
4. **Testimonials**: User reviews that establish trust and credibility for the application, showcasing real user experiences and satisfaction.
5. **CTA Section**: A prominent final call to action encouraging users to sign up or learn more, styled with the primary color for visibility.
6. **Contact Information**: A footer section with contact details and links to social media for ongoing engagement and support.

## 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 feature a vertical stack of sections: hero at the top, followed by how it works, features, testimonials, CTA, and contact information in the footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specifically required for this landing page, but can incorporate context API for managing any necessary state.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project using TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Hero Section**: Implement the hero section with a compelling headline, a brief description, and a prominent call-to-action button styled with the primary color.
3. **Develop the How It Works Section**: Design this section using icons and short descriptions to explain the process of managing tasks with drag-and-drop functionality.
4. **Implement the Features Section**: Create visually appealing cards or lists that outline the key features of the application.
5. **Add Testimonials**: Collect and display user testimonials in a rotating carousel or grid format to enhance credibility.
6. **Create the CTA Section**: Design a final call-to-action area that encourages users to sign up, featuring a button styled with the primary color.
7. **Footer Development**: Add a footer with contact information and social media links.
8. **Style and Responsive Design**: Ensure all components are styled according to the specified design principles and are responsive across mobile and desktop views.

## USER EXPERIENCE
Users will arrive on the landing page and immediately encounter a clear hero section that captures their attention. They can easily navigate through the sections to learn how the task management application works, discover its features, and read testimonials from satisfied users. The design prioritizes accessibility, ensuring that key information is readily available, while the prominent call-to-action buttons guide users toward signing up or engaging further. The minimalist aesthetic enhances user experience by keeping the focus on the content without distractions.