Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a clean, minimalist landing page for a builder automation agency that provides various AI automation services. The website aims to showcase the agency's offerings with a premium feel, focusing on user engagement through smooth scrolling and animation effects.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with a clear value proposition and a call-to-action (CTA) button that directs users to learn more about services.
2. **Services Overview**: A section highlighting the different types of AI automation services offered, with brief descriptions and icons for visual appeal.
3. **Testimonials**: A rotating carousel displaying client testimonials to build trust and credibility.
4. **Portfolio Showcase**: A visually appealing presentation of past projects or case studies, demonstrating the agency's capabilities.
5. **Contact Form**: A simple contact form for inquiries, allowing users to easily reach out for more information or quotes.
6. **Animated Scrolling**: Smooth scrolling animations and framer-type animations to enhance the user experience and keep visitors engaged.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasize a clean, simple design with ample white space to create a premium aesthetic. 
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a modern look.
- **Layout**: The layout will consist of a full-width hero section at the top, followed by a grid layout for services, a testimonials carousel, a portfolio section, and a contact form at the bottom.
- **Typography**: Use a modern sans-serif font for headings (e.g., "Montserrat") and a readable serif font for body text (e.g., "Roboto"). Maintain a clear hierarchy with larger font sizes for headings and appropriate spacing for legibility.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and type-safe development experience.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid and responsive design adjustments.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components that fit the minimalist aesthetic.
- **State Management**: React's built-in state management for handling form submissions and dynamic content.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Structure**: Build the main components for the hero section, services, testimonials, portfolio, and contact form using functional components.
3. **Integrate Tailwind CSS**: Apply Tailwind utility classes to style the components according to the minimalist design specifications.
4. **Implement Animations**: Use libraries like Framer Motion to add scrolling and entrance animations to enhance the user experience.
5. **Connect Contact Form**: Set up form handling logic to capture user inquiries and manage form submissions effectively.
6. **Test Responsiveness**: Ensure the website is fully responsive across different devices and screen sizes.

## USER EXPERIENCE
Users will be greeted with a clean hero section that clearly states the agency's value proposition. As they scroll down, they will encounter smooth transitions to the services offered, supported by engaging visuals and concise descriptions. The testimonials section will provide social proof, while the portfolio showcase will visually demonstrate the agency’s expertise. The contact form will be easily accessible, allowing users to reach out without hassle, ensuring a seamless and enjoyable browsing experience.