Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed for selling "Smart Early Learning," a digital product offering simple educational activities aimed at helping children learn letters, numbers, colors, and basic concepts. The page will target mothers of children aged 2 to 7 in various Latin American countries, focusing on providing a solution to concerns about screen time and enhancing quality time spent with children.

## CORE FEATURES
1. **Hero Section**: Eye-catching headline with a strong call to action (CTA) that encourages visitors to purchase the educational guide.
2. **Benefits Section**: Clear, concise explanations of how the product helps improve cognitive development, concentration, and practical life skills without excessive screen time.
3. **Testimonials**: Positive feedback from users highlighting their experiences and the impact of the product on their children’s learning.
4. **Product Video/Image**: A visual representation of the product that showcases its features and benefits, engaging visitors.
5. **Pricing Information**: Clearly displayed price of $13 USD for easy visibility and immediate purchase decision.
6. **FAQ Section**: Address common concerns and questions about the product, enhancing trust and clarity.

## 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 scrollable design, with sections arranged vertically: Hero at the top, followed by Benefits, Testimonials, Product Visual, Pricing, and FAQ.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specifically required for a landing page.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and Tailwind CSS configured.
2. **Create the Hero Section**: Develop a visually striking hero section with a headline and CTA button styled with the primary color.
3. **Build the Benefits Section**: Create a section that highlights the product's benefits using icons or images alongside text for clarity.
4. **Add Testimonials**: Incorporate a carousel or grid layout to display customer testimonials.
5. **Integrate the Product Visual**: Embed a product video or image that clearly shows the activities included in the guide.
6. **Display Pricing Information**: Create a pricing section that emphasizes the $13 price point with purchase options.
7. **Compile FAQ Section**: List frequently asked questions and their answers in a collapsible format for user convenience.
8. **Test Responsiveness**: Ensure all sections of the landing page are responsive and visually appealing on mobile and desktop devices.
9. **Deploy the Landing Page**: Publish the landing page using a suitable hosting platform.

## USER EXPERIENCE
The landing page will provide an intuitive experience for users, guiding them through the benefits of the product in a warm and inviting tone. Each section will be designed to flow seamlessly into the next, encouraging users to engage with the content. The clear CTA will facilitate easy navigation towards purchasing the educational guide, while the FAQ section will alleviate any concerns, enhancing user confidence in the product.