Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a professional landing page for an AI automation agency aimed at enhancing sales through its visually appealing design and smooth animations. The landing page will serve as a marketing tool to attract potential clients, showcasing the agency's services and capabilities in a minimalist and engaging format.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a strong headline, subheadline, and a prominent call-to-action button that guides visitors to learn more or get in touch.
2. **Services Overview**: A section detailing the various AI automation services offered by the agency, using concise descriptions and engaging visuals.
3. **Client Testimonials**: A carousel or grid layout displaying testimonials from satisfied clients, enhancing credibility and trust.
4. **Contact Form**: A simple, user-friendly contact form that allows potential clients to reach out for inquiries or quotes.
5. **Smooth Animations**: Engaging animations throughout the page to create a dynamic and modern user experience.
6. **Additional Resources**: Links to blog posts or case studies that provide further insights into the agency’s expertise and success stories.

## 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 main layout will consist of a vertical stacking of sections, beginning with the hero section, followed by services, testimonials, and ending with the contact form, ensuring a clear flow of information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for consistent and reusable components.
- **State Management**: React's built-in state management will be sufficient for this landing page.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Structure**: Develop the main layout using functional components for the hero section, services, testimonials, and contact form.
3. **Implement Hero Section**: Design the hero section with a headline, subheadline, and CTA button styled with the primary color and rounded borders.
4. **Develop Services Section**: Create a grid or card layout for the services offered, ensuring each card has rounded corners and appropriate padding.
5. **Add Testimonials**: Implement a carousel or grid for displaying testimonials, utilizing smooth animations for transitions.
6. **Create Contact Form**: Design a simple contact form that captures user inquiries, styled to match the overall design specifications.
7. **Incorporate Animations**: Use CSS animations or libraries to add smooth transitions and effects to elements as users scroll.
8. **Test Responsiveness**: Ensure the landing page is fully responsive across all devices and browsers.

## USER EXPERIENCE
Visitors to the landing page will experience a clean and engaging interface with a clear flow of information. The hero section will immediately capture attention, guiding users smoothly through the services and testimonials. The contact form will be easily accessible, encouraging potential clients to reach out. The minimalist design will ensure that the focus remains on the content, enhancing overall user satisfaction and conversion potential.