Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to showcase your services or products with a clean and simple aesthetic. The purpose is to connect with users effectively while maintaining the integrity of your existing code. The focus will be on providing a seamless user experience with a responsive layout and clear calls to action.

## CORE FEATURES
1. **Hero Section**: A prominent introduction area that captures visitors' attention with a compelling headline and a brief description of the offerings.
2. **Features Overview**: A section highlighting key features or benefits, presented in a visually appealing format that encourages further exploration.
3. **Testimonials**: A dedicated area for customer feedback or endorsements to build trust and credibility with potential clients.
4. **Call to Action (CTA)**: Strategically placed buttons encouraging users to take action, such as signing up or contacting for more information.
5. **Contact Form**: A simple and accessible form allowing users to reach out directly for inquiries or support.
6. **Responsive Design**: Ensuring that the layout is adaptable to various screen sizes for optimal viewing on both desktops and mobile 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 single-column layout with a top hero section, followed by features, testimonials, and a contact form, all separated by ample white space for clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, but consider using React's built-in state management or Context API if needed for form handling.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Configure Tailwind CSS**: Set up the Tailwind CSS configuration file and ensure it's integrated into your project.
3. **Create Components**:
   - Develop the Hero section component with a background image or color and text overlay.
   - Build a Features component that uses a grid layout to present key features.
   - Create a Testimonials component that displays user feedback in a carousel or grid format.
   - Implement a Call to Action component with styled buttons.
   - Design a Contact Form component with necessary input fields and submission handling.
4. **Style Components**: Utilize Tailwind CSS utility classes to achieve the minimalist design, focusing on spacing, colors, and typography.
5. **Responsive Design**: Use Tailwind's responsive utilities to ensure the layout adjusts for different screen sizes.
6. **Testing**: Conduct thorough testing to ensure all components function correctly and the design remains consistent across devices.

## USER EXPERIENCE
Key user interactions will include navigating through the landing page via the hero section, exploring features, reading testimonials for social proof, and completing the contact form to reach out. The smooth transitions and clear layout will enhance user engagement, encouraging visitors to take action without feeling overwhelmed. The minimalist approach will ensure that users can easily digest information and navigate the site intuitively.