Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a functional contact form on a website that integrates with Formspree for handling submissions. The primary purpose is to ensure users can easily reach out through the contact form with a clean and minimalist design that emphasizes usability and clarity.

## CORE FEATURES
1. **Contact Form Integration**: A responsive contact form that collects user email and messages, integrated with Formspree to handle submissions effectively.
2. **Success/Error Messaging**: User feedback for successful submissions or errors during the process, enhancing the user experience.
3. **Minimalist Design**: A clean, simple interface that prioritizes readability and ease of use, focusing on essential elements without distractions.
4. **Responsive Layout**: The form will be designed to work seamlessly on different devices and screen sizes, ensuring accessibility for all users.
5. **Validation**: Real-time validation for form fields to ensure correct input before submission, improving data integrity.

## 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 include a centered form section on the page, with ample padding and margins to ensure clarity and user focus.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this simple form; React's built-in state management suffices.

## IMPLEMENTATION STEPS
1. **Set Up React Project**:
   - Create a new React application using Create React App with TypeScript.
   - Install Tailwind CSS and configure it according to the official documentation.

2. **Install Formspree**:
   - Install the Formspree React library via npm:
     ```bash
     npm install @formspree/react
     ```

3. **Create Contact Form Component**:
   - Build a functional component named `ContactForm` that includes the form fields for email and message.
   - Use the `useForm` hook from Formspree to manage form state and handle submissions.

4. **Implement Form Validation**:
   - Utilize the `ValidationError` component from Formspree to display error messages next to the respective fields.

5. **Style the Form**:
   - Use Tailwind CSS to apply the specified design specifications, ensuring the form fits within the minimalist aesthetic.

6. **Testing**:
   - Test the form functionality in different browsers and devices to ensure responsiveness and usability.
   - Verify email submissions through Formspree.

## USER EXPERIENCE
Users will interact with a straightforward contact form that allows them to enter their email and message. Upon submission, users will receive immediate feedback—either a success message thanking them for their submission or an error message highlighting any issues with their input. The design will ensure that the form is easy to locate and use, with a focus on a hassle-free experience that encourages user engagement.