Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project focuses on creating a captivating landing page that incorporates engaging animations to enhance user interactivity while scrolling. The landing page is designed with a minimalist aesthetic, prioritizing clean design and user-friendly navigation to effectively showcase content and drive conversions.

## CORE FEATURES
1. **Hero Section**: A prominent introduction area featuring a captivating headline, subheading, and a call-to-action (CTA) button that encourages users to engage further with the site.
2. **Animated Features Section**: A visually appealing display of key features with animations that activate as users scroll, providing a dynamic understanding of the offerings.
3. **Testimonials Carousel**: A rotating section showcasing user testimonials with subtle animations that enhance readability and draw attention to positive experiences.
4. **Contact Form**: A simple, interactive contact form that allows users to easily reach out, equipped with animations to indicate successful submission.
5. **Responsive Design**: A mobile-friendly layout that ensures all elements are easily accessible and visually appealing across devices.

## 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-page layout featuring a top navigation bar, followed by the hero section, animated features section, testimonials carousel, and contact form, all strategically spaced to create a flow that encourages scrolling.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, but can be implemented if needed for forms or animations.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Components**: Build the individual components for the hero section, features section, testimonials, and contact form.
4. **Implement Animations**: Use CSS animations or a library like Framer Motion to add scroll-triggered animations to the features and testimonials sections.
5. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist design, incorporating the specified primary color, typography, and border radius.
6. **Add Responsive Design**: Ensure all components are responsive using Tailwind's utility classes to adjust layouts based on screen size.
7. **Test Functionality**: Review all components and animations to ensure they function correctly and provide a seamless user experience.

## USER EXPERIENCE
Users will be greeted by an engaging hero section with a clear CTA. As they scroll, they will encounter the animated features that highlight the product's benefits, followed by real user testimonials that build trust. The contact form will provide an easy way for users to get in touch, with visual feedback upon submission. The overall flow will ensure users remain engaged and are encouraged to explore further.