Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to promote and sell an infoproduct focused on helping individuals stop worrying about others' opinions. The page will feature a clean and minimalist design to enhance user engagement and drive conversions through effective messaging and a straightforward call to action.

## CORE FEATURES
1. **Hero Section**: A compelling introduction with a thoughtful image and motivational text that captures the essence of the product.
2. **Quiz**: An interactive section where users can answer questions to assess their level of concern about others' opinions.
3. **Call to Action**: A strong motivational message followed by a prominent button directing users to purchase the infoproduct.
4. **Testimonials**: Real user experiences and feedback to build trust and credibility for the product.
5. **Benefits List**: A clear outline of the key benefits users will gain from the product, emphasizing personal growth and freedom.
6. **Footer**: Contact information, social media links, and privacy policy for user assurance.

## 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 will be a single-page scrollable design with distinct sections for the hero, quiz, CTA, testimonials, benefits, and footer.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Folder Structure**: Organize components into folders (e.g., `components`, `assets`).
4. **Build Hero Section**: Implement the hero section with the image, text overlay, and style it using Tailwind CSS.
5. **Develop Quiz Component**: Create an interactive quiz component with state management to handle user responses.
6. **Implement CTA Section**: Add a motivational message and button, linking to the purchase URL.
7. **Add Testimonials Section**: Design a section to display user testimonials dynamically or statically.
8. **List Benefits**: Create a visually appealing list of benefits, ensuring clarity and impact.
9. **Create Footer**: Implement a footer with contact information and social media links, using Tailwind for layout.
10. **Test Responsiveness**: Ensure the landing page is fully responsive and performs well on various devices.

## USER EXPERIENCE
Users will first encounter a striking hero section that invites them to reflect on their concerns about others' opinions. As they scroll down, they'll engage with an interactive quiz that encourages self-assessment. The strong call to action prompts them to purchase the infoproduct, reinforced by testimonials that build trust. The benefits section clearly communicates the value of the product, fostering a sense of urgency and relevance. The footer provides essential links and information, ensuring a complete and satisfying user experience.