Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a portfolio landing page for an AI automation service, designed to showcase services and attract potential clients. The landing page will focus on presenting the business's offerings, client testimonials, and include a clear call-to-action that encourages visitors to get in touch or learn more about the services.

## CORE FEATURES
1. **Hero Section**: An impactful introduction with a strong headline, subheadline, and a prominent call-to-action button that invites visitors to explore the services.
2. **Features Showcase**: A section highlighting key features of the AI automation service, detailing how it can benefit potential clients.
3. **Testimonials**: A carousel or grid layout displaying client testimonials to build trust and credibility.
4. **Contact Form**: A straightforward contact form for inquiries, allowing potential clients to easily reach out for more information.
5. **Footer**: A footer containing links to social media, privacy policy, and additional resources.

## 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 should be a single-page format with a smooth scrolling experience. The sections should be clearly defined and easy to navigate, ensuring a logical flow from the hero section to the contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-based styling.
- **UI Components**: shadcn/ui for reusable components.
- **State Management**: Not required for a simple landing page; local state management can be used if necessary.

## IMPLEMENTATION STEPS
1. **Setup Environment**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout Structure**: Set up the main layout with a header, sections for hero, features, testimonials, and contact, and a footer.
4. **Implement Hero Section**: Design the hero section with an eye-catching headline and CTA button styled with Tailwind classes.
5. **Build Features Section**: Create a responsive grid layout to showcase the features of the AI automation service.
6. **Add Testimonials**: Implement a testimonials carousel or grid using shadcn/ui to display client feedback.
7. **Develop Contact Form**: Create a simple contact form with validation using React state management and Tailwind CSS for styling.
8. **Styling and Responsiveness**: Ensure the entire landing page is responsive and visually appealing on all device sizes by utilizing Tailwind's responsive utility classes.
9. **Testing**: Test the landing page across various browsers and devices to ensure compatibility and performance.
10. **Deployment**: Deploy the landing page to a hosting service like Vercel or Netlify.

## USER EXPERIENCE
The user experience should be seamless and straightforward. Visitors will be greeted by a clean hero section that captures their attention immediately. As they scroll, they can easily access information about the AI automation service's features and read testimonials that reinforce trust. The contact form will be easily accessible, encouraging users to engage without any friction. The minimalist design will ensure that users focus on the content without distractions, promoting a smooth and effective interaction with the page.