Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page for the Fotogenic AI WordPress plugin, aimed at showcasing the plugin's features, benefits, in an engaging manner. The primary goal is to attract users, encourage them to try out the plugin, and ultimately convert them into paying customers.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area with an engaging headline, subheadline, and a prominent call-to-action button prompting users to download or try the plugin.
2. **Features Overview**: A section that highlights the key features of the plugin with concise descriptions and accompanying visuals or icons to enhance understanding.
4. **Testimonials**: A section for user reviews and testimonials showcasing positive feedback and success stories to build trust and credibility.
5. **Responsive Design**: A layout that adapts smoothly across all devices, with a focus on mobile-first design principles to ensure a seamless user experience.
6. **Animations**: Subtle but engaging animations that enhance the visual appeal without overwhelming the user, providing a modern feel.

## 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 page should utilize a single-column layout with sections stacked vertically for mobile views, ensuring all elements are easily accessible. The hero section will be followed by features, pricing, testimonials, and a footer section for contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specifically required, as this is a landing page without interactive elements needing complex state management.

## IMPLEMENTATION STEPS
1. **Set Up the Project**:
   - Initialize a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and configure it for the project.

2. **Create the Hero Section**:
   - Design the hero section with a bold headline, subheadline, and a call-to-action button using the specified typography and color.
   - Implement responsive behavior to ensure it looks good on all devices.

3. **Develop the Features Overview Section**:
   - List the main features of the plugin using cards or icons to visually represent each feature.
   - Ensure that the layout is responsive and adjusts based on screen size.

4. **Implement Pricing Plans**:
   - Create a visually distinct pricing section that includes different plans with descriptions and features.
   - Use the primary color for buttons and highlights.

5. **Add Testimonials Section**:
   - Design a testimonials area that showcases user feedback, ensuring it's visually appealing and easy to read.

6. **Finalize the Layout and Add Animations**:
   - Review the overall layout for consistency and responsiveness.
   - Implement subtle animations on scroll for sections to enhance user experience.

## USER EXPERIENCE
Users will land on a visually appealing page that immediately communicates the value of the Fotogenic AI plugin. They will be guided through the features of the plugin, that reinforce the quality of the product. The responsive design ensures that the experience is seamless across devices, with animations that capture attention without distracting from the content. The prominent call-to-action buttons will encourage users to take the next step—whether that's trying out the plugin or purchasing it directly.