Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a direct sales web page designed to effectively promote and sell an eBook titled "Las 100 prácticas que toda mujer debe conocer si quiere convertirse en una mujer de alto valor." The page will be optimized for conversions, featuring a clean design and user-friendly elements that encourage visitors to make a purchase.

## CORE FEATURES
1. **Urgency Bar**: A prominent banner at the top of the page to create urgency with a limited-time offer message.
2. **Hero Section**: An engaging headline and brief introduction to the eBook that resonates with the target audience's desires and pain points.
3. **Video Section**: An embedded video that showcases the benefits of the eBook and encourages visitors to engage further.
4. **Call-to-Action (CTA)**: A bold, eye-catching button that links directly to the purchase page, integrated with a countdown timer to enhance urgency.
5. **FAQ Section**: An interactive section that addresses common questions and concerns about the eBook, designed to build trust and reduce purchase hesitancy.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, using a limited color palette that emphasizes readability and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds for optimal legibility.
- **Layout**: A single-column layout with sections stacked vertically, ensuring clear visual flow from the urgency bar at the top to the FAQ section at the bottom.
- **Typography**: Use a sans-serif font for a modern look. Headings should be bold and larger for emphasis, while body text should be regular weight for easy reading.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-based styling
- **UI Components**: shadcn/ui for consistent and reusable component design
- **State Management**: React's built-in state management or Context API as needed

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

2. **Create Structure**:
   - Layout the main components: UrgencyBar, HeroSection, VideoSection, CTA, and FAQ.
   - Ensure each component follows the specified design guidelines.

3. **Implement Styling**:
   - Use Tailwind CSS classes to style each component according to the minimalist design specifications.
   - Ensure responsive design principles are applied for mobile and desktop views.

4. **Integrate Functionality**:
   - Implement the countdown timer logic in the CTA component.
   - Ensure the CTA button correctly links to the specified purchase URL.

5. **Test User Interactions**:
   - Ensure all buttons and interactive elements function as expected.
   - Validate that the video is embedded correctly and plays without issues.

6. **Deploy**:
   - Prepare the application for deployment, ensuring all assets are optimized.
   - Deploy the application on a suitable hosting platform, ensuring it is accessible to users.

## USER EXPERIENCE
Visitors will first encounter a striking urgency bar that grabs their attention. As they scroll down, they'll find a compelling hero section that speaks directly to their needs, followed by an engaging video that showcases the eBook's value. The prominent CTA button will be designed to stand out, encouraging immediate action with a countdown timer. The FAQ section will provide answers to common questions, enhancing user confidence and facilitating a smooth purchasing decision. The overall experience will be seamless and intuitive, ensuring visitors feel empowered to make a purchase.