Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to create a high-converting landing page for a lead magnet in the horse learning niche. The primary goal is to engage users with direct response copy and interactive elements, encouraging them to provide their email addresses in exchange for a valuable PDF resource. The app will feature various graphics and calls-to-action (CTAs) to enhance user engagement and collect leads effectively.

## CORE FEATURES
1. **Lead Magnet Section**: A prominently displayed area with compelling copy and visuals that highlight the benefits of the PDF, enticing users to submit their email addresses.
   
2. **Interactive Quiz/Game**: An engaging quiz designed for users to test their knowledge about horses. This feature will serve as both an educational tool and a means to capture leads when users submit their email to receive quiz results.

3. **Email Capture Form**: A straightforward form integrated with the landing page that allows users to enter their email addresses to receive the lead magnet. This form should have a clear CTA button with persuasive text.

4. **Direct Response Copy**: Well-crafted copy throughout the landing page focusing on value propositions, benefits, and urgency to encourage immediate action from visitors.

5. **Visual Graphics**: High-quality, relevant graphics that complement the text and enhance the overall aesthetic of the landing page, maintaining a minimalist design.

6. **Mobile Responsiveness**: Ensures that the landing page is fully responsive and provides an optimal experience across various devices, including smartphones and tablets.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - A clean, simple design with plenty of white space. The focus will be on clear typography and straightforward navigation.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a pleasant viewing experience.
- **Layout**: A single scrollable page with sections that flow logically from the lead magnet introduction to the interactive quiz, followed by the email capture form and closing statements. The layout will feature ample white space between sections to enhance clarity.
- **Typography**: Use a modern sans-serif font for body text (e.g., Open Sans or Helvetica) with larger, bold headings to establish a clear hierarchy. Text should be easy to read, with a consistent font size that varies appropriately between headings and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling that promotes consistency and rapid development.
- **UI Components**: Utilize shadcn/ui for a cohesive and accessible component library.
- **State Management**: React's built-in state management will suffice for handling form submissions and quiz state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
   
2. **Create the Landing Page Structure**: Build the main layout using Tailwind CSS. Ensure that the layout is responsive and utilizes flexbox or grid for optimal alignment.

3. **Design the Lead Magnet Section**: Implement the lead magnet section with engaging copy and graphics. Use Tailwind classes to ensure proper spacing and alignment.

4. **Develop the Interactive Quiz**: Create the quiz component that allows users to answer questions. Capture user input and display results at the end with a prompt to enter their email to receive the PDF.

5. **Implement the Email Capture Form**: Build a form using controlled components in React. Include validation for email input and a clear CTA button that stands out visually.

6. **Optimize for Responsiveness**: Test the application across different devices and make adjustments to ensure the layout and functionality are user-friendly on all screen sizes.

7. **Final Testing and Deployment**: Conduct thorough testing for functionality and performance. Deploy the application using a service like Vercel or Netlify for easy access.

## USER EXPERIENCE
Users will be greeted with a streamlined and visually appealing landing page that immediately communicates the value of the lead magnet. The interactive quiz encourages engagement, and the email capture form is strategically placed to convert visitors into leads. Users will experience clear navigation, concise information, and a clean aesthetic that fosters a sense of trust and professionalism, ultimately driving conversions effectively.