Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to explain AI placement concepts in a clear and engaging manner. Its goal is to educate users on the benefits and processes of AI placement while encouraging them to take action, such as signing up for more information or services.

## CORE FEATURES
1. **Hero Section**: An eye-catching introduction that briefly describes AI placement and its significance, featuring a strong call-to-action (CTA) button.
2. **Features Overview**: A section that highlights key benefits of AI placement, showcasing how it can improve efficiency and outcomes.
3. **Testimonials**: User feedback and success stories that add credibility and illustrate the effectiveness of AI placement.
4. **Contact Form**: A simple form for users to request more information or get in touch, facilitating lead generation.
5. **FAQ Section**: Answers to common questions about AI placement, helping to address potential concerns and educate visitors.
6. **Footer**: Links to social media, privacy policy, and terms of service for easy navigation.

## 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 focusing on vertical flow, with the hero section at the top, followed by features, testimonials, a contact form, and an FAQ section, all designed to guide the user toward the CTA.

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

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React application using Create React App with TypeScript.
2. **Install dependencies**: Add Tailwind CSS and shadcn/ui to the project. Configure Tailwind CSS in the project.
3. **Create components**: Develop the necessary components for the hero section, features overview, testimonials, contact form, FAQ, and footer.
4. **Implement styling**: Use Tailwind CSS to style the components according to the design specifications, ensuring responsive design for various screen sizes.
5. **Add content**: Populate components with relevant content about AI placement, including text, images, and testimonials.
6. **Test functionality**: Ensure all links and forms work correctly, and validate that the design looks good on different devices.
7. **Deploy the landing page**: Choose a hosting platform (e.g., Vercel or Netlify) to deploy the completed landing page for public access.

## USER EXPERIENCE
The user experience focuses on clarity and engagement. Visitors will first be greeted by the hero section, which succinctly explains AI placement. As they scroll down, they will encounter various sections that provide additional information, build trust through testimonials, and encourage them to reach out via the contact form. The design will be simple and intuitive, ensuring users can navigate freely and find the information they need without distraction. The responsive design will ensure usability across devices, enhancing overall satisfaction.