Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page that integrates a lead capture form directly with an n8n webhook. The main purpose is to streamline the collection of business inquiries through a structured form, ensuring that all submitted data is sent to the specified webhook for automation. The form will be designed to fit seamlessly within the existing layout of the website.

## CORE FEATURES
1. **Lead Capture Form**: A horizontal layout form divided into two sections capturing essential business information, including full name, business name, email address, industry/niche, business challenge, and additional notes.
2. **Webhook Integration**: The form will post all collected data to an n8n webhook, ensuring automated processing of leads.
3. **Responsive Design**: The form will be optimized for both desktop and mobile devices, ensuring usability across different screen sizes.
4. **Validation**: Required fields will be marked with asterisks and validated before submission to ensure all necessary information is provided.
5. **User Feedback**: Upon successful submission, users will receive a confirmation message that their information has been sent.

## 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 form will be displayed in a horizontal split layout, with required fields clearly marked. The lead form will be placed directly under the "Ready to automate?" section, ensuring a logical flow for users.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this simple form submission.

## IMPLEMENTATION STEPS
1. **Set up the React environment**: Create a new React application using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Form Component**: Develop a functional component for the lead capture form, ensuring fields are laid out horizontally.
4. **Implement Form Validation**: Use React state to manage form data and validate required fields before submission.
5. **Configure Webhook Submission**: Set up an `onSubmit` handler that sends the form data to the specified n8n webhook URL upon successful validation. the link is this: https://n8ndroplet.r4yv.tech/webhook/0fff1400-42f8-47c7-bfce-d493b236d296
6. **Add User Feedback**: Implement a confirmation message that displays after successful submission.

## USER EXPERIENCE
Users will encounter a clean and intuitive form interface that is easy to navigate. Upon filling out the required fields, they can submit their information with a clearly labeled button. The validation will prompt users to correct any missing information before submission. After submitting, users will receive confirmation of their entry, assuring them that their information has been captured for follow-up.

This prompt provides a clear and structured approach to creating a minimalist landing page with a functional lead capture form that meets the user's specifications.