Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to effectively communicate the core value proposition of the application "q". The main purpose of this landing page is to attract visitors, inform them about the features and benefits of the service, and drive conversions through a clear call-to-action.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction that highlights the key message of "q" with a prominent call-to-action button to engage users immediately.
2. **Features Overview**: A concise presentation of 3-4 primary features of "q", with brief descriptions that illustrate the value and functionality of the service.
3. **Testimonials**: A section dedicated to user feedback showcasing positive experiences, thus building trust and credibility.
4. **Contact Form**: A simple form for users to reach out for inquiries or feedback, enhancing user engagement and support.
5. **Footer**: Contains links to social media, privacy policy, and terms of service for easy navigation and access to additional information.

## 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 include a full-width hero section at the top, followed by a grid or flexbox layout for the features overview, testimonials in a card layout, and a contact form section at the bottom. The footer will span the full width.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for a simple landing page but can use React Context if needed for managing form state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Folder Structure**: Organize components into a logical structure for easy maintenance (e.g., components, assets, styles).
3. **Build Hero Section**: Develop the hero section with a compelling headline, subheading, and a call-to-action button styled with Tailwind CSS.
4. **Develop Features Section**: Create a grid layout to display the features of "q", ensuring clarity and simplicity in the presentation.
5. **Implement Testimonials**: Design a testimonial carousel or grid using shadcn/ui components to enhance visual appeal.
6. **Contact Form**: Create a responsive contact form with input validation, styled with Tailwind CSS, and handle form submission.
7. **Footer Implementation**: Code the footer with links to social media and important pages, ensuring it’s consistent with the overall design.
8. **Testing and Optimization**: Test the landing page across different devices and browsers, optimizing for performance and responsiveness.

## USER EXPERIENCE
The user experience will focus on intuitive navigation and clarity. Users will be greeted by an engaging hero section that immediately communicates the essence of "q". As they scroll, they will encounter well-defined sections that provide information without overwhelming them. The call-to-action will remain visible and inviting, encouraging users to take action, while the testimonials will reinforce the application’s credibility. The contact form will be straightforward, ensuring that users can easily reach out for more information or assistance.